/* ==========================================================
   YAPI MARKET / HIRDAVAT — ölçü hesabı, desi nakliyesi, miktar kademesi
   ----------------------------------------------------------
   Bu dosya shop.css'in ÜSTÜNE yüklenir ve yalnızca bu modülün bloklarını
   tanımlar: hiçbir çekirdek sınıfı ezmez. Renkler shop.css belirteçlerinden
   gelir (--primary, --accent, --surface…); yeni renk sabiti tanımlanmaz,
   böylece beş temada da tutarlı görünür.

   DUYARLILIK KURALLARI (tests/Feature/DuyarlilikTest.php ile kilitli):
     • Kırılma noktaları YALNIZCA onaylı listeden: 420, 560, 640, 641, 720,
       900, 901, 1040, 1100.
     • Çok kolonlu ızgara izinde ÇIPLAK `Nfr` YOK → minmax(0, Nfr).
       (Çıplak `1fr`in örtük tabanı `auto` = min-content; içindeki uzun bir
       sayı ya da tablo izi genişletip BÜTÜN SAYFAYI yatay kaydırır.)
     • repeat(auto-fit, …) tabanı min(Npx, 100%) ile sarılır.
     • Form alanı yazı boyu 16px (iOS zorla yakınlaştırma).
     • Dokunma hedefi ≥44px.
     • Toptan geçiş bildirimi (her özelliği canlandıran `all` değeri) YOK;
       animasyon yalnızca transform/opacity kullanır. DİKKAT: denetim dosyanın
       TAMAMINI tarar, açıklama satırları dâhil — yasak yazımı örnek olarak
       buraya yazmak bile testi düşürür (ölçüldü).
     • Tabloya display:block VERİLMEZ; kabı kaydırılır (.table-scroll).
   ========================================================== */

/* ==========================================================
   1) ÖLÇÜ HESABI KUTUSU
   ========================================================== */

.yapi-hesap {
  border: 1.5px solid var(--primary-line, var(--border));
  border-radius: var(--card-radius, 12px);
  background: var(--card-bg, #fff);
  padding: 18px;
  margin-block: 20px;
}

.yapi-hesap__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.yapi-hesap__baslik {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--title);
  margin: 0;
}

.yapi-hesap__aciklama {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px;
}

/*
  Alan ızgarası: dar ekranda tek kolon, geniş ekranda yan yana. Taban değer
  min(200px, 100%) ile sarılı — 320px'lik ekranda kabından geniş olamaz.
*/
.yapi-hesap__satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  align-items: start;
}

/* Alanlar shop.css `.field` kurallarını devralır; burada yalnızca boşluk. */
.yapi-hesap__satir .field {
  margin-bottom: 8px;
}

/*
  Ek güvence: bu blok içindeki her girdi 16px ve 44px yüksekliktedir. shop.css
  `.field input` kuralı bunu zaten veriyor ama hesap kutusu `.field` dışında da
  girdi taşıyabilir (satır içi adet alanı), bu yüzden kural burada tekrarlanır.
*/
.yapi-hesap input,
.yapi-hesap select {
  font-size: 16px;
  min-height: 44px;
}

.yapi-hesap__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

/* ---------------- Sonuç ---------------- */

.yapi-hesap__sonuc {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius, 8px);
  background: var(--surface, #f6f9fc);
  border: 1px solid var(--border);
}

.yapi-hesap__sonuc[hidden] {
  display: none;
}

.yapi-hesap__miktar {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--title);
  margin: 0 0 2px;
  line-height: 1.2;
}

.yapi-hesap__miktar span {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}

/*
  HESABIN ADIMLARI. "13 koli" demek yetmez: hangi sayı nereden geldi?
  Sıralı liste kullanılır, süs değil — ekran okuyucu da adımları sayabilsin.
*/
.yapi-hesap__adimlar {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.yapi-hesap__adimlar li + li {
  margin-top: 4px;
}

.yapi-hesap__ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin-top: 14px;
}

.yapi-hesap__kart {
  padding: 10px 12px;
  border-radius: var(--radius, 8px);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
}

.yapi-hesap__kart dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 2px;
}

.yapi-hesap__kart dd {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--title);
  margin: 0;
}

.yapi-hesap__hata {
  margin-top: 14px;
}

/* ==========================================================
   2) MİKTAR KADEMESİ TABLOSU
   ----------------------------------------------------------
   Tabloya display:block VERİLMEZ (satır-sütun ilişkisi erişilebilirlik
   ağacından düşer). Dar ekranda KAP kayar: .table-scroll (shop.css) +
   tabindex="0" role="region" aria-label şablonda.
   ========================================================== */

.yapi-kademe {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.yapi-kademe th,
.yapi-kademe td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.yapi-kademe th {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}

.yapi-kademe tr:last-child td {
  border-bottom: 0;
}

/* Şu an geçerli olan kademe. Rengin YANINDA metin işareti de vardır
   ("şu anki fiyat"), çünkü bilgi yalnızca renkle taşınamaz (WCAG 1.4.1). */
.yapi-kademe__aktif td {
  background: var(--primary-soft, #eef4fa);
  font-weight: 600;
  color: var(--title);
}

.yapi-kademe__sonraki {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-hover, var(--title));
}

/* ==========================================================
   3) NAKLİYE / DESİ BİLGİSİ
   ========================================================== */

.yapi-nakliye {
  margin-block: 16px;
}

.yapi-nakliye__liste {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}

.yapi-nakliye__satir {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}

.yapi-nakliye__deger {
  font-weight: 600;
  color: var(--title);
}

/*
  Küçük açıklama satırı. shop.css'teki `.hint` YALNIZCA `.field .hint` olarak
  tanımlıdır (form alanı içi); alan dışında kullanıldığında hiçbir stil almaz.
  Bu yüzden modülün kendi not sınıfı vardır.
*/
.yapi-not {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/*
  ÜRÜN SAYFASINDAKİ TESLİM ETİKETİ. Rozet shop.css `.badge` kurallarını
  devralır; burada yalnızca blok boşluğu verilir.
*/
.yapi-teslim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 10px;
  font-size: 14px;
}

/* ==========================================================
   4) DAR EKRAN
   ----------------------------------------------------------
   Onaylı kırılma noktası: 560px (tek kolona düşen küçük bileşenler).
   ========================================================== */

@media (max-width: 560px) {
  .yapi-hesap {
    padding: 14px;
  }

  .yapi-hesap__miktar {
    font-size: 21px;
  }

  /* Düğmeler tam genişlik: 320px'lik ekranda yan yana sıkışmasın */
  .yapi-hesap__eylem .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================
   5) HAREKETİ AZALT
   ----------------------------------------------------------
   Bu dosyada animasyon yoktur; yine de shop.css yüklenmeyen bir bağlamda
   (tema kendi düzenini kurarsa) geçişlerin kapanabilir olması gerekir.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .yapi-hesap,
  .yapi-hesap__sonuc {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}