/* =============================================================================
 * chrome.css — Demirci Makine header + footer + arama modalı + sabit iletişim.
 *
 * KAPSAM: yalnız chrome. Token'lar, hover yardımcıları, `data-stack`, `[hidden]`
 * ve Elementor ARMOR'ı dm.css'tedir; bu dosya onun ÜSTÜNE yüklenir
 * (wp_register_style bağımlılığı: dm-chrome → dm-app).
 *
 * KAYNAK: dc-dm/SiteHeader.dc.html ve dc-dm/SiteFooter.dc.html `<helmet><style>`
 * blokları — birebir taşındı, tek fark `.dm-app` kapsaması.
 *
 * NEDEN BAZI "INLINE" DEĞERLER BURADA:
 *   Tasarımda border / background / box-shadow gibi özellikler HEM inline HEM de
 *   `style-hover=` ile veriliyor. Inline bildirim CSS `:hover` kuralını yendiği
 *   için bu özelliklerin TEMEL değeri de buraya alındı (hesaplanan sonuç aynı).
 *   Ayrıca `.dm-app .dm-hdr .sınıf` (0,3,0) özgüllüğü hello-elementor reset'inin
 *   `button:hover{background-color:#CC3366}` (0,2,0) kuralını da yener.
 * ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
 * 0) Yığınlama bağlamı — arama modalı (z-index 90) header kabının İÇİNDE.
 *    Elementor header location'ı dm.css'te z-index:60 ile bir yığınlama bağlamı
 *    açıyor; bu durumda footer'daki sabit widget (z-index 60, DOM'da sonra)
 *    modalın ÜSTÜNE çizilirdi. Kabı 90'a çekince modal her şeyin üstünde kalır.
 * ─────────────────────────────────────────────────────────────────────────── */
.elementor-location-header { z-index: 90; }

/* Elementor'un header location KABI da bir <header> öğesidir ve DOM'da bizimkinden
 * öncedir: motion.js `document.querySelector('header')` ile ONU seçip `.mo-stuck`
 * ekler → akışta duran 81px'lik kabın altında gezici bir gölge çıkardı. Gölge
 * yalnız gerçek (fixed) header'da olmalı; kabınkini iptal et. */
.elementor-location-header.mo-stuck { box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 1) HEADER
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Yönetici çubuğu telafisi — header ile ilk bölüm arasındaki beyaz şerit.
 *
 * TESPİT (canlıda ölçüldü): WordPress giriş yapmış kullanıcıda `<html>`'e
 * `margin-top: 32px` ekler. Header `position: fixed; top: 0` olduğu için bu marjı
 * YOK SAYAR ve viewport'un tepesinde kalır (0–81); akıştaki 81px'lik ara parçası
 * ise marjla birlikte 32px aşağı iner (32–113). Sonuç: içerik 113'ten başlar,
 * header 81'de biter → tam 32px beyaz boşluk.
 *
 * KAPSAM: yalnız giriş yapmış kullanıcı. Ölçümle doğrulandı — marj kaldırıldığında
 * boşluk 32px'ten 0'a düşüyor, yani ziyaretçi bunu hiç görmüyor.
 *
 * !important ŞART: `top: 0` header.php'de inline duruyor, inline bildirim normal
 * önemdeki kuralı yener.
 *
 * KIRILMA NOKTALARI WordPress'in kendi çubuğundan gelir:
 *   >782px  → çubuk 32px, position: fixed
 *   ≤782px  → çubuk 46px, hâlâ fixed
 *   ≤600px  → çubuk 46px ama position: absolute; belgeyle birlikte yukarı kayar.
 *             Sabit bir offset verilirse kaydırdıktan sonra tepede 46px'lik boş
 *             şerit kalır; bu yüzden offset sıfırlanır (WP çekirdeğinin sabit
 *             başlıklar için önerdiği davranış). Çubuk kendi z-index'i çok yüksek
 *             olduğu için sayfa tepesindeyken header'ın üstünde görünür, kaydırınca
 *             kendiliğinden çözülür. */
body.admin-bar .dm-app .dm-hdr { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .dm-app .dm-hdr { top: 46px !important; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .dm-app .dm-hdr { top: 0 !important; }
}

/* Kaydırma durumu — motion.js `.mo-stuck` ekler (dm.js de kendi header'ına
 * doğrudan ekler; motion.js `#dc-root` yoksa erken çıkıyor). */
.dm-app .dm-hdr { transition: box-shadow .34s ease, background-color .34s ease; }
.dm-app .dm-hdr.mo-stuck { box-shadow: 0 10px 30px rgba(6,24,39,.28); }

/* Kaydırıldığında buzlu cam (gaussian blur).
 *
 * Sayfanın tepesindeyken header TASARIMDAKİ GİBİ tam opak (#061827) kalır;
 * yalnız `.mo-stuck` durumunda saydamlaşıp arkasını bulanıklaştırır.
 *
 * @supports ŞART: `backdrop-filter` desteklenmeyen bir tarayıcıda saydamlık
 * uygulanırsa header bulanıklaşmadan yarı saydam kalır ve altından kayan içerik
 * menü yazılarının üstüne biner — okunmaz olur. Bu yüzden saydamlık DA blur DA
 * yalnız destek varsa devreye girer; yoksa opak zemin korunur.
 *
 * !important ŞART: zemin, header.php'de inline `background: #061827` olarak
 * duruyor (tasarımdan birebir taşınan inline stil kuralı) ve inline bildirim
 * normal önemdeki stil sayfası kuralını yener.
 *
 * NOT: `backdrop-filter` yeni bir containing block yaratır — header'ın İÇİNDE
 * `position: fixed` bir çocuk olsaydı header'a hapsolurdu. Bugün yok: tek fixed
 * öğe header'ın kendisi, arama modalı chrome/search.php ile header DIŞINDA
 * basılıyor. Header'ın içine fixed bir katman eklenirse burası gözden geçirilmeli.
 * Mobil menü paneli (#dm-mobnav) kendi opak zeminini taşıdığı için açıkken
 * okunabilirliği bu kuraldan etkilenmez. */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .dm-app .dm-hdr.mo-stuck {
    background-color: rgba(6,24,39,.72) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* Menü bağlantıları + altın alt çizgi (hover'da soldan sağa açılır). */
.dm-app .dm-hdr [data-nav] a {
  position: relative;
  color: #DCE3E9;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.dm-app .dm-hdr [data-nav] a:hover { color: #FFFFFF; }
.dm-app .dm-hdr [data-nav] a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -29px;
  height: 2px; background: #F5B400;
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.dm-app .dm-hdr [data-nav] a:hover::after { transform: scaleX(1); }
.dm-app .dm-hdr [data-navmob] a::after { display: none; }

/* Arama butonu. */
.dm-app .dm-hdr .dm-hdr__srch {
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
}
.dm-app .dm-hdr .dm-hdr__srch:hover,
.dm-app .dm-hdr .dm-hdr__srch:focus-visible {
  border-color: rgba(245,180,0,.55);
  background: rgba(245,180,0,.08);
}
.dm-app .dm-hdr [data-searchbtn] svg { transition: transform .4s cubic-bezier(.33,1,.68,1); }
.dm-app .dm-hdr [data-searchbtn]:hover svg { transform: scale(1.12); }

/* Telefon pill'i. */
.dm-app .dm-hdr__tel {
  position: relative; overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
}
.dm-app .dm-hdr__tel:hover,
.dm-app .dm-hdr__tel:focus-visible {
  border-color: rgba(245,180,0,.55);
  background: rgba(245,180,0,.08);
}
.dm-app .dm-hdr__tel svg { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.dm-app .dm-hdr__tel:hover svg { transform: rotate(-12deg) scale(1.08); }

/* Altın CTA — header'da ışık bandı (`[data-cta]`), footer'da yalın. */
.dm-app .dm-cta { background: #F5B400; }
.dm-app .dm-cta:hover,
.dm-app .dm-cta:focus-visible { background: #FFC61A; }
.dm-app [data-cta] { position: relative; overflow: hidden; }
.dm-app [data-cta]::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.dm-app [data-cta]:hover::before { transform: translateX(120%); }
.dm-app [data-cta] > span { position: relative; }

/* Kırılma noktaları — tasarımdaki gibi: telefon ≤1180'de, masaüstü menü ≤1080'de
 * gider. (dm.css armor'ı burger'ı ≤860'ta açıyor; buradaki (0,2,0) kural onu
 * 1080'e taşır — dar ekranda header'ın yatay taşmasını önleyen bilinen düzeltme.) */
.dm-app .dm-burger { display: none !important; }
@media (max-width: 1180px) {
  .dm-app .dm-hdr__tel { display: none !important; }
}
@media (max-width: 1080px) {
  .dm-app .dm-hdr [data-deskonly] { display: none !important; }
  .dm-app .dm-burger { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* TASARIMDAN TEK SAPMA (gerekçeli): telefonda header YATAY TAŞIYOR.
 * Ölçüm: 375px'te kabuk dolgusu 64 + logo 156 (46px yükseklikte, 1179:348 en-boy)
 * + arama 44 + CTA ~100 + burger 44 + 3×28 boşluk = 502 > 375. Handoff'ta bu
 * kırılma için kural yok. Düzeltme, öğeleri KALDIRMADAN sıkıştırır; yalnız
 * ≤400px'te altın CTA gizlenir — çünkü aynı eylem ≤720px'te zaten görünen
 * `[data-mobar]` alt şeridinde tam genişlikte "Teklif Al" hücresi olarak var. */
/* (Değerler inline stili ezmek zorunda olduğu için !important şart.) */
@media (max-width: 620px) {
  .dm-app .dm-hdr__bar { padding: 0 18px !important; gap: 12px !important; }
  .dm-app .dm-logo img { height: 38px !important; max-height: 38px; }
  .dm-app .dm-hdr .dm-cta { padding: 11px 16px !important; font-size: 14px !important; }
  .dm-app .dm-mobnav { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (max-width: 400px) {
  .dm-app .dm-hdr .dm-cta { display: none !important; }
}

/* ── Mobil menü ───────────────────────────────────────────────────────────
 * TUZAK: `[hidden]` inline display'e kaybeder → panelde inline display YOK,
 * `display: flex` burada. Kısa telefonda (375×640) alt CTA/telefon satırına
 * erişilebilsin diye panel kendi içinde kaydırılır. */
.dm-app .dm-mobnav {
  display: flex;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dm-app .dm-mobnav a { color: #DCE3E9; text-decoration: none; }
.dm-app .dm-mobnav a:hover { color: #FFFFFF; }
/* Mobil arama satırının ve modal kapat butonunun zemini INLINE verilir; bu,
 * reset.css'in `button:hover{background-color:#CC3366}` kuralını da yener —
 * tasarımda bu iki butona hover TANIMLI DEĞİL, uydurulmadı. */

/* ═══════════════════════════════════════════════════════════════════════════
 * 2) ARAMA EKRANI (tam ekran modal)
 *    İki aşamalı geçiş: `.open` (display) → `.shown` (opacity/transform).
 * ═══════════════════════════════════════════════════════════════════════════ */
.dm-app [data-searchwrap] { position: fixed; inset: 0; z-index: 90; display: none; }
.dm-app [data-searchwrap].open { display: block; }

.dm-app [data-searchbd] {
  position: absolute; inset: 0;
  background: rgba(6,24,39,.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .34s ease;
}
.dm-app [data-searchwrap].shown [data-searchbd] { opacity: 1; }

.dm-app [data-searchpanel] {
  position: relative;
  max-width: 760px; margin: 8vh auto 0; padding: 0 20px;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .34s ease, transform .44s cubic-bezier(.33,1,.68,1);
}
.dm-app [data-searchwrap].shown [data-searchpanel] { opacity: 1; transform: none; }

.dm-app [data-searchcard] {
  background: #FFFFFF; border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.16);
}

.dm-app [data-searchinput] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17.5px; font-weight: 500;
  color: #14212B; letter-spacing: -0.015em;
}
.dm-app [data-searchinput]::placeholder { color: #9AA3AB; font-weight: 400; }
/* Elementor/tema form stilinin kutu görünümünü ez (gri kenarlık + dolgu). */
.dm-app [data-searchcard] input[type="search"] {
  padding: 0; box-shadow: none; border-radius: 0; height: auto; line-height: 1.3;
}
.dm-app [data-searchcard] input[type="search"]::-webkit-search-decoration,
.dm-app [data-searchcard] input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.dm-app [data-searchresults] { max-height: 58vh; overflow-y: auto; overflow-x: hidden; }
.dm-app [data-searchresults]::-webkit-scrollbar { width: 8px; }
.dm-app [data-searchresults]::-webkit-scrollbar-thumb { background: #DCD7CE; border-radius: 4px; }

.dm-app [data-sres] {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 20px;
  text-decoration: none; color: #14212B;
  border-left: 2px solid transparent;
  transition: background-color .22s ease, border-color .22s ease;
}
.dm-app [data-sres]:hover,
.dm-app [data-sres].sel { background: #F6F5F1; border-left-color: #F5B400; color: #14212B; }

.dm-app [data-schip] {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid #E4E1DB; border-radius: 20px;
  font-size: 12.5px; font-weight: 600;
  color: #4E5A64; text-decoration: none; white-space: nowrap;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.dm-app [data-schip]:hover { border-color: #F5B400; background: #FFFBF0; color: #14212B; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 3) FOOTER
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Dekoratif doku: ince tarama + üst köşede yumuşak altın ışık. */
.dm-app .dm-ftr [data-fpat] {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(760px 340px at 88% -12%, rgba(245,180,0,.12), transparent 70%),
    radial-gradient(620px 300px at 4% 108%, rgba(255,255,255,.05), transparent 72%);
}
.dm-app .dm-ftr [data-fgrid] {
  position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1100px 460px at 50% -30%, rgba(255,255,255,.055), transparent 70%);
  -webkit-mask-image: radial-gradient(1000px 420px at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(1000px 420px at 50% 0%, #000 30%, transparent 78%);
}

/* Sütun başlıkları — altında 22px altın çizgi. */
.dm-app .dm-ftr [data-fh] { position: relative; padding-bottom: 12px; }
.dm-app .dm-ftr [data-fh]::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 22px; height: 2px; background: #F5B400;
}

/* Sütun bağlantıları — hover'da altın + 3px sağa kayma. */
.dm-app .dm-ftr [data-nav] a {
  display: inline-block;
  color: #DCE3E9; text-decoration: none;
  transition: color .2s ease, transform .24s cubic-bezier(.2,.7,.3,1);
}
.dm-app .dm-ftr [data-nav] a:hover { color: #F5B400; transform: translateX(3px); }
.dm-app [data-footlink] { color: #C7D1D9; text-decoration: none; transition: color .2s ease; }
.dm-app [data-footlink]:hover { color: #F5B400; }

/* Sütun ızgarası kırılmaları (tasarımdaki değerler). */
@media (max-width: 1060px) {
  .dm-app .dm-ftr [data-fcols] { grid-template-columns: 1fr 1fr 1fr !important; gap: 30px 28px !important; }
}
@media (max-width: 720px) {
  .dm-app .dm-ftr [data-fcols] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 460px) {
  .dm-app .dm-ftr [data-fcols] { grid-template-columns: 1fr !important; }
}

/* Alt CTA kutusu. */
.dm-app .dm-ftr [data-fcta] {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, rgba(245,180,0,.12), rgba(245,180,0,.03) 62%, transparent);
}
.dm-app .dm-ftr-wa { border: 1px solid rgba(255,255,255,.22); background: transparent; }
.dm-app .dm-ftr-wa:hover,
.dm-app .dm-ftr-wa:focus-visible { border-color: #16803F; background: rgba(37,211,102,.1); }

/* Telif şeridi — masaüstünde sağ altta duran pill'lerin altına girmesin. */
.dm-app .dm-ftr [data-fbar] { padding: 22px 0 26px; }
@media (min-width: 721px) {
  .dm-app .dm-ftr [data-fbar] { padding-right: 210px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4) SABİT İLETİŞİM WIDGET'I  +  MOBİL ALT ŞERİT
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Kutu dışındaki boşluk tıklamayı engellemesin. */
.dm-app [data-fab] { pointer-events: none; }
.dm-app [data-fab] a {
  pointer-events: auto;
  position: relative;
  height: 56px; width: 196px;
  justify-content: center !important;
  padding: 0 16px !important;
  box-shadow: 0 6px 18px rgba(6,24,39,.18);
  transition: transform .5s cubic-bezier(.33,1,.68,1),
              box-shadow .5s cubic-bezier(.33,1,.68,1),
              filter .34s ease;
}
.dm-app [data-fab] a:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(6,24,39,.36);
  filter: brightness(1.05);
}
.dm-app .dm-fab-wa  { background: #16803F; }
.dm-app .dm-fab-tel { background: #0B2436; }

/* Metin her zaman görünür ve yatayda ortalı; kicker tasarımda gizli. */
.dm-app [data-fab] a > span { white-space: nowrap; margin-left: 11px !important; text-align: center; }
.dm-app [data-fab] a [data-fkick] { display: none; }
.dm-app [data-fab] a [data-fmain] { font-size: 14.5px !important; }
.dm-app [data-fab] a > * { position: relative; z-index: 1; }

/* Cam parlaması: yüzeyde sürekli, hover'da hızlanan ışık bandı. */
.dm-app [data-fab] a::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  animation: moShine 5.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.dm-app [data-fab] a:nth-child(2)::before { animation-delay: 2.7s; }
.dm-app [data-fab] a:hover::before { animation-duration: 1.6s; }
/* Üstte hafif cam kenarı. */
.dm-app [data-fab] a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 58%);
}
@keyframes moShine { 0% { left: -45%; } 42%, 100% { left: 125%; } }

.dm-app [data-fab] a svg { transition: transform .5s cubic-bezier(.33,1,.68,1); }
.dm-app [data-fab] a:hover svg { transform: scale(1.08); }
.dm-app [data-fab] a[data-tel]:hover svg { transform: rotate(-10deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .dm-app [data-fab] a::before { animation: none; opacity: 0; }
  .dm-app [data-fab] a > span { animation: none; }
}

/* Masaüstünde sabit pill'ler, ≤720px'te alt şerit.
 * NOT: alt boşluk BODY'ye değil FOOTER'a verilir (body sabit yükseklikte olabilir). */
.dm-app [data-mobar] { display: none; }
@media (max-width: 720px) {
  .dm-app .dm-ftr { padding-bottom: 62px !important; }
  .dm-app [data-fab] { display: none !important; }
  .dm-app [data-mobar] { display: grid !important; }
}
