/* Vitrin yapısı: bütün temalarda aynı. Renk, yazı tipi ve köşe yuvarlaklığı tema dosyasından gelir (--degiskenler).
   Önce telefon: tek kolon menü, iki kolon ürün ızgarası; 900 pikselden sonra masaüstü düzeni. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font: var(--govde-font);
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font: var(--baslik-font); margin: 0 0 .5rem; }
h1 { font-size: var(--h1); line-height: 1.15; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.3; }
p { margin: 0 0 .7rem; }
ul { margin: 0; padding: 0; list-style: none; }
s { color: var(--soluk); text-decoration-thickness: 1px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: .82rem; color: var(--soluk); }

.kap { width: 100%; max-width: var(--genislik); margin: 0 auto; padding: 0 16px; }

.atla { position: absolute; left: -9999px; }
.atla:focus { left: 8px; top: 8px; z-index: 50; background: var(--kart-zemin); padding: 8px 12px; }

:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a, button, input, select):focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* ------------------------------------------------------------------ üst */

.ust { background: var(--ust-zemin); border-bottom: 1px solid var(--cizgi); position: relative; z-index: 20; }
.serit {
  background: var(--serit-zemin); color: var(--serit-yazi); text-align: center;
  font-size: .8rem; letter-spacing: .04em; padding: 7px 12px; text-transform: uppercase;
}
.ust-satir {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding-top: 12px; padding-bottom: 12px;
}
.marka { font: var(--marka-font); letter-spacing: var(--marka-aralik); text-transform: var(--marka-kutu); }
.marka img { max-height: 40px; width: auto; }
.marka:hover { text-decoration: none; }
/* Telefonda arama kutusu ikinci satıra düşer: mobil trafiğin çoğu aramayla ürün buluyor, gizlenemez. */
.ara { display: flex; align-items: center; grid-column: 1 / -1; }
.ara input {
  width: 100%; padding: 10px 12px; background: var(--alan-zemin);
  border: 1px solid var(--cizgi); border-radius: var(--kose);
}
.ara button {
  background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer;
  padding: 0 0 2px; margin-left: 10px; font-size: .9rem;
}
/* Telefon numarası dar ekranda üçüncü satıra düşüp yer kaplıyordu; mobilde menüde ve alt bilgide zaten var. */
.ust-baglantilar { display: none; font-size: .88rem; justify-self: end; color: var(--soluk); }

.menu-dugme {
  width: 40px; height: 40px; display: grid; gap: 5px; align-content: center;
  background: none; border: 0; cursor: pointer; padding: 0 8px 0 0;
}
.menu-dugme span { display: block; height: 1.5px; background: currentColor; }

.menu { border-top: 1px solid var(--cizgi); display: none; }
.menu.acik { display: block; }
.menu-ust > li > a {
  display: block; padding: 11px 0; font-size: .95rem; letter-spacing: var(--menu-aralik);
  text-transform: var(--menu-kutu); border-bottom: 1px solid var(--cizgi-soft);
}
.menu-ust .alt { padding: 0 0 10px 14px; }
.menu-ust .alt a { display: block; padding: 6px 0; color: var(--soluk); font-size: .92rem; }

/* ------------------------------------------------------------------ kahraman */

.kahraman { position: relative; background: var(--kahraman-zemin); }
.kahraman > img { width: 100%; height: clamp(320px, 62vw, 560px); object-fit: cover; object-position: var(--kahraman-odak); }
.kahraman-metin { padding: 22px 16px 28px; }
.kahraman h1 { margin-bottom: .4rem; }
.kahraman p { color: var(--soluk); max-width: 46ch; }
.gorselsiz-kahraman .kahraman-metin { padding: 44px 16px 40px; }

.dugme {
  display: inline-block; margin-top: 10px; padding: 12px 22px; cursor: pointer;
  background: var(--vurgu); color: var(--vurgu-yazi); border: 1px solid var(--vurgu);
  border-radius: var(--kose); font-size: .95rem; letter-spacing: var(--dugme-aralik);
  text-transform: var(--dugme-kutu);
}
.dugme:hover { text-decoration: none; filter: brightness(.94); }
.dugme[disabled] { background: var(--cizgi); border-color: var(--cizgi); color: var(--soluk); cursor: not-allowed; }

/* ------------------------------------------------------------------ bölümler ve ızgara */

.bolum { padding: 30px 16px 6px; }
.bolum-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bolum-baslik { margin-bottom: 14px; }
.tumu { font-size: .88rem; border-bottom: 1px solid currentColor; }

.urun-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--izgara-bosluk); }
.kategori-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--izgara-bosluk); }
.kategori-kutu { position: relative; display: block; background: var(--kart-zemin); border: 1px solid var(--cizgi); }
.kategori-kutu img { aspect-ratio: 4 / 5; object-fit: cover; }
.kategori-kutu span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px;
  background: var(--kutu-yazi-zemin); color: var(--kutu-yazi); font-size: .95rem;
  letter-spacing: var(--menu-aralik); text-transform: var(--menu-kutu);
}

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

.kart { background: var(--kart-zemin); border: var(--kart-cerceve); border-radius: var(--kose); overflow: hidden; }
.kart-gorsel { position: relative; display: block; background: var(--gorsel-zemin); }
.kart-gorsel img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.kart-gorsel .ikinci { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.kart:hover .kart-gorsel .ikinci { opacity: 1; }
.gorselsiz { display: block; aspect-ratio: 4 / 5; background: var(--gorsel-zemin); }
.etiket {
  position: absolute; top: 10px; left: 10px; padding: 4px 9px; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; background: var(--etiket-zemin); color: var(--etiket-yazi);
}
.etiket.tuken { background: var(--yazi); color: var(--zemin); }
.kart.tukendi .kart-gorsel img { filter: saturate(.35) opacity(.75); }
.kart-metin { padding: 12px var(--kart-ic) 16px; }
.kart-marka { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.kart h3 { font-size: var(--kart-baslik); margin: 3px 0 7px; font-weight: var(--kart-baslik-kalin); }
.kart .fiyat { margin: 0; font-size: 1rem; }
.kart .fiyat b { font-weight: 600; }
.kart .fiyat s { margin-right: 6px; font-size: .9rem; }

/* ------------------------------------------------------------------ liste ve filtreler */

.kirinti { font-size: .82rem; color: var(--soluk); padding: 14px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.liste-ust { padding: 6px 0 18px; display: grid; gap: 12px; }
.liste-ust .sayi { color: var(--soluk); font-size: .88rem; margin: 0; }
.kategori-metin { color: var(--soluk); max-width: 62ch; margin-top: 8px; }
.sirala select {
  padding: 9px 10px; background: var(--alan-zemin); border: 1px solid var(--cizgi); border-radius: var(--kose);
}
.liste-duzen { display: grid; gap: 18px; padding-bottom: 40px; }

.filtre-dugme {
  width: 100%; padding: 12px; background: var(--alan-zemin); border: 1px solid var(--cizgi);
  border-radius: var(--kose); cursor: pointer;
}
[data-filtre] { display: none; }
[data-filtre].acik { display: block; }
.filtre { border: 0; border-top: 1px solid var(--cizgi); margin: 0; padding: 14px 0; }
.filtre legend {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); padding: 0 0 6px;
}
.secenek { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .92rem; cursor: pointer; }
.secenek .adet { color: var(--soluk); font-size: .8rem; }
.aralik { display: flex; gap: 10px; }
.aralik label { display: grid; gap: 4px; font-size: .82rem; color: var(--soluk); }
.aralik input { width: 100%; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: var(--kose); }
.filtre-uygula { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.filtre-uygula button {
  padding: 10px 18px; background: var(--vurgu); color: var(--vurgu-yazi); border: 0;
  border-radius: var(--kose); cursor: pointer;
}
.filtre-uygula a { font-size: .88rem; color: var(--soluk); border-bottom: 1px solid currentColor; }

.sayfalama { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 28px 0; }
.sayfalama a { border-bottom: 1px solid currentColor; }
.bos { padding: 40px 0; color: var(--soluk); }

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

.urun-duzen { display: grid; gap: 22px; padding-bottom: 8px; }
.urun-duzen > *, .liste-duzen > * { min-width: 0; }
.galeri-buyuk { background: var(--gorsel-zemin); }
.galeri-buyuk img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galeri-buyuk.gorselsiz span { display: block; aspect-ratio: 4 / 5; }
.galeri-kucukler { display: flex; gap: 8px; overflow-x: auto; padding-top: 8px; }
.galeri-kucukler button {
  flex: 0 0 74px; padding: 0; background: none; border: 1px solid var(--cizgi); cursor: pointer;
}
.galeri-kucukler img { width: 74px; aspect-ratio: 4 / 5; object-fit: cover; }

.urun-marka { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.urun-bilgi h1 { margin: 6px 0 10px; }
.urun-ozet { color: var(--soluk); max-width: 52ch; }
.urun-fiyat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 0 4px; }
.urun-fiyat b { font-size: 1.6rem; font-weight: 600; }
.kdv-notu { font-size: .8rem; color: var(--soluk); }

.secim { padding: 12px 0 4px; }
.secenek-grup { border: 0; margin: 0 0 16px; padding: 0; }
.secenek-grup legend {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); padding-bottom: 8px;
}
.secenek-kutulari { display: flex; flex-wrap: wrap; gap: 8px; }
.secenek-kutu input { position: absolute; opacity: 0; width: 0; height: 0; }
.secenek-kutu span {
  display: inline-block; min-width: 46px; text-align: center; padding: 9px 13px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--alan-zemin); font-size: .92rem;
}
.secenek-kutu input:checked + span { border-color: var(--yazi); background: var(--yazi); color: var(--zemin); }
.secenek-kutu input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.stok-durum { font-size: .88rem; color: var(--soluk); margin: 0 0 12px; }
.sepet-satiri { display: flex; gap: 10px; align-items: end; }
.adet { display: grid; gap: 4px; font-size: .8rem; color: var(--soluk); }
.adet input { width: 76px; padding: 12px 10px; border: 1px solid var(--cizgi); border-radius: var(--kose); }
.sepete { flex: 1; margin-top: 0; }
.sepet-notu { font-size: .88rem; color: var(--soluk); padding-top: 10px; }

.guvence { padding: 18px 0 0; border-top: 1px solid var(--cizgi); margin-top: 18px; font-size: .9rem; }
.guvence li { padding: 5px 0 5px 16px; position: relative; color: var(--soluk); }
.guvence li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 1px; background: var(--yazi); }

.urun-alt { padding: 26px 0 10px; display: grid; gap: 26px; }
.urun-bolum h2 { font-size: var(--h3); }
.urun-bolum .metin { color: var(--soluk); max-width: 72ch; }
.urun-bolum .metin :where(p, li) { margin: 0 0 .6rem; }
.tablo-kaydir { overflow-x: auto; }
.urun-bolum table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.urun-bolum :where(th, td) { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cizgi); }
.ozellik-tablosu th { width: 34%; color: var(--soluk); font-weight: 400; }

/* ------------------------------------------------------------------ yazı sayfaları */

.yazi-sayfa { max-width: 46rem; padding-bottom: 40px; }
.yazi-sayfa h1 { margin-bottom: 18px; }
.yazi-bolum { padding: 14px 0; border-top: 1px solid var(--cizgi); }
.yazi-bolum h2 { font-size: var(--h3); margin-bottom: 8px; }
.yazi-bolum p { color: var(--soluk); }

/* ------------------------------------------------------------------ alt bilgi ve çerez */

.alt-bilgi { margin-top: 40px; background: var(--alt-zemin); color: var(--alt-yazi); border-top: 1px solid var(--cizgi); }
.alt-izgara { display: grid; gap: 26px; padding-top: 34px; padding-bottom: 26px; }
.alt-baslik { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.alt-bilgi :where(p, li) { font-size: .9rem; margin: 0 0 6px; opacity: .85; }
.alt-son { border-top: 1px solid var(--cizgi); padding-top: 16px; padding-bottom: 26px; }

.cerez { position: fixed; inset: auto 0 0 0; z-index: 40; padding: 12px; }
.cerez-govde {
  max-width: 720px; margin: 0 auto; background: var(--kart-zemin); color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.cerez p { font-size: .9rem; }
.cerez-secim { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; padding: 4px 0 12px; }
.cerez-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.cerez-dugmeler button {
  padding: 10px 14px; background: var(--alan-zemin); border: 1px solid var(--cizgi);
  border-radius: var(--kose); cursor: pointer; font-size: .9rem;
}
.cerez-dugmeler .ana { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }

/* ------------------------------------------------------------------ masaüstü */

@media (min-width: 640px) {
  .urun-izgara { grid-template-columns: repeat(3, 1fr); }
  .kategori-izgara { grid-template-columns: repeat(3, 1fr); }
  .alt-izgara { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .liste-ust { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 900px) {
  .ust-satir { grid-template-columns: auto minmax(220px, 1fr) auto; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
  .menu-dugme { display: none; }
  .ara { grid-column: auto; }
  .ust-baglantilar { display: block; }
  .menu { display: block; }
  .menu-ust { display: flex; gap: 26px; }
  .menu-ust > li { position: relative; }
  .menu-ust > li > a { border: 0; padding: 12px 0; }
  .menu-ust .alt {
    position: absolute; top: 100%; left: -14px; min-width: 210px; padding: 8px 14px 12px;
    background: var(--kart-zemin); border: 1px solid var(--cizgi); display: none; z-index: 30;
  }
  .menu-ust > li:hover .alt, .menu-ust > li:focus-within .alt { display: block; }
  /* Sütun sayısı tema ayarından gelir (yoğunluk: sık 4, ferah 3). */
  .urun-izgara { grid-template-columns: repeat(var(--izgara-sutun, 4), 1fr); }
  .kategori-izgara { grid-template-columns: repeat(3, 1fr); }
  .liste-duzen { grid-template-columns: 236px 1fr; gap: 34px; }
  .liste-duzen.filtresiz { grid-template-columns: 1fr; }
  .filtre-dugme { display: none; }
  [data-filtre] { display: block; }
  .urun-duzen { grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
  .urun-alt { grid-template-columns: repeat(2, 1fr); gap: 34px 40px; }
  .kahraman-metin { padding: 30px 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ sepet, ödeme, sipariş (Modül 3) */

.ust-baglantilar { display: flex; align-items: center; gap: 14px; }
.sepet-baglanti { display: inline-flex; align-items: center; gap: 6px; color: var(--yazi); font-size: .92rem; }
.sepet-sayi {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--vurgu); color: var(--vurgu-yazi); font-size: .74rem; font-weight: 600;
}

.bildirim { padding: 11px 14px; border: 1px solid var(--cizgi); border-radius: var(--kose); font-size: .92rem; }
.bildirim.ok { border-color: var(--vurgu); }
.bildirim.hata { border-color: var(--etiket-zemin); color: var(--etiket-zemin); }
.bag { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer; font-size: .9rem; }
.dugme.ikincil { background: none; color: var(--yazi); border-color: var(--cizgi); }
.genis-dugme { width: 100%; text-align: center; }

/* Yalnız dikey boşluk: `padding` kısayolu .kap'ın 16px kenar boşluğunu sıfırlıyor, içerik ekran kenarına
   yapışıyordu. */
.sepet-sayfa, .odeme-sayfa, .siparis-sayfa { padding-block: 18px 50px; }
.sepet-duzen, .odeme-duzen { display: grid; gap: 22px; margin-top: 16px; }
.sepet-satir {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--cizgi);
}
.sepet-gorsel img, .sepet-gorsel .gorselsiz { width: 84px; aspect-ratio: 4 / 5; object-fit: cover; }
.sepet-bilgi h2 { font-size: 1.02rem; margin: 0 0 4px; }
.secenek-metni { color: var(--soluk); font-size: .9rem; margin: 0 0 4px; }
.sepet-adet input { width: 76px; padding: 9px 10px; border: 1px solid var(--cizgi); border-radius: var(--kose); }
.sepet-tutar { text-align: right; }
.sepet-islem { display: flex; align-items: center; gap: 16px; padding: 18px 0 0; border-top: 1px solid var(--cizgi); }

.sepet-ozet, .odeme-ozet {
  background: var(--kart-zemin); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 18px;
  align-self: start;
}
.sepet-ozet h2, .odeme-ozet h2 { font-size: 1.1rem; }
.sepet-ozet dl, .odeme-ozet dl, .siparis-sayfa dl { display: grid; grid-template-columns: 1fr auto;
  gap: 8px 12px; margin: 12px 0; }
.sepet-ozet dt, .odeme-ozet dt, .siparis-sayfa dt { color: var(--soluk); font-size: .92rem; }
.sepet-ozet dd, .odeme-ozet dd, .siparis-sayfa dd { margin: 0; text-align: right; font-size: .95rem; }
.sepet-ozet .buyuk, .odeme-ozet .buyuk, .siparis-sayfa .buyuk { font-size: 1.12rem; font-weight: 600;
  color: var(--yazi); }
.ozet-liste li {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .92rem;
  border-bottom: 1px solid var(--cizgi-soft);
}

.blok {
  background: var(--kart-zemin); border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 18px; margin-bottom: 16px;
}
.blok h2 { font-size: 1.08rem; margin-bottom: 12px; }
.izgara-2, .izgara-3 { display: grid; gap: 12px; }
.alan { display: grid; gap: 5px; font-size: .88rem; }
.alan > span { color: var(--soluk); }
.alan :where(input, textarea, select) {
  padding: 11px 12px; background: var(--alan-zemin); border: 1px solid var(--cizgi);
  border-radius: var(--kose); font-size: 1rem; width: 100%;
}
/* [hidden] ızgara kuralına yeniliyordu: gizlenen kurumsal alanlar ekranda kalıyordu. */
[hidden] { display: none !important; }
.onay { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
        font-size: .9rem; padding: 7px 0; cursor: pointer; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--vurgu); }
.odeme-secim {
  display: flex; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--cizgi);
  border-radius: var(--kose); margin-bottom: 10px; cursor: pointer;
}
.odeme-secim em { display: block; font-style: normal; color: var(--soluk); font-size: .86rem; padding-top: 3px; }
.tamamlandi { border-left: 3px solid var(--vurgu); }
.hesap-tablosu { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hesap-tablosu :where(th, td) { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cizgi); }

@media (min-width: 640px) {
  .izgara-2 { grid-template-columns: 1fr 1fr; }
  .izgara-3 { grid-template-columns: 1fr 1fr 1fr; }
  .sepet-satir { grid-template-columns: 96px 1fr 120px 140px; align-items: center; }
}

@media (min-width: 900px) {
  .sepet-duzen { grid-template-columns: 1fr 320px; gap: 34px; }
  .odeme-duzen { grid-template-columns: 1fr 340px; gap: 34px; align-items: start; }
}

/* Ödeme kuruluşunun çerçevesi: yükseklik iframeResizer ile ayarlanır, burada yalnız kutu. */
.odeme-cerceve { background: var(--kart-zemin); border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 8px; margin: 14px 0; }
.odeme-cerceve iframe { width: 100%; min-height: 560px; border: 0; display: block; }

/* ------------------------------------------------------------------ üyelik ekranları (Modül 4) */

.dar-sayfa { max-width: 30rem; padding-block: 18px 50px; }
.hesap-sayfa { padding-block: 18px 50px; }
.hesap-ust { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.hesap-duzen { display: grid; gap: 16px; margin-top: 14px; }
.adres-karti { border-top: 1px solid var(--cizgi); padding: 10px 0; }
.bildirim-satir { color: var(--etiket-zemin); }
.favori-form { padding: 10px 0 0; }
@media (min-width: 900px) { .hesap-duzen { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ kampanya ve kupon (Modül 7) */

.kupon { border-top: 1px solid var(--cizgi); padding-top: 12px; margin-top: 4px; }
.kupon-satir { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.kupon-satir .dugme { padding-block: 11px; }
.kupon-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.firsat { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--vurgu); font-size: .88rem; }
.hediye-etiket { font-size: .78rem; padding: 1px 7px; border: 1px solid var(--vurgu); border-radius: 10px;
  margin-left: 4px; white-space: nowrap; }
.sepet-ozet dd s, .odeme-ozet dd s, .siparis-sayfa dd s { color: var(--soluk); margin-right: 6px; }

/* ------------------------------------------------------------------ içerik ve pazarlama (Modül 8) */

.serit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kahraman h2 { margin-bottom: .4rem; }
.kahraman-baglanti { position: absolute; inset: 0; }
.yazi-govde { color: var(--yazi); }
.yazi-govde :where(p, ul, ol, table, blockquote) { margin: 0 0 12px; }
.yazi-govde :where(ul, ol) { padding-left: 1.2rem; }
.yazi-govde h2, .yazi-govde h3 { margin: 18px 0 8px; }
.alt-bulten { border-top: 1px solid var(--cizgi); padding-top: 22px; padding-bottom: 22px; }
.alt-bulten form { display: grid; gap: 10px; max-width: 34rem; }
.alt-bulten .bulten-satir { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.alt-bulten .onay { color: inherit; opacity: .85; font-size: .82rem; }
.alt-bulten .onay a { color: inherit; text-decoration: underline; }
.cerez-ac { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer;
  font-size: .85rem; opacity: .85; }
/* Görselsiz kategori kutusu: yazı mutlak konumdaydı, kutu sıfır yükseklikte kalınca başlığın üstüne biniyordu. */
.gorselsiz-kutu span { position: static; display: block; }
.metin-blok { max-width: 46rem; }


/* ------------------------------------------------------------------ ortak parçalar (19 Eylül 2026)
   Vera Leath tasarımı için eklendi, bütün temalar kullanabilir: yazı tipi, ikon, ortalanmış üst düzen, kayan görsel
   alanı, güven şeridi, görsel ve metin bölümü, vaat satırları, ürün rozetleri, WhatsApp düğmesi, adet seçici,
   liste başlık bandı, bülten bandı. Renkler temanın değişkenlerinden. */

/* Alexandria (ev yazı tipi, OFL). Yalnız kullanan temada indirilir. */
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/statik/fonts/alexandria-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/statik/fonts/alexandria-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.ikon { flex: none; vertical-align: -.2em; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ust-baslik { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--vurgu); font-weight: 600;
  margin: 0 0 .45rem; }
.bolum-ust-ortali { justify-content: center; text-align: center; }
.bolum-ust-ortali > div { margin: 0 auto; }
.bolum-ust-ortali .bolum-baslik::after { left: 50%; transform: translateX(-50%); }
.bolum-alt { color: var(--soluk); margin: .35rem 0 0; font-size: .95rem; }
:where(.bolum-baslik, .kahraman h1, .kahraman h2, .gorsel-metin h2) em { font-style: italic; color: var(--vurgu); }
.dugme.koyu { background: var(--yazi); border-color: var(--yazi); color: var(--zemin); }
.dil-secici i { font-style: normal; color: var(--soluk); padding: 0 2px; }

/* Ortalanmış üst düzen (tema JSON'u: "duzen": {"ust": "ortali"}) */
.ust-ince { display: none; border-bottom: 1px solid var(--cizgi); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; }
.ust-ince-satir { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 8px; padding-bottom: 8px; }
.ust-ince-sol, .ust-ince-sag { display: flex; align-items: center; gap: 14px; }
.ust-ince-sag { text-transform: none; letter-spacing: .02em; font-size: .8rem; color: var(--soluk); }
.ust-sosyal { display: inline-flex; gap: 10px; padding-left: 12px; border-left: 1px solid var(--cizgi); color: var(--soluk); }
.ust-orta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 10px;
  padding-bottom: 10px; position: relative; }
.ust-orta-sol { display: flex; align-items: center; gap: 2px; }
.ust-ortali .menu-dugme { padding: 0; width: 36px; }
.ust-ikonlar { display: flex; justify-content: flex-end; gap: 4px; }
.ikon-dugme { display: inline-grid; place-items: center; width: 40px; height: 40px; background: none; border: 0;
  cursor: pointer; color: inherit; position: relative; border-radius: 50%; padding: 0; }
.ikon-dugme:hover { background: var(--cizgi-soft); text-decoration: none; }
.ikon-dugme .sepet-sayi { position: absolute; top: 1px; right: -1px; }
.marka-ortali { display: flex; align-items: center; gap: 10px; justify-self: center; }
.marka-ortali img { width: 44px; height: 44px; object-fit: contain; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1; }
.marka-yazi b { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1.05rem; }
.marka-yazi small { font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--soluk); margin-top: 5px; }
.ara-acilir { position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); z-index: 30; background: var(--kart-zemin);
  border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.ara-acilir[hidden] { display: none; }
.menu-mobil { padding: 12px 0; display: flex; gap: 14px; align-items: center; }
@media (min-width: 900px) {
  .ust-ince { display: block; }
  .ust-ortali .menu-dugme { display: none; }
  .menu-mobil { display: none; }
  .ara-acilir { right: auto; width: 440px; }
  .ust-ortali .menu-ust { justify-content: center; flex-wrap: wrap; row-gap: 0; }
  .ust-ortali .menu-ust > li > a { padding-top: 9px; padding-bottom: 9px; }
  .marka-yazi b { font-size: 1.3rem; }
}
@media (max-width: 899px) { .marka-yazi small { display: none; } }

/* Kayan görsel alanı (ardışık afiş blokları) */
.kaydirma { position: relative; }
.kaydirma-iz { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kaydirma-iz::-webkit-scrollbar { display: none; }
.kaydirma-slayt { flex: 0 0 100%; scroll-snap-align: start; }
.kaydirma-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.88); color: #1c1712; display: grid; place-items: center; cursor: pointer; }
.kaydirma-ok.onceki { left: 12px; }
.kaydirma-ok.sonraki { right: 12px; }
.kaydirma-noktalar { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.kaydirma-noktalar button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.6); }
.kaydirma-noktalar button[aria-current] { background: var(--vurgu); }

/* Güven şeridi */
.guvence-serit { border-bottom: 1px solid var(--cizgi); background: var(--kart-zemin); }
.guvence-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.guvence-oge { display: flex; gap: 12px; align-items: flex-start; }
.guvence-ikon { color: var(--vurgu); }
.guvence-oge b { display: block; font-size: .92rem; }
.guvence-oge span { font-size: .8rem; color: var(--soluk); }
@media (min-width: 900px) { .guvence-izgara { grid-template-columns: repeat(4, auto); justify-content: space-around; } }

/* Görsel ve metin */
.gorsel-metin { display: grid; gap: 28px; align-items: center; }
.gm-gorsel img { border-radius: var(--kose); width: 100%; }
.gm-logo { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--cizgi);
  border-radius: calc(var(--kose) + 6px); background: var(--kart-zemin); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.gm-logo img { width: 36%; }
.gm-metin blockquote { margin: 18px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--vurgu); font-style: italic;
  color: var(--vurgu); font-size: 1.05rem; }
@media (min-width: 900px) {
  .gorsel-metin { grid-template-columns: 1fr 1.1fr; gap: 56px; }
  .gorsel-sagda .gm-gorsel { order: 2; }
}

/* Kategori kutusundaki küçük üst etiket */
.kategori-kutu small { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }

/* Süzgeç: uzun listenin kalanı, renk örneği */
.secenek.fazla { display: none; }
.daha-fazla { margin-top: 6px; font-size: .82rem; }
.renk-ornek { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--cizgi);
  vertical-align: -2px; margin-right: 4px; }

/* Kart alt satırı (kısa açıklama): tema açmazsa görünmez */
.kart-alt { display: none; }

/* Ürün sayfası */
.vaatler { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 0 4px; font-size: .86rem; }
.vaatler li { display: flex; align-items: center; gap: 6px; }
.vaatler .ikon { color: var(--vurgu); }
.vaatler a { text-decoration: underline; }
.urun-rozetler { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 0; margin-top: 18px;
  border-top: 1px solid var(--cizgi); font-size: .86rem; }
.urun-rozetler li { display: flex; gap: 10px; align-items: flex-start; }
.urun-rozetler .ikon { color: var(--vurgu); margin-top: 2px; }
.urun-rozetler b { display: block; }
.urun-rozetler span { color: var(--soluk); font-size: .8rem; }
.whatsapp-dugme { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px;
  border-radius: 999px; background: #e9f7ee; color: #1a7f45; font-weight: 600; font-size: .9rem; }
.whatsapp-dugme:hover { text-decoration: none; filter: brightness(.97); }
.urun-fiyat .etiket { position: static; }
.adet-secici { display: flex; align-items: stretch; border: 1px solid var(--cizgi); border-radius: var(--kose); overflow: hidden; }
.adet-secici input { width: 48px; border: 0; text-align: center; padding: 10px 0; border-radius: 0; -moz-appearance: textfield; }
.adet-secici input::-webkit-inner-spin-button, .adet-secici input::-webkit-outer-spin-button { -webkit-appearance: none; }
.adet-secici button { width: 38px; border: 0; background: var(--cizgi-soft); cursor: pointer; font-size: 1.05rem; }

/* Liste başlık bandı */
.liste-bas { padding: 4px 0 8px; }
.liste-bas h1 { margin: 6px 0 4px; }
.liste-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 14px; }

/* Bülten bandı ve alt bilgi */
.bulten-bant { margin-top: 40px; background: var(--gorsel-zemin); border-top: 1px solid var(--cizgi); }
.bulten-izgara { display: grid; gap: 18px; padding-top: 30px; padding-bottom: 30px; align-items: center; }
.bulten-izgara h2 { margin: 0 0 4px; }
.bulten-izgara p { color: var(--soluk); margin: 0; font-size: .9rem; }
.bulten-bant .alt-bulten { border: 0; padding: 0; }
.bulten-bant .alt-bulten form, .bulten-bant form.alt-bulten { max-width: none; }
.bulten-bant .onay { font-size: .78rem; color: var(--soluk); }
@media (min-width: 900px) { .bulten-izgara { grid-template-columns: 1fr 1fr; gap: 40px; } }
.alt-bilgi { margin-top: 0; }
.alt-marka img { margin-bottom: 12px; }
.alt-sosyal { display: flex; gap: 10px; }
.alt-sosyal a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor;
  border-radius: 50%; opacity: .8; }
.alt-iletisim li { display: flex; gap: 8px; align-items: flex-start; }
.alt-iletisim li a { display: inline-flex; gap: 6px; align-items: center; }
.alt-rozetler { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.alt-rozetler span { font-size: .7rem; padding: 5px 9px; border: 1px solid currentColor; border-radius: 4px; opacity: .7; }

/* Kişiselleştirme (ürün sayfası) */
.kisisel { border: 0; padding: 0; margin: 14px 0 6px; display: grid; gap: 10px; }
.kisisel legend { font-size: .82rem; color: var(--soluk); margin-bottom: 6px; }
.kisisel select { padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--alan-zemin);
  max-width: 100%; }
.kisisel-onizleme { margin-top: 8px; min-height: 64px; display: grid; place-items: center; position: relative;
  border-radius: calc(var(--kose) + 2px); padding: 14px 16px 22px;
  background: linear-gradient(135deg, #7b4b2a, #5b371e); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06),
  inset 0 0 0 5px rgba(0,0,0,.18); }
.kisisel-onizleme span { font: italic 500 1.25rem/1.2 Georgia, "Times New Roman", serif; color: rgba(255,235,205,.82);
  text-shadow: 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.12); letter-spacing: .04em; text-align: center;
  word-break: break-word; }
.kisisel-onizleme small { position: absolute; right: 10px; bottom: 5px; font-size: .64rem; color: rgba(255,255,255,.5); }
.kisisel-satir a { text-decoration: underline; }

/* Birlikte alın */
.birlikte { margin-top: 18px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--kart-zemin);
  overflow: hidden; }
.birlikte-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--cizgi); font-size: .92rem; }
.birlikte-ust b { display: inline-flex; align-items: center; gap: 7px; }
.birlikte-ust .ikon { color: var(--vurgu); }
.birlikte-ust small { color: var(--soluk); font-size: .76rem; }
.birlikte ul { padding: 4px 14px; }
.birlikte li + li { border-top: 1px dashed var(--cizgi); }
.birlikte label { display: grid; grid-template-columns: auto 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 0;
  cursor: pointer; }
.birlikte img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; }
.birlikte span { display: flex; flex-direction: column; font-size: .86rem; min-width: 0; }
.birlikte span small { color: var(--soluk); font-size: .74rem; }
.birlikte em { font-style: normal; font-weight: 700; font-size: .9rem; }
.birlikte-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--gorsel-zemin); border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.birlikte-alt .dugme { padding: 8px 14px; font-size: .84rem; display: inline-flex; align-items: center; gap: 6px; }

/* Set parçası ve hediye paketi */
.set-etiket { display: flex; align-items: center; gap: 5px; margin: 0 0 3px; font-size: .76rem; color: var(--vurgu);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.hediye-paketi { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--cizgi); margin-top: 8px; }
.hediye-paketi .ikon { color: var(--vurgu); }
.set-icerik { margin: 14px 0; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 10px 14px; }
.set-icerik h2 { font-size: .9rem; margin: 0 0 8px; }
.set-icerik li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.set-icerik li + li { border-top: 1px dashed var(--cizgi); }
.set-icerik img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; }
.set-icerik small { display: block; color: var(--soluk); font-size: .76rem; }
.set-tasarruf { margin: 8px 0 0; font-size: .86rem; color: var(--vurgu); font-weight: 600; }

/* Stoğa girince haber ver */
.stok-bildirimi { margin-top: 14px; padding: 14px; border: 1px dashed var(--cizgi); border-radius: var(--kose); }
.stok-bildirimi[hidden] { display: none; }
.stok-bildirimi p { margin: 0 0 10px; }
.stok-bildirimi .bulten-satir { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* Blog: kart, liste ve yazı sayfası (core/blog.py) */
.yazi-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.yazi-kart { display: flex; flex-direction: column; background: var(--kart-zemin); border: var(--kart-cerceve);
  border-radius: var(--kose); overflow: hidden; color: var(--yazi); text-decoration: none; height: 100%; }
.yazi-kart-gorsel { display: block; aspect-ratio: 16 / 10; background: var(--alan-zemin); overflow: hidden; }
.yazi-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.yazi-kart:hover .yazi-kart-gorsel img { transform: scale(1.04); }
.yazi-kart-govde { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.yazi-meta { color: var(--soluk); font-size: .82rem; letter-spacing: .02em; }
.yazi-kart-baslik { font: var(--baslik-font); font-size: 1.12rem; line-height: 1.3; }
.yazi-kart-ozet { color: var(--soluk); font-size: .93rem; line-height: 1.55; }
.yazi-kart-devam { margin-top: auto; color: var(--vurgu); font-weight: 600; font-size: .9rem; }
.yazi-makale-bas { max-width: 46rem; padding-top: 28px; }
.yazi-makale-bas h1 { margin: 10px 0 12px; line-height: 1.2; }
.yazi-etiket { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--cizgi);
  border-radius: 999px; font-size: .78rem; }
.yazi-kapak { max-width: 64rem; margin-top: 18px; }
.yazi-kapak img { width: 100%; height: auto; border-radius: var(--kose); aspect-ratio: 16 / 9; object-fit: cover; }
.yazi-makale-govde { max-width: 46rem; padding: 26px 0 44px; font-size: 1.04rem; line-height: 1.75; }
.yazi-makale-govde ul { list-style: disc; }
.yazi-makale-govde ol { list-style: decimal; }
.yazi-makale-govde li { margin-bottom: 6px; }
.yazi-makale-govde a { color: var(--vurgu); text-decoration: underline; text-underline-offset: 3px; }
.yazi-giris { font-size: 1.15rem; color: var(--soluk); }
.yazi-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 30px; padding: 20px 22px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--alan-zemin); }
@media (max-width: 900px) { .yazi-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yazi-izgara { grid-template-columns: 1fr; } }

/* Yorumlar (core/yorum.py): yıldızlar metin, doluluk oranı --oran ile */
.yildizlar { display: inline-block; font-size: 1rem; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(90deg, var(--yildiz, #C9A227) var(--oran, 0%), var(--cizgi) var(--oran, 0%));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.puan-ozet { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 12px; color: var(--yazi); text-decoration: none; font-size: .92rem; }
.puan-ozet span:last-child { color: var(--soluk); text-decoration: underline; text-underline-offset: 3px; }
.kart-puan { margin: 2px 0 4px; font-size: .8rem; color: var(--soluk); }
.kart-puan .yildizlar { font-size: .85rem; letter-spacing: 1px; }
.yorumlar { max-width: 56rem; }
.yorum-ozet { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin: 8px 0 24px; }
.yorum-puan { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.yorum-puan strong { font-size: 2.6rem; line-height: 1; }
.yorum-puan small { color: var(--soluk); }
.yorum-cubuklar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.yorum-cubuklar li { display: grid; grid-template-columns: 36px 1fr 28px; gap: 10px; align-items: center; font-size: .85rem; }
.yorum-cubuklar .cubuk { height: 8px; border-radius: 99px; background: var(--alan-zemin); overflow: hidden; }
.yorum-cubuklar .cubuk span { display: block; height: 100%; background: var(--yildiz, #C9A227); }
.yorum-liste { list-style: none; margin: 0 0 20px; padding: 0; }
.yorum-liste > li { padding: 18px 0; border-top: 1px solid var(--cizgi); }
.yorum-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9rem; }
.yorum-bas time { color: var(--soluk); margin-left: auto; font-size: .82rem; }
.yorum-dogrulanmis { color: #2f7d4f; font-size: .8rem; font-weight: 600; }
.yorum-liste h3 { margin: 10px 0 4px; font-size: 1rem; }
.yorum-liste p { margin: 6px 0 0; white-space: pre-line; }
.yorum-cevap { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--vurgu); background: var(--alan-zemin); font-size: .92rem; }
.yorum-form { border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 14px 18px; }
.yorum-form summary { cursor: pointer; font-weight: 600; }
.yorum-form form { margin-top: 14px; display: grid; gap: 12px; }
.yorum-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yildiz-sec { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.yildiz-sec legend { float: left; width: 100%; margin-bottom: 4px; font-size: .9rem; }
.yildiz-sec input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yildiz-sec label { font-size: 1.8rem; line-height: 1; color: var(--cizgi); cursor: pointer; }
.yildiz-sec input:checked ~ label, .yildiz-sec label:hover, .yildiz-sec label:hover ~ label { color: var(--yildiz, #C9A227); }
.yildiz-sec input:focus-visible + label { outline: 2px solid var(--vurgu); outline-offset: 2px; }
@media (max-width: 640px) { .yorum-ozet, .yorum-alanlar { grid-template-columns: 1fr; } }

/* Ürün videosu (core/urun_video.py) */
.galeri-buyuk video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #000; }
.galeri-kucukler .kucuk-video { position: relative; }
.galeri-kucukler .kucuk-video span { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; background: rgba(0, 0, 0, .35); }

/* Taksit satırı ve tablosu (core/magaza.taksit_bilgisi) */
.taksit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 14px; font-size: .9rem; }
.taksit-pesin { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.taksit-pencere { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); padding: 16px; }
.taksit-pencere[hidden] { display: none; }
.taksit-kutu { width: min(560px, 100%); max-height: 84vh; overflow: auto; background: var(--kart-zemin);
  border-radius: var(--kose); padding: 18px 20px; }
.taksit-bas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.taksit-kapat { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--soluk); }
#paytr_taksit_tablosu table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#paytr_taksit_tablosu th, #paytr_taksit_tablosu td { border-bottom: 1px solid var(--cizgi); padding: 6px 8px; text-align: right; }
#paytr_taksit_tablosu th:first-child, #paytr_taksit_tablosu td:first-child { text-align: left; }

/* VERA: Vera Leath sitesinin tasarımı (leatherproducts.store, Temmuz-Eylül 2026). Faruk: "o tasarımla bayağı
   uğraştık, güzel oldu; onu kullanmak istiyorum." Kaynak palet: espresso #1C1712, konyak #7B4B2A, altın #C8A15A,
   krem #F5EFE6 / #EFE6D8, çizgi #E2D6C4. Yazı tipi Alexandria (ev yazı tipi). Porto şablonundan kod alınmadı;
   görünüm bu dosyada Rivaport yapısı üzerine yeniden kuruldu. */
:root {
  color-scheme: light;

  --espresso: #1C1712;
  --konyak: #7B4B2A;
  --altin: #C8A15A;
  --krem: #F5EFE6;
  --krem-2: #EFE6D8;

  --zemin: #ffffff;
  --yazi: #24201C;
  --soluk: #8a7766;
  --cizgi: #E2D6C4;
  --cizgi-soft: #f1e9dd;
  --kart-zemin: #ffffff;
  --alan-zemin: #ffffff;
  --gorsel-zemin: #ffffff;
  --ust-zemin: #F5EFE6;
  --serit-zemin: #EFE6D8;
  --serit-yazi: #7B4B2A;
  --kahraman-zemin: #1C1712;
  --kahraman-odak: center 45%;
  --alt-zemin: #1C1712;
  --alt-yazi: #EDE3D6;
  --etiket-zemin: #C8A15A;
  --etiket-yazi: #1C1712;
  --kutu-yazi-zemin: rgba(28,23,18,.55);
  --kutu-yazi: #fff;

  --vurgu: #C8A15A;
  --vurgu-yazi: #1C1712;

  --genislik: 1320px;
  --kose: 8px;
  --izgara-bosluk: 20px 20px;
  --kart-cerceve: 1px solid #ECE2D4;
  --kart-ic: 11px;
  --kart-baslik: .95rem;
  --kart-baslik-kalin: 500;

  --govde-font: 400 15px/1.6 "Alexandria", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --baslik-font: 300 1rem/1.2 "Alexandria", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --marka-font: 700 1.3rem/1 "Alexandria", ui-sans-serif, sans-serif;
  --marka-aralik: .08em;
  --marka-kutu: uppercase;
  --menu-aralik: .04em;
  --menu-kutu: uppercase;
  --dugme-aralik: .01em;
  --dugme-kutu: none;
  --h1: clamp(1.8rem, 3.6vw, 2.5rem);
  --h2: clamp(1.5rem, 3vw, 2.1rem);
  --h3: 1.1rem;
}

body { color: var(--yazi); }
h1, h2, h3 { color: var(--espresso); letter-spacing: .01em; }

/* Duyuru ve üst */
.serit { font-size: .74rem; letter-spacing: .06em; padding: 8px 12px; border-bottom: 1px solid var(--cizgi); font-weight: 500; }
.ust { background: var(--ust-zemin); }
.ust-ince { background: #f7f2eb; color: var(--espresso); font-weight: 500; }
.ust-ince-sag b { color: var(--konyak); }
.marka-ortali img { border-radius: 9px; }
.marka-yazi b { color: var(--espresso); }
.marka-yazi small { color: var(--konyak); }
.menu { background: #f7f2eb; }
.menu-ust > li > a { font-size: .78rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--espresso); }
.menu-ust > li > a:hover { color: var(--konyak); text-decoration: none; }
.sepet-sayi { background: var(--altin); color: var(--espresso); }

/* Düğme: altın zemin, espresso yazı */
.dugme { background: var(--altin); border-color: var(--altin); color: var(--espresso); border-radius: 6px; font-weight: 600;
  text-transform: none; letter-spacing: .01em; }
.dugme.ikincil { background: none; border-color: var(--espresso); color: var(--espresso); }
.dugme.koyu { background: var(--espresso); border-color: var(--espresso); color: #fff; border-radius: 4px; }

/* Afiş: yazı görselin üstünde, soldan koyulaşan örtü */
.kahraman { overflow: hidden; }
.kahraman > img { height: clamp(380px, 46vw, 620px); }
.kahraman:not(.gorselsiz-kahraman)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(28,23,18,.74) 0%, rgba(28,23,18,.42) 42%, rgba(28,23,18,0) 72%); }
.kahraman:not(.gorselsiz-kahraman) .kahraman-metin { position: absolute; inset: 0; z-index: 1; display: flex;
  flex-direction: column; justify-content: center; align-items: flex-start; color: #fff; }
.kahraman h1, .kahraman h2 { color: #fff; font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.12;
  max-width: 13ch; margin-bottom: .9rem; }
.kahraman :where(h1, h2) em { color: var(--altin); font-style: italic; font-weight: 300; }
.kahraman p { color: rgba(255,255,255,.88); max-width: 42ch; font-size: .95rem; }
.kahraman .ust-baslik { color: var(--altin); }
.kahraman .dugme { margin-top: .6rem; }
.gorselsiz-kahraman { background: var(--krem-2); }
.gorselsiz-kahraman h1, .gorselsiz-kahraman h2 { color: var(--espresso); }
.gorselsiz-kahraman p { color: var(--soluk); }

/* Bölüm başlıkları: ortada küçük konyak üst satır, ince büyük başlık */
.bolum { padding-top: 46px; padding-bottom: 10px; }
.bolum-ust { margin-bottom: 26px; }
.bolum-baslik { font-weight: 300; font-size: var(--h2); }
.ust-baslik { color: var(--konyak); font-weight: 600; letter-spacing: .22em; }
.bolum-alt { color: var(--konyak); opacity: .85; font-size: .88rem; margin-top: .9rem; }

/* Güven şeridi */
.guvence-serit { background: #fff; }
.guvence-ikon { color: var(--altin); }
.guvence-oge b { font-weight: 600; color: var(--espresso); }
.guvence-oge span { color: var(--konyak); opacity: .85; }

/* Ürün kartı: beyaz, ince krem çerçeve, altın indirim hapı, fiyat kartın dibinde */
.kart { display: flex; flex-direction: column; border-radius: var(--kose); transition: box-shadow .2s; }
.kart:hover { box-shadow: 0 10px 26px rgba(28,23,18,.07); }
.kart-gorsel { background: #fff; }
.kart-gorsel img { aspect-ratio: 1 / 1; object-fit: contain; padding: 6%; }
.kart-metin { display: flex; flex-direction: column; flex: 1; padding: 10px var(--kart-ic) 12px; }
.kart h3 { font-size: var(--kart-baslik); font-weight: 500; line-height: 1.3; min-height: 2.6em; margin: 2px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--espresso); }
.kart-alt { display: block; font-size: .74rem; color: var(--konyak); opacity: .8; margin: 0 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kart-marka { display: none; }
.kart .fiyat { margin-top: auto; display: flex; flex-direction: column; }
.kart .fiyat s { font-size: .74rem; color: var(--konyak); opacity: .75; margin: 0; }
.kart .fiyat b { font-size: 1rem; font-weight: 700; color: var(--espresso); }
.etiket { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .7rem; padding: 5px 10px 5px 9px; }
.etiket.indirim::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 5px; vertical-align: .12em; }

/* Koleksiyon kutuları: krem bant, görselin altından koyulaşan örtü */
.kategori-bolum { background: var(--krem-2); padding-bottom: 46px; margin-top: 40px; }
.kategori-izgara { gap: 20px; }
.kategori-kutu { border: 0; border-radius: var(--kose); overflow: hidden; background: #fff; }
.kategori-kutu img { aspect-ratio: 3 / 2; object-fit: cover; }
.kategori-kutu::after { content: ""; position: absolute; inset: 40% 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,23,18,0), rgba(28,23,18,.62)); }
.kategori-kutu span { position: absolute; left: 18px; bottom: 16px; right: 18px; z-index: 1; background: none;
  color: #fff; font-size: 1.15rem; font-weight: 500; padding: 0; text-align: left; text-transform: none; letter-spacing: 0; }
.kategori-kutu small { color: var(--altin); font-weight: 600; margin-bottom: 4px; }
.kategori-kutu.gorselsiz-kutu { background: linear-gradient(135deg, #3a2a1f, #7b4b2a); min-height: 170px; }

/* Görsel ve metin (atölye) */
.gm-metin h2 { font-weight: 300; font-size: var(--h2); }
.gm-metin .yazi-govde { color: #8a8076; font-size: .88rem; }
.gm-metin blockquote { color: var(--konyak); border-left-color: var(--altin); }

/* Liste: krem başlık bandı, sol filtre */
.liste-bas { background: var(--krem-2); text-align: center; padding: 34px 0 38px; margin-bottom: 26px; }
.liste-bas .kirinti { justify-content: center; padding: 0 0 8px; color: var(--konyak); }
.liste-bas h1 { font-weight: 300; }
.liste-bas .kategori-metin { color: var(--konyak); opacity: .85; font-size: .9rem; max-width: 60ch; margin: 6px auto 0; }
.liste-ust { border-bottom: 1px solid var(--cizgi); margin-bottom: 18px; }
.liste-ust .sayi { color: var(--konyak); }
.filtre legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--konyak); font-weight: 600; }

/* Ürün sayfası */
.galeri-buyuk { background: #fff; border: 1px solid #ECE2D4; border-radius: 12px; padding: 6%; }
.galeri-buyuk img { aspect-ratio: 1 / 1; object-fit: contain; }
.galeri-buyuk video { aspect-ratio: 1 / 1; object-fit: contain; background: #F6F1E9; }
.galeri-kucukler { display: grid; grid-template-columns: repeat(7, 1fr); overflow: visible; }
.galeri-kucukler button { border: 1px solid #ECE2D4; border-radius: 8px; background: #fff; overflow: hidden; }
.galeri-kucukler img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 900px) { .urun-duzen { grid-template-columns: 1fr 1fr; gap: 40px; } }
.urun-bilgi h1 { font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.urun-ozet { color: var(--konyak); opacity: .8; font-size: .9rem; }
.urun-fiyat b { font-size: 1.7rem; font-weight: 700; color: var(--espresso); }
.urun-fiyat s { color: var(--konyak); opacity: .75; }
.kdv-notu { display: none; }
.vaatler { color: var(--konyak); }
.vaatler .ikon { color: var(--altin); }
.secenek-grup legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--konyak); font-weight: 600; }
.secenek-kutu span { border-radius: 999px; padding: 8px 16px; font-size: .86rem; border-color: var(--cizgi); background: #fff; }
.secenek-kutu input:checked + span { background: var(--espresso); border-color: var(--espresso); color: #fff; }
.sepete { background: var(--altin); border-color: var(--altin); color: var(--espresso); }
.adet-secici { border-radius: 999px; }
.adet-secici button { background: #f6f0e8; }
.urun-rozetler { border-top-color: var(--cizgi); }
.urun-bolum h2 { font-weight: 400; font-size: 1.2rem; }

/* Bülten bandı ve koyu alt bilgi */
.bulten-bant { background: var(--krem-2); border-top: 0; }
.bulten-izgara h2 { font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.alt-bilgi { border-top: 0; }
.alt-baslik { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: #fff; }
.alt-bilgi a:hover { color: var(--altin); text-decoration: none; }
.alt-marka img { border-radius: 9px; }
.alt-sosyal a { color: #d9cbb8; }
.alt-iletisim .ikon { color: var(--altin); }
.alt-son { border-top-color: rgba(237,227,214,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.alt-rozetler span { border-color: rgba(237,227,214,.25); background: rgba(255,255,255,.04); }

/* Sepet, ödeme ve hesap sayfalarında kartlar beyaz, çerçeve krem */
.sepet-ozet, .odeme-ozet, .blok { border-color: #ECE2D4; }

.kisisel legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--konyak); font-weight: 600; }
.kisisel select { border-radius: 6px; }
.birlikte { border-color: #ECE2D4; }
.birlikte-alt { background: #EFE6D8; }
.birlikte-alt .dugme { border-color: var(--espresso); }