/* ==========================================================================
   teklif-sayfa: /teklif/, /servis-yedek-parca/ ve /iletisim/ sayfalarının düzeni.
   Yalnız bu sayfalarda yüklenir (ctx.duzen ekStil); site.css bütçesine girmez.
   Yalnız 00-token.css belirteçleri kullanılır. Çekmece ve kalem satırı: 65-teklif.css
   ========================================================================== */

/* ---------- Teklif sayfası: solda liste, sağda form ---------- */

.teklif-sayfa {
  padding-top: var(--space-7);
}
.teklif-sayfa__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-6);
}
.teklif-sayfa__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-frame) solid var(--color-accent-line);
}
.teklif-sayfa__ozet {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.teklif-sayfa__ekle {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
/* Metin düğmesi sola dayanır. 30-bilesen.css ikonla başlayan her düğmeye 18px sol pay verir;
   o kuralın özgüllüğünü geçmek için aynı seçici yinelenir. */
.teklif-sayfa__ekle > .dugme:not(.dugme--ikon):has(> .ikon:first-child),
.iletisim-adres__harita > .dugme:not(.dugme--ikon):has(> .ikon:first-child) {
  padding-left: 0;
}
/* Liste boşken "Başka ürün ekleyin" gizlenir: boş durumun kendi eylemi vardır */
.teklif-liste:has([data-teklif-kalemler][hidden]) + .teklif-sayfa__ekle {
  display: none;
}
.teklif-sayfa__form > h2 {
  margin-bottom: var(--space-5);
}
@media (min-width: 1040px) {
  .teklif-sayfa__izgara {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }
  .teklif-sayfa__liste {
    grid-column: 1;
    grid-row: 1;
  }
  .teklif-sayfa__form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .teklif-sayfa__kanal {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Geniş kalem satırı: liste sütunu 600 pikseli geçince adet ve kaldır sağa, not adın altına geçer */
.teklif-liste--genis {
  container-type: inline-size;
}
@container (min-width: 600px) {
  .teklif-liste--genis .teklif-kalem {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas:
      'gorsel govde eylem'
      'gorsel not not';
    column-gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-5);
  }
  .teklif-liste--genis .teklif-kalem:first-child {
    padding-top: 0;
  }
  .teklif-liste--genis .teklif-kalem__gorsel {
    grid-area: gorsel;
  }
  .teklif-liste--genis .teklif-kalem__gorsel .plaka {
    width: 96px;
  }
  .teklif-liste--genis .teklif-kalem__govde {
    grid-area: govde;
    align-content: start;
    padding-top: var(--space-1);
  }
  .teklif-liste--genis .teklif-kalem__eylem {
    grid-area: eylem;
    gap: var(--space-4);
  }
  .teklif-liste--genis .teklif-kalem__not {
    grid-area: not;
    align-self: end;
  }
}

/* ---------- Talep formu (üç sayfada ortak) ---------- */

.talep-form {
  display: grid;
  gap: var(--space-5);
  container-type: inline-size;
}
/* Alanlar satırı doldurmak için uzamaz: yan yana iki alanın girdileri aynı hizada kalır */
.talep-form .alan {
  align-content: start;
}
/* Çift sütun formun kendi genişliğine bağlıdır: dar plakada alt alta, geniş plakada yan yana */
.talep-form__cift {
  display: grid;
  gap: var(--space-5);
}
@container (min-width: 520px) {
  .talep-form__cift {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .talep-form__cift > .alan--tam {
    grid-column: 1 / -1;
  }
}
.talep-form__grup {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.talep-form__grup > legend {
  margin-bottom: var(--space-3);
  padding: 0;
}
/* Gruptaki iki alan alt etiketle ayrışır; grup etiketi başlık görevindedir */
.talep-form__grup .alan__etiket[for] {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.talep-form__grup > .alan__hata {
  margin-top: var(--space-2);
}
.talep-form__son {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.talep-form__aydinlatma,
.talep-form__onay,
.talep-form__onizleme {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}
.talep-form__onay {
  color: var(--color-text-primary);
}
/* Önizleme bildirimi: koyu kap üstünde yükseltilmiş zemin, sol başta bilgi ikonu */
.talep-form__sonuc {
  background: var(--color-bg-raised);
}
.talep-form__sonuc .bildirim__metin {
  display: grid;
  gap: var(--space-2);
}
.talep-form__sonuc .eylemler {
  margin-top: var(--space-2);
}
/* Bildirim açıkken alttaki kısa önizleme notu yinelenmez */
.talep-form__sonuc:not([hidden]) ~ .talep-form__onizleme {
  display: none;
}

/* İki sütunlu talep bölümü: solda açıklama, sağda plaka üstünde form.
   Servis sayfasında .bolum-iki ile birlikte kullanılır: sütunları o verir (aşağıda, servis bölümü). */
.talep {
  display: grid;
  row-gap: var(--space-6);
}
.talep:not(.bolum-iki) {
  grid-template-columns: minmax(0, 1fr);
}
.talep__yan {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.talep__yan > p {
  max-width: 48ch;
  color: var(--color-text-secondary);
}
.talep__yan > .kanal {
  margin-top: var(--space-4);
}
@media (min-width: 960px) {
  .talep:not(.bolum-iki) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-7);
    align-items: start;
  }
}

/* ---------- Doğrudan iletişim bloğu ---------- */

.kanal {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  justify-items: start;
  padding-top: var(--space-4);
  border-top: var(--border-frame) solid var(--color-accent-line);
}
.kanal > p {
  max-width: 48ch;
  color: var(--color-text-secondary);
}
.kanal__satirlar {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.kanal__satirlar > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
}
.kanal__satirlar dt {
  color: var(--color-text-secondary);
}
.kanal__satirlar dd {
  font-weight: 600;
}

/* ---------- Künye: tip etiketi düzeninde adres ve telefon ---------- */

.kunye address {
  font-weight: 650;
}
/* Arama, WhatsApp ve e-posta bağlantıları telefonda en çok dokunulan hedefler: en az 44 px yükseklik (mobil-03) */
.kunye > div {
  position: relative;
}
.kunye dd a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.kunye__harita {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  font-weight: 600;
}
/* Dar ekranda tek sütun: e-posta ve telefon satırı kırılmaz */
.kunye--iki {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .kunye--iki {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Adres üstte tam satır; altında iki hücre yan yana (tek kalan son hücre kuralı burada geçmez) */
  .kunye--ust > div:first-child {
    grid-column: 1 / -1;
  }
  .kunye.kunye--ust > div:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ---------- Servis sayfası ----------
   Üç bölüm (.servis-bas, .servis-isler, .talep) aynı bölünmeyi kullanır: .bolum-iki .bolum-iki--baslik
   (K-6, S-8; tanım 20-duzen.css). Bu dosya sütun şablonu ve sütun aralığı vermez; yalnız satır aralığı ve hizalama. */

.servis-bas,
.servis-isler {
  display: grid;
  row-gap: var(--space-6);
}
.servis-bas__metin .eylemler {
  margin-top: var(--space-5);
}
.servis-isler > h2 {
  margin: 0;
}
@media (min-width: 900px) {
  .servis-bas {
    align-items: end;
  }
  .servis-isler,
  .talep.bolum-iki {
    align-items: start;
  }
}
.servis-satirlar {
  margin: 0;
  border-top: var(--border-frame) solid var(--color-accent-line);
}
.servis-satirlar > li {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.servis-satirlar p {
  max-width: 56ch;
  color: var(--color-text-secondary);
}
.servis-isler__hazirlik {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.servis-hazirlik {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.servis-hazirlik li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  line-height: 1.45;
}
.servis-hazirlik .ikon {
  margin-top: 1px;
  color: var(--color-accent-line);
}
@media (min-width: 640px) {
  .servis-satirlar > li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    column-gap: var(--space-5);
  }
}
/* Hazırlık plakası satırların altında, aynı sağ sütunda */
.servis-isler__hazirlik {
  margin-top: var(--space-6);
}
@media (min-width: 640px) {
  .servis-hazirlik {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

/* ---------- İletişim sayfası ---------- */

.iletisim-adresler {
  padding-top: var(--space-7);
}
.iletisim-adresler__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-6);
}
.iletisim-adres {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.iletisim-adres > .kunye {
  margin-top: var(--space-3);
}
.iletisim-adres__harita .dugme {
  justify-content: flex-start;
}
@media (min-width: 900px) {
  .iletisim-adresler__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}