/* =====================================================================
   Studio Buga — yerleşim (layout.css)
   Bu görevde yalnız içerik kabı var; header, footer, ızgara, mini sepet ve
   çekmece Görev 6–8'de bu dosyaya eklenir. Kırılım noktaları: base.css başı.
   ===================================================================== */

/* İçerik kabı: en fazla 1440 px, yanlarda --sb-kenar (24 → 40 → 100);
   1440'ta içerik 1240 px (spec §4.1). 100vw kullanılmaz — kaydırma çubuğunu
   saymadığı için yatay taşma yaratır. */
.sb-kap {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--sb-icerik) + 2 * var(--sb-kenar));
  margin-inline: auto;
  padding-inline: var(--sb-kenar);
}

/* =====================================================================
   HEADER · DUYURU · ARAMA PANELİ · MOBİL ÇEKMECE  (Görev 6, spec §4.2)
   Ölçüler: rep-tokens.md §4 ve rep-pages.md §2–3 (90 px bar, 80 px kenar,
   16 px büyük harfli menü, 30 px aralık). Kırılım: 992 (base.css listesi).
   Kenar --sb-header-kenar (24 → 40 → 80), açılır gölge --sb-golge-acilir (base.css).
   ===================================================================== */

/* ---- Duyuru şeridi (metin boşsa header.php hiç basmaz) ---- */
.sb-duyuru {
  background: var(--wp--preset--color--metin);
  color: var(--wp--preset--color--zemin);
}

.sb-duyuru__metin {
  margin: 0;
  padding-block: 6px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Header: yapışkan, JS'siz (spec §4.2) ----
   Şeffaf kabuk + beyaz, köşeleri yuvarlak kart (.sb-header__ic). Ana sayfada hero
   header'ın altına çekilir (anasayfa.css, --sb-header-yuk): kart görselin üstünde durur.
   Kabuk tıkları geçirir; yalnız kart ve arama paneli tıklanır. */
:root {
  /* Kabuk yüksekliği = üst boşluk + kart + alt boşluk (mobil 12 + 64 + 12; masaüstü 12 + 90 + 12). */
  --sb-header-yuk: 88px;
}

.sb-header {
  position: sticky;
  top: var(--admin-bar, 0px);
  z-index: 100;
  padding: 12px var(--sb-header-kenar);
  pointer-events: none;
}

/* Mobil: logo tam ortada (owner 2026-10-01). Yan sütunlar eşit (1fr), menü solda, sepet sağda;
   masaüstünde 992 px'te auto / 1fr / auto'ya döner. */
.sb-header__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding-inline: 12px;
  border-radius: 16px;
  background: var(--wp--preset--color--zemin);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.sb-header__logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  overflow: hidden;
  color: var(--wp--preset--color--metin);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Panelden seçilen logo (header.php; Özelleştirici → Görseller → Logo). Oranı korunur;
   mobilde 48 px (≈150 px genişlik), masaüstünde 64 px (≈200 px): daha küçükte
   logonun alt satırı ("STUDIO") okunmuyor. */
/* Genişlik ve yükseklik auto, sınırlar max-*: dar ekranda oran korunarak küçülür
   (sabit yükseklik + max-width logoyu eziyordu, 360 px'de ölçüldü). */
.sb-header__logo-gorsel {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 29px;
}

.sb-nav {
  display: none;
}

.sb-header__ikonlar {
  display: flex;
  align-items: center;
  justify-self: end;
}

/* Bağımsız etkileşimli öğe: en az 44×44 (spec §4.1). */
.sb-header__ikon,
.sb-kapat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--metin);
  text-decoration: none;
  cursor: pointer;
}

.sb-header__ikon:hover,
.sb-kapat:hover {
  color: var(--wp--preset--color--aksan-koyu);
}

/* Mobilde hesap bağlantısı çekmecede: 390 px'de logo + dört ikon sığmıyor. Arama ve beğenilenler de
   mobilde çekmecede (owner 2026-10-01: header'da yalnız menü, logo, sepet). */
.sb-header__ikon--hesap,
.sb-header__ikon--ara,
.sb-header__ikon--begeni {
  display: none;
}

.sb-header__menu-dugme {
  justify-self: start;
}

.sb-ikon {
  display: block;
  width: 20px;
  height: 20px;
}

/* Sayaç rozetleri: kum dolgu + #333 metin (7,36:1; spec §4.1 aksan-uzeri). */
.sb-sepet-adet,
.sb-header__sayac {
  position: absolute;
  top: 4px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--wp--preset--color--aksan);
  color: var(--wp--preset--color--aksan-uzeri);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.sb-sepet-adet[hidden],
.sb-header__sayac[hidden] {
  display: none;
}

/* ---- Masaüstü menü ---- */
.sb-nav__liste,
.sb-nav .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-nav__liste {
  display: flex;
  gap: 30px;
}

.sb-nav__liste > li {
  position: relative;
}

.sb-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wp--preset--color--metin);
  text-decoration: none;
}

.sb-nav__liste > li > a {
  position: relative;
  font-size: 16px;
  text-transform: uppercase;
}

/* Aktif öğe: ortadan açılan kum tonu alt çizgi (Mober, 0,3 sn). Çizgi durum
   göstergesi olduğu için aksan-koyu: 3:1 ister (WCAG 1.4.11), aksan beyazda 1,96:1. */
.sb-nav__liste > li > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 2px;
  background: var(--wp--preset--color--aksan-koyu);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.sb-nav__liste > .current-menu-item > a::after,
.sb-nav__liste > .current-menu-ancestor > a::after,
.sb-nav__liste > li > a:hover::after {
  transform: scaleX(1);
}

.sb-nav a:hover {
  color: var(--wp--preset--color--aksan-koyu);
}

/* Alt menü (Ürünlerimiz → kategoriler): fareyle ve klavye odağıyla (:focus-within) açılır. Header kartıyla
   aynı yuvarlak kart dili; kartın altına (kart 90 px, bağlantı ortada) 36 px ile oturur, ::before köprüsü fare geçerken
   listenin kapanmasını önler. */
.sb-nav .sub-menu {
  position: absolute;
  top: calc(100% + 36px);
  left: 50%;
  z-index: 1;
  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  background: var(--wp--preset--color--zemin);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0s linear 0.2s;
}

.sb-nav .sub-menu::before {
  content: "";
  position: absolute;
  top: -38px;
  right: 0;
  left: 0;
  height: 38px;
}

.sb-nav li:hover > .sub-menu,
.sb-nav li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.sb-nav .sub-menu a {
  width: 100%;
  padding-inline: 16px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.sb-nav .sub-menu a:hover {
  background: var(--wp--preset--color--yuzey-sicak);
  text-decoration: none;
}

/* ---- Arama paneli (header'ın altında açılır) ---- */
.sb-arama {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--wp--preset--color--zemin);
  border-bottom: 1px solid var(--wp--preset--color--kenarlik-acik);
  box-shadow: var(--sb-golge-acilir);
  pointer-events: auto; /* kabuk (.sb-header) tıkları geçirir */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}

.sb-arama[data-acik],
.sb-arama:target {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.sb-arama__ic {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 20px;
}

.sb-arama .woocommerce-product-search {
  flex: 1;
  display: flex;
  gap: 10px;
}

.sb-arama .search-field {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 10px 16px; /* metin sol çizgiye ve alt çizgiye yapışmasın (owner isteği 2026-10-01) */
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--kenarlik);
  background: transparent;
  color: var(--wp--preset--color--metin);
  font-size: 16px;
}

/* Odak çerçevesi alanın dışında durur: alt çizgiyle iç içe geçip metne yaklaşmasın. */
.sb-arama .search-field:focus-visible {
  outline-offset: 4px;
}

.sb-arama .woocommerce-product-search button {
  min-height: 52px;
  padding-inline: 30px;
  border: 0;
  background: var(--wp--preset--color--metin);
  color: var(--wp--preset--color--zemin);
  font-size: 14px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---- Mobil çekmece (<992; soldan, sayfayı karartmaz — Mober) ---- */
.sb-cekmece {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.2s;
}

.sb-cekmece[data-acik],
.sb-cekmece:target {
  visibility: visible;
  transition-delay: 0s;
}

.sb-cekmece__panel {
  position: absolute;
  top: var(--admin-bar, 0px);
  bottom: 0;
  left: 0;
  width: min(300px, 85vw);
  overflow-y: auto;
  padding: 10px 24px 40px;
  background: var(--wp--preset--color--zemin);
  box-shadow: var(--sb-golge-acilir);
  pointer-events: auto;
  transform: translateX(-100%);
  transition: transform 0.2s;
}

.sb-cekmece[data-acik] .sb-cekmece__panel,
.sb-cekmece:target .sb-cekmece__panel {
  transform: none;
}

.sb-cekmece__ust {
  display: flex;
  justify-content: flex-end;
}

.sb-cekmece__liste,
.sb-cekmece__liste .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-cekmece__liste > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--kenarlik);
}

.sb-cekmece__liste a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--wp--preset--color--metin);
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
}

.sb-cekmece__liste > .current-menu-item > a {
  color: var(--wp--preset--color--aksan-koyu);
}

.sb-cekmece__alt-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--metin);
  cursor: pointer;
}

.sb-cekmece__alt-dugme .sb-ikon {
  transition: transform 0.2s;
}

.sb-cekmece__alt-dugme[aria-expanded="true"] .sb-ikon {
  transform: rotate(180deg);
}

.sb-cekmece__liste .sub-menu {
  flex-basis: 100%;
  margin-bottom: 10px;
  padding: 5px 15px;
  background: var(--wp--preset--color--yuzey);
}

.sb-cekmece__liste .sub-menu a {
  min-height: 44px;
  font-size: 14px;
  text-transform: none;
}

.sb-cekmece__hesap {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-top: 20px;
  color: var(--wp--preset--color--metin);
  font-size: 14px;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
}

.sb-cekmece__hesap + .sb-cekmece__hesap {
  margin-top: 0;
}

.sb-cekmece__arama {
  margin-top: 24px;
}

@media (min-width: 992px) {
  :root {
    --sb-header-yuk: 114px;
  }

  .sb-header__ic {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 40px;
    min-height: 90px;
    padding-inline: 32px;
  }

  .sb-header__menu-dugme {
    display: none;
  }

  .sb-header__logo {
    justify-self: start;
    font-size: 20px;
  }

  .sb-header__logo-gorsel {
    max-height: 38px;
  }

  .sb-nav {
    display: block;
    justify-self: center;
  }

  .sb-header__ikon--hesap,
  .sb-header__ikon--ara,
  .sb-header__ikon--begeni {
    display: inline-flex;
  }

  .sb-cekmece {
    display: none;
  }
}

/* =====================================================================
   MİNİ SEPET ÇEKMECESİ  (Görev 6, spec §4.2, §4.4)
   Kaynak: nostaljikradyo-child/assets/css/layout.css:439-619. Mober: 450 px,
   sağdan, 0,3 sn (rep-motion.md §9). Köşe 0 (spec §4.1).
   ===================================================================== */
.sb-mini {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s;
}

.sb-mini[data-acik] {
  visibility: visible;
  transition-delay: 0s;
}

/* Örtü yalnız görseldir. Nostaljikradyo ölçümü (2026-07-31): örtü tık alırken
   sepete eklemeden sonraki ilk tık hedefine hiç ulaşmıyordu. Dışarı tıkta
   kapatmayı nav.js yapar. */
.sb-mini__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.sb-mini[data-acik] .sb-mini__scrim {
  opacity: 1;
}

.sb-mini__panel {
  position: absolute;
  top: var(--admin-bar, 0px);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 450px);
  background: var(--wp--preset--color--zemin);
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.28, 0.59, 0.45, 0.93);
}

.sb-mini[data-acik] .sb-mini__panel {
  transform: none;
}

.sb-mini__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--kenarlik);
}

.sb-mini__baslik {
  margin: 0;
  color: var(--wp--preset--color--metin);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sb-mini__govde {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.sb-mini__govde .woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-mini__govde .woocommerce-mini-cart-item {
  position: relative;
  display: block; /* Blocksy satırı grid yapıyor; görsel ve sil düğmesi mutlak konumlu olduğu için ad dar ilk sütuna sıkışıyordu */
  min-height: 101px;
  padding: 10px 44px 10px 90px;
  border-bottom: 1px solid var(--wp--preset--color--kenarlik-acik);
  font-size: 14px;
  line-height: 1.4;
}

.sb-mini__govde .woocommerce-mini-cart-item a:not(.remove) {
  color: var(--wp--preset--color--metin);
  text-decoration: none;
}

/* Blocksy görseli .ct-media-container içine alabiliyor; ikisi de sola sabit, kart oranı 8:9. */
.sb-mini__govde .woocommerce-mini-cart-item .ct-media-container,
.sb-mini__govde .woocommerce-mini-cart-item img {
  position: absolute;
  top: 10px;
  left: 0;
  width: 72px;
  height: 81px;
  margin: 0;
  object-fit: cover;
}

.sb-mini__govde .woocommerce-mini-cart-item .ct-media-container img {
  position: static;
  width: 100%;
  height: 100%;
}

.sb-mini__govde .woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 10px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--wp--preset--color--metin-ikincil);
  font-size: 20px;
  text-decoration: none;
}

.sb-mini__govde .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 5px;
  color: var(--wp--preset--color--metin-ikincil);
  white-space: nowrap;
}

.sb-mini__govde .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-block: 20px;
  color: var(--wp--preset--color--metin);
  font-weight: 500;
}

.sb-mini__govde .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.sb-mini__govde .woocommerce-mini-cart__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 30px;
  border: 1px solid var(--wp--preset--color--metin);
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--metin);
  font-size: 14px;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
}

.sb-mini__govde .woocommerce-mini-cart__buttons .button:hover,
.sb-mini__govde .woocommerce-mini-cart__buttons .checkout {
  background: var(--wp--preset--color--metin);
  color: var(--wp--preset--color--zemin);
}

.sb-mini__govde .woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--wp--preset--color--koyu-dolgu);
}

/* Boş durum: Blocksy'nin mini sepet şablonu WC'nin cart/cart-empty.php'sini basar
   (blocksy/woocommerce/cart/mini-cart.php:146-154). */
.sb-mini__govde .cart-empty {
  display: flex; /* Blocksy iletiyi flex yapıyor: text-align tek başına ortalamaz, simge de ::before ile solda */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 40px 20px 20px;
  border: 0;
  background: none;
  color: var(--wp--preset--color--metin-ikincil);
  text-align: center;
}

/* Zil simgesi akışa alınır, metnin üstünde ortada durur (owner isteği 2026-10-01). */
.sb-mini__govde .cart-empty::before {
  position: static;
  flex: none;
}

.sb-mini__govde .return-to-shop {
  margin: 0;
  text-align: center;
}

/* =====================================================================
   FOOTER  (Görev 6, spec §4.3; yeniden tasarım: owner isteği 2026-10-01)
   Ortalı: marka, ince altın çizgi, künye satırları, yasal bağlantılar, telif. Sıcak yüzey
   zemini. Metin #6A6A6A (sıcak yüzeyde 5,3:1) — Mober'in #ABABAB'ı (2,3:1) kopyalanmaz (spec §4.5).
   ===================================================================== */
.sb-footer {
  width: 100%;
  /* Blocksy #main-container esnek sütun; footer küçülüp çökmesin
     (nostaljikradyo-child/assets/css/layout.css:44-51). */
  flex-shrink: 0;
  margin-top: 40px;
  background: var(--wp--preset--color--yuzey-sicak);
  border-top: 1px solid var(--wp--preset--color--kenarlik-acik);
  color: var(--wp--preset--color--metin-ikincil);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

.sb-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wp--preset--color--metin-ikincil);
  text-decoration: none;
  transition: color 0.2s;
}

.sb-footer a:hover {
  color: var(--wp--preset--color--aksan-koyu);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sb-footer__ust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-block: 72px 36px;
}

.sb-footer__kunye {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sb-footer__marka {
  margin: 0;
  color: var(--wp--preset--color--metin);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Logonun altında kısa, ince altın çizgi. */
.sb-footer__marka::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 24px auto 22px;
  background: var(--wp--preset--color--aksan);
}

.sb-footer__adres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 28px;
  max-width: 720px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.sb-footer__baslik {
  margin: 0 0 10px;
  color: var(--wp--preset--color--metin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sb-footer__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer menüleri (atanmışsa): ortalı satır. */
.sb-footer__menu .sb-footer__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 28px;
}

.sb-footer__alt {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--wp--preset--color--kenarlik-acik);
  font-size: 12px;
  text-align: center;
}

.sb-footer__telif {
  margin: 0;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sb-footer__yasal .sb-footer__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
  letter-spacing: 0.08em;
}

@media (min-width: 992px) {
  .sb-footer__menu .sb-footer__liste {
    gap: 0 40px;
  }

  .sb-footer__yasal .sb-footer__liste {
    gap: 0 32px;
  }
}

/* Footer logosu (footer.php, inc/setup.php sb_logo_html): header'la aynı panel ayarı; açık
   zeminde logo-koyu (owner kararı 19). Oran korunur. */
.sb-footer__logo-gorsel {
  display: block;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 64px;
}

/* =====================================================================
   SAYFA BAŞLIK BANDI · KIRINTI YOLU  (Görev 8–10, spec §4.3)
   Arşiv bandı (inc/magaza.php sb_arsiv_bandi), ürün sayfasının kırıntı bandı
   (Görev 9) ve sepet / ödeme / Hesabım bandı (inc/hesap.php sb_hesap_bandi).
   magaza.css'ten taşındı: ödeme ve Hesabım'da magaza.css yüklenmiyor
   (inc/assets.php sb_stil_haritasi).
   ===================================================================== */
.sb-bant {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 165px;
  margin: 0 0 50px;
  padding: 50px 0;
  overflow: hidden;
  text-align: center;
  color: var(--wp--preset--color--metin, #333333);
  background: var(--wp--preset--color--bant, #c9c5c0);
}

.sb-bant--gorselli {
  color: #ffffff;
}

.sb-bant__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fotoğraf üstünde beyaz başlık okunaklı kalsın; katman tık yutmaz. */
.sb-bant--gorselli::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.sb-bant__icerik {
  position: relative;
  z-index: 1;
}

.sb-bant__baslik {
  margin: 0;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
}

@media (min-width: 992px) {
  .sb-bant {
    min-height: 304px;
    margin-bottom: 90px;
    padding: 100px 0;
  }
}

/* Kırıntı yolu (Rank Math; do_action( 'sb_breadcrumb' ), Görev 9). Bağlantılar cümle
   içi değil, bağımsız öğe: en az 44 px (spec §4.1). Renk bulunduğu banttan gelir;
   fotoğraflı bantta beyaz, odak halkası da beyaz. */
.sb-kirinti {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.sb-kirinti p {
  margin: 0;
}

.sb-kirinti a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sb-dokunma, 44px);
  min-inline-size: var(--sb-dokunma, 44px);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sb-kirinti .separator {
  padding-inline: 6px;
}

.sb-bant--gorselli .sb-kirinti {
  --sb-odak-rengi: #ffffff;
}

/* =====================================================================
   WC İLETİLERİ  (Görev 10, spec §4.1 kontrast, §11 #5)
   Blocksy'nin varsayılanları AA altında: bilgi ve başarı iletisi metni
   --theme-text-color (#747474) #F0F1F3 üstünde 4,06:1; hata iletisi beyaz metin
   %70 saydam kırmızı üstünde ≈ 3,8:1 (blocksy/inc/dynamic-styles/global/
   woocommerce/general.php:144-175, :218-250, :296-325; yerleşim
   static/sass/…/woocommerce/misc/notice/legacy-notice.scss:9-30). Boş sepet, üye
   olma hatası ve ödeme hataları bu kutularda. Blocksy değişkenleri satır içi
   stille bizden SONRA basıyor; :root önekli seçici (0,2,0) Blocksy'nin (0,1,0)
   seçicisini sıradan bağımsız yener (base.css html:root deseni).
   Bilgi/başarı: #333 / #F6F6F6 11,7:1. Hata: beyaz / #4E4E4E 8,3:1.
   "Sipariş alındı" iletisi .woocommerce-message taşımaz, kendi sınıfıyla basılır
   (woocommerce/templates/checkout/order-received.php:23); Blocksy ona da bilgi
   iletisinin renklerini veriyor (4,14:1).
   Mini sepetin boş durumu kendi rengini ve zeminini doğrudan veriyor
   (.sb-mini__govde .cart-empty), etkilenmez.
   ===================================================================== */
:root :is(.woocommerce-info, .woocommerce-message, .woocommerce-thankyou-order-received) {
  --theme-text-color: var(--wp--preset--color--metin);
  --background-color: var(--wp--preset--color--yuzey-2);
}

:root .woocommerce-error {
  --theme-text-color: var(--wp--preset--color--zemin);
  --background-color: var(--wp--preset--color--koyu-dolgu);
  --sb-odak-rengi: var(--wp--preset--color--zemin);
}

/* =====================================================================
   ÇEREZ BİLGİLENDİRME BANDI  (Görev 11; spec §6.8, §4.1, §4.4; inc/cerez.php, cerez.js)
   Her sayfada; bu yüzden sayfa.css'te değil (sayfa.css mağaza, ürün ve sepette yüklenmiyor,
   inc/assets.php sb_stil_haritasi).
   Yapışkan (sticky), fixed değil: belgenin sonunda akışa katılır, kaydırırken ekranın altında
   durur, sayfa sonunda footer'ın ardındaki kendi yerine oturur, footer bağlantılarını örtmez.
   Açılması görünen içeriği kaydırmaz (CLS). Blocksy'nin body { overflow-x: hidden }'ı görünüm
   alanına aktarılıyor (html görünür): gövde kaydırma kabı değil, yapışkan konum çalışır.
   z-index 90: header (100), menü ve filtre çekmeceleri (200), mini sepet (210) bandın üstünde.
   Koyu dolgu + beyaz metin 8,3:1 (kontrast.mjs 'zemin' / 'koyu-dolgu'). Geçiş yok.
   ===================================================================== */
.sb-cerez {
  position: sticky;
  bottom: 0;
  z-index: 90;
  background: var(--wp--preset--color--koyu-dolgu);
  color: var(--wp--preset--color--zemin);
  --sb-odak-rengi: var(--wp--preset--color--zemin);
}

.sb-cerez__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-block: 10px;
}

.sb-cerez__metin {
  flex: 1 1 280px;
  margin: 0;
  font-size: var(--wp--preset--font-size--kucuk);
  line-height: var(--sb-satir-arayuz);
}

/* Cümle içi bağlantı: koyu zeminde beyaz kalır (Blocksy'nin hover rengi aksan-koyu burada 1,6:1). */
.sb-cerez__metin a,
.sb-cerez__metin a:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Adet kutusu ≥ 44 px (spec §4.1; Görev 12 ölçümü: sepette 40, dar ekranda 38). Blocksy yüksekliği
   --quantity-height'tan ve dar ekranda (0,4,0) özgüllükle veriyor (woocommerce.min.css
   `.cart_item .product-mobile-actions .quantity[data-type=type-2]`); değişkenin kendisi ezilir. */
.quantity[data-type] {
  --quantity-height: var(--sb-dokunma) !important;
}

/* Teslim süresi çipi (inc/urun.php sb_urun_teslim_cipi): ürün sayfası ve sepet satırı aynı
   işaretleme, aynı kural (Plan 2 Görev 4; önceden urun.css ve hesap.css'te iki kopya). layout.css her
   sayfada yüklenir. */
.sb-urun__teslim {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-block-size: 32px;
  margin-block: 8px 20px;
  padding: 4px 12px;
  border: 1px solid var(--wp--preset--color--kenarlik);
  color: var(--wp--preset--color--metin);
  font-size: var(--wp--preset--font-size--kucuk);
  line-height: var(--sb-satir-arayuz);
  letter-spacing: 0.05em;
}

/* Çipin altındaki konum notu: çipe yapışık, ikincil renk (beyazda 5,7:1). */
.sb-urun__teslim + .sb-urun__teslim-not {
  margin-block: -14px 20px;
  color: var(--wp--preset--color--metin-ikincil);
  font-size: var(--wp--preset--font-size--kucuk);
  line-height: var(--sb-satir-arayuz);
}

/* İndirim gösterimi (Plan 2 Görev 8, spec §6.3): Blocksy üstü çizili fiyatı %70 opaklıkla basıyordu
   (etkin kontrast AA altı); referans fiyat tam opak. İndirim tarihleri fiyatın altında ayrı satırda. */
.price del {
	opacity: 1;
}

.sb-indirim-tarihi {
	display: block;
	margin-top: 4px;
	font-size: 0.875rem;
}