/* Belge sayfaları — gizlilik, kullanım şartları, kaynaklar, destek.
   `landing.css`ten SONRA yükleniyor: palet, Manrope ve akışkan punto ölçeği
   oradan geliyor, burada yalnız belge yerleşimi ve dil anahtarı var.

   Üst şerit ana sayfanınkiyle aynı bileşen (.ust/.marka, landing.css);
   burada yalnız belge sayfasına özgü "dolu" hâli var. Dil anahtarı ve
   belge tipografisi bu dosyada. */

/* ── Dil anahtarı: İŞLEVSEL, süs değil ──────────────────────────
   docs.js `html.js-lang` sınıfını ekleyince yalnız etkin dil görünüyor.
   Bu üç kural olmadan dört dil birden alt alta açılır. JS yoksa hepsi
   görünür kalıyor -- sayfa yine okunabilir. */
[data-lang] { display: block }
html.js-lang [data-lang] { display: none }
html.js-lang [data-lang].show { display: block }
html.js-lang .lang-sep { display: none }
/* Dil, adres parçasıyla (/privacy#tr) seçiliyor ve bölümlerin id'si dil kodu: tarayıcı
   açılışta o bölüme kaydırıyor, sabit üst şerit dil pillerini ve başlığı örtüyordu
   (ölçüldü: pillerin üstü 14 px, şerit 68 px). JS dili seçtiyse bölüm zaten sayfanın
   başında: kaydırma hedefi en üste kenetlenir. JS yoksa diller alt alta ve #de yine
   Almanca bölüme gider (scroll-padding-top şeridi hesaba katar). */
html.js-lang main > section[data-lang] { scroll-margin-top: 100vh }
.lang-sep { margin: 3.5rem 0; border: 0; border-top: 1px solid var(--cizgi) }

/* ── Yerleşim ─────────────────────────────────────────────────── */
body { padding: 68px 0 0 }   /* sabit üst şeridin yüksekliği (.ust-ic 68px) */
html { scroll-padding-top: 84px }   /* sayfa içi çapalar şeridin altında kalmasın */
.topbar,
main > section[data-lang],
body > hr.lang-sep {
    max-width: 780px;
    margin-inline: auto;
    padding-inline: clamp(18px, 5vw, 28px);
}
main > section[data-lang] { padding-block: 0 clamp(48px, 8vw, 88px) }

/* Üst şerit: ana sayfadaki .ust ile aynı (logo + ezanvakitleri.org, ana sayfaya
   TEK bağlantı; eski "← Ana sayfa" + "Namaz Vakitleri" ikilisi aynı yere iki
   kez gidiyordu). Ana sayfada şerit hero'nun üstünde saydam başlayıp kaydırınca
   doluyor; belge sayfasında koyu hero yok, saydam hâlde beyaz yazı açık zeminde
   kaybolurdu: burada her zaman DOLU, animasyonsuz. Şerit sabit (fixed), içerik
   onun yüksekliği kadar aşağıdan başlıyor. */
.ust.ust-belge, .ust-belge .marka { animation: none }

/* Dil pilleri — ana sayfadaki şehir pilleriyle aynı dil */
.topbar {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-block: clamp(16px, 3vw, 24px) clamp(30px, 5vw, 44px);
}
.pill {
    display: inline-flex; align-items: center;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--cizgi); background: var(--zemin-yukseltilmis);
    color: inherit; text-decoration: none; user-select: none;
    font-size: .86em; font-weight: 600;
    transition: border-color .2s ease, background-color .2s ease;
}
.pill:hover { border-color: var(--deniz-300) }
.pill.active {
    border-color: var(--vurgu);
    background: color-mix(in srgb, var(--vurgu) 12%, transparent);
    font-weight: 700;
}

/* ── Belge tipografisi ────────────────────────────────────────── */
/* Belge başlığı hero ölçeğinde olmamalı: burada metin okunacak, etkilenecek değil. */
main > section[data-lang] h1 {
    margin: 0 0 .6rem; text-wrap: balance;
    font-size: clamp(1.5rem, calc(1.273rem + 1.136vw), 2.125rem); letter-spacing: -.02em;
}
main > section[data-lang] h2 {
    margin: 2.6rem 0 .6rem; color: var(--vurgu);
    font-size: clamp(1.15rem, calc(1.036rem + .568vw), 1.5rem);
}
main > section[data-lang] h3 { margin: 1.8rem 0 .4rem }
main > section[data-lang] p,
main > section[data-lang] li { margin-bottom: .7rem; color: var(--metin-yumusak) }
main > section[data-lang] ul { padding-inline-start: 1.3rem; margin-bottom: 1rem }
main > section[data-lang] a { color: var(--vurgu); text-underline-offset: 3px }
.muted { color: var(--metin-silik); font-size: .9em }
code {
    background: var(--kagit-2); border: 1px solid var(--cizgi);
    padding: 1px 6px; border-radius: 6px; font-size: .9em;
}

/* Soru-cevap blokları: ana sayfadaki SSS ile aynı ritim */
main > section[data-lang] details {
    border-bottom: 1px solid var(--cizgi); padding: 18px 0;
}
main > section[data-lang] details summary {
    cursor: pointer; font-weight: 700; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
main > section[data-lang] details summary::-webkit-details-marker { display: none }
main > section[data-lang] details summary::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border-right: 2px solid var(--metin-silik); border-bottom: 2px solid var(--metin-silik);
    transform: rotate(45deg); transition: transform .3s var(--egri);
}
main > section[data-lang] details[open] summary::after { transform: rotate(225deg) }
main > section[data-lang] details p { margin: .7rem 0 .2rem }

/* Belge altı bağlantı satırı */
.site-footer {
    margin-top: clamp(40px, 7vw, 64px); padding-top: 22px;
    border-top: 1px solid var(--cizgi);
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
    font-size: .9em;
}
.site-footer a { color: var(--metin-yumusak); text-decoration: none }
.site-footer a:hover { color: var(--vurgu) }
.site-footer .bosluk { flex: 1 1 auto }

/* ── Arapça: sağdan sola ──────────────────────────────────────── */
[dir="rtl"] { text-align: right }
[dir="rtl"] .site-footer { flex-direction: row-reverse }
[dir="rtl"] details summary { text-align: right }

@media (prefers-reduced-motion: reduce) {
    .pill, main > section[data-lang] details summary::after { transition: none }
}