/* ==========================================================================
   BeShe — tasarım dili
   ==========================================================================
   Sessiz lüks: fildişi zemin, mürekkep siyahı, keskin köşeler, bol boşluk.
   Başlıklar logonun ruhunu taşıyan Cormorant Garamond; arayüz metni ve
   küçük büyük harfli etiketler logonun "WOMEN WEAR" satırı gibi geometrik
   Jost. Renk yalnızca ürün fotoğraflarından gelir.

   Bu dosya her sayfada EN SON yüklenir (goreel_theme: beshe.css). Çerçeve
   sayfaları (hesap, sepet, ödeme) goreel.css token'larıyla aynı paleti
   kullanır; buradaki bs-* bileşenleri BeShe şablonlarına aittir.

   İÇİNDEKİLER
     1. Token'lar ve temel
     2. Düğmeler, bağlantılar, etiketler
     3. Header, arama, çekmece, mini sepet
     4. Ana sayfa
     5. Ürün kartı, ızgara, raf
     6. Liste sayfaları
     7. Ürün sayfası
     8. Pencereler
     9. Footer
    10. Çerçeve sayfalarına ince ayar
   ========================================================================== */


/* 1. TOKEN'LAR VE TEMEL ==================================================== */

:root {
  --bs-bg:     #F6F3EE;
  --bs-paper:  #FFFFFF;
  --bs-sand:   #EFEAE2;
  --bs-ink:    #141414;
  --bs-ink2:   #3A3734;
  --bs-mute:   #6B665F;
  --bs-faint:  #A39D94;
  --bs-line:   #E5DFD6;
  --bs-line2:  #CFC8BD;
  --bs-gold:   #A88A5C;
  --bs-danger: #A3301F;

  --bs-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --bs-sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --bs-gutter: clamp(16px, 3.2vw, 48px);
  --bs-max:    1600px;
  --bs-head-h: 72px;
  --bs-ease:   cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 899px) {
  :root { --bs-head-h: 56px; }
}

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

body.bs {
  margin: 0;
  background: var(--bs-bg);
  color: var(--bs-ink);
  font-family: var(--bs-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.bs a { color: inherit; text-decoration: none; }
body.bs a:focus-visible,
body.bs button:focus-visible,
body.bs input:focus-visible + span { outline: 1px solid var(--bs-ink); outline-offset: 3px; }
body.bs img { max-width: 100%; }
body.bs a:focus:not(:focus-visible), body.bs button:focus:not(:focus-visible) { outline: none; }
body.bs h1, body.bs h2, body.bs h3, body.bs h4 { color: var(--bs-ink); }

.bs-wrap {
  width: 100%;
  max-width: var(--bs-max);
  margin: 0 auto;
  padding: 0 var(--bs-gutter);
  box-sizing: border-box;
}

.bs-only-m { display: none !important; }
@media (max-width: 899px) {
  .bs-only-m { display: inline-flex !important; }
  .bs-only-d { display: none !important; }
}

html.bh-locked, html.bh-cart-open, html.bs-locked { overflow: hidden; }

/* display: flex/grid tanımlı katmanlarda hidden niteliği ezilmesin —
   görünmez bir pencere sayfanın tıklamalarını yutuyordu. */
.bs [hidden] { display: none !important; }

.b-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* 2. DÜĞMELER, BAĞLANTILAR, ETİKETLER ===================================== */

.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 34px; box-sizing: border-box;
  border: 1px solid var(--bs-ink); border-radius: 0;
  background: var(--bs-ink); color: #fff !important;
  font: 500 12px/1 var(--bs-sans); letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; transition: background .25s var(--bs-ease), color .25s var(--bs-ease), border-color .25s;
  -webkit-appearance: none; appearance: none;
}
.bs-btn:hover { background: #2E2B28; border-color: #2E2B28; }
.bs-btn:disabled { opacity: .4; cursor: not-allowed; }
.bs-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }

.bs-btn--line { background: transparent; color: var(--bs-ink) !important; }
.bs-btn--line:hover { background: var(--bs-ink); color: #fff !important; border-color: var(--bs-ink); }

.bs-btn--light { background: #fff; border-color: #fff; color: var(--bs-ink) !important; }
.bs-btn--light:hover { background: transparent; color: #fff !important; border-color: #fff; }

.bs-btn--line-light { background: transparent; border-color: rgba(246,243,238,.5); color: #F6F3EE !important; }
.bs-btn--line-light:hover { background: #F6F3EE; color: var(--bs-ink) !important; border-color: #F6F3EE; }

.bs-btn--block { width: 100%; }

.bs-tlink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; color: var(--bs-ink);
  font: 400 11.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s;
}
.bs-tlink:hover { opacity: .55; }
.bs-tlink--light { color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 4px; }

.bs-link {
  padding: 0; border: 0; background: none; color: var(--bs-ink);
  font: 400 11.5px/1.4 var(--bs-sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  cursor: pointer; white-space: nowrap;
}
.bs-link:hover { opacity: .6; }

.bs-eyebrow {
  margin: 0 0 14px;
  font: 400 11px/1.4 var(--bs-sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--bs-mute);
}

.bs-ibtn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--bs-ink); cursor: pointer;
}
.bs-ibtn.bs-tlink { width: auto; min-width: 40px; }
@media (min-width: 900px) { .bs-ibtn.bs-tlink { justify-content: flex-start; } }
.bs-ibtn svg, .bs-tlink svg { flex: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.bs-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
  font: 400 10.5px/1.4 var(--bs-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bs-mute);
}
.bs-crumbs a:hover { color: var(--bs-ink); }

.bs-price-new { color: var(--bs-danger); }
s { color: var(--bs-faint); }


/* 3. HEADER, ARAMA, ÇEKMECE, MİNİ SEPET ==================================== */

.bh-skip { position: absolute; left: -9999px; }
.bh-skip:focus { left: 16px; top: 16px; z-index: 999; background: #fff; padding: 10px 16px; }

.bs-announce {
  background: var(--bs-ink); color: #EDE7DE; text-align: center;
  font: 400 10.5px/1.4 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase;
}
.bs-announce p, .bs-announce a { display: block; margin: 0; padding: 10px var(--bs-gutter); color: inherit; }

.bs-head {
  position: sticky; top: 0; z-index: 60;
  /* backdrop-filter YOK: sabit konumlu alt öğeler (mini sepet paneli)
     için içerik bloğu oluşturup paneli header kutusuna hapsediyordu. */
  background: rgba(246, 243, 238, .98);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.bs-head.is-scrolled { border-bottom-color: var(--bs-line); }

.bs-head-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--bs-head-h); padding: 0 var(--bs-gutter);
  max-width: var(--bs-max); margin: 0 auto; box-sizing: border-box;
  transition: height .35s var(--bs-ease);
}
.bs-head-side { display: flex; align-items: center; gap: 26px; }
.bs-head-side--right { justify-content: flex-end; }

.bs-logo { display: block; color: var(--bs-ink); line-height: 0; }
.bs-logo svg { width: 132px; height: auto; transition: width .35s var(--bs-ease); }
.bs-head.is-compact .bs-head-bar { height: 58px; }
.bs-head.is-compact .bs-logo svg { width: 104px; }

.bs-dot-count {
  position: absolute; top: 4px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
  border-radius: 8px; background: var(--bs-ink); color: #fff; font: 500 9px/15px var(--bs-sans); letter-spacing: 0; text-align: center;
}

.bs-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 34px;
  padding: 0 var(--bs-gutter) 16px;
  transition: padding .35s var(--bs-ease), opacity .3s;
}
.bs-head.is-compact .bs-nav { padding-bottom: 12px; }
.bs-nav-link {
  position: relative; padding: 4px 0;
  font: 400 11.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ink);
}
.bs-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--bs-ease);
}
.bs-nav-link:hover::after, .bs-nav-link.is-active::after { transform: scaleX(1); }

@media (max-width: 899px) {
  .bs-head-side { gap: 2px; }
  .bs-logo svg, .bs-head.is-compact .bs-logo svg { width: 92px; }
  .bs-head.is-compact .bs-head-bar { height: var(--bs-head-h); }
  .bs-announce p, .bs-announce a { padding: 8px 16px; font-size: 9.5px; }
}

/* Sepet düğmesi */
.bs-cart-slot, .bs-cart { display: flex; align-items: center; position: static; }
.bs-cart-btn { position: relative; }
.bs-cart-n { margin-left: -2px; }
.bs-cart-btn .bs-only-d + .bs-cart-n::before { content: '('; }
.bs-cart-btn .bs-only-d + .bs-cart-n::after { content: ')'; }
@media (max-width: 899px) {
  .bs-cart-btn { width: 40px; height: 40px; justify-content: center; }
  .bs-cart-n {
    position: absolute; top: 4px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
    border-radius: 8px; background: var(--bs-ink); color: #fff; font: 500 9px/15px var(--bs-sans); letter-spacing: 0; text-align: center;
  }
  .bs-cart-btn .bs-only-d + .bs-cart-n::before, .bs-cart-btn .bs-only-d + .bs-cart-n::after { content: none; }
}

/* Arama katmanı */
.bs-search {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  background: var(--bs-bg);
  opacity: 0; transition: opacity .3s var(--bs-ease);
}
.bs-search.is-open { opacity: 1; }
.bs-search-inner { max-width: 1200px; margin: 0 auto; padding: clamp(24px, 6vh, 72px) var(--bs-gutter) 64px; }
.bs-search-row { display: flex; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--bs-ink); }
.bs-search-row #search { flex: 1; display: flex; align-items: center; }
.bs-search-row input[name="search"] {
  flex: 1; width: 100%; min-width: 0; height: auto; padding: 8px 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: 400 clamp(30px, 4.6vw, 56px)/1.1 var(--bs-serif); color: var(--bs-ink); outline: none;
}
.bs-search-row input[name="search"]::placeholder { color: var(--bs-faint); }
.bs-search-row .btn-search { padding-bottom: 18px; }
.bs-search-close {
  padding: 0 0 18px; border: 0; background: none; cursor: pointer;
  font: 400 11.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-mute);
}
.bs-search-body { padding-top: 40px; }
.bs-search-cats { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.bs-search-cats a { font: 400 26px/1.3 var(--bs-serif); }
.bs-search-cats a:hover { opacity: .55; }
.bs-search-head { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 20px; }
.bs-search-head p { margin: 0; }
.bs-search-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 16px; }
@media (max-width: 899px) { .bs-search-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 10px; } }
.bs-search-empty { font: 400 24px/1.4 var(--bs-serif); color: var(--bs-ink2); }

/* Çekmece */
.bs-scrim {
  position: fixed; inset: 0; z-index: 95; background: rgba(20, 18, 15, .38);
  opacity: 0; transition: opacity .35s var(--bs-ease);
}
.bs-scrim.is-open { opacity: 1; }
.bs-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 96;
  display: flex; flex-direction: column;
  width: min(440px, 88vw); background: var(--bs-bg); overflow-y: auto;
  transform: translateX(-100%); transition: transform .45s var(--bs-ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bs-drawer.is-open { transform: none; }
.bs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--bs-line); }
.bs-drawer-logo svg { width: 92px; height: auto; display: block; }
.bs-drawer-nav { display: flex; flex-direction: column; padding: 20px 24px; }
.bs-drawer-nav a { padding: 7px 0; font: 400 30px/1.15 var(--bs-serif); color: var(--bs-ink); }
.bs-drawer-nav a.is-active { font-style: italic; }
.bs-drawer-sub { display: flex; flex-direction: column; gap: 14px; padding: 24px; margin-top: auto; border-top: 1px solid var(--bs-line); }
.bs-drawer-sub a, .bs-drawer-foot a { font: 400 11.5px/1.3 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; }
.bs-drawer-foot { display: flex; gap: 24px; padding: 18px 24px 28px; color: var(--bs-mute); }

/* Mini sepet — sağdan açılan panel */
.bs-mc {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97;
  width: min(460px, 100vw); margin: 0; padding: 0; list-style: none;
  background: var(--bs-bg);
  transform: translateX(100%); transition: transform .45s var(--bs-ease), box-shadow .45s var(--bs-ease);
}
/* Karartma panelin kendi gölgesi: panel header'ın yığın bağlamında
   olduğu için ayrı bir örtü katmanı header'ı karartamıyordu. */
.bs-mc.is-open { transform: none; box-shadow: 0 0 0 200vmax rgba(20, 18, 15, .38); }
html.bh-cart-open .bs-head { z-index: 99; }
.bs-mc > li { display: flex; flex-direction: column; height: 100%; }
.bs-mc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 14px 28px; border-bottom: 1px solid var(--bs-line); }
.bs-mc-title { margin: 0; font: 400 26px/1.2 var(--bs-serif); }
.bs-mc-title span { font-size: 18px; color: var(--bs-mute); }
.bs-mc-items { flex: 1; overflow-y: auto; padding: 0 28px; }
.bs-mc-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--bs-line); }
.bs-mc-thumb { display: block; aspect-ratio: 3 / 4; background: var(--bs-sand); overflow: hidden; }
.bs-mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-mc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-mc-name { font-size: 14px; line-height: 1.35; }
.bs-mc-meta { font-size: 12.5px; color: var(--bs-mute); }
.bs-mc-remove {
  align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--bs-mute);
  font: 400 10.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px;
}
.bs-mc-price { font-size: 14px; white-space: nowrap; }
.bs-mc-foot { padding: 20px 28px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bs-line); background: var(--bs-bg); }
.bs-mc-totals { margin: 0 0 18px; }
.bs-mc-totals .bh-mc-total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; color: var(--bs-mute); }
.bs-mc-totals dt, .bs-mc-totals dd { margin: 0; font-weight: 400; }
.bs-mc-totals .is-grand { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--bs-line); color: var(--bs-ink); font-size: 15px; }
.bs-mc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-mc-actions .bs-btn { padding: 0 12px; }
.bs-mc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; text-align: center; }
.bs-mc-empty p { margin: 0; font: 400 26px/1.3 var(--bs-serif); }

/* Sepete eklendi penceresi ve bildirim (goreel-cart.js) */
.bh-added-box { border-radius: 0 !important; background: var(--bs-bg) !important; }
.bh-added-mark { display: none !important; }
.bh-added-title { font-family: var(--bs-serif) !important; font-weight: 400 !important; font-size: 30px !important; }
.bh-added .b-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 500; }
.bh-toast { border-radius: 0 !important; background: var(--bs-ink) !important; font-family: var(--bs-sans) !important; letter-spacing: .02em; }


/* 4. ANA SAYFA ============================================================= */

.bs-hero { position: relative; color: #fff; }
.bs-hero-media {
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(100svh - var(--bs-head-h) - 60px); min-height: 560px; max-height: 960px;
}
.bs-hero-media--1 { grid-template-columns: 1fr; }
.bs-hero-media--2 { grid-template-columns: 1fr 1fr; }
.bs-hero-img { position: relative; display: block; overflow: hidden; background: var(--bs-sand); }
.bs-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.bs-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 13, 10, .55) 0%, rgba(15, 13, 10, .15) 38%, rgba(15, 13, 10, 0) 60%);
}
.bs-hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 var(--bs-gutter) clamp(40px, 7vh, 72px); text-align: center;
}
.bs-hero-copy .bs-eyebrow { color: rgba(255,255,255,.85); }
.bs-hero-title {
  margin: 0 auto; max-width: 14ch;
  font: 400 clamp(46px, 7.4vw, 116px)/.95 var(--bs-serif); letter-spacing: -.01em; color: #fff !important;
}
.bs-hero-sub { max-width: 520px; margin: 22px auto 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); }
.bs-hero-cta { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 30px; flex-wrap: wrap; }

@media (max-width: 899px) {
  .bs-hero-media { grid-template-columns: 1fr; height: calc(86svh - var(--bs-head-h)); min-height: 480px; }
  .bs-hero-img:not(:first-child) { display: none; }
  .bs-hero-sub { font-size: 14px; }
}

/* Bölüm başlığı */
.bs-sec { padding-top: clamp(64px, 8vw, 120px); }
.bs-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.bs-sec-title { margin: 0; font: 400 clamp(32px, 3.4vw, 50px)/1.05 var(--bs-serif); letter-spacing: -.005em; }
.bs-sec-sub { margin: 8px 0 0; font-size: 14px; color: var(--bs-mute); }

/* Kategori şeridi */
.bs-cats-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--bs-gutter) - 3 * 16px) / 4.35);
  gap: 16px; padding: 0 var(--bs-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--bs-gutter);
  scrollbar-width: none;
}
.bs-cats-track::-webkit-scrollbar { display: none; }
.bs-cat { display: block; scroll-snap-align: start; }
.bs-cat-img { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bs-sand); }
.bs-cat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--bs-ease); }
.bs-cat:hover .bs-cat-img img { transform: scale(1.035); }
.bs-cat-name { display: block; margin-top: 14px; font: 400 26px/1.2 var(--bs-serif); }
@media (max-width: 899px) {
  .bs-cats-track { grid-auto-columns: 62%; gap: 10px; }
  .bs-cat-name { font-size: 22px; margin-top: 10px; }
}

/* Editoryal bölünmüş blok */
.bs-edit {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center;
  margin-top: clamp(64px, 8vw, 120px);
}
.bs-edit-media { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bs-edit-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bs-sand); }
.bs-edit-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--bs-ease); }
.bs-edit-img:hover img { transform: scale(1.03); }
.bs-edit-copy { padding: clamp(36px, 6vw, 110px); }
.bs-edit-title { margin: 0 0 22px; font: 400 clamp(40px, 4.8vw, 74px)/1 var(--bs-serif); letter-spacing: -.01em; }
.bs-edit-sub { max-width: 400px; margin: 0 0 34px; color: var(--bs-ink2); }
.bs-edit--split-reverse { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.bs-edit--split-reverse .bs-edit-media { order: 2; }
@media (max-width: 899px) {
  .bs-edit, .bs-edit--split-reverse { grid-template-columns: 1fr; }
  .bs-edit--split-reverse .bs-edit-media { order: 0; }
  .bs-edit-copy { padding: 32px var(--bs-gutter) 0; }
}

/* Ayrıcalıklar */
.bs-usp { margin-top: clamp(72px, 9vw, 128px); border-top: 1px solid var(--bs-line); border-bottom: 1px solid var(--bs-line); }
.bs-usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bs-usp-item { padding: 36px 20px; text-align: center; }
.bs-usp-item + .bs-usp-item { border-left: 1px solid var(--bs-line); }
.bs-usp-title { margin: 0 0 6px; font: 500 11.5px/1.4 var(--bs-sans); letter-spacing: .18em; text-transform: uppercase; }
.bs-usp-text { margin: 0; font-size: 13.5px; color: var(--bs-mute); }
@media (max-width: 899px) {
  .bs-usp-grid { grid-template-columns: 1fr 1fr; }
  .bs-usp-item { padding: 26px 10px; }
  .bs-usp-item:nth-child(3) { border-left: 0; }
  .bs-usp-item:nth-child(n+3) { border-top: 1px solid var(--bs-line); }
}

/* Üyelik bandı */
.bs-band { background: var(--bs-sand); text-align: center; }
.bs-band-inner { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.bs-band-title { margin: 0; font: 400 clamp(34px, 4vw, 58px)/1.05 var(--bs-serif); }
.bs-band-sub { max-width: 480px; margin: 16px auto 0; color: var(--bs-ink2); }
.bs-band-cta { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 32px; }
.bs-band .bs-btn--light { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff !important; }
.bs-band .bs-btn--light:hover { background: transparent; color: var(--bs-ink) !important; }
.bs-band .bs-tlink--light { color: var(--bs-ink) !important; border-bottom-color: var(--bs-ink); }
.bs-home > .bs-band:last-child { margin-top: clamp(72px, 9vw, 128px); }
.bs-usp + .bs-band { margin-top: 0; border-top: 0; }

.bs-banners { margin-top: 64px; }
.bs-banner img { display: block; width: 100%; height: auto; }
.bs-video { position: relative; color: #fff; }
.bs-video video { display: block; width: 100%; height: 80svh; object-fit: cover; }


/* 5. ÜRÜN KARTI, IZGARA, RAF =============================================== */

.bs-card { position: relative; min-width: 0; }
.bs-card-media {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bs-sand);
}
.bs-card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.bs-card-img2 { opacity: 0; transition: opacity .6s var(--bs-ease); }
@media (hover: hover) {
  .bs-card:hover .bs-card-img2 { opacity: 1; }
}
.bs-card.is-soldout .bs-card-img { opacity: .6; }

.bs-card-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 8px 4px; background: rgba(246, 243, 238, .92);
  font: 400 9.5px/1 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bs-ink);
}

.bs-card-sizes {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding: 13px 10px;
  background: rgba(246, 243, 238, .94);
  font: 400 11.5px/1 var(--bs-sans); letter-spacing: .1em; color: var(--bs-ink);
  transform: translateY(101%); transition: transform .4s var(--bs-ease);
}
.bs-card-sizes .is-out { color: var(--bs-faint); text-decoration: line-through; }
@media (hover: hover) {
  .bs-card:hover .bs-card-sizes { transform: none; }
}

.bs-card-fav {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--bs-ink);
  opacity: 0; transition: opacity .3s;
}
.bs-card-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.bs-card-fav:hover svg { fill: currentColor; }
.bs-card:hover .bs-card-fav, .bs-card-fav:focus-visible { opacity: 1; }
@media (hover: none) { .bs-card-fav { opacity: 1; } }

.bs-card-body { padding: 14px 2px 0; }
.bs-card-name { margin: 0; font: 400 13.5px/1.4 var(--bs-sans) !important; letter-spacing: .03em; color: var(--bs-ink); }
.bs-card-price { margin: 3px 0 0; font-size: 13.5px; color: var(--bs-ink2); }
.bs-card-price s { margin-left: 6px; font-size: 12.5px; }
.bs-card-color { margin: 4px 0 0; font-size: 12.5px; color: var(--bs-mute); }

.bs-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.bs-sw {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .2s;
}
.bs-sw.is-light { box-shadow: inset 0 0 0 1px var(--bs-line2); }
.bs-sw:hover, .bs-sw.is-active { outline-color: var(--bs-ink); }
.bs-sw.is-out { opacity: .35; }
.bs-sw-more { font-size: 11.5px; color: var(--bs-mute); }

.bs-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 16px;
}
@media (max-width: 1199px) { .bs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .bs-grid, .bs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 8px; } }
@media (min-width: 900px) { .bs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Yatay raf */
.bs-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.bs-rail::-webkit-scrollbar { display: none; }
.bs-rail > * { scroll-snap-align: start; }
.bs-rail--bleed {
  padding: 0 var(--bs-gutter); scroll-padding: 0 var(--bs-gutter);
  grid-auto-columns: calc((min(100vw, var(--bs-max)) - 2 * var(--bs-gutter) - 3 * 16px) / 4);
}
@media (min-width: 1600px) {
  .bs-rail--bleed { padding-left: calc((100vw - var(--bs-max)) / 2 + var(--bs-gutter)); }
}
@media (max-width: 899px) {
  .bs-rail, .bs-rail--bleed { grid-auto-columns: 64%; gap: 8px; }
}

.bs-rail-wrap { position: relative; }
.bs-rail-nav {
  position: absolute; top: calc(50% - 40px); z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--bs-line2); border-radius: 50%;
  background: rgba(246, 243, 238, .92); color: var(--bs-ink); cursor: pointer;
  opacity: 0; transition: opacity .3s;
}
.bs-rail-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.bs-rail-nav--prev { left: calc(var(--bs-gutter) - 22px); }
.bs-rail-nav--next { right: calc(var(--bs-gutter) - 22px); }
.bs-rail-wrap:hover .bs-rail-nav:not([disabled]) { opacity: 1; }
.bs-rail-nav[disabled] { pointer-events: none; }
@media (hover: none), (max-width: 899px) { .bs-rail-nav { display: none; } }


/* 6. LİSTE SAYFALARI ======================================================== */

.bs-list { padding-bottom: clamp(64px, 8vw, 120px); }
.bs-list-head { padding: clamp(36px, 5vw, 72px) 0 28px; text-align: center; }
.bs-list-head .bs-crumbs { justify-content: center; }
.bs-list-title { margin: 0; font: 400 clamp(42px, 5.4vw, 80px)/1 var(--bs-serif) !important; letter-spacing: -.01em; }
.bs-list-intro { max-width: 520px; margin: 18px auto 0; color: var(--bs-ink2); }
.bs-list-intro p { margin: 0; }

.bs-chips {
  display: flex; justify-content: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.bs-chips::-webkit-scrollbar { display: none; }
.bs-chip {
  flex: none; padding: 10px 16px 9px; border: 1px solid var(--bs-line2);
  font: 400 11px/1 var(--bs-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.bs-chip:hover { border-color: var(--bs-ink); }
.bs-chip.is-active { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff !important; }
@media (max-width: 899px) {
  .bs-chips { justify-content: flex-start; margin: 0 calc(-1 * var(--bs-gutter)); padding: 0 var(--bs-gutter) 2px; }
}

.bs-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 32px 0 28px; padding: 14px 0; border-top: 1px solid var(--bs-line); border-bottom: 1px solid var(--bs-line);
}
.bs-toolbar-count { margin: 0; font: 400 11px/1.4 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-mute); }
.bs-sort { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 11px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-mute); }
.bs-sort select {
  max-width: 200px; padding: 6px 22px 6px 0; border: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23141414' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / 10px;
  font: 400 11px/1 var(--bs-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bs-ink);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}

.bs-search-inline { display: flex; max-width: 480px; margin: 26px auto 0; border-bottom: 1px solid var(--bs-ink); }
.bs-search-inline input {
  flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; outline: none;
  font: 400 22px/1.2 var(--bs-serif); color: var(--bs-ink);
}

.bs-pagination { margin-top: 56px; text-align: center; }
.bs-pagination .pagination { display: inline-flex; gap: 4px; margin: 0; }
.bs-pagination .pagination > li > a,
.bs-pagination .pagination > li > span {
  float: none; display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px;
  border: 1px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--bs-ink) !important; font-size: 13px;
}
.bs-pagination .pagination > .active > span { border-color: var(--bs-ink) !important; }

.bs-empty { padding: 80px 0; text-align: center; }
.bs-empty p { max-width: 520px; margin: 0 auto 28px; font: 400 26px/1.35 var(--bs-serif); color: var(--bs-ink2); }


/* 7. ÜRÜN SAYFASI ========================================================== */

.bs-pd-top {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr);
  max-width: var(--bs-max); margin: 0 auto;
}
.bs-pd-track { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bs-pd-shot {
  position: relative; display: block; aspect-ratio: 3 / 4; padding: 0; border: 0; background: var(--bs-sand);
  overflow: hidden; cursor: zoom-in;
}
.bs-pd-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bs-pd-info { padding: 40px clamp(24px, 4vw, 72px) 0; }
.bs-pd-sticky { position: sticky; top: calc(var(--bs-head-h) + 64px); padding-bottom: 40px; }
.bs-pd-name { margin: 6px 0 12px; font: 400 clamp(34px, 3vw, 48px)/1.05 var(--bs-serif) !important; letter-spacing: -.005em; }
.bs-pd-price { margin: 0; font-size: 16px; }
.bs-pd-price s { margin-left: 8px; font-size: 14px; }

.bs-pd-field { margin-top: 30px; padding: 0; border: 0; min-width: 0; }
.bs-pd-label, .bs-pd-field legend {
  display: block; width: auto; margin: 0; padding: 0; border: 0;
  font: 400 11px/1.4 var(--bs-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bs-ink);
}
.bs-pd-label span { margin-left: 8px; letter-spacing: .04em; text-transform: none; font-size: 13.5px; color: var(--bs-mute); }
.bs-pd-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.bs-pd-field > .bs-link { margin-top: 10px; display: inline-block; }

.bs-pd-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.bs-size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; margin-top: 12px; }
.bs-size { position: relative; margin: 0; cursor: pointer; font-weight: 400; }
.bs-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bs-size span {
  display: flex; align-items: center; justify-content: center; height: 46px;
  border: 1px solid var(--bs-line2); font-size: 13.5px; letter-spacing: .04em; color: var(--bs-ink);
  transition: border-color .2s, background .2s, color .2s;
}
.bs-size:hover span { border-color: var(--bs-ink); }
.bs-size input:checked + span { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; }
.bs-size.is-out { cursor: not-allowed; }
.bs-size.is-out span {
  color: var(--bs-faint); border-color: var(--bs-line);
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--bs-line2) 50%, transparent calc(50% + .5px));
}
.bs-pd-sizes.is-error .bs-size:not(.is-out) span { border-color: var(--bs-danger); }
.bs-pd-hint { min-height: 20px; margin: 10px 0 0; font-size: 12.5px; color: var(--bs-mute); }
.bs-pd-hint.is-error { color: var(--bs-danger); }

.bs-pd-add { margin-top: 26px; }
.bs-pd-fav { margin-top: 8px; }
.bs-pd-fav svg { width: 17px; height: 17px; }

.bs-pd-notes { margin: 26px 0 0; padding: 0; list-style: none; }
.bs-pd-notes li { position: relative; padding: 3px 0 3px 16px; font-size: 13px; color: var(--bs-ink2); }
.bs-pd-notes li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--bs-ink); }

.bs-acc { margin-top: 32px; border-top: 1px solid var(--bs-line); }
.bs-acc details { border-bottom: 1px solid var(--bs-line); }
.bs-acc summary {
  position: relative; padding: 19px 28px 19px 0; list-style: none; cursor: pointer;
  font: 400 11px/1.4 var(--bs-sans); letter-spacing: .18em; text-transform: uppercase;
}
.bs-acc summary::-webkit-details-marker { display: none; }
.bs-acc summary::after { content: '+'; position: absolute; right: 2px; top: 13px; font: 300 20px/1 var(--bs-sans); }
.bs-acc details[open] summary::after { content: '−'; }
.bs-acc-body { padding: 0 0 22px; font-size: 14.5px; line-height: 1.75; color: var(--bs-ink2); }
.bs-acc-body p { margin: 0 0 10px; }
.bs-pd-code { font-size: 12px; color: var(--bs-mute); letter-spacing: .04em; }
.bs-facts { margin: 0 0 14px; }
.bs-facts div { display: grid; grid-template-columns: 90px 1fr; padding: 3px 0; }
.bs-facts dt { font-weight: 400; color: var(--bs-mute); }
.bs-facts dd { margin: 0; }
.bs-care { margin: 0; padding-left: 18px; }
.bs-care li { padding: 1px 0; }

.bs-pd-help { display: block; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--bs-line2); transition: border-color .2s; }
.bs-pd-help:hover { border-color: var(--bs-ink); }
.bs-pd-help span { display: block; font: 400 11px/1.4 var(--bs-sans); letter-spacing: .18em; text-transform: uppercase; }
.bs-pd-help small { display: block; margin-top: 4px; font-size: 13px; color: var(--bs-mute); }

.bs-pd .bs-sec { padding-top: clamp(64px, 7vw, 104px); }

.bs-pd-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(246, 243, 238, .97); border-top: 1px solid var(--bs-line);
  transform: translateY(105%); transition: transform .35s var(--bs-ease);
}
.bs-pd-bar.is-visible { transform: none; }
.bs-pd-bar div { display: flex; flex-direction: column; min-width: 0; }
.bs-pd-bar strong { font-weight: 400; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-pd-bar span { font-size: 13px; color: var(--bs-mute); }
.bs-pd-bar .bs-btn { min-height: 46px; padding: 0 22px; flex: none; }

@media (max-width: 899px) {
  .bs-pd-top { grid-template-columns: 1fr; }
  .bs-pd-gallery { position: relative; }
  .bs-pd-track {
    display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .bs-pd-track::-webkit-scrollbar { display: none; }
  .bs-pd-shot { flex: 0 0 100%; scroll-snap-align: start; }
  .bs-pd-dots { position: absolute; left: 0; right: 0; bottom: 14px; justify-content: center; gap: 6px; }
  .bs-pd-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(20, 18, 15, .25); transition: background .2s; }
  .bs-pd-dots span.is-active { background: var(--bs-ink); }
  .bs-pd-info { padding: 26px var(--bs-gutter) 0; }
  .bs-pd-sticky { position: static; }
  .bs-pd-name { font-size: 34px !important; }
  .bs-size-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bs-search-row .btn-search { display: none; }
  body.bs.route-product-product .bs-foot { padding-bottom: 96px; }
}


/* 8. PENCERELER ============================================================ */

.bs-modal {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 18, 15, .4);
  opacity: 0; transition: opacity .3s var(--bs-ease);
}
.bs-modal.is-open { opacity: 1; }
.bs-modal-box {
  position: relative; width: 100%; max-width: 580px; max-height: calc(100svh - 32px); overflow-y: auto; box-sizing: border-box;
  padding: clamp(28px, 4vw, 48px); background: var(--bs-bg);
}
.bs-modal-close { position: absolute; top: 10px; right: 10px; }
.bs-modal-title { margin: 0 0 22px; font: 400 36px/1.1 var(--bs-serif) !important; }
.bs-modal-note { margin: 20px 0 0; font-size: 13px; color: var(--bs-mute); }
.bs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bs-table th { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--bs-ink); text-align: left; font: 400 10.5px/1.4 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; }
.bs-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--bs-line); }

.bs-zoom { position: fixed; inset: 0; z-index: 130; overflow-y: auto; background: #fff; opacity: 0; transition: opacity .3s; }
.bs-zoom.is-open { opacity: 1; }
.bs-zoom-track { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bs-zoom-track img { display: block; width: min(100%, 1100px); height: auto; }
.bs-zoom-close { position: fixed; top: 14px; right: 14px; z-index: 2; background: rgba(255,255,255,.9); border-radius: 50%; }


/* 9. FOOTER ================================================================ */

.bs-foot {
  margin-top: 0; padding: clamp(64px, 7vw, 104px) 0 32px;
  background: var(--bs-ink); color: rgba(246, 243, 238, .7);
  font-size: 14px;
}
.bs-foot a { color: rgba(246, 243, 238, .7); transition: color .2s; }
.bs-foot a:hover { color: #F6F3EE; }
.bs-foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.bs-foot-logo { display: block; color: #F6F3EE !important; line-height: 0; }
.bs-foot-logo svg { width: 200px; height: auto; }
.bs-foot-tag { max-width: 380px; margin: 22px 0 0; line-height: 1.7; }
.bs-foot-join { max-width: 420px; }
.bs-foot-join-title { margin: 0 0 8px; font: 400 30px/1.15 var(--bs-serif); color: #F6F3EE; }
.bs-foot-join-text { margin: 0 0 22px; }
.bs-foot-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin: clamp(56px, 6vw, 88px) 0 56px; padding-top: 48px; border-top: 1px solid rgba(246, 243, 238, .12);
}
.bs-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bs-foot-col p { margin: 0; line-height: 1.7; }
.bs-foot-h { margin: 0 0 8px !important; font: 400 10.5px/1.4 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase; color: #F6F3EE; }
.bs-foot-social { display: flex; gap: 16px; margin-top: 6px; }
.bs-foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(246, 243, 238, .12);
  font-size: 12px; letter-spacing: .06em;
}
.bs-foot-bottom p { margin: 0; }
.bs-foot-by img { display: block; height: 16px; width: auto; filter: brightness(0) invert(1); opacity: .45; transition: opacity .2s; }
.bs-foot-by:hover img { opacity: .9; }
/* Açılır başlık düğmesi ve iletişim ikonları yalnızca telefonda iş görüyor */
.bs-foot-col--acc > .bs-foot-h {
  display: block; padding: 0; border: 0; background: none; text-align: left;
  cursor: default; pointer-events: none;
}
.bs-foot-chev, .bs-foot-act svg { display: none; }
.bs-foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Telefon: web footer'ı değil uygulama footer'ı. Kategoriler çekmecede,
   destek iletişim düğmelerinde; geriye logo, yuvarlak iletişim düğmeleri,
   iki açılır satır (Yardım, BeShe — yasal metinler burada) ve tek satır
   alt bilgi kalıyor. Kapalıyken ~340px; eski düzen ~1350px'ti. */
@media (max-width: 899px) {
  .bs-foot { padding: 32px 0 20px; font-size: 14px; }
  .bs-foot-top { justify-content: center; gap: 0; }
  .bs-foot-logo svg { width: 112px; }
  .bs-foot-tag, .bs-foot-join, .bs-foot-col--shop { display: none; }

  .bs-foot-cols { display: flex; flex-direction: column; gap: 0; margin: 20px 0 0; padding-top: 0; border-top: 0; }

  .bs-foot-contact { order: -1; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
  .bs-foot-contact > .bs-foot-h, .bs-foot-addr { display: none; }
  .bs-foot-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--bs-champ-line, rgba(246, 243, 238, .2));
    color: var(--bs-champ, #F6F3EE) !important;
    -webkit-tap-highlight-color: transparent;
  }
  .bs-foot-act:active { background: rgba(232, 207, 164, .12); }
  .bs-foot-act svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .bs-foot-act--soc svg { fill: currentColor; stroke: none; }
  .bs-foot-act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .bs-foot-col--acc { gap: 0; align-items: stretch; border-top: 1px solid var(--bs-champ-line, rgba(246, 243, 238, .12)); }
  .bs-foot-col--acc:last-of-type { border-bottom: 1px solid var(--bs-champ-line, rgba(246, 243, 238, .12)); }
  .bs-foot-col--acc > .bs-foot-h {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 52px; margin: 0 !important;
    cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  }
  .bs-foot-chev { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--bs-ease); }
  .bs-foot-col--acc.is-open .bs-foot-chev { transform: rotate(180deg); }
  .bs-foot-links { display: none; gap: 0; padding-bottom: 10px; }
  .bs-foot-col--acc.is-open .bs-foot-links { display: flex; }
  .bs-foot-links a { display: block; width: 100%; padding: 9px 0; }

  .bs-foot-bottom {
    flex-direction: column; justify-content: center; gap: 6px;
    padding-top: 20px; border-top: 0; text-align: center;
    font-size: 11px; letter-spacing: .04em; color: rgba(246, 243, 238, .5);
  }
  .bs-foot-by img { height: 13px; }
}
/* Mağaza uygulamasında yapımcı imzası yok (goreel-app.css .bh-foot-by ile aynı gerekçe) */
html.in-app .bs-foot-by { display: none; }

/* Uygulamada sayfa başlığı görünür kalıyor. goreel-mobile.css bu H1'leri
   uygulamada gizliyor çünkü goreel temasında başlık üst barda yazıyor;
   BeShe'nin üst barında başlık yok (logo var), gizlenince kategori, arama ve
   sepet ekranları başlıksız kalıyordu. Seçiciye body eklendi: aynı kuralı
   özgüllükle ezmek için. */
html.in-app.route-product-category body main h1,
html.in-app.route-product-search body main h1,
html.in-app.route-product-special body main h1,
html.in-app.route-product-manufacturer-info body main h1,
html.in-app.route-checkout-cart body main h1,
html.in-app.route-checkout-checkout body main h1 {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
}


/* 10. ÇERÇEVE SAYFALARINA İNCE AYAR ========================================
   Hesap, sepet, ödeme ve bilgi sayfaları goreel şablonlarını kullanıyor;
   paleti token'lardan alıyorlar. Burada yalnızca BeShe dilinin imzası:
   serif sayfa başlıkları, büyük harfli düğmeler, keskin köşeler. */

body.bs .b-h1, body.bs .bh-cat-title, body.bs .bh-info-title, body.bs .bh-acc-title, body.bs .bh-cart-title, body.bs .bh-co-title {
  font-family: var(--bs-serif) !important; font-weight: 400 !important; letter-spacing: -.005em !important;
}
body.bs .b-h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; }

body.bs .b-btn {
  border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 500;
}
body.bs .b-btn--primary { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; }
body.bs .b-btn--primary:hover { background: #2E2B28; }
body.bs .b-input, body.bs .b-select, body.bs .form-control { border-radius: 0 !important; box-shadow: none; }
body.bs .b-card, body.bs .bh-card { border-radius: 0; box-shadow: none; }

/* Varsayılan OpenCart sayfaları (devralınmamış) */
body.bs #content > h1, body.bs #content > h2, body.bs .container > .row > #content h1 {
  font-family: var(--bs-serif); font-weight: 400; font-size: 44px; color: var(--bs-ink);
}
body.bs .breadcrumb { background: none; border: 0; padding: 18px 0; margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
body.bs .breadcrumb > li + li::before { color: var(--bs-faint); }
body.bs .btn-primary { background: var(--bs-ink); border-color: var(--bs-ink); border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; padding: 12px 24px; text-shadow: none; background-image: none; }
body.bs .btn-default { border-radius: 0; background-image: none; }
body.bs .alert { border-radius: 0; }

/* WhatsApp düğmeleri: marka rengi yerine BeShe mürekkebi */
body.bs .bh-wa-btn, body.bs .bh-ct-wa { background: var(--bs-ink) !important; border-color: var(--bs-ink) !important; border-radius: 0 !important; color: #fff !important; }

/* Header sağ grubu: metin bağlantıları ve sepet düğmesi aynı hizada */
.bs-head-side > a, .bs-head-side > button, .bs-cart-btn { display: inline-flex; align-items: center; min-height: 40px; margin: 0; line-height: 1; }

/* ── Header ikonları (v2) ───────────────────────────────────────────────
   Hesap, favoriler ve sepet aynı kutu (40px), aynı çizgi kalınlığı ve aynı
   rozetle. Metin bağlantısı + ikon karışımı hizayı bozuyordu. */
.bs-head-side--right { gap: 6px; }
.bs-hicon {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; min-width: 40px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--bs-ink); font: 400 11.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase;
  transition: opacity .2s;
}
.bs-hicon:hover { opacity: .55; }
.bs-hicon svg {
  flex: none; width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
}
.bs-hsearch { justify-content: flex-start; }
.bs-count, .bs-cart-btn .bs-cart-n {
  position: absolute; top: 5px; right: 2px; margin: 0;
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
  background: var(--bs-ink); color: #fff; font: 500 9px/15px var(--bs-sans); letter-spacing: 0; text-align: center;
}
.bs-cart-btn .bs-cart-n::before, .bs-cart-btn .bs-cart-n::after { content: none !important; }
@media (max-width: 899px) { .bs-head-side--right { gap: 0; } }

/* ── Renk örnekleri raflarda kesilmesin ────────────────────────────────
   Yatay raf overflow-x: auto olduğu için dikeyde de kırpıyor; seçili
   örneğin halkası (outline + offset) alttan ve soldan kesiliyordu. */
.bs-rail { padding-bottom: 8px; }
.bs-swatches { padding: 4px 0 4px 4px; margin: 7px 0 0 -4px; }

/* ==========================================================================
   11. FORMLAR — alt çizgili alanlar, kayan etiket
   ========================================================================== */

.bs-form { display: flex; flex-direction: column; gap: 6px; }
.bs-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 599px) { .bs-form-2 { grid-template-columns: 1fr; } }

/* Alanlar: çerçeveli kutu + kutunun içinde yüzen etiket. Önceki tek alt
   çizgili alan fildişi zeminde kayboluyordu (uygulamada "nereye yazacağım"
   sorusu). Köşeler BeShe dili gibi keskin; renk yalnızca odakta. */
.bs-field { position: relative; margin-bottom: 14px; }
.bs-field input, .bs-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  min-height: 56px; padding: 24px 16px 8px;
  border: 1px solid var(--bs-line2); border-radius: 0;
  background: #fff; box-shadow: none; outline: none;
  font: 400 16px/1.4 var(--bs-sans); color: var(--bs-ink);
  transition: border-color .25s var(--bs-ease), box-shadow .25s var(--bs-ease);
  -webkit-appearance: none; appearance: none;
}
.bs-field textarea { min-height: 132px; padding-top: 28px; resize: vertical; }
.bs-field label {
  position: absolute; left: 17px; top: 19px; margin: 0; pointer-events: none;
  font: 400 15px/1 var(--bs-sans); color: var(--bs-mute); letter-spacing: .01em;
  transform-origin: left top; transition: transform .25s var(--bs-ease), color .25s, letter-spacing .25s;
}
.bs-field input:focus, .bs-field textarea:focus { border-color: var(--bs-ink); box-shadow: inset 0 0 0 1px var(--bs-ink); }
.bs-field input:focus + label, .bs-field textarea:focus + label,
.bs-field input:not(:placeholder-shown) + label, .bs-field textarea:not(:placeholder-shown) + label,
.bs-field .bh-pw + label {
  transform: translateY(-10px) scale(.72); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-mute);
}
.bs-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.bs-field.has-error input, .bs-field.has-error textarea { border-color: var(--bs-danger); }
.bs-field-err { display: block; margin-top: 6px; font-size: 12.5px; color: var(--bs-danger); }
.bs-field-hint { margin: -6px 0 18px; font-size: 12.5px; color: var(--bs-mute); }

/* Şifre göster/gizle (goreel.js initPasswordToggle sarmalıyor) */
.bs-field .bh-pw { display: block; position: relative; }
.bs-field .bh-pw input { padding-right: 52px; }
.bs-field .bh-pw-toggle {
  position: absolute; right: 6px; top: 50%; bottom: auto; margin-top: 0; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--bs-mute);
}
.bs-field .bh-pw-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.bs-field .bh-pw-toggle.is-on { color: var(--bs-ink); }
/* Sarmalanınca etiket input'un kardeşi olmaktan çıkıyor: etiketi
   yukarıda sabitle (yer tutucuyla çakışmasın). */
.bs-field:has(.bh-pw) label { transform: translateY(-10px) scale(.72); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-mute); }

.bs-form-row { display: flex; justify-content: flex-end; margin: -4px 0 22px; }
.bs-form .bs-btn { margin-top: 6px; }
.bs-form-captcha { margin: 6px 0 18px; }

.bs-alert {
  margin: 0 0 24px; padding: 14px 16px; border-left: 2px solid var(--bs-ink); background: var(--bs-sand);
  font-size: 13.5px; line-height: 1.6; color: var(--bs-ink2);
}
.bs-alert strong { font-weight: 500; color: var(--bs-ink); }
.bs-alert .bs-link { display: inline-block; margin-top: 8px; }
.bs-alert--error { border-left-color: var(--bs-danger); }
.bs-alert--ok { border-left-color: #3E6B4B; }


/* 12. ÜYE GİRİŞİ — bölünmüş ekran ========================================= */

.bs-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - var(--bs-head-h) - 90px); }
.bs-auth-media { position: relative; overflow: hidden; background: var(--bs-sand); }
.bs-auth-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 12%; }
.bs-auth-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,13,10,.45), rgba(15,13,10,0) 45%); }
.bs-auth-quote {
  position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 5vw, 56px); z-index: 1; margin: 0;
  font: italic 400 clamp(24px, 2.4vw, 34px)/1.25 var(--bs-serif); color: #fff;
}
.bs-auth-panel { display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 96px) var(--bs-gutter); }
.bs-auth-inner { width: 100%; max-width: 420px; }
.bs-auth-title { margin: 0 0 14px; font: 400 clamp(40px, 4vw, 58px)/1 var(--bs-serif) !important; letter-spacing: -.01em; }
.bs-auth-lede { margin: 0 0 34px; color: var(--bs-ink2); }
.bs-auth-join { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--bs-line); }
.bs-auth-join-title { margin: 0 0 14px; font: 400 26px/1.2 var(--bs-serif); }
.bs-auth-perks { margin: 0 0 26px; padding: 0; list-style: none; }
.bs-auth-perks li { position: relative; padding: 4px 0 4px 18px; font-size: 13.5px; color: var(--bs-ink2); }
.bs-auth-perks li::before { content: ''; position: absolute; left: 0; top: 14px; width: 7px; height: 1px; background: var(--bs-ink); }
@media (max-width: 899px) {
  .bs-auth { grid-template-columns: 1fr; min-height: 0; }
  .bs-auth-media { height: 34svh; min-height: 220px; }
  .bs-auth-quote { font-size: 22px; }
  .bs-auth-panel { padding-top: 36px; padding-bottom: 64px; }
}


/* 13. İLETİŞİM ============================================================= */

.bs-contact { padding-bottom: clamp(72px, 9vw, 128px); }
.bs-contact-head { max-width: 760px; padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.bs-contact-title { margin: 0; font: 400 clamp(52px, 7vw, 104px)/.95 var(--bs-serif) !important; letter-spacing: -.015em; }
.bs-contact-lede { max-width: 520px; margin: 24px 0 0; font-size: 16px; color: var(--bs-ink2); }
.bs-contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px);
  padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--bs-line);
}
.bs-contact-list { margin: 0; }
.bs-contact-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--bs-line); }
.bs-contact-list > div:first-child { padding-top: 0; }
.bs-contact-list dt { font: 400 10.5px/1.9 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bs-mute); }
.bs-contact-list dd { margin: 0; font-size: 15px; line-height: 1.6; }
.bs-contact-list dd a:not(.bs-link) { border-bottom: 1px solid var(--bs-line2); transition: border-color .2s; }
.bs-contact-list dd a:not(.bs-link):hover { border-bottom-color: var(--bs-ink); }
.bs-contact-list .bs-link { display: inline-block; margin-top: 10px; }
.bs-contact-note { margin-top: 28px; color: var(--bs-ink2); }
.bs-contact-h2 { margin: 0 0 8px; font: 400 clamp(30px, 3vw, 42px)/1.1 var(--bs-serif) !important; }
.bs-contact-sub { margin: 0 0 30px; color: var(--bs-mute); }
.bs-contact-form .bs-btn { align-self: flex-start; min-width: 200px; }
@media (max-width: 899px) {
  .bs-contact-grid { grid-template-columns: 1fr; }
  .bs-contact-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* 14. ÜRÜN SAYFASI — renk seçimi (v2) ======================================
   Seçili renk üç işaretle belli: görselin altında kalın çizgi, koyu renk
   adı ve etiketteki ad. Diğerleri soluk; üzerine gelince canlanır. */
.bs-pd-count { margin-left: 10px; font-style: normal; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--bs-faint); }
.bs-pd-colors { display: flex; flex-wrap: wrap; gap: 14px 10px; margin-top: 14px; }
.bs-pd-color { display: flex; flex-direction: column; gap: 8px; width: 64px; outline: 0 !important; }
.bs-pd-color-img {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bs-sand);
}
.bs-pd-color-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; transition: opacity .25s, transform .6s var(--bs-ease); }
.bs-pd-color-img::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bs-ink);
  transform: scaleX(0); transition: transform .3s var(--bs-ease);
}
.bs-pd-color-name {
  font-size: 11.5px; line-height: 1.3; letter-spacing: .02em; color: var(--bs-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-pd-color:hover .bs-pd-color-img img { opacity: 1; }
.bs-pd-color.is-active .bs-pd-color-img img { opacity: 1; }
.bs-pd-color.is-active .bs-pd-color-img::after, .bs-pd-color:hover .bs-pd-color-img::after { transform: scaleX(1); }
.bs-pd-color:hover .bs-pd-color-img::after { background: var(--bs-line2); }
.bs-pd-color.is-active:hover .bs-pd-color-img::after { background: var(--bs-ink); }
.bs-pd-color.is-active .bs-pd-color-name { color: var(--bs-ink); font-weight: 500; }
.bs-pd-color.is-out .bs-pd-color-img img { opacity: .35; }
.bs-pd-color.is-out .bs-pd-color-name { text-decoration: line-through; }
/* OpenCart varsayılan stili #cart'a margin-bottom: 10px veriyor; sepet
   ikonu diğerlerinden 5px yukarıda kalıyordu. */
#cart.bs-cart { margin: 0 !important; }


/* ==========================================================================
   15. KİNETİK EDİTORYAL AÇILIŞ (ana sayfa hero) — beshe.js initKinetic
   ==========================================================================
   Sahne sırası:
     .bs-intro         oturumdaki ilk ziyarette logo çizilerek belirir
     .is-ready         sütunlar perde gibi açılır, başlık kelime kelime yükselir
     .is-on/.is-leaving  sütunlar görsellerini birbirini izleyerek döndürür
   Gizleme durumları yalnızca html.bs-kin-js altında: JS çalışmazsa ya da
   hareket azaltma açıksa hero durağan ve tam görünür kalır. Satır içi
   betik 6 sn sonra her durumda is-ready ekliyor (emniyet). */

/* ── Logo açılışı ── */
.bs-intro-layer { display: none; }
html.bs-intro .bs-intro-layer {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-bg); color: var(--bs-ink);
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
}
html.bs-intro .bs-intro-layer.is-out { clip-path: inset(0 0 100% 0); }
html.bs-intro { overflow: hidden; }
.bs-intro-logo { width: min(340px, 64vw); height: auto; overflow: visible; }
html.bs-intro .bs-intro-logo g:first-child path {
  fill: transparent; stroke: currentColor; stroke-width: 1.6;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bsDraw 1.5s cubic-bezier(.65, 0, .35, 1) forwards, bsFill .7s ease 1.15s forwards;
}
html.bs-intro .bs-intro-logo g:last-child path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bsDraw 1s ease 1.05s forwards;
}
@keyframes bsDraw { to { stroke-dashoffset: 0; } }
@keyframes bsFill { to { fill: currentColor; stroke-width: 0; } }

/* ── Sahne ── */
.bs-kin .bs-hero-media { position: relative; overflow: hidden; }
.bs-kin-col { position: relative; overflow: hidden; background: var(--bs-sand); }
.bs-kin-inner { position: absolute; left: 0; right: 0; top: -7%; bottom: -7%; will-change: transform; }
.bs-kin-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1);
}
.bs-kin-img.is-on { opacity: 1; z-index: 1; }
.bs-kin-img.is-leaving { opacity: 0; z-index: 2; transition-duration: 1.6s; }
.bs-kin-img.is-entering { z-index: 1; }
html.bs-kin-js .bs-kin-img.is-on,
html.bs-kin-js .bs-kin-img.is-leaving { animation: bsKen 11s linear forwards; }
@keyframes bsKen { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Perde: sütunlar sırayla aşağıdan yukarı açılır, içerik hafif büyükten oturur */
html.bs-kin-js .bs-kin .bs-kin-col {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.35s cubic-bezier(.77, 0, .18, 1) calc(var(--i) * .16s);
}
html.bs-kin-js .bs-kin .bs-kin-inner { scale: 1.16; transition: scale 2.2s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .16s); }
html.bs-kin-js .bs-kin.is-ready .bs-kin-col { clip-path: inset(0 0 0 0); }
html.bs-kin-js .bs-kin.is-ready .bs-kin-inner { scale: 1; }

/* Başlık kelime kelime yükselir */
.bs-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em 0 .1em; margin: -.04em 0 -.1em; }
.bs-w > span { display: inline-block; }
html.bs-kin-js .bs-kin .bs-w > span {
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) calc(.75s + var(--w) * .11s);
}
html.bs-kin-js .bs-kin.is-ready .bs-w > span { transform: none; }

html.bs-kin-js .bs-kin .bs-kin-fade { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
html.bs-kin-js .bs-kin.is-ready .bs-kin-fade { opacity: 1; transform: none; }
html.bs-kin-js .bs-kin.is-ready .bs-eyebrow.bs-kin-fade { transition-delay: .6s; }
html.bs-kin-js .bs-kin.is-ready .bs-hero-sub.bs-kin-fade { transition-delay: 1.25s; }
html.bs-kin-js .bs-kin.is-ready .bs-hero-cta.bs-kin-fade { transition-delay: 1.45s; }

.bs-kin .bs-hero-copy { will-change: opacity, transform; }

/* Kaydırma ipucu: ince, nefes alan bir çizgi */
.bs-kin-scroll {
  position: absolute; left: 50%; bottom: 0; z-index: 3; width: 1px; height: 34px;
  background: rgba(255, 255, 255, .35); overflow: hidden;
}
.bs-kin-scroll::after {
  content: ''; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: #fff;
  animation: bsScrollHint 2.4s cubic-bezier(.65, 0, .35, 1) infinite 2.5s;
}
@keyframes bsScrollHint { 0% { top: -100%; } 60%, 100% { top: 100%; } }
.bs-kin .bs-hero-copy { padding-bottom: clamp(56px, 9vh, 96px); }

/* ── Mobil: hikâye modu ── */
.bs-kin-bars { display: none; }
@media (max-width: 899px) {
  .bs-kin .bs-kin-col:not(:first-child) { display: none; }
  .bs-kin-bars {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4;
    display: flex; gap: 4px;
  }
  .bs-kin-bars span { position: relative; flex: 1; height: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; border-radius: 1px; }
  .bs-kin-bars span::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
  .bs-kin-bars span.is-done::after { transform: scaleX(1); }
  .bs-kin-bars span.is-on::after { animation: bsBar var(--dur, 5s) linear forwards; }
  .bs-kin.is-paused .bs-kin-bars span.is-on::after { animation-play-state: paused; }
  .bs-kin-scroll { display: none; }
}
@keyframes bsBar { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .bs-kin-img { transition: none; }
  .bs-kin-scroll::after { animation: none; }
}

/* Ödeme: misafir bilgisi — kutu değil, sade bir satır (eski .bh-note
   flex düzeni metni sütunlara bölüp hata kutusu gibi gösteriyordu). */
.bs-co-guest { max-width: 640px; margin: 4px 0 28px; font-size: 14px; line-height: 1.6; color: var(--bs-mute); }
.bs-co-guest a { color: var(--bs-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bs-co-guest a:hover { opacity: .6; }
textarea.bs-addr { min-height: 0; resize: vertical; line-height: 1.5; }


/* ==========================================================================
   16. MOBİL MENÜ — uygulama dokunuşu (v2)
   ==========================================================================
   Liste yerine bölümler: kimlik kartı, hızlı erişim kutuları, yeni sezon
   bandı, görselli kategori satırları, yardım bağlantıları ve sabit
   müşteri hizmetleri ayağı. Dokunma hedefleri ≥ 48px. */

.bs-drawer { width: min(420px, 90vw); overflow: hidden; display: flex; flex-direction: column; }
.bs-drawer-head {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--bs-line); flex: none;
}
.bs-drawer-logo { justify-self: center; line-height: 0; color: var(--bs-ink); }
.bs-drawer-logo svg { width: 86px; height: auto; }
.bs-drawer-close svg { width: 20px; height: 20px; }
.bs-drawer-body { flex: 1; overflow-y: auto; padding: 16px 16px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.bs-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; color: var(--bs-faint); }

/* Kimlik kartı */
.bs-dme {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--bs-paper); border: 1px solid var(--bs-line);
  transition: border-color .2s;
}
.bs-dme:active { border-color: var(--bs-ink); }
.bs-dme-ava {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--bs-sand); color: var(--bs-ink);
  font: 400 20px/1 var(--bs-serif);
}
.bs-dme-ava svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; }
.bs-dme-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bs-dme-text strong { font: 400 20px/1.2 var(--bs-serif); color: var(--bs-ink); }
.bs-dme-text span { font-size: 12.5px; color: var(--bs-mute); }

/* Hızlı erişim kutuları */
.bs-dq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.bs-dq a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 78px; padding: 12px 6px; background: var(--bs-paper); border: 1px solid var(--bs-line);
  font: 400 10.5px/1.2 var(--bs-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bs-ink);
  transition: border-color .2s;
}
.bs-dq a:active { border-color: var(--bs-ink); }
.bs-dq svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.bs-dq em {
  position: absolute; top: 8px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
  background: var(--bs-ink); color: #fff; font: normal 500 9px/16px var(--bs-sans); letter-spacing: 0; text-align: center;
}

/* Yeni sezon bandı */
.bs-dnew {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding: 18px 18px; background: var(--bs-ink); color: #F6F3EE !important;
}
.bs-dnew span { display: flex; flex-direction: column; gap: 4px; }
.bs-dnew small { font: 400 10px/1 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 243, 238, .65); }
.bs-dnew strong { font: 400 26px/1.1 var(--bs-serif); }
.bs-dnew svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* Bölüm etiketi */
.bs-dlabel { margin: 26px 2px 8px; font: 400 10.5px/1 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bs-mute); }

/* Kategori satırları */
.bs-dcats { display: flex; flex-direction: column; background: var(--bs-paper); border: 1px solid var(--bs-line); }
.bs-dcats a {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 14px 8px 8px;
  color: var(--bs-ink); transition: background .15s;
}
.bs-dcats a + a { border-top: 1px solid var(--bs-line); }
.bs-dcats a:active { background: var(--bs-sand); }
.bs-dcat-img { flex: none; width: 42px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bs-sand); }
.bs-dcat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-dcat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bs-dcat-name { font: 400 21px/1.15 var(--bs-serif); }
.bs-dcat-count { font-size: 11.5px; color: var(--bs-mute); }
.bs-dcats a.is-active .bs-dcat-name { font-style: italic; }
.bs-dcats a.is-active .bs-chev { color: var(--bs-ink); }

/* Yardım bağlantıları */
.bs-dlinks { display: flex; flex-direction: column; background: var(--bs-paper); border: 1px solid var(--bs-line); }
.bs-dlinks a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 14px; font-size: 14px; color: var(--bs-ink); }
.bs-dlinks a + a { border-top: 1px solid var(--bs-line); }
.bs-dlinks a.is-muted { color: var(--bs-mute); }

/* Sabit müşteri hizmetleri ayağı */
.bs-dcall {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bs-line);
  background: var(--bs-bg); color: var(--bs-ink); font-size: 12.5px;
}
.bs-dcall svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linejoin: round; }
.bs-dcall span { display: flex; flex-direction: column; gap: 1px; color: var(--bs-mute); }
.bs-dcall strong { font-weight: 400; font-size: 14px; color: var(--bs-ink); letter-spacing: .02em; }

/* Açılışta odak halkası logoda görünmesin (programatik odak) */
.bs-drawer a:focus:not(:focus-visible), .bs-drawer button:focus:not(:focus-visible) { outline: none; }
.bs-drawer:focus { outline: none; }


/* ==========================================================================
   17. KURUMSAL RENK — bordo & şampanya
   ==========================================================================
   Müşterinin marka rengi yalnızca "marka anlarında": en üst şerit, açılış
   animasyonu, mobil menüdeki yeni sezon bandı, üyelik bandı ve footer.
   Ticari öğeler (düğmeler, fiyat, beden) siyah kalır; renk ürün
   fotoğraflarıyla yarışmasın. Şampanya yalnızca bordo zeminde kullanılır
   (fildişi üzerinde ince yazı için kontrastı yetersiz). */
:root {
  --bs-wine:        #3F070F;
  --bs-wine-2:      #561424;   /* bordo üzerinde ince ayrım / hover */
  --bs-champ:       #E8CFA4;
  --bs-champ-light: #FCE6B9;
  --bs-champ-line:  rgba(232, 207, 164, .2);
}

/* Duyuru şeridi */
.bs-announce { background: var(--bs-wine); color: var(--bs-champ); }

/* Footer */
.bs-foot { background: var(--bs-wine); color: rgba(246, 243, 238, .72); }
.bs-foot a { color: rgba(246, 243, 238, .72); }
.bs-foot a:hover { color: var(--bs-champ-light); }
.bs-foot-logo { color: var(--bs-champ) !important; }
.bs-foot-logo svg { filter: drop-shadow(0 0 18px rgba(252, 230, 185, .18)); }
.bs-foot-join-title { color: var(--bs-champ-light); }
.bs-foot-h { color: var(--bs-champ) !important; }
.bs-foot-cols, .bs-foot-bottom { border-top-color: var(--bs-champ-line) !important; }
.bs-foot .bs-btn--line-light { border-color: var(--bs-champ); color: var(--bs-champ) !important; }
.bs-foot .bs-btn--line-light:hover { background: var(--bs-champ); color: var(--bs-wine) !important; }
.bs-foot-by img { filter: brightness(0) invert(1) sepia(.35); }

/* Üyelik bandı (ana sayfa) */
.bs-band { background: var(--bs-wine); }
.bs-band-title { color: var(--bs-champ-light) !important; }
.bs-band-sub { color: rgba(246, 243, 238, .72); }
.bs-band .bs-btn--light { background: var(--bs-champ); border-color: var(--bs-champ); color: var(--bs-wine) !important; }
.bs-band .bs-btn--light:hover { background: transparent; color: var(--bs-champ) !important; border-color: var(--bs-champ); }
.bs-band .bs-tlink--light { color: var(--bs-champ) !important; border-bottom-color: var(--bs-champ); }
/* Bant footer'a bitişik olunca aralarına ince şampanya çizgi */
.bs-home > .bs-band:last-child { border-bottom: 1px solid var(--bs-champ-line); }

/* Mobil menü: yeni sezon bandı */
.bs-dnew { background: var(--bs-wine); color: var(--bs-champ-light) !important; }
.bs-dnew small { color: var(--bs-champ); opacity: .8; }

/* Açılış animasyonu: bordo zeminde şampanya çizgiyle beliren logo */
html.bs-intro .bs-intro-layer { background: var(--bs-wine); color: var(--bs-champ); }
html.bs-intro .bs-intro-logo { filter: drop-shadow(0 0 22px rgba(252, 230, 185, .28)); }


/* ==========================================================================
   18. HEADER EYLEMLERİ (v3) — yazılı hesap, favoriler, sepet
   ==========================================================================
   Soldaki "Ara" ile simetri: ikon + küçük büyük harf etiket. İkon tek başına
   (özellikle kalp ve çanta) her müşteri için açık değildi. Etiketler yalnızca
   ≥1080px'te; daha darda v2'deki ikon + rozet düzeni sürer.
   Üye: monogram (bordo zemin, şampanya harf — kişisel bir "marka anı",
   bkz. bölüm 17) + "Merhaba, Ad". Ticari sayaçlar siyah kalır. */

.bs-hlabel { display: none; }

/* Monogram — masaüstü ve mobil ortak */
.bs-hacc-mono {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bs-wine); color: var(--bs-champ-light);
  font: 500 16px/1 var(--bs-serif); letter-spacing: 0; text-transform: none;
}
.bs-hacc-m .bs-hacc-mono { width: 26px; height: 26px; font-size: 14px; }
.bs-hacc-hello { display: none; }

/* Hesap paneli */
.bs-hacc { position: relative; display: flex; align-items: center; }
.bs-hacc-pop {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 70;
  width: 288px; box-sizing: border-box; padding: 24px 26px 22px;
  background: var(--bs-paper); border: 1px solid var(--bs-line);
  box-shadow: 0 24px 48px -28px rgba(20, 20, 20, .28);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .25s var(--bs-ease), transform .3s var(--bs-ease), visibility 0s .3s;
  text-align: left; text-transform: none; letter-spacing: 0;
}
/* imleç düğmeden panele geçerken boşlukta kapanmasın */
.bs-hacc-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
@media (hover: hover) and (min-width: 900px) {
  .bs-hacc:hover .bs-hacc-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}
.bs-hacc:focus-within .bs-hacc-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

.bs-hacc-eyebrow { margin: 0 0 10px; font: 400 10.5px/1.4 var(--bs-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bs-mute); }
.bs-hacc-text { margin: 0 0 20px; font: 400 19px/1.3 var(--bs-serif); color: var(--bs-ink); }
.bs-hacc-cta { display: flex; width: 100%; justify-content: center; }
.bs-hacc-alt { display: table; margin: 16px auto 0; }

.bs-hacc-who { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--bs-line); }
.bs-hacc-who strong { display: block; font: 500 21px/1.2 var(--bs-serif); color: var(--bs-ink); }
.bs-hacc-who span { display: block; margin-top: 4px; font: 400 12px/1.4 var(--bs-sans); color: var(--bs-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-hacc-links a {
  display: flex; align-items: center; justify-content: space-between; padding: 11px 0;
  font: 400 11.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ink);
  transition: color .2s, padding .3s var(--bs-ease);
}
.bs-hacc-links a:hover { padding-left: 4px; color: var(--bs-ink2); }
.bs-hacc-links em { font-style: normal; letter-spacing: 0; color: var(--bs-mute); }
.bs-hacc-links a.is-out { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--bs-line); color: var(--bs-mute); }

/* 900–1079px: hesap yalnızca monogram / ikon, panel yine açılır */
@media (min-width: 900px) {
  .bs-hacc.is-logged .bs-hacc-btn { gap: 12px; }
}

/* ≥1080px: yazılı eylemler (1080–1279px'te aralık daha dar) */
@media (min-width: 1080px) {
  .bs-head-side--right { gap: 22px; }
  .bs-hlabel { display: inline; }
  .bs-hacc-hello {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-transform: none; letter-spacing: 0;
  }
  .bs-hacc-hello small { font: 400 9.5px/1 var(--bs-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bs-mute); }
  .bs-hacc-hello strong { font: 500 18px/1 var(--bs-serif); color: var(--bs-ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Sayaç: rozet yerine etiketin yanında "(2)" */
  .bs-head .bs-hwish .bs-count,
  .bs-head .bs-cart-btn .bs-cart-n {
    position: static; min-width: 0; height: auto; padding: 0; margin-left: -4px; border-radius: 0;
    background: none; color: var(--bs-mute); font: 400 11.5px/1 var(--bs-sans); letter-spacing: .06em;
  }
  .bs-head .bs-hwish .bs-count::before, .bs-head .bs-cart-btn .bs-cart-n::before { content: '(' !important; }
  .bs-head .bs-hwish .bs-count::after, .bs-head .bs-cart-btn .bs-cart-n::after { content: ')' !important; }
  .bs-head .bs-cart-btn .bs-cart-n[hidden] { display: none; }
}

@media (min-width: 1280px) {
  .bs-head-side--right { gap: 30px; }
}

/* Kategori satırı 900–1279px'te tek satıra sığsın (KEMER alta düşüyordu) */
@media (min-width: 900px) and (max-width: 1279px) {
  .bs-nav { gap: 6px 22px; }
}

/* Mobil hesap düğmesi */
@media (max-width: 899px) {
  .bs-hacc-m.is-logged { width: 40px; }
}
/* Hesap düğmesi üzerine gelince solmasın: panel zaten açılıyor */
.bs-hacc-btn:hover { opacity: 1; }

/* Hesap sayfaları: boş durumda kısa yönlendirme notu (ör. İade Taleplerim) */
.bh-empty-note { margin: 0; max-width: 46ch; font: 400 14px/1.6 var(--bs-sans); color: var(--bs-mute); }


/* ==========================================================================
   UYGULAMA DENEYİMİ DÜZELTMELERİ (2026-11-05)
   ========================================================================== */

/* Telefonda header ikonları: 21px / 1.15 çizgi ince ve küçük kalıyordu,
   dokunma alanı 40px. Apple'ın önerdiği 44px hedef, biraz daha iri ve
   belirgin ikon. Logo ve hiza değişmiyor. */
@media (max-width: 899px) {
  .bs-head .bs-hicon { min-width: 44px; height: 44px; }
  .bs-head .bs-hicon svg { width: 24px; height: 24px; stroke-width: 1.4; }
  .bs-head .bs-count, .bs-head .bs-cart-btn .bs-cart-n { top: 4px; right: 3px; }
  .bs-hacc-m .bs-hacc-mono { width: 28px; height: 28px; font-size: 14px; }
}

/* Alt sekme çubuğu varken mini sepet ve çekmece onun ÜSTÜNDE bitsin.
   Panel ekranın altına (bottom: 0) uzanıyordu; "Sepete git / Ödeme yap"
   düğmeleri ve çekmecenin altı sekme çubuğunun arkasında kalıyordu.
   Güvenli alanı sekme çubuğu zaten karşılıyor. */
html.has-tabbar .bs-mc,
html.has-tabbar .bs-drawer { bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
html.has-tabbar .bs-mc-foot { padding-bottom: 20px; }
html.has-tabbar .bs-drawer { padding-bottom: 0; }


/* Kartla ödeme sayfası (iyzico formu gömülü) */
.bs-pay-wrap { max-width: 640px; padding-top: 20px; padding-bottom: 48px; }
.bs-pay-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 8px;
  font: 400 11.5px/1 var(--bs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ink);
}
.bs-pay-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bs-pay-title { margin: 0 0 8px; font: 400 34px/1.15 var(--bs-serif); }
.bs-pay-note { margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--bs-mute); }
#iyzipay-checkout-form { min-height: 420px; }

/* Uygulamada iç sayfalarda geri oku menü ikonunun yerine geçiyor. Ana sayfada
   ve tarayıcıdaki sitede menü ikonu kalıyor. Menü (kategoriler) alt sekme
   çubuğundaki "Kategoriler"den açılmaya devam ediyor. */
.bs-hback, .bs-hback[hidden] { display: none !important; }
html.in-app.is-inner .bs-hback:not([hidden]) { display: inline-flex !important; }
html.in-app.is-inner .bs-head [data-goreel-drawer-open] { display: none !important; }


/* Her renk ayrı kart (Site Ayarları → Kategori sayfaları): kartın rengi,
   renk noktalarının yanında küçük yazıyla */
.bs-sw-name { margin-left: 3px; font: 400 12.5px/1 var(--bs-sans); color: var(--bs-mute); }