/* =============================================================================
 * rehber.css — rehber katmanı.
 *   [dm_rehber] (/rehber/)  ·  /rehber/<slug>/ (tekil `post` şablonu)
 *
 * KAPSAM: yalnız bu iki şablon. 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) iki `.dc.html` dosyasının <style> bloğundaki sayfa reset'inin karşılığı,
 *   2) hover'ın DEĞİŞTİRDİĞİ özelliklerin TABAN değerleri,
 *   3) dm.css'te karşılığı olmayan sayfaya özel hover kuralları,
 *   4) ⭐ `the_content()` GÖVDE TİPOGRAFİSİ (bu dosyanın rehbere özgü asıl işi),
 *   5) sayfaya özel kırılma noktaları,
 *   6) taşma koruması.
 *
 * (2) NEDEN GEREKLİ — tasarımdaki `style-hover="…"` niteliği Claude Design
 * önizleme motoruna aittir, export'ta çalışmaz; yerine `.dm-hv-*` sınıfı konur.
 * Ama INLINE stil her CSS kuralını yener: hover'ın dokunduğu özellik
 * (background / border-color / color) inline kalırsa `:hover` HİÇ görünmez. Bu
 * yüzden YALNIZ o özellik inline'dan alınıp buraya taşındı, DEĞERİ birebir
 * korunarak; geri kalan tüm inline stiller tasarımdaki gibi markup'ta durur.
 *
 * KIRILMA NOKTALARI — iki dosyadan ÖLÇÜLDÜ ve BİRBİRİNDEN FARKLI:
 *   Rehber.dc.html       ≤1040 → [data-trio] 1fr 1fr
 *                        ≤720  → [data-trio] 1fr ; [data-lead] 1fr
 *   Rehber Yazi.dc.html  ≤860  → [data-trio] 1fr           (2 kolonlu ara adım YOK)
 *                        ≤700  → [data-artcard] padding 32px 24px 36px
 *                                [data-artwrap] padding 0 18px
 * Aynı dosya iki şablona birden hizmet ettiği için `[data-trio]` kuralları
 * `.dm-rehber--liste` / `.dm-rehber--yazi` ile AYRI AYRI kapsanır; aksi hâlde
 * liste sayfasının 1040/720 eşikleri yazı sayfasına sızardı (bkz. §5).
 * ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
 * 1) SAYFA TABANI — iki dosyanın da <style> bloğu birebir aynıdır:
 *      body { background:#F6F5F1; color:#14212B }  img { display:block }
 *      a { color:#14212B } a:hover { color:#B98A00 }  h/p/ul margin sıfırlama
 *    dm.css'teki `:where()` taban kuralları özgüllüğü sıfır olduğu için
 *    buradaki (0,2,0) kurallar onları düzgünce ezer.
 *
 *    ⚠️ İSTİSNA: `.dm-r-body` (the_content gövdesi) bu sıfırlamanın DIŞINDA
 *    tutulur — makale metninde paragraf boşluğu ve madde işareti GEREKİR.
 *    Sıfırlama burada genel kalır, §4 daha özgül (0,3,1) kurallarla geri verir.
 * ─────────────────────────────────────────────────────────────────────────── */

/* line-height: tasarımın body'sinde line-height YOKTUR (tarayıcı `normal`'ı).
 * hello-elementor reset'i `body{line-height:1.5}` diyor; bu miras, satır
 * yüksekliği açıkça verilmemiş her küçük metni (kicker, breadcrumb, okuma
 * süresi) tasarımdan uzun gösterir. Kabukta `normal`'a döndürülür; inline
 * line-height'ı olan öğeler etkilenmez. */
.dm-rehber { background: #F6F5F1; line-height: normal; }
.dm-rehber img { display: block; max-width: 100%; }
.dm-rehber a { color: #14212B; text-decoration: none; }
.dm-rehber a:hover { color: #B98A00; }

/* Başlıklar: tasarım reset'i başlıklara line-height VERMEZ; dm.css armor'ı
 * 1.15'e sabitliyor → `normal`'a dönülür (belirli değer isteyen başlıklarda
 * zaten inline line-height var, inline kazanır). Renk kapsayıcıdan MİRAS
 * alınmalı (koyu hero'da beyaz); dm.css bunu `:where()` ile sıfır özgüllükte
 * verdiği için Elementor Kit'in `h1..h6` kuralı (0,1,1) araya girebiliyor —
 * (0,2,1) ile kapatılır. */
.dm-app .dm-rehber :is(h1, h2, h3, h4, h5, h6) { margin: 0; line-height: normal; color: inherit; }

/* 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,0) ile geri sıfırlanır; inline margin-top korunur. */
.dm-app .dm-rehber :is(p, ul, ol, figure) { margin: 0; }
.dm-app .dm-rehber :is(ul, ol) { padding: 0; list-style: none; }

/* ───────────────────────────────────────────────────────────────────────────
 * 2) HOVER'IN DEĞİŞTİRDİĞİ TABAN DEĞERLER (inline'dan taşındı — bkz. başlık).
 *    Değerler tasarımdaki inline değerlerin birebir aynısıdır.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Kart kenarlığı — liste kartları, öne çıkan kart, ilgili ürün/yazı kartları.
 * Hepsinin hover'ı `border-color: #C9C4BB` → dm.css `.dm-hv-card` (0,3,0). */
.dm-rehber .dm-r-tile { border: 1px solid #E4E1DB; }

/* Altın CTA — hover'da yalnız background değişir → dm.css `.dm-hv-cta2` (#FFC61A). */
.dm-rehber .dm-r-cta-gold { background: #F5B400; }

/* Koyu panel üzerindeki telefon butonu — hover'da HEM border-color HEM color
 * değişir; ikisi de inline'dan alındı (bkz. §3). */
.dm-rehber .dm-r-btn-ghost { border: 1px solid rgba(255,255,255,.24); color: #FFFFFF; }

/* ───────────────────────────────────────────────────────────────────────────
 * 3) SAYFAYA ÖZEL HOVER KURALLARI — dm.css'teki `.dm-hv-*` setinde karşılığı
 *    OLMAYAN iki kural. Özgüllük (0,3,0): hem §2'deki tabanı hem `.dm-rehber
 *    a:hover` (0,2,1) kuralını yener.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Öne çıkan (geniş) kart — gölgesi ızgara kartlarınkinden BÜYÜKTÜR
 * (`0 16px 34px .10` ≠ `.dm-hv-card`ın `0 14px 30px .09`u), bu yüzden ayrı. */
.dm-rehber .dm-r-lead-card:hover { border-color: #C9C4BB; box-shadow: 0 16px 34px rgba(20,33,43,.10); }

/* Koyu panel telefon butonu. */
.dm-rehber .dm-r-btn-ghost:hover { border-color: #F5B400; color: #F5B400; }

/* ───────────────────────────────────────────────────────────────────────────
 * 4) ⭐ GÖVDE TİPOGRAFİSİ — `the_content()`.
 *
 *    Yazı gövdesi WordPress yazı alanından gelir (WORDPRESS-PLAN md.4), yani
 *    markup'ı biz YAZMAYIZ: WP ham `<h2>` / `<p>` / `<ul>` basar. Tasarımda bu
 *    bloklar tek tek inline stilliydi; burada aynı DEĞERLER sınıf üzerinden
 *    verilir. Ölçümler `Rehber Yazi.dc.html`ten birebir:
 *
 *      lead  → margin-top 20px · 17px / 1.7  · #5D6A74
 *      h2    → 24px / 800 · letter-spacing -0.028em · üst boşluk 34px
 *              (görselden sonraki İLK h2 40px — tasarımdaki `s0` bloğu)
 *      p     → margin-top 14px · 16px / 1.78 · #3E4A54
 *
 *    §1'deki `margin:0` / `list-style:none` sıfırlaması (0,2,1) burada (0,3,1)
 *    kurallarla geri alınır — makale metninde boşluk ve madde işareti şarttır.
 * ─────────────────────────────────────────────────────────────────────────── */

.dm-app .dm-rehber .dm-r-body { color: #3E4A54; }

.dm-app .dm-rehber .dm-r-body h2 {
  margin-top: 34px;
  font-family: var(--dm-head);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: normal;
  color: #14212B;
}
/* Tasarımda görselden sonraki ilk bölüm (`s0`) 40px boşlukla başlar. Lead
 * paragrafı şablonda gövdeden ayrılıp yukarı alındığı için gövdenin ilk
 * çocuğu bu h2'dir. */
.dm-app .dm-rehber .dm-r-body > h2:first-child { margin-top: 40px; }

/* Tasarımda h3 yalnız SSS kutularında var (16px/700). Gövdede alt başlık
 * kullanılırsa ölçek tutarlı kalsın diye ara kademe tanımlanır. */
.dm-app .dm-rehber .dm-r-body h3 {
  margin-top: 26px;
  font-family: var(--dm-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: #14212B;
}

.dm-app .dm-rehber .dm-r-body p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.78;
  color: #3E4A54;
}

/* Yazının giriş paragrafı — gövdede `class="lead"` ile işaretlidir. Şablon onu
 * gövdeden ayırıp tasarımdaki yerine (başlık/meta ile görselin arasına) taşır;
 * müşteri gövdeye ikinci bir lead eklerse yine aynı görünür. */
.dm-app .dm-rehber .dm-r-lead,
.dm-app .dm-rehber .dm-r-body p.lead {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.7;
  color: #5D6A74;
}

/* Madde listeleri — tasarımın gövdesinde yok, ama makale metninde gerekir ve
 * §1 `list-style:none` onları görünmez kılardı. */
.dm-app .dm-rehber .dm-r-body :is(ul, ol) {
  margin-top: 14px;
  padding-left: 22px;
  list-style: disc;
}
.dm-app .dm-rehber .dm-r-body ol { list-style: decimal; }
.dm-app .dm-rehber .dm-r-body li {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.78;
  color: #3E4A54;
}
.dm-app .dm-rehber .dm-r-body li::marker { color: #B98A00; }

/* Gövde içi bağlantı — tasarımda örneği yok; okunabilirlik için altı çizili
 * ve marka altını (motion.js ayrıca `.mo-link` kayan alt çizgisini ekler). */
.dm-app .dm-rehber .dm-r-body a {
  color: #B98A00;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dm-app .dm-rehber .dm-r-body a:hover { color: #14212B; }

.dm-app .dm-rehber .dm-r-body :is(img, figure) { margin-top: 24px; border-radius: 4px; }
.dm-app .dm-rehber .dm-r-body figcaption { margin-top: 8px; font-size: 13px; color: #8A939B; }
.dm-app .dm-rehber .dm-r-body blockquote {
  margin-top: 24px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #F5B400;
  font-size: 17px;
  line-height: 1.7;
  color: #5D6A74;
}
.dm-app .dm-rehber .dm-r-body strong { font-weight: 700; color: #14212B; }
.dm-app .dm-rehber .dm-r-body hr { margin-top: 34px; border: 0; border-top: 1px solid #E4E1DB; }

/* "Kullanım senaryosuna göre aralıklar" bar tablosu.
 * Tasarımdaki `[data-f=listWrap]` bloğunun karşılığı; gövdedeki `liste`
 * yer tutucusunun yerine şablon tarafından basılır (bkz. yazi.php).
 * `<ul>` olduğu için §4'ün disc madde işaretinden ayrıca muaf tutulur. */
.dm-app .dm-rehber .dm-r-body .dm-r-bars {
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dm-app .dm-rehber .dm-r-body .dm-r-bars li {
  margin-top: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid #E4E1DB;
  border-radius: 6px;
  padding: 18px 20px;
}
.dm-app .dm-rehber .dm-r-body .dm-r-bark {
  flex: 0 0 auto;
  min-width: 74px;
  font-family: var(--dm-head);
  font-size: 15px;
  font-weight: 700;
  /* Tasarımda anahtar span'inde line-height YOK (değer span'inde 1.65 var);
   * `align-items: flex-start` ile üst kenarlar hizalanır — birebir korundu. */
  color: #B98A00;
}
.dm-app .dm-rehber .dm-r-body .dm-r-barv {
  font-size: 15px;
  line-height: 1.65;
  color: #5D6A74;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5) KIRILMA NOKTALARI — iki tasarım dosyasından ölçüldü (bkz. dosya başlığı).
 *    `!important` gerekiyor: `grid-template-columns` tasarımda INLINE, ve
 *    tasarımın kendi medya sorguları da `!important` kullanıyor.
 * ─────────────────────────────────────────────────────────────────────────── */

/* — Rehber listesi — */
@media (max-width: 1040px) {
  .dm-app .dm-rehber--liste [data-trio] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .dm-app .dm-rehber--liste [data-trio] { grid-template-columns: 1fr !important; }
  .dm-app .dm-rehber--liste [data-lead] { grid-template-columns: 1fr !important; }
}

/* — Rehber yazısı — (2 kolonlu ara adım YOK, doğrudan 860'ta tek kolon) */
@media (max-width: 860px) {
  .dm-app .dm-rehber--yazi [data-trio] { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .dm-app .dm-rehber--yazi [data-artcard] { padding: 32px 24px 36px !important; }
  .dm-app .dm-rehber--yazi [data-artwrap] { padding: 0 18px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 6) TAŞMA KORUMASI — ızgara/flex çocuğunun `min-width:auto` varsayılanı,
 *    içindeki uzun kelime (ör. "Basınçlı" + tire yok) track'i aşabilir.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-app .dm-rehber [data-trio] > *,
.dm-app .dm-rehber [data-lead] > * { min-width: 0; }
.dm-app .dm-rehber .dm-r-body { overflow-wrap: break-word; }