:root{
      --bg:#ffffff;
      --text:#0f172a;        /* slate-900 */
      --muted:#475569;       /* slate-600 */
      --border:#e2e8f0;      /* slate-200 */
      --surface:#ffffff;
      --surface2:#f8fafc;    /* slate-50 */
      --primary:#0f172a;     /* button dark */
      --accent:#f97316;      /* orange-500 */
      --shadow: 0 10px 30px rgba(17,24,39,.08);
      --radius: 18px;
      --radius2: 26px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:var(--bg);
      line-height:1.45;
    }
    a{color:inherit}
    .container{
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 16px 80px;
    }

    /* HERO */
    .hero{
      display:grid;
      gap:28px;
      grid-template-columns: 1fr;
      align-items:center;
    }
    @media (min-width: 900px){
      .hero{grid-template-columns: 1.1fr .9fr;}
    }
    h1{
      font-size: 34px;
      letter-spacing:-.02em;
      margin:0;
    }
    @media (min-width: 900px){
      h1{font-size: 44px;}
    }
    .subtitle{
      margin-top: 12px;
      color:var(--muted);
      font-size: 16px;
    }
    @media (min-width: 900px){
      .subtitle{font-size: 18px;}
    }
    .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 18px;
      border-radius: 14px;
      text-decoration:none;
      font-weight:600;
      border:1px solid transparent;
      transition: opacity .15s ease, background .15s ease;
      white-space:nowrap;
    }
    .btn.primary{background:var(--primary);color:#fff; box-shadow: var(--shadow);}
    .btn.secondary{background:transparent;border-color:var(--border);color:var(--text);}
    .btn.accent{background:var(--accent);color:#fff;}
    .btn:hover{opacity:.92}

    .note{
      margin-top: 14px;
      font-size: 13px;
      color: #64748b; /* slate-500 */
    }

    .heroMedia{
      border:1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      background: var(--surface2);
    }
    .heroMedia img{
      width:100%;
      height: 300px;
      object-fit: cover;
      display:block;
    }
    @media (min-width: 900px){
      .heroMedia img{height: 390px;}
    }

    /* CARD */
    .card{
      margin-top: 26px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 22px;
    }
    .card h2{
      margin:0;
      font-size: 22px;
      letter-spacing:-.01em;
    }
    .card p{margin:10px 0 0;color:var(--muted)}

    /* PACKAGES */
    .sectionHeader{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-top: 34px;
    }
    .sectionHeader h2{
      margin:0;
      font-size: 26px;
      letter-spacing:-.01em;
    }
    .sectionHeader .small{
      font-size: 13px;
      color:#64748b;
      margin:0;
    }

    .tableWrap{
      margin-top: 14px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      background:#fff;
      box-shadow: var(--shadow);
    }
    table{
      width:100%;
      border-collapse:collapse;
      font-size: 14px;
    }
    thead{
      background: var(--surface2);
      color:#64748b;
      font-size: 13px;
    }
    th, td{padding: 14px 14px; text-align:left; vertical-align:middle;}
    tbody tr{border-top:1px solid var(--border);}
    tbody td:first-child{font-weight:600}

    /* Recommended Package */
    .recommendedRow{
      background: linear-gradient(90deg, #fff7ed, #ffffff);
    }
    .recommendedRow td{
      border-top: 2px solid var(--accent);
    }
    .badge{
      display: inline-block;
      margin-bottom: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 800;
      color: #ffffff;
      background: var(--accent);
      border-radius: 999px;
    }
    .pkgName{
      font-weight: 800;
      line-height: 1.25;
    }

    /* TRUST */
    .trust{
      margin-top: 34px;
      display:grid;
      gap:12px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 900px){
      .trust{grid-template-columns: repeat(4,1fr);}
    }
    .trustItem{
      border:1px solid var(--border);
      border-radius: var(--radius);
      background:#fff;
      box-shadow: var(--shadow);
      padding: 16px;
    }
    .trustItem .t{font-weight:700}
    .trustItem .d{margin-top:6px; color:var(--muted); font-size: 13px}

    /* FAQ */
    .faq{
      margin-top: 34px;
    }
    .faq h2{
      margin:0 0 10px;
      font-size: 26px;
    }
    details{
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 14px 14px;
      background:#fff;
      box-shadow: var(--shadow);
      margin-top: 10px;
    }
    summary{
      cursor:pointer;
      font-weight:650;
      list-style:none;
    }
    summary::-webkit-details-marker{display:none}
    details p{
      margin:10px 0 0;
      color:var(--muted);
      font-size: 14px;
    }

    /* Footer CTA */
    .footerCta{
      margin-top: 36px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      background: linear-gradient(180deg, #fff, #fff7ed);
      box-shadow: var(--shadow);
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      justify-content:space-between;
    }
    .footerCta .txt{font-weight:700}
    .footerCta .sub{color:var(--muted); font-size: 13px; margin-top:4px}
    .footerCta .left{min-width: 220px}

    /* APP QR IMAGE SECTION */
    .appQrSection{
      margin-top: 18px; /* Footer CTA altına yakın olsun */
      padding: 28px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(180deg, #fff7ed, #fff);
      box-shadow: var(--shadow);
      text-align: center;
    }
    .appQrTitle{
      margin: 0;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .appQrSubtitle{
      margin-top: 8px;
      font-size: 15px;
      color: var(--muted);
    }
    .qrWrapper{
      margin-top: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .qrWrapper img{
      display: block;
      background: #ffffff;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid var(--border);
      width: 150px;
      height: 150px;
      image-rendering: pixelated; /* QR netliği için yardımcı olabilir */
    }
    .appQrNote{
      margin-top: 10px;
      font-size: 13px;
      color: #64748b;
    }

	/* Trust box with QR */
	.trustWithQr{
	  position: relative;
	}

	.trustTop{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 12px;
	}

	.trustQr{
	  width: 100px;
	  height: 100px;
	  padding: 6px;
	  background: #ffffff;
	  border-radius: 12px;
	  border: 1px solid var(--border);
	  flex-shrink: 0;
	}

	/* Mobilde QR biraz küçülsün */
	@media (max-width: 480px){
	  .trustQr{
		width: 80px;
		height: 80px;
	  }
	}

	/* =========================
	   HEADER / FOOTER (no-conflict)
	   ========================= */

	/* Header wrapper */
	.siteHeader{
	  position: sticky;
	  top: 0;
	  z-index: 50;
	  backdrop-filter: blur(10px);
	  background: rgba(255,255,255,.85);
	  border-bottom: 1px solid var(--border);
	}

	/* header layout (container kullanmıyoruz, çünkü .container padding-top:40 var) */
	.siteHeader .headerInner{
	  max-width: 1100px;
	  margin: 0 auto;
	  padding: 12px 16px;
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  gap: 14px;
	}

	/* Brand */
	.siteHeader .brand{
	  display:flex;
	  align-items:center;
	  gap:10px;
	  text-decoration:none;
	}
	.siteHeader .brand img{
	  width:34px;
	  height:34px;
	  border-radius:10px;
	  padding:6px;
	  background: rgba(0,0,0,.03);
	  border:1px solid var(--border);
	}
	.siteHeader .brandName{font-weight:900;letter-spacing:.2px;line-height:1.05}
	.siteHeader .brandTag{
	  display:block;
	  font-size:12px;
	  color:#64748b;
	  margin-top:2px;
	  font-weight:700;
	}

	/* Nav */
	.siteHeader .nav{
	  display:flex;
	  align-items:center;
	  gap:6px;
	  flex-wrap:wrap;
	}
	.siteHeader .nav a{
	  font-size:13px;
	  color:var(--muted);
	  font-weight:700;
	  padding:10px 10px;
	  border-radius:12px;
	  text-decoration:none;
	}
	.siteHeader .nav a:hover{
	  background: rgba(15,23,42,.06);
	  color: var(--text);
	}
	@media (max-width: 940px){
	  .siteHeader .nav{display:none;}
	}

	.siteHeader .navRight{
	  display:flex;
	  align-items:center;
	  gap:10px;
	}

	/* Senin .btn stilini kullanıyoruz, sadece küçük versiyon ekliyoruz */
	.siteHeader .btn.small{
	  padding: 10px 12px;
	  border-radius: 12px;
	  font-size: 13px;
	}

	/* Theme toggle (btn gibi dursun ama ayrı class) */
	.themeToggle{
	  display:inline-flex;
	  align-items:center;
	  gap:10px;
	  padding: 10px 12px;
	  border-radius: 12px;
	  border:1px solid var(--border);
	  background: #fff;
	  color: var(--text);
	  font-weight:700;
	  cursor:pointer;
	}
	.ttIcon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
	.ttText{font-size:13px}

	/* Main içerik sticky header altında ezilmesin */
	.pageMain .container{
	  padding-top: 26px;  /* senin 40px yerine biraz daha dengeli */
	}

	/* Footer */
	.siteFooter{
	  margin-top: 40px;
	  border-top: 1px solid var(--border);
	  background: #F5E6E0; /* ✅ sadece footer FFDDD4*/
	}
	.siteFooter .footerContainer{
	  max-width: 1100px;
	  margin: 0 auto;
	  padding: 26px 16px 40px;
	}
	.siteFooter .footerGrid{
	  display:grid;
	  grid-template-columns: 1.1fr .9fr .9fr;
	  gap: 14px;
	}
	@media (max-width: 920px){
	  .siteFooter .footerGrid{grid-template-columns: 1fr;}
	}

	.siteFooter .footerBrand{
	  display:flex;
	  gap:10px;
	  align-items:flex-start;
	}
	.siteFooter .footerBrand img{
	  width:34px;height:34px;border-radius:10px;padding:6px;
	  background: rgba(255,255,255,.65);
	  border: 1px solid var(--border);
	}
	.siteFooter .footerBrandName{font-weight:900;color:var(--text)}
	.siteFooter .footerBrandText{margin-top:4px;font-size:13px;color:var(--muted);font-weight:700}

	.siteFooter .footerCol h4{margin:0 0 10px;color:var(--text);font-size:13px;letter-spacing:.2px}
	.siteFooter .footerLinks{display:flex;flex-direction:column;gap:8px;font-size:13px}
	.siteFooter .footerLinks a{color:var(--muted);padding:6px 0;font-weight:700;text-decoration:none}
	.siteFooter .footerLinks a:hover{color:var(--text)}

	.siteFooter .footerStoreRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

	/* Social link icons */
	.siteFooter .socialLink{
	  display:inline-flex;
	  align-items:center;
	  gap:10px;
	  color:var(--muted);
	  padding:6px 0;
	  font-weight:700;
	  text-decoration:none;
	}
	.siteFooter .socialLink:hover{color:var(--text)}
	.siteFooter .socialLink .icon{
	  display:inline-flex;
	  width:28px;height:28px;
	  align-items:center;justify-content:center;
	  border-radius:10px;
	  background: rgba(255,255,255,.65);
	  border: 1px solid var(--border);
	}

	/* Payment logos vertical */
	.siteFooter .paymentTrust{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
	.siteFooter .paymentTitle{font-size:12px;font-weight:900;color:var(--text);margin-bottom:8px}
	.siteFooter .paymentLogos{
	  display:flex;
	  flex-direction:line; /* alt alta column*/
	  align-items:flex-start;
	  gap:10px;
	}
	.siteFooter .paymentLogos svg{width:90px;height:auto;opacity:.9}

	/* Footer QR */
	.siteFooter .footerQr{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);text-align:left}
	.siteFooter .footerQrTitle{font-size:13px;font-weight:900;color:var(--text);margin-bottom:10px}
	.siteFooter .footerQrImg{
	  width:180px;height:180px;
	  display:inline-block;
	  padding:10px;
	  border-radius:16px;
	  background:#fff;
	  border:1px solid var(--border);
	  image-rendering: pixelated;
	}
	.siteFooter .footerQrNote{margin-top:8px;font-size:12px;color:#64748b;font-weight:700}

	/* Footer bottom */
	.siteFooter .footerBottom{
	  margin-top:18px;
	  display:flex;
	  justify-content:space-between;
	  gap:12px;
	  flex-wrap:wrap;
	  font-size:12px;
	  color:#64748b;
	  font-weight:700;
	}
	.siteFooter .footerBottomLinks{display:flex;gap:10px;flex-wrap:wrap}
	.siteFooter .footerBottomLinks a{text-decoration:none;color:#64748b}
	.siteFooter .footerBottomLinks a:hover{color:var(--text)}


	/* =========================
	   PACKAGES (card grid)
	   ========================= */

	.plansWrap{
	  margin-top: 18px;
	  border-radius: 26px;
	  background: rgba(255,255,255,.85);
	  border: 1px solid var(--border);
	  box-shadow: 0 10px 30px rgba(17,24,39,.08);
	  padding: 18px;
	}

	.plansTitleRow{
	  display:flex;
	  justify-content:space-between;
	  align-items:flex-end;
	  gap: 12px;
	  flex-wrap:wrap;
	  margin-bottom: 12px;
	}

	.plansTitle{
	  margin:0;
	  font-size: 18px;
	  letter-spacing: -.01em;
	}

	.plansHint{
	  color: var(--muted2);
	  font-size: 13px;
	  font-weight: 700;
	}

	/* 5 kart yan yana, ekrana göre kırılır */
	.plansGrid{
	  display:grid;
	  grid-template-columns: repeat(5, 1fr);
	  gap: 12px;
	}

	@media (max-width: 1100px){
	  .plansGrid{ grid-template-columns: repeat(2, 1fr); }
	}
	@media (max-width: 560px){
	  .plansGrid{ grid-template-columns: 1fr; }
	}

	.planCard{
	  border-radius: 18px;
	  padding: 14px;
	  background: rgba(255,255,255,.65);
	  border: 1px solid var(--border);
	  position: relative;
	  overflow: hidden;
	}

	.planCard.recommended{
	  border-color: rgba(249,115,22,.55);
	  box-shadow: 0 0 0 3px rgba(249,115,22,.14);
	}

	.planTop{
	  display:flex;
	  justify-content:space-between;
	  align-items:flex-start;
	  gap: 10px;
	}

	.planName{
	  margin:0;
	  font-size: 14px;
	  font-weight: 900;
	  letter-spacing: -.01em;
	}

	.planMeta{
	  margin-top: 6px;
	  color: var(--muted2);
	  font-size: 12px;
	  font-weight: 700;
	}

	.planPrice{
	  margin-top: 10px;
	  font-size: 22px;
	  font-weight: 950;
	  letter-spacing: -.02em;
	}

	.planActions{
	  margin-top: 12px;
	  display:flex;
	  gap: 10px;
	  flex-wrap:wrap;
	}

	/* recommended pill */
	.planBadge{
	  display:inline-flex;
	  align-items:center;
	  padding: 7px 10px;
	  border-radius: 999px;
	  font-size: 12px;
	  font-weight: 900;
	  color: #ea6b12;
	  background: rgba(249,115,22,.14);
	  border: 1px solid rgba(249,115,22,.35);
	  white-space: nowrap;
	}

	/* Butonlar senin mevcut .btn stilini kullanır; sadece küçük ölçü */
	.planActions .btn{
	  padding: 10px 14px;
	  border-radius: 12px;
	  text-decoration:none;
	}

	/* Footnote */
	.plansFootnote{
	  margin-top: 10px;
	  font-size: 12px;
	  color: var(--muted2);
	  font-weight: 700;
	}

    .storeRow{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
      margin-top: 12px;
    }
    .storeBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid var(--border);
      font-weight: 700;
      font-size: 13px;
      color: var(--text);
      box-shadow: 0 10px 25px rgba(0,0,0,.06);
    }
    html[data-theme="dark"] .storeBtn{
      background: var(--surface);
      border-color: var(--border);
      color: var(--text);
      box-shadow: var(--shadow);
    }
    .storeBtn:hover{ opacity:.95; transform: translateY(-1px); }
    .storeHint{
      font-size: 12px;
      color: var(--muted2);
      margin-top: 8px;
    }

	/* =========================
	   Package discount badge
	   ========================= */

	.planPriceRow{
	  display: flex;
	  align-items: center;
	  gap: 8px;
	}

	.discountBadge{
	  display: inline-flex;
	  align-items: center;
	  padding: 4px 8px;
	  border-radius: 999px;
	  font-size: 12px;
	  font-weight: 600;
	  line-height: 1;

	  background: #E6F6EC;     /* açık yeşil */
	  color: #137333;          /* koyu yeşil */
	  border: 1px solid #B7E1CD;
	  white-space: nowrap;
	}