/* ============================================================
   YASAL.CSS — beş yasal metin sayfası                2026-09-09
   ------------------------------------------------------------
   View : views/yeni/yasal.php · Controller : Sayfa_new::yasal_yeni()
   Plan : memory-bank/yasal-metinler-analiz-ve-plan.md

   Adresler: /kullanim-sozlesmesi · /satis-sozlesmesi ·
             /cerez-politikasi · /gizlilik-sozlesmesi · /kvkk-metni

   Sayfa ayrıca ortak.css + kurs.css + vitrin.css yüklüyor:
   hero iskeleti (.vit-hero / .vit-h1 / .vit-yol / .lede) vitrin.css'ten.
   ⛔ O bileşenleri burada yeniden yazma.

   İMZA RENGİ: çelik mavisi (#3E6E9E) — nötr, kurumsal, "belge"
   hissi. Takvim yeşil, ana altın, kategori turkuaz, SSS mor;
   yasal metinler renk yarışına girmemeli, en sakin ton onların.

   ⚠️ HERO ZEMİNİ KOYU LACİVERT (vitrin.css). Hero içindeki her
   renk ona göre — SSS turunda tam bu yüzden üç renk hatası
   çıkmıştı (koyu üstünde koyu). Ölçüt: hero metni AÇIK.
   ============================================================ */

.ys-sayfa{
  --ys: #3E6E9E;
  --ys-d: #2C5480;
  --ys-w: #EAF1F8;
}

/* ---- HERO — kısa tutuldu, metin ilk ekranda başlasın -------- */
.ys-hero .vit-hero-metin{ max-width:none }
.ys-hero .vit-kicker{ color:#9CC4FF }
.ys-hero .vit-h1{ font-size:clamp(1.35rem,1.05rem + 1.3vw,1.95rem) }
.ys-hero .lede{ max-width:72ch }

/* Diğer metinlere şerit — koyu zeminde saydam beyaz hap.
   📏 min-height:44px — dokunma hedefi (tuzaklar §K). */
.ys-serit{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }
.ys-serit a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:10px 15px;
  border:1px solid rgb(255 255 255 / .14);
  border-top-color:rgb(255 255 255 / .22);
  border-radius:999px;
  background:linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .05));
  font-size:13.5px; font-weight:800; color:#E4EBF6;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ys-serit a:hover{
  background:linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .09));
  border-color:rgb(156 196 255 / .5); color:#fff;
}

/* ---- DÜZEN: yan sütun + metin ------------------------------
   ⚠️ `minmax(0,…)` ŞART — uzun sözleşme satırları ve tablolar
   sütunu max-content'e çakıyor (tuzaklar §K "SÜTUNSUZ GRID";
   SSS turunda kategori listesi tam bu yüzden 121px taşımıştı). */
.ys-govde{ padding-block:clamp(34px,4.5vw,64px) }
.ys-duzen{
  display:grid; gap:clamp(24px,3vw,44px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1024px){
  .ys-duzen{ grid-template-columns:minmax(0,266px) minmax(0,1fr) }
}

/* ---- YAN SÜTUN --------------------------------------------- */
.ys-yan{ min-width:0; display:grid; gap:14px; align-content:start }
@media (min-width:1024px){
  /* Yapışkan: uzun sözleşmede içindekiler ekranda kalsın.
     `max-height` + kendi kaydırması — 13 maddelik liste
     ekrandan taşmasın. */
  .ys-yan{ position:sticky; top:100px; max-height:calc(100vh - 124px); overflow-y:auto }
  .ys-yan::-webkit-scrollbar{ width:6px }
  .ys-yan::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px }
}

.ys-kutu{
  min-width:0;
  padding:16px 16px 15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
}
/* 📏 KONTRAST: `--ink-3` (#8695AF) beyaz üstünde 3.03 çıkıyor —
   11,5px metin için AA eşiği 4.5 (ölçüldü 2026-09-09). `--ink-2`
   ile 6.01. SSS turundaki `.sss-kat-uzun` ile AYNI hata; versal
   küçük etiketlerde `--ink-3` bu projede yetmiyor. */
.ys-kutu-bas{
  margin:0 0 11px;
  font-size:11.5px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
}

/* İçindekiler — numaralı, derinliğe göre girintili */
.ys-icindekiler ol{ margin:0; padding:0; list-style:none; counter-reset:ysm }
.ys-icindekiler li{ counter-increment:ysm }
.ys-icindekiler a{
  display:flex; gap:9px;
  padding:7px 8px; border-radius:9px;
  font-size:13.5px; font-weight:700; line-height:1.4; color:var(--ink-2);
  transition:background .14s ease, color .14s ease;
}
.ys-icindekiler a::before{
  content:counter(ysm); flex:none;
  min-width:19px; text-align:right;
  font-weight:900; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.ys-icindekiler a:hover{ background:var(--ys-w); color:var(--ys-d) }
.ys-icindekiler a:hover::before{ color:var(--ys-d) }
/* Alt seviye başlıklar bir tık içeride ve küçük */
.ys-icindekiler .ys-d3 a{ padding-left:8px; font-size:13px }

/* Yasal metin listesi */
.ys-diger ul{ margin:0; padding:0; list-style:none; display:grid; gap:2px }
.ys-diger a,
.ys-diger .ys-aktif{
  display:flex; align-items:center; gap:10px; min-width:0;
  padding:9px 10px; border-radius:10px;
  font-size:14px; font-weight:700; line-height:1.35; color:var(--ink-2);
}
.ys-diger svg{ flex:none; width:17px; height:17px; color:var(--ink-3) }
.ys-diger a:hover{ background:var(--ys-w); color:var(--ys-d) }
.ys-diger a:hover svg{ color:var(--ys-d) }
.ys-diger .ys-aktif{
  background:var(--ys-w); color:var(--ys-d); font-weight:900;
  box-shadow:inset 3px 0 0 var(--ys);
}
.ys-diger .ys-aktif svg{ color:var(--ys-d) }

.ys-yardim p{ margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--ink-2) }

/* ---- METİN GÖVDESİ -----------------------------------------
   Admin `page_content`'i AYNEN basılıyor; buradaki her kural
   yalnız TİPOGRAFİ. Ölçüldü (2026-09-09): kullanım ve gizlilik
   metinleri 43 `<br>` ile tek blok akıyor — okunabilirlik
   tamamen satır aralığı ve ölçüye bağlı.
   ⚠️ `max-width` ch cinsinden VERİLMEDİ: proje kuralı (tuzaklar
   §B4) — metni dar sütuna sıkıştırıp sağda ölü alan bırakıyor.
   Sütunu ızgara belirliyor. */
.ys-metin{
  min-width:0;
  padding:clamp(22px,3vw,38px) clamp(18px,3vw,40px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-x);
  box-shadow:var(--sh-1);
  font-size:16px; line-height:1.78; color:var(--ink-2);
  /* 🔴 ÖLÇÜLDÜ 2026-09-09 (320px, canlı staging): sayfa 9px yatay
     kayıyordu. Kaynak `.ys-metin p` — 244px kaba 291px içerik.
     Sözleşme metninde bölünemeyen uzun diziler var (adresler,
     "www.nettekurs.com" gibi, tire/boşluk içermeyen kurum adları).
     `anywhere` bunları kırar; `break-word`ün aksine ızgara/flex
     ölçüsünü de küçültür — asıl taşmayı çözen bu.
     ⚠️ Admin metnine dokunmadan çözülebilen tek yol; metin
     düzeltilse bile yeni uzun dize geldiğinde koruma burada kalır. */
  overflow-wrap:anywhere;
}
.ys-metin p{ margin:0 0 15px }
.ys-metin p:last-child{ margin-bottom:0 }
.ys-metin :is(b, strong){ color:var(--ink); font-weight:800 }
.ys-metin :is(ul, ol){ margin:0 0 16px; padding-left:22px; list-style:revert }
.ys-metin li{ margin-bottom:7px }
.ys-metin a{
  color:var(--ys-d); font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.ys-metin a:hover{ color:var(--ys) }

/* Madde başlıkları — helper h4/h5'i h2/h3'e çekip id veriyor.
   `scroll-margin-top`: içindekilerden gelince başlık yapışkan
   menünün altında kalmasın. */
.ys-metin .ys-madde{
  scroll-margin-top:100px;
  margin:26px 0 12px;
  color:var(--navy); letter-spacing:-.015em;
}
.ys-metin h2.ys-madde{
  font-size:clamp(18px,2vw,22px);
  padding-top:20px; border-top:1px solid var(--line);
}
.ys-metin h3.ys-madde{ font-size:clamp(16px,1.7vw,18px) }
.ys-metin .ys-madde:first-child{ margin-top:0; padding-top:0; border-top:0 }

/* Sözleşmelerdeki tablo — helper `.sss-tablo` kabına alıyor.
   Kap kendi içinde kayıyor, GÖVDE kaymıyor (tuzaklar §K). */
.ys-metin .sss-tablo{ overflow-x:auto; margin:0 0 16px }
.ys-metin table{ border-collapse:collapse; width:100%; min-width:420px; font-size:14.5px }
.ys-metin :is(td, th){
  padding:9px 11px; border:1px solid var(--line);
  text-align:left; vertical-align:top;
}
.ys-metin th{ background:var(--tint); color:var(--ink); font-weight:800 }

.ys-uyari{
  padding:16px 18px; border-radius:var(--r);
  background:var(--red-w); color:var(--red-d);
  font-weight:700;
}

/* ---- SAYFA SONU KÖPRÜSÜ ------------------------------------ */
.ys-alt{
  margin-top:clamp(28px,3.5vw,44px);
  padding-top:22px;
  border-top:1px solid var(--line);
}
.ys-alt-bas{
  margin:0 0 12px;
  font-size:11.5px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.ys-alt-liste{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.ys-alt-liste a{
  display:flex; align-items:center; gap:10px; min-width:0;
  min-height:44px; padding:10px 13px;
  border:1px solid var(--line); border-radius:12px;
  background:#FBFCFE;
  font-size:14px; font-weight:800; color:var(--ink);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ys-alt-liste a:hover{ border-color:var(--ys); background:var(--ys-w); color:var(--ys-d) }
.ys-alt-liste svg{ flex:none; width:18px; height:18px; color:var(--ink-3) }
.ys-alt-liste a:hover svg{ color:var(--ys-d) }
.ys-alt-liste span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ============================================================
   DAR EKRAN — ⚠️ DOSYANIN SONUNDA (tuzaklar §N: aynı özgüllükte
   sonra gelen kural kazanır).
   ============================================================ */
@media (max-width:1023.98px){
  .ys-metin .ys-madde{ scroll-margin-top:76px }
  /* Yan sütun metnin ÜSTÜNDE: içindekiler mobilde de ilk ekranda
     olsun, uzun sözleşmede aşağı inmeden madde seçilebilsin. */
  .ys-yan{ order:-1 }
  /* Mobilde yapışkan DEĞİL — ekranın yarısını yerdi. */
  .ys-icindekiler ol{ max-height:270px; overflow-y:auto }
}

@media (max-width:759px){
  /* Şerit yatay kayıyor: 4 hap alt alta hero'yu şişiriyordu.
     Kaydırma kabın İÇİNDE (gövde yatay kaymaz). */
  .ys-serit{
    flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:-22px; padding:2px 22px 6px;
    scroll-snap-type:x proximity;
  }
  .ys-serit::-webkit-scrollbar{ display:none }
  .ys-serit a{ flex:none; scroll-snap-align:start }

  .ys-metin{ font-size:15.5px; line-height:1.75 }
  .ys-alt-liste{ grid-template-columns:minmax(0,1fr) }

  /* 📏 DOKUNMA HEDEFİ 44px — ölçüldü 2026-09-09 (390 ve 320px):
     yan gezinme satırları 37px, yardım kutusundaki düğme ~38px
     çıkıyordu. Çerez düğmesi (39px), takvim liste satırı (33px) ve
     SSS köprüleri (25px) vakalarının dördüncüsü.
     `.ys-serit` ve `.ys-alt-liste` zaten 44px'ti; eksik kalan bu ikisi.
     Masaüstünde kural YOK — orada fare var, satırları şişirmiyoruz. */
  .ys-diger a,
  .ys-diger .ys-aktif{ min-height:44px }
  .ys-yardim .btn{ min-height:44px }
  /* İÇİNDEKİLER de gezinme — satır içi metin linki DEĞİL.
     Ölçüldü 2026-09-09 (2. tur): 32px çıkıyordu. 13 madde × 44px
     kutuyu şişirmiyor: üstteki `≤1023.98px` bloğu listeye
     `max-height:270px` + kendi kaydırmasını zaten veriyor. */
  .ys-icindekiler a{ min-height:44px; align-items:center }
}

@media (max-width:400px){
  .ys-serit{ margin-inline:-16px; padding-inline:16px }
  .ys-metin{ padding-inline:15px }
}