/* ==========================================================================
   ALBIM — Bileşenler
   Ölçüler tasarım dokümanından ÖLÇÜLEREK alındı (tahmin değil).
   Kural: renk tek başına anlam taşımaz — her durum yazıyla da belirtilir.
   ========================================================================== */

/* ============================================================== BUTONLAR
   Ölçülen: 48 px yükseklik · 6 px köşe · 0 26 px dolgu · 16/600
   Dokunma hedefi 48 px ≥ 44 px minimum.                                  */

.albim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-2);
  min-height: var(--yukseklik-buton);
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: var(--kose);
  font-family: var(--yazi-govde);
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}
.albim-btn:hover { text-decoration: none; }

/* Birincil — sepete ekle, ana eylem */
.albim-btn--birincil {
  background: var(--albim-kirmizi);
  color: var(--uzeri-kirmizi);
}
.albim-btn--birincil:hover  { background: var(--albim-kirmizi-koyu); color: var(--uzeri-kirmizi); }
.albim-btn--birincil:active { background: var(--albim-kirmizi-koyu); }

/* İkincil — çerçeveli */
.albim-btn--ikincil {
  background: transparent;
  color: var(--renk-murekkep);
  border-color: var(--renk-murekkep);
}
.albim-btn--ikincil:hover {
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
}

/* Ödeme — bakır. Sepetteki kırmızıdan ayrışsın diye bilinçli farklı. */
.albim-btn--odeme {
  background: var(--albim-bakir);
  color: var(--uzeri-kirmizi);
}
.albim-btn--odeme:hover { filter: brightness(.92); }

/* Sessiz — düşük vurgulu üçüncül eylem */
.albim-btn--sessiz {
  background: transparent;
  color: var(--renk-govde);
  border-color: var(--cizgi);
}
.albim-btn--sessiz:hover { background: var(--zemin-serit); color: var(--renk-murekkep); }

/* Pasif — stokta yok, kesim saati geçti */
.albim-btn[disabled],
.albim-btn--pasif {
  background: var(--zemin-serit);
  color: var(--renk-soluk);
  border-color: var(--cizgi);
  cursor: not-allowed;
  pointer-events: none;
}

.albim-btn--tam { width: 100%; }

/* =============================================================== ROZETLER
   Ölçülen: 28 px yükseklik · 4 px köşe · 0 10 px dolgu · 12/600
   Kartta en fazla 2 rozet — sol üstte durum, sağ üstte indirim.          */

.albim-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--yukseklik-rozet);
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: var(--kose-kucuk);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-kalin);
  line-height: 1;
  white-space: nowrap;
}

/* Çerçeveli — nitelik: %100 Halal, El Yapımı, Günlük Taze */
.albim-rozet--cerceve {
  background: var(--zemin-yuzey);
  color: var(--renk-murekkep);
  border-color: var(--cizgi);
  letter-spacing: .01em;
}

/* Dolu koyu — durum: Çok Satan */
.albim-rozet--koyu {
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
}

/* İndirim — bakır, tek yerde kullanılır */
.albim-rozet--indirim {
  background: var(--albim-bakir);
  color: var(--uzeri-kirmizi);
  font-weight: var(--fw-agir);
}

/* Pasif — Stokta yok */
.albim-rozet--pasif {
  background: var(--zemin-serit);
  color: var(--renk-soluk);
  border-color: var(--cizgi);
}

/* Canlı — kamyon yolda. Nokta yanıp söner, ama metin de "Yolda" der. */
.albim-rozet--canli {
  background: var(--albim-kirmizi);
  color: var(--uzeri-kirmizi);
}
.albim-rozet--canli::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: albim-nabiz 1.6s ease-in-out infinite;
}
@keyframes albim-nabiz { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* Başarı — Sipariş açık, Teslim edildi */
.albim-rozet--basari {
  background: color-mix(in srgb, var(--renk-basari) 12%, transparent);
  color: var(--renk-basari);
  border-color: color-mix(in srgb, var(--renk-basari) 30%, transparent);
}

/* ================================================================== KUTU
   Ölçülen: #FAF6F1 zemin · 1 px #E0D6CB · 10 px köşe · 48/60 dolgu       */

.albim-kutu {
  background: var(--zemin-sayfa);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  padding: var(--a-4);
}
@media (min-width: 768px) {
  .albim-kutu { padding: var(--a-6) 60px; }
}
.albim-kutu--yuzey { background: var(--zemin-yuzey); }
.albim-kutu--sik   { padding: var(--a-3); }

/* =========================================================== ÜRÜN KARTI
   Dört durum: varsayılan · sepete eklendi · indirimli · stokta yok.
   Izgara: mobil 2 kolon, masaüstü 4 kolon.
   €/kg birim fiyat her kartta ZORUNLU (Fransız mevzuatı).                */

.albim-kart {
  /* Favori dugmesi artik dogrudan kartin cocugu; konumlandirma baglami burasi. */
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  overflow: hidden;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.albim-kart:hover {
  border-color: var(--cizgi-belirgin);
  box-shadow: var(--golge-kart);
}

.albim-kart__gorsel {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--zemin-serit);
}
.albim-kart__gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Rozetler görselin üstünde — sol üst durum, sağ üst indirim */
.albim-kart__rozetler {
  position: absolute;
  inset: var(--a-2) var(--a-2) auto var(--a-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-2);
  pointer-events: none;
}

.albim-kart__govde {
  display: flex;
  flex-direction: column;
  gap: var(--a-1);
  padding: var(--a-3);
  flex: 1;
}


.albim-kart__ad {
  font-size: var(--fs-base);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-orta);
}
.albim-kart__format {
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}
/*
 * Satir SARIYOR. Sarmadigi icin ustu cizili eski fiyat kartin disina
 * tasip kirpiliyordu: "150,00 EUR" yerine "150,00" gorunuyordu, yani
 * ekranda yanlis bir rakam duruyordu (magazada 16-20 px tasma olculdu).
 * Sigmiyorsa alt satira insin, yarim kalmasin.
 */
.albim-kart__fiyat-satiri {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--a-1) var(--a-2);
  margin-top: var(--a-1);
}
/*
 * "Sepete ekle" dugmeleri kartin ALTINA yaslanir.
 * Onceden sabit bir ust bosluk vardi; urun adi bir satir mi iki satir mi
 * surdugune gore dugmeler kayiyordu — ayni siradaki kartlarda 53 piksele
 * varan fark olculdu. 'auto' bosluğu asagi iterek hepsini hizaliyor,
 * en az bosluk da kartin kendi dolgusundan geliyor.
 */
.albim-kart__eylem { margin-top: auto; padding-top: var(--a-3); }

/* Durum: sepete eklendi — buton yerine adet ayarlayıcı */
.albim-kart[data-durum="eklendi"] .albim-kart__eylem-ekle { display: none; }
.albim-kart[data-durum="eklendi"] .albim-kart__eylem-adet { display: flex; }
.albim-kart__eylem-adet { display: none; }

/* Durum: stokta yok — görsel soluk, üstünde yazı, eylem "haber ver" */
.albim-kart[data-durum="yok"] .albim-kart__gorsel img { opacity: .45; }
.albim-kart[data-durum="yok"] .albim-kart__gorsel::after {
  content: attr(data-yok-metin);
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  margin-inline: auto;
  width: max-content;
  padding: 6px 10px;
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-kalin);
  color: var(--renk-soluk);
}

/* Ürün ızgarası */
.albim-urun-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-3);
}
/*
 * SUTUN SAYISI SABIT DEGIL, KART GENISLIGINE BAGLI (5 Eylul 2026).
 *
 * Onceden 3 ve 4 sutun sabitti; kart kuculunce 1440px'te 4 sutun
 * gereginden genis kart uretiyordu (olctum: 312px). auto-fill ile ayni
 * kural her genislikte kartin boyunu 190-230px araliginda tutuyor ve
 * masaustunde 5-6 sutun cikiyor - Kral'in "daha cok urun gorunsun"
 * istegi burada karsilaniyor.
 *
 * Mobilde 2 sutun BILEREK KALIYOR: kategori sayfasinda musteri o
 * kategoriyi geziyor, yatay serit orada yanlis olurdu (serit ana sayfa ve
 * /kamyon/ icin, oralarda amac "goz gezdir").
 */
@media (min-width: 720px) {
  .albim-urun-izgara {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--a-3);
  }
}

/* ----------------------------------- "Çok satanlar": dar ekranda tek sıra

   Bölümün sınıfı zaten "şerit" diyor ama mobilde iki sütunlu ızgara açılıp
   dört sıra oluyordu; ölçüldü: bölüm 1 012 px, yani ana sayfanın bir
   ekrandan fazlası tek bir bölüme gidiyordu.

   Tek sıra yatay kaydırıcıya iniyor. Ürün SAYISI değişmiyor — hiçbiri
   gizlenmiyor, yan yana diziliyor. Kart genişliği %78: bir sonraki kartın
   kenarı bilerek görünüyor, kaydığı böylece belli oluyor. Kenardaki solma
   maskesi de kategori şeridindekiyle aynı işi yapıyor. */
@media (max-width: 639px) {
  .albim-bolum--serit .albim-urun-izgara {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* kartların gölgesi kırpılmasın diye dikey pay */
    padding-block: 2px;
  }

  /* Solma maskesi YÖNE bağlı: yalnızca o tarafta gerçekten kart kaldıysa
     çıkıyor. Sabit bir sağ solma bıraksaydım sona gelindiğinde hâlâ "daha
     var" demiş olurdu — kategori şeridinde tam bundan kaçınmıştım, burada
     ilk denemede aynı hataya düştüm ve ölçerken yakaladım. */
  .albim-bolum--serit .albim-urun-izgara[data-kayar~="sag"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .albim-bolum--serit .albim-urun-izgara[data-kayar~="sol"] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
  }
  .albim-bolum--serit .albim-urun-izgara[data-kayar~="sol"][data-kayar~="sag"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }

  .albim-bolum--serit .albim-urun-izgara > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

}

/* ========================================================= ADET AYARLAYICI */

.albim-adet {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
  background: var(--zemin-yuzey);
}
.albim-adet button {
  width: var(--dokunma-min);
  height: var(--dokunma-min);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--albim-kirmizi);
  font-size: var(--fs-md);
  font-weight: var(--fw-kalin);
}
.albim-adet button:hover:not([disabled]) { background: var(--albim-kirmizi-soluk); }
.albim-adet button[disabled] { color: var(--renk-soluk); cursor: not-allowed; }
.albim-adet__deger {
  min-width: 40px;
  text-align: center;
  font-weight: var(--fw-kalin);
  font-variant-numeric: tabular-nums;
}

/* ================================================================= FORM
   Ölçülen: 50 px yükseklik · 6 px köşe · 0 14 px dolgu · 1 px #C9BEB3    */

.albim-alan { display: flex; flex-direction: column; gap: 6px; }

.albim-alan__etiket {
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
}
.albim-alan__etiket span {
  font-weight: var(--fw-normal);
  color: var(--renk-soluk);
}

.albim-girdi,
.albim-secim,
.albim-metin-alani {
  width: 100%;
  min-height: var(--yukseklik-form);
  padding: 0 14px;
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi-belirgin);
  border-radius: var(--kose);
  font-size: var(--fs-sm);
  color: var(--renk-murekkep);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.albim-metin-alani { padding: 12px 14px; min-height: 96px; resize: vertical; }

.albim-girdi::placeholder { color: var(--renk-soluk); }

.albim-girdi:hover,
.albim-secim:hover { border-color: var(--renk-soluk); }

.albim-girdi:focus,
.albim-secim:focus,
.albim-metin-alani:focus {
  outline: none;
  border-color: var(--albim-kirmizi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--albim-kirmizi) 14%, transparent);
}

/* Hata — renk TEK BAŞINA anlam taşımaz, yanında ikon + metin var */
.albim-alan[data-hata] .albim-girdi { border-color: var(--renk-hata); }
.albim-alan__hata {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--renk-hata);
}
.albim-alan__hata::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-agir);
  flex: none;
}

.albim-alan__yardim {
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}

/* Onay kutusu — rıza için. ASLA ön işaretli olmaz. */
.albim-onay {
  display: flex;
  align-items: flex-start;
  gap: var(--a-2);
  cursor: pointer;
  font-size: var(--fs-xs);
  line-height: var(--lh-govde);
}
.albim-onay input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--albim-kirmizi);
}

/* ================================================================= ÇİP
   Filtre çipi — tıklanabilir, silinebilir.                              */

.albim-cip {
  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: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  color: var(--renk-murekkep);
}
.albim-cip:hover { border-color: var(--renk-soluk); }
.albim-cip[aria-pressed="true"],
.albim-cip--aktif {
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
  border-color: var(--renk-murekkep);
}
.albim-cip__sil {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: var(--fs-xs);
  line-height: 1;
}
.albim-cip__sil:hover { background: color-mix(in srgb, currentColor 18%, transparent); }

/* ============================================================ AKORDEON */

.albim-akordeon {
  border-top: 1px solid var(--cizgi-ince);
}
.albim-akordeon__baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  width: 100%;
  min-height: 64px;
  padding: var(--a-3) 0;
  background: transparent;
  border: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-kalin);
  text-align: left;
}
.albim-akordeon__ok {
  flex: none;
  transition: rotate var(--gecis);
}
.albim-akordeon[open] .albim-akordeon__ok { rotate: 180deg; }
.albim-akordeon__govde { padding-bottom: var(--a-4); }

/* ============================================================== ÇEKMECE
   Mini sepet ve mobil menü.                                             */

.albim-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-ortu[data-acik] { opacity: 1; visibility: visible; }

.albim-cekmece {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100vw);
  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);
}
.albim-cekmece[data-acik] { translate: 0 0; visibility: visible; }
.albim-cekmece__baslik {
  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-cekmece__govde { flex: 1; overflow-y: auto; padding: var(--a-3) var(--a-4); }
.albim-cekmece__alt   { border-top: 1px solid var(--cizgi-ince); padding: var(--a-3) var(--a-4); }

/* ======================================================== MOD DÜĞMESİ
   Kargo ⇄ Kamyon. Sitenin iki kapsamı arasında geçiş.                   */

.albim-mod {
  display: inline-flex;
  padding: 3px;
  background: var(--zemin-serit);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
}
.albim-mod__secenek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding-inline: var(--a-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  color: var(--renk-govde);
  transition: background-color var(--gecis), color var(--gecis);
}
.albim-mod__secenek[aria-selected="true"] {
  background: var(--zemin-yuzey);
  color: var(--renk-murekkep);
  box-shadow: var(--golge-kart);
}

/* ============================================================ BİLDİRİM
   Sayfa içi uyarı kutusu. İkon + başlık + metin; renk tek başına değil. */

.albim-uyari {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
  padding: var(--a-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--zemin-serit);
  font-size: var(--fs-xs);
}

/*
 * PARAGRAFLAR ALT ALTA, YAN YANA DEGIL.
 *
 * Kutu "ikon + metin" icin yan yana dizecek sekilde yazilmis. Icine birden
 * cok <p> konunca her biri bir SUTUN oluyordu: 390 pikselde uc sutun, yani
 * satir basina bir kelime, ve sondaki dugmeler ekranin disina tasiyordu.
 * Olctum ve ekran goruntusunde de goruldu (eve teslimat uyarisi).
 *
 * flex-wrap + tam genislik: paragraflar alt alta diziliyor, ikonlu
 * kullanimlar (span/svg + metin) yan yana kalmaya devam ediyor.
 */
.albim-uyari > p {
  flex: 1 1 100%;
  margin: 0;
}

/* Dugmeler tasmasin: dar ekranda alt alta ve tam genislik. */
@media (max-width: 560px) {
  .albim-uyari > p:last-child { display: flex; flex-wrap: wrap; gap: var(--a-2); }
  .albim-uyari .albim-btn { flex: 1 1 auto; justify-content: center; }
}
.albim-uyari--marka { background: var(--albim-kirmizi-soluk); border-color: color-mix(in srgb, var(--albim-kirmizi) 24%, transparent); }
.albim-uyari--basari{ background: color-mix(in srgb, var(--renk-basari) 8%, transparent); border-color: color-mix(in srgb, var(--renk-basari) 28%, transparent); }

/* ============================================== DEMO VERİ İŞARETİ
   Gerçek olmayan veri gösteren her yerde zorunlu.                       */

.albim-demo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  color: var(--renk-soluk);
}
.albim-demo::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  border: 1.2px solid currentColor;
}

/* Kart başlığı bağlantısı — mürekkep rengi, kırmızı değil (kart zaten tıklanır) */
.albim-kart__ad a { color: inherit; }
.albim-kart__ad a:hover { color: var(--albim-kirmizi); text-decoration: none; }

/* Stokta yok — görselin üstüne yazı, kart soluk */
.albim-kart[data-durum="yok"] .albim-yuva { opacity: .55; }
.albim-kart[data-durum="yok"] .albim-kart__gorsel::after {
  content: attr(data-yok-metin);
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  margin-inline: auto;
  width: max-content;
  padding: 6px 10px;
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-kalin);
  color: var(--renk-soluk);
  z-index: 2;
}
.albim-kart__gorsel { position: relative; }


/*
 * TRANSLATEPRESS'IN KENDI YUZEN DIL SECICISI GIZLI.
 *
 * Sitenin kendi FR dugmesi ust barda duruyor. Eklentininki ekranin sag alt
 * kosesinde ikinci bir secici olarak beliriyor ve cerez seridinin ustune
 * biniyordu (ekran goruntusunde goruldu).
 *
 * Once eklentinin ayarindan kapatmayi denedim; ayari yazdim ama oge yine
 * basildi - eklenti bu secenegi baska bir anahtarda tutuyor olabilir.
 * Ayari kurcalamak yerine goruntuyu kesiyorum: tek kural, tek yer.
 * Islevi kaybetmiyoruz, cunku ayni isi yapan kendi dugmemiz var.
 */
.trp-floating-switcher,
.trp-language-switcher.trp-ls {
  display: none !important;
}

/* =========================================================================
   ÜRÜN ALANI — kategori şeritleri ve kompakt kart
   =========================================================================

   KRAL'ın yönü (5 Eylül 2026): kategori kategori ayrılsın, kartlar küçülsün,
   ekranda daha çok ürün görünsün. Sitenin diğer kısımları aynı kalır.

   ÖLÇÜLEN BAŞLANGIÇ: ana sayfada 4 kart vardı (kart 267px mobil / 312px
   masaüstü), /kamyon/ 32 kart (200/230px), kategori sayfası 4 kart
   (163/312px). Üç sayfanın hiçbirinde ilk ekranda ürün kartı görünmüyordu
   (ilkEkran=0), kategori sayfası hariç.                                   */

/* Kap: masaüstünde ızgara, mobilde yatay şerit.
   ROTA ŞERİDİ AYRI SINIF (.albim-serit-izgara) — ona dokunulmuyor. */
.albim-urun-serit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--a-3);
}

/*
 * KART YUKSEKLIKLERI (8 Eylul 2026, Kral bildirdi).
 * Serit bir izgara; [role="listitem"] sarmalayicilari esit yukseklige
 * uzuyor ama icindeki .albim-kart iceriginin boyunda kaliyordu. Sonuc:
 * adi iki satir suren urunun karti uzun, tek satirlik kisa - dugmeler
 * ayni hizada bitmiyordu. kamyon.css ayni sorunu rota seridinde bu
 * kaliplaartık cozmustu, ayni kalibi burada da kullaniyorum.
 */
.albim-urun-serit > [role="listitem"] { display: flex; }
.albim-urun-serit > [role="listitem"] > * { flex: 1; min-width: 0; }

@media (max-width: 699px) {
  /* Mobilde yatay şerit: ~2,3 kart görünür, gerisi "daha var" der.
     Yüzde değil sabit genişlik: 390px'te 44% iki kart + yarım kart
     gösteriyor; sabit 150px daha öngörülebilir ve dar telefonlarda da
     aynı davranıyor. */
  .albim-urun-serit {
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-block: 2px;
    /* Şerit kabın kenarına kadar aksın, ama ilk kart hizada kalsın. */
    margin-inline: calc(var(--sayfa-marj) * -1);
    padding-inline: var(--sayfa-marj);
  }
  .albim-urun-serit > * { scroll-snap-align: start; }
}

/* Kategori satırı başlığı
 *
 * DEGERLER a-3/a-5'ten a-2/a-4'e CEKILDI (7 Eylul 2026, #182) — bu bir
 * tasarim degisikligi DEGIL, var olan gorunumun tek yerde toplanmasi.
 *
 * kamyon.css bu blogun neredeyse birebir kopyasini daha dar bosluklarla
 * tasiyordu ve HER SAYFADA yuklendigi icin (olctum: /, /shop/, /kamyon/,
 * /profil/, /cart/, urun sayfasi, /checkout/) o dar degerler zaten her
 * yerde kazaniyordu. Yani buradaki a-3/a-5 hicbir sayfada gecerli degildi.
 *
 * Asil zarari gorunum degil, YANILTMASIYDI: urun seritlerinin boslugunu
 * degistirmek isteyen biri bu dosyayi duzenler, HICBIR SEY DEGISMEZ ve
 * sebebini bulamaz. Simdi tek yer burasi; kamyon.css'teki kopya kaldirildi.
 */
.albim-userit + .albim-userit { margin-top: var(--a-4); }
.albim-userit__basi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-2);
  margin-bottom: var(--a-2);
}
.albim-userit__ad {
  font-size: var(--fs-md);
  font-weight: var(--fw-kalin);
}
.albim-userit__tumu { white-space: nowrap; }

/* ---------------------------------------------------------------- KART
   Kart küçülüyor: iç boşluk sıkılaşıyor, başlık iki satırla sınırlanıyor,
   fiyat ile düğme aynı satıra geliyor. Amaç ekranda daha çok ürün. */

/* T-2: görsel kutusu BEYAZ. Üç ton vardı — krem kutu, pembemsi börek
   fotoları, saydam mantı PNG'leri — ve kart gövdesi beyazdı; kutu ile
   gövde arasında görünür bir çizgi oluşuyordu. */
.albim-kart__gorsel { background: var(--zemin-yuzey); }

.albim-kart__govde {
  gap: 6px;
  padding: var(--a-2) var(--a-2) var(--a-3);
}

/* T-5: başlık en fazla iki satır. Gramaj adın içinde de geçtiği için
   (ör. "Patatesli Tepsi Böreği 800g") mobilde üç satıra kadar çıkıyordu.
   NOT: gramajı adın içinden ÇIKARMADIK — Fransızca ürün adı çevirileri
   tam adla eşleşiyor ("Kıymalı Kayseri Mantısı 2.5kg" → "Manti Kayseri
   2.5kg"), adı kısaltmak Fransızca adları Türkçeye düşürürdü. Bu bir veri
   işi, ayrıca bildirildi. */
.albim-kart__ad {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.albim-kart__format { font-size: var(--fs-2xs); }

/* Fiyat, adın ardından en belirgin öge. */
.albim-kart .albim-fiyat { font-size: var(--fs-lg); font-weight: var(--fw-kalin); }
.albim-kart .albim-fiyat-eski { font-size: var(--fs-xs); }
.albim-kart .albim-birim-fiyat { font-size: var(--fs-2xs); color: var(--renk-soluk); }

/* Fiyat ve düğme aynı satırda; sığmazsa düğme alta iner. */
.albim-kart__alt {
  margin-top: auto;
  padding-top: var(--a-2);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a-2);
}
.albim-kart__fiyatlar { min-width: 0; }
.albim-kart__alt .albim-kart__eylem { margin-top: 0; padding-top: 0; }

/* Kompakt düğme: 40px yükseklik, dar iç boşluk.
   T-7: mobil kategori kartında yazı kenara 7px taşıyordu — sebebi geniş
   yatay dolguydu; 12px'e indi ve satır sarma açıldı. */
.albim-kart__eylem .albim-btn {
  min-height: 40px;
  padding-block: 0;
  padding-inline: 12px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .albim-kart__eylem .albim-btn { padding-inline: 10px; }
}

/* Dar kartta düğme tam genişliğe geçsin — sıkışıp taşmasın.
   Kap sorgusu (@container) yerine düz satır sarma kullanıyoruz: kap
   sorgusu icin karta container-type koymak gerekiyordu, o da kartin
   genisliginin icerikten etkilenmesini kesiyor - sekiz ayri yerde
   kullanilan bir bilesende olcmeden alinacak bir risk degil.
   Sigmayan dugme alt satira iniyor ve orada tam genislige yayiliyor. */
.albim-kart__alt > .albim-kart__eylem { flex: 1 1 auto; }
.albim-kart__eylem .albim-btn--tam { width: 100%; }
.albim-kart__fiyatlar { flex: 1 1 auto; }

/* T-6: rozetlerin ikisi de SOL ÜSTTE, kalp sabit sağ üstte.
   Önceden indirim rozeti sağ üstteydi ve kalple çakışıyordu; kalp de
   indirim varken 27px aşağı kayıyordu, yani konumu ürüne göre
   değişiyordu. */
.albim-kart__rozetler {
  justify-content: flex-start;
  flex-wrap: wrap;
  inset-inline-end: 44px;   /* kalbe yer */
}