/* VITRIN — el yapimi, derlemesiz. Marka: #0400ad (LOGONUN kendi rengi;
   panel.css --us-brand ile ayni). Mor/indigo palet GERI ALINDI.
   Hiz hedefi: tek kucuk CSS, sistem fontu, JS yok (mobil menu CSS-only). */
:root {
    --marka: #0400ad;
    --marka-koyu: #030085;
    --murekkep: #0f172a;
    --metin: #334155;
    --soluk: #64748b;
    --zemin: #ffffff;
    --zemin-2: #f8fafc;
    --cizgi: #e2e8f0;
    --radius: 14px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --murekkep: #f1f5f9;
        --metin: #cbd5e1;
        --soluk: #94a3b8;
        --zemin: #0b1120;
        --zemin-2: #111a2e;
        --cizgi: #1e293b;
    }
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
/* Sabit bar cengel hedeflerinin ustunu ortmesin. */
[id] { scroll-margin-top: 5.5rem; }
/* Hero'suz sayfalarda (sepet, sonuc...) ilk bolum sabit barin ALTINDAN
   baslar — baslik menuyle ust uste biniyordu (canli goruntu). */
main > .section:first-child { padding-top: 9.5rem; }
@media (max-width: 760px) { main > .section:first-child { padding-top: 8rem; } }
body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--metin);
    background: var(--zemin);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--marka); text-decoration: none; }
h1, h2, h3 { color: var(--murekkep); line-height: 1.2; letter-spacing: -0.02em; }

/* 72rem dardi ("site biraz daha genis olsun" — kullanici istegi). */
.container { max-width: 82rem; margin: 0 auto; padding: 0 1.25rem; }

/* --- Ust bar --- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
}
/* VITRIN varyanti: zeminsiz, akista yer tutmaz — hero ustune biner
   ("ana menumuz beyaz olmasin" karari). Portal varsayilan (sticky)
   kalir; .hero'nun ust bosluklari bu 4rem'i telafi eder. */
.topbar-transparent {
    /* Sayfanin tepesinde zeminsiz + ust kenardan nefes (padding);
       kaydirilinca .shifted ile zeminli sticky'ye donusur (asagida).
       fixed: hero ustune binme gorunumu korunur, bar hep gorunur. */
    position: fixed; left: 0; right: 0; top: 0;
    padding-top: .5rem;   /* ust satir yukari yaklassin (kullanici istegi) */
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
    transition: background .2s, padding .2s, box-shadow .2s;
}
.topbar-transparent.shifted {
    padding-top: 0;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
    box-shadow: 0 10px 30px -20px rgba(2, 6, 23, .35);
}
/* Kaydirilinca yardimci satir gizlenir — sticky bar ince kalir. */
.topbar-transparent.shifted .topbar-top { display: none; }
/* IKI SATIR + SOLDA IKI SATIRI KAPLAYAN LOGO (kullanici denemesi:
   siyah ikon-logo). Sag blok: ustte yardimci satir, altta menu. */
.topbar-body { display: flex; align-items: center; gap: 1.75rem; }
.topbar-rows { flex: 1; min-width: 0; }
.topbar-top {
    display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem;
    padding-top: .3rem; padding-bottom: .3rem;   /* alt satira yakin dursun */
    border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 55%, transparent);
    font-size: .9rem;
}
.topbar-panel { padding: .45rem 1rem; font-size: .9rem; }
.topbar-bottom { display: flex; align-items: center; gap: 2.25rem; height: 4rem; }
/* Logo solda kalir, menu SAGA yaslanir (kullanici istegi). */
.topbar-bottom .menu { margin-left: auto; }
.logo { display: flex; align-items: center; color: var(--murekkep); }
/* Yeni logo genis (yazi iceriyor): yukseklik dusuruldu, genislik de
   sinirlandi — oran ne olursa olsun bari domine etmesin. */
.logo img { height: 3.2rem; max-width: 15rem; object-fit: contain; transition: height .2s; }
/* Kaydirilinca tek satir kaliyor — logo da kuculur. */
.topbar-transparent.shifted .logo img { height: 2.1rem; }
/* Karanlik tema logosu artik AYRI DOSYA (logo_white.svg, <picture> ile);
   eski invert filtresi kaldirildi — beyaz logoyu siyaha cevirirdi. */
/* Aralar ve font "biraz daha" acik/buyuk (kullanici istegi). */
.menu { display: flex; align-items: center; gap: 2rem; font-size: 1.02rem; font-weight: 500; }
.menu-button { margin-left: auto; }

/* ONCELIKLI MENU: masaustunde tek satir + tasma olcumu (JS sigmayani
   "⋯" listesine tasir). overflow:hidden olcum icindir; mega ve tasan
   listesi ustbar-alt'a konumlandigi icin KIRPILMAZ. */
@media (min-width: 761px) {
    .menu { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
    .menu > a, .menu-dropdown > a { white-space: nowrap; }
}
.menu-overflow > a { font-size: 1.4rem; line-height: 1; }
/* .menu-dropdown'in display:flex'i [hidden]'i ezer (rozet/sss vakalarinin
   aynisi) — her sey sigarken bos "⋯" gorunuyordu. Acikca kapat. */
.menu-overflow[hidden] { display: none; }
.overflow-list {
    position: absolute; top: 100%; right: 0; z-index: 46;
    display: none; flex-direction: column; min-width: 15rem;
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px;
    box-shadow: 0 24px 48px -24px rgba(2, 6, 23, .35); padding: .5rem;
}
.menu-overflow:hover .overflow-list,
.menu-overflow.open .overflow-list { display: flex; }
.overflow-list a { padding: .55rem .8rem; border-radius: 8px; color: var(--metin); white-space: nowrap; }
.overflow-list a:hover { background: var(--zemin-2); color: var(--marka); }
.overflow-list .menu-dropdown { display: block; align-self: auto; }
/* Tasinan mega ogesinin ALT MENUSU listede akordiyon gibi acilir
   (kullanici: "⋯ altindakilerin alt menuleri yok") — panel degil,
   sade ic liste: sol aciklama/ikon/aciklama gizli. */
.overflow-list .mega {
    position: static; display: none; grid-template-columns: 1fr; gap: 0;
    border: 0; box-shadow: none; background: none; border-radius: 0;
    padding: 0 0 .3rem 1rem;
}
.overflow-list .menu-dropdown:hover .mega,
.overflow-list .menu-dropdown.open .mega { display: block; }
.overflow-list .mega-left { display: none; }
.overflow-list .mega-grid { display: block; }
.overflow-list .mega-item { padding: .3rem .5rem; }
.overflow-list .mega-item .glyph,
.overflow-list .mega-item small { display: none; }

/* MEGA MENU (PayTR kalibi): solda baslik+aciklama, sagda ikonlu ogeler.
   Konum baglami ALT SATIR — panel logoyu KAPSAMAZ (denendi, kullanici
   oncekini begendi: "logoyu kapsamasin"). */
.topbar-bottom { position: relative; }
.menu-dropdown { align-self: stretch; display: flex; align-items: center; }
.menu-arrow { font-size: .7em; opacity: .6; }
.mega {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; grid-template-columns: 19rem 1fr; gap: 2rem;
    /* DORT KOSE DE YUVARLAK (kullanici denemesi): vitrinde ustbar
       ZEMINSIZ oldugu icin panel bara "yapisik" degil, havada duran bir
       kart gibi gorunuyor — ust kenarlarin keskin kalmasi yarim is
       gibiydi. NOT: panel ile tetikleyici arasina BOSLUK konulamaz
       (top:100% degismez); imlec olu bolgeden gecerse CSS-only :hover
       yedegi kopar. Yuvarlaklik bosluk gerektirmiyor. */
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 16px;
    box-shadow: 0 34px 60px -30px rgba(2, 6, 23, .4);
    padding: 1.75rem; z-index: 45;
}
/* .open JS'ten: kapanisa ~250ms tolerans — imlec panele inerken komsu
   menu ogesinin ustunden gecince hover kopup panel kapaniyordu. :hover
   JS'siz yedek olarak durur. */
.menu-dropdown:hover .mega,
.menu-dropdown.open .mega { display: grid; }
/* Govde karartmasi DENENDI ve GERI ALINDI (kullanici begenmedi). */
.mega-left { border-right: 1px solid var(--cizgi); padding-right: 2rem; }
/* Eskiden <h3>'tu; menu metni oldugu ve h1'den once geldigi icin
   <strong>'a cevrildi (bkz. header.blade.php). Gorunum ayni kalsin. */
.mega-title {
    display: block; font-size: 1.2rem; font-weight: 700; line-height: 1.2;
    letter-spacing: -0.02em; color: var(--murekkep); margin-bottom: .6rem;
}
.mega-left p { font-size: .92rem; color: var(--soluk); }
.mega-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: .4rem 1rem; align-content: start;
}
.mega-item {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .7rem .8rem; border-radius: 10px;
}
.mega-item:hover { background: var(--zemin-2); }
.mega-item .glyph { width: 2.4rem; height: 2.4rem; flex-shrink: 0; }
.mega-item strong { display: block; color: var(--murekkep); font-size: .95rem; }
.mega-item small { display: block; color: var(--soluk); font-size: .82rem; line-height: 1.45; margin-top: .15rem; }

/* ARA GENISLIK (761-1100px): iki kolonlu mega sikisip tasiyordu (canli
   goruntu) — panel tek kolona iner, sol aciklama uste gecer. */
@media (min-width: 761px) and (max-width: 1100px) {
    .mega { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.25rem; }
    .mega-left {
        border-right: 0; padding-right: 0;
        border-bottom: 1px solid var(--cizgi); padding-bottom: 1rem;
    }
    .mega-left p { font-size: .88rem; }
    .mega-grid { grid-template-columns: 1fr; gap: .2rem; }
    .mega-item { padding: .5rem .6rem; }
    .mega-item .glyph { width: 2rem; height: 2rem; }
}
.menu a { color: var(--metin); }
.menu a:hover { color: var(--marka); }
.topbar-phone {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; color: var(--murekkep) !important; white-space: nowrap;
}
.btn {
    display: inline-block; padding: .6rem 1.2rem; border-radius: 10px;
    font-weight: 600; font-size: .95rem; transition: transform .15s, box-shadow .15s;
}
.btn-brand { background: var(--marka); color: #fff !important; }
.btn-brand:hover { background: var(--marka-koyu); transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--marka); }
.btn-outline { border: 1.5px solid var(--cizgi); color: var(--murekkep) !important; }
.btn-outline:hover { border-color: var(--marka); color: var(--marka) !important; }

/* Sepetten gelen misafire /giris sayfasinda karsilama notu (2026-07-27:
   kucuk modal iki turda da begenilmedi, akis sayfaya tasindi). */
.login-cart-note {
    background: color-mix(in srgb, var(--marka) 8%, var(--zemin));
    border: 1px solid color-mix(in srgb, var(--marka) 25%, transparent);
    border-radius: .55rem;
    padding: .65rem .9rem;
    font-size: .92rem;
    margin: 0 0 1rem;
}
.login-cart-note a { color: var(--marka); font-weight: 600; }

/* Mobil menu (CSS-only) */
.menu-box { display: none; }
.menu-button { display: none; cursor: pointer; font-size: 1.6rem; color: var(--murekkep); }
@media (max-width: 760px) {
    .menu-button { display: block; }
    .menu {
        /* top: 100% — bar yuksekligi varyanta gore degisiyor (seffaf
           halin ust padding'i var); sabit 4rem bindirme yapardi. */
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--zemin); border-bottom: 1px solid var(--cizgi);
        padding: .5rem 1.25rem 1rem;
    }
    .menu a { padding: .6rem 0; }
    .menu-box:checked ~ .menu { display: flex; }
    /* Mobilde mega duz akar (hover yok): sol aciklama gizli, ogeler
       hafif iceri girintili liste. */
    .menu-dropdown { flex-direction: column; align-items: stretch; }
    .mega {
        position: static; display: grid; grid-template-columns: 1fr;
        border: 0; box-shadow: none; padding: 0 0 .3rem 1rem; background: none;
    }
    .mega-left { display: none; }
    .mega-grid { grid-template-columns: 1fr; }
}

/* --- Hero --- */
.hero {
    background:
        radial-gradient(60rem 30rem at 80% -10%, color-mix(in srgb, var(--marka) 18%, transparent), transparent),
        linear-gradient(180deg, var(--zemin-2), var(--zemin));
    /* Ust bosluk ustbari da kapsar (ustbar-seffaf akistan cikti);
       "slider menuden biraz uzaklassin" — nefes payi genis. */
    padding: 11.5rem 0 4rem;
    text-align: center;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 46rem; margin: 0 auto 1rem; }
.hero p { font-size: 1.15rem; color: var(--soluk); max-width: 38rem; margin: 0 auto 2rem; }
.hero .highlight { color: var(--marka); }

/* --- Bolumler --- */
.section { padding: 4rem 0; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.section-title p { color: var(--soluk); margin-top: .5rem; }

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--radius);
    padding: 1.5rem; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--marka); box-shadow: 0 16px 32px -20px rgba(2, 6, 23, .35); }
.card .glyph, .glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 12px;
    background: color-mix(in srgb, var(--marka) 10%, transparent);
    color: var(--marka);
}
.glyph svg { width: 1.45rem; height: 1.45rem; }
/* Adet rozeti ikonun USTUNE oturur ("yanina sacma basiyor" duzeltmesi). */
.cart-link { position: relative; display: inline-flex; align-items: center; color: var(--murekkep); }
.cart-link:hover { color: var(--marka); }
.cart-icon { width: 1.35rem; height: 1.35rem; }
.search-icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.cart-count {
    position: absolute; top: -.5rem; right: -.55rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--marka); color: #fff; border-radius: 999px;
    font-size: .68rem; font-weight: 700;
}
.search-button { display: inline-flex; align-items: center; gap: .45rem; }
.search-icon { width: 1.15rem; height: 1.15rem; }
.card h3 { margin: .6rem 0 .4rem; font-size: 1.1rem; }
.card p { font-size: .93rem; color: var(--soluk); }
.card .continue { display: inline-block; margin-top: .8rem; font-size: .9rem; font-weight: 600; }

/* --- Fiyat / uzanti seridi --- */
.strip { background: var(--zemin-2); border-block: 1px solid var(--cizgi); }
.tlds { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.tld {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 999px;
    padding: .45rem 1.1rem; font-size: .92rem; font-weight: 600; color: var(--murekkep);
}
.tld span { color: var(--marka); margin-left: .35rem; }

/* --- Madde listesi --- */
.clauses { list-style: none; padding: 0; display: grid; gap: .8rem; max-width: 34rem; }
.clauses li { padding-left: 1.9rem; position: relative; }
.clauses li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--marka); font-weight: 800;
}

/* --- CTA bandi --- */
.cta {
    background: linear-gradient(135deg, var(--marka) 0%, #1a2ee0 100%);
    border-radius: var(--radius); color: #fff; text-align: center;
    padding: 3rem 1.5rem;
}
.cta h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.cta p { color: rgba(255, 255, 255, .85); margin-bottom: 1.5rem; }
.cta .btn { background: #fff; color: var(--marka) !important; }

/* --- Deneyim bandi (22 yil / Gazi Teknopark / 1000+ / 7-24) --- */
.experience {
    background: linear-gradient(135deg, var(--marka) 0%, #1a2ee0 100%);
    border-radius: var(--radius); color: #fff;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; padding: 2.4rem 2rem; text-align: center;
}
.experience-item { display: flex; flex-direction: column; gap: .3rem; }
.experience-item strong {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
/* DOGRUDAN cocuk (etiket) — descendant span:last-child, strong icindeki
   sayac span'ini de yakalayip sayilari kucultuyordu. */
.experience-item > span:last-child { color: rgba(255, 255, 255, .8); font-size: .92rem; }
@media (max-width: 760px) { .experience { grid-template-columns: repeat(2, 1fr); } }

/* --- Altbilgi --- */
.footer { background: var(--zemin-2); border-top: 1px solid var(--cizgi); font-size: .92rem; color: var(--soluk); }
.footer a { color: var(--soluk); }
.footer a:hover { color: var(--marka); }
.footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    /* padding-block: shorthand (3rem 0 2.5rem) .container'in YANAL boslugunu
       sifirliyordu — mobilde icerik kenara yapisti (canli goruntu). */
    padding-block: 3rem 2.5rem;
}
.footer-brand img { height: 1.7rem; margin-bottom: .9rem; display: block; }
.footer-brand p { max-width: 24rem; margin-bottom: .9rem; }
/* h4'ten h3'e gecti (seviye atlamasi) — gorunum ayni. */
.footer h3 { color: var(--murekkep); font-size: .95rem; font-weight: 800; margin-bottom: .9rem; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-bottom { border-top: 1px solid var(--cizgi); padding: 1.1rem 0; font-size: .85rem; }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
@media (max-width: 760px) {
    .footer-top { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- Sozlesme sayfasi icerigi --- */
.contract-content { font-size: .98rem; }
.contract-content h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.contract-content p { margin-bottom: .9rem; }
.contract-content ul, .contract-content ol { margin: 0 0 .9rem 1.3rem; }

/* --- Kaydirak (yatay slayt — Neler Yapiyoruz) --- */
.slider-container { position: relative; }
.slider {
    display: flex; gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: .25rem .25rem .6rem;
    scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider .card { flex: 0 0 17rem; scroll-snap-align: start; }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid var(--cizgi); background: var(--zemin); color: var(--murekkep);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; line-height: 1; cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(2, 6, 23, .35);
}
.slider-arrow:hover { border-color: var(--marka); color: var(--marka); }
.slider-arrow.left { left: -1.1rem; }
.slider-arrow.right { right: -1.1rem; }
@media (max-width: 760px) {
    .slider-arrow { display: none; }   /* mobilde parmakla kaydirilir */
    .slider .card { flex-basis: 15rem; }
}

/* --- Bilgi simgesi + tooltip (eklenti aciklamalari) --- */
.info {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; margin-left: .1rem; vertical-align: -.1rem;
    border-radius: 50%; cursor: help; flex-shrink: 0;
    background: color-mix(in srgb, var(--marka) 14%, transparent);
    color: var(--marka); font-size: .68rem; font-weight: 800; font-style: normal;
}
/* Son kelime + simge birlikte sarar; simge asla tek basina inmez. */
.nowrap { white-space: nowrap; }

/* Balon ::after DEGIL, govdeye ekli TEK sabit (fixed) oge (#storefront-tip):
   kartlarin overflow:hidden'i kirpiyordu, komsu kartin altina da
   giriyordu (canli goruntu). fixed konum ikisinden de bagimsiz. */
.price-card-dark .info { background: rgba(255, 255, 255, .22); color: #fff; }
#storefront-tip {
    position: fixed; z-index: 90; max-width: 16rem;
    background: var(--murekkep); color: var(--zemin);
    font-size: .8rem; font-weight: 500; line-height: 1.5; text-align: left;
    padding: .55rem .75rem; border-radius: 9px;
    box-shadow: 0 14px 30px -16px rgba(2, 6, 23, .5);
    pointer-events: none; animation: belir .12s ease;
}
#storefront-tip[hidden] { display: none; }

/* --- Entegrasyon vitrini (ayri sayfa) --- */
.integration-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}
.integration-card {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
}
.integration-top { display: flex; align-items: center; gap: .7rem; }
.integration-top img { height: 1.8rem; width: auto; max-width: 6rem; object-fit: contain; }
.integration-letter {
    width: 2rem; height: 2rem; border-radius: 8px; flex-shrink: 0;
    background: color-mix(in srgb, var(--marka) 12%, transparent); color: var(--marka);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.integration-top strong { color: var(--murekkep); flex: 1; }
.integration-card p { font-size: .88rem; color: var(--soluk); margin-top: .6rem; }
.status-badge {
    font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem;
    white-space: nowrap;
}
.status-active { background: rgba(34, 197, 94, .14); color: #15803d; }
.status-preparing { background: rgba(245, 158, 11, .16); color: #b45309; }

/* --- E-Ticaret modul izgarasi --- */
.module-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .7rem;
}
.module-card {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 10px;
    padding: .7rem 1rem; font-weight: 600; font-size: .92rem; color: var(--metin);
}
.module-card[data-kind] { cursor: help; }
.module-card[data-kind]:hover { border-color: var(--marka); }

/* --- Referans logolari (sadece logo — isim/yorum yok) --- */
.logo-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 2.5rem 3.5rem;
}
.logo-strip img {
    height: 2.6rem; width: auto; max-width: 10rem; object-fit: contain;
    filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s;
}
.logo-strip img:hover { filter: none; opacity: 1; }

/* --- SSS (soru listesi + cevap paneli; akordiyon degil) --- */
.faq-folds { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; }
.faq-fold {
    border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin);
    border-radius: 999px; padding: .4rem 1rem; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 600;
}
.faq-fold:hover { border-color: var(--marka); color: var(--marka); }
.faq-fold.active { background: var(--marka); border-color: var(--marka); color: #fff; }
#faq-search {
    width: 100%; margin-bottom: .6rem; padding: .6rem .9rem;
    border: 1.5px solid var(--cizgi); border-radius: 10px;
    background: var(--zemin); color: var(--murekkep); font: inherit; font-size: .92rem;
}
#faq-search:focus { outline: none; border-color: var(--marka); }
/* Liste kendi icinde kayar — soru sayisi artinca bolum uzamaz. */
.faq-questions { max-height: 24rem; overflow-y: auto; padding-right: .3rem; }
.faq-empty { color: var(--soluk); font-size: .9rem; padding: .8rem .2rem; }
.faq-layout { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; gap: 1.5rem; align-items: start; }
.faq-question {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: .85rem 1.1rem; margin-bottom: .5rem;
    border: 1px solid var(--cizgi); border-radius: 10px;
    background: var(--zemin); color: var(--metin);
    font: inherit; font-weight: 600; font-size: .95rem;
}
.faq-question:hover { border-color: var(--marka); color: var(--marka); }
/* display:block, [hidden]'i ezer (rozet vakasinin aynisi) — acikca kapat. */
.faq-question[hidden] { display: none; }
.faq-question.active {
    border-color: var(--marka); color: var(--marka);
    background: color-mix(in srgb, var(--marka) 8%, var(--zemin));
}
.faq-answer {
    background: var(--zemin); border: 1px solid var(--cizgi);
    border-radius: var(--radius); padding: 1.6rem 1.8rem;
}
.faq-answer h3 { margin-bottom: .7rem; font-size: 1.15rem; }
.faq-answer p { white-space: pre-line; }
@media (max-width: 760px) { .faq-layout { grid-template-columns: 1fr; } }

/* --- Giris sahnesi: tek buyuk kart, sol yari marka paneli --- */
.login-stage {
    padding: 10rem 0 5rem;
    background:
        radial-gradient(40rem 22rem at 15% 0%, color-mix(in srgb, var(--marka) 10%, transparent), transparent),
        radial-gradient(36rem 20rem at 90% 100%, color-mix(in srgb, #1a2ee0 10%, transparent), transparent),
        var(--zemin-2);
}
.login-box {
    max-width: 62rem; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr;
    background: var(--zemin); border-radius: 22px; overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(2, 6, 23, .5);
}
.login-brand {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, var(--marka) 0%, #1a2ee0 70%, #2f5cff 100%);
    color: #fff; padding: 3rem 2.5rem;
    display: flex; flex-direction: column;
}
/* Susleme halkalari — gorsel yok, saf CSS. */
.login-brand::before, .login-brand::after {
    content: ''; position: absolute; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .14);
}
.login-brand::before { width: 22rem; height: 22rem; right: -9rem; bottom: -11rem; }
.login-brand::after { width: 12rem; height: 12rem; right: -2rem; bottom: -5rem; }
.login-badge {
    align-self: flex-start; font-size: .75rem; font-weight: 800; letter-spacing: .12em;
    background: rgba(255, 255, 255, .16); border-radius: 999px; padding: .35rem .9rem;
    margin-bottom: 1.6rem;
}
.login-brand h1 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .7rem; }
.login-brand > p { color: rgba(255, 255, 255, .85); margin-bottom: 1.6rem; }
.login-brand ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .8rem; position: relative; z-index: 1; }
.login-brand li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: rgba(255, 255, 255, .95); }
.login-brand li span {
    flex-shrink: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%;
    background: rgba(255, 255, 255, .18); font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
}
.login-support {
    margin-top: auto; padding-top: 1.8rem; position: relative; z-index: 1;
    font-size: .88rem; color: rgba(255, 255, 255, .8);
}
.login-support a { color: #fff; font-weight: 700; }
.login-form { padding: 3rem 2.5rem; }
.login-form h2 { font-size: 1.45rem; margin-bottom: .4rem; }
.login-subtitle { color: var(--soluk); font-size: .95rem; margin-bottom: 1.4rem; }
.login-steps {
    display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem;
    font-size: .85rem; font-weight: 700; color: var(--soluk);
}
.login-steps .active { color: var(--marka); }
.login-steps .ok { color: #16a34a; }
.login-steps .divider { flex: 1; height: 2px; background: var(--cizgi); border-radius: 2px; }
.login-form label { display: block; font-weight: 600; color: var(--murekkep); margin-bottom: .4rem; }
.login-form input {
    width: 100%; padding: .8rem 1rem; margin-bottom: 1.1rem;
    border: 1.5px solid var(--cizgi); border-radius: 12px;
    background: var(--zemin); color: var(--murekkep); font: inherit; font-size: 1.05rem;
    transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
    outline: none; border-color: var(--marka);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent);
}
.login-code-field { text-align: center; font-size: 1.6rem !important; letter-spacing: .5em; font-weight: 700; }
.login-form .btn { width: 100%; border: 0; cursor: pointer; font-size: 1.02rem; padding: .8rem 1.2rem; }
.login-kvkk { font-size: .82rem; color: var(--soluk); margin-top: 1rem; }
.register-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
/* Bal tuzagi: ekran disinda (display:none bazi botlarca atlaniyor). */
.honeypot { position: absolute; left: -6000px; width: 1px; height: 1px; opacity: 0; }
/* Yontem sekmeleri (SMS / Sifre) */
.login-methods {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
    background: var(--zemin-2); border-radius: 12px; padding: .35rem;
    margin-bottom: 1.3rem;
}
.login-method {
    border: 0; background: none; cursor: pointer; font: inherit;
    font-size: .92rem; font-weight: 700; color: var(--soluk);
    padding: .55rem .6rem; border-radius: 9px;
}
.login-method.active { background: var(--zemin); color: var(--marka); box-shadow: 0 6px 16px -10px rgba(2, 6, 23, .4); }
/* Cok hesap secimi */
.login-accounts { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
.login-account {
    display: flex; align-items: center; gap: .8rem; cursor: pointer;
    border: 1.5px solid var(--cizgi); border-radius: 12px; padding: .8rem 1rem;
}
.login-account:has(input:checked) { border-color: var(--marka); background: color-mix(in srgb, var(--marka) 6%, var(--zemin)); }
.login-account strong { display: block; color: var(--murekkep); }
.login-account small { color: var(--soluk); }
.login-retry { text-align: center; margin-top: 1rem; }
.login-retry button { border: 0; background: none; cursor: pointer; font: inherit; font-size: .88rem; color: var(--marka); font-weight: 600; }
@media (max-width: 760px) {
    .login-stage { padding-top: 8.5rem; }
    .login-box { grid-template-columns: 1fr; }
    .login-brand { padding: 2rem 1.5rem; }
    .login-form { padding: 2rem 1.5rem; }
}

/* Hesap menusu (girisli musteri — ad + acilir liste) */
.account { position: relative; }
.account-menu {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
    min-width: 12rem; background: var(--zemin); border: 1px solid var(--cizgi);
    border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(2, 6, 23, .35);
    padding: .4rem; display: flex; flex-direction: column;
}
.account-menu[hidden] { display: none; }
.account-menu a, .account-menu button {
    text-align: left; padding: .55rem .8rem; border-radius: 8px;
    color: var(--metin); font: inherit; font-size: .92rem; font-weight: 500;
    border: 0; background: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--zemin-2); color: var(--marka); }
.account-menu form { display: contents; }

/* Giris sonrasi kisa karsilama — ~4 sn sonra kendiliginden soner. */
.welcome { transition: opacity .4s, transform .4s; }
.welcome.fading { opacity: 0; transform: translateY(-.4rem); }
.welcome {
    position: fixed; top: 5rem; right: 1.25rem; z-index: 65;
    background: var(--zemin); border: 1px solid var(--cizgi); border-left: 4px solid #16a34a;
    border-radius: 10px; padding: .8rem 1.1rem; font-size: .95rem; color: var(--murekkep);
    box-shadow: 0 20px 40px -24px rgba(2, 6, 23, .4);
    animation: belir .3s ease;
}

/* --- MOBIL ustbar (760px alti) — "menu mobilde cok kotu" duzeltmesi.
   Kurallar: bar mobilde HEP zeminli (seffaf+iki satir dar ekranda
   karisiyordu); "Bize Ulasin" gizli (telefon+sepet+panel kalir); menu
   paneli TAM GENISLIK acilir (ustbar-alt static → konum atasi .topbar);
   mega ogeleri kompakt (ikon/aciklama gizli). */
/* Masaustunde mobil parcalar gizli. */
.mobile-tools { display: none; }
.menu-account { display: none; }

@media (max-width: 760px) {
    /* Zemin masaustuyle AYNI kural: tepede SEFFAF, kaydirilinca .shifted
       zemin verir (kullanici: "beyaz olmasin, sticky olunca olsun"). */
    .topbar-transparent { padding-top: .4rem; }
    /* IKI SATIR izgara: ustte tel+sepet+hesap saga yasli, altta logo
       solda + hamburger sagda (once uc kata dagiliyordu). */
    .topbar-body {
        display: grid; grid-template-columns: auto 1fr;
        grid-template-areas: "ust ust" "logo alt";
        align-items: center; gap: .2rem .8rem;
    }
    .topbar-rows { display: contents; }
    /* Ust satir: TELEFON SOLDA, hesap/musteri adi SAGDA (kullanici);
       sepet burada degil — alt satirda hamburgerin solunda. */
    .topbar-top {
        grid-area: ust; justify-content: space-between;
        gap: 1rem; font-size: .85rem; padding-top: .1rem; padding-bottom: .35rem;
    }
    .topbar-top .callback-open { display: none; }
    .topbar-top .cart-link { display: none; }
    .topbar-panel {
        padding: .35rem .8rem; font-size: .82rem; white-space: nowrap;
        max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
    }
    .logo { grid-area: logo; }
    .logo img { height: 2.1rem; max-width: 8.5rem; }
    .topbar-transparent.shifted .logo img { height: 2.1rem; }
    .topbar-bottom { grid-area: alt; position: static; height: 3rem; gap: 1.1rem; }
    /* Sepet alt satirda, hamburgerin SOLUNDA (DOM sirasi zaten oyle). */
    .mobile-tools { display: flex; align-items: center; margin-left: auto; color: var(--murekkep); }
    .mobile-tools a { color: var(--murekkep); display: inline-flex; }
    .mobile-tools a[href^="tel"] { display: none; }   /* tel ust satirda */
    .menu-button { margin-left: 0; }
    .hero { padding-top: 9rem; }
    .menu {
        padding: .6rem 1.25rem 1rem;
        box-shadow: 0 24px 40px -24px rgba(2, 6, 23, .35);
        max-height: calc(100vh - 4.5rem); overflow-y: auto;
    }
    .menu .mega-item .glyph, .menu .mega-item small { display: none; }
    .menu .mega-item { padding: .45rem 0; }
    .menu .mega { padding: 0 0 .3rem .9rem; }
    .menu-account {
        display: flex; flex-direction: column;
        border-top: 1px solid var(--cizgi); margin-top: .5rem; padding-top: .4rem;
    }
    .menu-account a, .menu-account button {
        padding: .6rem 0; text-align: left; border: 0; background: none;
        font: inherit; font-weight: 600; color: var(--marka); cursor: pointer;
    }
}

/* --- Sepet cekmecesi (sagdan kayar) --- */
#drawer-overlay {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(2, 6, 23, .45);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
#drawer-overlay.open { opacity: 1; visibility: visible; }
#cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
    width: min(24rem, 92vw);
    background: var(--zemin);
    box-shadow: -20px 0 60px -30px rgba(2, 6, 23, .5);
    transform: translateX(105%); transition: transform .25s ease;
    display: flex; flex-direction: column;
}
#cart-drawer.open { transform: none; }
.drawer-title {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--cizgi);
    font-size: 1.05rem; color: var(--murekkep);
}
#drawer-close {
    border: 0; cursor: pointer; font-size: 1.15rem;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--zemin-2); color: var(--murekkep);
    display: flex; align-items: center; justify-content: center;
}
#drawer-close:hover { background: var(--cizgi); }
#drawer-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.drawer-qty-row {
    padding: .8rem 1.25rem; border-bottom: 1px solid var(--cizgi);
    color: var(--soluk); font-size: .9rem;
}
.drawer-middle { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.drawer-empty { text-align: center; margin-top: 2rem; color: var(--soluk); font-size: .92rem; }
.drawer-item {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: 1rem 0; border-bottom: 1px solid var(--cizgi);
}
.drawer-box {
    flex-shrink: 0; width: 3.6rem; height: 3.6rem;
    border: 1px solid var(--cizgi); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--marka); background: var(--zemin-2);
}
.drawer-box svg { width: 1.6rem; height: 1.6rem; }
.drawer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.drawer-name { font-weight: 600; color: var(--murekkep); font-size: .92rem; line-height: 1.35; }
.drawer-unit-price { color: var(--soluk); font-size: .85rem; }
.drawer-remove button {
    border: 1px solid var(--cizgi); border-radius: 8px; background: var(--zemin);
    color: var(--soluk); cursor: pointer; padding: .3rem .45rem;
    display: inline-flex; width: fit-content;
}
.drawer-remove button:hover { color: #dc2626; border-color: #dc2626; }
.trash-icon { width: 1rem; height: 1rem; }
.drawer-price { white-space: nowrap; color: var(--murekkep); font-size: .95rem; }
.drawer-bottom { border-top: 1px solid var(--cizgi); padding: 1rem 1.25rem 1.25rem; }
.drawer-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: .9rem; color: var(--murekkep);
}
.drawer-total strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.drawer-cta { display: block; text-align: center; font-size: 1.02rem; padding: .8rem 1.2rem; }
.drawer-clear { text-align: center; margin-top: .7rem; }
.drawer-clear button {
    border: 0; background: none; cursor: pointer; font: inherit;
    font-size: .9rem; font-weight: 600; color: var(--soluk);
}
.drawer-clear button:hover { color: #dc2626; }

/* --- Canli destek widget'i --- */
.chat-box { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; }
#chat-button {
    position: relative; width: 3.4rem; height: 3.4rem; border: 0; border-radius: 50%;
    background: var(--marka); color: #fff; cursor: pointer;
    box-shadow: 0 12px 30px -10px var(--marka);
    display: flex; align-items: center; justify-content: center;
}
#chat-button:hover { background: var(--marka-koyu); }
.chat-icon { width: 1.5rem; height: 1.5rem; }
#chat-badge {
    position: absolute; top: -.3rem; right: -.3rem;
    background: #dc2626; color: #fff; font-size: .72rem; font-weight: 700;
    min-width: 1.2rem; height: 1.2rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 .25rem;
}
/* display:flex, [hidden]'in UA display:none'unu ezer — acikca kapat. */
#chat-badge[hidden] { display: none; }
#chat-panel {
    position: absolute; right: 0; bottom: 4.2rem;
    width: min(21rem, calc(100vw - 2.5rem)); height: 26rem;
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px;
    box-shadow: 0 30px 60px -30px rgba(2, 6, 23, .5);
    display: flex; flex-direction: column; overflow: hidden;
}
#chat-panel[hidden] { display: none; }
.chat-header {
    background: var(--marka); color: #fff; padding: .8rem 1rem;
    display: flex; align-items: baseline; gap: .5rem;
}
.chat-header span { font-size: .8rem; opacity: .8; flex: 1; }
#chat-close { border: 0; background: none; color: #fff; font-size: 1.3rem; cursor: pointer; }
#chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.chat-row { display: flex; align-items: flex-end; gap: .4rem; }
.chat-row.chat-self { flex-direction: row-reverse; }
.chat-bubble {
    max-width: 80%; padding: .5rem .8rem; border-radius: 12px;
    font-size: .9rem; white-space: pre-wrap; word-break: break-word;
}
.chat-self .chat-bubble { background: var(--marka); color: #fff; border-bottom-right-radius: 4px; }
.chat-peer .chat-bubble { background: var(--zemin-2); border: 1px solid var(--cizgi); color: var(--metin); border-bottom-left-radius: 4px; }
.chat-time { font-size: .68rem; color: var(--soluk); }
#chat-form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--cizgi); }
#chat-form input {
    flex: 1; border: 1.5px solid var(--cizgi); border-radius: 10px; padding: .5rem .8rem;
    background: var(--zemin); color: var(--murekkep); font: inherit; font-size: .9rem;
}
#chat-form .btn { border: 0; cursor: pointer; padding: .5rem .9rem; font-size: .9rem; }

/* --- Domain arama (global kalip) --- */
.search-card {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: 0 20px 40px -28px rgba(2, 6, 23, .35);
}
.search-row { display: flex; gap: .75rem; }
.search-row input {
    flex: 1; font-size: 1.15rem; padding: .9rem 1.1rem;
    border: 1.5px solid var(--cizgi); border-radius: 12px;
    background: var(--zemin); color: var(--murekkep);
}
.search-row input:focus { outline: none; border-color: var(--marka); }
.search-row .btn { border: 0; cursor: pointer; font-size: 1.05rem; padding: .9rem 1.6rem; }
.tld-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .4rem .9rem; margin-top: 1.1rem;
}
.tld-select {
    display: flex; align-items: center; gap: .45rem;
    font-size: .95rem; font-weight: 600; color: var(--murekkep); cursor: pointer;
}
.tld-select input { width: 1.05rem; height: 1.05rem; accent-color: var(--marka); }
.result-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--cizgi);
}
.result-name { font-weight: 700; color: var(--murekkep); }
.result-right { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.result-status { font-weight: 700; }
.result-form { display: flex; gap: .5rem; align-items: center; }
.result-form select {
    padding: .45rem .6rem; border: 1.5px solid var(--cizgi); border-radius: 8px;
    background: var(--zemin); color: var(--murekkep);
}
.result-form .btn { border: 0; cursor: pointer; padding: .45rem .9rem; font-size: .9rem; }
.cart-added-note {
    background: rgba(34, 197, 94, .12); color: #15803d;
    border-radius: 10px; padding: .6rem .9rem; font-size: .92rem; font-weight: 600;
}
/* Sayfasiz sepete ekleme: dugmede donen halka + rozet ziplamasi. */
.spinning {
    display: inline-block; width: .95rem; height: .95rem; vertical-align: -.15rem;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
    border-radius: 50%; animation: don .6s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }
.cart-count.bump { animation: bump .4s ease; }
@keyframes bump { 50% { transform: scale(1.45); } }
.in-cart { animation: belir .25s ease; }
@keyframes belir { from { opacity: 0; transform: translateY(.2rem); } }
.result-error { color: #dc2626; font-size: .85rem; }
#result-area.loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
.old-price { color: var(--soluk); font-weight: 400; }
.discount-badge {
    display: inline-block; vertical-align: middle;
    background: var(--marka); color: #fff;
    font-size: .68rem; font-weight: 800; letter-spacing: .03em;
    padding: .2rem .55rem; border-radius: 999px; margin-left: .4rem;
}
.large-price .old-price { font-size: 1.05rem; margin-right: .35rem; }
.price-label { color: var(--marka); font-weight: 600; font-size: .95rem; margin-top: .2rem; }
.price-installment { color: var(--marka); font-size: .85rem; font-weight: 600; margin-top: .4rem; }
.feature-title { font-weight: 800; font-size: .95rem; color: var(--murekkep); margin: 1.1rem 0 .6rem; }

/* KOYU kart: grubun en ust paketi vurgulanir (IdeaSoft kalibi). */
.counter {
    display: inline-block; margin-top: .55rem;
    font-size: .85rem; font-weight: 600; color: #b45309;
    background: rgba(245, 158, 11, .12); border-radius: 8px; padding: .4rem .7rem;
}
.counter strong { font-variant-numeric: tabular-nums; }

/* --- Kart odemesi (PayTR cercevesi + sonuc) --- */
.payment-summary {
    display: flex; flex-direction: column; gap: .15rem; text-align: center;
    background: var(--zemin-2); border: 1px solid var(--cizgi);
    border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.payment-summary span { font-size: .9rem; color: var(--soluk); }
.payment-summary strong { font-size: 1.9rem; color: var(--murekkep); letter-spacing: -.02em; }
.payment-summary small { font-size: .82rem; color: var(--soluk); }
.payment-test { color: #b45309 !important; font-weight: 700; }
.payment-note { margin-top: 1rem; font-size: .9rem; color: var(--soluk); text-align: center; }
/* --- SEPET + ODEME: solda icerik, sagda SABIT ozet karti ---
   Ayni `.checkout` izgarasini IKI SAYFA da kullanir (kullanici karari:
   "sepet ozeti bu mantik olsun — sagda toplam tutar kdv vs, solda
   hizmetler"). Ayri bir sepet izgarasi yazilsaydi ozet kartinin yeri
   sepetten odemeye gecerken kayardi.

   GENISLIK SINIRLI (64rem): .container 82rem oldugu icin form alanlari
   ekran boyu uzuyordu — kart numarasi kutusu 1100px genisligindeydi
   ("neden oyle kocaman" — canli sikayet). Odeme formu dar olmali:
   goz tek sutunda asagi iniyor, alanlar tanidik boyutta kaliyor. */
.checkout {
    /* Ozet kolonu 24rem (19'du): "Business Shop — uzundomain.com.tr
       (2 yil)" uc satira kiriliyordu — sag genisledi, sol (1fr)
       kendiliginden daraldi (kullanici istegi: "domain sigmali"). */
    display: grid; grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 1.5rem; align-items: start;
    max-width: 64rem; margin: 0 auto;
}
/* TAM GENISLIK VARYANTI (sepet + odeme): `.container` genisligini
   kullanir, sol kenar ustbardaki logoyla AYNI hizada (kullanici istegi:
   "body header ile ayni genislikte olmali"). Odeme sayfasinda KUTULAR
   genisler ama FORM ALANLARI sinirli kalir — 64rem sinirinin asil
   sebebi "kart numarasi kutusu 1100px" sikayetiydi, o koruma alan
   duzeyine indi. */
.checkout-wide { max-width: none; }
/* Kart alanlari DAR (kullanici: "ic tarafi kucultsek mi, cok genis"):
   30rem ≈ 480px — kart numarasi rahat sigar, goz tek sutunda iner.
   Fatura formu adres tasidigi icin bir tik genis. */
.checkout-wide .card-form { max-width: 30rem; }
.checkout-wide .invoice-edit form { max-width: 40rem; }
@media (max-width: 900px) {
    /* Dar ekranda ozet USTE: musteri once ne odeyecegini gorsun. */
    .checkout { grid-template-columns: 1fr; }
    .checkout-summary { order: -1; }
}
.checkout-summary { position: sticky; top: 6rem; }
.summary-card {
    background: var(--zemin); border: 1px solid var(--cizgi);
    border-radius: var(--radius); padding: 1.1rem 1.2rem;
    box-shadow: 0 14px 34px -26px rgba(2, 6, 23, .4);
}
.summary-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--cizgi);
}
.summary-head span { font-weight: 800; color: var(--murekkep); }
.summary-head small { color: var(--soluk); font-size: .78rem; }
/* Uzun icerikli baslik (siparis no) ALT ALTA — yan yana ikisi de
   kirilip sikisiyordu. */
.summary-head-stacked { flex-direction: column; align-items: flex-start; gap: .15rem; }
.summary-head-stacked small { overflow-wrap: anywhere; }
.summary-line {
    display: grid; grid-template-columns: 1fr auto; gap: .6rem;
    font-size: .86rem; padding: .35rem 0; align-items: baseline;
}
/* Uzun kalem adi (domain + paket) sarmali ama fiyati ITMEMELI:
   fiyat sutunu sabit, ad kendi icinde kiriliyor. break-word (anywhere
   DEGIL): anywhere domaini HARF ORTASINDAN boluyordu; break-word once
   kelime araliklarindan kirar, domain butun halde alt satira iner. */
.summary-line > span:first-child { min-width: 0; overflow-wrap: break-word; color: var(--metin); }
.summary-line > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--murekkep); }
.summary-line.muted, .summary-line.muted > span { color: var(--soluk); font-size: .8rem; }
.summary-sep { height: 1px; background: var(--cizgi); margin: .5rem 0; }
.summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--cizgi);
}
.summary-total span { font-weight: 700; color: var(--murekkep); }
.summary-total strong {
    font-size: 1.25rem; color: var(--murekkep); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* TEST MODU: rozet, duyuru degil. Onceki hali iki satirlik turuncu
   yaziyla ozetin en gorunur ogesi olmustu. */
.summary-test {
    display: inline-block; margin-top: .6rem; padding: .18rem .5rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: color-mix(in srgb, #f59e0b 20%, var(--zemin)); color: #b45309;
}
/* --- SAYFA BASLIK BARI ---
   Ic sayfalarin ustu: baslik SOLDA, ustbardaki logoyla ayni hizada
   (ayni `.container`). Ortalanmis baslik genis ekranda bosluga asili
   kaliyordu. Ust dolgu FIXED ustbarin altindan baslar (login sahnesiyle
   ayni olcu: 10rem / dar ekranda 8.5rem). */
/* DIS KATMAN: fixed ustbarin altindan baslayan bosluk + HERO DOKUSU.
   Ana sayfada ustbarin altinda gorunen degrade hero'nun kendi zemini
   (slider degil); ic sayfalarda hero yok, tepe DUZ kaliyordu —
   kullanici fark etti. Ayni doku (daha kucuk olcekli) buraya verildi,
   ustbar her sayfada ayni zeminin ustune biner. Koyu SERIT ayri
   katmanda durur (asagida) — onceki ders: dolguyu boyamak "ustbarin
   arka plani degismis" gorunumu vermisti, serit disindaki bolum
   heronunkiyle AYNI degrade oldugu icin artik o etki yok. */
.page-bar {
    padding-top: 8rem;
    background:
        radial-gradient(60rem 22rem at 80% -10%, color-mix(in srgb, var(--marka) 14%, transparent), transparent),
        linear-gradient(180deg, var(--zemin-2), var(--zemin));
}
/* SERIT: tam genislik, ~60px, sayfadan bir ton koyu. Renk sabit hex
   DEGIL turetilmis — sabit yazilsaydi karanlik modda ayni kalirdi;
   color-mix her iki temada da zeminin bir ton koyusunu verir. */
.page-bar-band {
    display: flex; align-items: center; min-height: 60px;
    padding: .5rem 0;
    /* SECILEN: BEYAZ SERIT + yumusak golge — ustbarla ayni malzeme.
       (Denenen ve begenilmeyenler: kirli gri, acik mavi tint, koyu
       marka degradesi. Dort aday ekranda yan yana gosterildi,
       kullanici 3'u secti.) Zemin degiskenden: karanlik modda da
       dogru ton. */
    background: var(--zemin);
    border: 0;
    box-shadow: 0 10px 24px -18px rgba(2, 6, 23, .45);
}
.page-bar-band > .container { width: 100%; }
.page-bar-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem 2rem; flex-wrap: wrap;
}
/* Baslik ~60px seride sigacak olcude: `clamp(…, 2rem)` seridi sisiriyordu. */
.page-bar h1 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.page-bar p { color: var(--soluk); margin-top: .25rem; font-size: .92rem; }
/* Bardan sonra gelen bolum ust dolguyu TEKRARLAMAZ: bar zaten ustbarin
   altini acti (`main > .section:first-child` kurali burada gecerli
   degil, cunku ilk oge bar). */
.section-after-bar { padding-top: 2.5rem; }

/* ADIM SERIDI (breadcrumb DEGIL — akis gostergesi). Numara daire icinde,
   TEK RENK: renkli ikon yasagi (CLAUDE.md) tipografik isaretleri disarida
   birakmiyor, ama suslu/renkli simge eklenmez. */
.steps { display: flex; align-items: center; gap: 1.25rem; list-style: none; flex-wrap: wrap; }
.steps li {
    display: flex; align-items: center; gap: .45rem;
    font-size: .88rem; color: var(--soluk); white-space: nowrap;
}
.steps .step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 999px;
    border: 1.5px solid var(--cizgi); font-size: .8rem; font-weight: 700;
}
.steps li.current { color: var(--murekkep); font-weight: 700; }
.steps li.current .step-no { background: var(--marka); border-color: var(--marka); color: #fff; }
.steps li.done .step-no { border-color: var(--marka); color: var(--marka); }
/* Geride kalan adim baglantidir (sepete donus). */
.steps li a { display: flex; align-items: center; gap: .45rem; color: inherit; }
.steps li a:hover { color: var(--marka); }
@media (max-width: 760px) {
    .page-bar { padding-top: 6.5rem; }
    /* Dar ekranda adim seridi basligin ALTINA gecer; serit o zaman
       60px'i asar (min-height, sabit yukseklik degil). */
    .page-bar-in { align-items: flex-start; }
    .steps { gap: .85rem; font-size: .8rem; }
}

/* Ekran okuyucuya kalan etiketler (gorsel olarak yok). */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- SEPET KALEMLERI (sol sutun) ---
   Sutunlar: aciklama | sure | tutar | kaldir. BIRIM FIYAT SUTUNU YOK:
   cok yillik domainde fiyat "ilk yil tescil + sonraki yillar yenileme"
   toplami, yani tek bir birim fiyat yok — toplami yila bolup yazmak
   hicbir yerde tahsil edilmeyen bir rakam gostermek olurdu. */
.cart-list {
    border: 1px solid var(--cizgi); border-radius: var(--radius);
    background: var(--zemin); overflow: hidden;
}
.cart-head, .cart-line {
    /* Sure sutunu 8rem: "3 yil −%30" etiketi 6rem'e sigmiyordu. */
    display: grid; grid-template-columns: minmax(0, 1fr) 8rem 9rem 2.4rem;
    gap: .75rem; align-items: center; padding: .85rem 1.1rem;
}
.cart-head {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--soluk); background: var(--zemin-2);
    border-bottom: 1px solid var(--cizgi);
}
.cart-line + .cart-line { border-top: 1px solid var(--cizgi); }
.cart-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cart-name { color: var(--murekkep); font-weight: 700; overflow-wrap: anywhere; }
.cart-desc { color: var(--soluk); font-size: .82rem; }
/* Paketli kalemde ikinci satir: domain (aciklamadan bir tik belirgin). */
.cart-domain { color: var(--metin); font-size: .84rem; }
.cart-term { color: var(--metin); font-size: .88rem; }
/* Sure secici: satir icinde dar bir <select>. JS varken "Uygula"
   gizlenir (secince kendiliginden gonderilir), JS yoksa gorunur. */
.term-form { display: flex; align-items: center; gap: .4rem; }
.term-form select {
    width: 100%; max-width: 7.5rem; padding: .35rem .4rem;
    border: 1px solid var(--cizgi); border-radius: 8px;
    background: var(--zemin); color: var(--metin); font: inherit; font-size: .86rem;
    cursor: pointer;
}
.term-form select:focus { outline: none; border-color: var(--marka); }
.term-form button {
    border: 1px solid var(--cizgi); border-radius: 8px; background: var(--zemin);
    color: var(--metin); font-size: .78rem; padding: .3rem .5rem; cursor: pointer;
}
.cart-save { color: #16a34a; font-size: .8rem; font-weight: 600; }
/* Ozet kartindaki indirim satiri — kalem altindaki yesille ayni dil.
   `.summary-line > span` renk kurallarindan SONRA durmali (ayni
   ozgulluk, sira kazanir). */
.summary-line.summary-discount > span { color: #16a34a; font-weight: 600; }
/* Tesvik seridi: kademeler acikca yazilir (2 yil %5 · 3 yil %10 …). */
.cart-incentive {
    margin-top: .8rem; padding: .55rem .9rem; border-radius: 10px;
    background: color-mix(in srgb, #16a34a 8%, var(--zemin));
    border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
    color: var(--metin); font-size: .86rem;
}
.cart-incentive strong { color: #15803d; white-space: nowrap; }
.cart-amount {
    text-align: right; color: var(--murekkep); font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cart-head .cart-amount { font-weight: inherit; color: var(--soluk); }
.cart-remove button {
    border: 1px solid var(--cizgi); border-radius: 8px; background: var(--zemin);
    color: var(--soluk); cursor: pointer; padding: .3rem .35rem;
    display: inline-flex;
}
.cart-remove button:hover { color: #dc2626; border-color: #dc2626; }
/* SILME ANIMASYONU (kullanici: "bodos olmasin, donsun falan"): satir
   saga kayarak soner, yuksekligi kapanir, cop ikonu tam tur doner.
   auto → 0 animlanamadigi icin JS once olculen yuksekligi px sabitler,
   sonra .removing ekler. Icerik sunucu cevabi gelince topluca tazelenir. */
.cart-line { transition: opacity .3s ease, transform .3s ease, height .32s ease, padding .32s ease; }
.cart-line.removing {
    opacity: 0; transform: translateX(1.75rem);
    height: 0 !important; padding-top: 0; padding-bottom: 0;
    overflow: hidden; border-color: transparent;
}
.trash-icon { transition: transform .35s ease; }
.cart-line.removing .trash-icon { transform: rotate(360deg); }
/* Sure degisimi: cevap gelene kadar satir soluk, tiklanamaz. */
.cart-line.updating { opacity: .45; pointer-events: none; }
/* JS varken "Uygula" gizli — secim kendiliginden gonderiliyor. */
#cart-content.js-on .term-form button { display: none; }
@media (prefers-reduced-motion: reduce) {
    .cart-line, .trash-icon { transition: none; }
}
.cart-continue {
    display: inline-block; margin-top: 1rem; font-size: .9rem;
    color: var(--soluk); font-weight: 600;
}
.cart-continue:hover { color: var(--marka); }
.cart-warn { margin-top: .6rem; font-size: .82rem; color: #b45309; }
@media (max-width: 560px) {
    /* Dar ekranda tutar adin ALTINA gecer; 4 sutun sikistiginda
       domain adi harf harf kiriliyordu. */
    .cart-head { display: none; }
    .cart-line { grid-template-columns: minmax(0, 1fr) 2.4rem; row-gap: .35rem; }
    .cart-term { grid-column: 1; font-size: .82rem; color: var(--soluk); }
    .cart-amount { grid-column: 1; text-align: left; }
    .cart-remove { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
}

/* Fatura bilgisi kutusu (odeme oncesi gorunur). */
.invoice-box {
    border: 1px solid var(--cizgi); border-radius: var(--radius);
    padding: .9rem 1.1rem; margin-bottom: 1rem; background: var(--zemin-2);
    font-size: .88rem;
}
.invoice-box strong { display: block; color: var(--murekkep); margin-bottom: .2rem; }
.invoice-box .invoice-missing { color: #b45309; }
.invoice-box a { font-weight: 600; }
/* Fatura duzenleme — kutunun icinde ACILIR form (panele gonderilmez;
   kullanici: "panelde oyle alan yok, daha pratik olsun"). */
.invoice-edit { margin-top: .6rem; }
/* Tiklanabilir alan metin kadar (pay-head'deki kuralin aynisi). */
.invoice-edit summary { cursor: pointer; font-weight: 600; color: var(--marka); width: fit-content; }
.invoice-edit form { margin-top: .4rem; }
.invoice-edit label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--murekkep); margin: .55rem 0 .2rem;
}
.invoice-edit input, .invoice-edit select {
    width: 100%; padding: .45rem .6rem; border: 1px solid var(--cizgi);
    border-radius: 8px; background: var(--zemin); color: var(--metin);
    font: inherit; font-size: .88rem;
}
.invoice-edit input:focus, .invoice-edit select:focus { outline: none; border-color: var(--marka); }
.invoice-save { margin-top: .8rem; padding: .45rem 1.1rem; cursor: pointer; }
.invoice-saved { color: #16a34a; font-weight: 600; margin-top: .4rem; }
/* Sozlesme onaylari */
.consent { margin-top: 1rem; font-size: .85rem; color: var(--metin); }
.consent label { display: flex; gap: .5rem; align-items: flex-start; margin: .4rem 0; cursor: pointer; }
.consent input { width: auto; margin: .15rem 0 0; flex-shrink: 0; }

/* Odeme secenegi: radyo basligi + acilir govde. */
.pay-option {
    border: 1.5px solid var(--cizgi); border-radius: var(--radius);
    margin-bottom: 1rem; overflow: hidden; background: var(--zemin);
}
.pay-option.open { border-color: var(--marka); }
.pay-head {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: 1rem 1.1rem; cursor: pointer; margin: 0;
    /* Tiklanabilir alan METIN KADAR (kullanici: "satir boyunca
       tiklanabilir, hos degil"): label tam genislikte kalirsa kutunun
       bos sag tarafi da imlec/tiklama alani oluyor. */
    width: fit-content;
}
.pay-head input { width: 1.1rem; margin: .15rem 0 0; flex-shrink: 0; }
.pay-head strong { display: block; color: var(--murekkep); font-size: 1rem; }
.pay-head small { display: block; color: var(--soluk); font-size: .87rem; margin-top: .15rem; }
/* Govde yalnizca SECILI secenekte acilir — hepsi birden acik olsa
   sayfa iki kat uzar ve musteri hangisini doldurdugunu sasirir. */
.pay-body { display: none; padding: 0 1.1rem 1.1rem; }
.pay-option.open .pay-body { display: block; }
/* Secenek icindeki kart formu kendi cercevesini tasimaz. */
.pay-body .card-form { border: 0; padding: 0; background: none; }

/* Banka hesaplari (havale). IBAN tek aralikli: elle kopyalanirken
   hane atlamak en cok burada oluyor. */
.bank-list { display: grid; gap: .6rem; margin-bottom: 1rem; }
.bank-row {
    border: 1px solid var(--cizgi); border-radius: 10px; padding: .7rem .9rem;
    background: var(--zemin-2);
}
.bank-name { display: block; font-weight: 700; color: var(--murekkep); font-size: .93rem; }
.bank-holder { display: block; color: var(--soluk); font-size: .85rem; }
.bank-iban {
    display: block; margin-top: .3rem; font-size: 1rem;
    letter-spacing: .04em; color: var(--murekkep);
}
/* Havale onay sayfasindaki siparis no kutusu. */
.transfer-order {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    background: color-mix(in srgb, var(--marka) 7%, var(--zemin));
    border: 1px solid var(--marka); border-radius: var(--radius);
    padding: 1.2rem; margin-bottom: 1.25rem; text-align: center;
}
.transfer-order span { font-size: .85rem; color: var(--soluk); }
.transfer-order strong {
    font-size: 1.6rem; letter-spacing: .05em; color: var(--marka);
    font-variant-numeric: tabular-nums;
}
.transfer-order small { color: var(--soluk); font-size: .85rem; }

/* Odeme yontemi kartlari (ayri sayfa kaldirildi; sinif duruyor). */
.method-list { display: grid; gap: .8rem; }
.method-card {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--zemin); border: 1.5px solid var(--cizgi);
    border-radius: var(--radius); padding: 1.1rem 1.2rem; font: inherit;
}
.method-card:hover { border-color: var(--marka); }
.method-name { display: block; font-weight: 700; color: var(--murekkep); }
.method-desc { display: block; color: var(--soluk); font-size: .88rem; margin-top: .2rem; }
.method-go { display: block; margin-top: .5rem; color: var(--marka); font-weight: 600; font-size: .9rem; }

/* Kart formu — PayTR cercevesi DEGIL, bizim ekranimiz. */
.card-form {
    background: var(--zemin); border: 1px solid var(--cizgi);
    border-radius: var(--radius); padding: 1.6rem;
}
.card-form label {
    display: block; margin: .75rem 0 .28rem;
    font-size: .82rem; font-weight: 600; color: var(--metin);
}
.card-form label:first-of-type { margin-top: 0; }
/* Alanlar KOMPAKT: onceki hali (1rem yazi, .7rem dolgu, tam genislik)
   ekranda dev duruyordu. Kart formu tanidik olculerde olmali. */
.card-form input, .card-form select {
    width: 100%; padding: .5rem .7rem; font: inherit; font-size: .95rem;
    border: 1.5px solid var(--cizgi); border-radius: 8px;
    background: var(--zemin); color: var(--murekkep);
}
.card-form input:focus, .card-form select:focus { outline: none; border-color: var(--marka); }
/* Numara/CVV tek aralikli: 16 hane goz yanilmasi yapmasin. */
#card_number, #cvv { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.card-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
.card-row label { margin-top: .9rem; }
.card-error { display: block; margin-top: .3rem; font-size: .85rem; color: #dc2626; }
.card-hint { display: block; margin-top: .35rem; font-size: .82rem; color: var(--soluk); }
/* Taksit tablosu: satir = radyo + adet + aylik + toplam. Toplam SAGDA
   ve kalin — musteri once "ne kadar odeyecegim"e bakiyor.

   SECICI `.card-form .installment-row` OLMAK ZORUNDA: satir bir <label>
   ve yukaridaki `.card-form label { display:block }` daha ozgul. Tek
   sinifla yazilinca grid HIC uygulanmadi, sutunlar yan yana yapisti ve
   "× 2" ile "1.027,82 TL" birlesip "21.027,82" gibi okundu (canli
   goruntu). Para ekraninda bu sadece cirkin degil, YANILTICI. */
.installment-table {
    border: 1.5px solid var(--cizgi); border-radius: 10px; overflow: hidden;
}
.card-form .installment-row {
    display: grid; grid-template-columns: 1.1rem 6.5rem 1fr auto;
    align-items: center; gap: .9rem;
    margin: 0; padding: .55rem .85rem; cursor: pointer;
    border-bottom: 1px solid var(--cizgi);
    font-size: .92rem; font-weight: 400;
}
.card-form .installment-row:last-child { border-bottom: 0; }
.card-form .installment-row:hover { background: var(--zemin-2); }
/* `.card-form input { width:100% }` radyoyu de sisiriyordu. */
.card-form .installment-row input { width: 1.1rem; margin: 0; padding: 0; }
.installment-count { font-weight: 700; color: var(--murekkep); }
.installment-monthly { color: var(--soluk); font-size: .87rem; }
/* Tutarlar SAG'a hizali ve tabular: rakamlar alt alta tutuyor,
   satirlar arasi karsilastirma goz yormuyor. */
.installment-monthly, .installment-total {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.installment-total { font-weight: 800; color: var(--murekkep); }
/* Secili satir belirgin olsun (radyo tek basina zayif isaret). */
.card-form .installment-row:has(input:checked) {
    background: color-mix(in srgb, var(--marka) 8%, var(--zemin));
    box-shadow: inset 3px 0 0 var(--marka);
}
@media (max-width: 520px) {
    .card-form .installment-row { grid-template-columns: 1.1rem 5.5rem 1fr; gap: .6rem; }
    /* Dar ekranda aylik tutar duser; toplam KALIR (asil bilgi o). */
    .installment-monthly { display: none; }
}
.card-submit {
    width: 100%; margin-top: 1.1rem; border: 0; cursor: pointer;
    font-size: 1rem; padding: .7rem 1rem;
}
.card-submit:disabled { opacity: .65; cursor: default; }
.payment-state {
    display: flex; flex-direction: column; gap: .3rem;
    border-radius: 12px; padding: 1.1rem 1.25rem; border: 1px solid var(--cizgi);
}
.payment-state strong { font-size: 1.15rem; }
.payment-state span { font-size: .95rem; color: var(--soluk); }
/* Zeminler color-mix ile turetilir: karanlik modda da okunur kalsin
   (sabit acik zemine koyu yazi yazmak temayla birlikte bozuluyordu). */
.payment-ok { background: color-mix(in srgb, #16a34a 12%, var(--zemin)); border-color: #16a34a; }
.payment-ok strong { color: #15803d; }
.payment-fail { background: color-mix(in srgb, #dc2626 12%, var(--zemin)); border-color: #dc2626; }
.payment-fail strong { color: #b91c1c; }
.payment-warn { background: color-mix(in srgb, #f59e0b 14%, var(--zemin)); border-color: #f59e0b; }
.payment-warn strong { color: #b45309; }

/* --- Paket ust kategorisi sekmeleri (Kurumsal Web Sitesi / E-Ticaret).
   Segment kontrolu: hap icinde hap. Kayan gosterge (glider) DENENMEDI —
   genislik olcumu JS ister ve JS patlarsa aktif sekme hic belli olmaz;
   zemin dogrudan butonda oldugu icin gorunum JS'siz de dogru. --- */
.package-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem;
    width: fit-content; max-width: 100%; margin: 0 auto 1.9rem;
    padding: .35rem; border: 1px solid var(--cizgi); border-radius: 999px;
    background: var(--zemin);
    box-shadow: 0 14px 34px -28px rgba(2, 6, 23, .5);
}
.package-tab {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    border: 0; background: transparent; color: var(--metin);
    font: inherit; font-size: .95rem; font-weight: 700;
    padding: .62rem 1.4rem; border-radius: 999px; cursor: pointer;
    transition: color .18s, background .18s, box-shadow .18s;
}
.package-tab:hover { color: var(--marka); }
.package-tab:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
.package-tab.active {
    color: #fff;
    background: linear-gradient(90deg, var(--marka), #1a2ee0);
    box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--marka) 75%, transparent);
}
.package-tab.active:hover { color: #fff; }
/* display:none UA kurali flex/grid tanimli ogede EZILIR — panel blok
   kalir ama sarmalayici bir gun flex olursa [hidden] sessizce bozulur
   (canli destek rozeti vakasi). Kurali acikca yaz. */
.package-panel[hidden] { display: none; }
.package-panel { animation: package-panel-in .28s ease both; }
@keyframes package-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .package-panel { animation: none; }
}
/* Sekme panelindeki SEO/anlatim metni — kartlardan once, ortali. */
.package-blurb {
    max-width: 52rem; margin: -.6rem auto 1.6rem; text-align: center;
    font-size: .95rem; color: var(--soluk);
}
/* Paketi olmayan kategori: bos sekme yerine tesvik. */
.package-empty {
    max-width: 34rem; margin: 0 auto; text-align: center;
    background: var(--zemin); border: 1px dashed var(--cizgi);
    border-radius: var(--radius); padding: 2.4rem 1.75rem;
}
.package-empty p { color: var(--soluk); margin: .6rem 0 1.4rem; }
.package-empty .btn { cursor: pointer; }
@media (max-width: 560px) {
    .package-tabs { width: 100%; border-radius: var(--radius); }
    .package-tab { flex: 1 1 auto; justify-content: center; padding: .6rem .9rem; font-size: .88rem; }
}

/* --- Paket vitrini (IdeaSoft kalibi: seritli kart, buyuk fiyat,
   acilir ozellikler, buyuk CTA). --- */
/* Kart genisligi SINIRLI ve izgara ORTALI: auto-fit + 1fr, tek paket
   bagliyken karti tum sayfaya yayiyordu — ekran boyu dev kart "cok
   komik bir goruntu" (canli sikayet). Ust sinir 22rem: 4 kart yan yana
   hala sigar, tek kart makul durur. */
.price-cards {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem));
    justify-content: center;
    align-items: start;
}
.price-card {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 16px;
    overflow: hidden; box-shadow: 0 14px 34px -24px rgba(2, 6, 23, .35);
    transition: transform .15s, box-shadow .15s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -26px rgba(2, 6, 23, .45); }
/* --- HIZMET SAYFASI VARYANTI (.price-cards-detail): uzun ozellik
   listesinde AD + FIYAT SABIT kalir (kullanici istegi: "asagi indikce
   ust bolum sabit kalsa cok guzel durur"). Sticky'nin iki dusmani
   kaldirilir: overflow:hidden (yapismayi oldurur) ve hover transform
   (containing block olup sticky'yi karta hapseder). */
.price-cards-detail .price-card { overflow: visible; }
.price-cards-detail .price-card:hover { transform: none; }
.price-cards-detail .price-strip { border-radius: 15px 15px 0 0; }
.price-cards-detail .price-head {
    position: sticky; top: 4.2rem; z-index: 2;
    background: var(--zemin);
    margin: -1.4rem -1.4rem 0; padding: 1.4rem 1.4rem .6rem;
    border-bottom: 1px solid var(--cizgi); border-radius: 0 0 10px 10px;
}
.price-cards-detail .price-card-dark .price-head {
    background: #0a1030; border-bottom-color: rgba(255, 255, 255, .14);
}
/* SERIT MARKA AILESINDE, koyudan parlaga tek supurme. Eskiden turkuazdi
   (#2dd4bf → #22d3ee): o renk INDIGO paletine gore secilmisti ve marka
   #0400ad olunca yamali duruyordu.
   Kategori ayrimi icin ikinci renk GEREKMIYOR: paketler artik sekmelerle
   ayriliyor, ekranda tek seferde tek kategori goruluyor. Ayirt edici
   ikinci renk tasimak, sekmeler zaten soylerken gurultu olurdu. Ayrim
   yine gerekirse kanca yerinde: PackageShowcase::GROUPS['strip']. */
.price-strip {
    padding: .55rem 1rem; text-align: center;
    font-size: .82rem; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: linear-gradient(90deg, var(--marka), #2f5cff);
}
.price-body { padding: 1.4rem 1.4rem 1.5rem; }
.price-body h3 { font-size: 1.35rem; }
.large-price {
    margin-top: .5rem; font-size: 2rem; font-weight: 800; color: var(--murekkep);
    letter-spacing: -0.02em;
}
.large-price span { font-size: .85rem; font-weight: 500; color: var(--soluk); letter-spacing: 0; }
.price-note { font-size: .88rem; color: var(--soluk); margin-top: .4rem; }

/* KOYU kart: grubun en ust paketi vurgulanir (IdeaSoft kalibi).
   Bu blok .price-card'tan SONRA durmali — ayni ozgullukte oldugu icin
   once yazilirsa zemin kurali (var(--zemin)) gradyani ezer ve kart
   "beyaz zeminde beyaz yazi" olur (canli vakadan). */
.price-card-dark { background: linear-gradient(160deg, #0a1030 0%, #06016b 100%); border-color: #1b1a8f; }
.price-card-dark .price-body h3,
.price-card-dark .large-price,
.price-card-dark .feature-title,
.price-card-dark .features summary { color: #fff; }
.price-card-dark .clauses li,
.price-card-dark .price-note,
.price-card-dark .large-price span,
.price-card-dark .old-price { color: rgba(255, 255, 255, .75); }
/* KOYU KARTTA SERIT BIR KADEME PARLAK: serit artik marka mavisi, kart
   zemini de lacivert — sol ucta ikisi (#0400ad ve #0a1030) fazla yakin
   kaliyor ve bant "bant" gibi okunmuyordu. Turkuaz seritte bu sorun yoktu
   (zit renkti); tek aileye gecince kontrasti PARLAKLIKLA kurmak gerekti. */
.price-card-dark .price-strip {
    background: linear-gradient(90deg, #2f5cff, #6d92ff);
}
.price-card-dark .price-label,
.price-card-dark .price-installment { color: #c7d2fe; }
.price-card-dark .clauses li::before { color: #a5b4fc; }
.price-card-dark .features { border-color: rgba(255, 255, 255, .15); }
/* <button> ogesinin TARAYICI VARSAYILANI acik gri zemin basar —
   background verilmezse koyu kartta "gri zeminde beyaz yazi" olur. */
.price-card-dark .btn-outline {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35); color: #fff !important;
}
.price-card-dark .btn-outline:hover {
    background: rgba(255, 255, 255, .22);
    border-color: #fff; color: #fff !important;
}
.price-card-dark .btn-brand { background: #fff; color: var(--marka) !important; }
.features { margin-top: 1rem; border-top: 1px solid var(--cizgi); padding-top: .8rem; }
.features summary {
    cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--murekkep);
    list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.features summary::after { content: "▾"; color: var(--soluk); transition: transform .15s; }
.features[open] summary::after { transform: rotate(180deg); }

/* --- Giris paneli: ustbar dugmesinin ALTINDA acilir (kullanici referansi:
   ortali modal degil, header'a bagli acilan kart). --- */
.login-modal {
    position: fixed; inset: auto; top: 4.4rem; right: 1rem; margin: 0;
    border: 1px solid var(--cizgi); border-radius: var(--radius);
    background: var(--zemin); color: var(--metin);
    padding: 1.75rem; width: min(22rem, calc(100vw - 2rem));
    box-shadow: 0 30px 60px -20px rgba(2, 6, 23, .45);
}
.login-modal::backdrop { background: rgba(2, 6, 23, .25); }
.login-modal h3 { font-size: 1.3rem; margin-bottom: .25rem; }
.login-modal .modal-bottom { font-size: .92rem; color: var(--soluk); margin-bottom: 1rem; }
.login-modal .modal-error {
    font-size: .9rem; color: #dc2626; background: rgba(220, 38, 38, .08);
    border-radius: 8px; padding: .5rem .8rem; margin-bottom: 1rem;
}
.login-modal label { display: block; font-size: .88rem; font-weight: 600; color: var(--murekkep); margin-bottom: .3rem; }
.login-modal input {
    width: 100%; padding: .65rem .8rem; margin-bottom: 1rem;
    border: 1.5px solid var(--cizgi); border-radius: 10px;
    background: var(--zemin); color: var(--murekkep); font-size: 1rem;
}
.login-modal input:focus { outline: none; border-color: var(--marka); }
.login-modal .btn { width: 100%; border: 0; cursor: pointer; }
.modal-close {
    position: absolute; top: .6rem; right: .8rem; border: 0; background: none;
    font-size: 1.5rem; color: var(--soluk); cursor: pointer;
}

/* Hizmet detay */
/* --- PAKET SATIN ALMA SIHIRBAZI --- */
.wizard-modal { max-width: 30rem; width: calc(100% - 2rem); }
.pw-choice {
    display: flex; flex-direction: column; gap: .25rem; width: 100%;
    text-align: left; margin-bottom: .7rem; padding: .9rem 1.1rem;
    border: 1.5px solid var(--cizgi); border-radius: 12px;
    background: var(--zemin); color: var(--metin); cursor: pointer; font: inherit;
}
.pw-choice:hover { border-color: var(--marka); }
.pw-choice strong { color: var(--murekkep); }
.pw-choice span { font-size: .86rem; color: var(--soluk); }
.pw-search-row { display: flex; gap: .5rem; }
.pw-search-row input { flex: 1; min-width: 0; }
/* .login-modal button'in width:100%'u Sorgula'yi sisirip inputu eziyordu. */
.pw-search-row .btn { border: 0; cursor: pointer; width: auto; flex-shrink: 0; }
.wizard-modal input {
    width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--cizgi);
    border-radius: 10px; background: var(--zemin); color: var(--murekkep); font: inherit;
}
.wizard-modal input:focus { outline: none; border-color: var(--marka); }
.pw-loading { color: var(--soluk); font-size: .9rem; margin-top: .8rem; }
.pw-result {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    width: 100%; margin-top: .6rem; padding: .7rem 1rem; font: inherit;
    border: 1.5px solid var(--cizgi); border-radius: 10px;
    background: var(--zemin); cursor: pointer; text-align: left;
}
.pw-result strong { color: var(--murekkep); overflow-wrap: anywhere; }
.pw-result span { color: #16a34a; font-weight: 600; white-space: nowrap; font-size: .9rem; }
.pw-result:not(.taken):hover { border-color: var(--marka); }
.pw-result.taken { cursor: default; opacity: .55; }
.pw-result.taken span { color: var(--soluk); }
.pw-summary { border: 1px solid var(--cizgi); border-radius: 12px; padding: .9rem 1.1rem; }
.pw-line {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .3rem 0; font-size: .92rem; color: var(--metin);
}
.pw-line span:first-child { color: var(--murekkep); font-weight: 600; overflow-wrap: anywhere; }
.pw-line span:last-child { color: var(--soluk); white-space: nowrap; }
.pw-hint { font-size: .8rem; color: var(--soluk); margin-top: .5rem; }
.pw-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.pw-nav .btn { cursor: pointer; }
.pw-nav #pw-next { margin-left: auto; border: 0; }
/* .btn'nin display'i [hidden]'i eziyor (canli destek rozeti dersi) —
   acikca yazilmazsa Geri/Devam her adimda gorunur. */
.pw-nav .btn[hidden] { display: none; }

.service-body { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .service-body { grid-template-columns: 3fr 2fr; } }
.package-card { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 1.5rem; }
.package-card .price { font-size: 1.6rem; font-weight: 800; color: var(--murekkep); }
.package-card .period { font-size: .85rem; color: var(--soluk); }