/* ==========================================================================
   BİLEŞEN — ÜRÜN DETAY PANELİ
   Masaüstünde sağdan açılan beyaz panel, mobilde alttan çıkan sayfa.
   Solda görsel + tanıtım, sağda seçenekler ve sabit sepete ekleme çubuğu.
   ========================================================================== */

/* ORTALAMA FLEX ILE YAPILIR, `top:50%` + `translate(-50%,-50%)` ILE DEGIL.

   OLCULEN KUSUR: kutunun yuksekligi icerikle degisiyor (secenek secince
   yeniden duzenleniyor) ve yuzde-tabanli ortalama, degisen yukseklikte
   kutunun kendi cercevesi ile cocuklarinin cercevesini AYRISTIRIYORDU.
   Olculdu: bir secim sonrasi kutu `top: 43` gorunurken bastan alt cubuga
   kadar BUTUN cocuklar 789 piksel yukarida kaliyor ve `overflow: hidden`
   onlari kirpiyordu -- ekranda bos beyaz bir kutu.

   Flex ortalamada kutunun konumu yuksekligin bir fonksiyonu degildir;
   icerik degistiginde kap yeniden ortalar ve ayrisacak bir sey kalmaz. */
.mu-udetay {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.mu-udetay.is-acik { visibility: visible; pointer-events: auto; }

.mu-udetay__perde {
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 51, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-3) var(--e-std);
}
.mu-udetay.is-acik .mu-udetay__perde { opacity: 1; }

/* Ürün açıklaması ekranın ortasında açılan bir popup'tır; yan panel değil.
   Böylece sağ kenar sepet çekmecesine kalır, ikisi çakışmaz. */
.mu-udetay__kutu {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  /* `clip`, `hidden`den farkli olarak KAYDIRMA KABI YARATMAZ: tarayici
     odaklanan bir ogeyi gostermek icin bu kutuyu kaydiramaz. Tek basina
     yukaridaki duzeltme yeterli, ama kabuk hicbir kosulda kaymamali. */
  overflow: clip;
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--t-2) var(--e-std), transform var(--t-3) var(--e-cik);
  overscroll-behavior: contain;
}
.mu-udetay.is-acik .mu-udetay__kutu {
  opacity: 1;
  transform: scale(1);
}

.mu-udetay__kapat {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--cizgi);
  color: var(--metin-2);
  box-shadow: var(--sh-1);
  transition: background var(--t-2), color var(--t-2);
}
.mu-udetay__kapat:hover { background: #fff; color: var(--kirmizi-500); }
.mu-udetay__kapat .mu-ikon { width: 18px; height: 18px; }

.mu-udetay__tutamac { display: none; }

/* ---------------------------------------------------------- medya şeridi */
/* KAYDIRMA CSS ILE: `scroll-snap` dokunmatikte kendiliğinden çalışır ve
   klavyeyle de gezilebilir. Bir slayt kütüphanesi eklemek, projenin
   "yeni CSS/JS framework eklenmez" kuralını çiğnerdi. */
.mu-medya { position: relative; }
.mu-medya__seri {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* YUMUŞAK KAYDIRMA (scroll-behavior) BİLEREK YOK.

     Ölçüldü: yumuşak kaydırma bu ortamda şeridi HİÇ kaydırmıyor
     (`scrollLeft` 0'da kalıyor); anında kaydırma çalışıyor. Aynı şey
     `prefers-reduced-motion` açık her kullanıcıda olurdu ve oklar hiçbir şey
     yapmayan düğmelere dönerdi.

     Doğrulayamadığım bir süslemeye, her yerde çalışan bir düğmeyi feda
     etmiyorum. Dokunmatikte parmakla kaydırma zaten akıcı. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mu-medya__seri::-webkit-scrollbar { display: none; }
.mu-medya__oge {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  background: var(--yuzey-2);
}
.mu-medya__oge img,
.mu-medya__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-medya__video { background: #000; object-fit: contain; }

.mu-medya__ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--cizgi);
  color: var(--metin-2);
  box-shadow: var(--sh-1);
  transition: background var(--t-2), color var(--t-2);
}
.mu-medya__ok:hover { background: #fff; color: var(--kirmizi-500); }
.mu-medya__ok .mu-ikon { width: 16px; height: 16px; }
.mu-medya__ok--sol { left: 10px; }
.mu-medya__ok--sag { right: 10px; }

/* OKLAR DOKUNMATIKTE GIZLI: parmakla kaydırmak zaten çalışıyor ve iki
   düğme görselin üstünü kaplıyordu. */
@media (hover: none) {
  .mu-medya__ok { display: none; }
}

.mu-medya__noktalar {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
}
.mu-medya__nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(11, 29, 51, .25);
  transition: background var(--t-2), transform var(--t-2);
}
.mu-medya__nokta.is-aktif { background: #fff; transform: scale(1.35); }

/* ----------------------------------------------------------- sabit başlık */
/* Kaydırma alanının DIŞINDA: ürünün adı ve fiyatı seçenekler arasında
   gezinirken de görünür kalır. */
.mu-udetay__baslik {
  flex: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  padding-right: 62px;               /* kapatma düğmesine yer */
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey);
}
.mu-udetay__baslik:empty { display: none; }

/* --------------------------------------------------------------- üst blok */
.mu-udetay__sol { flex: none; }

/* GÖRSEL KUTUNUN TAMAMINI KAPLAR.

   ÖLÇÜLEN KUSUR: `aspect-ratio: 16/9` ile `max-height` birlikte
   veriliyordu ve yükseklik sınırı kazanınca genişlik oranı korumak için
   düşüyordu — 620px'lik kutuda görsel 512px kalıyor, sağda 108px beyazlık
   oluyordu (ölçüldü). Yükseklik doğrudan verilir, kırpmayı `object-fit`
   yapar; oran artık genişliği belirlemiyor. */
.mu-udetay__gorsel {
  position: relative;
  width: 100%;
  height: min(300px, 32vh);
  background: var(--yuzey-2);
  overflow: hidden;
}
.mu-udetay__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.mu-udetay__gorsel-rozet { position: absolute; top: 14px; left: 16px; }

.mu-udetay__bas { padding: var(--sp-5) var(--sp-5) 0; display: grid; gap: 5px; }
.mu-udetay__kat {
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--kirmizi-500);
}
.mu-udetay__ad { font-size: var(--fs-h3); line-height: 1.22; }
.mu-udetay__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px;
  font-size: var(--fs-xs);
  color: var(--metin-3);
  margin-top: 3px;
}
.mu-udetay__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.mu-udetay__meta .mu-ikon { width: 13px; height: 13px; }

.mu-udetay__aciklama {
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: var(--fs-sm);
  line-height: 1.68;
  color: var(--metin-2);
}
.mu-udetay__bilgi-blok h3 {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: 8px;
}
.mu-udetay__etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-udetay__etiket {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--metin-2);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-pill);
  padding: 4px 11px;
}
.mu-udetay__etiket--alerjen { border-color: rgba(232, 162, 0, .45); color: var(--altin-700); }

/* --------------------------------------------------------- seçenek alanı */
/* Popup'ın tek kaydırma alanı: görsel, başlık ve seçenekler birlikte kayar. */
.mu-udetay__kaydir {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mu-udetay__secimler { padding: var(--sp-5); display: grid; gap: var(--sp-5); }

.mu-ops-grup { display: grid; gap: 10px; }
.mu-ops-grup__bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.mu-ops-grup__ad { font-size: var(--fs-md); font-weight: 800; color: var(--metin); }
.mu-ops-grup__kural {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--metin-3);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xs);
  padding: 4px 9px;
  white-space: nowrap;
}
.mu-ops-grup__kural--istege { border-style: dashed; }
.mu-ops-grup__kural--zorunlu { color: var(--kirmizi-500); border-color: rgba(225, 6, 0, .3); background: var(--kirmizi-sis); }
.mu-ops-grup__yardim { font-size: var(--fs-xs); color: var(--metin-3); }
.mu-ops-grup.is-eksik .mu-ops-grup__ad { color: var(--kirmizi-500); }

.mu-ops-liste { display: grid; gap: 8px; }
.mu-ops-liste--iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mu-ops {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--yuzey);
  cursor: pointer;
  transition: border-color var(--t-2), background var(--t-2);
}
.mu-ops:hover { border-color: var(--cizgi-koyu); }
/* ETIKET KONUMLANDIRILMIS OLMAK ZORUNDA -- OLCULEN KUSURUN KOKU.

   Gorsel olarak gizlenen `input` `position: absolute` ve etiketinde
   `position: relative` YOKTU. Bu yuzden her secenek girdisi kendi
   etiketinden kacip MODAL KUTUSUNA gore konumlaniyordu: kutunun
   `scrollHeight` degeri 614 yerine 2025 cikiyordu (olculdu).

   Bir secenege tiklanip o girdi odaklaninca tarayici onu gorunur kilmak
   icin kutuyu 790 piksel kaydiriyor, `overflow: hidden` kutular kullanici
   tarafindan geri kaydirilamadigi icin popup BOS kaliyordu. */
.mu-ops { position: relative; }
.mu-ops input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-ops__isaret {
  width: 20px; height: 20px;
  flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: 50%;
  color: transparent;
  transition: all var(--t-2) var(--e-std);
}
.mu-ops__isaret .mu-ikon { width: 12px; height: 12px; }
.mu-ops--coklu .mu-ops__isaret { border-radius: 5px; }
.mu-ops__govde { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mu-ops__ad { font-size: var(--fs-sm); font-weight: 700; color: var(--metin); }
.mu-ops__detay { font-size: var(--fs-xs); color: var(--metin-3); }
.mu-ops__fark {
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--metin-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mu-ops:has(input:checked) {
  border-color: var(--kirmizi-500);
  background: var(--kirmizi-sis);
}
.mu-ops:has(input:checked) .mu-ops__isaret {
  background: var(--kirmizi-500);
  border-color: var(--kirmizi-500);
  color: #fff;
}
.mu-ops:has(input:checked) .mu-ops__fark { color: var(--kirmizi-500); }
.mu-ops:has(input:focus-visible) { outline: 3px solid rgba(225, 6, 0, .4); outline-offset: 2px; }
.mu-ops:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Tamamlayıcı ürünler */
.mu-udetay__tamamlayici { display: grid; gap: 10px; }
.mu-yanina { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mu-yanina::-webkit-scrollbar { display: none; }
.mu-yanina__oge {
  flex: none;
  width: 128px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--yuzey);
  text-align: left;
  transition: border-color var(--t-2), transform var(--t-2) var(--e-cik);
}
.mu-yanina__oge:hover { border-color: var(--kirmizi-500); transform: translateY(-2px); }
.mu-yanina__oge img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-xs);
  background: var(--yuzey-2);
}
.mu-yanina__govde { display: grid; gap: 2px; }
.mu-yanina__ad { font-size: var(--fs-xs); font-weight: 700; color: var(--metin); line-height: 1.3; }
.mu-yanina__fiyat { font-size: var(--fs-xs); font-weight: 800; color: var(--kirmizi-500); }
.mu-yanina__oge.is-eklendi { border-color: var(--basari-500); background: var(--basari-sis); }

/* --------------------------------------------------------- ad altı fiyat */
.mu-udetay__fiyat { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 6px; }
.mu-udetay__fiyat-deger { font-size: 1.35rem; }
.mu-udetay__fiyat-eski {
  font-size: var(--fs-sm);
  color: var(--metin-3);
  text-decoration: line-through;
}

/* ------------------------------------------------- çıkarılabilir malzeme */
.mu-malzeme-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.mu-malzeme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 99px;
  background: var(--yuzey);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--metin-2);
  transition: border-color var(--t-2), background var(--t-2), color var(--t-2);
}
.mu-malzeme:hover { border-color: var(--cizgi-koyu); }
.mu-malzeme__isaret { display: none; }
.mu-malzeme__isaret .mu-ikon { width: 12px; height: 12px; }

/* ÇIKARILDI: üstü çizili ve kırmızı — "artık bunu istemiyorum". Yalnız
   soluklaştırmak, dokunulmamış bir malzemeden ayırt edilemezdi. */
.mu-malzeme[aria-pressed="true"] {
  border-color: var(--kirmizi-500);
  background: var(--kirmizi-sis, rgba(214, 40, 57, .08));
  color: var(--kirmizi-600, var(--kirmizi-500));
}
.mu-malzeme[aria-pressed="true"] .mu-malzeme__ad { text-decoration: line-through; }
.mu-malzeme[aria-pressed="true"] .mu-malzeme__isaret { display: inline-flex; }

/* ------------------------------------------------------------- alt çubuk */
/* TEK SATIR: solda adet ve toplam, sağda düğme. Üç satır alt alta
   dizildiğinde çubuk gereksiz yükseliyor ve kutunun `max-height` sınırı
   altında kaydırma alanından yer çalıyordu. */
.mu-udetay__alt {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--cizgi);
  background: var(--yuzey);
  box-shadow: 0 -6px 22px -16px rgba(11, 29, 51, .4);
}
.mu-udetay__alt-sol { display: flex; align-items: center; gap: var(--sp-3); }
.mu-udetay__toplam { display: grid; gap: 1px; }
.mu-udetay__toplam-etiket { font-size: var(--fs-xs); color: var(--metin-3); font-weight: 700; }
.mu-udetay__toplam-deger { font-size: 1.5rem; }
.mu-udetay__alt .mu-btn { width: 100%; }
.mu-udetay__alt .mu-btn b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, .34);
}
.mu-udetay__alt .mu-adet { justify-self: start; }

/* DAR EKRANDA İKİ SATIR: tek satırda düğme okunamayacak kadar daralırdı. */
@media (max-width: 420px) {
  .mu-udetay__alt { grid-template-columns: 1fr; }
  .mu-udetay__alt-sol { justify-content: space-between; }
}
.mu-udetay__not { display: grid; gap: 6px; }

/* ------------------------------------------------------------- mobil sayfa */
@media (max-width: 620px) {
  /* MOBILDE ALTTAN CIKAR: kutu artik `position: relative` oldugu icin
     konum `inset` ile degil, kabin hizalamasiyla verilir. */
  .mu-udetay { align-items: flex-end; }
  .mu-udetay__kutu {
    width: 100%;
    max-height: 94vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    opacity: 1;
    transform: translateY(102%);
  }
  .mu-udetay.is-acik .mu-udetay__kutu { transform: none; }
  .mu-udetay__tutamac {
    display: block;
    width: 44px; height: 4px;
    border-radius: 2px;
    background: var(--cizgi-koyu);
    margin: 9px auto 0;
    position: relative;
    z-index: 3;
  }
  .mu-udetay__gorsel { aspect-ratio: 16 / 8; }
  .mu-udetay__kapat { top: 10px; right: 10px; }
  .mu-ops-liste--iki { grid-template-columns: 1fr; }
}

/* ALERJEN UYARISI (B-101, Sprint 39): popup içinde, listenin altında duran
   ince uyarı satırı. Satır içi biçemle yazılıyordu.

   RENK DÜZELTİLDİ: satır içi biçem `var(--krem-500)` diyordu ve BÖYLE BİR
   BELİRTEÇ YOK — tanımsız bir değişken sessizce boş değer üretir, yani uyarı
   satırı rengini gövdeden miras alıyordu. Satır içi biçem hiçbir kapının
   bakmadığı yerdi; sınıfa taşınır taşınmaz
   `VitrinSinifSozlesmesiTests.KullanilanHerCssDegiskeni_Tanimli` onu yakaladı.
   Popup'ın öteki ikincil metinleri `--metin-3` kullanıyor. */
.mu-udetay__alerjen-not {
  font-size: .75rem;
  color: var(--metin-3);
  margin-top: 9px;
  line-height: 1.5;
}