/* ==========================================================================
   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 {
  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);
}
.albim-kart__fiyat-satiri {
  display: flex;
  align-items: baseline;
  gap: var(--a-2);
  margin-top: var(--a-1);
}
.albim-kart__eylem { margin-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);
}
@media (min-width: 720px)  { .albim-urun-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); } }
@media (min-width: 1024px) { .albim-urun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ========================================================= 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;
  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);
}
.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; }