@charset "UTF-8";
/* ===========================================================
   KB Momin Norsiah — DÖRT SAYFANIN ORTAK BİLEŞENLERİ
   22.08.2026 · birleşme turu

   Buraya yalnız DÖRT SAYFADA DA aynı olması gereken şeyler girer.
   Bugün: footer. (Düğme ve WhatsApp balonu adım 4'te eklenecek.)

   NEDEN AYRI DOSYA: index.html `kb-pages.css`i YÜKLEMEZ — kendi
   satır içi stilini kullanır. Ortak bir bileşeni tek yerde tutmanın
   başka yolu yok; iki yere kopyalanırsa 22.08'de kapatılan ıraksama
   bir sonraki turda aynen geri gelir.

   Yükleme sırası her sayfada:  kb-tokens.css → kb-ortak.css → (kb-pages.css)
   ⚠ kb-tokens.css'ten SONRA gelmeli; var(--…) oradan çözülüyor.
   =========================================================== */

/* ---------- footer ----------
   TEMEL: ana sayfanın BEYAZ footer'ı (index.html:458-466 · 22.08 öncesi).
   Alt sayfaların KOYU footer'ı (kb-pages.css `footer.site`, `--ink` zemin,
   MOMIN filigranı) kaldırıldı — kullanıcı kararı "ana sayfa temel".

   Ana sayfada OLMAYIP alt sayfalarda olan üç şey İÇERİK olduğu için
   korundu ve beyaz düzene taşındı:
     · logo görseli   (ana sayfada marka düz metindi)
     · görünür numara (ana sayfada yalnız "WhatsApp" yazıyordu)
     · @kelasbimbinganalquran_  (ana sayfada yalnız "Instagram")
   Dördüncü sütun "Laman" ise ana sayfanın 3 sütunlu ızgarası korunsun
   diye "Halaman" ile BİRLEŞTİRİLDİ — bağlantıların hiçbiri düşmedi. */
footer.site{
  background:#fff;
  border-top:1px solid var(--line);
  padding:54px 0 28px;
  font-size:14px;
  color:var(--muted);
}
footer.site .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}

footer.site .foot-brand img{height:40px;width:auto;display:block;margin-bottom:14px}
footer.site .foot-brand p{max-width:34ch;color:var(--muted);text-wrap:pretty}

footer.site h4{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:12px;
  color:var(--faint);
  margin-bottom:14px;
  font-weight:700;
}
footer.site .foot-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
footer.site .foot-col p{margin:0;max-width:30ch;text-wrap:pretty}
footer.site a{color:var(--muted);transition:color .15s}
footer.site a:hover{color:var(--navy)}

footer.site .foot-bottom{
  border-top:1px solid var(--line);
  margin-top:36px;
  padding-top:20px;
  text-align:center;
  color:var(--faint);
  font-size:12.5px;
}

/* ≤860 — dokunma hedefi. index.html:3543'ün karşılığı.
   Bağlantılar 44×44'e açılır; ızgara HENÜZ tek sütuna inmez (eşik 760). */
@media(max-width:860px){
  footer.site .foot-col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}

/* ≤760 — tek sütun. Ana sayfanın eşiği (index.html:462), alt sayfaların
   560'ı değil: "ana sayfa temel". */
@media(max-width:760px){
  footer.site .foot-grid{grid-template-columns:1fr;gap:26px}
}

/* ≤640 — yoğunluk. index.html:844-850 (o blok @media max-width:640 içindeydi;
   860 sanılıp oraya taşınması sık yapılan hata — ölçüldü, 640'tır). */
@media(max-width:640px){
  footer.site{padding:44px 0 24px}
  footer.site .foot-grid{gap:22px}
  footer.site .foot-brand img{height:34px;margin-bottom:10px}
  footer.site .foot-col{gap:8px}
  footer.site .foot-col a,footer.site .foot-col p{font-size:13px}
  footer.site .foot-bottom{font-size:11.5px;margin-top:24px;padding-top:16px}
}

/* ≤380 — index.html:952'nin karşılığı */
@media(max-width:380px){
  footer.site .foot-col{gap:4px}
}

/* ---------- düğmeler ----------
   TEMEL: ana sayfanın ölçeği (index.html:104 · 14px · 9-20px · --r-btn).
   Alt sayfaların 15px / 14-26px / min-height:48px'i kaldırıldı.

   ⚠ line-height AÇIKÇA yazıldı — ana sayfa yazmıyordu ve bu ölçülebilir
     bir tutarsızlık üretiyordu. 1440px'te ölçüldü (22.08):
       <a class="btn">      43.80px   ← gövdeden 1.7 miras alıyor
       <button class="btn"> 39.00px   ← Chrome UA'sı form denetiminde
                                        line-height'i `normal`e SIFIRLAR
     Nav'daki "Daftar Awal" tam da bir <button>. 1.7 yazınca ikisi de
     43.8px olur; değer ana sayfanın bugünkü <a> çıktısıyla birebir aynı.
     Kendi font-size'ına göre çözülür, gövdeye bağlı değildir. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:14px;line-height:1.7;
  padding:9px 20px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;transition:.22s;white-space:nowrap;letter-spacing:.01em;
}
.btn svg{width:17px;height:17px;flex:none}

/* .btn-primary ile .btn-amber ana sayfada AYNI şeydir (amber gradyan).
   Alt sayfalarda .btn-primary düz laciverttı — çakışma, ana sayfa kazandı.
   Tek kullanıcısı 404.html:82'ydi; artık o da amber, ana sayfanın
   birincil düğmesiyle aynı. */
.btn-primary,.btn-amber{
  background:linear-gradient(135deg,var(--amber-cta) 0%,var(--amber-cta-2) 100%);
  color:#fff;box-shadow:0 2px 7px -3px rgba(216,120,24,.4);border-color:transparent;
}
.btn-primary:hover,.btn-amber:hover{
  background:linear-gradient(135deg,#BC6510 0%,var(--amber-cta) 100%);
  box-shadow:0 5px 14px -5px rgba(216,120,24,.5);
  transform:translateY(-2px) scale(1.02);
}
.btn-ghost{
  background:#fff;color:var(--navy);border-color:var(--line);
  box-shadow:0 2px 8px -2px rgba(16,46,94,.08);
}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-deep);box-shadow:0 6px 18px -6px rgba(216,120,24,.2);transform:translateY(-2px)}

/* Koyu zemin üstündeki hayalet düğme. Ana sayfada karşılığı
   `.cta-band .btn-ghost` (index.html:414) — aynı iş, aynı değerler.
   Bu sınıf olmadan alt sayfaların koyu CTA bandındaki WhatsApp düğmesi
   çerçevesini kaybediyordu (prototipte görüldü). */
.btn-ghost-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35);box-shadow:none}
.btn-ghost-light:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.8);color:#fff;transform:translateY(-2px)}

/* ⚠ MOBIL MENUDEKI DUGME — ozgulluk tuzagi.
   `.mobile-menu a` (kb-pages.css:58 ve index.html:151) `color:var(--navy-deep)`
   tasiyor ve ozgullugu 0,1,1. `.btn-amber` / `.mm-cta` ise 0,1,0 — yani menu
   bagi kurali dugmenin kendi rengini EZIYOR.

   22.08'de olculdu (390px, menu ACIK, gercek tiklama ile):
     ana sayfa  <button class="btn btn-primary mm-cta">  color #FFFFFF → 4.84 ✓
     alt sayfa  <a class="btn btn-amber mm-cta">         color #102E5E → 2.75 ✗
   Ayrisma tesadufi: ana sayfada CTA bir <button>, `.mobile-menu a` ona hic
   uymuyor. Alt sayfalarda <a> oldugu icin uyuyor ve lacivert metni dayatiyor.

   ⚠ Bu kusur BIRLESMEDEN ONCE de vardi — `.mobile-menu a` kurali 0d128a5'te
   birebir ayni. `olcum.mjs` kontrast olcutu yakalamadi cunku mobil menu
   olcum sirasinda KAPALI; goze de gorunmuyor cunku menu acilmadan bakilmiyor.

   Cozum ozgullugu esitlemek: `.mobile-menu a.btn` = 0,2,1 > 0,1,1.
   Menudeki duz baglantilar etkilenmez, yalniz dugmeler kendi rengini korur. */
.mobile-menu a.btn{color:#fff}
.mobile-menu a.btn-ghost{color:var(--navy)}

/* Mobil telafi — index.html:3501 · 704-705 · 891'den aynen.
   ⚠ 3501'siz 641-860 bandında ~43px kalıyor ve dokunma hedefi kapısı kırmızı yanar. */
@media(max-width:860px){ .btn{min-height:44px} }
@media(max-width:640px){
  .btn{padding:12px 18px;min-height:44px;font-size:13.5px;gap:7px;border-radius:12px}
  .btn svg{width:16px;height:16px}
}
@media(max-width:380px){ .btn{padding:11px 16px;font-size:13px} }

/* ---------- WhatsApp balonu ----------
   KULLANICI KARARININ TEK İSTİSNASI: burada ALT SAYFALAR kazanır.
   index.html'in `.wa-fab`ı (58px, z-index 60) kaldırıldı; alt sayfaların
   `.wafloat`ı (56px, z-index 80) dört sayfada da geçerli.
   index.html kb-pages.css'i yüklemediği için kural buraya taşındı. */
.wafloat{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -8px rgba(37,211,102,.6);transition:.18s}
.wafloat:hover{transform:translateY(-3px);color:#fff}
.wafloat svg{width:28px;height:28px}
@media(max-width:900px){ .wafloat{width:52px;height:52px;right:16px;bottom:16px} }
/* ≤860 yapışkan eylem çubuğu (#kbBar) devreye giriyor — balon gizlenir */
@media(max-width:860px){ .wafloat{display:none} }

/* ---------- duyuru şeridi ----------
   22.08'e kadar YALNIZ ana sayfadaydı: panelden yayımlanan bir duyuru
   (kayıt açılışı, tatil, saat değişikliği) Instagram'dan ya da aramadan
   doğrudan tentang/soalan-lazim'a düşen veliye HİÇ görünmüyordu.
   Kural aynen korunuyor: BOŞKEN HİÇ İZ BIRAKMAZ (`hidden` ile başlar). */
.kb-duyuru{background:linear-gradient(100deg,var(--amber-soft),#FFF7EC);
  border-top:1px solid #EFD6B2;border-bottom:1px solid #EFD6B2;
  padding:14px 22px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.kb-duyuru[hidden]{display:none}
.kb-duyuru .kbd-item{max-width:78ch;font-size:14.5px;line-height:1.6;color:#7A4508}
.kb-duyuru .kbd-item strong{display:block;font-weight:800;color:var(--amber-deep);margin-bottom:2px}
@media(max-width:700px){.kb-duyuru{padding:12px 16px;font-size:13.5px}}

/* ---------- "içeriğe atla" bağlantısı ----------
   Klavye kullanıcısı her sayfada başlığı baştan geçmek zorunda kalmasın.
   GÖRÜNMEZ ama VAR: ekran dışında durur, TAB ile odaklanınca içeri kayar.
   `display:none` OLMAZ — o, bağlantıyı sekme sırasından da çıkarır ve
   özellik hiç çalışmaz. */
.atla{position:absolute;left:8px;top:-100px;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  background:var(--navy);color:#fff;border-radius:0 0 10px 10px;
  font-family:var(--sans);font-size:14px;font-weight:700;text-decoration:none;
  box-shadow:0 8px 24px -8px rgba(16,46,94,.5);transition:top .15s}
.atla:focus{top:0;color:#fff}
@media(prefers-reduced-motion:reduce){.atla{transition:none}}

/* ---------- mobil menü perdesi ----------
   Menü açıkken arkadaki sayfayı hem görsel olarak geriye iter hem de
   dışarı tıklamayı yakalar. z-index menünün ALTINDA, başlığın altında. */
.menu-perde{position:fixed;inset:0;z-index:40;background:rgba(11,20,26,.42);
  opacity:0;pointer-events:none;transition:opacity .18s}
.menu-perde.on{opacity:1;pointer-events:auto}
@media(min-width:1041px){.menu-perde{display:none}}
@media(prefers-reduced-motion:reduce){.menu-perde{transition:none}}

/* ---------- başlık CTA yüksekliği ----------
   Ana sayfada CTA bir <button>, alt sayfalarda <a>. Varsayılan kutu
   metrikleri farklı olduğu için 41.8 ↔ 43.8px ayrışıyordu — aynı görsel
   bileşen, iki farklı yükseklik. min-height ikisini de 44'e sabitler
   (dokunma eşiği de aynı sayı, tesadüf değil). */
.nav-right .btn,.nav-right .nav-cta{min-height:44px}