/* ==========================================================================
   GAZALI AVIATION — kvkk.css
   Altı yasal metin sayfasının (tema/yasal/YasalView.php) kuralları: metin
   gövdesi (.prose) ve belge düzeni (.belge-duzen / .belge-yan /
   .belge-nav__*). Ad tarihî — ilk yasal sayfa /kvkk idi.
   Ortak katman main.css'tedir; bu dosya ONUN USTUNE biner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19b. Metin sayfaları (KVKK vb.)
   -------------------------------------------------------------------------- */
.prose > *:first-child {
  margin-top: 0;
}

.prose h2 {
  font-size: var(--step-2);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}

.prose p,
.prose li {
  color: var(--slate-600);
}

.prose p + p {
  margin-top: 1rem;
}

.prose ul {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-inline-start: 1.35rem;
  list-style: disc;
}

.prose a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ⚠ ÖLÇÜLMÜŞ KUSUR: taslak uyarısının başlığı h2 (h1'den hemen sonra geldiği
   için — YasalView.php) ve yukarıdaki `.prose h2` ona da 2.75rem üst boşluk
   veriyordu: kutunun üstünde 44 px boş şerit (1280 px). Kutunun ilk öğesi
   kutunun kendi dolgusuyla başlar. */
.prose .callout > :first-child {
  margin-top: 0;
}

/* ==========================================================================
   YASAL METIN TABLOLARI — KENDİ İÇİNDE KAYAR
   --------------------------------------------------------------------------
   ⚠ ÖLÇÜLMÜŞ KUSUR: /cerez-politikasi 390px genişlikte 71px YATAY TAŞIYORDU
     (belge 461px / görünüm 390px). Taşıran öge .prose içindeki <table> (443px).
     Sayfanın GÖVDESİ yatay kaydığında tüm düzen kayar; kural, kaydırmayı
     tablonun KENDİ kutusuna hapseder.

   ⚠ NEDEN CSS, İŞARETLEME DEĞİL: tablo metnin içinde, metin de veritabanında
     (yasal_sayfa.icerik). Her tabloyu elle bir sarmalayıcıya almak, yönetici
     panelden yeni bir tablo eklediğinde yine taşardı — kural kalıcı çözümdür.
     (HtmlTemizleyici beyaz listesinde div YOK; sarmalayıcı zaten eklenemezdi.)

   ⚠ display:block ŞART: <table> varsayılan olarak overflow'u yok sayar.
   ========================================================================== */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   BELGE DÜZENİ — solda yasal belge gezinmesi, sağda metin
   --------------------------------------------------------------------------
   İşaretleme: private/page/tema/core/yasal-nav.php (YasalView.php require eder)
   Kaynak: simyakoleji.local/public/assets/tema/css/sayfa.css (.belge-duzen,
   .belge-nav) — UYARLANDI:
     - <nav>'ın kendisi SINIFSIZ: kaynakta `.belge-nav` blok sınıfı vardı ama
       burada ona ait tek kural yoktu (ölçüldü: CSS'te de JS'te de seçici
       yok) — tanımsız sınıf kaldırıldı. Görsel kutu .belge-yan'dır; öğeler
       .belge-nav__* adlarını taşır.
     - Kaynağın var(--c-*) jetonları yerine bu sitenin var(--navy-*) /
       var(--gold-*) / var(--paper) jetonları; rgba() yalnız örtü tonlarında
       (dil açılır menüsünün aynı tonları, main.css .dil-ac__oge).
     - Kaynaktaki border-left / text-align:left YOK — hepsi mantıksal
       (border-inline-start, padding-inline…): RTL'de gezinme kendiliğinden
       SAĞDA, vurgu çizgisi sağ kenarda.
     - Kırılma 992 değil 1024: bu genişlikte ve altında gezinme metnin
       ÜSTÜNE iner.
   ⚠ min-width: 0 ŞART (kaynaktaki ölçülmüş kusurla aynı): ızgara öğesinin
     otomatik asgari boyutu min-content'tir. Dar ekrandaki çip satırı
     (nowrap) ve metindeki tablolar sütunu kendi genişliklerine İTER, sayfa
     yatay kayar. min-width: 0 ile taşan şey kendi kutusunda kayar.
   ========================================================================== */

/* Kahraman şeridinden sonra metin 115 px aşağıdan başlıyordu (1280 px,
   --section-y). Yan sütunlu bir belge sayfasında bu boşluk gezinmeyi ve
   metnin ilk satırını ilk ekrandan itiyordu; alt boşluk (altbilgiye geçiş)
   aynen kalır. Genel .section'a dokunulmaz — tanıtım sayfaları onu kullanır. */
.section--belge {
  padding-block-start: clamp(2.5rem, 5vw, 4rem);
}

.belge-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.belge-icerik {
  min-width: 0;
}

/* Görsel kutu — gezinme + "Çerez ayarları" düğmesini birlikte çerçeveler.
   Düğme <nav>'ın DIŞINDA (eylemdir, bağlantı değil; bkz. yasal-nav.php). */
.belge-yan {
  min-width: 0;
  padding: 0.875rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Açık zeminde odak halkası LACİVERT: sitenin altın halkası (gold-500)
   açık zeminde 2,06:1 — WCAG 1.4.11'in 3:1 eşiğinin altında (çerez
   penceresiyle aynı gerekçe, cerez.css). */
.belge-yan :focus-visible {
  outline-color: var(--navy-950);
}

.belge-nav__baslik {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.625rem;
  padding-inline: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-950);
}

.belge-nav__baslik svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gold-600);
}

.belge-nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.belge-nav__link {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--slate-700);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.belge-nav__link:hover {
  color: var(--navy-900);
  background: rgba(212, 175, 55, 0.14);
}

/* Etkin belge: vurgu YALNIZ RENK DEĞİL — kalınlık + (geniş ekranda) başlangıç
   kenarında çizgi / (dar ekranda) dolu çip. aria-current="page" duyurur. */
.belge-nav__link--aktif {
  font-weight: 600;
  color: var(--navy-900);
}

/* "Çerez ayarları" — tercih penceresini açar (cerez.js, data-cerez-ayar-ac).
   ⚠ JS YOKKEN GİZLİ: pencereyi cerez.js açar; betiksiz bir düğme tıklanınca
     hiçbir şey yapmazdı. Şerit ve yüzen simge de .no-js'de gizli (cerez.css).
   min-height 44 px: dokunma hedefi (WCAG 2.5.5), köşe düğmeleriyle aynı. */
.belge-nav__cerez {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin-block-start: 0.875rem;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--navy-950);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.belge-nav__cerez svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.belge-nav__cerez:hover {
  color: var(--white);
  background: var(--navy-950);
}

.no-js .belge-nav__cerez {
  display: none;
}

/* --------------------------------------------------------------------------
   Geniş ekran (1025 px ve üstü) — iki sütun, yapışkan gezinme
   --------------------------------------------------------------------------
   ⚠ METİN SÜTUNU 46rem'DE KESİLİR: eski tek sütun (.container--narrow)
     metni 724 px'te tutuyordu; ızgara 1fr bıraksaydı 1280 px'te satır 800 px'i
     geçer, okunurluk düşerdi. Artan yer sonda boş kalır — ızgara başlangıca
     yaslı, gezinmenin kenarı kahramandaki başlıkla aynı hizada.
   ⚠ YAPIŞKAN + max-height: gezinme bir ekrandan uzun olursa (alçak pencere,
     büyütülmüş yazı) alt kısmı sayfa sonuna kadar ERİŞİLEMEZ kalırdı; kutu
     kendi içinde kayar. top, başlığın kaydırılmış yüksekliğini (70 px) değil
     --header-h'yi alır: başlık açılışta daha uzun, çakışma olmasın.
     --cerez-bar-h (cerez.js; şerit yokken 0) düşülür: çerez şeridi açıkken
     kutunun altı — "Çerez ayarları" düğmesi dahil — şeridin altında kalmasın.
   ⚠ --cerez-fab-alan DA düşülür — ÖLÇÜLMÜŞ KUSUR (2026-09-24): karar
     verildikten sonra şerit gider, yerine inline-start köşede yüzen çerez
     simgesi gelir. Kutunun altı ekranın altından 1.5rem yukarıda bitiyordu,
     simge ise tam o bantta (dipten --kose-bosluk + 44 px). Kutunun kenarı
     simgenin kolonuna düştüğü genişliklerde (1025–~1240 px; kapsayıcı kenarı
     68 px'in içinde) kısa pencerede simge "Çerez ayarları" düğmesini
     örtüyordu: 1025×460'ta 347 px², 1060×420'de 307, 1100×480'de 233.
     Kutu yapışkan olduğu için kaydırmak da kurtarmıyordu — düğme kalıcı
     olarak simgenin altındaydı. Değişkeni cerez.css koyar (simge yalnız
     .js.cerez-karar iken var); şerit görünürken simge yok, değişken 0.
     RTL'de simge de kutu da inline-start'ta — aynı geometri. */
@media (min-width: 1025px) {
  .belge-duzen {
    grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 46rem);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .belge-yan {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem - var(--cerez-bar-h, 0px) - var(--cerez-fab-alan, 0px));
    max-height: calc(100dvh - var(--header-h) - 3rem - var(--cerez-bar-h, 0px) - var(--cerez-fab-alan, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .belge-nav__liste {
    display: grid;
    gap: 0.125rem;
  }

  .belge-nav__link {
    padding: 0.55rem 0.75rem;
    border-inline-start: 3px solid transparent;
    border-start-start-radius: 0;
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    border-end-start-radius: 0;
  }

  .belge-nav__link:focus-visible {
    outline-offset: -2px;
  }

  /* Tonlar dil açılır menüsüyle aynı (main.css .dil-ac__oge--aktif) */
  .belge-nav__link--aktif,
  .belge-nav__link--aktif:hover {
    background: rgba(6, 42, 109, 0.07);
    border-inline-start-color: var(--gold-600);
  }
}

/* --------------------------------------------------------------------------
   Dar ekran (1024 px ve altı) — gezinme metnin ÜSTÜNDE, yatay çip satırı
   --------------------------------------------------------------------------
   Kaynakla aynı karar: altı başlık alt alta dizilse 390 px'te metni çok
   aşağı iterdi; çip satırı tek satır. Satır kendi kutusunda yatay kayar,
   sayfa kaymaz. Etkin çip görünür değilse kvkk.js onu satırın ortasına
   getirir (yalnız açılışta; ziyaretçinin kaydırmasına sonra dokunmaz).
   ⚠ Odak halkası İÇERİDE (offset -2px): kayan kutu dışarı taşan halkayı
     keserdi. Dolu (etkin) çipte halka BEYAZ — lacivert dolgu üstünde
     lacivert halka görünmezdi.
   ⚠ SÜTUN 46rem'DE KESİLİR — ÖLÇÜLMÜŞ KUSUR (2026-09-24): sınır yalnız
     geniş ekran ızgarasındaydı; 769–1024 px'te metin kapsayıcının tamamına
     yayılıyordu (1024 px'te 942 px, satır başına ~115 karakter). Sınır
     .belge-duzen'e konur, yalnız metne değil: çip satırı ile metin aynı
     sütunda kalır, gezinme metinden geniş bir şerit gibi durmaz. 768 px ve
     altında kapsayıcı zaten 46rem'den dar; kural orada hiçbir şey yapmaz.
   ⚠ ÇİP SATIRDAN GENİŞ OLAMAZ — ÖLÇÜLMÜŞ KUSUR (2026-09-24): çipler
     nowrap'tı ve genişlik sınırı yoktu. Satırdan geniş bir çip hiçbir
     kaydırma konumunda bütünüyle görünmez, kenarı hep kesik kalır.
     Ölçüldü: yazı %200 büyütülünce (WCAG 1.4.4) 390 px'te altı çipin
     dördü, 320 px'te altısı da satırdan genişti ("Çalışan Adayı Aydınlatma
     Metni" 448 px / satır 198 px). Arapça başlıklar yayına girdiğinde
     ("نص الإفصاح وفق قانون حماية البيانات الشخصية (KVKK)") normal boyda da
     olurdu. Şimdi çip en çok satır kadar; sığmayan çip KENDİ İÇİNDE iki
     satıra kırılır. Sığan çipler yine tek satır — max-content zaten
     sınırın altında. Satırdaki öteki çipler kırılan çipe göre ortalanır. */
@media (max-width: 1024.98px) {
  .belge-duzen {
    max-width: 46rem;
  }

  .belge-nav__liste {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block-end: 0.375rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .belge-nav__liste li {
    flex: none;
    max-width: 100%;
  }

  .belge-nav__link {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
    text-wrap: balance;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
  }

  .belge-nav__link:focus-visible {
    outline-offset: -2px;
  }

  .belge-nav__link--aktif,
  .belge-nav__link--aktif:hover {
    color: var(--white);
    background: var(--navy-950);
    border-color: var(--navy-950);
  }

  .belge-yan .belge-nav__link--aktif:focus-visible {
    outline-color: var(--white);
    outline-offset: -4px;
  }
}