/* ============================================================
   LANDING / PUBLIC VİTRİN MODÜLÜ STİLLERİ
   site.css'teki tasarım sistemini tamamlar — ortak dosyaya dokunmaz.
   ============================================================ */

/* ---------- Genel yardımcılar ---------- */
.section-alt { background: #EEF2F8; }
.text-left { text-align: left; }
a.card { text-decoration: none; color: inherit; display: block; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.page-sub { color: var(--metin-soluk); max-width: 620px; margin: 6px auto 0; }
.eyebrow-acik { color: var(--altin) !important; }
.btn-outline-acik { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-outline-acik:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---------- Hero kitap kapağı detayları ---------- */
.kapak-eyebrow {
    display: inline-block;
    font-size: .68rem;
    letter-spacing: 3px;
    color: var(--altin);
    font-weight: 700;
    margin-bottom: 10px;
}
.kapak-cizgi { width: 46px; height: 3px; background: var(--altin); margin: 14px auto; border-radius: 2px; }

/* Gerçek kitap mockup görseli (hero + kitap sayfası) */
.hero-book .kitap-mockup {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.hero-book-alt { color: #C9D4E6; font-size: .85rem; margin: 14px 0 0; text-align: center; }

/* Hero altı çapa linkleri (koyu hero üzerinde açık renk) */
.hero-capalar { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.hero-capalar a {
    color: #DCE5F2;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--altin);
    padding-bottom: 2px;
}
.hero-capalar a:hover { color: var(--altin); }

/* ============================================================
   HERO BANNER (3 slayt: Demo İncele / Kitap / Çözümler)
   ============================================================ */
/* Alt boşluk: göstergeler ile hemen altındaki modül şeridi (margin-top:-30px) çakışmasın */
.hero-banner { padding: 54px 0 62px; }
/* Slaytlar AYNI ızgara gözünde üst üste durur:
   - kutu yüksekliği = en uzun slayt → geçişte sayfa zıplamaz, bannerlar aynı hizada olur
   - display:none yerine opacity/visibility → gerçek çapraz geçiş (crossfade) mümkün
   (display:none ile geçiş animasyonu çalışmadığı için "başka sayfaya attı" hissi veriyordu) */
/* Slaytlar üst üste durur ve HEPSİ AYNI ÜST HİZADAN başlar → başlıklar banner
   değişirken yer değiştirmez.
   YÜKSEKLİK SABİTTİR: home/index.php içindeki script tüm slaytları ölçüp EN UZUNUNU
   kutuya sabit yükseklik olarak verir. Geçişte kutu hiç büyüyüp küçülmez, dolayısıyla
   bannerın altındaki hiçbir öğe (modül şeridi, motto bandı, kartlar...) kıpırdamaz.
   Bu yüzden 'transition: height' YOK — yükseklik hiç değişmiyor. */
.banner-pencere { position: relative; }
.banner-slayt {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    /* Slayt kutunun TAMAMINI kaplar ve içeriği dikeyde ORTALANIR: kısa bannerların
       altında toplanan büyük boşluk, üst-alt eşit paylaşılınca kaybolur. */
    display: flex; align-items: center;
    opacity: 0;
    visibility: hidden;                      /* gizli slayttaki linkler sekmeyle gezilemez */
    transition: opacity .45s ease, visibility .45s;
}
.banner-slayt > .hero-grid { width: 100%; }
.banner-slayt.aktif { opacity: 1; visibility: visible; }
/* JS çalışmıyorsa aktif slayt akışta kalsın — yoksa kutu yüksekliği sıfır olurdu */
.banner-pencere:not(.js-yukseklik) .banner-slayt.aktif { position: relative; bottom: auto; }

/* ÖLÇÜM MODU (script bir an için ekler): slaytlar akışa girer ki her biri kendi
   içerik yüksekliğini bildirsin. Slaytlar absolute + bottom:0 iken yükseklikleri
   kutudan geliyor, kutu da onlardan — ölçüm döngüye giriyordu. */
.banner-pencere.olcum .banner-slayt {
    position: relative; bottom: auto;
    opacity: 0; visibility: hidden; transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .banner-pencere, .banner-slayt { transition: none; }
}

/* Kontrol düzeni: solda ok — banner — sağda ok, altta göstergeler */
.banner-kontrol {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-areas:
        "sol slayt sag"
        ".   gosterge .";
    align-items: center;
    gap: 14px 12px;
    position: relative;
    z-index: 2;
}
.banner-kontrol > .banner-ok.sol { grid-area: sol; }
.banner-kontrol > .banner-pencere { grid-area: slayt; }
.banner-kontrol > .banner-ok.sag { grid-area: sag; }
.banner-kontrol > .banner-gosterge { grid-area: gosterge; }

/* Yan oklar — sade daire */
.banner-ok {
    appearance: none;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-family: inherit; font-size: 1.9rem; line-height: 1;
    padding: 0 0 4px;                       /* ‹ › karakterleri optik olarak yukarı kaçıyor */
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.banner-ok:hover {
    background: var(--altin); border-color: var(--altin);
    color: var(--lacivert); transform: scale(1.06);
}
.banner-ok:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }

/* Göstergeler — minik çizgiler */
.banner-gosterge { display: flex; gap: 8px; justify-content: center; }
.gosterge-nokta {
    appearance: none; cursor: pointer; padding: 0;
    width: 26px; height: 5px; border-radius: 999px; border: none;
    background: rgba(255, 255, 255, .28);
    transition: background .2s, width .2s;
}
.gosterge-nokta:hover { background: rgba(255, 255, 255, .5); }
.gosterge-nokta.aktif { background: var(--altin); width: 40px; }
.gosterge-nokta:focus-visible { outline: 2px solid var(--altin); outline-offset: 4px; }

@media (max-width: 760px) {
    /* Telefonda oklar yanda yer yiyordu → banner tam genişlik, kontroller altta tek satır */
    .banner-kontrol {
        grid-template-columns: 44px 1fr 44px;
        grid-template-areas:
            "slayt slayt slayt"
            "sol   gosterge sag";
        gap: 16px 10px;
    }
    .banner-ok { width: 44px; height: 44px; font-size: 1.7rem; }
    .banner-ok.sol { justify-self: start; }
    .banner-ok.sag { justify-self: end; }
}

/* Slayt 1 görseli — demo konu kartı */
.banner-demo-kart {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    padding: 22px 20px;
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .32);
    backdrop-filter: blur(3px);
}
.banner-kart-ust {
    display: block;
    font-size: .68rem; letter-spacing: 2.4px; font-weight: 800;
    color: var(--altin); margin-bottom: 14px;
}
.banner-kart-satir {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
    color: #EAF0FA; font-size: .93rem; font-weight: 600;
}
.banner-kart-satir b { margin-left: auto; color: var(--altin); font-size: .86rem; }
.banner-kart-satir.soluk { opacity: .55; }
.banner-nokta { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.banner-nokta.yesil { background: #37B24D; box-shadow: 0 0 0 3px rgba(55, 178, 77, .22); }
.banner-nokta.sari  { background: #F0A92C; box-shadow: 0 0 0 3px rgba(240, 169, 44, .22); }
.banner-nokta.gri   { background: #8395AF; }
.banner-kart-alt {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #C9D4E6; font-size: .82rem;
}

/* Slayt yükseklikleri birbirine YAKIN kalsın: kutu en uzun slayta göre sabitlendiği için
   en uzunu kısaltmak, kısa slaytlardaki boşluğu doğrudan azaltır.
   Kitap kapağı en uzun slaytı yaratıyordu → sınırlandı.
   Demo kartı ve çözüm ızgarası ise en kısa slaytlar → biraz nefes verildi. */
.hero-banner .hero-book-v2 { max-width: 285px; }
.hero-banner .hero-book-v2 img { max-height: 330px; width: auto; }
.hero-banner .banner-demo-kart { padding: 26px 22px; }
.hero-banner .banner-demo-kart .banner-kart-satir { padding: 13px 0; }
.hero-banner .banner-cozum { padding: 26px 14px; }

/* Çatıdan yüklenen banner görseli */
.banner-yuklenen-gorsel {
    display: block; max-width: 100%; max-height: 340px; width: auto;
    margin: 0 auto; border-radius: 18px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .34);
    border: 4px solid rgba(255, 255, 255, .12);
}
/* Görselsiz banner: metin tam genişlik */
.hero-grid.tek-kolon { grid-template-columns: 1fr; }
.hero-grid.tek-kolon .lead { max-width: 780px; }

/* Slayt 3 görseli — çözüm kutucukları */
.banner-cozum-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    max-width: 420px; margin: 0 auto;
}
.banner-cozum {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    padding: 20px 14px;
    text-align: center;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
}
.banner-cozum span { display: block; font-size: 1.9rem; margin-bottom: 8px; }
.banner-cozum strong { color: #EAF0FA; font-size: .86rem; line-height: 1.3; display: block; }

/* Modül şeridi bağlantı hâli */
a.ozellik-item {
    text-decoration: none;
    border-radius: 12px;
    transition: background .15s, transform .15s;
}
a.ozellik-item:hover { background: #F3F7FD; transform: translateY(-2px); }
a.ozellik-item:hover strong { color: var(--altin-koyu); }

/* ---------- KİTAP reklam bandı ---------- */
.kitap-band { background: linear-gradient(135deg, #FCF6E9 0%, #F7EDD8 100%); }
.kitap-band-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 44px;
    align-items: center;
}
.kitap-band-gorsel img {
    display: block;
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    box-shadow: var(--golge-buyuk);
}
.kitap-band-metin .eyebrow {
    color: var(--altin-koyu);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: .78rem;
    text-transform: uppercase;
}
.kitap-band-metin h2 { margin: 8px 0 12px; font-size: 1.6rem; }
.kitap-band-lead { color: var(--metin); font-size: 1.02rem; max-width: 620px; }
.kitap-band-yayinevi { color: var(--metin-soluk); font-weight: 600; font-size: .95rem; }
.kitap-band-yayinevi a { color: var(--altin-koyu); text-decoration: underline; }
.kitap-band-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.kitap-hero-yayinevi { color: #C9D4E6; font-weight: 600; font-size: .95rem; margin-top: -6px; }
.kitap-hero-yayinevi a { color: var(--altin); text-decoration: underline; }

/* ---------- SSS accordion (JS'siz — details/summary) ---------- */
.sss-liste { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.sss-madde {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    box-shadow: var(--golge);
    overflow: hidden;
}
.sss-madde summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 48px 16px 20px;
    font-weight: 700;
    color: var(--lacivert);
    position: relative;
    user-select: none;
}
.sss-madde summary::-webkit-details-marker { display: none; }
.sss-madde summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #F9EFDB;
    color: var(--altin-koyu);
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}
.sss-madde[open] summary { border-bottom: 1px dashed var(--cizgi); }
.sss-madde[open] summary::after { content: "−"; background: var(--altin); color: var(--lacivert); }
.sss-madde summary:hover { color: var(--altin-koyu); }
.sss-icerik { padding: 14px 20px 18px; }
.sss-icerik p { color: var(--metin); font-size: .96rem; margin: 0 0 10px; }
.sss-icerik p:last-child { margin-bottom: 0; }
.sss-icerik .btn { margin-top: 6px; }
.btn-sm { padding: 7px 14px; font-size: .86rem; }

/* ---------- Görüşme talebi formu + teşekkür ---------- */
.gorusme-dar { max-width: 720px; }
.gorusme-form { margin-top: 26px; }
.gorusme-iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.zorunlu { color: var(--kirmizi); }
.form-hata { color: var(--kirmizi); font-size: .84rem; margin: 6px 0 0; }
.gorusme-not { color: var(--metin-soluk); font-size: .82rem; text-align: center; margin: 12px 0 0; }
.gorusme-tesekkur { padding: 44px 30px; }
.tesekkur-ikon { font-size: 3rem; margin-bottom: 12px; }
.tesekkur-mesaj { font-size: 1.08rem; color: var(--metin); }

/* ---------- Public makale önizlemesi + kilit ---------- */
.makale-onizleme p { font-size: 1.06rem; line-height: 1.85; margin: 0; }
.makale-kilit {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 22px;
    background: linear-gradient(180deg, rgba(217, 164, 65, .10), rgba(217, 164, 65, .18));
    border: 1px dashed rgba(217, 164, 65, .55);
}
.makale-kilit-ikon { font-size: 2rem; flex: none; }
.makale-kilit-metin { flex: 1; min-width: 220px; }
.makale-kilit-metin h3 { margin: 0 0 6px; font-size: 1.08rem; }
.makale-kilit-metin p { margin: 0; font-size: .94rem; color: var(--metin); }
.makale-kilit-butonlar { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
@media (max-width: 560px) {
    .makale-kilit { flex-direction: column; align-items: stretch; text-align: center; }
    .makale-kilit-butonlar { flex-direction: column; }
    .makale-kilit-butonlar .btn { width: 100%; }
}

/* ---------- Kontur paketleri ---------- */
.paket-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px; align-items: stretch;
}
.paket-kart {
    position: relative; display: flex; flex-direction: column; align-items: center;
    text-align: center; text-decoration: none;
    background: var(--kart); border: 2px solid var(--cizgi);
    border-radius: 18px; padding: 26px 18px 20px;
    box-shadow: var(--golge);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.paket-kart:hover {
    border-color: var(--altin); transform: translateY(-4px); box-shadow: var(--golge-buyuk);
}
.paket-kart.one-cikan { border-color: var(--altin); }
.paket-etiket {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--altin); color: var(--lacivert);
    font-size: .7rem; font-weight: 800; letter-spacing: .6px;
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.paket-adet { font-size: 2.3rem; font-weight: 800; color: var(--lacivert); line-height: 1; }
.paket-birim {
    font-size: .78rem; font-weight: 800; letter-spacing: 2px;
    color: var(--altin-koyu); text-transform: uppercase; margin-top: 2px;
}
.paket-fiyat {
    font-size: 1.5rem; font-weight: 800; color: var(--metin);
    margin-top: 14px; padding-top: 14px; width: 100%;
    border-top: 1px dashed var(--cizgi);
}
.paket-fiyat small { font-size: .9rem; font-weight: 700; }
.paket-kdv { font-size: .78rem; color: var(--metin-soluk); }
.paket-hesap { font-size: .8rem; color: var(--metin-soluk); margin-top: 6px; }
.paket-btn { margin-top: 16px; width: 100%; }

/* ---------- Ödeme bilgileri ---------- */
.odeme-kutu { max-width: 720px; margin-left: auto; margin-right: auto; }
.odeme-liste { display: grid; grid-template-columns: 140px 1fr; row-gap: 10px; column-gap: 14px; margin: 14px 0 0; }
.odeme-liste dt { font-weight: 700; font-size: .86rem; color: var(--metin-soluk); }
.odeme-liste dd { margin: 0; }
.iban {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 8px;
    padding: 5px 10px; font-size: .92rem; font-weight: 700; color: var(--lacivert);
    display: inline-block; word-break: break-all;
}
@media (max-width: 560px) {
    .odeme-liste { grid-template-columns: 1fr; row-gap: 2px; }
    .odeme-liste dd { margin-bottom: 10px; }
}

/* ---------- KVKK / hukuki metin sayfası ---------- */
.kvkk-metin { font-size: 1rem; line-height: 1.8; color: var(--metin); }
.kvkk-metin h2 {
    font-size: 1.22rem; color: var(--lacivert);
    margin: 34px 0 12px; padding-bottom: 8px;
    border-bottom: 2px solid var(--altin);
    display: inline-block;
}
.kvkk-metin h3 { font-size: 1.05rem; color: var(--lacivert); margin: 0 0 8px; }
.kvkk-metin ul { margin: 0 0 16px 22px; }
.kvkk-metin li { margin-bottom: 8px; }
.kvkk-metin p { margin: 0 0 14px; }
.kvkk-tarih { color: var(--metin-soluk); font-size: .88rem; }
.kvkk-kutu { background: var(--zemin); }
.kvkk-eksik { color: var(--kirmizi); font-weight: 600; font-style: normal; font-size: .9rem; }
.kvkk-uyari { background: #FCF6E9; border: 1px solid #F0E1C4; }
.kvkk-uyari ul { margin-bottom: 0; }
/* Etiket/değer listesi (cati.css panelde; public sayfada da gerekiyor) */
.kvkk-metin .bilgi-liste {
    margin: 0; display: grid; grid-template-columns: 150px 1fr;
    row-gap: 10px; column-gap: 14px;
}
.kvkk-metin .bilgi-liste dt { font-weight: 700; font-size: .88rem; color: var(--metin-soluk); }
.kvkk-metin .bilgi-liste dd { margin: 0; }
@media (max-width: 560px) {
    .kvkk-metin .bilgi-liste { grid-template-columns: 1fr; row-gap: 2px; }
    .kvkk-metin .bilgi-liste dd { margin-bottom: 10px; }
    .kvkk-metin h2 { font-size: 1.1rem; }
}

/* ---------- Bireysel kayıt ---------- */
.kayit-alt-not {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed var(--cizgi);
    color: var(--metin-soluk);
    font-size: .88rem;
}
.kayit-alt-not a { color: var(--altin-koyu); font-weight: 600; }

/* ---------- Demo kredi notu ---------- */
.demo-kredi-not {
    display: inline-block;
    background: rgba(217, 164, 65, .16);
    border: 1px solid rgba(217, 164, 65, .45);
    color: #F3D9A6;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .9rem;
    font-weight: 600;
    margin: 4px 0 6px;
}

/* ---------- Motto bandı detayları ---------- */
.motto-band .container { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.motto-icon { font-size: 1.2rem; }
.motto-author { font-weight: 600; opacity: .8; font-size: .92rem; }

/* ---------- Çözüm / modül / bölüm kartları ---------- */
.cozum-card, .modul-card { text-align: center; }
.cozum-icon { font-size: 2.2rem; margin-bottom: 10px; }
.cozum-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.cozum-card p, .modul-card p { color: var(--metin-soluk); font-size: .9rem; margin: 0; }
.modul-icon { font-size: 1.8rem; margin-bottom: 8px; }
.modul-card h4 { font-size: .98rem; margin-bottom: 6px; }

.bolum-card .bolum-icon { font-size: 1.9rem; margin-bottom: 8px; }
.bolum-card h4 { margin-bottom: 6px; }
.bolum-card p { color: var(--metin-soluk); font-size: .88rem; }
.bolum-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Makale kartları ---------- */
.makale-card h4 { margin: 10px 0 8px; }
.makale-card p { color: var(--metin-soluk); font-size: .9rem; }
.makale-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: .84rem;
    color: var(--metin-soluk);
}
.okuma-suresi { color: var(--metin-soluk); font-size: .84rem; white-space: nowrap; }
.devami { color: var(--altin-koyu); font-weight: 700; margin-left: auto; }

/* ---------- Kitap sayfası: içindekiler + yazar ---------- */
.kitap-hero .eyebrow { display: block; margin-bottom: 10px; }
.toc-card .toc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.toc-card .toc-icon { font-size: 1.7rem; }
.toc-card h3 { font-size: 1.08rem; margin: 0; }
.toc-card h3 a { color: var(--lacivert); text-decoration: none; }
.toc-card h3 a:hover { color: var(--altin-koyu); }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--cizgi);
    font-size: .93rem;
}
.toc-list li:last-child { border-bottom: none; }
.toc-sub-title { color: var(--metin); }

.yazar-grid { display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: start; max-width: 860px; margin: 0 auto; }
.yazar-avatar {
    width: 140px; height: 140px;
    border-radius: 50%;
    background: var(--lacivert);
    color: var(--altin);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; font-weight: 800; letter-spacing: 2px;
    box-shadow: var(--golge-buyuk);
}
.yazar-bio p { font-size: 1.02rem; line-height: 1.75; }
.yazar-rozetler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* NOT: .filtre-chip / .sayfalama stilleri site.css'e TAŞINDI —
   panel tarafındaki Bildirimlerim sayfası da aynı bileşenleri kullanıyor
   ve panelde landing.css yüklenmiyor. */

/* ---------- Makale detay ---------- */
.makale-dar { max-width: 820px; }
.kirinti { font-size: .86rem; color: var(--metin-soluk); margin-bottom: 18px; display: flex; gap: 7px; flex-wrap: wrap; }
.kirinti a { color: var(--metin-soluk); text-decoration: none; }
.kirinti a:hover { color: var(--altin-koyu); }
.kirinti-son { color: var(--metin); font-weight: 600; }

.makale-baslik h1 { font-size: 1.9rem; line-height: 1.25; margin: 8px 0 12px; }
.makale-baslik .makale-meta { margin-top: 8px; }

.makale-motto {
    margin: 26px 0;
    padding: 20px 26px;
    border-left: 5px solid var(--altin);
    background: #FCF6E9;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1.12rem;
    font-style: italic;
    font-weight: 600;
    color: var(--lacivert);
}
.makale-motto cite { display: block; margin-top: 8px; font-size: .82rem; font-style: normal; color: var(--metin-soluk); }

.makale-icerik { font-size: 1.03rem; line-height: 1.8; color: var(--metin); }
.makale-icerik h2, .makale-icerik h3, .makale-icerik h4 { color: var(--lacivert); margin: 26px 0 12px; }
.makale-icerik p { margin-bottom: 16px; }
.makale-icerik ul, .makale-icerik ol { margin: 0 0 16px 24px; }
.makale-icerik li { margin-bottom: 6px; }
.makale-icerik blockquote {
    margin: 18px 0;
    padding: 14px 20px;
    border-left: 4px solid var(--mavi);
    background: var(--mavi-zemin);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.makale-icerik img { max-width: 100%; border-radius: var(--radius-sm); }
.makale-icerik table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.makale-icerik table th, .makale-icerik table td { border: 1px solid var(--cizgi); padding: 8px 12px; }

.alt-baslik { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.yesil-vurgu { color: var(--yesil); }
.kirmizi-vurgu { color: var(--kirmizi); }

/* Test CTA */
.test-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.test-cta-ikon { font-size: 2.2rem; }
.test-cta h3 { margin-bottom: 4px; }
.test-cta p { color: var(--metin-soluk); margin: 0; font-size: .93rem; }
.test-cta .btn { margin-left: auto; }

/* Yorumlar */
.yorum-liste { display: grid; gap: 12px; }
.yorum-karti p { margin: 0; font-size: .95rem; }
.yorum-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.yorum-tarih { color: var(--metin-soluk); font-size: .8rem; }
.yorum-yok { color: var(--metin-soluk); }
.yorum-form .yorum-not { color: var(--metin-soluk); font-size: .82rem; margin: 10px 0 0; }
.uye-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #FCF6E9; border: 1px solid #F0E1C4; }
.uye-cta p { margin: 0; font-weight: 600; color: var(--lacivert); }

/* ---------- Demo sayfası ---------- */
.demo-hero { text-align: left; }
.demo-hero .eyebrow { display: block; margin-bottom: 10px; }
.demo-hero .lead strong { color: #fff; }
.demo-agac-karti { max-width: 860px; margin: 0 auto; }
.tree-konu { text-decoration: none; transition: border-color .15s, transform .15s; }
.tree-konu:hover { border-color: var(--altin); transform: translateX(3px); }
.tree-konu .node-sub { display: inline-flex; align-items: center; gap: 8px; }

/* Başabaş hesaplayıcı */
.hesap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; align-items: start; }
.hesap-bekliyor { text-align: center; color: var(--metin-soluk); padding: 18px 6px; }
.hesap-bekliyor .empty-icon { font-size: 2.4rem; margin-bottom: 8px; }
.hesap-formul {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--zemin);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--metin-soluk);
}
.sonuc-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--cizgi);
}
.sonuc-satir.soluk .sonuc-deger { color: var(--metin-soluk); }
.sonuc-etiket { color: var(--metin-soluk); font-size: .92rem; }
.sonuc-deger { font-size: 1.25rem; font-weight: 800; color: var(--lacivert); }
.hesap-not { color: var(--metin-soluk); font-size: .9rem; }

/* ---------- Demo test ---------- */
.demo-test-karti { border-top: 4px solid var(--altin); }
.demo-test-baslik { text-align: center; margin-bottom: 22px; }
.demo-test-baslik h2 { font-size: 1.35rem; margin: 6px 0 8px; }
.demo-test-baslik p { color: var(--metin-soluk); font-size: .93rem; }
.demo-soru { border: none; padding: 0; margin: 0 0 26px; }
.demo-soru legend { margin-bottom: 4px; }
.quiz-choice input[type="radio"] { accent-color: var(--lacivert); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-choice { display: flex; align-items: center; gap: 12px; }

/* ---------- Demo test sonucu ---------- */
.result-ring { margin: 26px auto; }
.sonuc-skor { font-size: 1.15rem; }
.sonuc-mesaj { max-width: 640px; margin: 18px auto 0; }
.sonuc-dokum h3 { font-size: 1.1rem; }
.sonuc-soru { padding: 14px 0; border-bottom: 1px dashed var(--cizgi); }
.sonuc-soru:last-child { border-bottom: none; }
.sonuc-soru-ust { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sonuc-cevap { margin: 8px 0 0 4px; font-size: .9rem; color: var(--metin-soluk); }
.sonuc-alt-not { color: var(--metin-soluk); font-size: .9rem; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 900px) {
    .hesap-grid { grid-template-columns: 1fr; }
    .yazar-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .yazar-rozetler { justify-content: center; }
    .kitap-band-grid { grid-template-columns: 1fr; text-align: center; }
    .kitap-band-gorsel img { margin: 0 auto; }
    .kitap-band-lead { margin-left: auto; margin-right: auto; }
    .kitap-band-actions { justify-content: center; }
    .gorusme-iki-kolon { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .makale-baslik h1 { font-size: 1.5rem; }
    .test-cta { flex-direction: column; align-items: flex-start; }
    .test-cta .btn { margin-left: 0; }
    .uye-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- V17: Online ödeme (Tami Sanal POS) ---------- */
.sozlesme-onay {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 18px; font-size: .92rem; cursor: pointer;
}
.sozlesme-onay input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--altin-koyu); }
.sozlesme-onay a { color: var(--altin-koyu); text-decoration: underline; font-weight: 700; }
div.paket-kart { cursor: default; }
.paket-alt-link {
    display: block; margin-top: 8px; font-size: .78rem;
    color: var(--metin-soluk); text-decoration: underline;
}
.paket-alt-link:hover { color: var(--altin-koyu); }