/* ============================================================
   DOĞU VİNÇ GAZİANTEP — BİLEŞEN KATMANI
   Rigrent şablonunun görsel dili birebir korunur (brief §1 tasarım kuralı).
   Sadece compositor dostu özellikler animasyonlanır (transform / opacity).
   ============================================================ */

/* ---------- 1. TEMEL ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Çapa hedefi ekranın en tepesine yapışmasın — /iletisim/#teklif gibi
   linklerde başlığın üstünde nefes kalsın. `:target` yerine `[id]`
   kullanıldı: bazı tarayıcılar scroll-margin'i `:target` eşleşmeden önce
   hesaplıyor. Form alanlarına da uygulanması iyi yan etki. */
[id] { scroll-margin-top: 40px; }

body {
  margin: 0;
  background: var(--dv-bg);
  color: var(--dv-muted);
  font-family: var(--dv-font-body);
  font-size: var(--dv-body);
  line-height: var(--dv-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--dv-text);
  font-family: var(--dv-font-display);
  text-transform: capitalize;
  /* Güvenlik ağı: 360 px ekranda "Kahramanmaraş'ta" 38 px puntoyla satıra
     sığmıyor ve sayfayı yatay kaydırılır hâle getiriyordu. Kelime ancak
     tek başına sığmadığında bölünür; sayfanın yana kayması daha kötü. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--dv-h1); font-weight: var(--dv-w-bold); line-height: var(--dv-lh-tight); letter-spacing: var(--dv-ls-h1); }
h2 { font-size: var(--dv-h2); font-weight: var(--dv-w-bold); line-height: var(--dv-lh-tight); }
h3 { font-size: var(--dv-h3); font-weight: var(--dv-w-semi); line-height: var(--dv-lh-head); }
h4 { font-size: var(--dv-h4); font-weight: var(--dv-w-semi); line-height: var(--dv-lh-head); }
h5 { font-size: var(--dv-h5); font-weight: var(--dv-w-medium); line-height: var(--dv-lh-head); }
h6 { font-size: var(--dv-h6); font-weight: var(--dv-w-regular); line-height: var(--dv-lh-head); }

p { margin: 0 0 var(--dv-space-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color var(--dv-dur-fast) var(--dv-ease); }
a:hover { color: var(--dv-accent); }

/* Metin içi bağlantı.
   Paragrafın içindeki bağlantı yalnızca renkle ayrılıyordu; sarı ile
   çevresindeki gri arasındaki kontrast 1.5:1, WCAG 1.4.1'in istediği 3:1'in
   altında. Renk körü bir okuyucuda ya da düşük kontrastlı bir ekranda
   bağlantı düz metinden ayırt edilemiyordu.
   Altı çizgi, rengi bilgi taşıyan tek işaret olmaktan çıkarıyor. Çizgi
   normalde yarı saydam, üzerine gelince tam renge geliyor: sakin duruyor
   ama var olduğu belli. */
.dv-link {
  color: var(--dv-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--dv-accent) 50%, transparent);
  transition: text-decoration-color var(--dv-dur-fast) var(--dv-ease),
              color var(--dv-dur-fast) var(--dv-ease);
}
.dv-link:hover,
.dv-link:focus-visible { text-decoration-color: var(--dv-accent); }

img { max-width: 100%; height: auto; display: block; border-radius: var(--dv-radius-img); }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Türkçe capitalize tuzağı: CSS capitalize "i"yi "I" yapar, "İ" değil.
   Başlıklar zaten doğru yazıldığı için text-transform'u nötrleyen sınıf. */
.dv-tr { text-transform: none; }

.dv-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------- 2. YERLEŞİM ---------- */

/* Kit'in kabı (Elementor "boxed" container) 1290 px'i İÇERİK genişliği olarak
   kullanıyor — yan boşluğu yok, logo kabın sol kenarına dayanıyor. Ölçtüm:
   şablonun header'ında logo kap solundan 0, buton kap sağından 0 px'te.
   Bende `max-width: 1290` + 40 px padding vardı, yani içerik 1210 px'ti ve
   her şey 40 px içeriden başlıyordu — header'ın şablonla oturmamasının sebebi
   buydu. Doğrusu: içerik 1290, boşluk max-width'e ekleniyor. Dar ekranda
   padding yine devrede kaldığı için metin kenara yapışmıyor. */
.dv-container {
  width: 100%;
  max-width: calc(var(--dv-container) + 2 * var(--dv-gutter));
  margin-inline: auto;
  padding-inline: var(--dv-gutter);
}

.dv-section {
  position: relative;
  padding-block: var(--dv-section-y);
}
.dv-section--dark { background: var(--dv-dark); }
.dv-section--tight { padding-block: clamp(48px, 5vw, 72px); }

/* `.dv-section--glow` kaldırıldı. Kit'in bölüm zeminlerini tek tek okudum
   (about-us, services, equipment, faq, contact-us): hero DIŞINDA hiçbir
   bölümde gradyan yok, hepsi düz renk — çoğu #060608, arada bir #0D0D11.
   Sayfa ortasındaki amber ışıklar benim eklemenmdi ve `--glow` kullanan
   sayfalarla kullanmayanlar birbirinden farklı görünüyordu. */
.dv-section > .dv-container { position: relative; z-index: var(--dv-z-base); }

.dv-grid { display: grid; gap: var(--dv-space-6); }
.dv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dv-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* İki hizmet kalemi bilerek geniş: üst sayfa (Vinç Kiralama) listenin giriş
   noktası, fabrika taşıma ise rakipte karşılığı olmayan kalem. Tekdüze on
   kart yerine sayfanın kendi hiyerarşisi oluyor. Yan fayda: 10 kart + 2
   geniş = 12 hücre, 3'lü grid tam dolduğu için son satırda yalnız kart
   kalmıyor. */
.dv-service--wide { grid-column: span 2; }


/* ---------- 3. BÖLÜM BAŞLIĞI ---------- */

/* Şablonun imza öğesi: pill etiket → noktalı büyük başlık → alt metin */
.dv-eyebrow {
  display: inline-block;
  padding: 7px 20px;
  border: 1px solid var(--dv-border-accent);
  border-radius: var(--dv-radius-pill);
  background: var(--dv-glow);
  color: var(--dv-accent);
  font-family: var(--dv-font-display);
  font-size: var(--dv-label);
  font-weight: var(--dv-w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.dv-section-head { margin-bottom: var(--dv-space-12); }
.dv-section-head--center { text-align: center; max-width: 760px; margin-inline: auto; }
.dv-section-head .dv-eyebrow { margin-bottom: var(--dv-space-5); }
.dv-section-head p { margin-top: var(--dv-space-4); color: var(--dv-muted); }

/* Başlık içinde amber vurgulanan kelime */
.dv-hl { color: var(--dv-accent); }

/* Başlık + sağda sayaç bloğu olan iki sütunlu düzen */
.dv-section-head--split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--dv-space-10);
}


/* ---------- 4. BUTON ---------- */

.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  padding: var(--dv-btn-py) var(--dv-btn-px);
  border: 1px solid transparent;
  border-radius: var(--dv-radius-btn);
  font-family: var(--dv-font-display);
  font-size: 16px;
  font-weight: var(--dv-w-semi);
  line-height: var(--dv-lh-head);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dv-dur-fast) var(--dv-ease),
              border-color var(--dv-dur-fast) var(--dv-ease),
              color var(--dv-dur-fast) var(--dv-ease),
              transform var(--dv-dur-fast) var(--dv-ease);
}
.dv-btn:active { transform: translateY(1px); }

.dv-btn--primary {
  background: var(--dv-accent);
  color: var(--dv-dark);
}
.dv-btn--primary:hover { background: var(--dv-accent-hover); color: var(--dv-dark); }

.dv-btn--ghost {
  background: transparent;
  border-color: var(--dv-border);
  color: var(--dv-text);
}
.dv-btn--ghost:hover { border-color: var(--dv-accent); color: var(--dv-accent); }

.dv-btn--wa { background: #25D366; color: #062B12; }
.dv-btn--wa:hover { background: #34E27A; color: #062B12; }

.dv-btn__arrow { transition: transform var(--dv-dur-fast) var(--dv-ease); }
.dv-btn:hover .dv-btn__arrow { transform: translateX(3px); }


/* ---------- 5. LOGO (brief §6.1 wordmark) ---------- */

.dv-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--dv-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  text-transform: none; /* DOĞU/VİNÇ zaten büyük harf — capitalize'ı boz */
}
.dv-logo:hover { color: inherit; }
.dv-logo__a { color: var(--dv-text); }
.dv-logo__b { color: var(--dv-accent); }


/* ---------- 6. HEADER ---------- */

/* Kit'te header'ın kendi zemini ve alt çizgisi YOK: header.json'da ne
   `background_background` ne `border_border` tanımlı. Dış kap
   `margin-bottom: -75px` ile bir sonraki bölümün üstüne biniyor, yani
   hero'nun gradyanı header'ın içinden geçiyor. Ekran görüntüsünde de
   header satırı ile hemen altı aynı kahverengi tonda (ölçüldü). */
.dv-header {
  position: relative;
  z-index: var(--dv-z-header);
  margin-bottom: calc(var(--dv-header-h) * -1);
}
.dv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-5);
  min-height: var(--dv-header-h);
}

/* Menü iki uç arasında ortalanır (kit: sg_menu_alignment "center").
   Kalem aralığı kitte 20 px sağ + 20 px sol = 40 px. */
.dv-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.dv-nav a {
  font-family: var(--dv-font-display);
  font-size: 16px;
  font-weight: var(--dv-w-medium);
  line-height: var(--dv-lh-head);
  color: var(--dv-muted);            /* kit: normal = Text  #A0A0A5 */
  white-space: nowrap;               /* "Yaptığımız İşler" iki satıra kırılmasın */
  transition: color var(--dv-dur-fast) var(--dv-ease);
}
/* kit: hover ve active = Accent #FFFFFF (amber değil) */
.dv-nav a:hover, .dv-nav a[aria-current="page"] { color: var(--dv-text); }

/* "İletişim" header'da iki kez görünüyordu: menüde ve sağdaki düğmede.
   Masaüstünde menüdeki gizlendi, düğme kaldı. ≤1024'te düğme zaten gizli
   (kit hide_tablet/hide_mobile) olduğu için menü kalemi orada geri geliyor —
   yani mobilde İletişim'e menüden ulaşılıyor. */
@media (min-width: 1025px) {
  .dv-nav a[data-nav="iletisim"] { display: none; }
}

.dv-header__cta { display: flex; align-items: center; gap: var(--dv-space-4); }

/* Header düğmesi genel butondan ayrılıyor: yarıçap 7 px, 1 px kenar,
   hover'da beyaz zemin + %90 ölçek (kit jkit_button ayarları). */
.dv-header__cta .dv-btn--primary {
  padding: var(--dv-btn-py) var(--dv-btn-px);
  border: 1px solid var(--dv-accent);
  border-radius: var(--dv-radius-cta);
  font-size: 16px;
  font-weight: var(--dv-w-semi);
  line-height: var(--dv-lh-head);
}
.dv-header__cta .dv-btn--primary:hover {
  background: var(--dv-text);
  border-color: var(--dv-text);
  color: var(--dv-dark);
  transform: scale(0.9);
}

.dv-burger {
  display: none;
  padding: 6px;
  background: transparent;
  border: 0;                         /* kit: hamburger kenarlıksız, beyaz */
  color: var(--dv-text);
  cursor: pointer;
}


/* ---------- 7. HERO ---------- */

/* Kit home.json ilk bölümü: zemin DÜZ Secondary (#060608), gradyan yok,
   padding 175/100 (tablet 145/70). Üstteki 175 px saydam header'ın 75 px'lik
   satırını da kapsıyor.
   Buradaki iki radyal ışık kaldırıldı: kit'in ana sayfa hero'sunu pikselden
   ölçtüm, baştan sona (6,6,8). Işıklar yüzünden saydam header ana sayfada
   iç sayfalardan ve şablondan farklı görünüyordu. */
.dv-hero {
  position: relative;
  padding-block: 175px 100px;
  background: var(--dv-dark);
  overflow: hidden;
}
.dv-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.dv-hero__copy .dv-eyebrow { margin-bottom: var(--dv-space-6); }
.dv-hero h1 { margin-bottom: var(--dv-space-6); }
.dv-hero__lead {
  max-width: 56ch;
  font-size: 17px;
  margin-bottom: var(--dv-space-8);
}
.dv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--dv-space-4); }

.dv-hero__media { position: relative; }
.dv-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dv-radius-img);
}

/* Görsel üzerine yüzen rozet — şablonun imza öğesi.
   Şablonda "1200+ Projects Done" yazıyordu; uydurma rakam yerine
   gerçek dönüşüm öğesi kondu: telefon numarası. */
.dv-float-badge {
  position: absolute;
  top: var(--dv-space-6);
  left: calc(-1 * var(--dv-space-6));
  display: flex;
  align-items: center;
  gap: var(--dv-space-3);
  padding: 14px 20px;
  background: var(--dv-card-solid);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.dv-float-badge--br {
  top: auto; left: auto;
  right: calc(-1 * var(--dv-space-5));
  bottom: var(--dv-space-8);
}
.dv-float-badge__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: var(--dv-accent);
  color: var(--dv-dark);
  border-radius: 10px;
}
.dv-float-badge__label {
  display: block;
  font-size: 12px;
  color: var(--dv-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dv-float-badge__value {
  display: block;
  font-family: var(--dv-font-display);
  font-size: 19px;
  font-weight: var(--dv-w-bold);
  color: var(--dv-text);
  line-height: 1.25;
}


/* ---------- 8. KART TEMELİ ---------- */

.dv-card {
  padding: var(--dv-space-8);
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  transition: border-color var(--dv-dur-normal) var(--dv-ease),
              transform var(--dv-dur-normal) var(--dv-ease);
}
.dv-card:hover { border-color: var(--dv-border-accent); transform: translateY(-4px); }

.dv-card__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--dv-space-6);
  background: var(--dv-glow);
  border: 1px solid var(--dv-border-accent);
  border-radius: 12px;
  color: var(--dv-accent);
}
.dv-card h3, .dv-card h4, .dv-card h5 { margin-bottom: var(--dv-space-3); }
.dv-card p { font-size: 15px; }

/* ---- Başlık seviyesi vs görsel boyut ----
   Erişilebilirlik için seviye atlanmaz: bir h2 bölümünün içindeki kart
   başlığı h3'tür. Kit'in görsel ölçeği ise h4/h5 boyutundadır.
   Bu yüzden boyut, etikete değil kaba göre tanımlanır. */
.dv-card h3 {
  font-size: var(--dv-h4);
  font-weight: var(--dv-w-semi);
  line-height: var(--dv-lh-head);
}


/* ---------- 9. HİZMET KARTI ---------- */

.dv-service {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.dv-service__link {
  margin-top: auto;
  padding-top: var(--dv-space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  font-family: var(--dv-font-display);
  font-size: 15px;
  font-weight: var(--dv-w-semi);
  color: var(--dv-accent);
}
.dv-service__link svg { transition: transform var(--dv-dur-fast) var(--dv-ease); }
.dv-service:hover .dv-service__link svg { transform: translateX(4px); }


/* ---------- 10. SAYAÇ ---------- */

.dv-stats { display: flex; gap: clamp(24px, 4vw, 56px); }
.dv-stat__num {
  display: block;
  font-family: var(--dv-font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: var(--dv-w-bold);
  color: var(--dv-accent);
  line-height: 1;
}
.dv-stat__label {
  display: block;
  margin-top: var(--dv-space-2);
  font-size: var(--dv-small);
  color: var(--dv-muted);
}


/* ---------- 11. NEDEN BİZ (numaralı liste) ---------- */

.dv-why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dv-why__media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }

.dv-why__list { display: grid; gap: var(--dv-space-6); margin-top: var(--dv-space-8); }
.dv-why__item { display: grid; grid-template-columns: auto 1fr; gap: var(--dv-space-5); }
.dv-why__num {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--dv-accent);
  color: var(--dv-dark);
  border-radius: var(--dv-radius-pill);
  font-family: var(--dv-font-display);
  font-weight: var(--dv-w-bold);
  font-size: 16px;
}
.dv-why__item h3 { margin-bottom: var(--dv-space-2); font-size: var(--dv-h5); font-weight: var(--dv-w-medium); line-height: var(--dv-lh-head); }
.dv-why__item p { font-size: 15px; }


/* ---------- 12. ARAÇ KARTI (fiyat alanı kaldırıldı — brief §7.1) ---------- */

.dv-equip {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--dv-card-solid);
}
.dv-equip__media { position: relative; overflow: hidden; }
.dv-equip__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--dv-dur-slow) var(--dv-ease);
}
.dv-equip:hover .dv-equip__media img { transform: scale(1.05); }

.dv-equip__body { padding: var(--dv-space-6); display: flex; flex-direction: column; flex: 1; }
.dv-equip__cat {
  font-family: var(--dv-font-display);
  font-size: 13px;
  font-weight: var(--dv-w-medium);
  color: var(--dv-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--dv-space-2);
}
.dv-equip__body h3 { font-size: 21px; margin-bottom: var(--dv-space-4); }

/* Fotoğrafı olmayan araç.
   Filodaki sepetli platformların fotoğrafı yok ve gelmeyecek; burada eskiden
   "Araç fotoğrafı" yazan gri bir kutu duruyordu. Kalıcı boş kutu, sayfayı
   yarım kalmış gösteriyordu.
   Kart artık fotoğraflı komşusunun eksik hâli değil, kendi biçimi olan bir
   kart: üstte ince vurgu çizgisi, daha ferah gövde, ortalanmış dikey akış.
   Aynı ızgarada yan yana durduklarında ikisi de kasıtlı görünüyor. */
.dv-equip--nofoto { border-top: 3px solid var(--dv-accent); }
.dv-equip--nofoto .dv-equip__body { justify-content: flex-start; }
.dv-equip--nofoto .dv-equip__body h3 { font-size: 24px; }

/* Fotoğrafın yerindeki sayı bloğu.
   Yüksekliği fotoğraf kutusuyla aynı oranda (16/11) tutuluyor; aynı ızgarada
   yan yana duran iki kart aynı ritmi koruyor. Rakam ekranla birlikte büyüyor,
   kart daraldığında taşmıyor. */
.dv-equip__sayi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  aspect-ratio: 16 / 11;
  padding: var(--dv-space-6);
  border-bottom: 1px solid var(--dv-border);
  background:
    radial-gradient(120% 100% at 0% 100%,
                    color-mix(in oklab, var(--dv-accent) 16%, transparent) 0%,
                    transparent 62%);
}
.dv-equip__sayi b {
  font-family: var(--dv-font-display);
  font-size: clamp(48px, 6vw, 76px);
  font-weight: var(--dv-w-semi);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--dv-text);
}
.dv-equip__sayi span {
  margin-top: var(--dv-space-2);
  font-size: var(--dv-small);
  color: var(--dv-muted);
  letter-spacing: 0.02em;
}

/* Fiyat yerine gelen üçlü: kapasite / çalışma yüksekliği / araç tipi */
.dv-equip__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-space-2) var(--dv-space-5);
  font-size: var(--dv-small);
  color: var(--dv-muted);
}
.dv-equip__specs b { color: var(--dv-text); font-weight: var(--dv-w-semi); }

.dv-equip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-4);
  margin-top: var(--dv-space-6);
  padding-top: var(--dv-space-5);
  border-top: 1px solid var(--dv-border);
}
.dv-equip__tag {
  font-family: var(--dv-font-display);
  font-size: 15px;
  font-weight: var(--dv-w-semi);
  color: var(--dv-text);
}
.dv-equip__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dv-font-display);
  font-size: 15px;
  font-weight: var(--dv-w-semi);
  color: var(--dv-accent);
}
.dv-equip__cta svg { transition: transform var(--dv-dur-fast) var(--dv-ease); }
.dv-equip__cta:hover svg { transform: translateX(4px); }


/* ---------- 13. BÖLGELER (şablonda yok — brief §8 ek bölüm) ---------- */

.dv-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dv-space-5); }
.dv-region {
  padding: var(--dv-space-6);
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  transition: border-color var(--dv-dur-normal) var(--dv-ease);
}
.dv-region:hover { border-color: var(--dv-border-accent); }
.dv-region__title {
  display: flex;
  align-items: center;
  gap: var(--dv-space-2);
  margin-bottom: var(--dv-space-4);
  font-family: var(--dv-font-display);
  font-size: 15px;
  font-weight: var(--dv-w-semi);
  color: var(--dv-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dv-region ul { display: flex; flex-wrap: wrap; gap: var(--dv-space-2); }
.dv-region li {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-pill);
  font-size: var(--dv-small);
  color: var(--dv-text);
}
/* Bağlantı etiketin tamamını kaplıyor: negatif kenar boşluğu + aynı iç boşluk.
   Artık her etiket bir yere gidiyor (kendi sayfası olan bölge → sayfaya,
   olmayan → aynı sayfadaki bölge notuna), o yüzden hepsinde hover var. */
.dv-region li a {
  display: block;
  margin: -5px -12px;
  padding: 5px 12px;
  border-radius: inherit;
  transition: background-color var(--dv-dur-fast) var(--dv-ease),
              color var(--dv-dur-fast) var(--dv-ease);
}
.dv-region li:hover { border-color: var(--dv-border-accent); }
.dv-region li a:hover { background: var(--dv-glow); color: var(--dv-accent); }
.dv-regions__note {
  margin-top: var(--dv-space-8);
  text-align: center;
  font-size: 15px;
}

/* ---------- 13b. BÖLGE NOTLARI (sayfası olmayan bölgeler) ----------
   Ayrı sayfa açılmadı: altı ilçe için "ilçe adı değiştirilmiş" kopya sayfa
   üretmek doorway olurdu (brief §10). Bilgi burada, etiketler buraya iniyor. */

.dv-note {
  padding: var(--dv-space-6);
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  transition: border-color var(--dv-dur-normal) var(--dv-ease);
}
.dv-note:target { border-color: var(--dv-accent); }
.dv-note h3 { margin-bottom: 6px; font-size: var(--dv-h5); font-weight: var(--dv-w-medium); }
.dv-note__meta {
  display: flex;
  align-items: center;
  gap: var(--dv-space-2);
  margin-bottom: var(--dv-space-4);
  font-family: var(--dv-font-display);
  font-size: var(--dv-label);
  font-weight: var(--dv-w-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dv-accent);
}
.dv-note__meta svg { flex: none; }
.dv-note p { margin: 0; font-size: 15px; }


/* ---------- 14. İŞ KAYDI (Testimonials yerine — brief §7 eşleme) ----------

   ⚠️ ŞU AN KULLANILMIYOR. "Yaptığımız İşler" bölümü `engine.ISLER = False`
   ile kapalı, saha fotoğrafları gelmediği için. Kurallar ölü kodu silmeyi
   söylüyor ama burada silmek bayrağı işlevsiz bırakırdı: bayrak açıldığında
   bölümün stilsiz gelmemesi gerekiyor. Bölüm kalıcı olarak iptal edilirse
   bu blok da, `.dv-ph--job` da gider. */

.dv-job { padding: 0; overflow: hidden; background: var(--dv-card-solid); display: flex; flex-direction: column; }
.dv-job__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.dv-job__body { padding: var(--dv-space-6); flex: 1; display: flex; flex-direction: column; }
.dv-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-space-2);
  margin-bottom: var(--dv-space-4);
}
.dv-job__meta span {
  padding: 4px 11px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-pill);
  font-size: 12px;
  color: var(--dv-muted);
}
.dv-job__body h3 { font-size: 20px; margin-bottom: var(--dv-space-3); }
.dv-job__body p { font-size: 15px; }


/* ---------- 15. CTA BANDI ---------- */

.dv-cta {
  position: relative;
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--dv-dark);
  overflow: hidden;
}
/* CTA bandı da düz: kit'te about-us'un son bölümü ("Ready To Power Up…")
   `classic #060608` — gradyan yok. Buradaki iki radyal ışık kaldırıldı. */
.dv-cta__inner { position: relative; text-align: center; max-width: 780px; margin-inline: auto; }
.dv-cta h2 { margin-bottom: var(--dv-space-4); }
.dv-cta p { margin-bottom: var(--dv-space-8); font-size: 17px; }
.dv-cta__actions { display: flex; flex-wrap: wrap; gap: var(--dv-space-4); justify-content: center; }


/* ---------- 16. SSS AKORDİYON ----------
   Kritik: cevap metni HTML kaynağında, display:none ile gizlenir.
   AJAX/lazy yükleme yok (brief §16.4 — AEO omurgası). */

.dv-faq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.dv-faq__list { display: grid; gap: var(--dv-space-4); }

.dv-acc {
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  overflow: hidden;
  transition: border-color var(--dv-dur-normal) var(--dv-ease);
}
.dv-acc[open] { border-color: var(--dv-border-accent); }

.dv-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-4);
  padding: var(--dv-space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--dv-font-display);
  font-size: 17px;
  font-weight: var(--dv-w-medium);
  color: var(--dv-text);
  line-height: 1.35;
}
.dv-acc__q::-webkit-details-marker { display: none; }
.dv-acc__q:hover { color: var(--dv-accent); }

.dv-acc__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--dv-border-accent);
  border-radius: var(--dv-radius-pill);
  color: var(--dv-accent);
  transition: transform var(--dv-dur-normal) var(--dv-ease),
              background-color var(--dv-dur-normal) var(--dv-ease);
}
.dv-acc[open] .dv-acc__icon {
  transform: rotate(45deg);
  background: var(--dv-accent);
  color: var(--dv-dark);
}

.dv-acc__a { padding: 0 var(--dv-space-6) var(--dv-space-6); font-size: 15px; }
.dv-acc__a p { max-width: 68ch; }


/* ---------- 17. BLOG KARTI ---------- */

.dv-post { padding: 0; overflow: hidden; background: var(--dv-card-solid); display: flex; flex-direction: column; }
.dv-post__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0;
  transition: transform var(--dv-dur-slow) var(--dv-ease);
}
.dv-post:hover .dv-post__media img { transform: scale(1.05); }
.dv-post__media { overflow: hidden; }
.dv-post__body { padding: var(--dv-space-6); flex: 1; display: flex; flex-direction: column; }
.dv-post__date {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--dv-space-3);
  font-size: 13px; color: var(--dv-muted);
}
.dv-post__date::before {
  content: ""; width: 6px; height: 6px;
  background: var(--dv-accent); border-radius: 50%;
}
.dv-post__body h3 { font-size: 20px; margin-bottom: var(--dv-space-5); }


/* ---------- 18. FOOTER ---------- */

/* İş tipi rozetleri — ana sayfa 4b bandı.
   Kart değil rozet: bunlar altı ayrı hizmet değil, aynı hizmetin altı giriş
   kapısı. Kart görünümü verilseydi üstteki hizmet ızgarasıyla eş ağırlıkta
   okunur ve sayfada iki rakip liste görünürdü. */
.dv-jobtags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dv-space-4);
}
.dv-jobtag {
  display: flex;
  align-items: center;
  gap: var(--dv-space-4);
  padding: var(--dv-space-5) var(--dv-space-6);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  background: var(--dv-dark-alt);
  color: var(--dv-muted);
  font-weight: var(--dv-w-semi);
  transition: border-color var(--dv-dur-normal) var(--dv-ease),
              color var(--dv-dur-normal) var(--dv-ease),
              transform var(--dv-dur-normal) var(--dv-ease);
}
.dv-jobtag svg { color: var(--dv-accent); flex: none; }
.dv-jobtag:hover, .dv-jobtag:focus-visible {
  border-color: var(--dv-accent);
  color: var(--dv-text);
  transform: translateY(-2px);
}
@media (max-width: 900px) { .dv-jobtags { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dv-jobtags { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dv-jobtag { transition: none; } .dv-jobtag:hover { transform: none; } }

.dv-footer { background: var(--dv-dark-alt); border-top: 1px solid var(--dv-border); }
.dv-footer__main {
  display: grid;
  /* Beş sütun: marka · hizmetler · iş tipleri · kurumsal · iletişim.
     İş tipleri bölümü eklendiğinde dörtten beşe çıktı; boşluk da daraltıldı,
     yoksa 1440'ta bağlantı metinleri sütun içinde kırılıyordu. */
  grid-template-columns: 1.25fr 1fr 1fr 0.95fr 1.2fr;
  gap: clamp(28px, 3vw, 44px);
  padding-block: clamp(56px, 6vw, 80px);
}
.dv-footer__brand .dv-logo { margin-bottom: var(--dv-space-5); }
.dv-footer__brand p { font-size: 15px; max-width: 38ch; }

.dv-footer h2 {
  margin-bottom: var(--dv-space-5);
  font-size: 19px;
  font-weight: var(--dv-w-semi);
  line-height: var(--dv-lh-head);
}
.dv-footer__links { display: grid; gap: var(--dv-space-3); font-size: 15px; }

.dv-nap { display: grid; gap: var(--dv-space-4); font-size: 15px; font-style: normal; }
.dv-nap__row { display: grid; grid-template-columns: auto 1fr; gap: var(--dv-space-3); align-items: start; }
.dv-nap__row svg { color: var(--dv-accent); margin-top: 3px; flex-shrink: 0; }

.dv-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dv-space-4);
  padding-block: var(--dv-space-6);
  border-top: 1px solid var(--dv-border);
  font-size: var(--dv-small);
}
/* `.dv-social` kaldırıldı — işletmenin sosyal hesabı yok, ikonlar boşa
   giden bağlantılardı. Hesaplar açılınca hem bu blok hem şemadaki
   `sameAs` birlikte geri gelir. */

/* Yapımcı künyesi — telif satırının sağ ucunda.
   Bilinçli olarak sessiz: müşterinin kendi footer'ıyla yarışmaz. */
.dv-credit {
  margin: 0;
  font-size: 13px;
  color: var(--dv-muted);
}
.dv-credit a {
  color: var(--dv-text);
  font-weight: var(--dv-w-medium);
}
.dv-credit a:hover { color: var(--dv-accent); }


/* ---------- 19. STICKY MOBİL CTA (brief §14) ---------- */

.dv-sticky {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--dv-z-sticky);
  background: var(--dv-dark);
  border-top: 1px solid var(--dv-border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dv-sticky a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--dv-radius-btn);
  font-family: var(--dv-font-display);
  font-size: 14px;
  font-weight: var(--dv-w-semi);
}
.dv-sticky__call { background: var(--dv-accent); color: var(--dv-dark); }
.dv-sticky__wa   { background: #25D366; color: #062B12; }
.dv-sticky__quote{ background: transparent; border: 1px solid var(--dv-border); color: var(--dv-text); }


/* ---------- 19b. İÇ SAYFA HERO + BREADCRUMB ----------
   Kit'in 15 iç sayfasının hepsi aynı hero'yu kullanıyor (about-us.json,
   services.json, equipment.json … hepsinde birebir aynı ayarlar):
     padding      160 / 120  (tablet 160 / 100)
     zemin        radial gradient, konum "top right", ikinci durak %57
     bindirme     header-vertical-lines.png · top center · cover · opaklık 0.3
     alt kenarlık 1 px Border
   Saydam header bunun üstüne biniyor; 160 px üst boşluk 75 px'lik header
   satırını da kapsıyor. */

.dv-pagehero {
  position: relative;
  padding-block: 160px 120px;
  background: radial-gradient(at top right, var(--dv-glow-warm) 0%, var(--dv-dark) 57%);
  border-bottom: 1px solid var(--dv-border);
  text-align: center;
  overflow: hidden;
}

/* Dikey çizgiler. Kit'teki PNG'nin ölçüsü birebir korundu: 2968×1660 en-boy,
   4 çizgi, 1 px, #6A1E0E; `cover` + `top center` ile yerleşiyor — yani geniş
   ekranda dördü de görünür, dar ekranda görsel yükseklikten büyüyüp ortadaki
   ikisi kalır. PNG ile aynı davranış, rastersiz. */
.dv-pagehero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2968 1660' fill='%236A1E0E'%3E%3Crect x='80' width='1' height='1402'/%3E%3Crect x='1016' width='1' height='1402'/%3E%3Crect x='1952' width='1' height='1402'/%3E%3Crect x='2888' width='1' height='1402'/%3E%3C/svg%3E");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
  pointer-events: none;
}
.dv-pagehero > .dv-container { position: relative; }

/* Başlık kitte H2 tipografisiyle çiziliyor (55/50/38), H1 ölçeğiyle değil.
   Etiket <h1> kalıyor — SEO'da sayfa başına tek H1 kuralı bozulmasın. */
.dv-pagehero h1 {
  max-width: 20ch;
  margin: 10px auto 0;
  font-size: var(--dv-h2);
  letter-spacing: 0;
}
.dv-pagehero__lead {
  max-width: 62ch;
  margin: var(--dv-space-5) auto 0;
  font-size: 17px;
}

/* Breadcrumb hapı: kit 220×40, yarıçap 100, 10 px aralık, radial zemin,
   1 px amber kenar. Genişlik kitte sabit 220 px; burada `min-width` yapıldı
   çünkü "Hizmet Bölgelerimiz / Kahramanmaraş" gibi Türkçe yollar 220'ye
   sığmıyor — kısa yollarda görüntü kitle birebir aynı kalıyor. */
.dv-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  min-height: 40px;
  padding-inline: var(--dv-space-5);
  background: radial-gradient(var(--dv-card) 0%, var(--dv-glow) 100%);
  border: 1px solid var(--dv-border-accent);
  border-radius: 100px;
  font-family: var(--dv-font-display);
  font-size: var(--dv-h6);
  font-weight: var(--dv-w-regular);
  line-height: var(--dv-lh-head);
}
.dv-crumbs a { color: var(--dv-text); }        /* kit: üst kırıntılar beyaz */
.dv-crumbs a:hover { color: var(--dv-accent); }
.dv-crumbs span { color: var(--dv-accent); }   /* kit: bulunulan sayfa amber */
.dv-crumbs > *:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: var(--dv-border-accent);              /* kit: ayraç Border 2 */
}


/* ---------- 19c. ALINTI KAPSÜLÜ ----------
   H2'nin hemen altında, 40-60 kelime, doğrudan tanım.
   AI motorlarının alıntıladığı birim — görsel olarak da öne çıkar. */

.dv-capsule {
  max-width: 78ch;
  margin: 0 0 var(--dv-space-8);
  padding: var(--dv-space-6) var(--dv-space-8);
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-left: 3px solid var(--dv-accent);
  border-radius: var(--dv-radius-card);
  font-size: 17px;
  line-height: 1.7;
  color: var(--dv-text);
}


/* ---------- 19d. KONTROL LİSTESİ ---------- */

.dv-checklist { display: grid; gap: var(--dv-space-4); max-width: 92ch; }
.dv-checklist--2 { grid-template-columns: repeat(2, 1fr); }
.dv-checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--dv-space-3);
  align-items: start;
  font-size: 16px;
}
.dv-checklist svg { color: var(--dv-accent); margin-top: 4px; }


/* ---------- 19e. TABLO ----------
   Geniş içerik kendi kabında yatay kayar; sayfa gövdesi asla kaymaz. */

.dv-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  background: var(--dv-card);
}
.dv-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
.dv-table th, .dv-table td {
  padding: var(--dv-space-4) var(--dv-space-5);
  text-align: left;
  border-bottom: 1px solid var(--dv-border);
}
.dv-table th {
  font-family: var(--dv-font-display);
  font-weight: var(--dv-w-semi);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dv-accent);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}
.dv-table td { color: var(--dv-muted); }
.dv-table td:first-child { color: var(--dv-text); font-weight: var(--dv-w-medium); }
/* Tablo hücresindeki bağlantılar. Rengi devraldıkları için düz metinden
   ayırt edilemiyorlardı — tıklanabilir olduğu hiçbir şekilde belli olmuyordu.
   Altı çizgi rengin yanında ikinci bir işaret: rengi ayırt edemeyen kullanıcı
   da linki görüyor. */
.dv-table td a {
  color: var(--dv-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 184, 0, 0.45);
  transition: text-decoration-color var(--dv-dur-fast) var(--dv-ease);
}
.dv-table td a:hover,
.dv-table td a:focus-visible { text-decoration-color: var(--dv-accent); }
.dv-table tbody tr:last-child td { border-bottom: 0; }
.dv-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.dv-table__note { margin-top: var(--dv-space-4); font-size: var(--dv-small); }


/* ---------- 19f. İLGİLİ LİNKLER ---------- */

.dv-related {
  padding: var(--dv-space-8);
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
}
.dv-related h2 { font-size: var(--dv-h5); font-weight: var(--dv-w-semi); margin-bottom: var(--dv-space-5); }
.dv-related ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dv-space-3); }
.dv-related a {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  font-size: 15px;
  color: var(--dv-text);
}
.dv-related a:hover { color: var(--dv-accent); }
.dv-related svg { color: var(--dv-accent); }


/* ---------- 19f-2. TEKLİF KARTI (hizmet detay sayfası, sağ sütun) ----------
   Sayfanın ilk ekranındaki boş sağ alanı dolduruyor. `.dv-related`'dan
   ayrılsın diye amber tonlu zemin ve kenar: bu bir okuma kartı değil,
   eylem paneli. Zemin dolgusu kit'in rozet muamelesiyle aynı
   (radial card → glow), yeni bir görsel dil icat edilmedi. */

.dv-quote {
  padding: var(--dv-space-8);
  /* Köşedeki sıcaklık kit'in hero'sundaki `BG Radial 2` ile aynı renk —
     yeni renk üretilmedi. `--dv-glow` (%7 alfa) bu zeminde görünmüyordu. */
  background: radial-gradient(at top right, var(--dv-glow-warm) 0%, var(--dv-card) 65%);
  border: 1px solid var(--dv-border-accent);
  border-radius: var(--dv-radius-card);
}
.dv-quote h2 {
  margin: var(--dv-space-4) 0 var(--dv-space-3);
  font-size: var(--dv-h4);
  line-height: var(--dv-lh-head);
}
.dv-quote > p { margin: 0 0 var(--dv-space-6); font-size: 15px; }

.dv-quote__list { display: grid; gap: var(--dv-space-3); margin-bottom: var(--dv-space-6); }
.dv-quote__list li {
  display: flex;
  gap: var(--dv-space-3);
  font-size: var(--dv-small);
  line-height: var(--dv-lh-body);
  color: var(--dv-text);
}
.dv-quote__list svg { flex: none; margin-top: 3px; color: var(--dv-accent); }

.dv-quote__actions { display: grid; gap: var(--dv-space-3); }
.dv-quote__actions .dv-btn { justify-content: center; }

.dv-quote__note { margin: var(--dv-space-5) 0 0; font-size: 13px; color: var(--dv-muted); }
.dv-quote__note a { color: var(--dv-accent); }
.dv-quote__note a:hover { text-decoration: underline; }


/* ---------- 19f-2. BLOG KAPAK GÖRSELİ ----------
   Kaynağı _build/gorseller/<slug>.html; tarayıcıda render edilip WebP'ye
   alınıyor (OKUBENI.md). 2400×1260 master, sayfada en fazla ~1100 px
   gösteriliyor — retina ekranda da keskin.
   `aspect-ratio` img'deki width/height özniteliklerini yedekliyor: görsel
   yüklenmese bile kutu aynı yeri kaplıyor, altındaki metin zıplamıyor. */

/* Kapak hero'nun devamı: altındaki bölüm kendi üst boşluğunu zaten
   getiriyor, buraya bir de alt boşluk koyulursa arada iki kat boşluk
   oluşuyor ve kapak metinden kopuyor. */
.dv-section--kapak { padding-bottom: 0; }

.dv-kapak,
.dv-blogsema,
.dv-postimg { margin: 0; }

.dv-kapak img,
.dv-blogsema img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-img);
}

.dv-kapak    img { aspect-ratio: 40 / 21; }
.dv-blogsema img { aspect-ratio: 4 / 3; }   /* eski .dv-ph--hero ile aynı */

/* Blog kartındaki görsel: kartın üst kenarına oturuyor, kendi köşe
   yuvarlaklığı yok — kartınkini kullanıyor. `object-fit` YOK ve olmamalı:
   kapak 40:21, kart da 40:21 istiyor; kırpma gerekmiyor. Kart oranı
   eskiden 16:10'du, kapağın kenarlarını kırpıyordu. */
.dv-postimg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  transition: transform var(--dv-dur-slow) var(--dv-ease);
}
.dv-post:hover .dv-postimg img { transform: scale(1.05); }

/* ---------- 19f-3. ŞEMA (blog yazısı teknik çizimi) ----------
   Fotoğraf değil, kodla üretilen SVG: her ölçekte keskin, ~2 KB ve site
   token'larını kullandığı için tema değişirse şema da değişiyor.
   Dar ekranda küçültmek yerine yatayda kaydırılıyor — 640 birimlik çizim
   320 px'e sığdırılsa etiketler okunmaz hâle geliyordu. */

.dv-fig {
  margin: var(--dv-space-8) 0;
  padding: var(--dv-space-6);
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
}
.dv-fig__scroll { overflow-x: auto; border-radius: var(--dv-radius-btn); }
.dv-fig__scroll:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 4px; }
.dv-fig svg { display: block; width: 100%; min-width: 520px; height: auto; }

/* Kaydırma ipucu yalnızca şemanın sığmadığı genişliklerde. Şemanın sağ yarısı
   asıl mesajı taşıyor (uzak yarıçap → küçük yük); kaçırılmamalı. */
.dv-fig__hint { display: none; }
@media (max-width: 620px) {
  .dv-fig { padding: var(--dv-space-5); }
  .dv-fig__hint {
    display: block;
    margin: var(--dv-space-3) 0 0;
    font-size: 13px;
    color: var(--dv-accent);
  }
}
.dv-fig figcaption {
  margin-top: var(--dv-space-5);
  padding-top: var(--dv-space-5);
  border-top: 1px solid var(--dv-border);
  font-size: var(--dv-small);
  line-height: var(--dv-lh-body);
  color: var(--dv-muted);
}
.dv-fig figcaption strong { color: var(--dv-text); font-weight: var(--dv-w-semi); }


/* ---------- 19g. UZUN METİN BLOĞU ---------- */

.dv-prose { max-width: 78ch; }
.dv-prose h2 { margin: var(--dv-space-12) 0 var(--dv-space-5); }
.dv-prose h2:first-child { margin-top: 0; }
.dv-prose h3 { font-size: var(--dv-h5); margin: var(--dv-space-8) 0 var(--dv-space-3); }
.dv-prose p, .dv-prose ul { margin-bottom: var(--dv-space-4); }
.dv-prose strong { color: var(--dv-text); font-weight: var(--dv-w-semi); }
/* Nesir içi liste. Baştaki `ul` sıfırlaması madde imini ve girintiyi
   kaldırıyor; okunur bir metin listesi ikisine de ihtiyaç duyuyor. Kural
   .dv-prose ile sınırlı, sayfa iskeletindeki menü/kart listeleri etkilenmiyor. */
.dv-prose ul { list-style: disc; padding-left: 1.35em; }
.dv-prose li { margin-bottom: var(--dv-space-3); }
.dv-prose li::marker { color: var(--dv-accent); }

.dv-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* Izgara öğesinin varsayılan `min-width: auto` değeri, içindeki en uzun
   kelimenin sütunu genişletmesine izin veriyor. 320 px'te teklif kartı
   sütunundan 13 px taşıyordu. */
.dv-split > * { min-width: 0; }
.dv-sticky-col { position: sticky; top: 40px; display: grid; gap: var(--dv-space-6); }


/* ---------- 19h. TEKNİK ÖZELLİK LİSTESİ (araç sayfası) ---------- */

.dv-specs { display: grid; gap: 0; border: 1px solid var(--dv-border); border-radius: var(--dv-radius-card); overflow: hidden; }
.dv-specs__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--dv-space-4);
  padding: var(--dv-space-4) var(--dv-space-5);
  border-bottom: 1px solid var(--dv-border);
  font-size: 15px;
}
.dv-specs__row:last-child { border-bottom: 0; }
.dv-specs__row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.dv-specs__row b { color: var(--dv-text); font-family: var(--dv-font-display); font-weight: var(--dv-w-semi); }
/* Etiket ikonu — yalnızca künye (/kurumsal/) ve iletişim bloklarında.
   Araç sayfalarındaki teknik özellik listesi ikonsuz ve iki sütunlu kalıyor,
   çünkü oradaki değerler kısa ("50 ton") ve dar ekranda da sığıyor. */
.dv-specs--nap .dv-specs__row span { display: flex; align-items: center; gap: 10px; }
.dv-specs--nap .dv-specs__row svg { flex: none; color: var(--dv-accent); }
/* Dar ekranda değer alta iniyor: "Pazartesi – Cumartesi 08:00 – 18:00 · Pazar
   kapalı" iki sütunda etiketi eziyor, ikon tek başına bir satırda kalıyordu.
   28px = 18px ikon + 10px boşluk, yani değer etiket metniyle hizalanıyor. */
@media (max-width: 600px) {
  .dv-specs--nap .dv-specs__row { grid-template-columns: 1fr; gap: 6px; }
  .dv-specs--nap .dv-specs__row b { padding-left: 28px; }
}


/* ---------- 19i. FORM (iletişim sayfasındaki teklif formu) ---------- */

/* Form kabı ve alan stilleri kit'ten: metform-contact.json
   → kap  bg BG Card · 1px Border · radius 15 · padding 30 · gap 30
   → alan zemin YOK, yalnızca 1px alt çizgi · padding 15/0 · etiket beyaz,
     alt boşluk 7 · odakta alt çizgi beyaza döner. */
.dv-formcard {
  padding: var(--dv-space-8) 30px;
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
}
.dv-form { display: grid; gap: 30px; }
.dv-form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.dv-field { display: grid; gap: 7px; }
.dv-field label { font-size: var(--dv-small); color: var(--dv-text); font-weight: var(--dv-w-medium); }
.dv-field label span { color: var(--dv-accent); }
.dv-field input, .dv-field select, .dv-field textarea {
  padding: 15px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dv-border);
  border-radius: 0;
  color: var(--dv-text);
  font-family: var(--dv-font-body);
  font-size: 15px;
  transition: border-color var(--dv-dur-fast) var(--dv-ease);
}
.dv-field input::placeholder, .dv-field textarea::placeholder { color: var(--dv-muted); }
.dv-field input:hover, .dv-field select:hover, .dv-field textarea:hover { border-bottom-color: #FFFFFF4D; }
.dv-field input:focus, .dv-field select:focus, .dv-field textarea:focus {
  outline: none; border-bottom-color: var(--dv-text);
}
/* Odak yalnızca alt çizgiyle belli olduğu için klavye kullanıcısına ayrıca
   görünür bir halka veriliyor — WCAG 2.4.7. */
.dv-field input:focus-visible, .dv-field select:focus-visible, .dv-field textarea:focus-visible {
  outline: 2px solid var(--dv-accent); outline-offset: 3px;
}
/* Açılır listenin seçenekleri tarayıcı çizer: koyu zemin ayrıca verilmeli */
.dv-field select option { background: var(--dv-card-solid); color: var(--dv-text); }
.dv-field textarea { resize: vertical; min-height: 110px; }
.dv-field__hint { font-size: 13px; color: var(--dv-muted); }

/* Dosya alanı formdan kalktı (WhatsApp bağlantısı dosya taşımıyor), onun
   `::file-selector-button` stilleri de birlikte kaldırıldı. Yerine, fotoğrafın
   nereye ekleneceğini söyleyen not: */
.dv-form__note {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  background: var(--dv-glow);
  border: 1px solid var(--dv-border-accent);
  border-radius: var(--dv-radius-btn);
  font-size: var(--dv-small);
  color: var(--dv-muted);
}
.dv-form__note svg { flex: none; margin-top: 2px; color: var(--dv-accent); }

/* ---------- 19i-2. İLETİŞİM DÜZENİ (kit: contact-us.json) ----------
   Solda form kartı, sağda %40 genişlikte bilgi kartları, aralarında 100px.
   Tablette kit `column-reverse` diyor: kartlar forma göre yukarı çıkıyor,
   çünkü telefon numarası formdan daha hızlı bir yol. */

.dv-contact { display: grid; grid-template-columns: 1fr 40%; gap: 100px; align-items: start; }

.dv-contactcards { display: grid; gap: var(--dv-space-5); }
.dv-contactcard {
  display: flex;
  gap: var(--dv-space-5);
  padding: 30px;
  background: var(--dv-card);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-card);
  transition: border-color var(--dv-dur-normal) var(--dv-ease),
              background-color var(--dv-dur-normal) var(--dv-ease);
}
.dv-contactcard > svg { flex: none; margin-top: 2px; color: var(--dv-accent); }
.dv-contactcard h3 { margin: 0 0 6px; font-size: var(--dv-h5); font-weight: var(--dv-w-medium); line-height: var(--dv-lh-head); }
.dv-contactcard span { display: block; font-size: var(--dv-h6); line-height: var(--dv-lh-head); color: var(--dv-muted); }
a.dv-contactcard { text-decoration: none; }
a.dv-contactcard:hover { background: var(--dv-card-hover); border-color: var(--dv-border-accent); }
a.dv-contactcard:hover span { color: var(--dv-text); }

/* Vurgulu kart — kit'te üçüncü kart Primary zeminli, içeriği Secondary. */
.dv-contactcard--hl { background: var(--dv-accent); border-color: var(--dv-accent); }
.dv-contactcard--hl > svg,
.dv-contactcard--hl h3,
.dv-contactcard--hl span { color: var(--dv-dark); }
a.dv-contactcard--hl:hover { background: var(--dv-accent-hover); border-color: var(--dv-accent-hover); }
a.dv-contactcard--hl:hover span { color: var(--dv-dark); }

/* Tarih alanının takvim ikonu koyu zeminde görünmez kalıyordu */
.dv-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
}
.dv-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }


/* ---------- 19f. HARİTA ŞERİDİ ----------
   Kit'te (contact-us.json) harita sayfanın altında tam genişlikte duruyor:
   yükseklik 500 px (mobil 400), radius 15, kap 20 px iç boşluklu.
   `saturate(0)` de kit'ten — harita gri, üstüne gelince renkleniyor; böylece
   Google'ın renkleri sayfanın koyu paletini bozmuyor.
   Yükseklik sabit olduğu için gömme gelirken sayfa kaymıyor (CLS = 0). */

.dv-mapband { padding: var(--dv-space-5); background: var(--dv-bg); }
.dv-mapband iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
  border-radius: var(--dv-radius-card);
  filter: saturate(0);
  transition: filter var(--dv-dur-slow) var(--dv-ease);
}
.dv-mapband iframe:hover { filter: saturate(1); }

.dv-mapband__link {
  max-width: var(--dv-container);
  margin: var(--dv-space-4) auto 0;
  font-size: var(--dv-small);
}
.dv-mapband__link a { color: var(--dv-muted); }
.dv-mapband__link a:hover { color: var(--dv-accent); }
.dv-mapband__link svg { vertical-align: -2px; }


/* ---------- 20. TEYİT ROZETİ (yalnızca prototip) ----------
   Müşteri verisi gelmeden yayına çıkamayacak blokları işaretler.
   Yayın öncesi bu sınıfın sitede kalmadığı doğrulanacak. */

.dv-teyit {
  position: relative;
  outline: 1px dashed var(--dv-accent);
  outline-offset: 4px;
}
.dv-teyit::after {
  content: "TEYİT GEREKLİ";
  position: absolute;
  top: -11px; left: 12px;
  padding: 2px 8px;
  background: var(--dv-accent);
  color: var(--dv-dark);
  border-radius: 3px;
  font-family: var(--dv-font-display);
  font-size: 10px;
  font-weight: var(--dv-w-bold);
  letter-spacing: 0.05em;
  z-index: 5;
}
body.dv-teyit-off .dv-teyit { outline: none; }
body.dv-teyit-off .dv-teyit::after { display: none; }

/* Prototip barı çekmeceden yukarıda (300 > 251) ve telefon düğmesini
   örtüyordu. Menü açıkken çekiliyor — zaten yayına çıkmadan silinecek. */
body.dv-menu-open .dv-proto-bar { display: none; }

.dv-proto-bar {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 300;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--dv-card-solid);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-btn);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.dv-proto-bar button {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--dv-border);
  border-radius: 4px;
  color: var(--dv-text);
  font-family: var(--dv-font-body);
  font-size: 12px;
  cursor: pointer;
}
.dv-proto-bar button:hover { border-color: var(--dv-accent); color: var(--dv-accent); }


/* ---------- 21. GÖRSEL YER TUTUCU ----------
   Gerçek saha fotoğrafı gelene kadar. Stok görsel kullanılmadı:
   brief §15 — bu SERP'te ayrıştırıcı olan şey gerçek fotoğraf. */

.dv-ph {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 184, 0, 0.10), rgba(255, 107, 0, 0.06)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--dv-card-solid);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-img);
  color: var(--dv-muted);
  text-align: center;
  padding: var(--dv-space-6);
}
.dv-ph span {
  font-family: var(--dv-font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: 24ch;
  line-height: 1.5;
}
.dv-ph--hero   { aspect-ratio: 4 / 3; }
.dv-ph--tall   { aspect-ratio: 5 / 6; }
.dv-ph--equip  { aspect-ratio: 16 / 11; border-radius: 0; border: 0; border-bottom: 1px solid var(--dv-border); }
.dv-ph--job    { aspect-ratio: 3 / 2;  border-radius: 0; border: 0; border-bottom: 1px solid var(--dv-border); }
.dv-ph--post   { aspect-ratio: 16 / 10; border-radius: 0; border: 0; border-bottom: 1px solid var(--dv-border); }


/* ---------- 21b. ÖRNEK KUTUSU (hizmet sayfası seçim rehberi) ---------- */

/* Sol kenardaki vurgu çizgisi bilerek: kutuyu çevreleyen bir çerçeve yerine
   tek taraflı işaret, metnin akışını kesmeden "burada başka bir şey var"
   diyor. Çalışılmış örnek, adım listesinin devamı — ayrı bir bölüm değil. */
.dv-ornek {
  margin-top: var(--dv-space-6);
  padding: var(--dv-space-6) var(--dv-space-8);
  border-left: 3px solid var(--dv-accent);
  border-radius: 0 var(--dv-radius-card) var(--dv-radius-card) 0;
  background: linear-gradient(90deg,
              rgba(255, 184, 0, 0.07), rgba(255, 184, 0, 0) 60%);
}
.dv-ornek__etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--dv-space-3);
  color: var(--dv-accent);
  font-size: var(--dv-small);
  font-weight: var(--dv-w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dv-ornek p { margin: 0; max-width: 78ch; }


/* ---------- 21c. HATA KARTLARI ---------- */

.dv-hata { position: relative; padding-left: calc(var(--dv-space-8) + 30px); }
.dv-hata__im {
  position: absolute;
  top: var(--dv-space-8);
  left: var(--dv-space-8);
  color: var(--dv-accent);
  line-height: 0;
}
.dv-hata h3 { margin: 0 0 10px; font-size: var(--dv-h5); }
.dv-hata p  { margin: 0; color: var(--dv-muted); }


/* ---------- 21d. TERİM SÖZLÜĞÜ ---------- */

/* `dl` iki sütun: solda terim, sağda tanım. Terimin dar sütunda kalması
   göz için tarama kolonu oluşturuyor — okur aradığı kelimeyi tanımları
   okumadan buluyor. */
.dv-sozluk { margin: 0; }
.dv-sozluk__satir {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--dv-space-6);
  padding: var(--dv-space-5) 0;
  border-bottom: 1px solid var(--dv-border);
}
.dv-sozluk__satir:last-child { border-bottom: 0; }
.dv-sozluk dt {
  color: var(--dv-text);
  font-weight: var(--dv-w-semi);
}
.dv-sozluk dd { margin: 0; color: var(--dv-muted); max-width: 76ch; }


/* ---------- 21e. FİLO FOTOĞRAF GALERİSİ ----------

   Araç kartı (.dv-equip) tekniği anlatıyor: kapasite, etiket, detay linki.
   Galeri onu yapmıyor — yalnızca aracın kendisini gösteriyor. Bu yüzden
   kart değil `figure`: çerçeve yok, gölge yok, tıklanacak yer yok.

   `object-fit: cover` burada da duruyor ama kırpma payı küçük: türevler
   zaten 3:2 üretiliyor (foto.py), CSS yalnızca yuvarlama farkını yutuyor. */

.dv-galeri__kare { margin: 0; }
.dv-galeri__kare img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--dv-radius-img);
  border: 1px solid var(--dv-border);
  display: block;
}
.dv-galeri__kare figcaption {
  margin-top: var(--dv-space-3);
  color: var(--dv-muted);
  font-size: var(--dv-small);
  line-height: 1.5;
}

/* Telefonda dokuz kare tek sütunda çok uzun bir şerit oluyor; iki sütun
   sayfayı yarıya indiriyor ve fotoğraflar hâlâ tanınacak boyutta. Altyazı
   bu genişlikte iki satıra taşabildiği için punto bir kademe küçülüyor. */
@media (max-width: 767px) {
  .dv-grid.dv-galeri { grid-template-columns: repeat(2, 1fr); gap: var(--dv-space-4); }
  .dv-galeri__kare figcaption { font-size: 13px; margin-top: var(--dv-space-2); }
}

@media (max-width: 360px) {
  .dv-grid.dv-galeri { grid-template-columns: 1fr; }
  .dv-galeri__kare figcaption { font-size: var(--dv-small); }
}


/* ---------- 22. GİRİŞ ANİMASYONU ---------- */

@media (prefers-reduced-motion: no-preference) {
  .dv-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dv-dur-slow) var(--dv-ease),
                transform var(--dv-dur-slow) var(--dv-ease);
  }
  .dv-reveal.is-in { opacity: 1; transform: none; }
}


/* ---------- 23. DUYARLILIK ---------- */

@media (max-width: 1200px) {
  .dv-regions { grid-template-columns: repeat(2, 1fr); }
}

/* İletişim menüden çıkınca masaüstü menüsü 7 kaleme indi ve kit'in 40 px
   aralığı çok daha geniş bir aralıkta sığar oldu — önceki iki kademeli
   daraltma gereksizleşti. Ölçüldü: 7 kalem 40 px aralıkla 732 px yer
   istiyor, 1120 px ekranda menüye kalan alan 748 px. Altında tek kademe
   daraltma yetiyor, 1024'te burger devralıyor. */
@media (max-width: 1120px) {
  .dv-nav { gap: var(--dv-space-5); }
}

@media (max-width: 1024px) {
  .dv-burger { display: block; }

  /* Kit tablet/mobilde header düğmesini gizliyor (hide_tablet + hide_mobile);
     mobilde dönüşümü alttaki sabit Ara / WhatsApp / İletişim barı taşıyor. */
  .dv-header__cta .dv-btn--primary { display: none; }

  /* ----- Sağdan açılan çekmece -----
     `display: none` KULLANILMIYOR: kayarak gelmesi için öğe sürekli
     yerinde durup ekran dışına ötelenmeli. Görünürlüğü `visibility`
     taşıyor — kapalıyken bağlantılar sekme sırasından da çıkıyor,
     `display:none` olmadan erişilebilirlik bozulmasın diye.

     Genişlik %80 (müşteri isteği) ama 400 px'te sınırlı: 1024 px tablette
     %80 = 819 px, o artık menü değil ikinci bir sayfa olurdu. */
  .dv-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--dv-z-cekmece);
    flex: none;
    width: 80%;
    max-width: 400px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--dv-space-5) var(--dv-space-6)
             calc(var(--dv-space-6) + env(safe-area-inset-bottom));
    background: var(--dv-dark);
    border-left: 1px solid var(--dv-border);
    overflow-y: auto;
    /* Çekmece sonuna gelince kaydırma alttaki sayfaya geçmesin */
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    /* `visibility` gecikmeli kapanıyor: kayma bitmeden gizlenirse panel
       ortada kaybolmuş gibi duruyor. */
    transition: transform var(--dv-dur-normal) var(--dv-ease),
                visibility 0s linear var(--dv-dur-normal);
  }
  body.dv-menu-open .dv-nav {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--dv-dur-normal) var(--dv-ease),
                visibility 0s;
  }

  /* Kap yalnızca programla odaklanıyor (tabindex="-1"), Tab ile ulaşılmıyor —
     halka çizmesine gerek yok. İçindeki bağlantıların odağı etkilenmiyor. */
  .dv-nav:focus { outline: none; }

  .dv-nav__close {
    align-self: flex-end;
    display: flex;
    padding: 8px;
    margin-bottom: var(--dv-space-2);
    background: transparent;
    border: 0;
    color: var(--dv-muted);
    cursor: pointer;
    transition: color var(--dv-dur-fast) var(--dv-ease);
  }
  .dv-nav__close:hover { color: var(--dv-text); }

  .dv-nav a {
    padding: var(--dv-space-4) 0;
    border-bottom: 1px solid var(--dv-border);
    font-size: var(--dv-h6);
  }
  /* kit: masaüstünde hover/active beyaz, çekmecede amber */
  .dv-nav a:hover,
  .dv-nav a[aria-current="page"] { color: var(--dv-accent); }

  /* ----- Çekmece ayağı: telefon + WhatsApp ----- */
  .dv-nav__foot {
    display: flex;
    flex-direction: column;
    gap: var(--dv-space-2);
    margin-top: auto;              /* her zaman en altta, menü kısa olsa da */
    padding-top: var(--dv-space-6);
  }
  .dv-nav__foot a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px var(--dv-space-4);
    border: 0;
    border-radius: var(--dv-radius-cta);
    font-size: var(--dv-small);
    font-weight: var(--dv-w-semi);
  }
  /* İki sınıflı seçici ZORUNLU. `.dv-nav a` (0,1,1) tek sınıflı
     `.dv-nav__tel`i (0,1,0) eziyordu: telefon düğmesi amber zemin üstünde
     --dv-muted ile çiziliyordu, kontrast ~2:1 ile okunmuyordu. */
  .dv-nav__foot .dv-nav__tel {
    background: var(--dv-accent);
    color: var(--dv-dark);
  }
  .dv-nav__foot .dv-nav__tel:hover {
    background: var(--dv-accent-hover);
    color: var(--dv-dark);
  }
  .dv-nav__foot .dv-nav__wa {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--dv-border);
    color: var(--dv-text);
  }
  .dv-nav__foot .dv-nav__wa:hover {
    background: var(--dv-card-hover);
    color: var(--dv-text);
  }

  /* ----- Perde ----- */
  .dv-perde {
    position: fixed;
    inset: 0;
    z-index: var(--dv-z-perde);
    background: rgba(6, 6, 8, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dv-dur-normal) var(--dv-ease),
                visibility 0s linear var(--dv-dur-normal);
  }
  body.dv-menu-open .dv-perde {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dv-dur-normal) var(--dv-ease), visibility 0s;
  }

  /* Kit tablet ölçüleri: hero 145/70, iç sayfa hero'su 160/100 + 20 yan */
  .dv-hero { padding-block: 145px 70px; }
  .dv-pagehero { padding-block: 160px 100px; }
}

/* Sayfa kilidi: çekmece açıkken arka plan kaymasın. `overflow: hidden`
   iOS Safari'de yetmiyor, gövde sabitleniyor. Kaydırma konumunu JS
   `top` ile koruyup kapanışta geri veriyor. */
body.dv-menu-open {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* Masaüstünde çekmeceye özgü öğeler yok: menü zaten açık duruyor. */
@media (min-width: 1025px) {
  .dv-nav__close,
  .dv-nav__foot,
  .dv-perde { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-nav, .dv-perde { transition-duration: 1ms; }
}

@media (max-width: 767px) {
  .dv-crumbs { min-width: 180px; font-size: 16px; }  /* kit mobil ölçüleri */
}

/* 360 px ve altı. Kit'in mobil H2'si 38 px; en uzun yer adımız
   "Kahramanmaraş'ta" bu puntoyla 328 px'lik içerik genişliğine sığmıyor ve
   kelime ortadan bölünüyordu. Yalnızca bu dar aralıkta bir kademe düşürüldü —
   375 px ve üstünde (iPhone SE dahil) kit değeri aynen geçerli. */
@media (max-width: 380px) {
  :root { --dv-h2: 34px; }
}

@media (max-width: 1024px) {

  /* Tek sütuna inerken metin her zaman görselden önce gelir.
     Aksi hâlde kullanıcı H1'i görmeden bir yer tutucu/fotoğraf karşılıyor —
     hem dönüşüm hem okunabilirlik açısından yanlış sıra. */
  .dv-hero__inner { grid-template-columns: 1fr; }
  .dv-hero__media { order: 2; }
  .dv-float-badge { left: var(--dv-space-4); }
  .dv-float-badge--br { right: var(--dv-space-4); left: auto; }

  .dv-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dv-why, .dv-faq { grid-template-columns: 1fr; }
  .dv-why__media { order: 2; }
  .dv-why__media img, .dv-ph--tall { aspect-ratio: 16 / 10; }

  .dv-footer__main { grid-template-columns: repeat(2, 1fr); }
  .dv-section-head--split { grid-template-columns: 1fr; align-items: start; }

  .dv-split { grid-template-columns: 1fr; }
  .dv-sticky-col { position: static; }

  /* Kit tablette `column-reverse`: bilgi kartları formun üstüne geçiyor. */
  .dv-contact { grid-template-columns: 1fr; gap: 50px; }
  .dv-contact__form  { order: 2; }
  .dv-contact__aside { order: 1; }
}

@media (max-width: 767px) {
  .dv-grid--2, .dv-grid--3, .dv-grid--4 { grid-template-columns: 1fr; }
  /* Tek sütunda span 2 örtük bir ikinci sütun açardı. */
  .dv-service--wide { grid-column: auto; }

  /* Sözlükte 140 px'lik terim sütunu telefonda tanımı 20 karaktere sıkıştırıyordu. */
  .dv-sozluk__satir { grid-template-columns: 1fr; gap: 6px; }
  .dv-hata { padding-left: var(--dv-space-8); }
  .dv-hata__im {
    position: static;
    display: block;
    margin-bottom: var(--dv-space-3);
    line-height: 1;
  }
  .dv-regions { grid-template-columns: 1fr; }
  .dv-footer__main { grid-template-columns: 1fr; }

  .dv-sticky { display: grid; }
  body { padding-bottom: 76px; }

  .dv-stats { flex-wrap: wrap; gap: var(--dv-space-8); }
  .dv-hero__actions .dv-btn { flex: 1 1 100%; justify-content: center; }

  /* Yüzen rozetler mobilde gizlenir: telefon zaten hero CTA'sında ve
     sabit alt barda var, "operatörlü & sigortalı" hemen altındaki kartta.
     Tekrar eden içerik hero'yu uzatıp ilk ekranı boğuyordu. */
  .dv-float-badge { display: none; }

  .dv-checklist--2, .dv-related ul, .dv-form__row { grid-template-columns: 1fr; }
  .dv-capsule { padding: var(--dv-space-5); font-size: 16px; }

  .dv-formcard, .dv-quote { padding: var(--dv-space-6) var(--dv-space-5); }
  .dv-contactcard { padding: var(--dv-space-6) var(--dv-space-5); gap: var(--dv-space-4); }
  .dv-mapband { padding: var(--dv-space-4); }
  .dv-mapband iframe { height: 400px; }

  .dv-proto-bar { right: 8px; bottom: 84px; padding: 5px; opacity: .55; }
  .dv-proto-bar:hover, .dv-proto-bar:focus-within { opacity: 1; }
  .dv-proto-bar button { padding: 5px 8px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}