/* ===========================================================================
   Alba İş Makineleri — tema: "Yükseklik Cetveli"
   Zemin beton beyazı, mürekkep grafit, vurgu makine sarısı.
   Link rengi yok: grafit metin + sarı alt çizgi. Sarı yalnızca CTA ve cetvelde.
   Bu dosya en son yüklenir; yardımcı sınıfları bilerek ezer.
   =========================================================================== */

/* ---------- yazı tipleri: kendi sunucumuzda, siteye özel alt küme ----------
   Google Fonts'tan çekilmiyor: üçüncü taraf isteği yok, ziyaretçi IP'si dışarı
   gitmiyor, .htaccess ile 1 yıl önbelleğe alınıyor. Alt küme sitede geçen
   153 karakterle sınırlı — 181 KB yerine 40 KB.                              */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/font/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/font/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/font/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/font/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/font/barlow-condensed-800.woff2") format("woff2"); }


:root {
  --beton:      #eef0ed;
  --beton-acik: #f6f7f4;
  --yuzey:      #ffffff;
  --grafit:     #14181a;
  --grafit-2:   #23292a;
  --celik:      #59635f;
  --celik-acik: #8a9289;
  --cizgi:      #dde1da;
  --cizgi-koyu: #333a38;
  --sari:       #f2b21c;
  --sari-koyu:  #d99a08;
  --sari-dip:   #fff6e0;

  --olcek-1: 0.8125rem;
  --olcek-2: 0.9375rem;
  --olcek-3: 1.0625rem;
  --olcek-4: 1.375rem;
  --olcek-5: 1.875rem;
  --olcek-6: 2.75rem;
  --olcek-7: clamp(2.5rem, 6vw, 4.25rem);

  --govde: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --baslik: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- tipografi ---------- */
body {
  font-family: var(--govde);
  background: var(--beton);
  color: var(--grafit);
  font-size: var(--olcek-3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.hero-content h1, .section-title h2, .nav-logo {
  font-family: var(--baslik);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--grafit);
}
h1, .text-4xl, .text-5xl { font-size: var(--olcek-7); font-weight: 800; }
h2, .text-3xl           { font-size: var(--olcek-6); }
h3, .text-xl            { font-size: var(--olcek-4); font-weight: 700; }

/* rakamlar hizalansın — makine plakası mantığı */
table, .hero-stat-number, .about-stat-number, .spec-tablo, .band-tablo, .kunye { font-variant-numeric: tabular-nums; }

/* küçük büyük harfli etiketler */
.hero-stat-label, .about-stat-label, .section-title > span,
.spec-tablo thead th, .band-tablo thead th, .kunye th {
  font-family: var(--govde);
  font-size: var(--olcek-1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------- link: renk değil, sarı çizgi ---------- */
main a:not(.btn):not(.nav-cta):not(.nav-link):not(.floating-btn):not(.bolge-kart):not(.district-card):not(.service-card):not([class*="bg-"]):not([class*="border-2"]),
.bolge-ozel a, .erisim-notu a, footer a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--sari);
  transition: background-color .15s, box-shadow .15s;
}
main a:not(.btn):not(.nav-cta):not(.nav-link):not(.floating-btn):not(.bolge-kart):not(.district-card):not(.service-card):not([class*="bg-"]):not([class*="border-2"]):hover,
.bolge-ozel a:hover, .erisim-notu a:hover {
  background: var(--sari);
  box-shadow: inset 0 -2px 0 var(--sari);
  color: var(--grafit);
}
footer a { box-shadow: inset 0 -1px 0 rgba(242,178,28,.55); }
footer a:hover { background: transparent; color: var(--sari); box-shadow: inset 0 -1px 0 var(--sari); }

/* ---------- çağrı butonları: siyah üstüne sarı ---------- */
.btn, .nav-cta,
a[class*="bg-white"][class*="px-8"]:not([class*="border-2"]) {
  font-family: var(--baslik);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  border-radius: 3px;
}
.btn-primary, .nav-cta,
a[class*="bg-white"][class*="px-8"][class*="rounded-lg"]:not([class*="border-2"]) {
  background: var(--sari) !important;
  color: var(--grafit) !important;
  border: 0;
  box-shadow: none;
}
.btn-primary:hover, .nav-cta:hover,
a[class*="bg-white"][class*="px-8"][class*="rounded-lg"]:not([class*="border-2"]):hover {
  background: var(--sari-koyu) !important;
  color: var(--grafit) !important;
}
.btn-white { background: var(--sari) !important; color: var(--grafit) !important; }
.btn-outline, a[class*="border-2"][class*="border-white"] {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  border-radius: 3px;
}
.btn-outline:hover, a[class*="border-2"][class*="border-white"]:hover {
  background: #fff !important; color: var(--grafit) !important; border-color: #fff !important;
}

/* ---------- gezinme ---------- */
.nav { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); box-shadow: none; }
.nav-logo { font-size: 1.375rem; font-weight: 800; color: var(--grafit); letter-spacing: -0.01em; }
.nav-link { color: var(--celik); font-weight: 600; }
.nav-link:hover { color: var(--grafit); box-shadow: inset 0 -2px 0 var(--sari); }

/* ---------- bölüm ritmi: yuvarlak kart yerine düz yüzey + tırnak ---------- */
section { padding: 4.5rem 0; }
main > section > div > h2:first-child,
.bolge-ozel h2, .section-title h2 { position: relative; padding-top: 1.25rem; }
main > section > div > h2:first-child::before,
.bolge-ozel h2::before, .section-title h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 4px; background: var(--sari);
}
.section-title h2::before { left: 50%; transform: translateX(-50%); }

.bg-white  { background: var(--yuzey); }
.bg-gray-50, .bg-gray { background: var(--beton); }

/* kartlar: gölge yok, ince çizgi, keskin köşe */
.rounded-lg, .rounded { border-radius: 6px; }
.shadow-md, .shadow-lg, .shadow-sm { box-shadow: none; }
.bolge-senaryo, .sec-kart, .kutu, .service-card, .district-card,
.brand-item, .bolge-kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: none;
  transition: border-color .15s, transform .15s;
}
.service-card:hover, .district-card:hover, .bolge-kart:hover, .brand-item:hover {
  border-color: var(--grafit);
  transform: none;
  box-shadow: inset 3px 0 0 var(--sari);
}

/* ---------- tablolar: makine plakası ---------- */
.spec-tablo, .band-tablo, .kunye { border-collapse: collapse; background: var(--yuzey); }
.spec-tablo thead, .band-tablo thead { background: var(--grafit); color: #fff; }
.spec-tablo thead th, .band-tablo thead th { color: #fff; border: 0; }
.spec-tablo td, .band-tablo td, .kunye td, .kunye th { border-bottom: 1px solid var(--cizgi); }
.spec-sarmal { border: 1px solid var(--cizgi); border-radius: 4px; box-shadow: none; }
.kunye th { background: var(--beton-acik); color: var(--grafit); }

/* ---------- teslimat bandı rozeti: plaka çipi ---------- */
/* Durum etiketi — enstrüman değil, etiket. Bu yüzden tam yuvarlak.
   Cetvel, tablo ve tehlike şeridi keskin kalır; ayrım bilinçli. */
.bolge-sure, .band-rozet {
  border-radius: 999px !important;
  font-family: var(--govde);
  font-size: 0.6875rem !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem !important;
  line-height: 1.25;
}
.band-rozet { background: var(--sari) !important; color: var(--grafit) !important; }

/* ---------- not blokları ---------- */
.erisim-notu, .mevzuat { background: var(--yuzey); border-left: 4px solid var(--sari); color: var(--grafit-2); border-radius: 0; }
.uyari { background: var(--sari-dip); border: 0; border-left: 4px solid var(--sari); border-radius: 0; color: var(--grafit-2); }

/* =====================================================================
   İMZA: yükseklik cetveli
   Ürünün kendisi kademeli dikey erişim; sayfanın hatırlanacağı öğe bu.
   ===================================================================== */
.cetvel { display: grid; gap: 0; margin: 1.75rem 0 0; }
.cetvel-satir {
  display: grid;
  grid-template-columns: minmax(120px, 1.15fr) minmax(0, 3fr) 76px;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0;
  border-top: 1px solid var(--cizgi);
}
.cetvel-satir:last-child { border-bottom: 1px solid var(--cizgi); }
.cetvel-ad { font-weight: 600; font-size: var(--olcek-2); color: var(--grafit); }
.cetvel-kanal { position: relative; height: 26px; background: repeating-linear-gradient(90deg, var(--cizgi) 0 1px, transparent 1px 10%); }
.cetvel-dolgu {
  position: absolute; inset: 0 auto 0 0;
  background: var(--grafit);
  border-right: 4px solid var(--sari);
  width: var(--oran, 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .cetvel-dolgu { animation: cetvel-ac .7s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes cetvel-ac { from { width: 0 } to { width: var(--oran, 50%) } }
}
.cetvel-deger {
  font-family: var(--baslik); font-weight: 700; font-size: 1.25rem;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--grafit);
}
.cetvel-olcek {
  display: grid; grid-template-columns: minmax(120px, 1.15fr) minmax(0, 3fr) 76px;
  gap: 1rem; font-size: var(--olcek-1); color: var(--celik-acik);
  letter-spacing: 0.06em; padding-top: 0.5rem; font-variant-numeric: tabular-nums;
}
.cetvel-olcek span:nth-child(2) { display: flex; justify-content: space-between; }

/* tehlike şeridi — sayfada yalnızca bir kez, hero altında */
.serit { height: 6px; background: repeating-linear-gradient(-45deg, var(--sari) 0 14px, var(--grafit) 14px 28px); }

/* ---------- hero: fotoğraf görünsün ---------- */
.hero {
  background:
    linear-gradient(90deg, rgba(20,24,26,.95) 0%, rgba(20,24,26,.88) 40%, rgba(20,24,26,.42) 72%, rgba(20,24,26,.18) 100%),
    url('/ankara-makasli-800w.webp') !important;
  background-size: cover !important;
  background-position: 68% center !important;
  min-height: auto;
  padding: 7rem 0 4rem;
}
.hero-content h1 { color: #fff; max-width: 20ch; }
.hero-subtitle, .hero p { color: #c9d2ce; max-width: 56ch; }
.hero-stats { gap: 0; border-top: 1px solid rgba(255,255,255,.18); margin-top: 2.5rem; padding-top: 1.5rem; }
.hero-stat { background: transparent; border: 0; border-left: 3px solid var(--sari); border-radius: 0; padding: 0 1.25rem; }
.hero-stat:first-child { padding-left: 1rem; }
.hero-stat-number { font-family: var(--baslik); font-size: 2.25rem; font-weight: 800; color: #fff; }
.hero-stat-label { color: #a9b4b2; }

/* alt sayfaların koyu başlık bandı */
section.pt-24 h1 { color: #fff; }
section.pt-24 .text-blue-100, section.pt-24 p { color: #c9d2ce; }

/* ---------- ekipman hero: satılan makine görünsün ---------- */
.hero-urun {
  background-size: cover !important;
  background-position: 72% center !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 860px) {
  .hero-urun { background-position: center !important; }
}

/* hero altı bölge satırı */
.hero-bolge { font-size: var(--olcek-2); color: #a9b4b2; margin: .9rem 0 2rem; letter-spacing: .01em; line-height: 1.9; }
.hero-bolge a { color: #fff; box-shadow: inset 0 -2px 0 var(--sari); text-decoration: none; }
.hero-bolge a:hover { background: var(--sari); color: var(--grafit); }

/* ---------- yüzen butonlar ---------- */
.floating-btn { border-radius: 3px; box-shadow: 0 2px 10px rgba(20,24,26,.28); }
.floating-btn.phone { background: var(--grafit); }

/* ---------- erişilebilirlik ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--sari);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- mobil ---------- */
@media (max-width: 860px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(20,24,26,.93) 0%, rgba(20,24,26,.86) 55%, rgba(20,24,26,.72) 100%),
      url('/ankara-makasli-800w.webp') !important;
    background-position: center !important;
    padding: 6rem 0 3rem;
  }
  section { padding: 3rem 0; }
  .cetvel-satir, .cetvel-olcek { grid-template-columns: 96px minmax(0,1fr) 58px; gap: .6rem; }
  .cetvel-deger { font-size: 1.05rem; }

  /* istatistik şeridi: yatay kaydırmalı plaka dizisi */
  .hero-stats {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding-bottom: .5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-stats::-webkit-scrollbar { display: none; }
  .hero-stat { flex: 0 0 auto; min-width: 108px; padding: 0 .9rem; }
  .hero-stat-number { font-size: 1.75rem; }
  .hero-stat-label { font-size: .6875rem; white-space: nowrap; }
  .hero-content h1 { max-width: none; }
}

/* =====================================================================
   SSS — kutu değil, bölünmüş liste.
   Üst üste çerçeveli kutu yığmak sayfayı gürültüye boğuyordu; soru-cevap
   zaten sıralı bir liste, tek ihtiyacı satır arası ince çizgi.
   ===================================================================== */
.sss-oge, .sss-liste > div, .faq-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--cizgi) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.35rem 0 !important;
  margin: 0 !important;
}
.sss-oge:last-child, .sss-liste > div:last-child, .faq-list .faq-item:last-child {
  border-bottom: 1px solid var(--cizgi) !important;
}
.sss-liste { display: block !important; gap: 0 !important; }
.sss-liste > div + div { margin-top: 0 !important; }

/* çizgiler metinle aynı ölçüde bitsin — geniş bölümlerde sağa taşmasın */
.sss-liste, .sss-oge { max-width: 58rem; }

/* akordiyon satırları biraz daha derli toplu */
.faq-item { padding: 1rem 0 !important; }
.faq-question { min-height: 0; }

.sss-oge h3, .sss-liste > div h3 {
  font-family: var(--baslik);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--grafit);
  margin: 0 0 .45rem !important;
}
.sss-oge p, .sss-liste > div p {
  color: var(--celik);
  margin: 0;
  max-width: 78ch;
}

/* ana sayfa akordiyonu: tek panel, satır arası çizgi */
.faq-question {
  font-family: var(--baslik);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--grafit);
  padding: 0 !important;
  gap: 1.5rem;
}
.faq-question:hover { color: var(--grafit); }
.faq-question svg { color: var(--sari); flex: 0 0 auto; }
.faq-answer { color: var(--celik); padding: .6rem 0 0 !important; max-width: 78ch; }

/* =====================================================================
   Ana sayfa "hakkımızda" bloğu
   ===================================================================== */

/* onay listesi — kutu değil, işaretli satır */
.about-features { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem 2rem; }
.about-feature {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--grafit);
  font-weight: 500;
}
.about-feature svg { color: var(--sari) !important; width: 18px; height: 18px; stroke-width: 3; }

/* istatistik kutuları: dolu blok yerine hero ile aynı çentikli şerit.
   Eski hâlinde etiket rengi #14181a idi ve koyu zemine düşünce okunmuyordu. */
.about-stats { gap: 1.4rem 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.about-stat {
  background: transparent !important;
  color: var(--grafit) !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--sari);
  padding: .35rem 0 .35rem 1rem !important;
  text-align: left !important;
}
.about-stat-number {
  font-family: var(--baslik);
  font-size: 2.25rem !important;
  font-weight: 800;
  color: var(--grafit);
  line-height: 1.05;
}
.about-stat-label { color: var(--celik) !important; font-weight: 600; }

/* =====================================================================
   Koyu zemin düzeltmesi
   h1/h2/h3 varsayılanı grafit; koyu bantlarda bu okunmaz hale geliyordu
   (footer başlıkları grafit üstüne grafit kalıyordu). Koyu yüzeylerde
   başlık ve metin beyaza döner.
   ===================================================================== */
footer h1, footer h2, footer h3, footer h4,
.hero h1, .hero h2, .hero h3,
.cta h1, .cta h2, .cta h3,
section[class*="text-white"] h1,
section[class*="text-white"] h2,
section[class*="text-white"] h3,
section.pt-24 h1, section.pt-24 h2, section.pt-24 h3,
[style*="background: #1e3a8a"] h2, [style*="background: #14181a"] h2,
[style*="linear-gradient"] h1, [style*="linear-gradient"] h2, [style*="linear-gradient"] h3 {
  color: #fff;
}
footer p, footer li, footer td, .cta p,
section[class*="text-white"] p { color: #c9d2ce; }
footer .text-gray-400, footer [class*="text-gray"] { color: #a9b4b2; }

/* cetvel ölçek etiketi biraz koyulaşsın (3.2:1 -> 5.4:1) */
.cetvel-olcek { color: var(--celik); }

/* görsel altı açıklama 4.28:1 kalıyordu -> 5.43:1 */
.text-gray-500 { color: var(--celik); }

/* =====================================================================
   Eksik yardımcı sınıflar
   Bu sekiz sınıf işaretlemede kullanılıyordu ama hiçbir CSS dosyasında
   tanımlı değildi. Sonucu: karşılaştırma tablosunun başlığı beyaz üstüne
   beyaz kalıyor, onay ve yıldız ikonları rengini alamıyordu.
   ===================================================================== */
.bg-blue-600      { background: var(--grafit); }
.bg-blue-600 th,
.bg-blue-600 td   { color: #fff; }
.bg-blue-100      { background: var(--beton); }
.bg-gray-100      { background: var(--beton); }
.text-green-500   { color: #10775c; }
.text-yellow-400  { color: var(--sari); }
.text-left        { text-align: left; }
.border-collapse  { border-collapse: collapse; }
.border-b         { border-bottom: 1px solid var(--cizgi); }