/* ==========================================================================
   ALBIM — üst başlık (header)

   Üç katman:
     1  Hizmet şeridi     36 px   moda duyarlı mesaj + kurumsal + dil
     2  Ana satır         72 px   logo · arama · mod seçici · hesap/sepet
     3  Gezinti şeridi    48 px   kategoriler ⇄ kamyon ekranları

   Kaydırıldığında 1 ve 3 gizlenir, 2 daralıp (64 px) yapışır.
   Mobilde hizmet şeridi hiç yoktur; mod seçici tam genişlik şerittir.
   ========================================================================== */

.albim-baslik {
  position: relative;
  z-index: 50;
  background: var(--zemin-sayfa);
}

/* İçeriğe atla — ilk odaklanılabilir öğe */
.albim-atla {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
  border-radius: var(--kose);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  text-decoration: none;
  transition: transform var(--gecis);
}
.albim-atla:focus { transform: translate(-50%, 0); text-decoration: none; }

/* ==========================================================  1 · HİZMET ŞERİDİ */

.albim-hizmet {
  height: 36px;
  background: var(--zemin-serit);
  border-bottom: 1px solid var(--cizgi-ince);
  font-size: var(--fs-2xs);
  color: var(--renk-govde);
}
.albim-hizmet__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  height: 36px;
}

.albim-hizmet__sol {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.albim-hizmet__sol .albim-ikon { color: var(--albim-bakir); flex: none; }
.albim-hizmet__ayrac { color: var(--cizgi-belirgin); }

.albim-hizmet__sag {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  flex: none;
}
.albim-hizmet__sag a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Serit 36 px kalmali ama dokunma alani 44 px olmali: dolgu buyutulup
     ayni kadar negatif kenar bosluguyla geri aliniyor. Hedef alan tasar,
     seridin yuksekligi degismez. */
  padding-block: 13px;
  margin-block: -13px;
  color: var(--renk-govde);
  text-decoration: none;
}
.albim-hizmet__sag a:hover { color: var(--renk-murekkep); text-decoration: underline; }

/* Dil anahtarı — iki kod da görünür, aktif olan kalın */
.albim-dil { display: inline-flex; align-items: center; gap: 2px; }
.albim-dil__kod {
  padding: 13px 5px;
  margin-block: -13px;
  color: var(--renk-soluk);
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.albim-dil__kod.aktif { color: var(--renk-murekkep); font-weight: var(--fw-kalin); cursor: default; }
.albim-dil__ayrac { color: var(--cizgi-belirgin); }

/* ============================================================  2 · ANA SATIR */

/*
 * ALT KENAR GORUNUR OLMALI — "kesilme" sikayetinin gercek sebebi buydu.
 *
 * Cubuk yapiskan; basligin kendi icerigi (mod satiri, kategori seridi)
 * altindan kayarak geciyor ve kesiliyor. Kesilmenin kendisi normal, ama
 * T'nin olcumu sorunun baska yerde oldugunu gosterdi: cubugun zemini
 * #FAF6F1, mod satirinin zemini #FFFFFF, aradaki oran 1,076:1 — yani
 * SINIR GORUNMUYOR. Kesilen kutunun cercevesi ise 16,58:1.
 * T'nin ifadesiyle: "keskin bir kutu gorunmez bir bicakla kesiliyor."
 *
 * Sinir gorunur olunca ayni kesilme "bir seyin altindan kayiyor" diye
 * okunuyor, "bozuk" diye degil. Ekran maliyeti 0 piksel: cizgi zaten vardi,
 * yalniz rengi degisti (--cizgi-ince 1,25:1 -> 3,46:1 beyaza karsi).
 *
 * Renk uydurulmadi: --renk-soluk ile sayfa zemininin karisimi.
 */
.albim-ana {
  background: var(--zemin-sayfa);
  /* Iki satir, sirasi onemli: color-mix desteklenmeyen bir tarayicida
     (eski iOS Safari) ikinci satir GECERSIZ sayilip tamamen dusuyor ve
     geriye border-bottom HIC KALMIYOR — yani bugun duzelttigim "gorunmez
     sinir" sorunu aynen geri geliyordu. Ilk satir o durumda devrede kalir.
     Degeri uydurmadim: color-mix'in urettigi rengi ekrandan olctum,
     rgb(146,136,131) = #928883, beyaza karsi 3,46:1. */
  border-bottom: 1px solid #928883;
  border-bottom: 1px solid color-mix(in srgb, var(--renk-soluk) 80%, var(--zemin-sayfa));
}
.albim-ana__ic {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  min-height: 72px;
  transition: min-height var(--gecis);
}

.albim-marka { flex: none; display: inline-flex; align-items: center; }
.albim-marka img, .albim-marka svg { display: block; height: 34px; width: auto; }

.albim-ana__orta {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.albim-ana__eylem {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  flex: none;
}

.albim-eylem {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding-inline: 10px;
  border-radius: var(--kose);
  color: var(--renk-murekkep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.albim-eylem:hover { background: var(--zemin-serit); text-decoration: none; }
.albim-eylem__ad { white-space: nowrap; }

/* Sepet sayacı — 0'da gizli */
.albim-sayac,
.albim-sepet-btn__adet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  background: var(--albim-kirmizi);
  color: var(--uzeri-kirmizi);
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-kalin);
  font-variant-numeric: tabular-nums;
}
.albim-sayac[hidden],
.albim-sepet-btn__adet[hidden] { display: none !important; }

/* Favori noktası — sayı yok, yalnızca doluluk işareti */
.albim-nokta {
  position: absolute;
  top: 9px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: var(--albim-kirmizi);
  border-radius: 50%;
}

/* ==========================================================  ARAMA (§4) */

.albim-arama {
  position: relative;
  flex: 1 1 560px;
  max-width: 560px;
  min-width: 0;
}
.albim-arama__alan {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--yukseklik-form);
  padding-inline: 14px;
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi-belirgin);
  border-radius: var(--kose);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.albim-arama:focus-within .albim-arama__alan {
  border-color: var(--albim-kirmizi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--albim-kirmizi) 14%, transparent);
}
.albim-arama input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--yazi-govde);
  font-size: var(--fs-sm);
  color: var(--renk-murekkep);
}
.albim-arama input:focus { outline: none; }
/* Chrome kendi temizleme düğmesini basıyor; bizimkiyle iki çarpı çıkıyordu */
.albim-arama input::-webkit-search-cancel-button,
.albim-arama input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.albim-arama__ikon { color: var(--renk-soluk); flex: none; }
.albim-arama__sil {
  flex: none;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--renk-soluk);
  cursor: pointer;
  line-height: 1;
}

/* Öneri paneli */
.albim-oneri {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--a-2);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  box-shadow: 0 16px 44px rgb(36 29 27 / 14%);
}
.albim-oneri[hidden] { display: none !important; }

.albim-oneri__baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--renk-soluk);
}
.albim-oneri__temizle {
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--renk-soluk);
  font-size: var(--fs-2xs);
  text-decoration: underline;
  cursor: pointer;
}
.albim-oneri ul { list-style: none; margin: 0; padding: 0; }

.albim-oneri a,
.albim-oneri__gecmis {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--kose-kucuk);
  color: var(--renk-murekkep);
  font-family: var(--yazi-govde);
  font-size: var(--fs-xs);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.albim-oneri a:hover,
.albim-oneri__gecmis:hover,
.albim-oneri .secili { background: var(--zemin-serit); text-decoration: none; }

.albim-oneri__gorsel {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--zemin-serit);
  border-radius: var(--kose-kucuk);
}
.albim-oneri__ad { flex: 1; min-width: 0; }
.albim-oneri__ad strong { display: block; font-weight: var(--fw-orta); }
.albim-oneri__ad span { color: var(--renk-soluk); font-size: var(--fs-2xs); }
.albim-oneri__fiyat { flex: none; font-weight: var(--fw-kalin); }

.albim-oneri__alt {
  margin-top: 4px;
  padding-top: var(--a-2);
  border-top: 1px solid var(--cizgi-ince);
}
.albim-oneri__alt a { color: var(--albim-kirmizi); font-weight: var(--fw-kalin); }
.albim-oneri__bos { padding: var(--a-3) 10px; color: var(--renk-govde); font-size: var(--fs-xs); }

/* ------------------------------------------- yapışık çubuktaki mod etiketi

   Çubuğun ortası bugüne kadar boştu (ölçüldü: 591 pikselde 349, 390 pikselde
   148 piksel). Seçili teslimat modu yalnızca sayfanın en üstündeki 64
   piksellik satırda görünüyordu; ziyaretçi sayfaların %98,6'sında hangi
   modda olduğunu göremiyordu — oysa fiyat ve sepet davranışı ona bağlı.

   scrollY = 0'da gizli: orada tam satır zaten duruyor, ikisi tekrar olurdu.
   Yalnızca dar ekranlarda: geniş ekranda çubuğun ortasında arama kutusu ve
   masaüstü mod seçici var, boş alan yok. */
.albim-mod-etiket { display: none; }

/* Ust sinir 899, 939 degil. Olctum: cubugun ortasindaki kap (.albim-ana__orta)
   bos alani emiyor ve 900 pikselden itibaren arama kutusu orada aciliyor -
   yani "cubugun bos ortasi" varsayimi orada gecerli degil, etiket 79 piksele
   sikisip kirpiliyordu. */
@media (max-width: 899px) {
  .albim-baslik[data-yapisik] .albim-mod-etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-inline: var(--a-2);
    padding: 5px 10px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin-yuzey);
    font-size: var(--fs-2xs);
    color: var(--renk-govde);
    white-space: nowrap;
  }

  .albim-mod-etiket__ikon { display: inline-flex; flex: none; color: var(--albim-kirmizi); }

  /* Sığmazsa yazı kısalır, ikon kalır: etiketin taşıyıp düzeni bozması
     yerine az bilgi göstermek daha iyi. */
  .albim-mod-etiket__yazi {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* 375 ve altinda yalniz ikon. Olctum: orada yaziya 46 piksel kaliyor, "Eve
   teslimat" 67 piksel istiyor - yani her halukarda kirpilirdi. Yarim kelime
   gostermektense ikon birakmak daha durust; T'nin verdigi yedek de buydu. */
/*
 * SINIR 375'TEN 430'A CIKTI (8 Eylul 2026, Kral "ikonlar yamuk" dedi).
 * 376-430 px arasi telefonlarda yazi siğiyor gorunuyordu ama kirpiliyor,
 * rozet de hap seklinde kalip ikonu kenara dayiyordu. Bu araliktaki
 * telefonlar bugun en yaygin olanlar. Yazi yerine tam daire + ortalanmis
 * ikon: az bilgi, duzgun gorunum.
 */
@media (max-width: 430px) {
  .albim-mod-etiket__yazi { display: none; }
  /*
   * YAZI GIZLENINCE TAM DAIRE (8 Eylul 2026, Kral bildirdi: "ev simgesi
   * yuvadan tasiyor"). Once yalniz yan dolgu kisiltiliyordu; kalan kutu
   * dikdortgen kaliyor, 999px kose yaricapiyla hap seklinde goruntuluyor
   * ve icindeki ikon kenara dayaniyordu. Sabit kare olcu + ortalama ile
   * ikon gercekten ortada duruyor.
   */
  .albim-baslik[data-yapisik] .albim-mod-etiket {
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
    flex: none;
  }
  .albim-mod-etiket__ikon svg { width: 18px; height: 18px; }

  /*
   * DAIRENIN ICINDE KALMA GARANTISI (8 Eylul 2026).
   *
   * Yukarisi ikonu ortaliyor ama bir gun baska bir ikon eklenirse ya da
   * yazi tipi olcegi buyurse yine tasabilir. Bunlar o ihtimali kapatiyor:
   * kutu buyumez (flex:none zaten var), icerik tasarsa kirpilir, ikon
   * kabinin tamamini kaplar ve icinde ortalanir.
   */
  .albim-baslik[data-yapisik] .albim-mod-etiket { overflow: hidden; }
  .albim-mod-etiket__ikon {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}

/* =======================================================  3 · MOD SEÇİCİ (§3) */

.albim-mod {
  display: flex;
  flex: none;
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--kose);
  background: var(--zemin-yuzey);
  overflow: hidden;
}

.albim-mod__sec {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 200px;
  min-height: 52px;
  padding: 8px 13px;
  border: 0;
  border-inline-start: 1px solid var(--cizgi-ince);
  background: none;
  color: var(--renk-murekkep);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--gecis);
}
.albim-mod__sec:first-child { border-inline-start: 0; }
.albim-mod__sec:hover { background: var(--zemin-serit); text-decoration: none; }

.albim-mod__ikon { flex: none; color: var(--renk-govde); }

.albim-mod__yazi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.albim-mod__ad {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  line-height: 1.25;
}
/* 12 px açıklama gövde renginde — soluk renk bu boyutta AA'yı geçmiyor */
.albim-mod__alt {
  font-size: var(--fs-2xs);
  color: var(--renk-govde);
  line-height: 1.3;
}

/* Aktif: dolgu + 2 px koyu çerçeve + nokta + kalın başlık.
   Üçü birden değişir ki renk görülmeden de anlaşılsın. */
.albim-mod__sec[aria-checked="true"] {
  background: var(--zemin-serit);
  box-shadow: inset 0 0 0 2px var(--renk-murekkep);
}
.albim-mod__sec[aria-checked="true"] .albim-mod__ad { font-weight: var(--fw-kalin); }
.albim-mod__sec[aria-checked="true"] .albim-mod__ikon { color: var(--renk-murekkep); }

.albim-mod__isaret {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--renk-murekkep);
}
.albim-mod__sec[aria-checked="false"] .albim-mod__isaret { display: none; }

.albim-mod__sec:focus-visible {
  outline: 2px solid var(--albim-kirmizi);
  outline-offset: 2px;
}

/* Canlı nokta — kamyon şu an yoldayken */
.albim-mod__canli {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--albim-kirmizi);
}
.albim-mod__canli::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--albim-kirmizi);
  opacity: .5;
  animation: albim-nabiz 2s ease-out infinite;
}
@keyframes albim-nabiz {
  0%   { transform: scale(.7); opacity: .6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Yeni rozeti — bakır çerçeve, yapılandırmayla kaldırılabilir */
.albim-mod__yeni {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--albim-bakir);
  border-radius: 999px;
  color: var(--albim-bakir);
  font-size: 10px;
  font-weight: var(--fw-kalin);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Daralmış (yapışık) hâl — yalnız ikon + başlık */
.albim-baslik[data-yapisik] .albim-mod__sec { min-width: 0; min-height: 40px; padding-inline: 12px; }
.albim-baslik[data-yapisik] .albim-mod__alt { display: none; }

/* ====================================================  4 · GEZİNTİ ŞERİDİ */

.albim-gezinti {
  background: var(--zemin-sayfa);
  border-bottom: 1px solid var(--cizgi-ince);
}
.albim-gezinti__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  min-height: 48px;
}
/* Kaydığını belli eden solma maskesi. Yalnızca o yönde gerçekten içerik
   kaldıysa uygulanıyor (JS data-kayar yazıyor): sona gelince sağdaki solma
   kayboluyor, yani maske "daha var" demenin görsel karşılığı oluyor. */
.albim-gezinti__ic[data-kayar~="sag"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}
.albim-gezinti__ic[data-kayar~="sol"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent 100%);
}
.albim-gezinti__ic[data-kayar~="sol"][data-kayar~="sag"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.albim-gezinti ul {
  display: flex;
  align-items: center;
  gap: var(--a-4);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.albim-gezinti a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--renk-murekkep);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.albim-gezinti a:hover { border-bottom-color: var(--renk-murekkep); text-decoration: none; }
.albim-gezinti a[aria-current] { font-weight: var(--fw-kalin); border-bottom-color: var(--renk-murekkep); }

/* Fırsatlar — indirimlerin tek adresi, bakır. Asla yanıp sönmez. */
.albim-gezinti .albim-firsat { color: var(--albim-bakir); }
.albim-gezinti .albim-firsat:hover,
.albim-gezinti .albim-firsat[aria-current] { border-bottom-color: var(--albim-bakir); }

.albim-gezinti__sag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--albim-kirmizi);
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
  text-decoration: none;
  white-space: nowrap;
}
.albim-gezinti__sag:hover { text-decoration: underline; }

.albim-canli-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--albim-kirmizi);
}

/* ======================================================  YAPIŞIK DAVRANIŞ (§6) */

.albim-baslik[data-yapisik] .albim-ana {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  box-shadow: 0 6px 20px rgb(36 29 27 / 8%);
}
.albim-baslik[data-yapisik] .albim-ana__ic { min-height: 64px; }
.albim-baslik[data-yapisik] .albim-hizmet { display: none; }
/* Gezinti şeridi artık toplanmıyor: ölçüldü, toplandığı noktada zaten
   ekranda görünmüyordu (0 px) ve gizlenmesi sayfayı 46 px zıplatıyordu.
   Ayrıntı baslik.js içinde. */

/* Yapışıkken içerik zıplamasın */
.albim-baslik[data-yapisik] { padding-top: 64px; }

@media (prefers-reduced-motion: reduce) {
  .albim-ana__ic { transition: none; }
  .albim-mod__canli::after { animation: none; }
}

/* Mod seçici iki kopya halinde basılır: biri ana satırda (masaüstü), biri
   kendi şeridinde (mobil). Görünmeyen kopya display:none olduğu için
   erişilebilirlik ağacında da yer almaz — ekran okuyucu tek seçici görür. */
.albim-mod-satir { display: none; }

/* ==============================================================  MOBİL (§7) */

.albim-menu-btn,
.albim-arama-btn { display: none; }

@media (max-width: 899px) {

  /* Hizmet şeridi mobilde yok — soğuk zincir sözü anasayfada duruyor,
     kurumsal bağlantılar ve dil menüye taşındı. */
  .albim-hizmet { display: none; }

  .albim-menu-btn,
  .albim-arama-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--kose);
    color: var(--renk-murekkep);
    cursor: pointer;
  }

  .albim-ana { position: sticky; top: 0; z-index: 55; }
  .albim-ana__ic { min-height: 56px; gap: 4px; }
  .albim-marka { margin-inline: auto; }
  .albim-marka img, .albim-marka svg { height: 28px; }

  /* Arama alanı ve masaüstü eylemleri gizli; sepet kalır */
  .albim-arama { display: none; }
  .albim-eylem__ad { display: none; }
  .albim-eylem--favori { display: none; }

  /*
   * HESAP MOBILDE DE DURUYOR - AMA ANCAK GIRISLIYSE.
   *
   * Eskiden burada .albim-eylem--hesap da display:none idi; telefondan
   * bakan bir musteri, profili acik olsa bile ust barda hicbir taninma
   * isareti gormuyordu. Kralin "profilden kopuyorsun" dedigi sey buydu.
   *
   * Girisli DEGILSE gizli kaliyor: dar serit ve "Giris yap" zaten
   * hamburger menude var. Yani mobilde bir sey eklemis olmuyoruz,
   * yalnizca girisliye adini gosteriyoruz.
   */
  .albim-eylem--hesap:not(.albim-eylem--adli) { display: none; }

  .albim-eylem--adli .albim-eylem__ad {
    display: inline;
    max-width: 9ch;              /* dar seride sigmayan ad seridi bozmasin */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs);
  }

  .albim-eylem--adli { gap: 4px; }

  /* Mod seçici tam genişlik şerit — yapışmaz, sayfa başında durur.
     Kurallar kopya bazında yazılıyor: genel .albim-mod seçicisi masaüstü
     kopyasının display:none'ını eşit özgüllükle ezerdi. */
  .albim-mod--masaustu { display: none; }

  .albim-mod-satir {
    display: block;
    border-bottom: 1px solid var(--cizgi-ince);

  }
  /*
   * KUTU SABIT DEGIL, EN AZ 64 PIKSEL (9 Eylul 2026).
   *
   * Onceden `height: 64px` idi ve ust kutuda `overflow: hidden` var.
   * Turkce metinle sorun cikmiyordu: "Kamyondan Al" iki satira sigiyor.
   * Fransizca ceviri gelince olctum: "Retrait au camion" UC satira
   * dusuyor, 64 piksele sigmiyor ve KIRPILIYOR - ustte kelimenin yarisi
   * kesiliyor, alttaki "Le jour du passage : gratuit" kutunun disina
   * tasiyor, "NOUVEAU" rozeti yazinin ustune biniyor. 360 pikselde bile.
   *
   * Metni kisaltmak bunu cozmezdi, yalnizca bugunku belirtiyi orterdi:
   * yarin baska bir dil ya da daha uzun bir karsilik ayni yerden kirardi.
   * O yuzden sebebi duzeltiyoruz - kutu icerigi kadar buyusun.
   *
   * `overflow` da aciliyor: mobilde kose yuvarlamasi zaten yok
   * (border-radius: 0), yani ust kutudaki `hidden` burada yalnizca
   * kirpmaya yariyordu.
   */
  .albim-mod--mobil {
    display: flex;
    width: 100%;
    min-height: 64px;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .albim-mod--mobil .albim-mod__sec {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 64px;
    padding: 8px 12px;
  }
  /* Ad ile rozet yan yana sigmiyorsa rozet alt satira dussun - yatay
     tasip kirpilmasindansa bir satir daha yer kaplasin. */
  .albim-mod--mobil .albim-mod__ad { flex-wrap: wrap; }
  .albim-mod--mobil .albim-mod__ikon svg { width: 18px; height: 18px; }

  /*
   * SECILI DURUM MOBILDE SEKME GIBI (#151, Kral fotografi).
   *
   * Masaustunde secili secenek dort tarafini saran 2 px'lik bir cerceve
   * (inset box-shadow) tasiyor. Mobilde satir EKRANDAN EKRANA uzandigi
   * icin o cercevenin sag kenari tam ekran sinirina denk geliyor ve kutu
   * KAPANMIYOR gibi gorunuyordu - iki secenek de "yarim kart" gibi
   * okunuyordu; Kral'in "kesik" dedigi buydu.
   *
   * NEDEN KENAR PAYI DEGIL: once satira sayfa payi (24 px) verdim, kutular
   * kapandi ama 360 px'te yer kalmadi - "Kamyondan Al" iki satira dustu ve
   * "YENI" rozeti kirpildi. Olctum, geri aldim.
   *
   * Sekme cozumu yatay yer HARCAMIYOR: cerceve kalkiyor, secili olan ust
   * kenarindaki kalin cizgi ve zeminiyle belli oluyor. Tam genislikte
   * segment denetimlerinin bilinen bicimi.
   */
  .albim-mod--mobil .albim-mod__sec[aria-checked="true"] {
    box-shadow: inset 0 3px 0 0 var(--renk-murekkep);
  }

  /* Dar ekranda kısa metin kullanılır */
  .albim-mod--mobil .albim-mod__alt-uzun { display: none; }
  /*
   * `nowrap` YERINE `balance` (9 Eylul 2026).
   *
   * Bu kisa surum, dar ekranda uzun aciklamanin yerine geciyor ve tek
   * satirda kalsin diye `nowrap` tasiyordu. Turkce karsiligi ("Geldigi
   * gun - ucretsiz") 112 piksel, kutu 126: sigiyor.
   * Fransizca karsilik ("Le jour du passage - gratuit") 145 piksel.
   * `nowrap` yuzunden kucululemiyor ve kutunun 19 piksel disina, yandaki
   * secenegin uzerine tasiyordu.
   *
   * Kisa surumun isi kisa olmak; ama bir cevirinin kisa kalacagini
   * VARSAYMAK yerine sigmadiginda alt satira inmesine izin veriyoruz.
   * Sigan dillerde hicbir sey degismiyor - tek satirda kaliyor.
   */
  .albim-mod--mobil .albim-mod__alt-kisa {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    overflow: visible;
    white-space: normal;
    text-wrap: balance;
  }

  /* Kategori çipleri — yatay kaydırma.
     "Tüm ürünler" sağa sabitlenmez, kaydırmanın son çipi olur; yoksa
     kaydırılabilir alanı kesip kategorileri sıkıştırıyor. */
  .albim-gezinti__ic {
    min-height: 44px;
    gap: var(--a-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .albim-gezinti__ic::-webkit-scrollbar { display: none; }
  /* Kaydırma kabında liste ve son çip SIKIŞMAMALI; yoksa üst üste biniyor */
  .albim-gezinti ul { gap: var(--a-2); overflow: visible; flex: 0 0 auto; }
  .albim-gezinti li { flex: 0 0 auto; }
  .albim-gezinti a {
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: var(--fs-xs);
  }
  .albim-gezinti a:hover { border-color: var(--cizgi-belirgin); }
  .albim-gezinti a[aria-current] {
    background: var(--renk-murekkep);
    color: var(--uzeri-koyu);
    border-color: var(--renk-murekkep);
  }
  .albim-gezinti .albim-firsat { border-color: var(--albim-bakir); }
  .albim-gezinti__sag {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--albim-kirmizi);
    border-radius: 999px;
  }

  /*
   * SEPETE DÖNÜŞ YOLU KAYBOLUYORDU.
   *
   * Burada masaüstündeki 'fixed' bilerek 'sticky'ye çevrilmişti, ama
   * .albim-ana başlığın İÇİNDE ve başlık yalnızca 167 piksel. Yapışkan bir
   * öge ancak kendi kapsayıcısı kadar yapışabilir: başlık yukarı kayıp
   * gidince çubuk da onunla gidiyordu.
   *
   * Ölçtüm (mobil /shop/): 155 pikselden sonra sepete giden tek bağlantı
   * ekrandan çıkıyor ve sayfanın geri kalanının hiçbir yerinde geri
   * gelmiyor — menüde de altbilgide de sepet yok. Yani müşteri ürün
   * ekledikten sonra sepete dönemiyordu.
   *
   * Masaüstünde zaten çalışan yol 'fixed'; mobilde de onu kullanıyoruz ve
   * akıştan çıkan yüksekliği padding ile telafi ediyoruz (telafi olmazsa
   * içerik çubuğun altına kayar).
   */
  .albim-baslik[data-yapisik] { padding-top: 56px; }
  .albim-baslik[data-yapisik] .albim-ana { position: fixed; }
  .albim-baslik[data-yapisik] .albim-ana__ic { min-height: 56px; }
}

/* Tam ekran arama katmanı (mobil) */
.albim-arama-katman {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--zemin-sayfa);
}
.albim-arama-katman[hidden] { display: none !important; }
.albim-arama-katman__basi {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  padding: var(--a-2) var(--a-3);
  border-bottom: 1px solid var(--cizgi-ince);
}
.albim-arama-katman .albim-arama { display: block; flex: 1; max-width: none; }
.albim-arama-katman .albim-oneri {
  position: static;
  max-height: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.albim-arama-katman__iptal {
  flex: none;
  padding: 12px 6px;
  background: none;
  border: 0;
  color: var(--renk-govde);
  font-size: var(--fs-xs);
  cursor: pointer;
}

/* =========================================  MOD DEĞİŞTİRME ONAYI (§3.4) */

.albim-onay-ortu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--a-3);
  background: rgb(36 29 27 / 45%);
}
.albim-onay-ortu[hidden] { display: none !important; }

.albim-onay-kutu {
  width: min(440px, 100%);
  padding: var(--a-4);
  background: var(--zemin-yuzey);
  border-radius: var(--kose-buyuk);
  box-shadow: 0 24px 60px rgb(36 29 27 / 24%);
}
.albim-onay-kutu h2 { margin: 0 0 var(--a-2); font-size: var(--fs-lg); }
.albim-onay-kutu p { margin: 0 0 var(--a-4); color: var(--renk-govde); font-size: var(--fs-sm); }
.albim-onay-kutu__dugmeler { display: flex; gap: var(--a-2); justify-content: flex-end; }

/* ===========================================  MENÜ ÇEKMECESİ EK BİÇİMLER */

.albim-menu__hesap {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  min-height: 48px;
  /* Dikey dolgu SIFIRDI: kutu 48 pikselde kilitliydi ve iki satirlik ad
     renkli zeminin disina tasiyordu. Dolgu verilince kutu adla birlikte
     buyuyor. */
  padding: var(--a-2) var(--a-3);
  margin-bottom: var(--a-2);
  background: var(--zemin-serit);
  border-radius: var(--kose);
  color: var(--renk-murekkep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
  text-decoration: none;
}
.albim-menu__hesap:hover { text-decoration: none; }

/* Ikon kucululmesin, ad esnesin. min-width:0 olmadan flex ogesi kendi
   icerigi kadar genis kalmakta israr eder ve sarma hic devreye girmez -
   tasmanin asil sebebi buydu. overflow-wrap ise boslugu olmayan cok uzun
   tek kelimeyi de (bazi soyadlar) iceride tutuyor. */
.albim-menu__hesap > svg { flex: none; }

.albim-menu__hesap-ad {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.albim-menu__ayrac {
  height: 1px;
  margin: var(--a-3) 0;
  border: 0;
  background: var(--cizgi-ince);
}

.albim-menu__firsat { color: var(--albim-bakir); }

.albim-menu__dugme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--renk-murekkep);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.albim-menu__dugme span { display: inline-flex; align-items: center; gap: var(--a-2); }

.albim-menu__dil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--renk-murekkep);
}

.albim-menu__iletisim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
  margin-top: var(--a-3);
  padding-top: var(--a-3);
  border-top: 1px solid var(--cizgi-ince);
}
.albim-menu__iletisim a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  color: var(--renk-murekkep);
  font-size: var(--fs-xs);
  text-decoration: none;
}
.albim-menu__iletisim a:hover { background: var(--zemin-serit); text-decoration: none; }


/* =====================================================  DIL DUGMESI (ust bar)
   9 Eylul 2026, Kral: "mobilde de webde ustte buton olsun".

   Neden ayri bir sinif: .albim-eylem ailesi ikon tasiyor, bu ise IKI HARF
   tasiyor. Ayni kutu olcusunu koruyoruz ki ust satirdaki ogeler ayni
   hizada dursun, ama harfleri ortalayip biraz kucultuyoruz - 34 piksellik
   yuvada "FR" ikon kadar yer kaplasin.

   Cerceve VAR: harf, ikonlarin yaninda kendi basina "tiklanir" gorunmuyor;
   ince bir cerceve onu dugmeye ceviriyor. Mod etiketiyle ayni dil. */
.albim-eylem--dil {
  flex: none;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--zemin-yuzey);
  overflow: hidden;
}

.albim-eylem--dil__kod {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-kalin);
  letter-spacing: .04em;
  line-height: 1;
}

/* Masaustunde hizmet seridinde ZATEN TR / FR duruyor; sayfanin tepesinde
   ikisini birden gostermek tekrar olurdu. Cubuk yapisinca serit kayboluyor,
   dugme orada devrede kaliyor - mod etiketiyle ayni kural. */
@media (min-width: 900px) {
  .albim-baslik:not([data-yapisik]) .albim-eylem--dil { display: none; }
}