/* ==========================================================================
   urun.css: ürün sayfası (belirtim 4.2). Yalnız ürün sayfalarında yüklenir
   (site/sablon/urun.mjs → ctx.duzen ekStil); site.css bütçesine girmez.
   Başlık bloğu, galeri + tip etiketi, yapışkan sayfa içi menü, bölümler
   (başlık solda, içerik sağda), doküman listesi, servis, teklif çağrısı.
   Plaka, tip etiketi, tablo, karo ve düğmeler site.css içindedir (30-bilesen).
   Yalnız 00-token.css belirteçleri kullanılır.
   ========================================================================== */

/* ---------- 0. Yapışkan menü payı (erisilebilirlik-03) ----------
   Yapışkan başlık + "Bu sayfada" menüsü odaklanan öğeyi örtmesin: kaydırma payı ikisinin toplamı.
   --urun-menu-h betikle menünün gerçek yüksekliğine eşitlenir (urun.js); betik yoksa 49px.
   :has desteklemeyen tarayıcıda aynı kural betiğin html sınıfıyla (urun-menulu) uygulanır. */

:root {
  --urun-menu-h: 49px;
}
html:has(.urun-menu),
html.urun-menulu {
  scroll-padding-top: calc(var(--header-h) + var(--urun-menu-h) + var(--space-5));
}

/* ---------- 1–2. Başlık bloğu ---------- */

.urun-bas__marka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
  font-weight: 600;
  line-height: 1.3;
}
.urun-bas h1 {
  max-width: 34ch;
  margin-top: var(--space-2);
}
.urun-bas .giris {
  max-width: 64ch;
}
/* Tireli model kodu satır sonunda bölünmez (en dar ekranlar hariç) */
@media (min-width: 375px) {
  .urun-kod {
    white-space: nowrap;
  }
}
@media (max-width: 639px) {
  /* Dar ekranda kırıntının son ögesi (ürün adı) hemen altındaki başlığı yinelemesin */
  .urun-bas .kirinti li:last-child {
    display: none;
  }
  /* 60 karakterden uzun ad dar ekranda bir basamak küçük: satır sayısı azalır */
  .urun-bas .urun-bas__ad--uzun {
    font-size: 1.5rem;
  }
}

/* ---------- 3. Galeri plakası + tip etiketi ---------- */

/* Izgara sitenin ortak bölünmesidir: .bolum-iki--medya (galeri 7 sütun, tip etiketi 8. sütundan; 20-duzen.css, S-8).
   900px altında tek sütun. */
.urun-ust {
  margin-top: var(--space-6);
}
.urun-galeri,
.urun-karar {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}
/* Tek sütunda galeri ve etiket okunur genişlikte kalır */
@media (max-width: 899px) {
  .urun-galeri,
  .urun-karar {
    max-width: 640px;
  }
}
/* Stüdyo fotoğrafı galeride kendi en-boy oranıyla durur: degrade fonlu çekimlerde (ör. Kett PM450)
   ölçülen plaka tonu fotoğrafın kenarını tutturamıyor, 4:3 plakada iki yanda ayrı tonlu bant kalıyordu.
   Plaka fotoğrafın boyuna iner; çok uzun dikey fotoğraf 640px'te kesilmeden sığdırılır. */
.urun-galeri .plaka--studyo {
  display: block;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  aspect-ratio: auto;
}
.urun-galeri .plaka--studyo picture {
  display: block;
}
.urun-galeri .plaka--studyo img {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
}
/* Betik çalışıyorsa yalnız seçili kare görünür; çalışmıyorsa kareler alt alta durur */
html.js .urun-galeri__kare:not(.secili) {
  display: none;
}
.urun-galeri__kucukler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}
.urun-galeri__kucuk {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-plate);
  background: none;
}
.urun-galeri__kucuk .plaka {
  width: 72px;
}
/* Seçili küçük resim: içte çerçeve (odak halkası dışta kalır, ikisi karışmaz) */
.urun-galeri__kucuk[aria-pressed='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-frame) solid var(--color-accent-line);
  border-radius: inherit;
}

.urun-karar {
  gap: var(--space-5);
}
/* İki sütunda tip etiketi galerinin dikey ortasında: altında boşluk kalmaz (gorsel-06) */
@media (min-width: 900px) {
  .urun-ust > .urun-karar {
    align-self: center;
  }
}
.urun-karar__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* 260px: “Teklif listesine ekleyin” tek satıra sığar; sığmayan genişlikte (ör. 1024) düğmeler alt alta geçer,
   etiket stadyum düğmenin içinde iki satıra kırılmaz */
.urun-karar__eylem .dugme {
  flex: 1 1 260px;
}
.urun-karar__yan {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin-block: calc(-1 * var(--space-3));
}
/* Metin düğmesinde baştaki ikon sol kenara oturur */
.urun-karar__yan .dugme.dugme--metin:has(> .ikon:first-child) {
  padding-left: 0;
}
.urun-karar__not,
.urun-not,
.urun-alt__not,
.urun-alt__kaydir,
.urun-video figcaption {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-dense);
}
/* Teknik tablosu olmayan ürün: eylemlerin altında föy notu (K-5; ayrı gri kutu yok) */
.urun-karar__foy {
  max-width: 52ch;
  margin-top: calc(-1 * var(--space-2));
  color: var(--color-text-secondary);
}
.urun-servis__metin {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}
@media (min-width: 900px) {
  .urun-ust {
    margin-top: var(--space-7);
  }
}

/* ---------- 4. Sayfa içi menü: başlığın altına yapışır ---------- */

.urun-menu {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  margin-top: var(--space-7);
  border-bottom: var(--border-hair) solid var(--color-border-separator);
  background: var(--color-bg-page);
}
/* Bağlantıların iç boşluğu odak halkasına yer açar; liste aynı ölçüde dışa taşar, yazı içerik kenarında kalır */
.urun-menu__liste {
  position: relative;
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  overflow-x: auto;
  scrollbar-width: none;
}
.urun-menu__liste::-webkit-scrollbar {
  display: none;
}
.urun-menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-2);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-stretch: 95%;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* Etkin bölüm: renk + yazı genişliğinde alt çizgi (renk tek başına anlam taşımaz) */
.urun-menu a[aria-current] {
  color: var(--color-accent-text);
}
.urun-menu a[aria-current]::after {
  content: '';
  position: absolute;
  inset: auto var(--space-2) 0;
  height: var(--border-frame);
  background: var(--color-accent-line);
}
.urun-menu a:focus-visible {
  outline-offset: -2px;
}

/* ---------- 5–11. Bölümler ---------- */

/* Sayfa içi bağlantıda bölüm başlığı yapışkan menünün hemen altına gelir */
.urun-bolum {
  scroll-margin-top: calc(var(--space-8) - var(--band));
}
/* Başlık solda (4 sütun), içerik 5. sütundan: .bolum-iki--baslik (20-duzen.css, S-8). Satır aralığını başlığın alt
   boşluğu verir (ızgara satır aralığı iki kez saymasın). */
.urun-bolum--yan .bolum-iki {
  row-gap: 0;
}
/* Dört ve daha çok sütunlu model tabloları: bölünmenin altında kabuğun tam genişliğinde (urun.mjs bolum genis) */
.urun-bolum__genis > .urun-alt:first-child {
  margin-top: var(--space-7);
}
@media (min-width: 900px) {
  .urun-bolum--yan .bolum__bas {
    margin-bottom: 0;
  }
}
/* 1200px üstü: uzun bölümde başlık kaydırmayla sol sütunda kalır (gorsel-11) */
@media (min-width: 1200px) {
  .urun-bolum--yan .bolum__bas {
    position: sticky;
    top: calc(var(--header-h) + var(--urun-menu-h) + var(--space-6));
    align-self: start;
  }
}

/* Öne çıkan özellikler ve dokümanlar: çizgiyle ayrılmış satırlar */
.urun-ozellikler,
.urun-belgeler {
  margin: 0;
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.urun-ozellikler li,
.urun-belgeler a {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-4);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.urun-ozellikler p,
.urun-servis p,
.urun-teklif__metin p {
  color: var(--color-text-secondary);
}
@media (min-width: 640px) {
  .urun-ozellikler li {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  }
}

/* Teknik tablo altı: kaynak notu, varyant ve model tabloları */
.urun-not,
.urun-alt > :is(table, .tablo-kabi) {
  margin-top: var(--space-4);
}
.urun-alt {
  margin-top: var(--space-7);
}
.urun-alt__not {
  margin-top: var(--space-1);
}
/* Az sütunlu tablo dar ekrana sığar; genişinin yana kaydığını not söyler */
.urun-tablo--dar {
  min-width: 0;
}
.urun-alt__kaydir {
  display: none;
  margin-top: var(--space-2);
}
@media (max-width: 599px) {
  .urun-alt__kaydir {
    display: block;
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
  }
  /* Yana kaydırınca "Model" sütunu görünür kalır (mobil-06) */
  .urun-alt .tablo-kabi :is(thead th:first-child, tbody th) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-bg-page);
    box-shadow: 1px 0 0 var(--color-border-separator);
  }
}
.urun-video {
  max-width: calc(var(--shell) * 2 / 3);
}
.urun-video video {
  width: 100%;
  border-radius: var(--radius-plate);
  background: var(--color-bg-surface);
}
.urun-video figcaption {
  margin-top: var(--space-2);
}
.urun-bolum__govde > * + .urun-video {
  margin-top: var(--space-6);
}

.urun-belgeler a {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  color: var(--color-text-heading);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.urun-belgeler small {
  display: block;
  color: var(--color-text-secondary);
  font-stretch: var(--font-width-dense);
  font-weight: 400;
}
.urun-belgeler .ikon {
  color: var(--color-accent-text);
}

.urun-servis {
  display: grid;
  gap: var(--space-5);
}
.urun-servis dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
/* Telefon ve WhatsApp 44px dokunma hedefi; satır yüksekliği bağlantıyı ortalar */
.urun-servis dd {
  display: flex;
  align-items: center;
}
/* İlgili seçim rehberi (S-6): servis metninin altında tek satır */
.urun-rehber a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
/* En dar ekranda telefon numarası bölünmesin: plaka tek sütun */
@media (max-width: 359px) {
  .urun-servis .tip-etiketi {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 720px) {
  .urun-servis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

/* Aynı kategoriden ürünler. Dar ekranda karo satıra döner: küçük plaka solda, bilgi sağda */
@media (max-width: 559px) {
  .urun-benzer {
    row-gap: var(--space-6);
  }
  .urun-benzer .karo {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    align-items: start;
  }
  .urun-benzer .plaka {
    grid-row: span 2;
    aspect-ratio: 1;
  }
}
/* Dört ürün: 960–1099px arasında 2×2, üstünde tek satır */
@media (min-width: 960px) {
  .urun-benzer--dort {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .urun-benzer--dort {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

/* ---------- 12. Teklif çağrısı: ürün, teklif kalemi gibi önceden dolu ---------- */

.urun-teklif__ic,
.urun-teklif__metin,
.urun-teklif__kutu {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.urun-teklif__ic {
  gap: var(--space-6);
}
.urun-teklif__metin p {
  max-width: 52ch;
}
.urun-teklif__kutu {
  justify-items: start;
}
.urun-teklif__form {
  width: 100%;
}
.urun-teklif__metin .urun-teklif__kalem {
  margin-top: var(--space-2);
}
.urun-teklif__kalem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-plate);
  background: var(--color-bg-raised);
}
.urun-teklif__kalem .plaka {
  width: 72px;
}
.urun-teklif__kalem dt {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.3;
}
.urun-teklif__kalem dd {
  color: var(--color-text-heading);
  font-weight: 650;
  line-height: 1.3;
}
@media (min-width: 900px) {
  .urun-teklif__ic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
    align-items: center;
  }
  /* Form sağda, ürün özeti solda: sitenin .bolum-iki--baslik çizgisi (sağ sütun 5. sütundan) */
  .urun-teklif--form .urun-teklif__ic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .urun-teklif--form .urun-teklif__metin {
    grid-column: 1 / span 4;
  }
  .urun-teklif--form .urun-teklif__kutu {
    grid-column: 5 / -1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .urun-menu a:hover,
  .urun-belgeler a:hover,
  .urun-servis dd a:hover {
    color: var(--color-accent-text);
  }
  .urun-galeri__kucuk:hover .plaka {
    background: var(--color-bg-plate-hover);
  }
}