/* ============================================================
   ARDARİUM — DÜZEN
   Bölüm (strip) sistemi, sütunlar, görsel/video kutuları.

   Referansın "strip" mimarisi birebir alındı: sayfa, üst üste dizilen
   bölümlerden oluşuyor; her bölümün genişlik, sütun ve zemin
   değişkeleri var. Animasyonlar bu iskelete tutunuyor — envanterdeki
   F ve G maddeleri bölüm sınıflarına bakıyor.

   GÖRSEL VE VİDEOLAR BOŞ AMA ÖLÇEKLİ: .gorsel-kutu her yerde gerçek
   görselin en-boy oranını tutuyor (--oran). İçine fotoğraf konunca
   düzen kılpayı kaymıyor. Oranlar caffegilli.com'da canlı ölçüldü,
   ANIMASYON-ENVANTERI.md K bölümünde tablosu var.
   ============================================================ */

/* ---------- 1) BÖLÜM ---------- */

.bolum {
  position: relative;
  padding-top: calc(var(--vpad) * 2);
  padding-bottom: calc(var(--vpad) * 2);
}
.bolum--sik    { padding-top: var(--vpad); padding-bottom: var(--vpad); }
.bolum--bol    { padding-top: calc(var(--vpad) * 3.5); padding-bottom: calc(var(--vpad) * 3.5); }
.bolum--yapisik { padding-top: 0; padding-bottom: 0; }

/* Boşluk yardımcıları (referanstaki mt-md / mb-sm karşılığı) */
.ust-yok      { padding-top: 0; }
.alt-yok      { padding-bottom: 0; }
.ust-orta     { margin-top: calc(var(--vpad) * 2); }
.alt-orta     { margin-bottom: calc(var(--vpad) * 2); }
.alt-kucuk    { margin-bottom: var(--vpad); }

/* Zemin çeşitleri */
.zemin-2 { background: var(--colVurguAcik); }
.zemin-3 { background: var(--colMurekkep); color: var(--colBeyaz); }
.zemin-3 .bolum__ustbaslik { color: var(--colGri); }
.zemin-3 .dugme { border-color: var(--colBeyaz); color: var(--colBeyaz); }
.zemin-3 .dugme:hover { background: var(--colBeyaz); color: var(--colMurekkep); }

/* Bölüm zemini kubbeden düze iniyor (envanter G4) */
.zemin-yuvarlak {
  border-radius: 50% 50% 0 0 / min(50%, 14em) min(50%, 14em) 0 0;
  overflow: hidden;
}

/* ---------- 2) SÜTUNLAR ---------- */

.bolum__veri { position: relative; }

.bolum--sutunlu .bolum__veri {
  display: grid;
  gap: var(--vpad);
  grid-template-columns: 1fr;
  align-items: start;
}
@media screen and (min-width: 36em) {
  .bolum--sutunlu .bolum__veri  { grid-template-columns: repeat(2, 1fr); }
  .bolum--3sutun .bolum__veri   { grid-template-columns: repeat(3, 1fr); }
  .bolum--4sutun .bolum__veri   { grid-template-columns: repeat(4, 1fr); }
  .bolum--yan .bolum__veri      { grid-template-columns: 1fr 1.25fr; align-items: center; }
  .bolum--yan-ters .bolum__veri { grid-template-columns: 1.25fr 1fr; align-items: center; }
}
.bolum__sutun { position: relative; min-width: 0; }
.bolum__sutun__ic { position: relative; }

/* EKRANDA KALAN SÜTUN TAŞMASIN. js-goz-onunde, içinde bulunduğu satır
   kadar aşağı kayıyor. Sütun kutusu içeriği kadar yüksek olduğu için
   kayan öğe sütunun altından taşıyor ve BELGEYİ UZATIYORDU (ölçüldü:
   ürün sayfasında 5122 -> 5238). Sütunu satır boyuna esnetince
   hareket kendi kutusunun içinde kalıyor. */
.bolum__sutun:has(> .js-goz-onunde),
.bolum__sutun:has(> .js-sinirli-sabit) { align-self: stretch; }

/* Metin blokları */
.bolum__yazi { position: relative; }
.bolum__yazi--orta { text-align: center; margin-left: auto; margin-right: auto; }
.bolum__yazi--orta p { margin-left: auto; margin-right: auto; }

.bolum__not {
  border-top: 1px solid var(--colGri);
  padding-top: 1em;
  font-size: .9rem;
}

/* Tam ekran yüksekliğinde bölüm (envanter F6 tutunma noktası) */
.bolum--tam-yukseklik { min-height: 100svh; display: flex; align-items: center; }
.bolum--tam-yukseklik > .kap { width: 100%; }

/* ---------- 3) GÖRSEL VE VİDEO KUTULARI ---------- */

/* Ortak kutu: oranı --oran tutuyor, içerik kırpılarak yerleşiyor.
   Gerçek görsel gelince sadece .gorsel-kutu içine <img> koyuluyor;
   kutunun geometrisi değişmiyor. */
.gorsel-kutu {
  position: relative;
  aspect-ratio: var(--oran, 16 / 9);
  overflow: hidden;
  background: var(--colVurguAcik);
  isolation: isolate;
}
.gorsel-kutu > img,
.gorsel-kutu > video,
.gorsel-kutu > picture,
.gorsel-kutu > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--kirp, cover);
  object-position: var(--odakX, 50%) var(--odakY, 50%);
}

/* BOŞ HÂLİ — içinde görsel yokken ne olduğu ve ölçüsü yazıyor.
   Gerçek dosya konunca bu katman kendiliğinden kayboluyor. */
.gorsel-kutu::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 10px,
      rgba(24, 25, 27, .05) 10px 11px);
  z-index: 0;
}
.gorsel-kutu::after {
  content: attr(data-not);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1em; text-align: center;
  font-family: var(--fontBaslik);
  font-variation-settings: 'wdth' 92;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colSonuk);
  z-index: 1;
}
.gorsel-kutu:has(> img)::before,
.gorsel-kutu:has(> video)::before,
.gorsel-kutu:has(> picture)::before,
.gorsel-kutu:has(> img)::after,
.gorsel-kutu:has(> video)::after,
.gorsel-kutu:has(> picture)::after { content: none; }

/* Bölüm içindeki adlandırılmış kutular */
.bolum__gorsel { position: relative; overflow: hidden; }
.bolum__gorsel .gorsel-kutu { width: 100%; }

/* Ölçü kısayolları — envanter K tablosundaki gerçek oranlar */
.oran-banner   { --oran: 16 / 9;      }   /* 1.778 */
.oran-kapla    { --oran: 16 / 9;      }   /* 1.778 — js-gorsel-kapla */
.oran-genis    { --oran: 1.367 / 1;   }   /* 1265 x 925 */
.oran-urun     { --oran: 0.714 / 1;   }   /* 367 x 514, ≈5:7 */
.oran-sahne    { --oran: 0.844 / 1;   }   /* 608 x 720 */
.oran-serit    { --oran: 1.757 / 1;   }   /* 1518 x 864 */
.oran-rozet    { --oran: 3.747 / 1; --kirp: contain; }
.oran-kare     { --oran: 1 / 1;       }

/* Yuvarlanan görsel (envanter G5) */
.gorsel--yuvarlak .gorsel-kutu { border-radius: 40vw; }

/* Maskeli görsel (envanter G6) */
.gorsel--maskeli .gorsel-kutu {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% 50%;
          mask-position: 0% 50%;
}

/* ---------- 4) BANNER ---------- */

.banner {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.banner .gorsel-kutu {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  z-index: 0;
}
.banner__ic {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: calc(var(--vpad) * 2);
  color: var(--colBeyaz);
}
.banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,12,12,.55), rgba(12,12,12,0) 55%);
  pointer-events: none;
}
.banner .bolum__baslik1 { color: var(--colBeyaz); }
/* Görselin üstündeki bütün metin beyaz — referansta da öyle:
   js-scroll-title'da strip__text bloğunun tamamı #fff.
   Üst başlık kendi soluk rengini taşıyordu, fotoğrafın üstünde okunmuyordu. */
.banner .bolum__ustbaslik { color: inherit; opacity: .85; }

/* Banner'ın altındaki "kaydır" işareti */
.kaydir-isaret {
  position: absolute; left: 50%; bottom: 1.6em; z-index: 3;
  transform: translateX(-50%);
  display: grid; place-items: center; gap: .5em;
  color: var(--colBeyaz);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
}
.kaydir-isaret u { display: block; width: 1px; height: 2.6em; background: currentColor; transform-origin: 50% 0; }

/* ---------- 5) ÜRÜN KARTI ---------- */

.urun { display: block; color: inherit; }
.urun .gorsel-kutu { transition: none; }
.urun__ad {
  font-family: var(--fontBaslik); font-variation-settings: 'wdth' 90;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 1.05rem; font-weight: 600;
  margin: 1em 0 .25em;
}
.urun__fiyat { color: var(--colSonuk); font-size: .95rem; }
.urun__gorsel { position: relative; overflow: hidden; }
.urun:hover .urun__ad { color: var(--colVurgu); }

/* ---------- 6) IZGARA YARDIMCILARI ---------- */

.izgara { display: grid; gap: var(--vpad); grid-template-columns: 1fr; }
@media screen and (min-width: 36em) {
  .izgara--2 { grid-template-columns: repeat(2, 1fr); }
  .izgara--3 { grid-template-columns: repeat(3, 1fr); }
  .izgara--4 { grid-template-columns: repeat(4, 1fr); }
}
.orta { text-align: center; }
.sag  { text-align: right; }

/* ---------- 7) AKORDEON (envanter I4) ---------- */

.akordeon { border-top: 1px solid var(--colGri); }
.akordeon__sira { border-bottom: 1px solid var(--colGri); }
.akordeon__baslik {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1.1em 0;
  text-align: left;
  font-family: var(--fontBaslik); font-variation-settings: 'wdth' 90;
  font-size: 1rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  transition: color var(--aniTime) var(--aniEgri);
}
.akordeon__baslik:hover { color: var(--colVurgu); }
.akordeon__baslik u {
  position: relative; flex: 0 0 auto; width: 1em; height: 1em;
}
.akordeon__baslik u::before,
.akordeon__baslik u::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px; background: currentColor;
  transition: transform var(--aniTime) var(--aniEgri);
}
.akordeon__baslik u::after { transform: rotate(90deg); }
.akordeon__sira.acik .akordeon__baslik u::after { transform: rotate(0deg); }
.akordeon__govde { overflow: hidden; height: 0; }
.akordeon__govde__ic { padding-bottom: 1.4em; }

/* ---------- 8) KAYDIRICI (envanter I5) ---------- */

.kaydirici { position: relative; }
.kaydirici__ray {
  display: flex; gap: var(--vpad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.kaydirici__ray::-webkit-scrollbar { display: none; }
.kaydirici__ray.suruklenirken { cursor: grabbing; scroll-snap-type: none; }
.kaydirici__oge { flex: 0 0 auto; scroll-snap-align: start; width: min(78vw, 26em); }
.kaydirici__oge--dar { width: min(60vw, 18em); }

.kaydirici__oklar { display: flex; gap: .5em; justify-content: flex-end; margin-top: var(--vpad); }
.kaydirici__ok {
  width: 3em; height: 3em; border-radius: 50%;
  border: 1px solid var(--colMurekkep);
  display: grid; place-items: center;
  transition: opacity var(--aniTime) var(--aniEgri), background var(--aniTime) var(--aniEgri), color var(--aniTime) var(--aniEgri);
}
.kaydirici__ok:hover { background: var(--colMurekkep); color: var(--colZemin); }
.kaydirici__ok[disabled] { opacity: .25; pointer-events: none; }

/* Nokta göstergesi — otomatik oynatmada dolan halka */
.kaydirici__noktalar { display: flex; gap: .5em; justify-content: center; margin-top: var(--vpad); }
.kaydirici__nokta {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--colGri);
  transition: background var(--aniTime) var(--aniEgri);
}
.kaydirici__nokta.aktif { background: var(--colVurgu); animation: nokta-dolsun 5s linear forwards; }
@keyframes nokta-dolsun {
  from { box-shadow: 0 0 0 0 var(--colVurgu); }
  to   { box-shadow: 0 0 0 .28em var(--colVurguAcik); }
}

/* ---------- 9) BÜYÜTME (lightbox) — envanter I6 ---------- */

.buyutme {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(12, 12, 12, .9);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--aniEgri), visibility .35s;
}
.buyutme.acik { opacity: 1; visibility: visible; }
.buyutme__ic { max-width: min(92vw, 70em); max-height: 88vh; transform: scale(.96); transition: transform .35s var(--aniEgriUzun); }
.buyutme.acik .buyutme__ic { transform: none; }
.buyutme__kapat { position: absolute; right: 1.2em; top: 1.2em; color: var(--colBeyaz); font-size: 1.6rem; }

/* ---------- 10) BÜYÜTEÇ (envanter I7) ---------- */

.buyutec { position: relative; overflow: hidden; cursor: zoom-in; }
.buyutec__cam {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: 200%;
  opacity: 0;
  transition: opacity var(--aniTime) var(--aniEgri);
  pointer-events: none;
}
.fareli .buyutec:hover .buyutec__cam { opacity: 1; }

/* ---------- 11) FİLTRE PANELİ (envanter I11) ---------- */

.filtre__ac { position: sticky; top: calc(var(--header-height) * 1px); z-index: 20; }
.filtre__panel {
  overflow: hidden; height: 0;
  border-bottom: 1px solid var(--colGri);
}
.filtre__satir { display: flex; flex-wrap: wrap; gap: .6em; padding: var(--vpad) 0; }
.filtre__etiket {
  padding: .5em 1.1em; border: 1px solid var(--colGri); border-radius: 2em;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: all var(--aniTime) var(--aniEgri);
}
.filtre__etiket.aktif, .filtre__etiket:hover {
  background: var(--colMurekkep); color: var(--colZemin); border-color: var(--colMurekkep);
}

/* Fiyat çubuğu */
.aralik { position: relative; height: 2px; background: var(--colGri); margin: 2em 0 1em; }
.aralik__dolu { position: absolute; top: 0; height: 100%; background: var(--colMurekkep); }
.aralik__topuz {
  position: absolute; top: 50%; width: 1.1em; height: 1.1em;
  margin-left: -.55em; transform: translateY(-50%);
  border-radius: 50%; background: var(--colMurekkep);
  cursor: grab;
}

/* ---------- 12) SAYFA İÇİ MENÜ / KIRINTI (envanter D9–D11) ---------- */

.sayfa-menu { background: var(--colZemin); border-bottom: 1px solid var(--colGri); }
.sayfa-menu ul { display: flex; gap: 1.4em; overflow-x: auto; padding: 1em 0; scrollbar-width: none; }
.sayfa-menu ul::-webkit-scrollbar { display: none; }
.sayfa-menu a {
  white-space: nowrap;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: .2em; border-bottom: 1px solid transparent;
  transition: all var(--aniTime) var(--aniEgri);
}
.sayfa-menu a.aktif { border-color: currentColor; }
/* YAPIŞMA STICKY İLE. Referans position:fixed + JS ile yükseklik
   telafisi kullanıyor; o yolda çubuk akıştan çıkınca altındaki her
   şey oynuyor ve telafi ondalık yüzünden 1 px artık bırakıyor
   (ölçüldü: koleksiyonda 16 px sıçrama, dört sayfada 1 px oynama).
   Sticky akışta kaldığı için telafiye hiç gerek yok: sıfır kayma.
   Görsel sonuç aynı. .js-sabit yalnız görünüm için (alt çizgi). */
.sayfa-menu {
  position: sticky;
  top: calc(var(--header-height, 0) * 1px);
  z-index: 40;
}
.sayfa-menu.js-sabit { box-shadow: 0 1px 0 var(--colGri); }

.kirinti { font-size: .78rem; color: var(--colSonuk); padding: 1em 0; }
.kirinti {
  position: sticky;
  top: calc(var(--header-height, 0) * 1px + var(--menuPage-height, 0px));
  z-index: 39;
  background: var(--colZemin);
}

/* ---------- 13) BANNER'SIZ SAYFALAR ---------- */
/* Header sabit ve saydam; banner olmayan sayfada içerik altına
   girmesin diye üstten boşluk veriliyor, zemini de baştan dolu. */
.sayfa--bannersiz .sayfa__icerik { padding-top: calc(var(--header-height, 90) * 1px); }
.sayfa--bannersiz .sayfa__header::before { opacity: 1; }

/* Bu iki sarmalayicinin yuksekligi CSS'te TAHMIN EDILMIYOR. Yapisan
   menu/kirinti position:fixed'e gecince akistan cikiyor; yerini
   korumak icin JS o anda OLCULEN gercek boyu min-height olarak
   yaziyor. Burada 3.4em gibi bir tahmin dururken JS'in yazdigi
   gercek boy ondan kucuk kaliyordu ve sarmalayici 16 px kisaliyordu
   (test.cjs yakaladi: koleksiyon 6811 -> 6796). */
.kirinti-kap, .sayfa-menu-kap { min-height: 0; }
/* Yatay taşma gizleniyor ama SCROLL KABI YARATMADAN: overflow:hidden
   koysaydık içerideki position:sticky çalışmazdı. */

/* ---------- 14) TABLO ---------- */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .7em .6em; border-bottom: 1px solid var(--colGri); }
th {
  font-family: var(--fontBaslik); font-variation-settings: 'wdth' 90;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--colSonuk); font-weight: 600;
}
/* Dar ekranda tablo kendi içinde kayıyor (referanstaki table__scroller) */
.tablo-kaydir { overflow-x: auto; }

/* ---------- 15) SEPET ---------- */
.sepet-liste { display: grid; gap: var(--vpad); }
.sepet-sira {
  display: grid; gap: 1em;
  grid-template-columns: 6em 1fr auto;
  align-items: start;
  padding-bottom: var(--vpad);
  border-bottom: 1px solid var(--colGri);
}
.sepet-sira .gorsel-kutu { width: 6em; }
.sepet-sira__yazi .urun__ad { margin-top: 0; }
.sepet-sira__yazi .sayi { margin-top: .8em; }
.sepet-sira__sil {
  font-size: 1rem; color: var(--colSonuk);
  transition: color var(--aniTime) var(--aniEgri);
}
.sepet-sira__sil:hover { color: var(--colVurgu); }

.ozet {
  border: 1px solid var(--colGri);
  border-radius: .4em;
  padding: var(--vpad);
}
.ozet__satir { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 .5em; }
.ozet__satir--kalin { font-weight: 600; font-size: 1.1rem; }
.ozet .dugme { width: 100%; justify-content: center; }

/* ============================================================
   TELEFONDA OKUNABİLİRLİK VE DOKUNMA (2026-09-12)

   Arda: "mobilden bakanlar için de güzel bir şekilde boyutlarını ayarla."

   ÖLÇÜLDÜ (arac/mobil-olcu.cjs, 375x812) — 15 hedef 44px altındaydı:
     button.menu__acici   32x18   <-- menüyü açan düğme, en kritik olanı
     a "TR"               23x22
     a "Hesabım"          20x20
     button.js-yan-ac     20x38   (sepet)
     button.js-yan-kapat  13x22   (yan paneli kapat)
     bağlantılar          23px yüksek
     li.rozet span        11.5px

   PC'YE DOKUNULMUYOR: kurallar 860px altında.
   ============================================================ */
@media (max-width: 860px) {
  .rozet span, li.rozet span { font-size: 12.5px; }

  /* Üst çubuk: menü, dil, hesap, sepet — dördü de parmakla basılıyor. */
  .menu__acici,
  .js-yan-ac,
  .js-yan-kapat { min-width: 44px; min-height: 44px; display: inline-flex;
                  align-items: center; justify-content: center; }

  /* Üst çubuk araçları (TR, Hesabım) ve liste bağları 20-23px'ti.
     Hepsi <li> icindeki <a>; tek kural yetiyor. */
  .header__arac > a { min-width: 44px; min-height: 44px;
                      display: inline-flex; align-items: center; justify-content: center; }
  li > a { display: inline-flex; align-items: center; min-height: 44px; }
  /* "Koleksiyona bak" gibi metin baglari: .oku sarmalayicisi var. */
  a:has(> .oku), .oku { display: inline-flex; align-items: center; min-height: 44px; }

  /* Düğmeler 42px'te kalmıştı; iki piksel eksik kalmasın. */
  .dugme { min-height: 44px; }
  .dugme--kucuk { font-size: 12.5px; }

  /* SEPET SAYFASI (olculdu: 375x812)
       adet dugmeleri 35x35, adet kutusu 33x15, sil dugmesi 13x22
     Sepette yanlis yere basmak siparisi bozar; en genis hedefler
     burada olmali. */
  .sepet-sira__sil { min-width: 44px; min-height: 44px; }
  .sepet-sira button { min-width: 44px; min-height: 44px; }
  .sepet-sira input { min-height: 44px; }

  /* Icerik ustundeki "Ana sayfa" kirintisi 51x18'di. */
  .kirinti a, .geri-bag { display: inline-flex; align-items: center; min-height: 44px; }
}