/* =============================================================================
 * sistem.css — sistem sayfaları katmanı (handle: dm-sistem).
 *   templates/sistem/yasal.php  ·  (ileride) sistem/404.php · sistem/arama.php
 *
 * KAPSAM: yalnız bu sayfalar. Token'lar, `.dm-hv-*` hover yardımcıları,
 * [data-stack] (≤860px) ve Elementor ARMOR'ı PAYLAŞILAN dm.css'tedir; bu dosya
 * onun ÜZERİNE biner ve şunları yapar:
 *   1) `Yasal Metin.dc.html` <style> bloğundaki sayfa reset'inin karşılığı,
 *   2) tasarımın `[data-legalnav]` durumları + ≤940px kırılımı,
 *   3) ⭐ `the_content()`'ten gelen HAM WP HTML'inin gövde tipografisi,
 *   4) armor / taşma koruması.
 *
 * DOSYA SAHİPLİĞİ: `dm-sistem` handle'ı 404 ve arama sayfalarına da hizmet edecek.
 * Bu turda yalnız YASAL bölümü yazıldı; yasal'a özel her kural `.dm-sis--yasal`
 * ile daraltıldı ki sonradan eklenecek 404/arama katmanı çakışmadan altına
 * yazılabilsin. §1 (kabuk reset'i) üç sayfa için de ortaktır.
 * ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
 * 1) SAYFA TABANI — tasarımın <style> bloğu:
 *      body { background:#F6F5F1; color:#14212B }
 *      a { color:#14212B } a:hover { color:#B98A00 }
 *      h1..h3 / p / ul margin sıfırlama, ul list-style:none
 *
 *    line-height: tasarımın body'sinde line-height YOKTUR (tarayıcı `normal`'ı);
 *    hello-elementor reset'i `body{line-height:1.5}` diyor ve bu miras, satır
 *    yüksekliği açıkça verilmemiş her küçük metni (kicker, breadcrumb) tasarımdan
 *    uzun gösterir. Kabukta `normal`'a döndürülür; inline line-height taşıyan
 *    öğeler etkilenmez.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-sis { background: #F6F5F1; line-height: normal; }
.dm-sis img { display: block; max-width: 100%; }

.dm-app .dm-sis a { color: #14212B; text-decoration: none; }
.dm-app .dm-sis a:hover { color: #B98A00; }

/* Blok boşlukları: reset `p{margin-block-end:.9rem}` ve `h1..h6{margin-block:…}`
 * (0,0,1) dm.css'in `:where()` (0,0,0) kurallarını YENER → tasarımda olmayan
 * dikey boşluklar çıkar. (0,2,1) ile geri sıfırlanır; inline margin-top korunur.
 * Gövde tipografisi (§3) bunları BİLEREK yeniden açar — o kurallar bir sınıf
 * daha özgüldür (0,3,1), yani sıraya bağlı kalmadan kazanır. */
.dm-app .dm-sis :is(h1, h2, h3, h4, h5, h6) { margin: 0; line-height: normal; color: inherit; }
.dm-app .dm-sis :is(p, ul, ol, figure) { margin: 0; }
.dm-app .dm-sis :is(ul, ol) { padding: 0; list-style: none; }

/* ───────────────────────────────────────────────────────────────────────────
 * 2) YASAL METİN YERLEŞİMİ — tasarımın <style> bloğundaki kurallar.
 *
 *    `[data-legalnav] a` stilleri tasarımda inline DEĞİL, <style> içindedir
 *    (durumları olduğu için): hover ve aria-current. Sıra tasarımdakiyle aynı
 *    tutuldu → aktif bağlantının üstüne gelindiğinde altın kenar (#EFCE6B)
 *    korunur, hover'ın nötr kenarı (#E4E1DB) onu ezmez.
 *
 *    ÖZGÜLLÜK NOTU: motion.js çalışma anında bu bağlantılara `.mo-ghost` verir
 *    (şeffaf zemin + 1px kenar + 34-72px yükseklik tarifine uyuyorlar) ve
 *    `.mo-ghost:hover{border-color:#F5B400}` (0,1,0) enjekte eder. Aşağıdaki
 *    (0,4,1) kurallar onu yener — tasarımın kendi hover'ı bağlayıcıdır.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-app .dm-sis--yasal [data-legalnav] a {
  display: block;
  padding: 11px 14px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #4E5A64;
  border: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.dm-app .dm-sis--yasal [data-legalnav] a:hover { background: #FFFFFF; border-color: #E4E1DB; color: #14212B; }
.dm-app .dm-sis--yasal [data-legalnav] a[aria-current="page"] { background: #FFFFFF; border-color: #EFCE6B; color: #14212B; }

/* ───────────────────────────────────────────────────────────────────────────
 * 3) ⭐ GÖVDE TİPOGRAFİSİ — `the_content()`'ten gelen HAM WP HTML'i.
 *
 *    NEDEN BURADA: yasal metinlerin gövdesi şablona GÖMÜLMEZ; post_content'te
 *    gerçek <h2>/<p> olarak durur, çünkü nihai hâli hukuk onayından sonra
 *    müşterinin avukatı tarafından WP editöründen düzenlenecek. Bu yüzden
 *    tasarımın gövde görünümü (numaralı bölüm başlığı, altın onay işaretli
 *    madde, satır yüksekliği, boşluklar) markup'a değil, WP'nin bastığı ham
 *    etiketlere CSS ile verilir. Editörden yeni bölüm eklendiğinde numara
 *    kendiliğinden ilerler (CSS counter).
 *
 *    Ölçüler `Yasal Metin.dc.html` runtime şablonundan birebir alındı:
 *      bölümler arası 32px · h2 20px/700/-0.024em + 26px'lik altın numara
 *      h2 → ilk madde 12px · maddeler arası 11px
 *      madde metni 15.5px / line-height 1.76 / #3E4A54
 *      onay ikonu 15px, altın (#B98A00), metinden 12px uzakta, üstten 7px
 *
 *    dm.css armor'ı `:where(h1..h6,p,ul,ol){margin:0}` ve
 *    `:where(ul,ol){list-style:none}` uyguluyor; §1 bunu (0,2,1) ile pekiştiriyor.
 *    Yasal metin gövdesinde bu sıfırlama İSTENMEZ — aşağıdaki (0,3,1)+ kurallar
 *    paragraf boşluğunu ve madde işaretini açıkça geri verir.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-app .dm-sis--yasal .dm-sis-govde {
  margin-top: 34px;
  counter-reset: dm-sis-bolum;
  overflow-wrap: break-word;   /* editörden gelen uzun URL/e-posta kartı taşırmasın */
}

/* Bölüm başlığı + altın numara (tasarımdaki
 * `<span style="min-width:26px;color:#B98A00">1.</span>` karşılığı). */
.dm-app .dm-sis--yasal .dm-sis-govde h2 {
  margin: 32px 0 0;
  font-family: var(--dm-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: normal;
  color: #14212B;
}
.dm-app .dm-sis--yasal .dm-sis-govde h2::before {
  counter-increment: dm-sis-bolum;
  content: counter(dm-sis-bolum) ".";
  display: inline-block;
  min-width: 26px;
  color: #B98A00;
}

/* Alt başlık — tasarımın veri şemasında yok; editör h3 kullanırsa ölçeğe otursun. */
.dm-app .dm-sis--yasal .dm-sis-govde h3 {
  margin: 22px 0 0;
  font-family: var(--dm-head);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: normal;
  color: #14212B;
}

/* Madde paragrafı. Tasarımda gövdenin HER satırı altın onay işaretli bir madde
 * olarak çizilir; seed içeriğinde bu satırlar <p> olarak durduğu için işaret
 * paragrafa ::before ile verilir (liste semantiği iddia edilmez). */
.dm-app .dm-sis--yasal .dm-sis-govde > p {
  position: relative;
  margin: 11px 0 0;
  padding-left: 27px;          /* 15px ikon + 12px boşluk */
  font-size: 15.5px;
  line-height: 1.76;
  color: #3E4A54;
}
.dm-app .dm-sis--yasal .dm-sis-govde h2 + p,
.dm-app .dm-sis--yasal .dm-sis-govde h3 + p { margin-top: 12px; }

/* Onay işareti — tasarımdaki Lucide "check" (stroke #B98A00, kalınlık 2.2). */
.dm-app .dm-sis--yasal .dm-sis-govde > p::before,
.dm-app .dm-sis--yasal .dm-sis-govde ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23B98A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50% / 15px 15px;
}

/* İşaretli liste — editör <ul> kullanırsa maddeler tasarımdakiyle aynı görünür. */
.dm-app .dm-sis--yasal .dm-sis-govde ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.dm-app .dm-sis--yasal .dm-sis-govde ul > li {
  position: relative;
  margin-top: 11px;
  padding-left: 27px;
  font-size: 15.5px;
  line-height: 1.76;
  color: #3E4A54;
}
.dm-app .dm-sis--yasal .dm-sis-govde ul > li:first-child { margin-top: 0; }

/* Sıralı liste — tasarımda yok; numara altın kalır ki gövde diliyle uyumlu olsun. */
.dm-app .dm-sis--yasal .dm-sis-govde ol {
  margin: 12px 0 0;
  padding-left: 24px;
  list-style: decimal;
}
.dm-app .dm-sis--yasal .dm-sis-govde ol > li {
  margin-top: 11px;
  font-size: 15.5px;
  line-height: 1.76;
  color: #3E4A54;
}
.dm-app .dm-sis--yasal .dm-sis-govde ol > li:first-child { margin-top: 0; }
.dm-app .dm-sis--yasal .dm-sis-govde ol > li::marker { color: #B98A00; font-weight: 700; }

/* İlk blok üstten boşluk almaz — kabın kendi 34px'i yeterli. */
.dm-app .dm-sis--yasal .dm-sis-govde > :first-child { margin-top: 0; }

/* Gövde içi bağlantı — tasarımda örneği yok; okunur ve ayırt edilebilir olsun. */
.dm-app .dm-sis--yasal .dm-sis-govde a { color: #14212B; text-decoration: underline; text-underline-offset: 2px; }
.dm-app .dm-sis--yasal .dm-sis-govde a:hover { color: #B98A00; }
.dm-app .dm-sis--yasal .dm-sis-govde strong { font-weight: 700; color: #14212B; }

/* ───────────────────────────────────────────────────────────────────────────
 * 4) KIRILMA NOKTASI — tasarımdaki tek medya sorgusu (≤940px):
 *      [data-legalgrid] tek kolona iner, [data-legalside] akışa döner,
 *      [data-legalcard] iç boşluğu küçülür.
 *    `[data-stack]` (≤860px, dm.css) KULLANILMAZ — bu sayfanın kırılımı 940px.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .dm-sis--yasal [data-legalgrid] { grid-template-columns: 1fr !important; gap: 26px !important; }
  .dm-sis--yasal [data-legalside] { position: static !important; }
  .dm-sis--yasal [data-legalcard] { padding: 34px 26px 38px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5) ARMOR / TAŞMA KORUMASI.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Izgara öğesinin varsayılan `min-width:auto` değeri, içeriğinin min-content
 * genişliğine göre track'i aşar → dar ekranda sağa taşma. Klasik düzeltme.
 * (Sarmalayıcı `.dm-sis-kartkap` motion.js §2 tuzağı için var — STİLSİZ kalmalı;
 * kenarlık/radius verilirse kart yeniden "tıklanabilir kart"a döner.) */
.dm-sis--yasal [data-legalgrid] > * { min-width: 0; }