/* ==========================================================================
   ALBIM — Sayfa bölümleri
   Tasarım dokümanındaki anasayfa birebir. Bileşenler components.css'te.
   ========================================================================== */

/* ======================================================= BİLEŞEN EKLERİ */

/* Koyu zemin üstünde açık çerçeveli buton (hero) */
.albim-btn--acik {
  background: transparent;
  color: var(--zemin-yuzey);
  border-color: color-mix(in srgb, var(--zemin-yuzey) 70%, transparent);
}
.albim-btn--acik:hover { background: var(--zemin-yuzey); color: var(--renk-murekkep); }

/* Mürekkep dolgulu buton (bülten) */
.albim-btn--koyu { background: var(--renk-murekkep); color: var(--uzeri-koyu); }
.albim-btn--koyu:hover { background: #000; color: var(--uzeri-koyu); }

/* Koyu zeminde çerçeveli rozet (hero etiketi) */
.albim-rozet--ana {
  background: color-mix(in srgb, var(--renk-murekkep) 55%, transparent);
  color: var(--zemin-yuzey);
  border-color: color-mix(in srgb, var(--zemin-yuzey) 55%, transparent);
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
}

.albim-baslik-s { font-size: var(--fs-lg); }
.albim-kucuk    { font-size: var(--fs-xs); }

.albim-bolum-basi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a-3);
  flex-wrap: wrap;
}

.albim-bag-ok {
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  white-space: nowrap;
}
.albim-bag-ok--acik { color: var(--zemin-yuzey); }
.albim-bag-ok--acik:hover { color: var(--zemin-yuzey); }

/* ========================================================= GÖRSEL YUVASI
   Fotoğraf gelene kadar o alanın yerini tutar ve oraya hangi karenin
   geleceğini yazar. Görsel eklendiğinde bu görünüm tamamen kaybolur.     */

.albim-yuva {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--a-3);
  background: var(--zemin-serit);
  border: 1px dashed var(--cizgi-belirgin);
  border-radius: var(--kose);
  overflow: hidden;
}
.albim-yuva--dolu { border-style: none; padding: 0; background: transparent; }

/*
 * BOS YUVALAR MOBILDE EKRANI YIYORDU.
 *
 * Olctum (mobil 390 px, anasayfa): 12 gorsel yuvasinin 7'si bos ve
 * 1 837 piksel yer kapliyor - sayfanin %31'i. Bu alan HENUZ VAR OLMAYAN
 * fotograflar icin ayrilmis bos yer.
 *
 * Yuva doldugunda tam boyuna donuyor; burada yalnizca BOS haldeki
 * rezervasyonu kisiyoruz. Yani fotograflar geldikce duzen kendiliginden
 * eski haline donuyor.
 */
@media (max-width: 700px) {
  /* aspect-ratio satir ici stille geliyor (sablon yaziyor) ve fotografin
     oranini pesinen ayiriyor; !important onu gecmek icin - fotograf yokken
     o orani korumanin bir anlami yok. Yuva dolunca kural devre disi kaliyor
     ve gercek oran geri geliyor. */
  .albim-yuva:not(.albim-yuva--dolu) {
    min-height: 84px;
    aspect-ratio: auto !important;
  }
  .albim-kat-kart:not(:has(.albim-yuva--dolu)) { min-height: 150px; }
}
.albim-yuva--dolu img { width: 100%; height: 100%; object-fit: cover; }

.albim-yuva__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 30ch;
}
.albim-yuva__ikon  { color: var(--albim-kirmizi); opacity: .55; }
.albim-yuva__brief {
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--albim-kirmizi);
}
.albim-yuva__eylem {
  font-size: var(--fs-2xs);
  color: var(--renk-soluk);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hero fonu — tam alan, koyu perde ile */
.albim-yuva--fon {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(105deg, #3A302B 0%, #4A403A 55%, #C9BEB3 100%);
}
.albim-yuva--fon .albim-yuva__ic { opacity: .9; }
.albim-yuva--fon .albim-yuva__brief,
.albim-yuva--fon .albim-yuva__eylem { color: color-mix(in srgb, #FFF 78%, transparent); }
.albim-yuva--fon .albim-yuva__ikon  { color: #FFF; opacity: .7; }

/* Kategori kapağı — kartın tamamını kaplar */
.albim-yuva--kapak {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
  border: 0;
  background: linear-gradient(180deg, #EFEAE3 0%, #D9D2CA 62%, #8A7E79 100%);
}

/*
 * YER TUTUCU IKONU BASLIGIN UZERINE BINIYORDU.
 *
 * .albim-yuva "place-items: center" ile ikonu ORTALIYOR; kapak yuvasi
 * kartin tamamini kapladigi icin ikon kartin tam ortasina dusuyor.
 * Kart metni ise alttan yukari buyuyor. Basligi iki satira dusen kartta
 * ikisi cakisiyordu: "Dondurulmus Urunler" kartinda ikon "Urunler"
 * kelimesinin harflerinin uzerinden geciyordu (olctum: 484 px2, 320-430
 * piksel arasi; diger dort kartta 0).
 *
 * Kucuk bir resim simgesinin yazinin ustunde durmasi, kasitli bir yer
 * tutucuyu KIRIK GORSEL gibi gosteriyor.
 *
 * Cozum ikonu ust bolgeye almak: metnin buyudugu alandan cikiyor.
 * Yalnizca BOS yuvada gecerli - dolu yuvada bu ikon zaten basilmiyor,
 * yani fotograf gelen kartlarda hicbir sey degismiyor.
 */
.albim-yuva--kapak:not(.albim-yuva--dolu) {
  align-items: start;
  padding-top: var(--a-3);
}

/*
 * 350 PIKSELIN ALTINDA IKONA YER YOK - CIZMIYORUZ.
 *
 * Olctum: 350 px ve uzerinde metnin ustunde 45 px bosluk kaliyor, ikon
 * (22 px) rahat siğiyor. 350'nin ALTINDA "30 urun - tek tek soklanmis"
 * alt yazisi uc satira dusuyor ve bosluk 21 pikselе iniyor; 22 piksellik
 * ikon oraya sigmaz, nereye konursa konsun metne deger.
 *
 * Ikon sus (aria-hidden) ve tek isi "buraya fotograf gelecek" demek.
 * Gradyan bunu zaten soyluyor. Yer olmadiginda ikonu metnin uzerine
 * basmaktansa hic basmamak dogru: kasitli bir yer tutucunun kirik gorsel
 * gibi gorunmesi, hic gorunmemesinden kotu.
 */
@media (max-width: 349px) {
  .albim-kat-kart .albim-yuva--kapak:not(.albim-yuva--dolu) .albim-yuva__ikon {
    display: none;
  }
}

/*
 * DOLU KAPAK: GORSEL YUVAYA GERILSIN, ORTALANMASIN.
 *
 * .albim-yuva bir grid ve place-items: center. Ortalanan oge gerilmedigi
 * icin satir, gorselin KENDI boyuna gore buyuyor; height:100% de
 * kapsayiciya degil o satira cozuluyor. Kart genisligi yuksekligini
 * gectiginde (1280'de 280x248 yuva) kare gorsel 280 piksel yuksekligi
 * dayatiyor ve alttan 32 piksel kirpiliyordu; 1440'ta 62 piksel.
 * Olctum: 900 ve 1024'te sorun yok, 1280 ve 1440'ta var - cunku sorun
 * ancak kart eninden alcak oldugunda ortaya cikiyor.
 *
 * ILK DENEMEM YETMEDI: place-items: stretch yazdim ama gorsel yine
 * satiri buyutuyordu - cunku ogeye "height: 100%" verildiginde ve satir
 * da ogeye gore olculdugunde daire kapaniyor. Cozum gorseli satir
 * hesabindan tamamen cikarmak: mutlak konum.
 */
.albim-yuva--kapak.albim-yuva--dolu > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/*
 * YAZI PERDESI (scrim).
 *
 * Yuva bosken baslik KOYU metindi ve acik gradyan uzerinde okunuyordu.
 * Fotograf gelince baslik BEYAZ'a donuyor - ama fotograflarin alt kismi
 * acik (beyaz tezgah, un, acik duvar), yani beyaz yazi acik zemine
 * dusuyor. Olctum: baslik 1,40-2,78:1, alt yazi 1,30-2,06:1. Metin
 * esigi 4,5:1. Yani gorsel koymak okunakliligi BOS HALDEN KOTU yapti.
 *
 * Cozum: yazinin arkasina asagidan yukari koyulasan bir perde. Fotograf
 * gorunur kalir, yazi okunur olur. Yalnizca DOLU kapakta - bos yuvada
 * zaten koyu metin var ve perdeye gerek yok.
 */
.albim-yuva--kapak.albim-yuva--dolu::after {
  content: "";
  position: absolute;
  inset: 0;
  /*
   * PERDE HAFIFLETILDI - KRAL GERI BILDIRIMI (4 Eylul 2026).
   *
   * Onceki hali kartin %90'ina kadar uzaniyor ve alt ucte birde %82-90
   * yogunluktaydi. Sonuc: fotograftaki urun paketleri sonuk goruyordu,
   * yani perde yaziyi okunur yaparken kartin ASIL ISINI - urunu
   * gostermeyi - bozuyordu.
   *
   * Olctum (perde degismeden once, alti kartin hepsi, mobil+masaustu):
   * baslik 12,7-15,9:1, alt yazi 7,8-11:1. Esik 4,5:1. Yani gerekenin
   * yaklasik UC KATI karartma vardi; okunakliligi kaybetmeden cok yer
   * acilabilirdi.
   *
   * Yeni duraklar iki olcume dayaniyor:
   * - Yazi blogu kartin %58-75 araliginda basliyor (alttan %25-42).
   *   Perde o bandi kapsiyor.
   * - %56'nin ustunde perde SIFIR: kartin ust yarisi hic dokunulmamis,
   *   fotograf oldugu gibi gorunuyor.
   */
  background: linear-gradient(
    to top,
    rgb(28 22 20 / 78%) 0%,
    rgb(28 22 20 / 62%) 22%,
    rgb(28 22 20 / 34%) 38%,
    rgb(28 22 20 / 10%) 48%,
    rgb(28 22 20 / 0%) 56%
  );
  pointer-events: none;
}

/* Hikâye bölümünün sol yarısı */
.albim-yuva--yarim { min-height: 340px; border-radius: 0; }

/* Alt bilgideki logo kutusu */
.albim-yuva--logo { min-height: 46px; max-width: 190px; background: var(--zemin-yuzey); border-color: transparent; }
.albim-yuva--logo .albim-yuva__eylem { display: none; }

/* Tekrar sipariş şeridindeki küçük kare */
.albim-yuva--mini { min-height: 0; width: 46px; flex: none; padding: 4px; }
.albim-yuva--mini .albim-yuva__eylem,
.albim-yuva--mini .albim-yuva__brief { display: none; }
.albim-yuva--mini .albim-yuva__ikon { width: 15px; height: 15px; }

/* ========================================================= DUYURU ŞERİDİ */


@media (max-width: 767px) {

}

/* ================================================================ ÜST BAR */

.albim-ust {
  position: sticky;
  top: 0;
  z-index: var(--z-yapiskan);
  background: var(--zemin-yuzey);
  border-bottom: 1px solid var(--cizgi-ince);
}
.albim-ust__in {
  display: flex;
  align-items: center;
  gap: var(--a-4);
  min-height: 72px;
}

/*
 * ESKI UST BAR KALINTILARI TEMIZLENDI (7 Eylul 2026, #182)
 *
 * Buradan silinenler ve NEDEN silinebildikleri:
 *
 * .albim-ust__eylem / .albim-ust__baglanti / .albim-ust__ikon /
 * .albim-sepet-btn  -> temada bu siniflarla HTML ureten TEK BIR YER YOK
 *   (hepsini tek tek arattim, sonuc 0). Onceki bir baslik duzeninden kalma.
 *
 * .albim-marka, .albim-marka img, .albim-sepet-btn__adet  -> bu siniflar
 *   HALA KULLANILIYOR, ama bicimlendirmelerinin tamami baslik.css'te de var
 *   ve orasi bu dosyadan SONRA yuklendigi icin buradaki degerler zaten
 *   hicbir sayfada gecerli degildi. Ozellik ozellik karsilastirdim: buradaki
 *   her ozelligin karsiligi baslik.css'te tanimli, yani silmek gorunumu
 *   degistirmiyor. (Olcum: logo 68x34, sepet rozeti 20x20 tam yuvarlak -
 *   ikisi de baslik.css'in degerleri.)
 *
 * .albim-ust ve .albim-ust__in SILINMEDI: ODEME SAYFASINDA CANLI
 *   (header-odeme.php). Once "kullanilmiyor" sanmistim - alti sayfada
 *   sayim 0 cikmisti; sebebi /checkout/ adresinin bos sepette /cart/'a
 *   yonlendirmesi ve o sayfayi hic yukleyememis olmam. Sepete urun koyup
 *   olcunce ikisi de orada duruyordu. Silseydim odeme sayfasinin ust bari
 *   dagilirdi.
 */

@media (max-width: 900px) {
  .albim-ust__in { flex-wrap: wrap; padding-block: var(--a-2); gap: var(--a-2); }
}

/* ==================================================== KATEGORİ GEZİNTİSİ */


/* =================================================================== HERO */

.albim-hero__metin .albim-rozet { align-self: flex-start; }
.albim-hero-baslik { color: var(--zemin-yuzey); }
.albim-hero__alt {
  max-width: 30rem;
  color: color-mix(in srgb, var(--zemin-yuzey) 84%, transparent);
}

/* ========================================================== GÜVEN ŞERİDİ */

.albim-guven { background: var(--zemin-yuzey); border-bottom: 1px solid var(--cizgi-ince); }
.albim-guven__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-3) var(--a-4);
  padding-block: var(--a-4);
}
@media (min-width: 900px) { .albim-guven__in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.albim-guven__oge { display: flex; align-items: flex-start; gap: var(--a-2); }
.albim-guven__ikon { flex: none; color: var(--renk-murekkep); margin-top: 1px; }
.albim-guven__yazi { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); }
.albim-guven__yazi strong { font-size: var(--fs-sm); }
.albim-guven__yazi span { color: var(--albim-bakir); }

/* ======================================================= KATEGORİ KARTLARI */

.albim-kat-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-3);
}
@media (min-width: 900px) { .albim-kat-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-4); } }

.albim-kat-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: var(--a-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-serit);
  overflow: hidden;
  color: var(--renk-murekkep);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.albim-kat-kart:hover { border-color: var(--cizgi-belirgin); box-shadow: var(--golge-kart); text-decoration: none; }
.albim-kat-kart__yazi { position: relative; display: flex; flex-direction: column; gap: 1px; }
/*
 * KATEGORI ADI FOTOGRAFSIZ KARTTA OKUNMUYORDU.
 *
 * Baslik beyaz yazilmisti cunku fotografin uzerine binmesi tasarlanmisti.
 * Ama fotograflar henuz yok; yuva yerine acik-orta gri bir gradyan
 * duruyor. Ekrandan piksel ornekledim: baslik satirinda zemin
 * rgb(178,169,162), yazi beyaz -> 2,31:1. Normal metin siniri 4,5:1.
 *
 * Varsayilan artik KOYU yazi (fotografsiz hal). Beyaza yalnizca gercekten
 * gerektiginde donuyor: fotograf geldiginde ve koyu zeminli "Tum urunler"
 * kartinda. Boylece fotograflar yuklendikce tasarim kendiliginden eski
 * haline donuyor, elle bir sey degistirmek gerekmiyor.
 *
 * Olcum: koyu yazi ayni zeminde 7,2:1.
 */
.albim-kat-kart__yazi h3 { font-size: var(--fs-lg); color: var(--renk-murekkep); }
.albim-kat-kart__yazi span { font-size: var(--fs-2xs); color: var(--renk-soluk); }

/*
 * AYRI KURALLAR, bilerek — virgulle birlestirilmiyor.
 *
 * CSS'te virgullu bir listede TEK BIR secici gecersizse kuralin TAMAMI
 * dusuyor. Ikisi ayni listedeyken :has() desteklemeyen bir tarayicida
 * (eski iOS Safari) "Tum urunler" karti da kuraldan dusuyordu: koyu zeminli
 * kartta koyu yazi kaliyor, yani okunmaz oluyordu.
 *
 * Ayri yazilinca --tumu her tarayicida calisiyor; :has() desteklenmiyorsa
 * yalnizca "fotografi olan kart" dali dusuyor ve o da bugun ortada yok
 * (henuz fotograf yuklenmedi).
 */
.albim-kat-kart--tumu .albim-kat-kart__yazi h3 { color: var(--zemin-yuzey); }
.albim-kat-kart--tumu .albim-kat-kart__yazi span {
  color: color-mix(in srgb, var(--zemin-yuzey) 78%, transparent);
}

.albim-kat-kart:has(.albim-yuva--dolu) .albim-kat-kart__yazi h3 { color: var(--zemin-yuzey); }
.albim-kat-kart:has(.albim-yuva--dolu) .albim-kat-kart__yazi span {
  color: color-mix(in srgb, var(--zemin-yuzey) 78%, transparent);
}

.albim-kat-kart--tumu {
  background: var(--zemin-koyu);
  border-color: var(--zemin-koyu);
  justify-content: space-between;
}
.albim-kat-kart--tumu .albim-kivrim { opacity: .55; }

/* ============================================================= ÜRÜN KARTI
   (temel kart components.css'te; buradakiler anasayfaya özgü ekler)      */

.albim-kart__gorsel { display: block; }
/* Ozgulluk bilerek yuksek: hareket.css'teki [data-yakinda] kurali
   position:relative veriyor ve sonra yuklendigi icin bunu eziyordu.
   Sonuc: 16 kartin 16'sinda kalp kartin disina tasiyordu. */
.albim-kart .albim-kart__favori {
  position: absolute;
  top: var(--a-2);
  inset-inline-end: var(--a-2);
  display: grid;
  place-items: center;
  /* Dokunma alani 44x44 (parmak boyu). Gorunen daire 30px kaliyor:
     buyuyen sey el degdiginde tuttugu alan, gorunus degil. Buton
     30'dan 44'e cikinca daire 7px kayardi - konumdan 7px dusuyoruz. */
  width: 44px; height: 44px;
  top: calc(var(--a-2) - 7px);
  inset-inline-end: calc(var(--a-2) - 7px);
  border: 0;
  background: none;
  color: var(--renk-soluk);
  z-index: 2;
}
.albim-kart .albim-kart__favori::before {
  content: "";
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--zemin-yuzey);
  box-shadow: var(--golge-kart);
}
.albim-kart .albim-kart__favori > svg { position: relative; }
.albim-kart__favori.dolu { color: var(--albim-kirmizi); }
.albim-kart__favori:hover { color: var(--albim-kirmizi); }
/* İndirim rozeti varsa kalp bir sıra aşağı iner (tasarımdaki gibi) */
/*
 * KALP ARTIK KAYMIYOR (T-6).
 *
 * Burada indirimli ürünlerde kalp 27px aşağı itiliyordu, çünkü indirim
 * rozeti sağ üstteydi ve ikisi çakışıyordu. Sonuç: kalbin yeri ürüne göre
 * değişiyordu — aynı sıradaki kartlarda aynı düğme farklı yükseklikteydi.
 *
 * Çözüm rozetleri taşımak oldu: iki rozet de sol üstte (components.css),
 * kalbe sağ üstte sabit yer ayrıldı. Kaydırma kuralına gerek kalmadı.
 */

.albim-kart__rozetler { z-index: 1; }

/* ============================================================ İKİLİ DÜZEN */

.albim-ikili {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-5);
  align-items: start;
}
@media (min-width: 900px) {
  .albim-ikili { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--a-7); }
}

/* ================================================================ ADIMLAR
   Numaralandırma meşru: gerçekten sıralı bir süreç.                      */

.albim-adimlar { display: flex; flex-direction: column; counter-reset: adim; list-style: none; }
.albim-adimlar li {
  counter-increment: adim;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--a-2) var(--a-3);
  padding-block: var(--a-3);
  border-top: 1px solid var(--cizgi-ince);
}
.albim-adimlar li::before {
  content: counter(adim);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-agir);
  font-variant-numeric: tabular-nums;
}
.albim-adimlar__son::before { background: var(--albim-kirmizi) !important; }
.albim-adimlar h3 { font-size: var(--fs-sm); font-family: var(--yazi-govde); font-weight: var(--fw-kalin); }
.albim-adimlar p  { grid-column: 2; font-size: var(--fs-xs); color: var(--albim-bakir); }
.albim-adimlar__son p { color: var(--renk-govde); }

/* ================================================================ HİKÂYE */

.albim-hikaye-bolum {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .albim-hikaye-bolum { grid-template-columns: 1fr 1fr; }
}
.albim-hikaye {
  background: var(--zemin-koyu);
  color: var(--uzeri-koyu);
  padding: var(--a-6) var(--sayfa-marj);
  display: grid;
  align-content: center;
}
@media (min-width: 900px) { .albim-hikaye { padding: var(--a-8) var(--a-7); } }
.albim-hikaye h2 { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); }
.albim-hikaye .albim-metin { color: color-mix(in srgb, var(--uzeri-koyu) 82%, transparent); }

.albim-sayilar { display: flex; flex-wrap: wrap; gap: var(--a-5); margin-top: var(--a-2); }
.albim-sayilar dt {
  font-family: var(--yazi-baslik);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
}
.albim-sayilar dd {
  margin: 0;
  font-size: var(--fs-2xs);
  color: color-mix(in srgb, var(--uzeri-koyu) 62%, transparent);
}

/* ============================================================== YORUMLAR */

.albim-yildiz { color: var(--albim-bakir); letter-spacing: .08em; font-size: var(--fs-xs); }
.albim-yildiz--bos { color: var(--cizgi); }
.albim-yorum-ozet { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--renk-govde); }

.albim-yorum-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-3);
}
@media (min-width: 820px) { .albim-yorum-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); } }

.albim-yorum {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  margin: 0;
  padding: var(--a-3);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
}
.albim-yorum blockquote { margin: 0; font-size: var(--fs-xs); color: var(--albim-bakir); line-height: var(--lh-govde); }
.albim-yorum figcaption { font-size: var(--fs-2xs); color: var(--renk-soluk); }

/* ======================================================== TEKRAR SİPARİŞ */

.albim-tekrar-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-2);
}
@media (min-width: 900px) { .albim-tekrar-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.albim-tekrar {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  padding: var(--a-2);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
}
.albim-tekrar__yazi { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.albim-tekrar__yazi strong { font-size: var(--fs-xs); }
.albim-tekrar__yazi span { font-size: var(--fs-2xs); color: var(--renk-govde); font-variant-numeric: tabular-nums; }
.albim-tekrar__ekle {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  background: var(--zemin-yuzey);
  color: var(--albim-kirmizi);
  font-size: var(--fs-md);
  font-weight: var(--fw-kalin);
  line-height: 1;
}
.albim-tekrar__ekle:hover { background: var(--albim-kirmizi-soluk); }

/* ================================================================ BÜLTEN */

.albim-bulten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-3);
  align-items: center;
  padding: var(--a-4);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
}
@media (min-width: 900px) {
  .albim-bulten { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--a-6); padding: var(--a-5); }
}

/* ============================================================ ALT BİLGİ */

.albim-alt {
  background: var(--zemin-koyu);
  color: color-mix(in srgb, var(--uzeri-koyu) 82%, transparent);
  font-size: var(--fs-xs);
  padding-top: var(--a-6);
  border-top: 4px solid transparent;
  border-image: var(--motif-kivrim) 4 repeat;
}
.albim-alt a { color: color-mix(in srgb, var(--uzeri-koyu) 88%, transparent); }
.albim-alt a:hover { color: var(--zemin-yuzey); }

.albim-alt__ust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-5);
  padding-bottom: var(--a-5);
}
@media (min-width: 760px)  { .albim-alt__ust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .albim-alt__ust { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--a-6); } }

.albim-alt__marka p { margin: 0; line-height: 1.7; }
.albim-alt__saat { color: color-mix(in srgb, var(--uzeri-koyu) 55%, transparent) !important; }

.albim-alt__kolon { display: flex; flex-direction: column; gap: var(--a-2); }
.albim-alt__kolon h2 { color: color-mix(in srgb, var(--uzeri-koyu) 55%, transparent); }
.albim-alt__kolon ul { display: flex; flex-direction: column; gap: 7px; list-style: none; }

.albim-uygulama {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: var(--a-3);
  border: 1px solid color-mix(in srgb, var(--uzeri-koyu) 28%, transparent);
  border-radius: var(--kose);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-orta);
}
.albim-uygulama:hover { background: color-mix(in srgb, var(--uzeri-koyu) 10%, transparent); text-decoration: none; }

.albim-sosyal { display: flex; flex-wrap: wrap; gap: var(--a-3); list-style: none; margin-top: var(--a-2); }
.albim-sosyal a { font-size: var(--fs-2xs); }

.albim-alt__rozet,
.albim-alt__son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-2) var(--a-4);
  padding-block: var(--a-3);
  border-top: 1px solid color-mix(in srgb, var(--uzeri-koyu) 16%, transparent);
}
.albim-alt__rozet ul { display: flex; flex-wrap: wrap; gap: var(--a-4); list-style: none; }
.albim-alt__rozet li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); }

/* Kart rozetleri (CB, VISA, MC...).
   ADI "albim-odeme" idi; odeme sayfasinin izgara sinifiyla ayni addi
   ve o dosya her sayfada yuklendigi icin rozetler tam genislikte
   kutulara donusuyordu. Ad ayrildi, listenin kendi duzeni de
   burada tanimli - baska bir dosyaya bagimli kalmasin. */
.albim-kart-rozet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.albim-kart-rozet li {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--uzeri-koyu) 26%, transparent);
  border-radius: var(--kose-kucuk);
  font-size: 10px;
  font-weight: var(--fw-kalin);
  letter-spacing: .06em;
}

.albim-alt__son { font-size: var(--fs-2xs); padding-bottom: var(--a-5); }
.albim-alt__son p { display: flex; flex-wrap: wrap; gap: var(--a-3); margin: 0; }
.albim-alt__slogan { color: color-mix(in srgb, var(--uzeri-koyu) 55%, transparent); }

/* ==========================================================================
   KATEGORİ / MAĞAZA SAYFASI
   ========================================================================== */

.albim-yol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}
.albim-yol a { color: var(--albim-bakir); }
.albim-yol [aria-current] { color: var(--renk-murekkep); font-weight: var(--fw-orta); }

.albim-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  padding-block: var(--a-3);
  border-top: 1px solid var(--cizgi-ince);
  border-bottom: 1px solid var(--cizgi-ince);
}
.albim-filtre__gruplar { display: flex; align-items: center; gap: var(--a-2); }
.albim-filtre__sag { display: flex; align-items: center; gap: var(--a-3); }

.albim-filtre__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--dokunma-min);
  padding-inline: var(--a-3);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  font-size: var(--fs-xs);
  color: var(--renk-govde);
  white-space: nowrap;
}
.albim-filtre__btn strong { color: var(--renk-murekkep); font-weight: var(--fw-kalin); }
.albim-filtre__btn:hover { border-color: var(--renk-soluk); }
.albim-filtre__btn.dolu { border-color: var(--cizgi-belirgin); }

.albim-aktif-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-2);
}
.albim-aktif-filtre .albim-cip { min-height: 34px; }
.albim-temizle {
  border: 0;
  background: transparent;
  color: var(--albim-kirmizi);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: var(--dokunma-min);
  padding-inline: var(--a-2);
}

.albim-sayfalama { display: flex; justify-content: center; }

/*
 * SECICI NEDEN BU KADAR UZUN:
 * WooCommerce kendi sayfalama stilini
 *   .woocommerce nav.woocommerce-pagination ul li span.current
 * gibi uzun bir seciciyle yaziyor. Bizim kisa `.albim-sayfalama .current`
 * kuralimiz onun yaninda zayif kaliyordu: kenar rengimiz geciyor ama
 * ZEMIN ve YAZI rengi WooCommerce'te kaliyordu. Sonuc, acik lila zemin
 * ustunde acik mor rakam - olctum, 3,65:1. Okunurluk esigi 4,5.
 * !important yerine seciciyi esitliyorum; boylece kural neden kazandigi
 * okunur kaliyor ve baska yeri etkilemiyor.
 */
.albim-sayfalama .page-numbers,
.albim-sayfalama nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: var(--a-2);
  list-style: none;
  border: 0;               /* WooCommerce ul'ye lila bir cerceve ciziyor */
  margin: 0;
  padding: 0;
}
.albim-sayfalama a,
.albim-sayfalama span,
.albim-sayfalama nav.woocommerce-pagination ul li a,
.albim-sayfalama nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: var(--dokunma-min);
  min-height: var(--dokunma-min);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: transparent;
  color: var(--renk-murekkep);
  font-size: var(--fs-xs);
}
.albim-sayfalama nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.albim-sayfalama .current,
.albim-sayfalama nav.woocommerce-pagination ul li span.current,
.albim-sayfalama nav.woocommerce-pagination ul li a.current {
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
  border-color: var(--renk-murekkep);
}

/* ==========================================================================
   ÜRÜN DETAY SAYFASI
   ========================================================================== */

.albim-urun {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-5);
}
@media (min-width: 900px) {
  .albim-urun { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-7); align-items: start; }
}

.albim-galeri { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--a-2); }
.albim-galeri__kucuk { display: flex; flex-direction: column; gap: var(--a-2); }
.albim-yuva--kucuk { min-height: 0; padding: 6px; }
.albim-yuva--kucuk .albim-yuva__eylem { display: none; }
.albim-yuva--kucuk .albim-yuva__ikon { width: 16px; height: 16px; }

.albim-galeri__video {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: var(--kose);
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
}
.albim-galeri__ana { position: relative; }
.albim-galeri__rozetler {
  position: absolute;
  top: var(--a-2);
  inset-inline-start: var(--a-2);
  display: flex;
  gap: var(--a-2);
}

.albim-urun__ozet h1 { font-size: clamp(var(--fs-xl), 3.2vw, var(--fs-3xl)); }
.albim-urun__ustbilgi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-2);
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}
.albim-urun__ustbilgi a { color: var(--albim-bakir); }

.albim-urun__fiyat { display: flex; align-items: baseline; gap: var(--a-2); }
.albim-fiyat--buyuk { font-size: var(--fs-3xl); }

.albim-urun__stok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--renk-basari);
}

/* Tükenen ürün: hem renk hem ikon değişiyor. Eskiden ikisi de aynıydı ve
   "Stokta yok" yazısı yeşil onay işaretiyle çıkıyordu. Renk tek başına
   yeterli değil — renk körü bir müşteri için ikon farkı kalıyor. */
/* Renk --albim-kirmizi DEĞİL: ekrandan örnekledim, sayfa zemini #FAF6F1
   olduğu için oran 4,31:1 çıkıyor ve 4,5 sınırının altında kalıyor. (Beyaz
   varsayıp hesaplasaydım 4,67 çıkıp geçmiş sanacaktım.) Temada zaten olan
   koyu kırmızı aynı zeminde 6,0:1 veriyor. */
.albim-urun__stok--yok { color: var(--albim-kirmizi-koyu); }

.albim-urun__eylem { display: flex; align-items: stretch; gap: var(--a-2); flex-wrap: wrap; }
.albim-urun__ekle { flex: 1; min-width: 200px; }
.albim-urun__favori {
  display: grid;
  place-items: center;
  width: var(--yukseklik-buton);
  height: var(--yukseklik-buton);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--zemin-yuzey);
  color: var(--albim-kirmizi);
}
.albim-urun__favori:hover { background: var(--albim-kirmizi-soluk); }

/* Soğuk zincir kutusu */
.albim-soguk {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  padding: var(--a-3);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
}
.albim-soguk__baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--yazi-govde);
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
}
.albim-soguk ul { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.albim-soguk li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}
.albim-soguk li::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--renk-soluk);
}
.albim-soguk__cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--a-2);
  border-top: 1px solid var(--cizgi-ince);
}

/* Akordeon + puan özeti */
.albim-urun-alt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-4);
  align-items: start;
}
@media (min-width: 900px) {
  .albim-urun-alt { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: var(--a-6); }
}
.albim-akordeonlar {
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  padding-inline: var(--a-3);
}
.albim-akordeon:first-child { border-top: 0; }
.albim-akordeon__baslik { cursor: pointer; list-style: none; }
.albim-akordeon__baslik::-webkit-details-marker { display: none; }

.albim-besin { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.albim-besin th { text-align: left; font-weight: var(--fw-orta); color: var(--renk-govde); padding: 7px 0; }
.albim-besin td { text-align: right; padding: 7px 0; border-bottom: 1px solid var(--cizgi-ince); }
.albim-besin th { border-bottom: 1px solid var(--cizgi-ince); }
.albim-besin span { display: block; color: var(--renk-soluk); font-size: var(--fs-2xs); }

.albim-pisirme { display: grid; grid-template-columns: 1fr; gap: var(--a-3); }
@media (min-width: 720px) { .albim-pisirme { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.albim-pisirme h4 { font-size: var(--fs-xs); font-family: var(--yazi-govde); font-weight: var(--fw-kalin); margin-bottom: 4px; }
.albim-pisirme p  { font-size: var(--fs-xs); color: var(--renk-govde); }

.albim-puan-kutu {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  padding: var(--a-3);
  background: var(--zemin-serit);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
}
.albim-puan-kutu__buyuk { display: flex; align-items: baseline; gap: 8px; }
.albim-puan-kutu__buyuk strong { font-family: var(--yazi-baslik); font-size: var(--fs-3xl); font-weight: var(--fw-normal); }
.albim-puan-kutu__buyuk span { font-size: var(--fs-xs); color: var(--renk-govde); }

.albim-puan-cubuk { display: flex; flex-direction: column; gap: 5px; list-style: none; }
.albim-puan-cubuk li {
  display: grid;
  grid-template-columns: 12px 1fr 34px;
  align-items: center;
  gap: var(--a-2);
  font-size: var(--fs-2xs);
  color: var(--renk-govde);
}
.albim-puan-cubuk__ray { height: 5px; border-radius: 999px; background: var(--cizgi); overflow: hidden; }
.albim-puan-cubuk__ray i { display: block; height: 100%; background: var(--albim-bakir); }
.albim-puan-cubuk .albim-rakam { text-align: right; }

/* ---------------------------------------------------------------- düzeltmeler */

/* Alt bilgi logosu: kaynak dosya 480 px geniş, sınır konmayınca dev çıkıyordu */
.albim-alt__logo { width: clamp(110px, 22vw, 150px); height: auto; }

/* Dar ekranda hero fonunun çekim notu, hero metninin üstüne biniyordu.
   Zemin ve gradyan kalır, yalnızca not gizlenir — masaüstünde görünmeye
   devam eder, çünkü orada metin solda ve çakışma yok. */
@media (max-width: 900px) {
  .albim-yuva--fon .albim-yuva__ic { display: none; }
}

/* ==========================================================================
   MOBİL MENÜ · ÇEREZ BANDI · ARAMA
   ========================================================================== */

.albim-menu-btn {
  display: none;
  place-items: center;
  width: var(--dokunma-min);
  height: var(--dokunma-min);
  flex: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--zemin-yuzey);
  color: var(--renk-murekkep);
}
.albim-menu-btn:hover { background: var(--zemin-serit); }

.albim-menu-ortu {
  position: fixed;
  inset: 0;
  background: rgba(36, 29, 27, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
  z-index: var(--z-ortu);
}
.albim-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--zemin-yuzey);
  box-shadow: var(--golge-cekmece);
  translate: -100% 0;
  visibility: hidden;
  transition: translate var(--gecis-yavas), visibility var(--gecis-yavas);
  z-index: var(--z-cekmece);
}
:root[data-menu="acik"] .albim-menu { translate: 0 0; visibility: visible; }
:root[data-menu="acik"] .albim-menu-ortu { opacity: 1; visibility: visible; }
:root[data-menu="acik"] { overflow: hidden; }

.albim-menu__basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  padding: var(--a-3) var(--a-4);
  border-bottom: 1px solid var(--cizgi-ince);
}
.albim-menu__govde {
  flex: 1;
  overflow-y: auto;
  padding: var(--a-3) var(--a-4) var(--a-6);
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
}
.albim-menu__mod { margin-bottom: var(--a-2); }
.albim-menu__mod .albim-mod-anahtari { width: 100%; }
.albim-menu__mod .albim-mod-anahtari__sec { flex: 1; justify-content: center; }
.albim-menu__govde h2 { margin-top: var(--a-3); }
.albim-menu__govde ul { display: flex; flex-direction: column; list-style: none; }
.albim-menu__govde li { border-bottom: 1px solid var(--cizgi-ince); }
.albim-menu__govde a {
  display: block;
  padding: 12px 0;
  color: var(--renk-murekkep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
}
.albim-menu__govde a:hover { color: var(--albim-kirmizi); text-decoration: none; }

@media (max-width: 900px) {
  .albim-menu-btn { display: grid; }

}

/* --------------------------------------------------------------- çerez */

/* Alt bolgedeki yigin sirasi netlestirildi (T'nin plani):
   cerez bandi 420 > sohbet 410 > eylem cubugu 400.
   Once cerez ile sohbet ikisi de 400'du; ayni katmanda olduklari icin
   hangisinin ustte kalacagi isaretleme sirasina bagliydi. */
.albim-cerez {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 420;
  background: var(--zemin-yuzey);
  border-top: 1px solid var(--cizgi);
  box-shadow: var(--golge-yuzen);
}
.albim-cerez__in {
  max-width: calc(var(--icerik-genislik) + var(--sayfa-marj-genis) * 2);
  margin-inline: auto;
  padding: var(--a-3) var(--sayfa-marj);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
}
.albim-cerez__metin { flex: 1; min-width: 260px; font-size: var(--fs-xs); color: var(--renk-govde); }
.albim-cerez__metin strong { color: var(--renk-murekkep); margin-right: 4px; }
.albim-cerez__eylem { display: flex; gap: var(--a-2); flex-wrap: wrap; }
.albim-cerez__eylem .albim-btn { min-height: 42px; padding-inline: var(--a-4); }

/* Mobilde bant 390x158 px = ekranin %18,7'si olculdu. Dokumu:
   dolgu 16 + metin 67 (3 satir x 22,4) + bosluk 16 + dugmeler 42 + dolgu 16.
   Metin YASAL, kisaltilmadi; dugme yuksekligi 42 px dokunma hedefi, dusurulmedi.
   Kucultulen yalnizca bosluk ve satir araligi. Bantin altina inilebilecek
   sinir bu metinle ~138 px; daha asagisi ancak metin degisikligiyle olur
   (avukat onayi gerekir - is #8). */
@media (max-width: 767px) {
  .albim-cerez__in     { padding-block: 12px; gap: 10px; }
  .albim-cerez__metin  { line-height: 1.45; }
}

/* Tam ekran modal (mini sepet çekmecesi / mobil menü) açıkken bildirim
   katmanı çekilir. Neden: --z-cekmece 310, --z-bildirim 400 — yani çerez
   bandı ve sohbet düğmesi çekmecenin ÜSTÜNE çiziliyordu. Ölçüm (390×844,
   ürün sayfası, sepete eklendikten sonra):
     çerez bandı açıkken  "Sepete git"          %100 örtülü, tıklanamaz
     çerez bandı açıkken  "Alışverişe devam et" %100 örtülü, tıklanamaz
     çerez kabul sonrası  "Alışverişe devam et" %100 örtülü (sohbet düğmesi)
   Yani sepete ekleme onayı ekrana geliyordu ama ONAYIN DÜĞMELERİ ölüydü.
   Modal kapanınca ikisi de geri gelir; bildirim baloncuğu (.albim-bildirim)
   bilerek dışarıda bırakıldı — o modalin üstünde kalmalı. */
body.albim-modal-acik .albim-cerez,
body.albim-modal-acik .albim-sohbet,
body.albim-modal-acik .albim-eylem-cubugu,
:root[data-menu="acik"] .albim-cerez,
:root[data-menu="acik"] .albim-sohbet,
:root[data-menu="acik"] .albim-eylem-cubugu { display: none; }

/* Mobil menü aynı hataya düşüyordu (ayrı bir bayrak kullandığı için ilk
   düzeltme onu kapsamadı). Ölçüm: menü açıkken çerez bandının altında kalan
   ve TIKLANAMAYAN üç bağlantı — "İletişim" (y=698), "Teslimat & soğuk
   zincir" (y=748), "Sipariş takibi" (y=799). */

/* ---------------------------------------------------------- arama / 404 */

.albim-404-arama {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
  max-width: 34rem;
}
.albim-404-arama .albim-girdi { flex: 1; min-width: 200px; }

/* Kategori ızgarası artık 5 kategori + "Tüm ürünler" = 6 kart taşıyor.
   Son kart 3 sütuna yayılınca masaüstünde iki tam satır oluşuyor:
   [Mantılar][Dondurulmuş][Kuru][Tatlılar] / [Paketler][—— Tüm ürünler ——] */
@media (min-width: 900px) {
  .albim-kat-kart--tumu { grid-column: span 3; }
}

/* ------------------------------------------------- açılır filtre (details)
   JavaScript'siz çalışır: <details>/<summary> tarayıcının kendi işi.
   Seçenekler gerçek bağlantı — yeni sekmede açılır, paylaşılabilir. */
.albim-acilir { position: relative; }
.albim-acilir > summary { list-style: none; cursor: pointer; }
.albim-acilir > summary::-webkit-details-marker { display: none; }
.albim-acilir[open] > summary svg { transform: rotate(180deg); }
.albim-acilir > summary svg { transition: transform var(--gecis); }

.albim-acilir__liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  box-shadow: 0 12px 32px rgb(36 29 27 / 12%);
}
.albim-acilir--sag .albim-acilir__liste { left: auto; right: 0; }

.albim-acilir__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  padding: 9px 10px;
  border-radius: var(--kose-kucuk);
  color: var(--renk-murekkep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  text-decoration: none;
}
.albim-acilir__liste a:hover { background: var(--zemin-serit); text-decoration: none; }
.albim-acilir__liste a.secili { background: var(--albim-kirmizi); color: var(--uzeri-kirmizi); }
.albim-acilir__liste a.secili .albim-soluk { color: inherit; opacity: .75; }

/* Aktif filtre çipleri artık gerçek bağlantı */
.albim-aktif-filtre a.albim-cip { text-decoration: none; }
.albim-aktif-filtre a.albim-temizle { text-decoration: underline; }

/* Mobil menüde kategori adının yanındaki ürün sayısı */
.albim-menu ul a { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); }

/* ------------------------------------------------------------ hero bannerı

   ÖNCEKİ SORUN: hero kutusunun oranı ekran genişliğiyle değişiyordu
   (mobilde 0,91:1, 1920'de 3,10:1); banner ise sabit 2,74:1. object-fit
   "cover" farkı kapatmak için görseli BÜYÜTÜP kesiyordu — 1440 px'te
   bannerın yalnızca %88'i, mobilde %33'ü görünüyordu.

   ÇÖZÜM: kutu bannerın oranına kilitlendi, böylece görsel hiç kırpılmıyor
   ve hiç büyütülmüyor. Dar ekranda banner kendi bloğunda üstte durur,
   yazı altına iner — üst üste binme olmadığı için perdeye de gerek kalmaz.

   Banner oranı değişirse tek yer güncellenir: --banner-oran
   ------------------------------------------------------------------------ */

.albim-hero {
  --banner-oran: 3840 / 1400;   /* 2,74:1 */
  position: relative;
  isolation: isolate;
}

/* ---------------------------------------------- dar ekran: üst üste binme yok */

.albim-hero__fon {
  position: static;
  display: block;
  width: 100%;
}
.albim-hero__fon .albim-yuva {
  /* Yuva varsayılanı absolute; dar ekranda banner akışta durmalı ki
     kap yükseklik alsın ve yazının üstüne binmesin. */
  position: relative;
  inset: auto;
  width: 100%;

  /* Dar ekranda banner KIRPILMAZ: kendi doğal oranında, bütün olarak
     görünür. Yükseklik görselden gelir, kutudan değil — böylece hangi
     banner yüklenirse yüklensin kompozisyonu bozulmaz.
     (Albim tercihi: tamamı görünsün, küçük olsun.) */
  aspect-ratio: auto;
}
/* <picture> sarmalayıcısı varsayılan olarak içeriği kadar yükseliyor;
   img'in height:100% değeri ona göre hesaplandığı için yuva boş kalıyordu. */
.albim-hero__fon picture {
  display: block;
  width: 100%;
}

.albim-hero__fon img {
  display: block;
  width: 100%;
  height: auto;          /* doğal oran — kırpma yok */
}



.albim-hero__in {
  background: var(--albim-kirmizi);
  padding-block: var(--a-5);
}
.albim-hero__metin { max-width: 34rem; color: var(--zemin-yuzey); }

/* ------------------------------------------- geniş ekran: yazı bannerın üstünde
   Eşik 1024: albim.fr'deki gibi yazı bannerın ÜSTÜNDE dursun istiyoruz.
   Bant alçaldıkça bannerın sakin alanı da daralıyor (çapraz kesim yüzünden
   üstte %37, altta %16); bu yüzden 1400 px altında yazı bloğu sıkışık
   ölçülere geçer — başlık ve düğmeler küçülür, blok kısalır ve dar uca
   düşmez. 1024 px altında bant yazıyı taşıyamayacak kadar alçalıyor;
   orada yazı bannerın altına iner. */

@media (min-width: 1024px) {

  .albim-hero__fon {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  /* Yüzde yükseklik zinciri <picture> üzerinden güvenilir çözülmüyor
     (yuva grid, picture blok). Mutlak konumlandırma kesin sonuç veriyor. */
  .albim-hero__fon .albim-yuva { position: absolute; inset: 0; height: 100%; }
  .albim-hero__fon picture { position: absolute; inset: 0; }
  .albim-hero__fon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Bant oranı: bannerın kendi oranı (2,74:1) 1440 px'te 525 px'lik iri bir
     blok yapıyordu. 3,2:1'e çekilince 450 px'e iniyor — albim.fr'deki bandın
     (3,69:1) yakınına geliyor. object-position "bottom" olduğu için kırpılan
     yer bannerın ÜSTÜNDEKİ boş alan; ürünler ve logo hiç kesilmiyor.

     Yeni banner 3840 × 1200 (3,2:1) çizilirse hiç kırpma da olmaz. */
  /* Bant yüksekliği yüklenen bannerın gerçek oranından gelir (parça onu
     --banner-oran olarak yayınlıyor). Kırpma yok, büyütme yok; daha kısa
     bir banner yüklenirse bant da kendiliğinden kısalır.

     ÖLÇÜLDÜ: bu bannerın sakin alanı aşağı doğru daralan bir üçgen.
     Bandı 2,85:1'in altına indirince düğmeler o dar uca düşüp okunmaz
     oluyor (1,40:1). Kısa bant istiyorsak yeni bannerın sakin alanı
     DİKDÖRTGEN olmalı — o zaman 3,3:1 (1440'ta 436 px) sorunsuz. */
  .albim-hero { aspect-ratio: var(--hero-oran, 3840 / 1400); }

  .albim-hero__in {
    background: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding-block: 0;
  }

  /* Yazı, bannerın solda bıraktığı sakin alanda kalır.
     29rem = 464 px; 1320 px'lik kapta soldan %35'e kadar uzanır. */
  .albim-hero__metin { max-width: 29rem; }
}

/* --------------------------------------------- dizüstü: sıkışık yazı bloğu
   1024–1399 arasında bant 374–511 px. Normal ölçülerle yazı bloğu (364 px)
   bandın dibine dayanıyor ve düğmeler bannerın dar ucuna düşüyordu.
   Burada blok kısaltılır: başlık küçülür, paragraf 2 satıra iner,
   düğmeler ufalır. */

@media (min-width: 1024px) and (max-width: 1399px) {

  .albim-hero__metin { max-width: 25rem; gap: var(--a-2); }


  .albim-hero-baslik { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }

  .albim-hero__alt {
    font-size: var(--fs-xs);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .albim-hero .albim-btn {
    min-height: 38px;
    padding-inline: 16px;
    font-size: var(--fs-xs);
  }

  .albim-hero .albim-rozet { font-size: 10px; padding-block: 3px; }
}



/* ------------------------------- kahraman alan: ana eylem düğmesi görünürlüğü

   SORUN: kahraman alanın zemini bir BANNER GÖRSELİ ve o bölgede kırmızı-turuncu
   (ölçtüm: #B6441D). Ana düğme de marka kırmızısı (#DA361F). Ekrandan piksel
   örnekleyerek ölçülen karşıtlık: 1,18:1 — yani düğme zemine karışıyor,
   pratikte görünmüyor.

   Yanındaki ikincil düğme beyaz olduğu için 4–5:1 ile öne çıkıyordu: ziyaretçinin
   gözü ANA eyleme değil ikincil eyleme gidiyordu.

   ÇÖZÜM: yalnız kahraman alanda ana düğme ters çevriliyor — beyaz zemin,
   kırmızı yazı. Marka rengi değişmiyor, sadece bu bölgede rolleri yer
   değiştiriyor: dolu düğme = ana eylem, çerçeveli düğme = ikincil.
   Sitenin geri kalanındaki düğmeler etkilenmiyor. */

.albim-hero .albim-btn--birincil {
  background: var(--zemin-yuzey);
  color: var(--albim-kirmizi);
}
.albim-hero .albim-btn--birincil:hover,
.albim-hero .albim-btn--birincil:focus-visible {
  background: #fff;
  color: var(--albim-kirmizi-koyu);
}
.albim-hero .albim-btn--birincil:active {
  background: var(--zemin-serit);
  color: var(--albim-kirmizi-koyu);
}

/* ------------------------------------------------- listeleme: mobil ritim
   Olculdu (390x844, iPhone 13): kategori sayfasinda ilk urun kartinin ustu
   y = 779 px. Cerez bandi 686'da basladigi icin ILK EKRANDA TEK BIR URUN
   PIKSELI YOKTU (5 listeleme sayfasinin 4'unde ayni). 779 px'in 288 px'i
   saf bosluktu: .albim-bolum padding-top 48 + .albim-yigin-l'in 5 gap'i x 48.
   Masaustu ritmi (48 px) 390 px'lik ekrana olceklenmemisti; .albim-bolum
   zaten 96 -> 48 olceklenirken gap sabit kalmisti.

   Burasi YALNIZCA listeleme sayfalarini (.albim-liste) ve YALNIZCA dar
   ekrani etkiler. Hicbir oge kaldirilmadi, hicbir metin degismedi -
   sadece dikey ritim mobil olcegine indirildi. */
@media (max-width: 767px) {

  .albim-liste.albim-bolum   { padding-top: var(--a-3); }   /* 48 -> 16 */
  .albim-liste.albim-yigin-l { gap: var(--a-3); }           /* 48 -> 16 */

  /* Baslik yigini: h1 / aciklama / kivrim birbirine ait, uzak durmasinlar */
  .albim-liste > header.albim-yigin { gap: var(--a-2); }    /* 16 -> 8 */

  /* Filtre cubugu mobilde iki satira sariyor (44 + 44). Satir arasi ve
     dolgu masaustu olcegindeydi. */
  .albim-liste .albim-filtre { padding-block: var(--a-2); gap: var(--a-2); }
}

/* Urun izgarasi bos mesaj gosterirken kapanir - yoksa cumleler
   sutunlara bolunup iki ayri sey gibi okunuyor (begenilenler listesi). */
.albim-urun-izgara.albim-izgara-kapali {
  display: block;
  max-width: 46ch;
}
.albim-urun-izgara.albim-izgara-kapali > p + p { margin-top: var(--a-2); }

/* ---------------------------------------------------------------- VIDEO
   Tiklayinca yuklenen video kutusu (template-parts/video.php).
   Iframe sayfa acilirken YOK; burada yalnizca kapak gorseli var.
   Oran 16/9 sabit: tiklayinca iframe geldiginde sayfa ziplamiyor. */
.albim-video {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}
.albim-video__ac {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--a-r, 12px);
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.albim-video__kapak {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .82;
  transition: opacity .18s ease;
}
.albim-video__ac:hover .albim-video__kapak,
.albim-video__ac:focus-visible .albim-video__kapak { opacity: 1; }
.albim-video__oynat {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #111;
}
.albim-video__ac:hover .albim-video__oynat { background: #fff; }
.albim-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--a-r, 12px);
  display: block;
}
.albim-video__yazi { margin-top: var(--a-2); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .albim-video__kapak { transition: none; }
}