/* =============================================================================
 * dm.css — Demirci Makine tasarım sistemi (çekirdek).
 *
 * KAPSAM: token'lar, kabuk/tipografi temeli, tasarımdaki `style-hover=` ve
 * `data-stack` niteliklerinin CSS karşılıkları, ve hello-elementor + Elementor
 * çakışma ARMOR'ı. Sayfaya özel kurallar KENDİ dosyalarındadır
 * (chrome.css, home.css) — bu dosya paylaşılan tek kaynaktır, sayfa
 * şablonları buraya yazmaz.
 *
 * NEDEN BU YAPIDA:
 *   Handoff'ta tüm stiller INLINE literal olarak veriliyor ve "birebir
 *   uygulanmalı" deniyor. Bu yüzden markup inline stilleriyle taşınır; CSS
 *   yalnız inline'ın ifade EDEMEDİĞİ şeyleri üstlenir:
 *     1) :hover / :focus durumları  → tasarımda `style-hover="..."` niteliği
 *     2) medya sorguları            → tasarımda `data-stack` niteliği
 *     3) tema/Elementor çakışmaları → armor
 *
 * Kaynak: DESIGN-TOKENS.md + Ana Sayfa.dc.html (inline değerler).
 * ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
 * 1) TOKEN'LAR — DESIGN-TOKENS.md ile birebir.
 *    Kural: bölüm zeminleri YALNIZ --dm-surface-50, --dm-surface-0,
 *    --dm-navy-950 ve CTA için --dm-gold-500 arasında dönüşür.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Lacivert kademeleri */
  --dm-navy-950: #061827;  /* header, footer, koyu bölüm zemini, hero overlay */
  --dm-navy-900: #0B2436;  /* güven şeridi, telefon pill'i */
  --dm-navy-800: #14212B;  /* gövde metni, başlıklar */
  --dm-navy-700: #1B2E3C;  /* harita gradyan üst durağı */
  --dm-navy-600: #10202C;  /* altın buton üzerindeki metin */

  /* Marka altını */
  --dm-gold-500: #F5B400;  /* marka vurgusu, CTA zemini, aktif durum, odak halkası */
  --dm-gold-700: #B98A00;  /* kicker, link hover, açık zeminde altın metin */

  /* Durum renkleri */
  --dm-green-600: #16803F; /* WhatsApp */
  --dm-red-600:   #C0392B; /* form hata kenarı */
  --dm-red-100:   #FDF2F2; /* form hata zemini */
  --dm-red-800:   #8E2A20; /* form hata metni */

  /* Yüzeyler ve kenarlar */
  --dm-surface-0:   #FFFFFF;
  --dm-surface-50:  #F6F5F1;
  --dm-surface-100: #F1EFEC;  /* ürün görseli kuyusu */
  --dm-border-100:  #EDEAE4;
  --dm-border-200:  #E4E1DB;
  --dm-border-250:  #E1DDD6;
  --dm-border-300:  #DCD7CE;

  /* Metin kademeleri */
  --dm-muted:       #65717B;
  --dm-muted-2:     #6B747C;
  --dm-muted-3:     #7A858E;
  --dm-muted-4:     #8A939B;
  --dm-on-navy:     #BCC8D2;
  --dm-on-navy-2:   #8B9AA6;
  --dm-placeholder: #9AA3AB;

  /* Tipografi */
  --dm-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dm-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Yerleşim */
  --dm-shell: 1240px;
  --dm-shell-pad: 32px;
  --dm-header-h: 80px;
  --dm-header-flow: 81px;  /* header fixed olduğu için akışta bırakılan boşluk */

  /* Hareket — ana easing ve süreler */
  --dm-ease: cubic-bezier(.33, 1, .68, 1);
  --dm-t-color: .34s;
  --dm-t-shadow: .5s;
  --dm-t-card: .58s;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 2) UYGULAMA KABUĞU — temel tipografi.
 *    Not: bölüm/kart stilleri markup'ta inline; burada yalnız devralınan temel.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-app {
  font-family: var(--dm-sans);
  color: var(--dm-navy-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dm-app h1, .dm-app h2, .dm-app h3, .dm-app h4 { font-family: var(--dm-head); }
.dm-app p { text-wrap: pretty; }
.dm-app img { max-width: 100%; }

/* Odak halkası — DESIGN-TOKENS "Hareket" bölümü. */
.dm-app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--dm-gold-500);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 3) HOVER YARDIMCILARI
 *    Tasarımdaki `style-hover="..."` niteliği Claude Design önizleme motoruna
 *    aittir; export'ta işlevsizdir. Ana sayfadaki 48 kullanımın ARDINDAKİ
 *    13 benzersiz kural buraya sınıf olarak alındı; markup'ta ilgili öğeye
 *    karşılık gelen sınıf verilir. Geçişleri motion.js zaten kuruyor.
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-app .dm-hv-card:hover      { border-color: #C9C4BB; box-shadow: 0 14px 30px rgba(20,33,43,.09); }
.dm-app .dm-hv-card-sm:hover   { border-color: #C9C4BB; box-shadow: 0 12px 28px rgba(20,33,43,.08); }
.dm-app .dm-hv-card-lg:hover   { border-color: #C9C4BB; box-shadow: 0 14px 34px rgba(20,33,43,.09); }
.dm-app .dm-hv-edge:hover      { border-color: #C9C4BB; }
.dm-app .dm-hv-gold:hover      { border-color: var(--dm-gold-500); }
.dm-app .dm-hv-goldline:hover  { border-color: rgba(245,180,0,.45); }
.dm-app .dm-hv-goldsoft:hover  { border-color: #F0C64A; background: #FFFDF7; }
.dm-app .dm-hv-goldfill:hover  { border-color: var(--dm-gold-500); background: #FDF7E6; }
.dm-app .dm-hv-link:hover      { color: var(--dm-gold-700); }
.dm-app .dm-hv-navy:hover      { background: var(--dm-navy-900); }

/* Zemin değiştiren hover'lar — reset.css `button:hover{background-color:#CC3366}`
 * kuralını yenmek için (0,3,0) özgüllük gerekiyor; :focus da eklendi. */
.dm-app .dm-hv-wa:hover,   .dm-app .dm-hv-wa:focus   { background: #11692F; }
.dm-app .dm-hv-cta:hover,  .dm-app .dm-hv-cta:focus  { background: #FFC728; }
.dm-app .dm-hv-cta2:hover, .dm-app .dm-hv-cta2:focus { background: #FFC61A; }

/* ───────────────────────────────────────────────────────────────────────────
 * 4) `data-stack` — iki kolonlu grid'ler tek kolona iner.
 *    Kırılma noktası tasarımdan ölçüldü: 16 `.dc.html` dosyasının 10'unda
 *    `@media (max-width: 860px) { [data-stack] { grid-template-columns: 1fr } }`
 *    olarak geçiyor. (DESIGN-TOKENS 860/900/940'ı birlikte listeliyor; bağlayıcı
 *    olan markup'taki değerdir.)
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .dm-app [data-stack] {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5) `data-rail` carousel — kaydırma davranışı.
 *    Ok butonlarını motion.js sürüyor; scrollbar gizleme ve ≤900px'te okların
 *    gizlenmesi CSS tarafında (PAGES.md "Uygulama Alanları").
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-app [data-rail] {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dm-app [data-rail]::-webkit-scrollbar { display: none; }
.dm-app [data-rail] > * { scroll-snap-align: start; flex: 0 0 auto; }

@media (max-width: 900px) {
  .dm-app [data-railprev], .dm-app [data-railnext] { display: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 6) Hareket kapalıysa — DESIGN-TOKENS "prefers-reduced-motion desteklenir".
 *    motion.js kendi tarafında da kapatıyor; bu CSS tarafı garanti.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dm-app *, .dm-app *::before, .dm-app *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
 * ARMOR — hello-elementor reset.css + Elementor Kit çakışmalarını yener.
 *
 * Kök neden: tema reset'i ve Elementor frontend CSS'i eklenti CSS'inden SONRA
 * yüklenir ve genel ELEMENT seçicileriyle (button, a, h1-h6, img, table td)
 * tek-sınıflı bileşen kurallarını ezer. Aşağıdaki seçiciler Elementor'a aittir
 * ve EVRENSELDİR — değiştirilmez (#CC3366, .elementor img, .elementor-field-*).
 * ========================================================================== */

/* 1) Reset pembesini yok et — TÜM <button>'lar pembe metin + 1px pembe kenarlık
 *    alır (`button{color:#CC3366;border:1px solid #CC3366}`, özgüllük 0,0,1).
 *    `.dm-app button` (0,1,1) bunu yener. Kenarlık isteyenler aşağıda geri alınır. */
.dm-app button { color: inherit; border: 0; background: none; font-family: inherit; }

/* Kenarlık/zemin İSTEYEN butonlar (0,2,0) ile geri — carousel okları ve
 * ikon butonları tasarımda beyaz zeminli + ince kenarlıklıdır. */
.dm-app .dm-railbtn { border: 1px solid rgba(255,255,255,.22); color: #FFFFFF; background: transparent; }
.dm-app .dm-icobtn  { color: inherit; background: transparent; }

/* 2) Hover/focus'ta PEMBE ARKA PLAN — `button:hover/:focus{background-color:#CC3366}`
 *    (0,2,0) base bileşen kuralını yükleme sırasıyla yener. Gerçek <button>'lara
 *    (0,3,0) ile doğru zemini geri ver. Altın CTA'lar <a> olduğu için güvenli. */
.dm-app .dm-icobtn:hover,  .dm-app .dm-icobtn:focus,
.dm-app .dm-burger:hover,  .dm-app .dm-burger:focus,
.dm-app .dm-srch-clear:hover, .dm-app .dm-srch-clear:focus { background-color: transparent; }

/* 2b) reset.css AYRICA `button:hover,button:focus{color:#fff}` veriyor. Özgüllüğü
 *     (0,1,1) — bizim `.dm-app button{color:inherit}` kuralımızla EŞİT, ve computed-style
 *     ölçümünde tie-break'i reset kazanıyor (bizim dosyamız sonra yüklenmesine rağmen).
 *     Bugün görünür etkisi yok: mevcut butonların hepsi inline `color` taşıyor ve
 *     ikonları literal `stroke` kullanıyor. Ama inline rengi olmayan ya da
 *     `currentColor` ikonlu YENİ bir <button> eklendiğinde hover'da beyaza dönerdi.
 *     (0,2,0) ile kalıcı olarak kapat. */
.dm-app button:hover, .dm-app button:focus { color: inherit; }
.dm-app .dm-railbtn:hover, .dm-app .dm-railbtn:focus { background-color: rgba(255,255,255,.10); }

/* 3) Logo dev oluyor — `.elementor img{height:auto}` (0,1,1) logonun height'ını
 *    eziyor. `.dm-app .dm-logo img` (0,2,1) ile geri al. */
.dm-app .dm-logo img       { height: 44px; width: auto; display: block; max-height: 46px; }
.dm-app .dm-ftr-logo img   { height: 42px; width: auto; display: block; }
.dm-app .dm-drawer-top img { height: 38px; width: auto; display: block; }

/* 4) Başlık renkleri — tema `h1..h6{color:...}` (0,0,1) koyu bölümlerde beyaz
 *    başlığı eziyor. Bölüm zemini koyu olduğunda inline renk kazansın diye
 *    :where() ile ÖZGÜLLÜK SIFIR taban veriyoruz. */
.dm-app :where(h1, h2, h3, h4, h5, h6) { color: inherit; margin: 0; line-height: 1.15; }
.dm-app :where(p, ul, ol, figure) { margin: 0; }
.dm-app :where(ul, ol) { list-style: none; padding: 0; }
.dm-app :where(a) { color: inherit; text-decoration: none; }

/* 5) Burger — reset `button{display:block}` yüzünden masaüstünde görünür kalır. */
.dm-burger { display: none !important; }
@media (max-width: 860px) {
  .dm-app [data-dm="desknav"] { display: none !important; }
  .dm-burger { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* 6) [hidden] inline display:flex'e KAYBEDER → toggle edilen öğede inline
 *    display kullanma; gizlemeyi burada yap. */
.dm-app [hidden] { display: none !important; }

/* 7) Header FIXED — tasarım kararı (README: "sticky yerine fixed, çünkü bileşen
 *    sarmalayıcısı sticky'yi kırıyordu"). Elementor'un header location kabı
 *    yükseklik/boşluk eklemesin; akış boşluğunu şablondaki 81px'lik div verir. */
.elementor-location-header { position: relative; z-index: 60; }
.elementor-location-header > .elementor { margin: 0; padding: 0; }

/* 7b) "İÇERİĞE ATLA" BAĞLANTISI — reset pembesinin son kalesi.
 *
 * Tema, içerikten ÖNCE bir `a.skip-link.screen-reader-text` basar. Bu bağlantı
 * `.dm-app` kabının DIŞINDA olduğu için yukarıdaki `.dm-app :where(a)` armor'ı
 * ona ulaşmaz ve reset.css'in `a{color:#c36}` kuralı geçerli kalır. Normalde
 * ekran dışındadır, ama klavyeyle Tab'landığında GÖRÜNÜR olur — yani sitede
 * pembenin gerçekten göze çarptığı tek yer burasıdır.
 *
 * Özgüllük: `a.skip-link` (0,1,1) > `a` (0,0,1); ayrıca bizim CSS'imiz sonra
 * yükleniyor. Odaklandığında markanın lacivert/altın diliyle görünsün. */
.skip-link.screen-reader-text { color: var(--dm-gold-500); }
.skip-link.screen-reader-text:focus {
  background: var(--dm-navy-950);
  color: var(--dm-gold-500);
  border: 1px solid var(--dm-gold-500);
  border-radius: 4px;
  padding: 12px 20px;
  font-family: var(--dm-sans);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

/* 8) Tema kabuk genişliğini sıfırla — bölümler kendi 1240px kabuğunu kurar. */
.dm-app, .elementor-location-header .dm-app, .elementor-location-footer .dm-app { max-width: none; }

/* 9) TEMA GÖVDE KABI — Elementor kaldırıldıktan sonra kritik.
 *
 * theme.css şunu veriyor:
 *   body:not([class*=elementor-page-]) .site-main { max-width:1140px; padding-inline:10px; margin:auto }
 * Elementor'la kurulan sayfalar `elementor-page-*` body sınıfı aldığı için bu
 * kuraldan MUAF tutuluyordu. Elementor kaldırılınca muafiyet de kalkar ve tüm
 * tam genişlik bölümlerimiz 1140px'e sıkışır (hero'lar, koyu bantlar, CTA'lar).
 *
 * Seçicinin özgüllüğü (0,2,1) ve theme.css bizden ÖNCE yükleniyor; sınıf-tabanlı
 * bir kuralla yenmek zor ve kırılgan olurdu, bu yüzden `!important` — armor'ın
 * tam olarak var oluş sebebi bu. Sayfa içeriği zaten kendi 1240px kabuğunu kuruyor. */
body .site-main,
body .page-content {
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  width: auto !important;
}