/* ==========================================================================
   Neds E-Ticaret — Mağaza Teması (Neds)
   Tema değişkenleri panelden yönetilir; buradaki değerler yedektir.
   ========================================================================== */

:root {
  --renk-birincil: #111827;
  --renk-ikincil: #6b7280;
  --renk-vurgu: #e11d48;
  --renk-basari: #059669;
  --renk-zemin: #ffffff;
  --renk-zemin-2: #f7f8fa;
  --renk-metin: #111827;
  --renk-metin-2: #55606d;
  --renk-metin-3: #8b95a1;
  --renk-kenarlik: #e6e9ee;
  --yazi-basimi: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yazi-govde: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kose-yaricap: 10px;
  --kap-genislik: 1280px;
  --golge: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 24px -12px rgba(17, 24, 39, .16);
  --golge-lg: 0 20px 50px -20px rgba(17, 24, 39, .3);
  --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  font-family: var(--yazi-govde);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--yazi-basimi); margin: 0; line-height: 1.22; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(26px, 3.4vw, 38px); }
h2 { font-size: clamp(21px, 2.4vw, 28px); }
h3 { font-size: 18px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.kap { max-width: var(--kap-genislik); margin: 0 auto; padding: 0 20px; }
.ico { display: inline-block; vertical-align: middle; width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- Duyuru */

.duyuru {
  background: var(--renk-birincil); color: #fff; text-align: center;
  font-size: 13px; padding: 9px 16px; letter-spacing: .01em;
}
.duyuru a { text-decoration: underline; }

/* ---------------------------------------------------------------- Başlık */

.ustluk { border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-zemin); position: sticky; top: 0; z-index: 60; }
.ustluk__ic { display: flex; align-items: center; gap: 20px; height: 72px; }

.logo { font-family: var(--yazi-basimi); font-weight: 800; font-size: 22px; letter-spacing: -.03em; flex: none; }
.logo img { max-height: 40px; width: auto; }

.ust-ara { flex: 1; max-width: 520px; position: relative; }
.ust-ara input {
  width: 100%; height: 42px; padding: 0 16px 0 42px;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  background: var(--renk-zemin-2); font-size: 14.5px; font-family: inherit;
}
.ust-ara input:focus { outline: none; border-color: var(--renk-birincil); background: #fff; }
.ust-ara button {
  position: absolute; top: 5px; right: 6px; width: 32px; height: 32px;
  border: none; background: var(--renk-birincil); color: #fff; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.ust-ara button .ico { width: 16px; height: 16px; }

.ust-eylemler { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ust-eylem {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 11px; border-radius: 10px; font-size: 11.5px; color: var(--renk-metin-2);
  position: relative; transition: var(--gecis); background: none; border: none; cursor: pointer;
}
.ust-eylem:hover { background: var(--renk-zemin-2); color: var(--renk-metin); }
.ust-eylem__sayac {
  position: absolute; top: 2px; right: 6px; background: var(--renk-vurgu); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ---------------------------------------------------------------- Menü */

.ana-menu { border-top: 1px solid var(--renk-kenarlik); }
.ana-menu__liste { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ana-menu__liste > li { position: relative; }
.ana-menu__liste > li > a {
  display: flex; align-items: center; gap: 6px; padding: 13px 14px;
  font-size: 14px; font-weight: 550; color: var(--renk-metin); white-space: nowrap;
}
.ana-menu__liste > li > a:hover { color: var(--renk-vurgu); }
.ana-menu__rozet {
  background: var(--renk-vurgu); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}

.mega {
  position: absolute; top: 100%; left: 0; min-width: 640px; background: #fff;
  border: 1px solid var(--renk-kenarlik); border-radius: 0 0 14px 14px;
  box-shadow: var(--golge-lg); padding: 22px; display: none; z-index: 70;
}
.ana-menu__liste > li:hover .mega { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mega h4 { font-size: 13px; margin-bottom: 8px; color: var(--renk-metin-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.mega a { display: block; padding: 4px 0; font-size: 14px; color: var(--renk-metin-2); }
.mega a:hover { color: var(--renk-vurgu); }

/* ---------------------------------------------------------------- Kırıntı */

.kirinti { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--renk-metin-3); padding: 16px 0; }
.kirinti a:hover { color: var(--renk-vurgu); }

/* ---------------------------------------------------------------- Slider */

.slider { position: relative; overflow: hidden; border-radius: var(--kose-yaricap); }
.slider__ray { display: flex; transition: transform 550ms cubic-bezier(.4, 0, .2, 1); }
.slayt { min-width: 100%; position: relative; aspect-ratio: 21 / 8; background: linear-gradient(120deg, #1e293b, #334155); }
.slayt img { width: 100%; height: 100%; object-fit: cover; }
.slayt__ic {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(24px, 6vw, 72px); color: #fff; max-width: 620px;
}
.slayt__ic h2 { font-size: clamp(24px, 3.6vw, 42px); margin-bottom: 10px; color: inherit; }
.slayt__ic p { font-size: clamp(14px, 1.4vw, 18px); opacity: .92; margin-bottom: 20px; }
.slider__nokta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.slider__nokta i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.slider__nokta i.aktif { background: #fff; width: 22px; border-radius: 4px; }
.slider__ok {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  border-radius: 50%; background: rgba(255,255,255,.9); border: none; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--golge);
}
.slider__ok--sol { left: 16px; }
.slider__ok--sag { right: 16px; }

/* ---------------------------------------------------------------- Bölüm */

.bolum { padding: 46px 0; }
.bolum--dar { padding: 30px 0; }
.bolum--zemin { background: var(--renk-zemin-2); }
.bolum__baslik { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.bolum__baslik h2 { flex: 1; min-width: 200px; }
.bolum__baslik a { font-size: 14px; color: var(--renk-metin-2); font-weight: 550; }
.bolum__baslik a:hover { color: var(--renk-vurgu); }

/* ---------------------------------------------------------------- Avantaj şeridi */

.avantajlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.avantaj { display: flex; gap: 13px; align-items: flex-start; }
.avantaj__ikon {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--renk-zemin-2); color: var(--renk-birincil);
}
.avantaj strong { display: block; font-size: 14.5px; }
.avantaj span { font-size: 13px; color: var(--renk-metin-3); }

/* ---------------------------------------------------------------- Ürün kartı */

/* Sütun sayısı temanın product_columns ayarından gelir. */
.urun-izgara { display: grid; gap: 18px; grid-template-columns: repeat(var(--urun-kolon, 4), minmax(0, 1fr)); }
.urun-izgara--2 { grid-template-columns: repeat(2, 1fr); }
.urun-izgara--3 { grid-template-columns: repeat(min(3, var(--urun-kolon, 3)), minmax(0, 1fr)); }
.urun-izgara--5 { grid-template-columns: repeat(var(--urun-kolon, 5), minmax(0, 1fr)); }

.urun-kart {
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  overflow: hidden; background: #fff; transition: var(--gecis); position: relative;
  display: flex; flex-direction: column;
}
.urun-kart:hover { box-shadow: var(--golge); transform: translateY(-2px); }
.urun-kart__gorsel { position: relative; aspect-ratio: 1; background: var(--renk-zemin-2); overflow: hidden; }
.urun-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.urun-kart:hover .urun-kart__gorsel img { transform: scale(1.045); }
.urun-kart__rozetler { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.urun-rozet {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: var(--renk-vurgu); color: #fff; letter-spacing: .01em;
}
.urun-rozet--yeni { background: var(--renk-birincil); }
.urun-rozet--basari { background: var(--renk-basari); }
.urun-kart__hizli {
  position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; gap: 6px;
  opacity: 0; transform: translateY(6px); transition: var(--gecis);
}
.urun-kart:hover .urun-kart__hizli { opacity: 1; transform: translateY(0); }
.urun-kart__ic { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.urun-kart__marka { font-size: 11.5px; color: var(--renk-metin-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.urun-kart__ad {
  font-size: 14px; font-weight: 550; line-height: 1.45; color: var(--renk-metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.urun-kart__puan { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--renk-metin-3); }
.urun-kart__puan .yildiz { color: #f59e0b; letter-spacing: -1px; }
.urun-kart__fiyat { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; }
.fiyat { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.fiyat--eski { font-size: 13.5px; color: var(--renk-metin-3); text-decoration: line-through; font-weight: 400; }
.fiyat--indirim { color: var(--renk-vurgu); }
.urun-kart__taksit { font-size: 11.5px; color: var(--renk-metin-3); }
.urun-kart__stok { font-size: 12px; color: var(--renk-basari); font-weight: 550; }
.urun-kart__stok--yok { color: var(--renk-metin-3); }

/* ---------------------------------------------------------------- Düğme */

.dgm {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--kose-yaricap);
  border: 1px solid var(--renk-kenarlik); background: #fff; color: var(--renk-metin);
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: var(--gecis); font-family: inherit;
  /* Yükseklik 44px sabit: yazı iki satıra bölününce kutudan taşıyordu
     ("Alışverişe devam / et"). Düğme yazısı bölünmez. */
  white-space: nowrap;
}
/* Yalnız sade düğme: dolu olanlar kendi zeminini korusun,
   yoksa beyaz yazı açık zeminde kayboluyor. */
.dgm:not(.dgm--ana):not(.dgm--vurgu):not(.dgm--koyu):not(.dgm--tehlike):hover {
  background: var(--renk-zemin-2);
}
.dgm--ana:hover, .dgm--vurgu:hover, .dgm--koyu:hover, .dgm--tehlike:hover {
  color: #fff;
}
.dgm--ana { background: var(--renk-birincil); border-color: var(--renk-birincil); color: #fff; }
.dgm--ana:hover { filter: brightness(1.18); }
.dgm--vurgu { background: var(--renk-vurgu); border-color: var(--renk-vurgu); color: #fff; }
.dgm--vurgu:hover { filter: brightness(1.08); }
.dgm--kucuk { height: 36px; padding: 0 14px; font-size: 13.5px; }
.dgm--buyuk { height: 52px; padding: 0 28px; font-size: 16px; }
.dgm--tam { width: 100%; }
.dgm--daire { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.dgm[disabled] { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------------- Ürün sayfası */

.urun-detay { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 40px; padding: 24px 0 40px; }
@media (max-width: 900px) { .urun-detay { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.galeri__ana { border: 1px solid var(--renk-kenarlik); border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: var(--renk-zemin-2); }
.galeri__ana img { width: 100%; height: 100%; object-fit: contain; }
.galeri__kucuk { display: flex; gap: 9px; margin-top: 11px; overflow-x: auto; padding-bottom: 4px; }
.galeri__kucuk button {
  width: 72px; height: 72px; border: 1px solid var(--renk-kenarlik); border-radius: 9px;
  overflow: hidden; background: #fff; cursor: pointer; padding: 0; flex: none;
}
.galeri__kucuk button.aktif { border-color: var(--renk-birincil); border-width: 2px; }
.galeri__kucuk img { width: 100%; height: 100%; object-fit: cover; }

.urun-bilgi h1 { font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 10px; }
.urun-bilgi__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--renk-metin-3); margin-bottom: 16px; }
.urun-fiyat-kutu { padding: 16px 0; border-top: 1px solid var(--renk-kenarlik); border-bottom: 1px solid var(--renk-kenarlik); margin-bottom: 18px; }
.urun-fiyat-kutu .fiyat { font-size: 30px; }
.urun-fiyat-kutu .indirim-orani {
  background: var(--renk-vurgu); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px; margin-left: 8px;
}

.varyant-grup { margin-bottom: 16px; }
.varyant-grup__etiket { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.varyant-secenek { display: flex; gap: 8px; flex-wrap: wrap; }
.varyant-secenek button {
  min-width: 44px; height: 40px; padding: 0 14px; border: 1px solid var(--renk-kenarlik);
  border-radius: 9px; background: #fff; cursor: pointer; font-size: 14px; font-family: inherit;
}
.varyant-secenek button.aktif { border-color: var(--renk-birincil); border-width: 2px; font-weight: 600; }
.varyant-secenek button[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.varyant-renk { width: 40px; height: 40px; border-radius: 50%; padding: 0 !important; position: relative; }
.varyant-renk.aktif::after {
  content: ""; position: absolute; inset: -5px; border: 2px solid var(--renk-birincil); border-radius: 50%;
}

.adet-secici { display: inline-flex; align-items: center; border: 1px solid var(--renk-kenarlik); border-radius: 10px; overflow: hidden; }
.adet-secici button { width: 40px; height: 44px; border: none; background: #fff; cursor: pointer; font-size: 18px; }
.adet-secici input { width: 52px; height: 44px; border: none; text-align: center; font-size: 15px; font-family: inherit; }
.adet-secici input:focus { outline: none; }

.urun-eylem { display: flex; gap: 10px; margin: 18px 0; }
.urun-eylem .dgm--ana { flex: 1; }

.guven-liste { display: grid; gap: 10px; margin-top: 20px; }
.guven-oge { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--renk-metin-2); }
.guven-oge .ico { color: var(--renk-basari); width: 18px; height: 18px; margin-top: 2px; }

.sekme-basliklar { display: flex; gap: 2px; border-bottom: 1px solid var(--renk-kenarlik); overflow-x: auto; }
.sekme-basliklar button,
.sekme-basliklar > a {
  padding: 13px 18px; border: none; background: none; cursor: pointer; font-size: 14.5px;
  font-weight: 550; color: var(--renk-metin-2); border-bottom: 2px solid transparent; white-space: nowrap; font-family: inherit;
}
.sekme-basliklar > a:hover { text-decoration: none; color: var(--renk-metin); }
.sekme-basliklar button.aktif,
.sekme-basliklar > a.aktif { color: var(--renk-metin); border-bottom-color: var(--renk-birincil); }
.sekme-icerik { padding: 24px 0; }
.sekme-icerik > div { display: none; }
.sekme-icerik > div.aktif { display: block; }

.ozellik-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.ozellik-tablo td { padding: 10px 14px; border-bottom: 1px solid var(--renk-kenarlik); }
.ozellik-tablo td:first-child { width: 34%; color: var(--renk-metin-3); }

/* ---------------------------------------------------------------- Yorumlar */

.yorum-ozet { display: flex; gap: 34px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--renk-kenarlik); margin-bottom: 22px; }
.yorum-puan { text-align: center; }
.yorum-puan strong { font-size: 44px; font-weight: 800; letter-spacing: -.03em; display: block; line-height: 1; }
.yorum-dagilim { flex: 1; min-width: 240px; display: grid; gap: 6px; }
.yorum-dagilim__satir { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.yorum-dagilim__cubuk { flex: 1; height: 7px; background: var(--renk-zemin-2); border-radius: 4px; overflow: hidden; }
.yorum-dagilim__cubuk i { display: block; height: 100%; background: #f59e0b; }

.yorum { padding: 16px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.yorum__ust { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.yorum__avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--renk-zemin-2);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--renk-metin-2);
}

/* ---------------------------------------------------------------- Katalog */

.katalog { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 30px; padding: 10px 0 46px; align-items: start; }
@media (max-width: 900px) { .katalog { grid-template-columns: minmax(0, 1fr); } .filtre-panel { display: none; } }

.filtre-panel { position: sticky; top: 90px; }
.filtre-blok { border-bottom: 1px solid var(--renk-kenarlik); padding: 16px 0; }
.filtre-blok:first-child { padding-top: 0; }
.filtre-blok h4 { font-size: 14px; margin-bottom: 11px; }
.filtre-blok label { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 14px; cursor: pointer; color: var(--renk-metin-2); }
.filtre-blok label:hover { color: var(--renk-metin); }
.filtre-blok input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--renk-birincil); }
.filtre-blok .sayi { margin-left: auto; font-size: 12px; color: var(--renk-metin-3); }

.fiyat-aralik { display: flex; gap: 8px; align-items: center; }
.fiyat-aralik input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; font-family: inherit; }

.katalog-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.katalog-ust__sayi { font-size: 14px; color: var(--renk-metin-3); }
.katalog-ust select { height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 9px; font-family: inherit; font-size: 14px; background: #fff; }

.aktif-filtreler { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.aktif-filtre {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  background: var(--renk-zemin-2); border-radius: 999px; font-size: 13px;
}
.aktif-filtre a { color: var(--renk-metin-3); font-weight: 700; }

/* ---------------------------------------------------------------- Sepet */

.sepet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; padding: 24px 0 50px; align-items: start; }
@media (max-width: 900px) { .sepet-duzen { grid-template-columns: minmax(0, 1fr); } }

.sepet-satir { display: flex; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.sepet-satir__gorsel { width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--renk-zemin-2); flex: none; border: 1px solid var(--renk-kenarlik); }
.sepet-satir__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sepet-satir__govde { flex: 1; min-width: 0; }
.sepet-satir__sag { text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }

/* Sepet satırı dar ekranda: 92px görsel ve sağdaki fiyat sütunu yan yana
   kalınca gövdeye ~180px kalıyordu — "Sepetten çıkar" iki satıra bölünüyor,
   adet kutusu sıkışıyordu. 560px altında fiyat alta, tam genişliğe iner. */
@media (max-width: 560px) {
  .sepet-satir { flex-wrap: wrap; row-gap: 10px; gap: 12px; }
  .sepet-satir__gorsel { width: 76px; height: 76px; }
  .sepet-satir__govde { flex: 1 1 calc(100% - 88px); }
  .sepet-satir__sag { flex: 1 1 100%; flex-direction: row; align-items: center;
    justify-content: space-between; text-align: left; }
  .sepet-satir .esnek { flex-wrap: wrap; row-gap: 8px; }
  .sepet-satir__govde .dgm, .sepet-satir__govde button { white-space: nowrap; }
}
.ozet-kutu { border: 1px solid var(--renk-kenarlik); border-radius: 14px; padding: 20px; position: sticky; top: 90px; background: #fff; }
.ozet-satir { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; }
.ozet-satir--toplam { border-top: 1px solid var(--renk-kenarlik); margin-top: 10px; padding-top: 14px; font-size: 18px; font-weight: 700; }
.ozet-satir--indirim { color: var(--renk-basari); }

.kupon-form { display: flex; gap: 8px; margin: 14px 0; }
.kupon-form input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 9px; font-family: inherit; }

.kargo-bar { background: var(--renk-zemin-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; }
.kargo-bar__cubuk { height: 6px; background: #fff; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.kargo-bar__cubuk i { display: block; height: 100%; background: var(--renk-basari); transition: width .4s; }

/* ---------------------------------------------------------------- Kasa */

.kasa-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; padding: 24px 0 50px; align-items: start; }
@media (max-width: 950px) { .kasa-duzen { grid-template-columns: minmax(0, 1fr); } }

.kasa-adim { border: 1px solid var(--renk-kenarlik); border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.kasa-adim__baslik { display: flex; align-items: center; gap: 11px; padding: 16px 20px; background: var(--renk-zemin-2); font-weight: 650; }
.kasa-adim__no { width: 26px; height: 26px; border-radius: 50%; background: var(--renk-birincil); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.kasa-adim__govde { padding: 20px; }

.secim-kutu {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--renk-kenarlik);
  border-radius: 11px; cursor: pointer; margin-bottom: 10px; transition: var(--gecis);
}
.secim-kutu:hover { border-color: var(--renk-metin-3); }
.secim-kutu.aktif { border-color: var(--renk-birincil); border-width: 2px; padding: 14px; background: var(--renk-zemin-2); }
.secim-kutu input { margin-top: 3px; accent-color: var(--renk-birincil); }
.secim-kutu__govde { flex: 1; }
.secim-kutu__fiyat { font-weight: 700; }

.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-alan input, .form-alan select, .form-alan textarea {
  width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--renk-kenarlik);
  border-radius: 9px; font-size: 14.5px; font-family: inherit; background: #fff;
}
.form-alan textarea { height: auto; min-height: 90px; padding: 11px 13px; }
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus { outline: none; border-color: var(--renk-birincil); }
.form-alan--tam { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- Hesabım */

.hesap-duzen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; padding: 24px 0 50px; align-items: start; }
@media (max-width: 850px) { .hesap-duzen { grid-template-columns: minmax(0, 1fr); } }
.hesap-menu { border: 1px solid var(--renk-kenarlik); border-radius: 12px; overflow: hidden; }
.hesap-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--renk-kenarlik); color: var(--renk-metin-2); }
.hesap-menu a:last-child { border-bottom: none; }
.hesap-menu a:hover { background: var(--renk-zemin-2); color: var(--renk-metin); }
.hesap-menu a.aktif { background: var(--renk-birincil); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- Alt bilgi */

.altluk { background: var(--renk-zemin-2); border-top: 1px solid var(--renk-kenarlik); margin-top: 50px; }
/* padding kisaltmasi ayni elemandaki .kap sinifinin yan
   bosluguna siliyordu; padding-block yan boslugu birakiyor. */
.altluk__ust { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding-block: 46px 34px; }
@media (max-width: 800px) { .altluk__ust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.altluk h4 { font-size: 14px; margin-bottom: 13px; }
.altluk a { display: block; padding: 4px 0; font-size: 13.5px; color: var(--renk-metin-2); }
.altluk a:hover { color: var(--renk-vurgu); }
.altluk__alt { border-top: 1px solid var(--renk-kenarlik); padding-block: 18px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--renk-metin-3); }

.bulten-form { display: flex; gap: 8px; margin-top: 12px; }
.bulten-form input { flex: 1; min-width: 0; height: 42px; padding: 0 13px; border: 1px solid var(--renk-kenarlik); border-radius: 9px; font-family: inherit; background: #fff; }

.sosyal { display: flex; gap: 8px; margin-top: 14px; }
.sosyal a {
  width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--renk-kenarlik);
  display: grid; place-items: center; padding: 0;
}
.sosyal a:hover { background: var(--renk-birincil); color: #fff; }

.odeme-logolar { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.odeme-logolar span {
  padding: 4px 9px; background: #fff; border: 1px solid var(--renk-kenarlik);
  border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--renk-metin-3);
}

/* ---------------------------------------------------------------- Sepet çekmecesi */

.cekmece-perde { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 250ms; }
.cekmece-perde.acik { opacity: 1; pointer-events: auto; }
.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: #fff;
  z-index: 210; transform: translateX(100%); transition: transform 300ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: var(--golge-lg);
}
.cekmece.acik { transform: translateX(0); }
.cekmece__baslik { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--renk-kenarlik); }
.cekmece__baslik h3 { flex: 1; }
/* Çekmecenin içi tek parça hâlinde tazeleniyor; sarmalayıcı
   display:contents olduğu için gövde ve alt blok çekmecenin
   flex düzeninde doğrudan duruyor. */
.cekmece__ic { display: contents; }
.cekmece__govde { flex: 1; overflow-y: auto; padding: 0 20px; }
.cekmece__alt { padding: 18px 20px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-zemin-2); }

/* ---------------------------------------------------------------- Popup */

.popup-perde { position: fixed; inset: 0; background: rgba(17,24,39,.6); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; }
.popup-perde.acik { display: flex; }
.popup {
  background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 34px;
  text-align: center; position: relative; box-shadow: var(--golge-lg);
}
.popup__kapat { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--renk-metin-3); }

/* ---------------------------------------------------------------- Boş / bildirim */

.bos { text-align: center; padding: 60px 20px; }
.bos__ikon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: var(--renk-zemin-2); display: grid; place-items: center; color: var(--renk-metin-3); }
.bos__ikon .ico { width: 28px; height: 28px; }
.bos h2 { margin-bottom: 8px; }
.bos p { color: var(--renk-metin-3); max-width: 400px; margin: 0 auto 20px; }

.bildirim-kutu {
  padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.bildirim-kutu--basari { background: #e8f6ef; color: #046c46; }
.bildirim-kutu--hata { background: #fdeceb; color: #a52a20; }
.bildirim-kutu--bilgi { background: #eaf2fd; color: #1a4f9c; }

/* ---------------------------------------------------------------- Sayfalama */

.sayfalar { display: flex; gap: 5px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.sayfalar a, .sayfalar span {
  min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--renk-kenarlik); border-radius: 9px; font-size: 14px; background: #fff;
}
.sayfalar a:hover { border-color: var(--renk-birincil); }
.sayfalar .aktif { background: var(--renk-birincil); border-color: var(--renk-birincil); color: #fff; font-weight: 650; }

/* ---------------------------------------------------------------- Blog */

.blog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.blog-kart { border: 1px solid var(--renk-kenarlik); border-radius: 14px; overflow: hidden; background: #fff; transition: var(--gecis); }
.blog-kart:hover { box-shadow: var(--golge); }
.blog-kart__gorsel {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--renk-zemin-2);
}
.blog-kart__ic { padding: 18px; }
.blog-kart__meta { font-size: 12.5px; color: var(--renk-metin-3); margin-bottom: 7px; }

.yazi { max-width: 760px; margin: 0 auto; padding: 24px 0 50px; }
.yazi__govde { font-size: 16.5px; line-height: 1.75; }
.yazi__govde h2 { margin: 32px 0 12px; }
.yazi__govde h3 { margin: 24px 0 10px; }
.yazi__govde ul, .yazi__govde ol { padding-left: 22px; }
.yazi__govde li { margin-bottom: 7px; }
.yazi__govde img { border-radius: 12px; margin: 20px 0; }

/* ---------------------------------------------------------------- Yardımcı */

.gizli { display: none !important; }
.metin-orta { text-align: center; }
.metin-sag { text-align: right; }
.kucuk { font-size: 13px; }
.silik { color: var(--renk-metin-3); }
.kalin { font-weight: 700; }
.esnek { display: flex; align-items: center; gap: 10px; }
.esnek--ara { justify-content: space-between; }
.esnek--sar { flex-wrap: wrap; }
/* Dar ekranda iki uca yaslı satır (düğme çifti, onay + bağlantı)
   yan yana sığmıyor; taşmak yerine alt alta geçsin. */
@media (max-width: 560px) { .esnek, .esnek--ara { flex-wrap: wrap; row-gap: 10px; } }
.mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 26px; }
.mb1 { margin-bottom: 8px; } .mb2 { margin-bottom: 16px; } .mb3 { margin-bottom: 26px; }

@media (max-width: 768px) {
  .ustluk__ic { height: 62px; gap: 10px; }
  .ust-ara { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 10px; }
  .ustluk__ic { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .ana-menu { display: none; }
  .urun-izgara { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bolum { padding: 32px 0; }
  .slayt { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Hesabım, üyelik, blog, karşılaştırma ve ödeme ekranları
   ========================================================================== */

/* --------------------------------------------------------------- Hesabım */

.hesap-kimlik { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--renk-kenarlik); border-radius: 12px; }
.hesap-kimlik__harf {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--renk-birincil); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
}
.hesap-menu .menu-sayi {
  margin-left: auto; background: var(--renk-zemin-2); border-radius: 999px;
  padding: 1px 8px; font-size: 11.5px; font-weight: 700; color: var(--renk-metin-2);
}
.hesap-menu a.aktif .menu-sayi { background: rgba(255,255,255,.22); color: #fff; }

.hesap-metrikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.hesap-metrik {
  display: flex; gap: 12px; align-items: center; padding: 15px;
  border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff;
}
.hesap-metrik:hover { border-color: var(--renk-birincil); }
.hesap-metrik__ikon {
  width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--renk-zemin-2); color: var(--renk-birincil);
}
.hesap-metrik b { display: block; font-size: 19px; line-height: 1.2; }
.hesap-metrik span { font-size: 12.5px; color: var(--renk-metin-3); }

.hesap-kutu { border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff; overflow: hidden; }
.hesap-kutu__baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--renk-kenarlik);
}
.hesap-kutu__baslik h2 { font-size: 16px; margin: 0; }

.veri-tablo { width: 100%; border-collapse: collapse; font-size: 13.6px; }
.veri-tablo th {
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--renk-metin-3);
  padding: 10px 16px; border-bottom: 1px solid var(--renk-kenarlik); white-space: nowrap;
}
.veri-tablo td { padding: 12px 16px; border-bottom: 1px solid var(--renk-kenarlik); vertical-align: middle; }
.veri-tablo tr:last-child td { border-bottom: none; }
.veri-tablo tbody tr:hover { background: var(--renk-zemin-2); }

.durum {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--renk-zemin-2); color: var(--renk-metin-2);
}
.durum--pending, .durum--awaiting_payment, .durum--pending_approval { background: #fff4e0; color: #a55b00; }
.durum--confirmed, .durum--processing, .durum--preparing, .durum--approved { background: #e6f0ff; color: #1b4fa8; }
.durum--shipped, .durum--in_transit { background: #ece7ff; color: #5033b5; }
.durum--delivered, .durum--completed, .durum--active, .durum--odeme-paid { background: #e3f6ec; color: #0f7a46; }
.durum--cancelled, .durum--refunded, .durum--failed, .durum--rejected, .durum--odeme-failed { background: #ffe9e9; color: #b32020; }
.durum--odeme-pending { background: #fff4e0; color: #a55b00; }

.siparis-kart { border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff; margin-bottom: 14px; overflow: hidden; }
.siparis-kart__ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--renk-zemin-2); border-bottom: 1px solid var(--renk-kenarlik);
  flex-wrap: wrap;
}
.siparis-kart__govde { display: flex; align-items: center; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.siparis-kart__gorseller { display: flex; gap: 6px; align-items: center; }
.siparis-kart__gorseller img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--renk-kenarlik); }
.siparis-kart__fazla {
  width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center;
  background: var(--renk-zemin-2); font-size: 12.5px; font-weight: 600; color: var(--renk-metin-3);
}
.siparis-kart__ozet { flex: 1; min-width: 140px; }

.siparis-satir { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--renk-kenarlik); }
.siparis-satir:last-of-type { border-bottom: none; }
.siparis-satir__gorsel { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--renk-kenarlik); flex: none; }
.siparis-satir__sec { flex: none; }

.iade-alan { padding: 14px 16px; background: var(--renk-zemin-2); border-top: 1px solid var(--renk-kenarlik); }

.zaman-cizgi { list-style: none; padding: 16px; margin: 0; }
.zaman-cizgi__oge { display: flex; gap: 14px; padding: 0 0 20px 24px; position: relative; }
.zaman-cizgi__oge::before {
  content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--renk-kenarlik);
}
.zaman-cizgi__oge:last-child { padding-bottom: 0; }
.zaman-cizgi__oge:last-child::before { display: none; }
.zaman-cizgi__nokta {
  position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--renk-kenarlik);
}
.zaman-cizgi__oge.aktif .zaman-cizgi__nokta { border-color: var(--renk-basari); background: var(--renk-basari); }

.kargo-kutu { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--renk-kenarlik); flex-wrap: wrap; }
.kargo-kutu:last-child { border-bottom: none; }

.adres-blok { font-style: normal; line-height: 1.7; font-size: 13.8px; padding: 14px 16px; color: var(--renk-metin-2); }
.izgara-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.adres-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.adres-kart { border: 1px solid var(--renk-kenarlik); border-radius: 12px; padding: 16px; background: #fff; position: relative; }
.adres-kart--varsayilan { border-color: var(--renk-birincil); }
.adres-kart h3 { font-size: 15px; margin: 0 0 4px; }
.adres-kart .adres-blok { padding: 0; }
.adres-kart__etiket {
  position: absolute; top: 12px; right: 12px; background: var(--renk-birincil); color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
}

.bakiye-kart {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--renk-birincil), #1c2540);
}
.bakiye-kart--sade { background: var(--renk-zemin-2); color: var(--renk-metin); border: 1px solid var(--renk-kenarlik); }
.bakiye-kart__tutar { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 4px 0; }
.bakiye-kart__ikon { opacity: .35; }
.bakiye-kart__ikon .ico { width: 52px; height: 52px; }

.kupon-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 14px 16px; }
.kupon-kart {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px dashed var(--renk-kenarlik); border-radius: 12px; background: #fff;
}
.kupon-kart--pasif { opacity: .55; }
.kupon-kart__deger {
  width: 62px; height: 62px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--renk-zemin-2); color: var(--renk-birincil); font-weight: 700; font-size: 17px; text-align: center;
}
.kod-kopyala {
  border: 1px solid var(--renk-birincil); background: transparent; color: var(--renk-birincil);
  border-radius: 8px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; white-space: nowrap;
}
.kod-kopyala:hover { background: var(--renk-birincil); color: #fff; }
.kod-kopyala.kopyalandi { border-color: var(--renk-basari); background: var(--renk-basari); color: #fff; }

.bos--kucuk { padding: 30px 16px; }
.bos--kucuk .bos__ikon { display: none; }

/* --------------------------------------------------------------- Üyelik */

.giris-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; padding: 24px 0 56px; align-items: start; }
.giris-duzen--tek { grid-template-columns: minmax(0, 520px); justify-content: center; }
@media (max-width: 900px) { .giris-duzen { grid-template-columns: minmax(0, 1fr); } }

.giris-kart { border: 1px solid var(--renk-kenarlik); border-radius: 14px; padding: 28px; background: #fff; max-width: 520px; }
.giris-kart--genis { max-width: none; }
.giris-kart h1 { font-size: 25px; margin-bottom: 6px; }

.form-baslik { font-size: 14px; font-weight: 650; color: var(--renk-metin-2); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--renk-kenarlik); }

.sifre-alani { position: relative; }
.sifre-alani input { padding-right: 42px; }
.sifre-goster {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--renk-metin-3); padding: 6px;
}
.sifre-guc { height: 4px; background: var(--renk-kenarlik); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.sifre-guc i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .25s, background .25s; }

.ayrac { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--renk-metin-3); font-size: 12.5px; }
.ayrac::before, .ayrac::after { content: ''; flex: 1; height: 1px; background: var(--renk-kenarlik); }

.giris-yan { background: var(--renk-zemin-2); border-radius: 14px; padding: 24px; }
.giris-yan h2 { font-size: 17px; margin-bottom: 16px; }
.avantaj-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.avantaj-liste li { display: flex; gap: 12px; align-items: flex-start; }
.avantaj-liste .ico { color: var(--renk-birincil); margin-top: 2px; flex: none; }
.avantaj-liste strong { display: block; font-size: 14px; }
.avantaj-liste span { font-size: 12.8px; color: var(--renk-metin-3); line-height: 1.55; }

/* --------------------------------------------------------------- Blog */

.one-cikan-yazi {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0;
  border: 1px solid var(--renk-kenarlik); border-radius: 16px; overflow: hidden; background: #fff;
}
@media (max-width: 800px) { .one-cikan-yazi { grid-template-columns: minmax(0, 1fr); } }
.one-cikan-yazi__gorsel { aspect-ratio: 16/10; background: var(--renk-zemin-2); }
.one-cikan-yazi__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.one-cikan-yazi__ic { padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.one-cikan-yazi__ic h2 { font-size: 24px; }

.yorum-cevap { margin-top: 10px; padding: 12px 14px; background: var(--renk-zemin-2); border-radius: 10px; }
.paylas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--renk-kenarlik); }

/* --------------------------------------------------------------- Markalar */

.harf-serit { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 26px; }
.harf-serit a {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--renk-kenarlik); font-size: 13px; font-weight: 600;
}
.harf-serit a:hover { background: var(--renk-birincil); border-color: var(--renk-birincil); color: #fff; }

.marka-blok { margin-bottom: 34px; scroll-margin-top: 90px; }
.marka-blok__harf { font-size: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--renk-birincil); display: inline-block; margin-bottom: 16px; }
.marka-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.marka-kart {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 12px; border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff;
  transition: var(--gecis);
}
.marka-kart:hover { border-color: var(--renk-birincil); box-shadow: var(--golge); }
.marka-kart img { max-height: 44px; max-width: 120px; object-fit: contain; }
.marka-kart__yazi { font-size: 17px; font-weight: 700; color: var(--renk-metin-3); }
.marka-kart__ad { font-size: 13.4px; font-weight: 600; }

/* --------------------------------------------------------------- Kampanya */

.kampanya-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.kampanya-kart { border: 1px solid var(--renk-kenarlik); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.kampanya-kart__gorsel { aspect-ratio: 16/9; background: var(--renk-zemin-2); }
.kampanya-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kampanya-kart__gorsel--bos { display: grid; place-items: center; color: var(--renk-birincil); }
.kampanya-kart__gorsel--bos .ico { width: 48px; height: 48px; }
.kampanya-kart__ic { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kampanya-kart__ic h3 { font-size: 17px; }
.geri-sayim { display: flex; align-items: center; gap: 6px; color: var(--renk-vurgu); font-weight: 600; }

/* --------------------------------------------------------------- İletişim */

.iletisim-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .iletisim-duzen { grid-template-columns: minmax(0, 1fr); } }
.iletisim-kutu { border: 1px solid var(--renk-kenarlik); border-radius: 12px; padding: 18px; background: #fff; }
.iletisim-kutu h3 { font-size: 15px; margin-bottom: 12px; }
.iletisim-satir { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.iletisim-satir:last-child { border-bottom: none; }
.iletisim-satir .ico { color: var(--renk-birincil); margin-top: 2px; flex: none; }
.iletisim-satir strong { display: block; font-size: 14px; }
.iletisim-satir span { display: block; }

.magaza-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.magaza-izgara--genis { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.magaza-kart { border: 1px solid var(--renk-kenarlik); border-radius: 12px; padding: 16px; background: #fff; }
.magaza-kart--buyuk { display: flex; flex-direction: column; }

/* --------------------------------------------------------------- Karşılaştırma */

.karsilastir-sar { overflow-x: auto; border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff; }
.karsilastir { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 13.6px; }
.karsilastir th, .karsilastir td { padding: 14px; border-bottom: 1px solid var(--renk-kenarlik); text-align: center; vertical-align: middle; }
.karsilastir__etiket { text-align: left; font-weight: 600; color: var(--renk-metin-3); background: var(--renk-zemin-2); width: 170px; }
.karsilastir__urun { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 600; }
.karsilastir__urun img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; }

/* --------------------------------------------------------------- Ödeme */

.tesekkur { text-align: center; padding: 40px 0 30px; }
.tesekkur__ikon { color: var(--renk-basari); margin-bottom: 12px; }
.tesekkur__ikon .ico { width: 60px; height: 60px; }
.tesekkur h1 { font-size: 27px; margin-bottom: 8px; }
.tesekkur-adimlar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.tesekkur-adim {
  display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 12px 16px; border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff;
}
.tesekkur-adim span { color: var(--renk-metin-3); flex: none; }
.tesekkur-adim.tamam { border-color: var(--renk-basari); }
.tesekkur-adim.tamam span { color: var(--renk-basari); }
.tesekkur-adim strong { display: block; font-size: 13.6px; }
.tesekkur-adim small { color: var(--renk-metin-3); font-size: 12px; }

.guvenli-3d__ust { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--renk-kenarlik); margin-bottom: 16px; }
.guvenli-3d__ust .ico { width: 30px; height: 30px; color: var(--renk-basari); }
.guvenli-3d__ozet { background: var(--renk-zemin-2); border-radius: 10px; padding: 14px; }

.odeme-link-tutar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 24px; background: var(--renk-zemin-2); border-radius: 12px; text-align: center;
}
.odeme-link-tutar strong { font-size: 32px; font-weight: 700; }

/* --------------------------------------------------------------- Yapışkan araçlar */

.sabit-araclar {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.wp-dugme {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  transition: transform .18s;
}
.wp-dugme:hover { transform: scale(1.07); color: #fff; }
.wp-dugme .ico { width: 27px; height: 27px; }
.yukari-dugme {
  width: 42px; height: 42px; border-radius: 50%; display: none; place-items: center;
  background: #fff; border: 1px solid var(--renk-kenarlik); color: var(--renk-metin-2);
  box-shadow: var(--golge); cursor: pointer;
}
.yukari-dugme.gorunur { display: grid; }

.kayan-serit { background: var(--renk-birincil); color: #fff; overflow: hidden; padding: 8px 0; }
.kayan-serit__ic { display: flex; gap: 34px; white-space: nowrap; animation: serit-kay 26s linear infinite; }
.kayan-serit span { font-size: 13px; font-weight: 600; }
@keyframes serit-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kayan-serit__ic { animation: none; } }

.cerez-bar {
  position: fixed; left: 18px; bottom: 18px; z-index: 70; max-width: 420px;
  background: #fff; border: 1px solid var(--renk-kenarlik); border-radius: 12px;
  padding: 16px; box-shadow: var(--golge-lg);
}
.cerez-bar.gizli { display: none; }

@media print {
  .ustluk, .altluk, .cekmece, .cekmece-perde, .popup, .popup-perde, .sabit-araclar, .cerez-bar { display: none !important; }
  .hesap-menu, .kirinti, .dgm { display: none !important; }
  .hesap-duzen { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Sol konumlu sabit araçlar ve çerez barı iç düzeni */
.sabit-araclar--sol { right: auto; left: 18px; align-items: flex-start; }
.cerez-bar__metin { font-size: 13.2px; line-height: 1.6; color: var(--renk-metin-2); margin-bottom: 12px; }
.cerez-bar__metin a { text-decoration: underline; }
.cerez-bar__dugmeler { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
  .cerez-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .sabit-araclar { right: 12px; bottom: 12px; }
  .sabit-araclar--sol { left: 12px; }
}

/* --------------------------------------------------------------- SSS */

.sss-arama { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 26px;
  border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: #fff; }
.sss-arama input { flex: 1; min-width: 0; border: none; outline: none; font-size: 15px; background: none; padding: 6px 0; }
.sss-arama > .ico { color: var(--renk-metin-3); flex: none; }

.sss-duzen { display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .sss-duzen { grid-template-columns: minmax(0, 1fr); } }

/* Konu listesi yapışkandı: ızgara hücresi satır boyunca uzadığı için
   kutu sorular bitince de ekranda kalıp boşlukta asılı duruyordu,
   mobilde tek sütuna inince soruların üstüne biniyordu. Liste kısa,
   içerikle birlikte aksın. */
.sss-menu { border: 1px solid var(--renk-kenarlik); border-radius: 12px; overflow: hidden; background: #fff; }
.sss-menu__baslik { padding: 12px 15px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--renk-metin-3); border-bottom: 1px solid var(--renk-kenarlik); }
.sss-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 15px;
  font-size: 13.4px; border-bottom: 1px solid var(--renk-kenarlik); color: var(--renk-metin-2); }
.sss-menu a:last-child { border-bottom: none; }
.sss-menu a:hover { background: var(--renk-zemin-2); color: var(--renk-birincil); text-decoration: none; }

.sss-bolum { margin-bottom: 34px; scroll-margin-top: 90px; }
.sss-bolum h2 { display: flex; align-items: center; gap: 9px; font-size: 20px; margin-bottom: 6px; }
.sss-bolum__ikon { font-size: 22px; }

.sss-oge { border: 1px solid var(--renk-kenarlik); border-radius: 12px; margin-top: 10px; background: #fff; overflow: hidden; }
.sss-oge summary { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 15px 18px; cursor: pointer; font-weight: 600; font-size: 14.6px; list-style: none; }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary:hover { background: var(--renk-zemin-2); }
.sss-oge__ok { color: var(--renk-metin-3); flex: none; transition: transform .2s; }
.sss-oge[open] .sss-oge__ok { transform: rotate(180deg); }
.sss-oge[open] summary { border-bottom: 1px solid var(--renk-kenarlik); }
.sss-oge__cevap { padding: 16px 18px; font-size: 14.2px; line-height: 1.75; color: var(--renk-metin-2); }
.sss-oge__cevap p { margin-bottom: 10px; }
.sss-oge__cevap p:last-child { margin-bottom: 0; }
.sss-oge__oy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--renk-kenarlik); }

.sss-yardim { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 40px 0 20px; padding: 24px 26px; border-radius: 14px; background: var(--renk-zemin-2);
  border: 1px solid var(--renk-kenarlik); }
.sss-yardim h3 { margin-bottom: 4px; }

/* ==================================================================
   DÜZEN ARKETİPLERİ
   Sektör temaları bu iskeletlerden birini kullanır. Renk ve tipografi
   temanın kendi değişkenlerinden gelir; buradaki kurallar yalnızca
   yapıyı tanımlar.
   ================================================================== */


/* ------------------------------------------------------------------
   1. EDİTÖRYEL — ortalanmış logo, ayrı satırda ortalı menü
   Bernardo, çeyiz/züccaciye ve butik mağaza kalıbı.
------------------------------------------------------------------- */

.duyuru__ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.duyuru__sosyal { display: flex; gap: 10px; }
.duyuru__sosyal a { display: inline-flex; opacity: .85; }
.duyuru__sosyal a:hover { opacity: 1; }
.duyuru__sosyal .ico { width: 16px; height: 16px; }
.duyuru__metin { flex: 1; text-align: center; }
.duyuru__yan { min-width: 90px; display: flex; justify-content: flex-end; }
.duyuru__secici { background: transparent; border: none; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; }

.ustluk--vitrin { background: var(--renk-zemin); border-bottom: 1px solid var(--renk-kenarlik); }

.vitrin-ust {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px; padding: 22px 0 18px;
}
.vitrin-ust__sol { min-width: 0; }
.vitrin-ust__sag { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }

.vitrin-logo {
  font-family: var(--yazi-basimi); font-size: 30px; font-weight: 600;
  letter-spacing: .04em; color: var(--renk-metin); white-space: nowrap;
}
.vitrin-logo img { max-height: 46px; width: auto; display: block; }

.vitrin-ara { position: relative; display: flex; align-items: center; max-width: 340px; }
.vitrin-ara input {
  width: 100%; height: 40px; padding: 0 12px 0 38px; font-size: 13.5px;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  background: var(--renk-zemin); color: var(--renk-metin); outline: none;
}
.vitrin-ara input:focus { border-color: var(--renk-birincil); }
.vitrin-ara button {
  position: absolute; left: 12px; background: none; border: none;
  cursor: pointer; color: var(--renk-metin-3); display: inline-flex;
}

.vitrin-eylem {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; gap: 3px; background: none; border: none;
  cursor: pointer; font: inherit; font-size: 11.5px; color: var(--renk-metin-2);
}
.vitrin-eylem:hover { color: var(--renk-birincil); text-decoration: none; }
.vitrin-eylem .ico { width: 21px; height: 21px; }
.vitrin-eylem__sayac {
  position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--renk-vurgu); color: #fff;
  font-size: 10.5px; font-style: normal; display: grid; place-items: center; padding: 0 4px;
}

.vitrin-menu { border-top: 1px solid var(--renk-kenarlik); }
.vitrin-menu ul { display: flex; justify-content: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.vitrin-menu li { position: relative; }
.vitrin-menu > .kap > ul > li > a,
.vitrin-menu ul li a {
  display: block; padding: 15px 0; font-size: 13.6px; letter-spacing: .04em;
  color: var(--renk-metin); white-space: nowrap;
}
.vitrin-menu li:hover > a { color: var(--renk-birincil); text-decoration: none; }
.vitrin-menu__rozet {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; color: #fff; vertical-align: middle;
}
.mega--vitrin { left: 50%; transform: translateX(-50%); }

/* Editöryel hero — kenardan kenara */
.vitrin-hero { margin-bottom: 46px; }
.vitrin-hero .slider { border-radius: 0; }
.vitrin-hero__oge { position: relative; min-height: 62vh; }
.vitrin-hero__oge img { width: 100%; height: 62vh; object-fit: cover; display: block; }
.vitrin-hero__metin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center; color: #fff; padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.38));
}
.vitrin-hero__ust { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .92; }
.vitrin-hero__metin h2 {
  font-family: var(--yazi-basimi); font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 500; line-height: 1.12; max-width: 16ch; color: #fff; margin: 0;
}
.vitrin-hero__dugme {
  margin-top: 6px; padding: 13px 34px; border: 1px solid rgba(255,255,255,.85);
  color: #fff; font-size: 12.8px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.vitrin-hero__dugme:hover { background: #fff; color: var(--renk-metin); text-decoration: none; }

/* Editöryel banner ızgarası — başlık görselin üstünde */
.vitrin-editoryel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .vitrin-editoryel { grid-template-columns: minmax(0, 1fr); } }
.vitrin-editoryel__oge h3 { font-size: 20px; font-weight: 500; margin-bottom: 14px; }
.vitrin-editoryel__gorsel { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--renk-zemin-2); }
.vitrin-editoryel__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.vitrin-editoryel__oge:hover img { transform: scale(1.04); }
.vitrin-editoryel__dugme {
  position: absolute; left: 18%; right: 18%; bottom: 26px; padding: 12px;
  background: rgba(255,255,255,.94); color: var(--renk-metin);
  text-align: center; font-size: 12.4px; letter-spacing: .1em; text-transform: uppercase;
}
.vitrin-editoryel__alt { margin-top: 10px; font-size: 13px; color: var(--renk-metin-2); }

/* Editöryel ürün kartı */
.vitrin-kart { text-align: center; }
.vitrin-kart--sol { text-align: left; }
.vitrin-kart__gorsel { position: relative; overflow: hidden; background: var(--renk-zemin-2); margin-bottom: 14px; }
.vitrin-kart__gorsel.oran-3-4 { aspect-ratio: 3/4; }
.vitrin-kart__gorsel.oran-4-5 { aspect-ratio: 4/5; }
.vitrin-kart__gorsel.oran-1-1 { aspect-ratio: 1/1; }
.vitrin-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.vitrin-kart:hover .vitrin-kart__gorsel img { transform: scale(1.05); }

.vitrin-kart__rozetler { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.vitrin-rozet {
  padding: 3px 9px; background: var(--renk-zemin); color: var(--renk-metin);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.vitrin-rozet--indirim { background: var(--renk-vurgu); color: #fff; }

.vitrin-kart__favori {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border: none; border-radius: 999px; background: rgba(255,255,255,.9);
  color: var(--renk-metin-2); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity .2s, color .2s;
}
.vitrin-kart:hover .vitrin-kart__favori { opacity: 1; }
.vitrin-kart__favori:hover { color: var(--renk-vurgu); }

.vitrin-kart__ekle {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 13px;
  border: none; background: var(--renk-metin); color: #fff; cursor: pointer;
  font: inherit; font-size: 12.4px; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.6,.2,1);
}
.vitrin-kart:hover .vitrin-kart__ekle { transform: translateY(0); }

.vitrin-kart__marka { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--renk-metin-3); margin-bottom: 5px; }
.vitrin-kart__ad { display: block; font-size: 14.4px; line-height: 1.45; color: var(--renk-metin); margin-bottom: 7px; }
.vitrin-kart__ad.buyuk-harf { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.vitrin-kart__fiyat { display: flex; gap: 8px; align-items: baseline; justify-content: center; }
.vitrin-kart--sol .vitrin-kart__fiyat { justify-content: flex-start; }
.vitrin-kart__puan { margin-top: 6px; font-size: 12px; color: var(--renk-metin-3); }
.vitrin-kart__tukendi { margin-top: 6px; font-size: 12px; color: var(--renk-metin-3); letter-spacing: .08em; text-transform: uppercase; }


/* ------------------------------------------------------------------
   2. SİNEMA — saydam başlık, tam ekran hero
   Boneqa ve lüks moda kalıbı.
------------------------------------------------------------------- */

.duyuru--ince { font-size: 12.2px; padding: 7px 0; letter-spacing: .06em; }

.ustluk--sinema {
  position: absolute; left: 0; right: 0; z-index: 40;
  background: transparent; border: none; transition: background .3s, box-shadow .3s;
}
.ustluk--sinema.yapisti {
  position: sticky; top: 0; background: var(--renk-zemin);
  box-shadow: 0 1px 0 var(--renk-kenarlik);
}
.sayfa-anasayfa .ustluk--sinema:not(.yapisti) .sinema-logo,
.sayfa-anasayfa .ustluk--sinema:not(.yapisti) .sinema-menu a,
.sayfa-anasayfa .ustluk--sinema:not(.yapisti) .sinema-eylemler > * { color: #fff; }

.sinema-ust { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 0; }
.sinema-logo { font-family: var(--yazi-basimi); font-size: 25px; letter-spacing: .16em; color: var(--renk-metin); }
.sinema-logo img { max-height: 40px; width: auto; display: block; }

.sinema-menu ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.sinema-menu li { position: relative; }
.sinema-menu a { font-size: 12.6px; letter-spacing: .14em; text-transform: uppercase; color: var(--renk-metin); }
.sinema-menu a:hover { text-decoration: none; opacity: .7; }
.mega--sinema { left: 0; }

.sinema-eylemler { display: flex; align-items: center; gap: 18px; }
.sinema-eylemler > * {
  position: relative; background: none; border: none; padding: 0;
  cursor: pointer; color: var(--renk-metin); display: inline-flex;
}
.sinema-eylemler .ico { width: 20px; height: 20px; }
.sinema-sayac {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px;
  border-radius: 999px; background: var(--renk-vurgu); color: #fff;
  font-size: 10px; font-style: normal; display: grid; place-items: center; padding: 0 4px;
}

.sinema-arama { background: var(--renk-zemin); border-top: 1px solid var(--renk-kenarlik); padding: 22px 0; }
.sinema-arama form { position: relative; display: flex; align-items: center; gap: 12px; }
.sinema-arama input {
  flex: 1; height: 46px; border: none; border-bottom: 1px solid var(--renk-kenarlik);
  background: none; font-size: 18px; color: var(--renk-metin); outline: none;
}
.sinema-arama button { background: none; border: none; cursor: pointer; color: var(--renk-metin-3); display: inline-flex; }

.sinema-alt-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 55;
  display: flex; gap: 10px; padding: 8px; border-radius: 999px;
  background: rgba(255,255,255,.94); box-shadow: var(--golge-lg);
}
.sinema-alt-bar > * {
  width: 42px; height: 42px; border-radius: 999px; border: none; background: none;
  cursor: pointer; display: grid; place-items: center; color: var(--renk-metin-2);
}
.sinema-alt-bar > *:hover { background: var(--renk-zemin-2); color: var(--renk-birincil); }
@media (max-width: 760px) { .sinema-alt-bar { bottom: 14px; } }

/* Sinema hero: tam ekran */
.sayfa-anasayfa .vitrin-hero__oge,
.sayfa-anasayfa .vitrin-hero__oge img { min-height: 100vh; height: 100vh; }


/* ------------------------------------------------------------------
   3. KOMPAKT — tek satır, satır içi menü
   Spigen ve tek marka aksesuar kalıbı.
------------------------------------------------------------------- */

.duyuru--kompakt { font-size: 12.4px; padding: 9px 0; }

.ustluk--kompakt { background: var(--renk-metin); color: #fff; border: none; }
.kompakt-ust {
  display: flex; align-items: center; gap: 26px;
  max-width: var(--kap-genislik); margin: 0 auto; padding: 0 20px; height: 58px;
}
.kompakt-logo { display: inline-flex; align-items: center; color: #fff; font-weight: 700; font-size: 17px; }
.kompakt-logo img { max-height: 26px; width: auto; }

.kompakt-menu { flex: 1; min-width: 0; }
.kompakt-menu ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.kompakt-menu li { position: relative; }
/* Yalnız üst sıradaki bağlantılar. Seçici ".kompakt-menu a" idi ve
   açılır kutunun içine de sızıyordu: beyaz kutuda beyaz yazı, 58px
   satır yüksekliği. Kutunun içi görünmüyordu. */
.kompakt-menu > ul > li > a {
  display: inline-flex; align-items: center; gap: 4px; height: 58px;
  font-size: 13.4px; color: rgba(255,255,255,.86);
}
.kompakt-menu > ul > li > a:hover { color: #fff; text-decoration: none; }
.kompakt-menu > ul > li > a .ico { width: 13px; height: 13px; opacity: .7; }
.mega--kompakt { left: 0; color: var(--renk-metin); }

/* Açılır kutuyu açan kural yalnız .ana-menu__liste için yazılmıştı;
   kompakt düzen .kompakt-menu kullandığı için menü hiç açılmıyordu.
   Sütun sayısı içeriğe göre: iki seviyeli menüde tek sütun yeter. */
.kompakt-menu > ul > li { position: relative; }
.kompakt-menu > ul > li:hover > .mega,
.kompakt-menu > ul > li:focus-within > .mega {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 22px;
}

.kompakt-eylemler { display: flex; align-items: center; gap: 16px; }
.kompakt-eylemler > a, .kompakt-sepet { color: rgba(255,255,255,.9); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; }
.kompakt-eylemler > a:hover, .kompakt-sepet:hover { color: #fff; text-decoration: none; }

.kompakt-ara { position: relative; display: flex; align-items: center; }
.kompakt-ara input {
  width: 190px; height: 34px; padding: 0 34px 0 12px; font-size: 13px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; outline: none; transition: width .25s;
}
.kompakt-ara input::placeholder { color: rgba(255,255,255,.5); }
.kompakt-ara input:focus { width: 250px; border-color: rgba(255,255,255,.5); }
.kompakt-ara button { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7); display: inline-flex; }


/* ------------------------------------------------------------------
   4. PERAKENDE — renkli üst bar, hap arama + ARA butonu
   İstikbal ve zincir mağaza kalıbı.
------------------------------------------------------------------- */

.perakende-bar { background: var(--renk-birincil); color: #fff; font-size: 12.6px; }
.perakende-bar__ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 36px; }
.perakende-bar__sol, .perakende-bar__sag { display: flex; align-items: center; gap: 20px; }
.perakende-bar a { color: rgba(255,255,255,.92); display: inline-flex; align-items: center; gap: 6px; }
.perakende-bar a:hover { color: #fff; text-decoration: none; }
.perakende-bar .ico { width: 15px; height: 15px; }
.perakende-bar__tel { font-weight: 700; }
@media (max-width: 760px) { .perakende-bar__sol { display: none; } }

.ustluk--perakende { background: var(--renk-zemin); border-bottom: 1px solid var(--renk-kenarlik); }
.perakende-ust { display: flex; align-items: center; gap: 30px; padding: 16px 0; }
.perakende-logo { font-size: 25px; font-weight: 800; color: var(--renk-birincil); white-space: nowrap; }
.perakende-logo img { max-height: 42px; width: auto; display: block; }

.perakende-ara { position: relative; flex: 1; display: flex; align-items: center; }
.perakende-ara > .ico { position: absolute; left: 16px; color: var(--renk-metin-3); }
.perakende-ara input {
  width: 100%; height: 46px; padding: 0 92px 0 44px; font-size: 14px;
  border: 2px solid var(--renk-birincil); border-radius: 999px;
  background: var(--renk-zemin); color: var(--renk-metin); outline: none;
}
.perakende-ara button {
  position: absolute; right: 5px; height: 36px; padding: 0 22px;
  border: none; border-radius: 999px; background: var(--renk-birincil);
  color: #fff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
.perakende-ara button:hover { background: var(--tema-birincil-koyu, var(--renk-birincil)); }

.perakende-eylemler { display: flex; align-items: center; gap: 22px; }
.perakende-eylem {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13.4px; font-weight: 600; color: var(--renk-metin);
}
.perakende-eylem:hover { color: var(--renk-birincil); text-decoration: none; }
.perakende-eylem .ico { width: 21px; height: 21px; }
.perakende-sayac {
  position: absolute; top: -6px; left: 13px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--renk-vurgu); color: #fff;
  font-size: 10.5px; font-style: normal; display: grid; place-items: center; padding: 0 4px;
}

.perakende-menu { border-top: 1px solid var(--renk-kenarlik); }
.perakende-menu ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.perakende-menu li { position: relative; }
.perakende-menu a {
  display: inline-flex; align-items: center; gap: 6px; padding: 13px 0;
  font-size: 13.6px; font-weight: 600; color: var(--renk-metin); white-space: nowrap;
}
.perakende-menu a:hover { color: var(--renk-birincil); text-decoration: none; }
.perakende-menu--vurgu { color: var(--renk-vurgu) !important; }
.mega--perakende { left: 0; }


/* ------------------------------------------------------------------
   5. TEKNİK — çerçeveli beyaz kart, kart içi görsel geçişi
   Goldmaster ve elektronik kalıbı.
------------------------------------------------------------------- */

.teknik-kart {
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
}
.teknik-kart:hover { border-color: var(--renk-birincil); box-shadow: var(--golge); }

.teknik-kart__gorsel { position: relative; aspect-ratio: 1/1; background: #fff; }
.teknik-kart__gorsel a { display: block; width: 100%; height: 100%; }
.teknik-kart__gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 14px; opacity: 0; transition: opacity .25s;
}
.teknik-kart__gorsel img.aktif { opacity: 1; }

.teknik-kart__indirim {
  position: absolute; top: 10px; left: 10px; padding: 4px 9px;
  border-radius: 999px; background: var(--renk-vurgu); color: #fff;
  font-size: 11px; font-weight: 700;
}
.teknik-kart__favori {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
  border: none; border-radius: 999px; background: var(--renk-zemin-2);
  color: var(--renk-metin-3); cursor: pointer; display: grid; place-items: center;
}
.teknik-kart__favori:hover { color: var(--renk-vurgu); }

.teknik-kart__noktalar { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; }
.teknik-kart__noktalar i { width: 6px; height: 6px; border-radius: 999px; background: var(--renk-kenarlik); cursor: pointer; }
.teknik-kart__noktalar i.aktif { background: var(--renk-metin); }

.teknik-kart__ic { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.teknik-kart__marka { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--renk-metin-3); }
.teknik-kart__ad {
  font-size: 13.6px; line-height: 1.5; color: var(--renk-metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.teknik-kart__ozellik { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.teknik-kart__ozellik li {
  padding: 2px 8px; border-radius: 999px; background: var(--renk-zemin-2);
  font-size: 11px; color: var(--renk-metin-2);
}
.teknik-kart__puan { font-size: 11.8px; color: var(--renk-metin-3); display: flex; gap: 6px; align-items: center; }
.teknik-kart__fiyat { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.teknik-kart__taksit { font-size: 11.8px; color: var(--renk-basari); }
.teknik-kart__eylem { display: flex; gap: 6px; margin-top: 8px; }
.teknik-kart__eylem .dgm { flex: 1; }
.teknik-kart__karsilastir {
  width: 38px; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: none; cursor: pointer; color: var(--renk-metin-2); display: grid; place-items: center;
}
.teknik-kart__karsilastir:hover, .teknik-kart__karsilastir.aktif { border-color: var(--renk-birincil); color: var(--renk-birincil); }


/* ------------------------------------------------------------------
   6. MARKET — yoğun ızgara, adet seçici, birim fiyat
   Gıda, pet ve hızlı tüketim kalıbı.
------------------------------------------------------------------- */

.duyuru--market { display: flex; align-items: center; justify-content: center; gap: 8px; }
.duyuru--market .ico { width: 16px; height: 16px; }

.ustluk--market { background: var(--renk-zemin); border-bottom: 1px solid var(--renk-kenarlik); }
.market-ust { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.market-logo { font-size: 23px; font-weight: 800; color: var(--renk-birincil); white-space: nowrap; }
.market-logo img { max-height: 40px; width: auto; display: block; }

.market-teslimat { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--renk-zemin-2); }
.market-teslimat .ico { width: 19px; height: 19px; color: var(--renk-birincil); }
.market-teslimat small { display: block; font-size: 10.5px; color: var(--renk-metin-3); }
.market-teslimat strong { display: block; font-size: 12.8px; }
@media (max-width: 980px) { .market-teslimat { display: none; } }

.market-ara { position: relative; flex: 1; display: flex; align-items: center; }
.market-ara > .ico { position: absolute; left: 14px; color: var(--renk-metin-3); }
.market-ara input {
  width: 100%; height: 44px; padding: 0 14px 0 42px; font-size: 14px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin-2); color: var(--renk-metin); outline: none;
}
.market-ara input:focus { background: var(--renk-zemin); border-color: var(--renk-birincil); }

.market-eylemler { display: flex; align-items: center; gap: 14px; }
.market-eylem { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--renk-metin); }
.market-eylem:hover { color: var(--renk-birincil); text-decoration: none; }
.market-sepet {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px;
  border: none; border-radius: var(--kose-yaricap); background: var(--renk-birincil);
  color: #fff; cursor: pointer; font: inherit; font-size: 12.6px;
}
.market-sepet strong { display: block; font-size: 13.4px; }

.market-serit { border-top: 1px solid var(--renk-kenarlik); }
.market-serit ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.market-serit ul::-webkit-scrollbar { display: none; }
.market-serit a {
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 14px;
  font-size: 13.2px; color: var(--renk-metin-2); white-space: nowrap; border-radius: var(--kose-yaricap);
}
.market-serit a:hover { background: var(--renk-zemin-2); color: var(--renk-birincil); text-decoration: none; }
.market-serit__ikon { font-size: 16px; }

.market-kart {
  position: relative; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s;
}
.market-kart:hover { box-shadow: var(--golge); }
.market-kart__indirim {
  position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px;
  border-radius: 999px; background: var(--renk-vurgu); color: #fff; font-size: 11px; font-weight: 700;
}
.market-kart__gorsel { display: block; aspect-ratio: 1/1; background: #fff; }
.market-kart__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.market-kart__ic { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.market-kart__marka { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--renk-metin-3); }
.market-kart__ad {
  font-size: 13px; line-height: 1.45; color: var(--renk-metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.market-kart__birim { font-size: 11.5px; color: var(--renk-metin-3); }
.market-kart__fiyat { display: flex; gap: 7px; align-items: baseline; margin-top: auto; }

.market-adet { display: flex; align-items: center; border: 1px solid var(--renk-kenarlik); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.market-adet button { width: 30px; height: 30px; border: none; background: var(--renk-zemin-2); cursor: pointer; font-size: 16px; color: var(--renk-metin-2); }
.market-adet button:hover { background: var(--renk-birincil); color: #fff; }
.market-adet input { flex: 1; width: 100%; height: 30px; border: none; text-align: center; font: inherit; font-size: 13px; background: none; color: var(--renk-metin); -moz-appearance: textfield; }
.market-adet input::-webkit-outer-spin-button, .market-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.market-kart__ekle {
  margin-top: 6px; padding: 9px; border: none; border-radius: var(--kose-yaricap);
  background: var(--renk-birincil); color: #fff; cursor: pointer;
  font: inherit; font-size: 12.6px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.market-kart__ekle:hover { background: var(--tema-birincil-koyu, var(--renk-birincil)); }
.market-kart__ekle .ico { width: 15px; height: 15px; }
.market-kart__ekle--yok { background: var(--renk-zemin-2); color: var(--renk-metin-3); cursor: not-allowed; }


/* ------------------------------------------------------------------
   7. ENDÜSTRİ — stok kodu ön planda, teknik veri, teklif
   Hırdavat, elektrik malzeme ve B2B kalıbı.
------------------------------------------------------------------- */

.endustri-bar { background: var(--renk-metin); color: rgba(255,255,255,.85); font-size: 12.4px; }
.endustri-bar__ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; }
.endustri-bar__sol, .endustri-bar__sag { display: flex; align-items: center; gap: 18px; }
.endustri-bar a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.endustri-bar a:hover { color: #fff; text-decoration: none; }
.endustri-bar .ico { width: 14px; height: 14px; }
.endustri-bar__bayi { padding: 3px 11px; border-radius: 999px; background: var(--renk-vurgu); color: #fff !important; }
@media (max-width: 900px) { .endustri-bar__sol { display: none; } }

.ustluk--endustri { background: var(--renk-zemin); border-bottom: 1px solid var(--renk-kenarlik); }
.endustri-ust { display: flex; align-items: center; gap: 24px; padding: 15px 0; }
.endustri-logo { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--renk-birincil); white-space: nowrap; }
.endustri-logo img { max-height: 40px; width: auto; display: block; }

.endustri-ara { position: relative; flex: 1; display: flex; align-items: stretch; border: 2px solid var(--renk-birincil); border-radius: var(--kose-yaricap); overflow: hidden; }
.endustri-ara select { border: none; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-zemin-2); padding: 0 10px; font: inherit; font-size: 12.8px; color: var(--renk-metin-2); outline: none; }
.endustri-ara input { flex: 1; height: 42px; border: none; padding: 0 14px; font-size: 13.6px; background: var(--renk-zemin); color: var(--renk-metin); outline: none; }
.endustri-ara button { border: none; padding: 0 20px; background: var(--renk-birincil); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

.endustri-eylemler { display: flex; align-items: center; gap: 16px; }
.endustri-eylem { position: relative; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font: inherit; color: var(--renk-metin); }
.endustri-eylem:hover { color: var(--renk-birincil); text-decoration: none; }
.endustri-eylem .ico { width: 21px; height: 21px; }
.endustri-eylem small { display: block; font-size: 10.5px; color: var(--renk-metin-3); }
.endustri-eylem strong { display: block; font-size: 13px; }
.endustri-sayac { position: absolute; top: -5px; left: 13px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--renk-vurgu); color: #fff; font-size: 10.5px; font-style: normal; display: grid; place-items: center; padding: 0 4px; }

.endustri-menu { border-top: 1px solid var(--renk-kenarlik); }
.endustri-menu ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.endustri-menu li { position: relative; }
.endustri-menu a { display: inline-flex; align-items: center; gap: 5px; padding: 12px 0; font-size: 13.4px; font-weight: 600; color: var(--renk-metin); white-space: nowrap; }
.endustri-menu a:hover { color: var(--renk-birincil); text-decoration: none; }
.endustri-menu--hizli { color: var(--renk-vurgu) !important; }
.mega--endustri { left: 0; }

.endustri-kart {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); padding: 14px; transition: border-color .2s, box-shadow .2s;
}
.endustri-kart:hover { border-color: var(--renk-birincil); box-shadow: var(--golge); }
@media (max-width: 620px) { .endustri-kart { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } }

.endustri-kart__gorsel { display: block; aspect-ratio: 1/1; background: #fff; border: 1px solid var(--renk-kenarlik); border-radius: 6px; overflow: hidden; }
.endustri-kart__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.endustri-kart__ic { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.endustri-kart__ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.endustri-kart__kod { padding: 2px 8px; border-radius: 4px; background: var(--renk-zemin-2); border: 1px solid var(--renk-kenarlik); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.8px; }
.endustri-kart__marka { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--renk-metin-3); }
.endustri-kart__ad { font-size: 14.6px; font-weight: 600; line-height: 1.45; color: var(--renk-metin); }

.endustri-kart__teknik { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.endustri-kart__teknik > div { display: flex; gap: 5px; font-size: 12.2px; }
.endustri-kart__teknik dt { color: var(--renk-metin-3); margin: 0; }
.endustri-kart__teknik dd { margin: 0; font-weight: 600; color: var(--renk-metin); }

.endustri-kart__alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: auto; }
.endustri-kart__fiyat { display: flex; align-items: baseline; gap: 8px; }
.endustri-kart__fiyat small { font-size: 11.5px; color: var(--renk-metin-3); }
.endustri-stok { font-size: 12.2px; display: inline-flex; align-items: center; gap: 5px; }
.endustri-stok .ico { width: 14px; height: 14px; }
.endustri-stok--var { color: var(--renk-basari); }
.endustri-stok--yok { color: var(--renk-metin-3); }

.endustri-kart__eylem { display: flex; gap: 8px; align-items: center; }
.endustri-kart__adet { width: 68px; height: 38px; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap); text-align: center; font: inherit; font-size: 13.4px; background: var(--renk-zemin); color: var(--renk-metin); }
.endustri-kart__eylem .dgm--ana { flex: 1; }

/* Endüstri ızgarası tek sütun listeye döner */
.urun-izgara--endustri { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1100px) { .urun-izgara--endustri { grid-template-columns: repeat(2, 1fr); } }

/* Editöryel/sinema hero — slider rayı taşmasın */
.vitrin-hero .slider { overflow: hidden; width: 100%; }
.vitrin-hero .slider__ray { display: flex; width: 100%; }
.vitrin-hero .slider__oge { flex: 0 0 100%; width: 100%; }
.vitrin-hero .slider__nokta { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 8px; }
.vitrin-hero .slider__nokta i { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.45); cursor: pointer; }
.vitrin-hero .slider__nokta i.aktif { background: #fff; }
.vitrin-hero .slider__ok { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: none; background: rgba(255,255,255,.85); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.vitrin-hero .slider__ok--sol { left: 24px; }
.vitrin-hero .slider__ok--sag { right: 24px; }

/* Ürün ızgarası duyarlı kırılımları */
@media (max-width: 1100px) { .urun-izgara, .urun-izgara--3, .urun-izgara--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .urun-izgara, .urun-izgara--3, .urun-izgara--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
   MOBİL MENÜ — tüm arketiplerin paylaştığı çekmece
   ================================================================== */

.hamburger {
  display: none; width: 40px; height: 40px; flex: none;
  border: none; background: none; cursor: pointer;
  color: inherit; place-items: center;
}
.hamburger .ico { width: 22px; height: 22px; }

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

  /* Dar ekranda menü satırları ve ikincil öğeler gizlenir */
  .vitrin-menu, .perakende-menu, .endustri-menu, .kompakt-menu, .sinema-menu, .ana-menu { display: none; }
  .vitrin-ust { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vitrin-ust__sol { display: flex; align-items: center; }
  .vitrin-ara, .kompakt-ara { display: none; }
  .vitrin-logo, .sinema-logo { font-size: 21px; }
  .perakende-logo, .market-logo, .endustri-logo { font-size: 19px; }
  .vitrin-eylem span, .market-eylem span, .perakende-eylem span { display: none; }

  /* Kompakt başlıkta "Sepet (0)" yazısı dar ekranda ~60px yiyor ve
     logoyu sıkıştırıyordu; ikon yeterli. Listede yoktu, eklendi. */
  .kompakt-sepet span { display: none; }
  .kompakt-eylemler { gap: 12px; }

  .endustri-ara select { display: none; }
  /* Sinema arketipi menüsünü alttaki sabit çubuktan açar, üstte hamburger göstermez */
  .ustluk--sinema .hamburger { display: none; }
}

.mobil-perde {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s;
}
.mobil-perde.acik { opacity: 1; }

.mobil-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
  width: min(360px, 88vw); display: flex; flex-direction: column;
  background: var(--renk-zemin); box-shadow: var(--golge-lg);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.mobil-menu.acik { transform: translateX(0); }

.mobil-menu__ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--renk-kenarlik); flex: none;
}
.mobil-menu__logo { font-family: var(--yazi-basimi); font-size: 19px; font-weight: 600; color: var(--renk-metin); }
.mobil-menu__logo img { max-height: 32px; width: auto; display: block; }
.mobil-menu__kapat {
  width: 36px; height: 36px; border: none; border-radius: 999px;
  background: var(--renk-zemin-2); cursor: pointer; display: grid; place-items: center; color: var(--renk-metin-2);
}

.mobil-menu__ara {
  position: relative; display: flex; align-items: center; margin: 14px 18px 4px; flex: none;
}
.mobil-menu__ara .ico { position: absolute; left: 13px; color: var(--renk-metin-3); }
.mobil-menu__ara input {
  width: 100%; height: 42px; padding: 0 14px 0 40px; font-size: 14px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin-2); color: var(--renk-metin); outline: none;
}
.mobil-menu__ara input:focus { background: var(--renk-zemin); border-color: var(--renk-birincil); }

.mobil-menu__govde { flex: 1; overflow-y: auto; padding: 10px 0; }

.mobil-menu__bag,
.mobil-katman__baslik {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 18px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14.6px; color: var(--renk-metin); text-align: left;
}
.mobil-menu__bag:hover, .mobil-katman__baslik:hover { background: var(--renk-zemin-2); text-decoration: none; }
.mobil-katman__baslik > span:first-of-type { flex: 1; }
.mobil-menu__bag { justify-content: flex-start; }
.mobil-katman__ikon { font-size: 18px; }
.mobil-rozet { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-style: normal; color: #fff; }

.mobil-katman__baslik > .ico:last-child { transition: transform .22s; color: var(--renk-metin-3); }
.mobil-katman.acik > .mobil-katman__baslik > .ico:last-child { transform: rotate(180deg); }

.mobil-katman__ic { background: var(--renk-zemin-2); }
.mobil-katman__ic > a {
  display: block; padding: 11px 18px 11px 42px;
  font-size: 13.8px; color: var(--renk-metin-2);
  border-bottom: 1px solid var(--renk-kenarlik);
}
.mobil-katman__ic > a:last-child { border-bottom: none; }
.mobil-katman__ic > a:hover { color: var(--renk-birincil); text-decoration: none; }
.mobil-katman__tumu { font-weight: 600; color: var(--renk-birincil) !important; }

.mobil-katman--alt .mobil-katman__baslik { padding-left: 42px; font-size: 13.8px; }
.mobil-katman--alt .mobil-katman__ic > a { padding-left: 60px; }

.mobil-menu__alt { flex: none; border-top: 1px solid var(--renk-kenarlik); padding: 14px 18px 18px; }

.mobil-menu__hesap {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--kose-yaricap); background: var(--renk-zemin-2); color: var(--renk-metin);
}
.mobil-menu__hesap:hover { text-decoration: none; }
.mobil-menu__hesap > span { flex: 1; }
.mobil-menu__hesap strong { display: block; font-size: 14px; }
.mobil-menu__hesap small { display: block; font-size: 12px; color: var(--renk-metin-3); }
.mobil-menu__hesap .ico { color: var(--renk-metin-2); }

.mobil-menu__kisayol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.mobil-menu__kisayol a {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  font-size: 12.8px; color: var(--renk-metin-2);
}
.mobil-menu__kisayol a:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); text-decoration: none; }
.mobil-menu__kisayol .ico { width: 15px; height: 15px; }

.mobil-menu__tercih { display: flex; gap: 8px; margin-top: 12px; }
.mobil-menu__tercih form { flex: 1; }
.mobil-menu__tercih select {
  width: 100%; height: 38px; padding: 0 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin);
}

.mobil-menu__iletisim { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mobil-menu__iletisim a { display: flex; align-items: center; gap: 8px; font-size: 13.2px; color: var(--renk-metin-2); }
.mobil-menu__iletisim .ico { width: 15px; height: 15px; }

body.mobil-acik { overflow: hidden; }

/* ==================================================================
   ARKETİP HERO DÜZENLERİ
   Her arketip partials/vitrin-hero.twig ile kendi karşılamasını getirir.
   ================================================================== */

/* ---------------------------------------------------------- Sinema */

.sinema-hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
.sinema-hero .slider,
.sinema-hero .slider__ray { height: 100%; }
.sinema-hero__oge { position: relative; height: 100%; }
.sinema-hero__oge img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sinema-hero__perde {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 11, 16, .55) 0%, rgba(9, 11, 16, calc(var(--perde) * .4)) 35%, rgba(9, 11, 16, .78) 100%);
}

.sinema-hero__metin {
  position: absolute; left: 0; right: 0; bottom: 12vh; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.sinema-hero__ust {
  font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; opacity: .82;
}
.sinema-hero__metin h2 {
  font-family: var(--yazi-basimi); color: #fff; margin: 0;
  font-size: clamp(34px, 5.4vw, 74px); line-height: 1.02; font-weight: 500;
  max-width: 15ch; text-wrap: balance;
}
.sinema-hero__dugme {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  padding: 14px 26px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 999px;
  color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: var(--gecis);
}
.sinema-hero__dugme:hover { background: #fff; color: #111; border-color: #fff; text-decoration: none; }
.sinema-hero__dugme .ico { width: 16px; height: 16px; }

.sinema-hero__sayac {
  position: absolute; right: 5vw; bottom: 12vh; z-index: 3;
  display: flex; align-items: center; gap: 14px;
}
.sinema-hero__sayac button {
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08);
  color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px);
}
.sinema-hero__sayac button:hover { background: rgba(255, 255, 255, .22); }
.sinema-hero__cizgi { position: static; display: flex; gap: 7px; }
.sinema-hero__cizgi i {
  width: 26px; height: 2px; border-radius: 0; background: rgba(255, 255, 255, .38); cursor: pointer;
}
.sinema-hero__cizgi i.aktif { background: #fff; width: 44px; }

.sinema-hero__kaydir {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: rgba(255, 255, 255, .7); animation: sinema-zipla 2.2s ease-in-out infinite;
}
@keyframes sinema-zipla { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .sinema-hero__kaydir { animation: none; } }

/* Sinema başlığı hero üstüne biner; hero yoksa zemin kazanır */
.arketip-sinema .ustluk--sinema { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border: none; }
.arketip-sinema .ustluk--sinema a,
.arketip-sinema .ustluk--sinema button { color: #fff; }
.arketip-sinema:not(.sayfa-anasayfa) .ustluk--sinema { position: sticky; background: var(--renk-zemin); border-bottom: 1px solid var(--renk-kenarlik); }
.arketip-sinema:not(.sayfa-anasayfa) .ustluk--sinema a,
.arketip-sinema:not(.sayfa-anasayfa) .ustluk--sinema button { color: var(--renk-metin); }
.ustluk--sinema.yapisik { position: fixed; background: rgba(12, 14, 20, .92); backdrop-filter: blur(10px); }

/* --------------------------------------------------------- Kompakt */

.kompakt-hero { padding: 18px 0 4px; }
.kompakt-hero__ic { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }
.kompakt-hero__ana { border-radius: var(--kose-yaricap); overflow: hidden; }
.kompakt-hero__oge { position: relative; aspect-ratio: 21 / 8; background: var(--renk-zemin-2); }
.kompakt-hero__oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kompakt-hero__metin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 10px; padding: 0 clamp(20px, 5%, 60px); color: #fff;
  background: linear-gradient(90deg, rgba(10, 12, 18, .8) 0%, rgba(10, 12, 18, .25) 55%, transparent 100%);
}
.kompakt-hero__metin span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.kompakt-hero__metin h2 { color: #fff; margin: 0; font-size: clamp(22px, 2.6vw, 38px); max-width: 18ch; }
.kompakt-hero__metin .dgm { align-self: flex-start; }

.kompakt-hero__yan { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.kompakt-yan-kart {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 20px; border-radius: var(--kose-yaricap);
  border: 1px solid var(--renk-kenarlik); background: var(--renk-zemin-2); color: var(--renk-metin);
  transition: var(--gecis);
}
.kompakt-yan-kart:hover { border-color: var(--renk-birincil); text-decoration: none; transform: translateY(-2px); }
.kompakt-yan-kart .ico { width: 22px; height: 22px; color: var(--renk-birincil); }
.kompakt-yan-kart strong { font-size: 15.5px; }
.kompakt-yan-kart span { font-size: 12.6px; color: var(--renk-metin-3); }
.kompakt-yan-kart--vurgu { background: var(--renk-birincil); border-color: var(--renk-birincil); color: #fff; }
.kompakt-yan-kart--vurgu .ico, .kompakt-yan-kart--vurgu span { color: rgba(255, 255, 255, .88); }

/* ------------------------------------------------------- Perakende */

.perakende-hero { padding: 16px 0 0; }
.perakende-hero__ic { display: grid; grid-template-columns: 264px 1fr; gap: 16px; }

.perakende-hero__liste {
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); overflow: visible;
}
.perakende-hero__liste-baslik {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px;
  background: var(--renk-birincil); color: #fff; font-weight: 600; font-size: 14px;
  border-radius: var(--kose-yaricap) var(--kose-yaricap) 0 0;
}
.perakende-hero__liste ul { list-style: none; margin: 0; padding: 6px 0; }
.perakende-hero__liste li { position: relative; }
.perakende-hero__liste li > a {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px;
  font-size: 13.6px; color: var(--renk-metin);
}
.perakende-hero__liste li > a .ico:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--renk-metin-3); }
.perakende-hero__liste li:hover > a { background: var(--renk-zemin-2); color: var(--renk-birincil); text-decoration: none; }
.perakende-hero__ikon { font-size: 16px; }

.perakende-hero__ucan {
  position: absolute; top: 0; left: 100%; z-index: 30; min-width: 240px;
  display: none; grid-template-columns: 1fr 1fr; gap: 2px; padding: 14px;
  background: var(--renk-zemin); border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap); box-shadow: var(--golge-lg);
}
.perakende-hero__liste li:hover .perakende-hero__ucan { display: grid; }
.perakende-hero__ucan a { padding: 6px 8px; font-size: 13px; color: var(--renk-metin-2); border-radius: 6px; }
.perakende-hero__ucan a:hover { background: var(--renk-zemin-2); color: var(--renk-birincil); text-decoration: none; }

.perakende-hero__ana { border-radius: var(--kose-yaricap); overflow: hidden; }
.perakende-hero__oge { position: relative; aspect-ratio: 16 / 6.4; background: var(--renk-zemin-2); }
.perakende-hero__oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perakende-hero__metin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; padding: 0 clamp(22px, 6%, 64px); color: #fff;
  background: linear-gradient(90deg, rgba(8, 20, 40, .82) 0%, rgba(8, 20, 40, .2) 60%, transparent 100%);
}
.perakende-hero__metin span { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.perakende-hero__metin h2 { color: #fff; margin: 0; font-size: clamp(24px, 3vw, 44px); max-width: 16ch; }
.perakende-hero__metin .dgm { align-self: flex-start; }

.perakende-hero__taksit {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px;
  padding: 14px 18px; border-radius: var(--kose-yaricap); background: var(--renk-zemin-2);
}
.perakende-hero__taksit span { display: flex; align-items: center; gap: 9px; font-size: 13.4px; color: var(--renk-metin-2); }
.perakende-hero__taksit .ico { color: var(--renk-birincil); flex: none; }

/* ---------------------------------------------------------- Teknik */

.teknik-hero { padding: 24px 0 8px; }
.teknik-hero__ana {
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); overflow: hidden;
}
.teknik-hero__oge {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
  padding: clamp(24px, 4vw, 52px);
}
.teknik-hero__etiket {
  display: inline-block; padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--renk-birincil) 12%, transparent);
  color: var(--renk-birincil); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.teknik-hero__metin h2 { margin: 0 0 16px; font-size: clamp(24px, 3vw, 40px); line-height: 1.15; }
.teknik-hero__ozet { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.teknik-hero__ozet li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--renk-metin-2); }
.teknik-hero__ozet .ico { width: 17px; height: 17px; color: var(--renk-basari, #16a34a); flex: none; }
.teknik-hero__gorsel { aspect-ratio: 4 / 3; border-radius: var(--kose-yaricap); overflow: hidden; background: var(--renk-zemin-2); }
.teknik-hero__gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------------------------------------------------- Market */

.market-hero { padding: 14px 0 0; }
.market-hero__ic { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
.market-hero__ana { border-radius: var(--kose-yaricap); overflow: hidden; }
.market-hero__oge { position: relative; aspect-ratio: 16 / 6; background: var(--renk-zemin-2); }
.market-hero__oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-hero__metin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 9px; padding: 0 clamp(20px, 5%, 48px); color: #fff;
  background: linear-gradient(90deg, rgba(20, 10, 8, .78) 0%, rgba(20, 10, 8, .2) 62%, transparent 100%);
}
.market-hero__metin span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.market-hero__metin h2 { color: #fff; margin: 0; font-size: clamp(21px, 2.6vw, 36px); max-width: 17ch; }
.market-hero__metin .dgm { align-self: flex-start; }

.market-hero__teslimat {
  padding: 18px; border-radius: var(--kose-yaricap);
  border: 1px solid var(--renk-kenarlik); background: var(--renk-zemin);
}
.market-hero__teslimat h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; }
.market-hero__teslimat h3 .ico { color: var(--renk-birincil); }
.market-hero__adres { display: grid; gap: 10px; margin-top: 12px; }
.market-hero__adres label { display: grid; gap: 4px; }
.market-hero__adres select {
  width: 100%; height: 40px; padding: 0 10px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin);
}
.market-hero__saat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.market-hero__saat button {
  padding: 9px 6px; font: inherit; font-size: 12.2px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin-2);
}
.market-hero__saat button.aktif { border-color: var(--renk-birincil); color: var(--renk-birincil); font-weight: 600; }
.market-hero__not { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.market-hero__not .ico { width: 14px; height: 14px; }

.market-hero__reyon {
  display: flex; gap: 8px; margin-top: 14px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: thin;
}
.market-hero__reyon a {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 15px;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  font-size: 13.4px; color: var(--renk-metin); white-space: nowrap; background: var(--renk-zemin);
}
.market-hero__reyon a:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); text-decoration: none; }
.market-hero__reyon-ikon { font-size: 16px; }

/* -------------------------------------------------------- Endüstri */

.endustri-hero { padding: 30px 0; background: var(--renk-zemin-2); border-bottom: 1px solid var(--renk-kenarlik); }
.endustri-hero__ic { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: center; }
.endustri-hero__etiket {
  display: inline-block; padding: 5px 11px; border-radius: 4px; margin-bottom: 12px;
  background: var(--renk-vurgu, #f59e0b); color: #111;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.endustri-hero__metin h2 { margin: 0 0 12px; font-size: clamp(24px, 3.1vw, 42px); line-height: 1.12; max-width: 18ch; }
.endustri-hero__metin > p { max-width: 56ch; font-size: 14.6px; }
.endustri-hero__dgm { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.endustri-hero__sayi { display: flex; gap: 30px; margin: 26px 0 0; }
.endustri-hero__sayi dt { font-size: 12px; color: var(--renk-metin-3); text-transform: uppercase; letter-spacing: .06em; }
.endustri-hero__sayi dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.endustri-hero__kutu {
  padding: 22px; border-radius: var(--kose-yaricap);
  border: 1px solid var(--renk-kenarlik); background: var(--renk-zemin); box-shadow: var(--golge);
}
.endustri-hero__kutu h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; }
.endustri-hero__kutu h3 .ico { color: var(--renk-vurgu, #f59e0b); }
.endustri-hero__hizli { display: grid; gap: 9px; margin-top: 14px; }
.endustri-hero__satir { display: grid; grid-template-columns: 1fr 84px; gap: 8px; }
.endustri-hero__satir input {
  height: 42px; padding: 0 12px; font: inherit; font-size: 13.6px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin);
}
.endustri-hero__satir input:focus { border-color: var(--renk-birincil); outline: none; }
.endustri-hero__alt { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--renk-kenarlik); }
.endustri-hero__alt a { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--renk-metin-2); }
.endustri-hero__alt .ico { width: 15px; height: 15px; }

/* ------------------------------------------------------ Dar ekran */

@media (max-width: 1024px) {
  .kompakt-hero__ic,
  .perakende-hero__ic,
  .market-hero__ic,
  .endustri-hero__ic { grid-template-columns: minmax(0, 1fr); }
  .perakende-hero__liste { display: none; }
  .kompakt-hero__yan { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .teknik-hero__oge { grid-template-columns: minmax(0, 1fr); }
  .teknik-hero__gorsel { order: -1; }
}

@media (max-width: 700px) {
  .sinema-hero { height: 82vh; min-height: 460px; }
  .sinema-hero__metin { bottom: 15vh; }
  .sinema-hero__sayac { right: 20px; bottom: 6vh; }
  .kompakt-hero__oge,
  .perakende-hero__oge,
  .market-hero__oge { aspect-ratio: 16 / 10; }
  .kompakt-hero__yan { grid-template-columns: minmax(0, 1fr); }
  .perakende-hero__taksit { grid-template-columns: minmax(0, 1fr); }
  .endustri-hero__sayi { gap: 20px; }
}

/* ==================================================================
   ARKETİP SAYFA DÜZENLERİ — katalog, ürün detay, iletişim
   ================================================================== */

/* ------------------------------------------------- Editöryel katalog */

.editoryel-katalog__ust { padding: 46px 0 30px; text-align: center; border-bottom: 1px solid var(--renk-kenarlik); }
.kirinti--orta { justify-content: center; }
.editoryel-katalog__ust h1 {
  font-family: var(--yazi-basimi); font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 400; margin: 10px 0 0; letter-spacing: -.01em;
}
.editoryel-katalog__giris { max-width: 62ch; margin: 14px auto 0; color: var(--renk-metin-2); font-size: 15px; }
.editoryel-katalog__alt { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 22px; }
.editoryel-katalog__alt a {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--renk-metin-2); padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.editoryel-katalog__alt a:hover { color: var(--renk-metin); border-color: currentColor; text-decoration: none; }

.editoryel-katalog__cubuk {
  display: flex; align-items: center; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--renk-kenarlik); margin-bottom: 28px;
}
.editoryel-filtre-ac {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: none;
  font: inherit; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--renk-metin);
}
.editoryel-filtre-ac:hover { border-color: var(--renk-metin); }
.editoryel-filtre-ac i {
  font-style: normal; min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--renk-birincil); color: #fff; font-size: 11px; display: grid; place-items: center;
}
.editoryel-katalog__sirala { margin-left: auto; }
.editoryel-katalog__sirala select {
  height: 38px; padding: 0 30px 0 12px; font: inherit; font-size: 13px;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  background: var(--renk-zemin); color: var(--renk-metin);
}
.editoryel-filtre { padding: 8px 0 24px; border-bottom: 1px solid var(--renk-kenarlik); margin-bottom: 26px; }
.editoryel-filtre .filtre-panel {
  position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px; border: none; padding: 0; background: none; max-height: none;
}
.editoryel-filtre .filtre-panel form { display: contents; }
.urun-izgara--editoryel { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 34px 26px; }
.sayfalar--editoryel { justify-content: center; gap: 6px; margin: 46px 0; }
.sayfalar--editoryel a, .sayfalar--editoryel span {
  min-width: 38px; height: 38px; border-radius: 0; border: none;
  border-bottom: 1px solid transparent; font-size: 13.5px;
}
.sayfalar--editoryel a.aktif { background: none; color: var(--renk-metin); border-bottom-color: var(--renk-metin); }
.editoryel-katalog__son {
  max-width: 68ch; margin: 52px auto 0; padding-top: 30px;
  border-top: 1px solid var(--renk-kenarlik); color: var(--renk-metin-2); font-size: 14.5px;
}

/* ---------------------------------------------------- Sinema katalog */

.sinema-katalog__ust { padding: 44px 0 26px; }
.sinema-katalog__ust h1 {
  font-family: var(--yazi-basimi); font-size: clamp(28px, 4vw, 52px);
  font-weight: 500; margin: 8px 0 0; line-height: 1.06;
}
.sinema-katalog__giris { max-width: 60ch; margin-top: 14px; color: var(--renk-metin-2); }
.sinema-katalog__serit {
  border-top: 1px solid var(--renk-kenarlik); border-bottom: 1px solid var(--renk-kenarlik);
  overflow-x: auto;
}
.sinema-katalog__serit .kap { display: flex; gap: 26px; padding-top: 14px; padding-bottom: 14px; }
.sinema-katalog__serit a {
  flex: none; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--renk-metin-2);
}
.sinema-katalog__serit a:hover { color: var(--renk-metin); text-decoration: none; }
.sinema-katalog__cubuk { display: flex; align-items: center; gap: 16px; padding: 24px 0 20px; }
.sinema-filtre-ac {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: 0; background: none;
  font: inherit; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--renk-metin);
}
.sinema-filtre-ac:hover { background: var(--renk-metin); color: var(--renk-zemin); border-color: var(--renk-metin); }
.urun-izgara--sinema { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 42px 24px; }

.sinema-filtre-perde { position: fixed; inset: 0; z-index: 88; background: rgba(15, 23, 42, .48); }
.sinema-filtre-cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 92; width: min(380px, 92vw);
  display: flex; flex-direction: column; background: var(--renk-zemin);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); box-shadow: var(--golge-lg);
}
.sinema-filtre-cekmece.acik { transform: translateX(0); }
.sinema-filtre-cekmece > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--renk-kenarlik); flex: none;
}
.sinema-filtre-cekmece > header strong { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.sinema-filtre-cekmece > header button {
  width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--renk-metin-2);
}
.sinema-filtre-cekmece__govde { flex: 1; overflow-y: auto; padding: 18px 20px; }
.sinema-filtre-cekmece__govde .filtre-panel {
  position: static; border: none; padding: 0; background: none; max-height: none; width: auto;
}

/* ---------------------------------------------------- Market katalog */

.market-katalog { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.market-reyon {
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); overflow: hidden; position: sticky; top: 88px;
}
.market-reyon h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 13px 16px; background: var(--renk-zemin-2);
  font-size: 14px; border-bottom: 1px solid var(--renk-kenarlik);
}
.market-reyon > ul { list-style: none; margin: 0; padding: 6px 0; max-height: 420px; overflow-y: auto; }
.market-reyon > ul > li > a {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  font-size: 13.6px; font-weight: 600; color: var(--renk-metin);
}
.market-reyon > ul > li > a:hover { background: var(--renk-zemin-2); color: var(--renk-birincil); text-decoration: none; }
.market-reyon ul ul { list-style: none; margin: 0 0 6px; padding: 0; }
.market-reyon ul ul a { display: block; padding: 5px 16px 5px 34px; font-size: 12.8px; color: var(--renk-metin-2); }
.market-reyon ul ul a:hover { color: var(--renk-birincil); text-decoration: none; }
.market-reyon__filtre { border-top: 1px solid var(--renk-kenarlik); padding: 14px 16px; }
.market-reyon__filtre .filtre-panel {
  position: static; border: none; padding: 0; background: none; max-height: none; width: auto;
}

.market-katalog__ust {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.market-katalog__ust h1 { margin: 0; font-size: clamp(20px, 2.4vw, 30px); }
.market-katalog__teslimat {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: 999px; background: color-mix(in srgb, var(--renk-birincil) 10%, transparent);
  color: var(--renk-birincil); margin-left: auto;
}
.market-katalog__teslimat strong { display: block; font-size: 13px; }
.market-katalog__teslimat span { color: var(--renk-metin-3); }
.market-katalog__hap { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.market-katalog__hap a {
  padding: 7px 13px; border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  font-size: 12.8px; color: var(--renk-metin);
}
.market-katalog__hap a:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); text-decoration: none; }
.urun-izgara--market { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

/* ---------------------------------------------------- Teknik katalog */

.teknik-alt-kart { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 22px; }
.teknik-alt-kart a {
  display: block; padding: 14px 16px; border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap); background: var(--renk-zemin); color: var(--renk-metin);
}
.teknik-alt-kart a:hover { border-color: var(--renk-birincil); text-decoration: none; }
.teknik-alt-kart strong { display: block; font-size: 14px; }

.katalog-ust--teknik { gap: 14px; }
.teknik-gorunum { display: flex; gap: 4px; margin-left: auto; }
.teknik-gorunum button {
  width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin-3);
}
.teknik-gorunum button.aktif { border-color: var(--renk-birincil); color: var(--renk-birincil); }
.urun-izgara--teknik { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.urun-izgara--teknik.liste { grid-template-columns: 1fr; }
.urun-izgara--teknik.liste .urun-kart { display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 18px; }
.urun-izgara--teknik.liste .urun-kart__gorsel { aspect-ratio: 1; }

.teknik-karsilastir-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--renk-metin); color: #fff; padding: 12px 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}
.teknik-karsilastir-bar .kap { display: flex; align-items: center; gap: 14px; font-size: 13.8px; }
.teknik-karsilastir-bar .dgm { margin-left: auto; }
.teknik-karsilastir-bar button {
  border: none; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; font: inherit;
}

/* -------------------------------------------------- Endüstri katalog */

.endustri-katalog__baslik {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 2px solid var(--renk-kenarlik); margin-bottom: 18px;
}
.endustri-katalog__baslik h1 { margin: 0 0 4px; font-size: clamp(21px, 2.4vw, 30px); }
.endustri-katalog__dgm { display: flex; gap: 8px; margin-left: auto; }
.endustri-alt-grup { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.endustri-alt-grup a {
  padding: 6px 12px; border: 1px solid var(--renk-kenarlik); border-radius: 4px;
  font-size: 12.8px; color: var(--renk-metin); background: var(--renk-zemin);
}
.endustri-alt-grup a:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); text-decoration: none; }

.katalog--endustri { grid-template-columns: 240px 1fr; }
.katalog-ust--endustri { gap: 14px; flex-wrap: wrap; }
.endustri-kod-ara { display: flex; align-items: center; gap: 8px; position: relative; }
.endustri-kod-ara .ico { position: absolute; left: 11px; color: var(--renk-metin-3); width: 16px; height: 16px; }
.endustri-kod-ara input {
  width: 280px; max-width: 100%; height: 38px; padding: 0 12px 0 34px; font: inherit; font-size: 13.4px;
  border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: var(--renk-zemin); color: var(--renk-metin);
}

.endustri-liste { border: 1px solid var(--renk-kenarlik); border-radius: 6px; overflow: hidden; background: var(--renk-zemin); }
.endustri-liste__baslik {
  display: grid; grid-template-columns: 64px 120px 1fr 96px 116px 130px 172px;
  gap: 12px; padding: 10px 14px; background: var(--renk-zemin-2);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--renk-metin-3);
  border-bottom: 1px solid var(--renk-kenarlik);
}
.endustri-liste__baslik span:first-child { grid-column: 1 / 3; }

.endustri-satir {
  display: grid; grid-template-columns: 64px 120px 1fr 96px 116px 130px 172px;
  gap: 12px; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--renk-kenarlik);
}
.endustri-satir:last-child { border-bottom: none; }
.endustri-satir:hover { background: var(--renk-zemin-2); }
.endustri-satir__gorsel {
  width: 64px; height: 64px; border: 1px solid var(--renk-kenarlik); border-radius: 4px;
  overflow: hidden; background: #fff; display: block;
}
.endustri-satir__gorsel img { width: 100%; height: 100%; object-fit: contain; }
.endustri-satir__kod code {
  display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.6px; font-weight: 700; color: var(--renk-metin);
}
.endustri-satir__ad a { font-size: 14px; font-weight: 600; color: var(--renk-metin); display: block; }
.endustri-satir__ad a:hover { color: var(--renk-birincil); }
.endustri-satir__ad p { margin: 3px 0 0; }
.endustri-satir__birim strong { display: block; font-size: 13.4px; font-variant-numeric: tabular-nums; }
.endustri-stok { display: inline-flex; align-items: center; gap: 5px; font-size: 12.4px; font-weight: 600; }
.endustri-stok .ico { width: 14px; height: 14px; }
.endustri-stok--var { color: var(--renk-basari, #16a34a); }
.endustri-stok--yok { color: var(--renk-metin-3); }
.endustri-satir__fiyat strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--renk-metin); }
.endustri-satir__fiyat span { display: block; }
.endustri-satir__eylem { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.endustri-satir__eylem .adet-secici { width: 100%; }
.endustri-satir__teklif { text-align: center; color: var(--renk-metin-3); text-decoration: underline; }
.adet-secici--kucuk { height: 32px; }
.adet-secici--kucuk input { font-size: 13px; }

/* --------------------------------------------- Ürün detay — arketip */

/* Sinema: görseller akar, satın alma sütunu sabit */
.arketip-sinema .urun-detay { grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.sinema-galeri { display: grid; gap: 10px; }
.sinema-galeri__oge { margin: 0; background: var(--renk-zemin-2); overflow: hidden; }
.sinema-galeri__oge img { width: 100%; height: auto; display: block; }
.sinema-galeri__oge--video { aspect-ratio: 16 / 9; }
.sinema-galeri__oge--video iframe { width: 100%; height: 100%; border: 0; }
.arketip-sinema .urun-bilgi { position: sticky; top: 96px; }
.arketip-sinema .urun-bilgi h1 { font-family: var(--yazi-basimi); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); }

/* Teknik: küçük görsel şeridi solda */
.teknik-galeri { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; }
.teknik-galeri__serit { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
/* Tek görselli ürün: şerit yok, ana görsel tüm genişliği alsın. */
.teknik-galeri--tek { grid-template-columns: 1fr; }
.teknik-galeri__serit button {
  width: 76px; height: 76px; padding: 4px; cursor: pointer; background: #fff;
  border: 1px solid var(--renk-kenarlik); border-radius: 6px;
}
.teknik-galeri__serit button.aktif { border-color: var(--renk-birincil); }
.teknik-galeri__serit img { width: 100%; height: 100%; object-fit: contain; }
.teknik-galeri__ana {
  position: relative; aspect-ratio: 1; background: #fff;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap); overflow: hidden;
}
.teknik-galeri__ana img { width: 100%; height: 100%; object-fit: contain; }
.teknik-galeri__rozet {
  position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 4px;
  background: var(--renk-indirim, #e11d48); color: #fff; font-size: 12px; font-weight: 700;
}
.teknik-galeri__buyut {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: #fff;
  cursor: pointer; display: grid; place-items: center; color: var(--renk-metin-2);
}
.teknik-galeri__video { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: var(--kose-yaricap); overflow: hidden; }
.teknik-galeri__video iframe { width: 100%; height: 100%; border: 0; }

/* Güven blokları */
.editoryel-guven { margin: 26px 0 0; border-top: 1px solid var(--renk-kenarlik); }
.editoryel-guven > div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.editoryel-guven dt { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--renk-metin-3); }
.editoryel-guven dd { margin: 0; font-size: 13.8px; color: var(--renk-metin-2); }
.editoryel-guven a { text-decoration: underline; }

.perakende-magaza-stok {
  margin-top: 16px; padding: 16px; border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap); background: var(--renk-zemin-2);
}
.perakende-magaza-stok h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 14.5px; }
.perakende-magaza-stok ul { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 7px; }
.perakende-magaza-stok li { display: flex; justify-content: space-between; font-size: 13.2px; }
.perakende-magaza-stok em { font-style: normal; font-weight: 600; font-size: 12.4px; }
.perakende-magaza-stok--var { color: var(--renk-basari, #16a34a); }
.perakende-magaza-stok--yok { color: var(--renk-metin-3); }

.market-teslimat-kutu {
  margin: 16px 0; padding: 16px; border: 1px solid var(--renk-birincil);
  border-radius: var(--kose-yaricap); background: color-mix(in srgb, var(--renk-birincil) 6%, transparent);
}
.market-teslimat-kutu h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15px; }
.market-teslimat-kutu__saat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.market-teslimat-kutu__saat button {
  padding: 8px 12px; font: inherit; font-size: 12.4px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin-2);
}
.market-teslimat-kutu__saat button.aktif { border-color: var(--renk-birincil); color: var(--renk-birincil); font-weight: 600; }

.endustri-urun-eylem, .teknik-urun-eylem { margin-top: 16px; display: grid; gap: 10px; }
.endustri-belge, .teknik-belge { display: grid; gap: 7px; }
.endustri-belge h4 { margin: 6px 0 2px; font-size: 13.5px; }
.endustri-belge a, .teknik-belge a {
  display: flex; align-items: center; gap: 8px; font-size: 13.2px; color: var(--renk-metin-2);
}
.endustri-belge .ico, .teknik-belge .ico { width: 15px; height: 15px; }

/* ------------------------------------------------ İletişim — arketip */

.iletisim-kutu--vurgu { border-color: var(--renk-birincil); }
.iletisim-kutu--vurgu h3 { display: flex; align-items: center; gap: 8px; color: var(--renk-birincil); }
.market-bolge-form select {
  width: 100%; height: 40px; padding: 0 10px; font: inherit; font-size: 13.4px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  background: var(--renk-zemin); color: var(--renk-metin);
}

.editoryel-iletisim section { padding: 18px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.editoryel-iletisim section:first-child { padding-top: 0; }
.editoryel-iletisim h3 {
  margin: 0 0 10px; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--renk-metin-3); font-weight: 600;
}
.editoryel-iletisim a { display: block; font-size: 14.5px; color: var(--renk-metin); margin-bottom: 4px; }
.editoryel-iletisim a:hover { text-decoration: underline; }
.editoryel-iletisim p { margin: 6px 0 0; }
.editoryel-iletisim__kunye { border-bottom: none; }

/* ------------------------------------------------------- Dar ekran */

@media (max-width: 1024px) {
  .market-katalog { grid-template-columns: minmax(0, 1fr); }
  .market-reyon { position: static; }
  .market-reyon > ul { max-height: none; display: flex; overflow-x: auto; padding: 8px; gap: 6px; }
  .market-reyon > ul > li { flex: none; }
  .market-reyon ul ul { display: none; }
  .katalog--endustri { grid-template-columns: minmax(0, 1fr); }
  .arketip-sinema .urun-detay { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .arketip-sinema .urun-bilgi { position: static; }
}

@media (max-width: 820px) {
  .endustri-liste__baslik { display: none; }
  .endustri-satir {
    grid-template-columns: 64px minmax(0, 1fr); grid-template-areas:
      "gorsel ad" "gorsel kod" "birim stok" "fiyat fiyat" "eylem eylem";
    row-gap: 8px;
  }
  .endustri-satir__gorsel { grid-area: gorsel; }
  .endustri-satir__ad { grid-area: ad; }
  .endustri-satir__kod { grid-area: kod; }
  .endustri-satir__birim { grid-area: birim; }
  .endustri-satir__stok { grid-area: stok; }
  .endustri-satir__fiyat { grid-area: fiyat; }
  .endustri-satir__eylem { grid-area: eylem; flex-direction: row; align-items: center; }
  .endustri-satir__eylem .adet-secici { width: 110px; }
  .teknik-galeri { grid-template-columns: minmax(0, 1fr); }
  .teknik-galeri__serit { grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; max-height: none; order: 2; }
  .urun-izgara--teknik.liste .urun-kart { grid-template-columns: minmax(0, 1fr); }
  .editoryel-katalog__cubuk { flex-wrap: wrap; }
}

/* ==================================================================
   ARKETİP SAYFA DÜZENLERİ — ikinci bölüm
   ================================================================== */

/* --------------------------------------------------- Kompakt katalog */

.kompakt-katalog__baslik { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.kompakt-katalog__baslik h1 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); }
.kompakt-alt-serit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.kompakt-alt-serit a {
  padding: 6px 12px; border-radius: 4px; font-size: 12.6px;
  background: var(--renk-zemin-2); color: var(--renk-metin);
}
.kompakt-alt-serit a:hover { background: var(--renk-birincil); color: #fff; text-decoration: none; }
.katalog--kompakt { grid-template-columns: 210px 1fr; gap: 16px; }
.katalog-ust--kompakt { position: sticky; top: 64px; z-index: 20; background: var(--renk-zemin); }
.urun-izgara--kompakt { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }

.kompakt-guven-kutu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.kompakt-guven-kutu > div {
  display: grid; grid-template-columns: 20px 1fr; grid-template-areas: "ikon ad" ". not";
  gap: 2px 9px; padding: 11px 13px; border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap); background: var(--renk-zemin-2);
}
.kompakt-guven-kutu .ico { grid-area: ikon; width: 18px; height: 18px; color: var(--renk-birincil); }
.kompakt-guven-kutu strong { grid-area: ad; font-size: 13.2px; }
.kompakt-guven-kutu span { grid-area: not; font-size: 11.8px; color: var(--renk-metin-3); }
.kompakt-uyum {
  margin-top: 12px; padding: 14px; border: 1px dashed var(--renk-kenarlik);
  border-radius: var(--kose-yaricap);
}
.kompakt-uyum h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 13.8px; }

/* ------------------------------------------------- Perakende katalog */

.perakende-katalog__afis {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 18px; border-radius: var(--kose-yaricap);
  background: linear-gradient(100deg, color-mix(in srgb, var(--renk-birincil) 14%, transparent), transparent);
}
.perakende-katalog__afis h1 { margin: 0 0 4px; font-size: clamp(21px, 2.4vw, 32px); }
.perakende-katalog__afis .dgm { margin-left: auto; }
.perakende-alt-kart { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 20px; }
.perakende-alt-kart a {
  display: block; padding: 14px 16px; border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap); background: var(--renk-zemin); color: var(--renk-metin);
}
.perakende-alt-kart a:hover { border-color: var(--renk-birincil); text-decoration: none; }
.perakende-alt-kart strong { display: block; font-size: 14px; }
.urun-izgara--perakende { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* -------------------------------------------- Galeri düzenleri (ek) */

.editoryel-galeri { display: grid; gap: 12px; }
.editoryel-galeri__ana { margin: 0; background: var(--renk-zemin-2); overflow: hidden; }
.editoryel-galeri__ana img {
  width: 100%; height: auto; max-height: min(70vh, 640px);
  object-fit: contain; display: block;
}
.editoryel-galeri__serit { display: flex; gap: 8px; overflow-x: auto; }
.editoryel-galeri__serit button {
  flex: none; width: 70px; height: 88px; padding: 0; cursor: pointer;
  border: none; background: var(--renk-zemin-2); opacity: .55; transition: var(--gecis);
}
.editoryel-galeri__serit button.aktif, .editoryel-galeri__serit button:hover { opacity: 1; }
.editoryel-galeri__serit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editoryel-galeri__video { aspect-ratio: 16 / 9; }
.editoryel-galeri__video iframe { width: 100%; height: 100%; border: 0; }

.kompakt-galeri { display: grid; gap: 10px; }
.kompakt-galeri__ana {
  position: relative; aspect-ratio: 1; background: var(--renk-zemin-2);
  border-radius: var(--kose-yaricap); overflow: hidden;
}
.kompakt-galeri__ana img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kompakt-galeri__rozet {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 4px;
  background: var(--renk-birincil); color: #fff; font-size: 11.5px; font-weight: 700;
}
.kompakt-galeri__serit { display: flex; gap: 7px; overflow-x: auto; }
.kompakt-galeri__serit button {
  flex: none; width: 62px; height: 62px; padding: 2px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: 7px; background: var(--renk-zemin);
}
.kompakt-galeri__serit button.aktif { border-color: var(--renk-birincil); }
.kompakt-galeri__serit img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.kompakt-galeri__video { aspect-ratio: 16 / 9; border-radius: var(--kose-yaricap); overflow: hidden; }
.kompakt-galeri__video iframe { width: 100%; height: 100%; border: 0; }

.perakende-galeri { display: grid; gap: 10px; }
.perakende-galeri__ana {
  position: relative; background: var(--renk-zemin-2);
  border-radius: var(--kose-yaricap); overflow: hidden;
}
.perakende-galeri__ana img {
  width: 100%; height: auto; max-height: min(70vh, 640px);
  object-fit: contain; display: block;
}
.perakende-galeri__olcu {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff;
  font-size: 12.4px; font-variant-numeric: tabular-nums;
}
.perakende-galeri__olcu .ico { width: 14px; height: 14px; }
.perakende-galeri__serit { display: flex; gap: 8px; overflow-x: auto; }
.perakende-galeri__serit button {
  flex: none; width: 78px; height: 62px; padding: 2px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: 7px; background: var(--renk-zemin);
}
.perakende-galeri__serit button.aktif { border-color: var(--renk-birincil); }
.perakende-galeri__serit img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.perakende-galeri__video { aspect-ratio: 16 / 9; border-radius: var(--kose-yaricap); overflow: hidden; }
.perakende-galeri__video iframe { width: 100%; height: 100%; border: 0; }

.market-galeri { display: grid; gap: 10px; }
.market-galeri__ana {
  position: relative; aspect-ratio: 1; background: #fff;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap); overflow: hidden;
}
.market-galeri__ana img { width: 100%; height: 100%; object-fit: contain; display: block; }
.market-galeri__rozet {
  position: absolute; top: 10px; left: 10px; width: 44px; height: 44px; border-radius: 999px;
  background: var(--renk-indirim, #e11d48); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
.market-galeri__serit { display: flex; gap: 7px; overflow-x: auto; }
.market-galeri__serit button {
  flex: none; width: 58px; height: 58px; padding: 2px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: 7px; background: #fff;
}
.market-galeri__serit button.aktif { border-color: var(--renk-birincil); }
.market-galeri__serit img { width: 100%; height: 100%; object-fit: contain; }
.market-galeri__ozet { padding: 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap); }
.market-galeri__ozet h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 14px; }
.market-galeri__ozet dl { margin: 0; display: grid; gap: 6px; }
.market-galeri__ozet dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13px; }
.market-galeri__ozet dt { color: var(--renk-metin-3); }
.market-galeri__ozet dd { margin: 0; }

.endustri-galeri { display: grid; gap: 10px; }
.endustri-galeri__ana {
  aspect-ratio: 1; background: #fff; border: 1px solid var(--renk-kenarlik);
  border-radius: 6px; overflow: hidden;
}
.endustri-galeri__ana img { width: 100%; height: 100%; object-fit: contain; display: block; }
.endustri-galeri__serit { display: flex; gap: 6px; overflow-x: auto; }
.endustri-galeri__serit button {
  flex: none; width: 56px; height: 56px; padding: 2px; cursor: pointer;
  border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: #fff;
}
.endustri-galeri__serit button.aktif { border-color: var(--renk-birincil); }
.endustri-galeri__serit img { width: 100%; height: 100%; object-fit: contain; }
.endustri-kunye-kutu {
  margin: 0; padding: 14px; border: 1px solid var(--renk-kenarlik); border-radius: 6px;
  background: var(--renk-zemin-2); display: grid; gap: 7px;
}
.endustri-kunye-kutu > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 13px; }
.endustri-kunye-kutu dt { color: var(--renk-metin-3); }
.endustri-kunye-kutu dd { margin: 0; font-variant-numeric: tabular-nums; }
.endustri-kunye-kutu code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; }

/* ------------------------------------------------- Sinema ek bloklar */

.sinema-guven { margin-top: 26px; border-top: 1px solid var(--renk-kenarlik); }
.sinema-guven details { border-bottom: 1px solid var(--renk-kenarlik); }
.sinema-guven summary {
  padding: 15px 0; cursor: pointer; list-style: none;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--renk-metin);
  display: flex; align-items: center; justify-content: space-between;
}
.sinema-guven summary::-webkit-details-marker { display: none; }
.sinema-guven summary::after { content: '+'; font-size: 17px; color: var(--renk-metin-3); }
.sinema-guven details[open] summary::after { content: '−'; }
.sinema-guven p { margin: 0 0 16px; font-size: 13.8px; color: var(--renk-metin-2); max-width: 58ch; }

.sinema-iletisim__blok { padding: 20px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.sinema-iletisim__blok:first-child { padding-top: 0; }
.sinema-iletisim__blok h3 {
  margin: 0 0 10px; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--renk-metin-3); font-weight: 600;
}
.sinema-iletisim__blok a { display: block; font-size: 14.5px; color: var(--renk-metin); margin-bottom: 5px; }
.sinema-iletisim__blok a:hover { text-decoration: underline; }
.sinema-iletisim__blok p { margin: 8px 0 0; }
.sinema-iletisim__sosyal { display: flex; flex-wrap: wrap; gap: 14px; }
.sinema-iletisim__sosyal a { margin: 0; font-size: 13.4px; }

/* ------------------------------------------------------- Dar ekran */

@media (max-width: 1024px) {
  .katalog--kompakt { grid-template-columns: minmax(0, 1fr); }
  .katalog-ust--kompakt { position: static; }
}

@media (max-width: 700px) {
  .kompakt-guven-kutu { grid-template-columns: minmax(0, 1fr); }
  .perakende-katalog__afis { padding: 16px; }
  .perakende-katalog__afis .dgm { margin-left: 0; }
  .endustri-kunye-kutu > div,
  .market-galeri__ozet dl > div { grid-template-columns: 100px minmax(0, 1fr); }
}

/* İletişim kutusundaki hızlı bağlantılar alt alta dizilir */
.iletisim-kutu > a.kucuk { display: block; padding: 6px 0; border-bottom: 1px solid var(--renk-kenarlik); }
.iletisim-kutu > a.kucuk:last-child { border-bottom: none; }
.iletisim-kutu > a.kucuk:hover { color: var(--renk-birincil); text-decoration: none; }

/* ==================================================================
   ARKETİP ALTLUKLARI
   Şablonları yazılmış ama biçimlendirmesi eksikti; her arketip
   kendi altluk düzenini burada alır.
   ================================================================== */

.altluk__ust--dort { grid-template-columns: repeat(4, 1fr); }
.altluk__ust--bes { grid-template-columns: 1.5fr repeat(4, 1fr); }

/* ------------------------------------------------------- Editöryel */

.altluk--editoryel { background: var(--renk-zemin); border-top: 1px solid var(--renk-kenarlik); }

.editoryel-bulten {
  padding: 54px 0 48px; text-align: center;
  border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-zemin-2);
}
.editoryel-bulten__etiket {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--renk-metin-3);
}
.editoryel-bulten h3 {
  margin: 0 0 8px; font-family: var(--yazi-basimi); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 31px); text-wrap: balance;
}
.editoryel-bulten > .kap > p.silik { max-width: 48ch; margin: 0 auto; }
.editoryel-bulten__form {
  display: flex; gap: 0; max-width: 430px; margin: 24px auto 0;
  border-bottom: 1px solid var(--renk-metin-3);
}
.editoryel-bulten__form input {
  flex: 1; height: 44px; border: none; background: none; outline: none;
  font: inherit; font-size: 14px; color: var(--renk-metin);
}
.editoryel-bulten__form button {
  border: none; background: none; cursor: pointer; padding: 0 6px;
  font: inherit; font-size: 11.5px; letter-spacing: .18em; color: var(--renk-metin);
}
.editoryel-bulten__form button:hover { color: var(--renk-birincil); }

.altluk--editoryel h4 {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--renk-metin-3); font-weight: 600; margin-bottom: 16px;
}
.altluk--editoryel a, .altluk--editoryel span.silik { font-size: 13.4px; }
.sosyal--editoryel { display: flex; gap: 14px; margin-top: 16px; }
.sosyal--editoryel a { padding: 0; }

.editoryel-imza {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 0 30px; border-top: 1px solid var(--renk-kenarlik);
}
.editoryel-imza__logo {
  font-family: var(--yazi-basimi); font-size: 19px; color: var(--renk-metin); padding: 0;
}
.editoryel-imza__hukuk { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 auto; }
.editoryel-imza__hukuk a { padding: 0; font-size: 12.5px; }

/* ---------------------------------------------------------- Sinema */

.altluk--sinema {
  background: #0e0f12; border-top: none; color: rgba(255, 255, 255, .72); margin-top: 0;
}
.altluk--sinema .kap { padding-top: 56px; padding-bottom: 34px; }
.altluk--sinema a { color: rgba(255, 255, 255, .72); padding: 0; }
.altluk--sinema a:hover { color: #fff; }

.sinema-altluk__dev {
  font-family: var(--yazi-basimi); color: #fff; text-align: center;
  font-size: clamp(34px, 8vw, 108px); font-weight: 400; line-height: 1;
  letter-spacing: .02em; opacity: .95;
}

.sinema-bulten {
  display: flex; max-width: 420px; margin: 34px auto 0;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.sinema-bulten input {
  flex: 1; height: 44px; border: none; background: none; outline: none;
  font: inherit; font-size: 14px; color: #fff;
}
.sinema-bulten input::placeholder { color: rgba(255, 255, 255, .5); }
.sinema-bulten button {
  border: none; background: none; cursor: pointer; color: #fff;
  display: grid; place-items: center; width: 42px;
}

.sinema-altluk__bag {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin-top: 44px;
}
.sinema-altluk__bag a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

.sinema-altluk__sosyal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 22px;
}
.sinema-altluk__sosyal a { font-size: 12.5px; }

.sinema-altluk__alt {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px; color: rgba(255, 255, 255, .5);
}
.sinema-altluk__alt a { font-size: 12px; }

/* --------------------------------------------------------- Kompakt */

.kompakt-guven { background: var(--renk-zemin-2); border-top: 1px solid var(--renk-kenarlik); }
.kompakt-guven .kap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 22px 0;
}
.kompakt-guven .kap > div { display: flex; align-items: center; gap: 12px; }
.kompakt-guven .ico { width: 24px; height: 24px; color: var(--renk-birincil); flex: none; }
.kompakt-guven strong { display: block; font-size: 13.6px; }
.kompakt-guven span { font-size: 12.2px; color: var(--renk-metin-3); }

.altluk--kompakt { background: #14161a; border-top: none; color: rgba(255, 255, 255, .68); margin-top: 0; }
.altluk--kompakt a { color: rgba(255, 255, 255, .68); }
.altluk--kompakt a:hover { color: #fff; }
.altluk--kompakt h4 { color: #fff; font-size: 13.5px; }
.altluk--kompakt .silik { color: rgba(255, 255, 255, .45); }
.altluk--kompakt .altluk__alt { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .45); }
.kompakt-altluk__logo { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.altluk--kompakt .sosyal a {
  width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; display: grid; place-items: center; padding: 0;
}

/* ------------------------------------------------------- Perakende */

.perakende-hizmet { background: var(--renk-birincil); color: #fff; }
.perakende-hizmet .kap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 20px 0;
}
.perakende-hizmet a { display: flex; align-items: center; gap: 12px; color: #fff; padding: 0; }
.perakende-hizmet a:hover { text-decoration: none; opacity: .85; }
.perakende-hizmet .ico { width: 26px; height: 26px; flex: none; }
.perakende-hizmet strong { display: block; font-size: 13.8px; }
.perakende-hizmet span { font-size: 12.2px; opacity: .82; }

.altluk--perakende { background: var(--renk-zemin-2); }
.perakende-altluk__logo { font-size: 19px; font-weight: 700; color: var(--renk-birincil); margin-bottom: 10px; }
.perakende-altluk__tel {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 15px; font-weight: 700; color: var(--renk-metin);
}
.perakende-uygulama { display: grid; gap: 7px; }
.perakende-uygulama span {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  font-size: 12.5px; color: var(--renk-metin-2); background: var(--renk-zemin);
}
.perakende-uygulama .ico { width: 16px; height: 16px; }

/* ---------------------------------------------------------- Teknik */

.teknik-servis { background: var(--renk-zemin); border-top: 1px solid var(--renk-kenarlik); }
.teknik-servis .kap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 24px 0;
}
.teknik-servis .kap > div { display: flex; align-items: center; gap: 12px; }
.teknik-servis .ico { width: 26px; height: 26px; color: var(--renk-birincil); flex: none; }
.teknik-servis strong { display: block; font-size: 13.8px; }
.teknik-servis span { font-size: 12.2px; color: var(--renk-metin-3); }

.altluk--teknik { background: var(--renk-zemin-2); }
.teknik-altluk__logo { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.altluk--teknik .sosyal a {
  width: 32px; height: 32px; border: 1px solid var(--renk-kenarlik);
  border-radius: 6px; display: grid; place-items: center; padding: 0; font-size: 12px;
}

/* ---------------------------------------------------------- Market */

.market-teslimat-serit { background: var(--renk-birincil); color: #fff; }
.market-teslimat-serit .kap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 18px 0;
}
.market-teslimat-serit .kap > div { display: flex; align-items: center; gap: 11px; }
.market-teslimat-serit .ico { width: 24px; height: 24px; flex: none; }
.market-teslimat-serit strong { display: block; font-size: 13.6px; }
.market-teslimat-serit span { font-size: 12.2px; opacity: .84; }

.altluk--market { background: var(--renk-zemin-2); }
.market-altluk__logo { font-size: 19px; font-weight: 800; color: var(--renk-birincil); margin-bottom: 10px; }
.market-altluk__tel {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 15px; font-weight: 700; color: var(--renk-metin);
}
.market-uygulama { display: grid; gap: 7px; margin-top: 12px; }
.market-uygulama span {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  font-size: 12.5px; color: var(--renk-metin-2); background: var(--renk-zemin);
}
.market-uygulama .ico { width: 16px; height: 16px; }

/* -------------------------------------------------------- Endüstri */

.endustri-cagri { background: var(--renk-metin); color: #fff; }
.endustri-cagri .kap {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 26px 0;
}
.endustri-cagri h3 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.endustri-cagri .silik { color: rgba(255, 255, 255, .62); }
.endustri-cagri__dgm { display: flex; gap: 10px; margin-left: auto; }
.endustri-cagri__dgm .dgm:not(.dgm--ana) {
  border-color: rgba(255, 255, 255, .4); color: #fff; background: none;
}

.altluk--endustri { background: var(--renk-zemin-2); }
.endustri-altluk__logo { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.endustri-kunye { margin: 16px 0 0; display: grid; gap: 6px; }
.endustri-kunye > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 12.6px; }
.endustri-kunye dt { color: var(--renk-metin-3); }
.endustri-kunye dd { margin: 0; color: var(--renk-metin-2); }
.endustri-altluk__tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--renk-metin);
}
.endustri-hukuk { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.endustri-hukuk a { padding: 0; font-size: 12.5px; }
.altluk--endustri .sosyal a {
  width: 32px; height: 32px; border: 1px solid var(--renk-kenarlik);
  border-radius: 4px; display: grid; place-items: center; padding: 0; font-size: 12px;
}

/* -------------------------------------------------------- Dar ekran */

@media (max-width: 900px) {
  .altluk__ust--dort, .altluk__ust--bes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kompakt-guven .kap,
  .perakende-hizmet .kap,
  .teknik-servis .kap,
  .market-teslimat-serit .kap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .endustri-cagri__dgm { margin-left: 0; }
  .endustri-hukuk { margin-left: 0; }
  .editoryel-imza { justify-content: center; text-align: center; }
  .editoryel-imza__hukuk { margin: 0; justify-content: center; }
}

@media (max-width: 560px) {
  .altluk__ust--dort, .altluk__ust--bes { grid-template-columns: minmax(0, 1fr); }
  .kompakt-guven .kap,
  .perakende-hizmet .kap,
  .teknik-servis .kap,
  .market-teslimat-serit .kap { grid-template-columns: minmax(0, 1fr); }
}

/* Izgara sütunları içerik genişliğiyle şişmesin: uzun ürün adları
   1fr sütunları büyütüp kartları farklı genişliklere düşürüyordu. */
.urun-izgara > *,
[class$="__izgara"] > *,
[class$="__sira"] > * { min-width: 0; }

/* ==================================================================
   ORTAK BÖLÜM ÇİZİCİ  (partials/bolum-genel.twig)

   Tema editöründen eklenen ama temanın kendi ana sayfasında özel
   çizimi olmayan bölümler buradan çizilir. Bütün renk, köşe ve
   tipografi değerleri tema değişkenlerinden okunur; bu yüzden hangi
   temaya düşerse düşsün o temanın diliyle görünür.
   ================================================================== */

.bg-bolum { padding: 36px 0; }
.bg-genis { width: 100%; padding: 0 20px; }

.bg-baslik { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bg-baslik h2 {
  margin: 0; font-family: var(--yazi-basimi); font-size: 21px; font-weight: 700;
  color: var(--renk-metin);
}
.bg-baslik p { margin: 0; font-size: 13px; color: var(--renk-ikincil); }
.bg-tumu { margin-left: auto; font-size: 13px; color: var(--renk-birincil); }

.bg-izgara {
  display: grid; grid-template-columns: repeat(var(--bg-sutun, 4), minmax(0, 1fr)); gap: 16px;
}
.bg-izgara > * { min-width: 0; }

/* --- geri sayım ---------------------------------------------------- */
.bg-sayac { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.bg-sayac__hane {
  min-width: 66px; padding: 10px 8px; border-radius: var(--kose-yaricap);
  background: var(--renk-metin); color: #fff; text-align: center;
}
.bg-sayac__hane b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.bg-sayac__hane span { font-size: 11px; opacity: .75; }

/* --- metin bloğu / özel HTML --------------------------------------- */
.bg-metin { max-width: 760px; font-size: 14.5px; line-height: 1.7; color: var(--renk-metin); }
.bg-metin h2 { font-family: var(--yazi-basimi); font-size: 21px; margin: 0 0 12px; }
.bg-metin :is(p, ul, ol) { margin: 0 0 12px; }

/* --- avantaj şeridi ------------------------------------------------- */
.bg-avantaj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bg-avantaj > div { display: flex; align-items: center; gap: 11px; }
.bg-avantaj .ico { width: 24px; height: 24px; flex: none; color: var(--renk-birincil); }
.bg-avantaj strong { display: block; font-size: 13.5px; color: var(--renk-metin); }
.bg-avantaj span { font-size: 12px; color: var(--renk-ikincil); }

/* --- bülten --------------------------------------------------------- */
.bg-bulten { max-width: 520px; margin: 0 auto; text-align: center; }
.bg-bulten label { display: block; margin-bottom: 10px; font-size: 14px; color: var(--renk-ikincil); }
.bg-bulten div { display: flex; gap: 8px; }
.bg-bulten input {
  flex: 1; min-width: 0; padding: 11px 14px; font: inherit; font-size: 14px;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap); background: #fff;
}
.bg-bulten input:focus { outline: none; border-color: var(--renk-birincil); }
.bg-bulten button {
  padding: 11px 20px; border: none; border-radius: var(--kose-yaricap); cursor: pointer;
  background: var(--renk-birincil); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
}

/* --- blog kartı ----------------------------------------------------- */
.bg-yazi {
  display: grid; gap: 8px; align-content: start; padding: 12px;
  background: #fff; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
  color: var(--renk-metin);
}
.bg-yazi:hover { text-decoration: none; border-color: var(--renk-birincil); }
.bg-yazi img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--kose-yaricap); }
.bg-yazi strong { font-size: 14px; line-height: 1.35; }
.bg-yazi span { font-size: 12.5px; color: var(--renk-ikincil); line-height: 1.5; }

/* --- marka şeridi ---------------------------------------------------- */
.bg-marka { display: flex; align-items: center; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.bg-marka::-webkit-scrollbar { display: none; }
.bg-marka a {
  flex: none; width: 118px; height: 66px; display: grid; place-items: center; padding: 12px;
  background: #fff; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
}
.bg-marka img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bg-marka span { font-size: 12px; color: var(--renk-ikincil); }

/* --- yorum ----------------------------------------------------------- */
.bg-yorum {
  margin: 0; padding: 18px; background: #fff;
  border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
}
.bg-yorum p { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--renk-metin); }
.bg-yorum cite { font-style: normal; font-size: 12.5px; color: var(--renk-ikincil); }
.bg-yildiz { color: #f5a623; font-size: 13px; letter-spacing: 1px; }

/* --- Instagram -------------------------------------------------------- */
.bg-hesap {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: 14px; font-weight: 600; color: var(--renk-metin);
}
.bg-hesap .ico { width: 18px; height: 18px; }
.bg-kare { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--kose-yaricap); background: var(--renk-zemin-2); }
.bg-kare img { width: 100%; height: 100%; object-fit: cover; }

/* --- video ------------------------------------------------------------ */
.bg-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--kose-yaricap); overflow: hidden; background: #000; }
.bg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- SSS -------------------------------------------------------------- */
.bg-sss { max-width: 900px; display: grid; gap: 10px; }
.bg-sss details {
  background: #fff; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-yaricap);
}
.bg-sss details[open] { border-color: var(--renk-ana); }
.bg-sss summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; font-size: 16px; font-weight: 700;
  color: var(--renk-metin); list-style: none;
}
.bg-sss summary::-webkit-details-marker { display: none; }
/* Varsayılan üçgen küçük ve soluktu; kendi işaretimiz. */
.bg-sss summary::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--renk-ana); border-bottom: 2px solid var(--renk-ana);
  transform: rotate(45deg); transition: transform .2s;
}
.bg-sss details[open] summary::after { transform: rotate(-135deg); }
.bg-sss details > div {
  padding: 0 20px 18px; font-size: 15px; line-height: 1.7; color: var(--renk-metin);
}

/* --- afiş yedeği ------------------------------------------------------ */
.bg-afis {
  position: relative; display: block; overflow: hidden; border-radius: var(--kose-yaricap);
  aspect-ratio: 16 / 9; background: var(--renk-zemin-2);
}
.bg-afis img { width: 100%; height: 100%; object-fit: cover; }
.bg-afis span {
  position: absolute; left: 12px; bottom: 10px; padding: 5px 11px; border-radius: var(--kose-yaricap);
  background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 600; color: var(--renk-metin);
}

@media (max-width: 1000px) {
  .bg-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bg-avantaj { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .bg-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-avantaj { grid-template-columns: minmax(0, 1fr); }
  .bg-bulten div { flex-direction: column; }
}

/* ==================================================================
   TEMA EDİTÖRÜ AYARLARININ KARŞILIĞI

   Bu üç ayar editörde görünüyor ama hiçbir yeri etkilemiyordu.
   Artık layout gövde sınıfına yazılıyor ve karşılıkları burada.
     sticky_header  -> .ustluk-sabit
     gallery_style  -> .galeri-thumbs | .galeri-grid | .galeri-slider
     cart_style     -> .sepet-drawer | .sepet-page | .sepet-popup
   ================================================================== */

/* --- yapışkan üst menü ---------------------------------------------- */
/* Açıkken yalnızca VARSAYILAN davranış verilir: :where() özgüllüğü
   sıfırladığı için kendi başlığını konumlandıran temalar (örn.
   .ustluk--boneqa: fixed, top 32px) bozulmaz. Kapatıldığında ise
   iki sınıflı seçici tema kuralını yener; anahtar gerçekten çalışır. */
:where(.ustluk-sabit) .ustluk { position: sticky; top: 0; z-index: 60; }
body:not(.ustluk-sabit) .ustluk { position: static; top: auto; }

/* --- galeri düzeni --------------------------------------------------- */

/* Izgara: küçük görseller yatay kaydırma yerine dört sütuna dizilir. */
.galeri-grid .galeri__kucuk {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible;
}
.galeri-grid .galeri__kucuk button { width: auto; }

/* Kaydırmalı: ana görsel yerine büyük kareler yan yana kayar. */
.galeri-slider .galeri__kucuk {
  scroll-snap-type: x mandatory; gap: 12px;
}
.galeri-slider .galeri__kucuk button {
  scroll-snap-align: start; width: 96px; height: 96px; flex: none;
}
.galeri-slider .galeri__ana { aspect-ratio: 4 / 3; }

/* --- sepet davranışı -------------------------------------------------- */

/* Açılır pencere: yan çekmece ortaya alınır. */
.sepet-popup .cekmece {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(.96);
  width: min(560px, 92vw); max-height: 82vh; border-radius: var(--kose-yaricap);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.sepet-popup .cekmece.acik { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* Sepet sayfası: çekmece hiç açılmaz, düğme /sepet'e gider (store.js). */
.sepet-page .cekmece, .sepet-page .cekmece-perde { display: none; }

/* ================================================================
   ÜRÜN GÖRSELİ BÜYÜTECİ (store.js: gorselBuyutec)
   Galeri görselleri tıklanınca tam ekran katmanda açılır.
   ================================================================ */

.buyutec {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(0, 0, 0, .92); padding: 40px 70px;
}
/* Sınıf seçicisi [hidden] varsayılanını yendiği için katman açılışta
   ekranda kalıyordu; kapalıyken açıkça gizlenir. */
.buyutec[hidden] { display: none; }
/* Yüzde değerler ızgarada belirsiz kaldığı için görsel ekrandan
   taşıyordu; görüntü alanına göre sınırlanır. */
.buyutec img {
  max-width: calc(100vw - 140px); max-height: calc(100vh - 80px);
  width: auto; height: auto; object-fit: contain; display: block;
}
.buyutec__kapat, .buyutec__ok {
  position: absolute; border: none; background: none; cursor: pointer;
  color: #fff; font-size: 34px; line-height: 1; padding: 10px 16px; opacity: .8;
}
.buyutec__kapat { top: 10px; right: 16px; font-size: 26px; }
.buyutec__ok--sol { left: 6px; top: 50%; transform: translateY(-50%); font-size: 52px; }
.buyutec__ok--sag { right: 6px; top: 50%; transform: translateY(-50%); font-size: 52px; }
.buyutec__kapat:hover, .buyutec__ok:hover { opacity: 1; }

/* Büyütece tıklanabilen galeri düğmesi görsel gibi davranır */
[data-buyut] { cursor: zoom-in; }
/* Sarmalayıcı düğme biçimindeki tetikleyici (moda-atolye). */
button[data-buyut] { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; }
button[data-buyut] img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
  .buyutec { padding: 50px 12px; }
  .buyutec img { max-width: calc(100vw - 24px); max-height: calc(100vh - 100px); }
  .buyutec__ok { font-size: 34px; }
}

/* <picture> düzende yer kaplamamalı: afişler mobil kaynak için
   picture ile sarıldı, mevcut "kap > img" kuralları bozulmasın diye
   picture düzenden çıkarılır. */
picture { display: contents; }

/* ==================================================================
   AFİŞ KARARTMA (panel: Bannerlar -> Karartma)

   Kampanya yazısı çoğu zaman görselin içine gömülü geliyor; açık
   zemine beyaz yazı düşünce okunmuyordu. Panelde "Karartma" alanı
   vardı ama hiçbir tema uygulamıyordu. Değer 0-1 arası (panel) ya da
   0-100 (tohumlayıcı) olabilir; şablon ikisini de kesire çeviriyor.
   ================================================================== */

.afis-gorsel { filter: brightness(calc(1 - var(--karartma, 0))); }

/* --- Mobilde afis kutusu gorselin oranini alir ----------------------
   Dikey mobil afis servis edilince slaydin masaustu en-boy orani
   (or. 6417/1946) gorseli kirpiyordu: 372x146 kutuya 1080x1920 gorsel.
   Telefonda kutu sabit orani birakip gorselin oranina uyar.
   body ile ozgulluk artirildi ki tema kurallarini yensin.            */

@media (max-width: 700px) {
  body :has(> picture > .afis-gorsel) { aspect-ratio: auto; min-height: 0; }
  /* Genişlik sınırı şart: tema görseli height ile boyutlandırıyorsa
     bu kural onu doğal genişliğine bırakıp sayfayı yatay kaydırıyordu. */
  .afis-gorsel { width: 100%; max-width: 100%; height: auto; }
}

/* ==================================================================
   Ödeme geçidi ve başarısız ödeme sayfaları
   Sağlayıcının kendi ekranı iframe ile geldiği için çerçeveyi
   olabildiğince sade tutuyoruz; odak ödeme formunda kalsın.
================================================================== */

.odeme-gecidi { max-width: 720px; margin: 32px auto 64px; }

.odeme-gecidi__ust { margin-bottom: 20px; }
.odeme-gecidi__ust h1 { margin: 0 0 6px; font-size: 22px; }
.odeme-gecidi__ust p { margin: 0 0 4px; color: var(--renk-ikincil); font-size: 14px; }

.odeme-gecidi__guven {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px !important;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--renk-zemin-2);
  font-size: 13px;
}
.odeme-gecidi__guven svg { width: 15px; height: 15px; flex: 0 0 auto; }

.odeme-gecidi__cerceve {
  width: 100%;
  min-height: 620px;
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap);
  background: #fff;
}

.odeme-gecidi__form { min-height: 320px; }

.odeme-gecidi__alt {
  margin-top: 16px;
  font-size: 13px;
  color: var(--renk-ikincil);
  text-align: center;
}

.odeme-basarisiz {
  max-width: 560px;
  margin: 56px auto 80px;
  text-align: center;
}

.odeme-basarisiz__ikon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fdeceb;
  color: #c22b2b;
}
.odeme-basarisiz__ikon svg { width: 28px; height: 28px; }

.odeme-basarisiz h1 { margin: 0 0 12px; font-size: 24px; }
.odeme-basarisiz p { margin: 0 0 12px; line-height: 1.6; }

.odeme-basarisiz__eylem {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .odeme-gecidi { margin: 16px auto 40px; }
  .odeme-gecidi__cerceve { min-height: 520px; border-radius: 10px; }
}

/* Çevrimdışı sayfası — bağlantı koptuğunda servis çalışanı bunu verir. */
.cevrimdisi { max-width: 520px; margin: 64px auto 96px; text-align: center; }

.cevrimdisi__ikon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--renk-zemin-2);
  color: var(--renk-ikincil);
}
.cevrimdisi__ikon svg { width: 30px; height: 30px; }

.cevrimdisi h1 { margin: 0 0 12px; font-size: 24px; }
.cevrimdisi p { margin: 0 0 12px; line-height: 1.65; }

.cevrimdisi__eylem { display: flex; gap: 10px; justify-content: center; margin: 24px 0 20px; flex-wrap: wrap; }
.cevrimdisi__not { font-size: 13px; }

/* ==================================================================
   Konfigüratör — "kendi takımını oluştur"
   Müşteri her gruptan parça seçer; fiyat anlık toplanır.
================================================================== */

.konfigurator {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-yaricap);
  background: var(--renk-zemin-2);
}

.konfigurator__baslik h3 { margin: 0 0 4px; font-size: 16px; }
.konfigurator__baslik p { margin: 0 0 14px; font-size: 13px; color: var(--renk-ikincil); }

.konf-grup + .konf-grup { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--renk-kenarlik); }

.konf-grup__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.konf-grup__ust span { font-weight: 600; font-size: 14px; }
.konf-grup__ust em { font-style: normal; font-size: 11.5px; color: var(--renk-ikincil); }

.konf-grup__parcalar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.konf-parca {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  padding: 10px;
  border: 1.5px solid var(--renk-kenarlik);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.konf-parca:hover { border-color: var(--renk-birincil); }

/* Seçili kutuyu :has ile işaretliyoruz; ek sınıf ve JS gerekmiyor. */
.konf-parca:has(input:checked) {
  border-color: var(--renk-birincil);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--renk-birincil) 16%, transparent);
}

.konf-parca input { position: absolute; opacity: 0; pointer-events: none; }

.konf-parca__gorsel {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 7px;
  background: var(--renk-zemin-2);
  overflow: hidden;
}

.konf-parca__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.konf-parca__gorsel svg { width: 22px; height: 22px; color: var(--renk-ikincil); }

.konf-parca__ad { font-size: 12.5px; line-height: 1.35; }
.konf-parca__fiyat { font-size: 12.5px; font-weight: 600; color: var(--renk-birincil); }

.konf-parca--tukendi { opacity: .45; cursor: not-allowed; }
.konf-parca--tukendi:hover { border-color: var(--renk-kenarlik); }

.konfigurator__toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--renk-kenarlik);
}

.konfigurator__toplam span { font-size: 13.5px; color: var(--renk-ikincil); }
.konfigurator__toplam b { font-size: 20px; }

/* Konfigüratör dar sütunda taşmasın: grid öğesi varsayılan olarak
   içeriğinden küçülemiyor, bu da ürün sütununu genişletiyordu. */
.konfigurator { min-width: 0; max-width: 100%; }
.konf-grup, .konf-grup__parcalar { min-width: 0; }
.konf-grup__parcalar { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.konf-parca { min-width: 0; }
.konf-parca__ad { overflow-wrap: anywhere; }

/* Favori düğmesi şablonda artık bir etiket taşıyor; yuvarlak biçimde
   duranlarda gizli kalır, yazılı isteyen tema görünür yapar. */
.dgm--favori { width: 52px; height: 52px; }
.dgm--favori .dgm__ad { display: none; }

/* Ürün galerisi: çerçeve ekranı aşmasın. Oran korunur, kutu
   ekrandan taşacaksa yükseklikten kısılır; fotoğraf contain
   olduğu için kırpılmadan ortalanır. */
.galeri__ana,
.teknik-galeri__ana,
.editoryel-galeri__ana,
.kompakt-galeri__ana,
.perakende-galeri__ana,
.market-galeri__ana,
.endustri-galeri__ana {
  max-height: min(70vh, 640px);
}

/* Telefonda sekme çubuğu yana kaydırmak yerine sarar. */
@media (max-width: 760px) {
  .sekme-basliklar {
    flex-wrap: wrap; overflow-x: visible; gap: 4px 2px;
    border-bottom: none;
  }
  .sekme-basliklar button,
  .sekme-basliklar > a {
    padding: 9px 12px; font-size: 13.5px;
    border: 1px solid var(--renk-kenarlik); border-radius: 999px;
  }
  .sekme-basliklar button.aktif,
  .sekme-basliklar > a.aktif {
    border-color: var(--renk-birincil); color: var(--renk-birincil);
  }
}