/* =============================================================================
 * cozum.css — çözüm sayfaları katmanı.
 *   [dm_cozumler] (/cozumler/)  ·  /cozum/<slug>/ (cozum CPT tekil)
 *
 * 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 kuralı,
 *   4) SSS akordeonunun (<details>) tarayıcı işaretçisinin gizlenmesi,
 *   5) 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Ü:
 *   Cozumler.dc.html   → tek medya sorgusu: `[data-stack]` @ max-width 860px
 *   Cozum Detay.dc.html→ tek medya sorgusu: `[data-stack]` @ max-width 860px
 * İkisi de dm.css'teki GLOBAL kuralla karşılanır; bu dosyada tekrarlanmaz.
 * Çok kolonlu ızgaraların tamamı `repeat(auto-fit, minmax(200|230|240|300px, 1fr))`
 * ile İÇKİN responsive'dir → sayfaya özel medya sorgusu tasarımda yoktur,
 * burada da uydurulmadı.
 * ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
 * 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.
 * ─────────────────────────────────────────────────────────────────────────── */

/* 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, adım no)
 * tasarımdan uzun gösterir. Kabukta `normal`'a döndürülür; inline line-height'ı
 * olan öğeler etkilenmez. */
.dm-cozum { background: #F6F5F1; line-height: normal; }
.dm-cozum img { display: block; max-width: 100%; }
.dm-cozum a { color: #14212B; text-decoration: none; }
.dm-cozum 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 bölümde 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-cozum :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-cozum :is(p, ul, ol, figure) { margin: 0; }
.dm-app .dm-cozum :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.
 *    Bu bölüm §1'den SONRA gelir; böylece `color` taşıyan taban sınıfı eşit
 *    özgüllükteki `.dm-cozum a:hover` kuralını kaynak sırasıyla yener (asıl
 *    hover kuralı §3'te daha özgül).
 * ─────────────────────────────────────────────────────────────────────────── */

/* Beyaz kartlar — hover'da border-color + box-shadow değişir.
 *   çözüm senaryosu kartı → .dm-hv-card      (0 14px 30px)
 *   sistem bileşeni kartı → .dm-hv-card-sm   (0 12px 28px)
 * İkisinin de taban kenarlığı tasarımda `1px solid #E4E1DB`. */
.dm-cozum .dm-c-card { border: 1px solid #E4E1DB; }

/* Dolu zeminli CTA'lar — hover'da yalnız background değişir. */
.dm-cozum .dm-c-cta-navy { background: #061827; } /* → .dm-hv-navy (#0B2436) */
.dm-cozum .dm-c-cta-gold { background: #F5B400; } /* → .dm-hv-cta2 (#FFC61A) */

/* Koyu hero üzerindeki çerçeveli buton → hover'da HEM border-color HEM color. */
.dm-cozum .dm-c-btn-light-ghost { border: 1px solid rgba(255,255,255,.32); color: #FFFFFF; }

/* ───────────────────────────────────────────────────────────────────────────
 * 3) SAYFAYA ÖZEL HOVER KURALI.
 *    dm.css'teki `.dm-hv-*` seti Ana Sayfa'nın style-hover kurallarından
 *    türetilmişti; bu iki sayfada ondan FARKLI tek kural var:
 *      · Çözüm Detay hero "Ürünleri İncele" → border-color:#F5B400; color:#F5B400
 *    (0,3,0): motion.js'in çalışma anında enjekte ettiği
 *    `.mo-ghost:hover{border-color:#F5B400}` (0,1,0) kuralını ve §1'deki
 *    `a:hover` (0,2,1) kuralını da yener — tasarımın style-hover'ı bağlayıcıdır.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-cozum .dm-c-hv-goldghost:hover { border-color: #F5B400; color: #F5B400; }

/* ───────────────────────────────────────────────────────────────────────────
 * 4) SSS AKORDEONU — saf <details>/<summary>.
 *
 *    NEDEN <details>: JS kapalıyken de açılıp kapanır, içerik hiçbir koşulda
 *    erişilemez kalmaz. Beşi de KAPALI başlar (hiçbirinde `open` yok) — açık
 *    başlayan öğe komşularıyla eşit olmayan kutu yüksekliği üretir; ayrıca
 *    kapsayıcı flex-column olduğu için `align-self` HİÇ KULLANILMAZ.
 *
 *    Tasarım summary'ye inline `list-style:none` veriyor; bu Firefox/Chrome'un
 *    yeni `::marker`'ını kapatır ama WebKit'in eski `::-webkit-details-marker`
 *    sözde öğesini KAPATMAZ → Safari'de üçgen ok görünür. Burada kapatılır.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-cozum [data-dm-faq] > summary::-webkit-details-marker { display: none; }
.dm-cozum [data-dm-faq] > summary::marker { content: ""; }

/* reset.css `summary` için de `white-space` mirası bırakabiliyor; uzun soru
 * tek satıra sıkışıp kutuyu aşmasın (mobil kırpılma tuzağı). */
.dm-cozum [data-dm-faq] > summary { white-space: normal; }

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

/* Izgara öğesinin varsayılan `min-width:auto` değeri, içeriğinin (uzun başlık,
 * geniş görsel) min-content genişliğine göre track'i aşar → mobilde sağa taşma.
 * Klasik grid-overflow düzeltmesi; `[data-dm-grid]` altyapı kutularının 1fr 1fr
 * ızgarasıdır (tasarımda sabit iki kolon). */
.dm-cozum [data-stack] > *,
.dm-cozum [data-dm-grid] > * { min-width: 0; }