@charset "UTF-8";
/* ============================================================
   YÜCEL TURŞU & ZEYTİN — Özel Tema Stil Katmanı
   Çekirdek stylesheet.scss'e DOKUNMADAN yüklenir (header.twig'den).
   Tokenlar + global kabuk (header/menu/footer) + ana sayfa showcase.
   ============================================================ */
/* Self-host fontlar — Fraunces (display) · Marcellus (kapital) · Jost (gövde) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(yucel/fonts/Fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(yucel/fonts/Fraunces-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(yucel/fonts/Marcellus-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(yucel/fonts/Marcellus-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(yucel/fonts/Jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(yucel/fonts/Jost-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(yucel/fonts/Fraunces-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(yucel/fonts/Fraunces-italic-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- Tasarım Tokenları ---------- */
:root {
  --y-red:#A81D22;
  --y-red-deep:#7E1418;
  --y-gold:#947231;
  --y-gold-bright:#E4C578;
  --y-olive:#5E6B33;
  --y-cream:#F6ECD6;
  --y-brine:#14100B;
  --y-page:#FCFBF8;
  --y-ink:#241C14;
  --y-ink-soft:#6E6049;
  --y-line:rgba(40,30,18,.12);
  --y-glass:rgba(255,251,243,.55);
  --y-glass-2:rgba(255,251,243,.34);
  --y-glass-brd:rgba(255,255,255,.62);
  --y-glass-hi:rgba(255,255,255,.9);
  --y-tile:#f8f7f6;
  --y-shot:#D3D1D2;
  --y-shadow:0 24px 60px -30px rgba(60,40,15,.5);
  --y-blur:saturate(150%) blur(20px);
  --y-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --y-caps:"Marcellus","Times New Roman",Georgia,serif;
  --y-sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --y-gold-line:#C4A052;
}
/* ---------- Base ---------- */
/* Yatay taşma koruması — overflow-x:clip position:sticky'yi bozmaz (hidden'ın aksine) */
html {
  overflow-x: clip;
}
body {
  background: var(--y-page);
  color: var(--y-ink);
  font-family: var(--y-sans);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}
body h1, body h2, body h3, body h4 {
  font-family: var(--y-serif);
  font-weight: 400;
  line-height: 1.12;
}
a {
  color: var(--y-red);
}
a:hover {
  color: var(--y-red-deep);
}
.container {
  max-width: 1220px;
}
/* Çekirdek tema butonlara gradient + text-shadow basıyor (btn-primary MAVİ) — hepsi temizlenir */
.btn, .btn-primary, .btn-light, .btn-secondary, .btn-info, .btn-warning, .btn-success, .btn-danger {
  background-image: none !important;
  text-shadow: none !important;
  border-radius: 40px;
}
/* Bootstrap primary → marka kırmızısı */
.btn-primary {
  --bs-btn-bg:var(--y-red);
  --bs-btn-border-color:var(--y-red);
  --bs-btn-hover-bg:var(--y-red-deep);
  --bs-btn-hover-border-color:var(--y-red-deep);
  --bs-btn-active-bg:var(--y-red-deep);
  --bs-btn-active-border-color:var(--y-red-deep);
  --bs-btn-disabled-bg:var(--y-red);
  --bs-btn-disabled-border-color:var(--y-red);
  background-color: var(--y-red) !important;
  border-color: var(--y-red) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 11px 22px;
}
.btn-primary:hover {
  background-color: var(--y-red-deep) !important;
  border-color: var(--y-red-deep) !important;
}
.btn-light {
  background-color: transparent !important;
  border-color: var(--y-line) !important;
  color: var(--y-ink-soft) !important;
}
.btn-light:hover {
  border-color: var(--y-red) !important;
  color: var(--y-red) !important;
}
.form-control, .form-select {
  border-radius: 10px;
}
/* Buzlu cam yardımcı sınıfı */
.y-glass {
  background: var(--y-glass);
  -webkit-backdrop-filter: var(--y-blur);
  backdrop-filter: var(--y-blur);
  border: 1px solid var(--y-glass-brd);
  border-radius: 18px;
  box-shadow: var(--y-shadow), inset 0 1px 0 var(--y-glass-hi);
}
/* ================= HEADER SİSTEMİ ================= */
/* ============ HEADER — "Mühürlü Miras" (iki şerit) ============ */
/* Duyuru şeridi (nav#top) — ince, Marcellus kapital */
/* Üst şerit ile hero fotoğrafı arasındaki sert dikişin sebebi buydu:
   nav#top şeffaftı → arkasındaki .y-ambient degradesi görünüyordu, hero perdesi
   ise düz --y-page ile başlıyordu. İki farklı renk çarpışıyordu. Artık ikisi de
   aynı düz zeminde; ayırıcı kenarlık da kaldırıldı, geçişi hero'nun perdesi yapar. */
/* Üst şerit.
   Çekirdek `#top{padding:10px 0;margin:0 0 20px}` veriyor. MARJ elemanın DIŞINDA
   kaldığı için arka planla boyanmaz — orada `.y-ambient` degradesi görünüyordu ve
   üst şeritten farklı renkte bir bant oluşuyordu.
   Çözüm: boşluğun tamamı İÇ BOŞLUK; ayırıcı çizgi de marj yerine ::after ile
   iç boşluğun içine konumlanıyor. Böylece hem çizgi metne yakın duruyor
   (üst/alt 10px simetrik) hem de çizgi ile header kartı arasında 20px ferahlık
   kalıyor — ve bu alanın tamamı üst şeridin zeminiyle boyalı. */
nav#top {
  background: var(--y-page);
  position: relative;
  margin-bottom: 0;
  padding: 10px 0 30px;
}
nav#top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 1px;
  background: var(--y-line);
}
nav#top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  gap: 12px;
}
.y-top-l {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 10.5px;
  color: var(--y-gold);
}
.y-top-r {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--y-ink-soft);
}
.y-top-phone {
  color: var(--y-ink-soft);
  font-weight: 500;
  text-decoration: none;
}
.y-top-phone i {
  color: var(--y-red);
  margin-right: 5px;
}
.y-top-phone:hover {
  color: var(--y-red);
}
.y-top-sep {
  width: 1px;
  height: 13px;
  background: var(--y-line);
  display: inline-block;
}
nav#top .btn, nav#top .dropdown-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--y-ink-soft) !important;
  padding: 2px 6px !important;
  font-size: 11.5px !important;
  font-family: var(--y-caps) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
nav#top .btn:hover, nav#top .dropdown-toggle:hover {
  color: var(--y-red) !important;
}
nav#top .dropdown-menu {
  border: 1px solid var(--y-line);
  border-radius: 10px;
  box-shadow: var(--y-shadow);
  font-size: 13px;
}
/* Yüzen kartın ÜST parçası. Alt parçası .y-s2 (kardeş — .y-sticky DIŞINDA tutuluyor,
   çünkü buradaki backdrop-filter offcanvas'ın position:fixed'ini hapsediyor). */
.y-sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--y-page) 94%, #fff);
  -webkit-backdrop-filter: var(--y-blur);
  backdrop-filter: var(--y-blur);
  max-width: 1260px;
  margin-inline: auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: border-radius 0.18s ease;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* tepeye yapışınca köşeler düzleşir — yuvarlak köşe yalnızca kart serbestken anlamlı */
.y-sticky.is-stuck {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.y-sticky-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}
header {
  background: transparent;
  max-width: 1320px;
}
/* ---- ŞERİT 1: logo şeridi ---- */
/* ============================================================
   HEADER ANA BAR
   sol: marka kilidi · sağ blok: arama + hesap + sepet
   Arama `margin-left:auto` ile sağa itilir, hemen sağında hesap
   gelir; böylece tüm etkileşimli kontroller tek bir kümede toplanır.
   ============================================================ */
.y-s1-in {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 88px;
}
/* — marka kilidi: raster logoyu tipografiyle çerçevele — */
.y-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
#logo {
  margin: 0;
  line-height: 0;
  flex: 0 0 auto;
}
#logo img {
  height: 50px;
  width: auto;
  display: block;
}
#logo h1 {
  font-family: var(--y-serif);
  font-size: 28px;
  margin: 0;
  color: var(--y-red);
}
.y-brand-rule {
  width: 1px;
  height: 34px;
  flex: 0 0 auto;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--y-gold-line) 78%, transparent), transparent);
}
.y-brand-lock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.y-brand-l1 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: var(--y-ink);
  line-height: 1;
  white-space: nowrap;
}
.y-brand-l2 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9px;
  color: var(--y-gold);
  line-height: 1;
  white-space: nowrap;
}
/* — merkez: kalıcı arama — */
.y-hsearch {
  margin-left: auto;
  flex: 0 1 500px;
  min-width: 0;
}
.y-hsearch #search.input-group {
  margin: 0;
  max-width: none;
  flex-wrap: nowrap;
  background: #FFFCF7;
  border: 1px solid var(--y-line);
  border-radius: 40px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.y-hsearch #search:focus-within {
  border-color: color-mix(in srgb, var(--y-gold-line) 85%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--y-gold-line) 14%, transparent);
}
.y-hsearch #search .form-control {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 6px 12px 20px;
  height: auto;
  font-family: var(--y-sans);
  font-size: 14px;
  color: var(--y-ink);
}
.y-hsearch #search .form-control::placeholder {
  color: var(--y-ink-soft);
  opacity: 0.75;
}
.y-hsearch #search .form-control:focus {
  box-shadow: none;
  border: 0;
}
.y-hsearch #search .btn {
  flex: 0 0 auto;
  margin: 5px;
  border: 0;
  border-radius: 40px;
  background: var(--y-red);
  color: #fff;
  padding: 0 18px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  transition: background 0.18s ease;
}
.y-hsearch #search .btn:hover {
  background: var(--y-red-deep);
  color: #fff;
}
.y-search-ic {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  flex: 0 0 auto;
}
/* — sağ: ikon + iki satır metin çiftleri — */
.y-utils {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.y-account {
  display: flex;
  align-items: center;
}
.y-cart-wrap {
  display: flex;
  align-items: center;
}
.y-upair {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: var(--y-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease;
}
.y-upair:hover {
  background: rgba(36, 28, 20, 0.045);
}
.y-upair:focus-visible {
  outline: 2px solid var(--y-red);
  outline-offset: 2px;
}
/* Çerçevesiz, ferah ikonlar. Yeni set DOLGULU (Bootstrap person-circle +
   Material shopping bag) — eski çizgisel setin stroke kuralları geçersiz. */
.y-upair-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--y-ink);
  transition: color 0.18s ease;
}
.y-upair-ic > svg {
  display: block;
  fill: currentColor;
  stroke: none;
  width: 23px;
  height: 23px;
}
.y-upair:hover .y-upair-ic {
  color: var(--y-red);
}
.y-upair-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  line-height: 1;
}
.y-upair-lab {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 8.5px;
  color: var(--y-ink-soft);
}
.y-upair-val {
  font-family: var(--y-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--y-ink);
  white-space: nowrap;
  max-width: 130px;
  /* Müşteri adı buraya basılıyor; uzun bir ad başlık şeridini kaydırmasın */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* sepet tutarı marka serifiyle — sayı burada bilgi taşıyor */
.y-cartpair .y-upair-val {
  font-family: var(--y-serif);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.y-cartbtn-n {
  position: absolute;
  top: -2px;
  right: -1px;
  display: none;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--y-red);
  color: #fff;
  /* font-family: var(--y-caps); */
  font-size: 10px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px
  color-mix(in srgb, var(--y-page) 94%, #fff);
  font-weight: 500;
}
.y-cartbtn-n.has {
  display: flex;
}
/* ——— Hesap paneli ——— */
.y-acc {
  width: 290px;
  padding: 0;
  margin-top: 14px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  background: #FFFCF7;
  box-shadow: 0 26px 60px -24px rgba(36, 28, 20, 0.34), 0 4px 14px -6px rgba(36, 28, 20, 0.14);
  overflow: hidden;
}
.y-acc-head {
  padding: 18px 20px 14px;
}
.y-acc-kicker {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold);
  margin-bottom: 3px;
}
.y-acc-title {
  font-family: var(--y-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
  /* Ad soyad başlıkta; uzun ad paneli taşırmasın */
}
.y-acc-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--y-ink-soft);
  margin: 7px 0 0;
}
.y-acc-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 16px;
}
.y-acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10.5px;
  padding: 13px 14px;
  border-radius: 40px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.y-acc-btn-solid {
  background: var(--y-red);
  color: #fff;
}
.y-acc-btn-solid:hover {
  background: var(--y-red-deep);
  color: #fff;
}
.y-acc-btn-ghost {
  border-color: var(--y-ink-soft);
  color: var(--y-ink);
}
.y-acc-btn-ghost:hover {
  border-color: var(--y-ink);
  background: rgba(36, 28, 20, 0.05);
  color: var(--y-ink);
}
.y-acc-rule {
  height: 1px;
  margin: 0 20px;
  background: color-mix(in srgb, var(--y-gold-line) 45%, transparent);
}
.y-acc-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--y-ink);
  transition: background 0.16s, color 0.16s;
}
.y-acc-row:first-of-type {
  padding-top: 14px;
}
.y-acc-row:last-child {
  padding-bottom: 16px;
}
.y-acc-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--y-tile);
  color: var(--y-ink-soft);
  transition: background 0.16s, color 0.16s;
}
.y-acc-ic > svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  width: 18px;
  height: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-acc-tx {
  font-family: var(--y-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
.y-acc-go {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s, transform 0.18s;
}
.y-acc-row:hover {
  background: color-mix(in srgb, var(--y-red) 6%, transparent);
  color: var(--y-red);
}
.y-acc-row:hover .y-acc-ic {
  background: color-mix(in srgb, var(--y-red) 12%, transparent);
  color: var(--y-red);
}
.y-acc-row:hover .y-acc-go {
  opacity: 1;
  transform: none;
}
.y-acc-row-out {
  color: var(--y-ink-soft);
}
.y-acc-row-out:hover {
  color: var(--y-red);
}
/* Hamburger (mobil) */
.y-burger {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--y-ink);
  cursor: pointer;
  transition: color 0.18s;
}
.y-burger svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  width: 24px;
  height: 24px;
  stroke-linecap: round;
}
.y-burger:hover {
  color: var(--y-red);
}
#search .btn:hover {
  color: var(--y-red);
  border-color: var(--y-red);
}
/* ---- ŞERİT 2: sertifika bandı (menü) ---- */
.y-s2 {
  background: var(--y-page);
  border-top: 1px solid var(--y-gold-line);
  border-bottom: 1px solid var(--y-gold-line);
  position: relative;
  /* z-index: hero fotoğrafı header'ın arkasına çekildiği için menü bandı üstte kalmalı */
  z-index: 6;
  max-width: 1260px;
  margin-inline: auto;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}
.y-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 52px;
  flex-wrap: wrap;
}
.y-menu li {
  display: flex;
  align-items: center;
  position: relative;
}
.y-menu li + li::before {
  content: "✦";
  color: var(--y-gold-line);
  font-size: 8px;
  opacity: 0.9;
  flex: 0 0 auto;
}
.y-menu a {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 13px;
  color: var(--y-ink);
  font-weight: 600;
  padding: 13px 20px;
  /* NOT: Marcellus'ta 600 YOK → tarayıcı sahte bold üretir */
  position: relative;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.y-menu a:hover {
  color: var(--y-red);
}
.y-menu a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 1px;
  width: 0;
  margin: auto;
  background: var(--y-gold);
  transition: width 0.25s;
}
.y-menu a:hover::after {
  width: calc(100% - 40px);
}
.y-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  display: none;
  flex-direction: column;
  background: var(--y-page);
  border: 1px solid var(--y-line);
  box-shadow: var(--y-shadow);
  padding: 8px;
  z-index: 6;
}
.y-menu li.has-sub:hover .y-submenu {
  display: flex;
}
.y-submenu a {
  padding: 9px 14px;
  color: var(--y-ink);
  font-size: 11.5px;
  letter-spacing: 0.12em;
}
.y-submenu a::after {
  display: none;
}
.y-submenu a:hover {
  background: color-mix(in srgb, var(--y-red) 8%, transparent);
  color: var(--y-red);
}
/* Mobil offcanvas çekmece */
.y-offcanvas {
  background: var(--y-page);
  width: 84%;
  max-width: 370px;
}
.y-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--y-gold-line);
  padding: 18px 20px;
}
.y-off-title {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 15px;
  color: var(--y-gold);
}
.y-off-menu {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.y-off-menu > li > a {
  display: block;
  padding: 15px 20px;
  color: var(--y-ink);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--y-line);
  transition: color 0.18s, background 0.18s;
}
.y-off-menu > li > a:hover {
  color: var(--y-red);
  background: color-mix(in srgb, var(--y-red) 6%, transparent);
}
.y-off-sub {
  list-style: none;
  margin: 0;
  padding: 2px 0 8px 14px;
}
.y-off-sub a {
  display: block;
  padding: 9px 20px;
  color: var(--y-ink-soft);
  font-size: 14px;
  text-decoration: none;
}
.y-off-sub a:hover {
  color: var(--y-red);
}
.y-off-foot {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.y-off-foot a {
  color: var(--y-ink);
  font-weight: 600;
  text-decoration: none;
}
.y-off-foot i {
  color: var(--y-red);
  margin-right: 8px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
  /* dar ekranda kilit metni düşer, mühür kalır */
  .y-s1-in {
    gap: 16px;
  }
  .y-hsearch {
    flex: 0 1 380px;
  }

}
@media (max-width: 991px) {
  .y-brand-lock, .y-brand-rule {
    display: none;
  }
  .y-s1-in {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 12px;
    min-height: 0;
    padding: 13px 0 0;
  }
  .y-burger {
    display: grid;
    order: 0;
  }
  .y-brand {
    order: 1;
    flex: 1 1 auto;
    justify-content: center;
  }
  #logo img {
    height: 42px;
  }
  .y-utils {
    order: 2;
    gap: 2px;
  }
  .y-hsearch {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
  }
  .y-upair-tx {
    display: none;
  }
  .y-upair {
    padding: 0;
    gap: 0;
  }
  .y-s2 {
    display: none;
  }
  nav#top {
    display: none;
  }
  .y-off-sep {
    border-top: none;
    padding-top: 6px;
  }
  .y-sticky {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-width: none;
  }
  .y-top-l {
    display: none;
  }
  nav#top .container {
    justify-content: flex-end;
    min-height: 34px;
  }
}
@media (max-width: 575px) {
  /* dar ekranda buton yalnız ikon */
  .y-top-cert, .y-top-sep {
    display: none;
  }
  .y-top-r .y-top-mod {
    display: none;
  }
  .y-top-phone {
    font-size: 12px;
  }
  .y-upair-ic {
    width: 40px;
    height: 40px;
  }
  .y-upair-ic > svg {
    width: 19px;
    height: 19px;
  }
  .y-hsearch #search .form-control {
    padding-left: 16px;
    font-size: 13.5px;
  }
  .y-hsearch #search .btn {
    padding: 0 14px;
  }
  .y-search-lab {
    display: none;
  }
}
/* ============================================================
   FORM DİLİ — global. Login/register/ödeme/iletişim/hesap
   sayfalarının hepsi bunu kullanır.
   NOT: ürün seçenek radio'ları #product-info #product altında
   izole olduğu için buradan etkilenmez.
   ============================================================ */
.form-label, .col-form-label {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  margin-bottom: 7px;
  padding: 0;
  line-height: 1.4;
}
.form-control, .form-select {
  border: 1px solid var(--y-line);
  background-color: #FFFCF7;
  color: var(--y-ink);
  border-radius: 12px;
  padding: 13px 16px;
  height: auto;
  font-family: var(--y-sans);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.form-control::placeholder {
  color: var(--y-ink-soft);
  opacity: 0.55;
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--y-ink-soft) 38%, var(--y-line));
}
.form-control:focus, .form-select:focus {
  border-color: color-mix(in srgb, var(--y-gold-line) 88%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--y-gold-line) 16%, transparent);
  background-color: #fff;
  outline: none;
}
textarea.form-control {
  min-height: 130px;
  resize: vertical;
}
/* select oku — Bootstrap'in mavi-gri SVG'si yerine ince marka oku */
.form-select {
  padding-right: 42px;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%236E6049' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 3 5 5 5-5'/%3E%3C/svg%3E");
}
/* doğrulama — Bootstrap'in ikon arka planı kapatılıp marka diline çevrildi */
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--y-red);
  background-image: none;
  padding-right: 16px;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--y-red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--y-red) 13%, transparent);
}
.invalid-feedback {
  font-size: 12px;
  line-height: 1.4;
  color: var(--y-red);
  margin-top: 6px;
}
.form-text {
  font-size: 12px;
  color: var(--y-ink-soft);
  margin-top: 6px;
}
/* ---------- Ürün kartı (.y-card + product-thumb: featured/kategori/arama) ---------- */
.product-thumb {
  background: var(--y-glass);
  -webkit-backdrop-filter: var(--y-blur);
  backdrop-filter: var(--y-blur);
  border: 1px solid var(--y-glass-brd);
}
.y-card .imgwrap {
  display: block;
}
.y-card .body h3 {
  margin: 0;
}
.y-card .body h3 a {
  color: var(--y-ink);
  text-decoration: none;
}
.y-card .body h3 a:hover {
  color: var(--y-red);
}
.y-card .price s.price-old {
  font-family: var(--y-sans);
  font-size: 13px;
  color: var(--y-ink-soft);
  margin-left: 6px;
  font-weight: 400;
}
.y-card .add {
  text-decoration: none;
  white-space: nowrap;
}
.y-card .buy {
  align-items: center;
}
/* Featured bölümü — süreç bölümünün hemen ardından, üst boşluğu kırp */
.y-featured {
  padding-top: 0;
}
/* ============ İÇ SAYFALAR (kategori · arama · liste vb.) ============ */
#product-category, #product-search, #product-special, #product-manufacturer, #information-information, #information-contact, #product-info, #checkout-cart {
  padding-top: 40px;
  padding-bottom: 64px;
}
/* Breadcrumb — çekirdek şerit/chevron tamamen ezilir, kazınmış kapital */
.breadcrumb {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 26px !important;
}
.breadcrumb > li.breadcrumb-item {
  padding: 0 !important;
  text-shadow: none !important;
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item::after {
  display: none !important;
}
.breadcrumb > li.breadcrumb-item + li {
  padding-left: 0 !important;
}
.breadcrumb > li.breadcrumb-item + li::before {
  content: "✦" !important;
  color: var(--y-gold-line);
  font-size: 8px;
  padding: 0 0.7rem !important;
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  transform: none !important;
}
.breadcrumb-item, .breadcrumb-item a {
  color: var(--y-ink-soft);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--y-red);
}
.breadcrumb-item.active {
  color: var(--y-red);
}
.breadcrumb i {
  color: var(--y-red);
}
/* Kategori masthead — editoryal, zengin */
.y-cat-head {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--y-line);
  border-radius: 24px;
  margin-bottom: 34px;
  background: radial-gradient(70% 130% at 90% -10%, rgba(198, 161, 90, 0.12), transparent 60%), radial-gradient(60% 110% at -5% 110%, rgba(74, 90, 43, 0.09), transparent 60%), linear-gradient(180deg, #FCFAF5, #F6F2EA);
}
.y-cat-head::before {
  content: "✦";
  position: absolute;
  right: 6%;
  top: -52px;
  font-size: 230px;
  line-height: 1;
  color: rgba(176, 138, 63, 0.09);
  z-index: 0;
  pointer-events: none;
  font-family: var(--y-serif);
}
.y-cat-head-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.55fr 0.65fr;
  gap: 34px;
  align-items: center;
  padding: 46px 48px;
}
.y-cat-head .y-rule {
  justify-content: flex-start;
}
.y-cat-head .y-rule::before {
  display: none;
}
.y-cat-head h1 {
  font-family: var(--y-serif);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 58px);
  color: var(--y-ink);
  letter-spacing: -0.5px;
  margin: 16px 0 0;
}
.y-cat-desc {
  margin-top: 16px;
  color: var(--y-ink-soft);
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.7;
}
.y-cat-desc p {
  margin: 0;
}
.y-cat-head-media {
  justify-self: end;
  background: var(--y-shot);
  border: 1px solid var(--y-line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--y-shadow);
  transform: rotate(-2.5deg);
}
.y-cat-head-media img {
  width: min(100%, 190px);
  height: auto;
  display: block;
}
/* Görsel gizliyken tek sütun, ferah */
.y-cat-head--noimg .y-cat-head-in {
  grid-template-columns: 1fr;
}
.y-cat-head--noimg .y-cat-head-text {
  max-width: 820px;
}
@media (max-width: 767px) {
  .y-cat-head {
    border-radius: 18px;
    margin-bottom: 26px;
  }
  .y-cat-head-in {
    grid-template-columns: 1fr;
    padding: 26px 22px;
    gap: 18px;
    text-align: center;
  }
  .y-cat-head h1 {
    margin-top: 12px;
  }
  .y-cat-head .y-rule {
    justify-content: center;
  }
  .y-cat-head .y-rule::before {
    display: block;
  }
  .y-cat-head-media {
    justify-self: center;
    order: -1;
  }
  .y-cat-head-media img {
    width: min(100%, 150px);
  }
  .y-cat-desc {
    margin-left: auto;
    margin-right: auto;
    font-size: 14.5px;
  }
  .y-cat-head::before {
    display: none;
  }
  .y-toolbar {
    justify-content: center;
  }
}
/* Sayfa başlığı */
#content > h1, #content > h2 {
  font-family: var(--y-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 44px);
  color: var(--y-ink);
  letter-spacing: -0.3px;
  margin: 0 0 22px;
}
#content > h3 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--y-gold);
  margin: 26px 0 14px;
}
/* Araç çubuğu — tek satır, pill'ler, label select içinde */
.form-select, .form-control {
  border: 1px solid var(--y-line);
  color: var(--y-ink);
  border-radius: 10px;
}
.form-select:focus, .form-control:focus {
  border-color: var(--y-red);
  box-shadow: none;
}
.y-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--y-line);
  border-bottom: 1px solid var(--y-line);
  flex-direction: row;
}
.y-toolbar-left, .y-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.y-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 40px;
  border: 1px solid var(--y-line);
  color: var(--y-ink-soft);
  background: transparent;
  text-decoration: none;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 11.5px;
  transition: all 0.18s;
  white-space: nowrap;
}
.y-tool-btn:hover {
  border-color: var(--y-red);
  color: var(--y-red);
}
.y-view {
  display: inline-flex;
  border: 1px solid var(--y-line);
  border-radius: 40px;
  overflow: hidden;
}
.y-view button {
  border: 0;
  background: transparent;
  color: var(--y-ink-soft);
  padding: 9px 15px;
  cursor: pointer;
  transition: color 0.18s;
}
.y-view button + button {
  border-left: 1px solid var(--y-line);
}
.y-view button.active, .y-view button:hover {
  color: var(--y-red);
}
.y-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 16px;
  border: 1px solid var(--y-line);
  border-radius: 40px;
  background: transparent;
  transition: border-color 0.18s;
}
.y-pill:focus-within {
  border-color: var(--y-red);
}
.y-pill .lab {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  color: var(--y-ink-soft);
}
.y-pill select {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--y-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 30px 6px 4px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A81D22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
.y-pill select:focus {
  outline: none;
}
/* Ürün liste grid */
#product-list {
  --bs-gutter-x:1.5rem;
  --bs-gutter-y:1.5rem;
}
/* Sayfalama */
.pagination {
  gap: 6px;
  flex-wrap: wrap;
}
.page-link {
  border: 1px solid var(--y-line);
  color: var(--y-ink);
  border-radius: 9px !important;
  font-family: var(--y-caps);
  min-width: 40px;
  text-align: center;
  padding: 8px 12px;
  background: transparent;
}
.page-link:hover {
  color: var(--y-red);
  border-color: var(--y-red);
  background: transparent;
}
.page-item.active .page-link {
  background: var(--y-red);
  border-color: var(--y-red);
  color: #fff;
}
.results, .text-end {
  color: var(--y-ink-soft);
  font-size: 13px;
}
/* ============ ÜRÜN DETAY — profesyonel ============ */
.y-pd-row {
  --bs-gutter-x:3rem;
  align-items: flex-start;
}
.y-pd-info {
  padding-top: 6px;
}
/* Galeri */
#product-info .y-pd-gallery .image {
  position: sticky;
  top: 120px;
  background: var(--y-shot);
  border: 1px solid var(--y-line);
  border-radius: 22px;
  padding: 30px;
  margin-bottom: 10px;
}
#product-info .y-pd-gallery .image > a > .img-thumbnail, #product-info .y-pd-gallery .image > .magnific-popup > a > .img-thumbnail {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 10px;
  width: 100%;
  margin: 0 !important;
}
#product-info .y-pd-gallery .image > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
#product-info .y-pd-gallery .image > div .img-thumbnail {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border: 1px solid var(--y-line);
  border-radius: 12px;
  padding: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s;
}
#product-info .y-pd-gallery .image > div .img-thumbnail:hover {
  border-color: var(--y-red);
}
/* Üst satır: yıldız + stok */
.y-pd-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.y-stars {
  color: var(--y-gold);
  font-size: 14px;
  letter-spacing: 2px;
}
.y-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--y-olive);
}
.y-stock i {
  color: var(--y-olive);
}
.y-reviews-link {
  font-size: 12.5px;
  color: var(--y-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--y-line);
}
.y-reviews-link:hover {
  color: var(--y-red);
  border-color: var(--y-red);
}
/* alttaki tekrar eden yorum bloğu gizlenir (üstte gösteriliyor) */
#product-info #product .rating {
  display: none;
}
/* zorunlu alan yıldızı — çekirdeğinki kalır, sadece altın renklendirilir */
#product-info #product .required > label::before, #product-info #product .required .form-label::before {
  color: var(--y-gold);
}
/* Başlık + fiyat */
#product-info h1 {
  font-family: var(--y-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px);
  color: var(--y-ink);
  letter-spacing: -0.4px;
  line-height: 1.08;
  margin: 0 0 18px;
}
.y-pd-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.y-pd-price .price-new {
  font-family: var(--y-serif);
  color: var(--y-red);
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.y-pd-price .price-old {
  color: var(--y-ink-soft);
  text-decoration: line-through;
  font-size: 18px;
}
.y-pd-tax {
  font-size: 12.5px;
  color: var(--y-ink-soft);
}
.y-pd-discounts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  color: var(--y-ink-soft);
  font-size: 13px;
}
/* İkincil aksiyonlar (favori/karşılaştır) */
.y-pd-actions {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  flex-wrap: wrap;
}
.y-pd-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--y-line);
  color: var(--y-ink-soft);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.18s;
}
.y-pd-action:hover {
  border-color: var(--y-red);
  color: var(--y-red);
}
/* Seçenekler bloğu */
#product-info #product form hr {
  display: none;
}
#product-info #product h3 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--y-gold);
  margin: 26px 0 12px;
}
#product-info #product .form-label, #product-info #product legend {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--y-ink-soft);
  font-weight: 700;
  margin-bottom: 10px;
}
#product-info #product .mb-3 {
  margin-bottom: 20px !important;
}
/* Radio/checkbox → seçilebilir kartlar */
#product-info #product > form [id^="input-option-"] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#product-info #product .form-check {
  display: block;
  padding: 0;
  margin: 0;
  min-height: auto;
}
#product-info #product .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#product-info #product .form-check-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  min-width: 120px;
  border: 1.5px solid var(--y-line);
  border-radius: 14px;
  padding: 10px;
  background: transparent;
  transition: all 0.16s;
}
#product-info #product .form-check-label .y-opt-name {
  font-weight: 600;
  color: var(--y-ink);
  font-size: 13px;
}
#product-info #product .form-check-label .y-opt-price {
  font-size: 12px;
  color: var(--y-gold);
  font-weight: 600;
}
#product-info #product .form-check-label:hover {
  border-color: var(--y-red);
}
#product-info #product .form-check-input:checked + .form-check-label {
  border-color: var(--y-red);
  background: color-mix(in srgb, var(--y-red) 6%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--y-red) 12%, transparent);
}
#product-info #product .form-check-input:checked + .form-check-label .y-opt-name {
  color: var(--y-red);
}
#product-info #product .form-check-label img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
}
/* Satın alma satırı */
.y-buy {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 22px 0 0;
  flex-wrap: wrap;
}
.y-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--y-line);
  border-radius: 40px;
  overflow: hidden;
  background: transparent;
}
.y-qty-btn {
  width: 46px;
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--y-ink);
  cursor: pointer;
  font-size: 14px;
  transition: color 0.18s;
}
.y-qty-btn:hover {
  color: var(--y-red);
}
.y-qty-input {
  width: 48px;
  height: 56px;
  border: 0;
  text-align: center;
  background: transparent;
  color: var(--y-ink);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.y-qty-input:focus {
  outline: none;
}
.y-addcart {
  flex: 1 1 auto;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--y-red);
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 0 34px;
  height: 56px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(168, 29, 34, 0.6);
  transition: background 0.18s, transform 0.16s;
  font-family: var(--y-sans);
}
.y-addcart:hover {
  background: var(--y-red-deep);
  transform: translateY(-2px);
}
.y-addcart:active {
  transform: translateY(0);
}
/* Güven blokları — tasarlanmış kartlar (panelden düzenlenebilir) */
.y-trust {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--y-line);
}
.y-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--y-line);
  border-radius: 14px;
  background: color-mix(in srgb, #fff 62%, var(--y-page));
  transition: border-color 0.18s, transform 0.18s;
}
.y-trust-item:hover {
  border-color: var(--y-gold-line);
  transform: translateX(2px);
}
.y-trust-ic {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 17px;
  background: color-mix(in srgb, var(--y-olive) 13%, transparent);
  color: var(--y-olive);
}
.y-trust-item:nth-child(2) .y-trust-ic {
  background: color-mix(in srgb, var(--y-gold) 20%, transparent);
  color: #8A6A25;
}
.y-trust-item:nth-child(3) .y-trust-ic {
  background: color-mix(in srgb, var(--y-red) 10%, transparent);
  color: var(--y-red);
}
.y-trust-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.y-trust-tx strong {
  font-size: 14px;
  color: var(--y-ink);
  font-weight: 600;
  line-height: 1.3;
}
.y-trust-tx small {
  font-size: 12.5px;
  color: var(--y-ink-soft);
  line-height: 1.4;
}
#product-info .alert-info {
  background: color-mix(in srgb, var(--y-gold) 12%, transparent);
  border: 1px solid var(--y-line);
  color: var(--y-ink);
  border-radius: 12px;
  margin-top: 16px;
}
/* Sekmeler */
#product-info .nav-tabs {
  border-bottom: 1px solid var(--y-line);
  gap: 6px;
  margin-top: 52px;
}
#product-info .nav-tabs .nav-link {
  color: var(--y-ink-soft);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 15.5px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 16px 24px;
}
#product-info .nav-tabs .nav-link:hover {
  color: var(--y-red);
}
#product-info .nav-tabs .nav-link.active {
  color: var(--y-red);
  border-bottom-color: var(--y-red);
  background: transparent;
}
#product-info .tab-content {
  padding: 32px 2px;
  color: var(--y-ink);
  line-height: 1.85;
  font-size: 16.5px;
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}
#product-info .nav-tabs {
  justify-content: center;
}
#product-info .tab-content p {
  margin-bottom: 1.1em;
}
#product-info .table {
  color: var(--y-ink);
  font-size: 15.5px;
}
#product-info .table td, #product-info .table th {
  border-color: var(--y-line);
  padding: 13px 16px;
}
#product-info .table thead td, #product-info .table thead th {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12.5px;
  color: var(--y-gold);
}
/* ---------- Yorumlar ---------- */
.y-review-form {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.y-review-form h2 {
  font-family: var(--y-serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--y-ink);
  margin: 34px 0 22px;
  padding-top: 28px;
  border-top: 1px solid var(--y-line);
}
.y-review-form .form-label {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--y-ink-soft);
  font-weight: 700;
  margin-bottom: 8px;
}
.y-review-form .form-control {
  border: 1px solid var(--y-line);
  border-radius: 12px;
  background: #fff;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--y-ink);
  box-shadow: none;
}
.y-review-form .form-control:focus {
  border-color: var(--y-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--y-red) 10%, transparent);
}
/* Yıldız seçici (ham radio yerine) */
.y-rate {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.y-rate-lab {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--y-ink-soft);
}
.y-rate-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 6px;
}
.y-rate-stars input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.y-rate-stars label {
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: rgba(40, 30, 18, 0.18);
  transition: color 0.15s, transform 0.15s;
}
.y-rate-stars label:hover {
  transform: scale(1.12);
}
.y-rate-stars label:hover, .y-rate-stars label:hover ~ label, .y-rate-stars input:checked ~ label {
  color: var(--y-gold);
}
/* Aksiyon butonları */
.y-review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.y-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--y-line);
  color: var(--y-ink-soft);
  background: transparent;
  border-radius: 40px;
  padding: 12px 26px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.18s;
}
.y-btn-ghost:hover {
  border-color: var(--y-red);
  color: var(--y-red);
}
.y-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--y-red);
  color: #fff;
  border-radius: 40px;
  padding: 13px 34px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(168, 29, 34, 0.6);
  transition: background 0.18s, transform 0.16s;
}
.y-btn-solid:hover {
  background: var(--y-red-deep);
  transform: translateY(-2px);
  color: #fff;
}
/* Yorum listesi — kartlar */
.y-reviews {
  display: grid;
  gap: 14px;
}
.y-review {
  border: 1px solid var(--y-line);
  border-radius: 16px;
  padding: 20px 22px;
  background: color-mix(in srgb, #fff 60%, var(--y-page));
}
.y-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.y-review-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--y-olive) 14%, transparent);
  color: var(--y-olive);
  font-family: var(--y-serif);
  font-size: 18px;
}
.y-review-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: auto;
}
.y-review-meta strong {
  font-size: 15px;
  color: var(--y-ink);
}
.y-review-meta time {
  font-size: 12px;
  color: var(--y-ink-soft);
}
.y-review-stars {
  color: var(--y-gold);
  font-size: 13px;
  letter-spacing: 1px;
}
.y-review p {
  margin: 0;
  color: var(--y-ink);
  line-height: 1.75;
}
.y-no-review {
  text-align: center;
  color: var(--y-ink-soft);
  padding: 26px 0;
  font-size: 15px;
}
.y-btn-solid, .y-btn-ghost {
  text-decoration: none;
}
/* Boş durum — henüz yorum yok */
.y-review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 38px 22px;
  border: 1px dashed var(--y-line);
  border-radius: 16px;
}
.y-review-empty-ic {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--y-olive) 12%, transparent);
  color: var(--y-olive);
  font-size: 21px;
}
.y-review-empty strong {
  font-family: var(--y-serif);
  font-size: 20px;
  color: var(--y-ink);
  font-weight: 600;
}
.y-review-empty span {
  color: var(--y-ink-soft);
  font-size: 14.5px;
}
/* Misafir davet bloğu (giriş/kayıt) */
.y-review-cta {
  max-width: 660px;
  margin: 30px auto 0;
  text-align: center;
  padding: 46px 38px;
  border: 1px solid var(--y-line);
  border-radius: 22px;
  background: radial-gradient(70% 120% at 50% -10%, rgba(198, 161, 90, 0.14), transparent 65%), color-mix(in srgb, #fff 64%, var(--y-page));
}
.y-review-cta-ic {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--y-gold) 20%, transparent);
  color: #8A6A25;
  font-size: 24px;
}
.y-review-cta h3 {
  font-family: var(--y-serif);
  font-weight: 600;
  font-size: 25px;
  color: var(--y-ink);
  margin: 0 0 10px;
}
.y-review-cta p {
  color: var(--y-ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 auto 26px;
  max-width: 48ch;
}
.y-review-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  #product-info .y-pd-gallery .image {
    position: static;
  }
  .y-pd-row {
    --bs-gutter-x:1.5rem;
  }
  .y-pd-info {
    padding-top: 22px;
  }
}
/* ============ SEPET ============ */
.y-cart {
  display: grid;
  grid-template-columns: 1fr 358px;
  gap: 34px;
  align-items: start;
  margin-top: 8px;
}
.y-cart-items {
  display: grid;
  gap: 12px;
}
.y-citem {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--y-line);
  border-radius: 16px;
  padding: 16px;
  background: color-mix(in srgb, #fff 60%, var(--y-page));
  transition: border-color 0.18s;
}
.y-citem:hover {
  border-color: var(--y-gold-line);
}
.y-citem-img {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background: var(--y-shot);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
}
.y-citem-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.y-citem-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.y-citem-name {
  font-family: var(--y-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--y-ink);
  text-decoration: none;
  line-height: 1.25;
}
.y-citem-name:hover {
  color: var(--y-red);
}
.y-citem-opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13px;
  color: var(--y-ink-soft);
}
.y-citem-opts strong {
  color: var(--y-ink);
  font-weight: 600;
}
.y-citem-sub {
  font-size: 12.5px;
  color: var(--y-ink-soft);
}
.y-citem-warn {
  font-size: 12.5px;
  color: var(--y-red);
}
.y-citem-unit {
  font-size: 13px;
  color: var(--y-ink-soft);
}
.y-citem-unit small {
  opacity: 0.75;
}
.y-citem-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.y-qty-sm .y-qty-btn {
  width: 36px;
  height: 44px;
}
.y-qty-sm .y-qty-input {
  width: 40px;
  height: 44px;
  font-size: 15px;
}
.y-citem-update {
  display: none;
}
.y-citem-remove {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--y-ink-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s;
}
.y-citem-remove:hover {
  color: var(--y-red);
  background: color-mix(in srgb, var(--y-red) 8%, transparent);
}
.y-citem-total {
  font-family: var(--y-serif);
  font-size: 20px;
  color: var(--y-ink);
  min-width: 112px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.y-citem--voucher .y-citem-img {
  color: var(--y-gold);
  font-size: 26px;
  background: color-mix(in srgb, var(--y-gold) 12%, transparent);
}
/* Sipariş özeti */
.y-cart-summary {
  position: sticky;
  top: 120px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  padding: 26px;
  background: color-mix(in srgb, #fff 68%, var(--y-page));
}
.y-cart-summary h3 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--y-gold);
  margin: 0 0 20px;
  font-weight: 400;
}
.y-sum-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.y-sum-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--y-ink-soft);
}
.y-sum-list li strong {
  color: var(--y-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.y-sum-grand {
  border-top: 1px solid var(--y-line);
  padding-top: 14px;
  margin-top: 5px;
}
.y-sum-grand span {
  color: var(--y-ink);
  font-weight: 600;
}
.y-sum-grand strong {
  font-family: var(--y-serif);
  font-size: 25px;
  color: var(--y-red);
}
.y-sum-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--y-red);
  color: #fff;
  border-radius: 40px;
  height: 54px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(168, 29, 34, 0.6);
  transition: background 0.18s, transform 0.16s;
}
.y-sum-cta:hover {
  background: var(--y-red-deep);
  color: #fff;
  transform: translateY(-2px);
}
.y-sum-cont {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--y-ink-soft);
  text-decoration: none;
}
.y-sum-cont:hover {
  color: var(--y-red);
}
.y-sum-trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--y-line);
  font-size: 12.5px;
  color: var(--y-ink-soft);
}
.y-sum-trust i {
  color: var(--y-olive);
  width: 16px;
  margin-right: 6px;
}
/* Kupon / kargo akordiyonu */
#checkout-cart .accordion {
  border: 1px solid var(--y-line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 34px;
}
#checkout-cart .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--y-line);
  background: transparent;
}
#checkout-cart .accordion-item:last-child {
  border-bottom: 0;
}
#checkout-cart .accordion-button {
  background: transparent;
  color: var(--y-ink);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12.5px;
  box-shadow: none;
}
#checkout-cart .accordion-button:not(.collapsed) {
  color: var(--y-red);
  background: transparent;
}
#checkout-cart #content > h2 {
  font-family: var(--y-serif);
  font-size: 22px;
  margin: 38px 0 6px;
}
/* Sepet — mobil */
@media (max-width: 991px) {
  .y-cart {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .y-cart-summary {
    position: static;
  }
}
@media (max-width: 575px) {
  .y-citem {
    grid-template-columns: 78px 1fr;
    grid-template-areas: "img info" "act total";
    gap: 12px 14px;
    padding: 14px;
  }
  .y-citem-img {
    grid-area: img;
    width: 78px;
    height: 78px;
  }
  .y-citem-info {
    grid-area: info;
  }
  .y-citem-actions {
    grid-area: act;
  }
  .y-citem-total {
    grid-area: total;
    text-align: right;
    min-width: 0;
    align-self: center;
  }
  .y-citem-name {
    font-size: 16px;
  }
}
/* ---------- Footer — marka imzası & hikâyenin kapanışı ---------- */
footer {
  background: var(--y-brine);
  color: var(--y-cream);
  margin-top: 96px;
  position: relative;
  overflow: hidden;
}
/* İmza bandı */
.y-fsign {
  text-align: center;
  padding: 70px 0 56px;
  position: relative;
}
.y-fsign .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.y-fsign-rule {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, var(--y-gold-line));
  margin-bottom: 28px;
}
.y-fsign-eyebrow {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.38em;
  font-size: 10.5px;
  color: var(--y-gold);
}
.y-fsign-line {
  font-family: var(--y-serif);
  font-style: italic;
  font-size: clamp(26px, 3.6vw, 44px);
  color: #F6ECD6;
  margin: 18px 0 0;
  line-height: 1.22;
  max-width: 22ch;
}
.y-fsign-mark {
  color: var(--y-gold-line);
  font-size: 11px;
  margin-top: 24px;
  opacity: 0.85;
}
/* Ana alan */
.y-fmain {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding: 54px 0 48px;
  border-top: 1px solid rgba(198, 161, 90, 0.16);
}
.y-fbrand .y-flogo {
  height: 52px;
  margin-bottom: 20px;
}
.y-fbrand p {
  color: #B6A88C;
  font-size: 14px;
  line-height: 1.8;
  max-width: 34ch;
  margin: 0 0 22px;
}
.y-fsocial {
  display: flex;
  gap: 10px;
}
.y-fsocial a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  border: 1px solid rgba(198, 161, 90, 0.32);
  color: var(--y-gold);
  text-decoration: none;
  transition: all 0.18s;
}
.y-fsocial a:hover {
  background: var(--y-gold);
  color: var(--y-brine);
  border-color: var(--y-gold);
  transform: translateY(-2px);
}
.y-fcol h5 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11.5px;
  color: var(--y-gold);
  margin: 0 0 20px;
  font-weight: 400;
}
.y-fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.y-fcol ul a {
  color: #CDBD9C;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.18s;
}
.y-fcol ul a:hover {
  color: var(--y-gold-bright);
}
.y-fcontact-col address {
  font-style: normal;
  color: #CDBD9C;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.y-fphone {
  display: block;
  font-family: var(--y-serif);
  font-size: 21px;
  color: #F6ECD6;
  text-decoration: none;
  margin-bottom: 8px;
}
.y-fphone:hover {
  color: var(--y-gold-bright);
}
.y-fmail {
  color: #CDBD9C;
  font-size: 14px;
  text-decoration: none;
}
.y-fmail:hover {
  color: var(--y-gold-bright);
}
/* Alt şerit */
.y-fbottom {
  border-top: 1px solid rgba(198, 161, 90, 0.13);
  padding: 20px 0 24px;
}
.y-fbottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.y-fcopy {
  font-size: 11.5px;
  color: #8E7F66;
  line-height: 1.8;
}
.y-fcredit {
  display: inline-flex;
  align-items: center;
  opacity: 0.34;
  transition: opacity 0.2s;
}
.y-fcredit:hover {
  opacity: 0.85;
}
.y-fcredit img {
  height: 15px;
  width: auto;
  display: block;
}
@media (max-width: 575px) {
  .y-fbottom .container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
}
/* Footer — mobil */
@media (max-width: 991px) {
  .y-fmain {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .y-fbrand, .y-fcontact-col {
    grid-column: 1 / -1;
  }
}
@media (max-width: 575px) {
  footer {
    margin-top: 64px;
    padding: 12px;
  }
  .y-fsign {
    padding: 50px 0 42px;
  }
  .y-fsign-rule {
    height: 38px;
    margin-bottom: 22px;
  }
  .y-fsign-eyebrow {
    letter-spacing: 0.28em;
    font-size: 10px;
  }
  .y-fmain {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 34px;
    text-align: center;
  }
  .y-fbrand p {
    margin-left: auto;
    margin-right: auto;
  }
  .y-fbrand .y-flogo {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .y-fsocial {
    justify-content: center;
  }
  .y-fcol ul {
    align-items: center;
  }
}
/* ============================================================
   ANA SAYFA — Showcase (yalnızca #common-home / .y-home)
   ============================================================ */
.y-home {
  position: relative;
}
.y-home .y-ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(45% 40% at 12% 6%, rgba(94, 107, 51, 0.16), transparent 60%), radial-gradient(40% 38% at 88% 12%, rgba(198, 161, 90, 0.18), transparent 60%), radial-gradient(50% 45% at 80% 90%, rgba(168, 29, 34, 0.1), transparent 62%), radial-gradient(45% 40% at 16% 94%, rgba(94, 107, 51, 0.12), transparent 60%);
}
.y-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--y-gold);
  font-weight: 700;
}
.y-script {
  font-style: italic;
  color: var(--y-gold);
}
.y-rule {
  display: flex;
  align-items: center;
  gap: 14px;
}
.y-rule::before, .y-rule::after {
  content: "";
  height: 1px;
  width: 44px;
  background: linear-gradient(90deg, transparent, var(--y-gold));
}
.y-rule::after {
  background: linear-gradient(90deg, var(--y-gold), transparent);
}
.y-rule.center {
  justify-content: center;
}
.y-sec {
  padding: 66px 0;
  position: relative;
}
.y-sec-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 42px;
}
.y-sec-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin: 14px 0 10px;
}
.y-sec-head p {
  color: var(--y-ink-soft);
  margin: 0;
}
/* Buton varyantları (ana sayfa) */
.y-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 40px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.2s, color 0.2s, border-color 0.2s;
}
.y-btn i {
  font-size: 14px;
}
.y-btn-primary {
  background: var(--y-red);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(168, 29, 34, 0.7);
}
.y-btn-primary:hover {
  background: var(--y-red-deep);
  color: #fff;
  transform: translateY(-2px);
}
.y-btn-glass {
  background: var(--y-glass);
  -webkit-backdrop-filter: var(--y-blur);
  backdrop-filter: var(--y-blur);
  border: 1px solid var(--y-glass-brd);
  color: var(--y-ink);
}
.y-btn-glass:hover {
  transform: translateY(-2px);
  border-color: var(--y-gold);
  color: var(--y-ink);
}
.y-btn-gold {
  background: linear-gradient(180deg, var(--y-gold-bright), var(--y-gold));
  color: #3a2a08;
  box-shadow: 0 10px 24px -12px rgba(198, 161, 90, 0.9);
}
.y-btn-gold:hover {
  color: #3a2a08;
  transform: translateY(-2px);
}
/* Hero */
/* ============================================================
   HERO — tam kanama fotoğraf zemini
   Fotoğraf kenardan kenara ürünle dolu; üstüne karartma koymak
   iştah açıcılığı öldürürdü. Bunun yerine SOLA doğru markanın
   krem tonuna eriyen bir perde: yazı temiz zeminde, fotoğraf
   sağda bozulmadan. Hareket videoyla değil, çok yavaş bir
   ölçek hareketiyle (sıfır ek yük).
   ============================================================ */
.y-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(620px, 88vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--y-headh,142px) + 52px) 0 0;
  margin-top: calc(var(--y-headh,142px) * -1);
  /* fotoğraf header'ın ARKASINA uzansın → kart fotoğrafın üstünde yüzer, dikiş kaybolur */
}
.y-hero-shot {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--y-tile);
}
.y-hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.y-hero-slide.is-on {
  opacity: 1;
}
.y-hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 56%;
  display: block;
}
/* Ken Burns yalnızca görünür slaytta — gizli olanlar boşuna animasyon çalıştırmasın */
.y-hero-slide.is-on img {
  transform: scale(1.06);
  animation: y-kenburns 30s ease-in-out infinite alternate;
}
@keyframes y-kenburns {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.13) translate3d(-1.2%, -0.8%, 0);
  }
}
/* Geniş perde KALDIRILDI — görseli soldurup iştah açıcılığı öldürüyordu.
   Yerine yalnızca iki ince müdahale: üstte header kartının oturduğu hafif
   aydınlatma, altta sayfaya yumuşak erime. Kontrast işini buzlu cam panel yapar. */
.y-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--y-page) 0%, color-mix(in srgb, var(--y-page) 88%, transparent) 8%, color-mix(in srgb, var(--y-page) 46%, transparent) 18%, transparent calc(var(--y-headh,142px) + 90px), transparent 70%, color-mix(in srgb, var(--y-page) 52%, transparent) 89%, var(--y-page) 100%);
}
.y-hero-in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}
/* Bilgi bloğu — buzlu cam kap. Fotoğraf arkasında tam kontrastta kalır. */
.y-hero-copy {
  max-width: min(56%, 640px);
  padding: 36px 38px 34px;
  border-radius: 26px;
  background: color-mix(in srgb, #FFFCF7 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--y-gold-line) 40%, transparent);
  box-shadow: 0 30px 70px -34px rgba(36, 28, 20, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.y-hero h1 {
  font-size: clamp(38px, 5vw, 64px);
  letter-spacing: -0.5px;
  margin: 16px 0 0;
}
.y-hero h1 .l2 {
  display: block;
}
.y-hero .y-lede {
  margin: 20px 0 0;
  color: var(--y-ink-soft);
  font-size: 16.5px;
}
.y-hero .y-slogan {
  margin-top: 10px;
  font-family: var(--y-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--y-red);
}
.y-hero .y-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
/* güven şeridi — panelle aynı hizada, aynı cam ailesinden */
.y-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  max-width: min(56%, 640px);
}
.y-proof-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 16px;
  background: color-mix(in srgb, #FFFCF7 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--y-gold-line) 36%, transparent);
  box-shadow: 0 18px 40px -28px rgba(36, 28, 20, 0.5);
}
.y-proof-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: color-mix(in srgb, var(--y-olive) 13%, transparent);
  color: var(--y-olive);
}
.y-proof-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-proof-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: var(--y-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--y-ink);
  line-height: 1.3;
}
.y-proof-tx em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--y-ink-soft);
}
@media (max-width: 1199px) {
  .y-hero-copy, .y-proof {
    max-width: min(64%, 600px);
  }
}
@media (max-width: 991px) {
  /* MOBİLDE HERO HEADER'IN ALTINA ÇEKİLMEZ.
     Masaüstünde kart yuvarlak köşeli ve 1300px ortalı olduğu için fotoğrafın
     etrafını sarması anlamlıydı. Mobilde kart tam genişlik ve köşesiz — görsel
     kazanç yok, buna karşılık arama alanı ikinci satıra sardığı için header
     yüksekliği değişken; ölçüm şaşınca içerik başlığın üstüne biniyordu.
     margin-top:0 ile --y-headh bağımlılığı tamamen kalkıyor. */
  .y-hero {
    min-height: 0;
    margin-top: 0;
    padding: 36px 0 0;
  }
  .y-hero-shot img {
    object-position: 62% 58%;
  }
  .y-hero-veil {
    background: linear-gradient(180deg, var(--y-page) 0%, color-mix(in srgb, var(--y-page) 74%, transparent) 7%, color-mix(in srgb, var(--y-page) 26%, transparent) 16%, transparent 26%, transparent 78%, var(--y-page) 100%);
  }
  .y-hero-copy, .y-proof {
    max-width: none;
  }
  .y-hero-copy {
    padding: 28px 24px 26px;
    border-radius: 22px;
  }
  .y-proof {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (max-width: 575px) {
  .y-hero .y-lede {
    font-size: 15.5px;
  }
  .y-hero-copy {
    padding: 24px 20px 22px;
  }
  .y-hero .y-cta .y-btn {
    width: 100%;
    justify-content: center;
  }
  .y-rule {
    gap: 4px;
  }
  .y-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .y-hero-slide.is-on img {
    animation: none;
    transform: scale(1.02);
  }
  .y-hero-slide {
    transition: none;
  }
}
/* ---------- Kampanya şeridi (hero'nun altında) ---------- */
.y-pstrip {
  padding: 30px 0 4px;
}
.y-pstrip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 14px;
}
.y-pcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  background: #FFFCF7;
  text-decoration: none;
  color: var(--y-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.y-pcard:hover {
  border-color: color-mix(in srgb, var(--y-red) 32%, transparent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -24px rgba(36, 28, 20, 0.46);
  color: var(--y-ink);
}
.y-pcard-img {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 13px;
  overflow: hidden;
  background: var(--y-tile);
  border: 1px solid var(--y-line);
}
.y-pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.y-pcard-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.y-pcard-tx em {
  font-style: normal;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 8.5px;
  color: var(--y-gold);
}
.y-pcard-tx strong {
  font-family: var(--y-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.y-pcard-tx small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--y-ink-soft);
}
.y-pcard-go {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--y-ink-soft);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.y-pcard:hover .y-pcard-go {
  opacity: 1;
  transform: none;
  color: var(--y-red);
}
@media (max-width: 575px) {
  .y-pcard-go {
    opacity: 1;
    transform: none;
  }
}
/* Marquee */
.y-marquee {
  overflow: hidden;
  border-top: 1px solid var(--y-line);
  border-bottom: 1px solid var(--y-line);
  padding: 15px 0;
  margin-top: 22px;
}
.y-marquee-track {
  display: flex;
  gap: 52px;
  width: max-content;
  animation: y-scroll 26s linear infinite;
}
.y-marquee-track span {
  font-family: var(--y-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--y-ink-soft);
  display: flex;
  align-items: center;
  gap: 52px;
  white-space: nowrap;
}
.y-marquee-track span::after {
  content: "✦";
  color: var(--y-gold);
  font-style: normal;
}
@keyframes y-scroll {
  to {
    transform: translateX(-50%);
  }
}
/* Kategori kartları */
.y-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.y-cat {
  overflow: hidden;
  text-decoration: none;
  color: var(--y-ink);
  display: block;
  transition: transform 0.22s ease, box-shadow 0.22s;
}
.y-cat:hover {
  transform: translateY(-6px);
  color: var(--y-ink);
}
.y-cat .ph {
  aspect-ratio: 4/5;
  background: var(--y-shot);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.y-cat .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.y-cat:hover .ph img {
  transform: scale(1.06) rotate(-1deg);
}
.y-cat .meta {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.y-cat .meta h3 {
  font-size: 21px;
  margin: 0;
}
.y-cat .meta small {
  display: block;
  font-size: 11px;
  color: var(--y-gold);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.y-cat .meta .arrow {
  color: var(--y-red);
  transition: transform 0.2s;
}
.y-cat:hover .meta .arrow {
  transform: translateX(4px);
}
/* Süreç adımları */
.y-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.y-step {
  padding: 26px 22px 24px;
}
.y-step .no {
  font-family: var(--y-serif);
  font-size: 15px;
  color: var(--y-gold);
  letter-spacing: 0.1em;
}
.y-step .ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin: 14px 0 16px;
  color: var(--y-olive);
  background: color-mix(in srgb, var(--y-olive) 14%, transparent);
  border: 1px solid var(--y-line);
  font-size: 22px;
}
.y-step h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
.y-step p {
  font-size: 14px;
  color: var(--y-ink-soft);
  margin: 0;
}
/* Öne çıkan ürünler (statik showcase kartları) */
.y-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.y-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  border-radius: 18px;
}
.y-card:hover {
  transform: translateY(-6px);
}
/* Görsel alanı, fotoğrafların GÖMÜLÜ stüdyo grisiyle (--y-shot) aynı renkte.
   Sebep: kaynak çekimlerin yönü karışık (28 yatay / 18 dikey), OpenCart hepsini
   250x250 kareye ŞEFFAF bant ekleyerek sığdırıyor. Bantlar PNG'nin içinde olduğu
   için object-fit ile kapatılamaz — kapatmaya çalışmak ürünü %12-17 kırpar.
   Zemini fotoğrafın grisine eşitleyince bantlar görünmez oluyor, alan tek parça
   dolu okunuyor ve hiçbir şey kırpılmıyor. multiply kaldırıldı: griyi krem üstünde
   daha da koyulaştırıp çift çerçeve hissi yaratıyordu. */
.y-card .imgwrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--y-shot);
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.y-card .imgwrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.y-card:hover .imgwrap img {
  transform: scale(1.05);
}
.y-card .tag {
  position: absolute;
  top: 13px;
  left: 13px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 40px;
  background: var(--y-red);
}
.y-card .tag.gi {
  background: var(--y-olive);
}
.y-card .body {
  padding: 17px 17px 19px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.y-card .kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--y-ink-soft);
}
.y-card h3 {
  font-size: 18.5px;
  line-height: 1.2;
  margin: 0;
}
.y-card .opts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.y-card .opts span {
  font-size: 11.5px;
  border: 1px solid var(--y-line);
  border-radius: 40px;
  padding: 4px 10px;
  color: var(--y-ink-soft);
}
.y-card .buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.y-card .price {
  font-family: var(--y-serif);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.y-card .price small {
  font-size: 12px;
  color: var(--y-ink-soft);
  font-family: var(--y-sans);
}
.y-card .add {
  border: none;
  color: var(--y-red);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.y-card .add:hover {
  background: var(--y-red);
  color: #fff;
}
.y-center {
  text-align: center;
  margin-top: 38px;
}
/* Zaman çizelgesi */
.y-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.y-track::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--y-gold) 0 8px, transparent 8px 16px);
  opacity: 0.6;
}
.y-mile {
  padding: 22px 18px;
  text-align: center;
}
.y-mile .yr {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--y-serif);
  font-size: 18px;
  color: #fff;
  background: var(--y-red);
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px -8px rgba(168, 29, 34, 0.7);
}
.y-mile:nth-child(even) .yr {
  background: var(--y-olive);
  box-shadow: 0 8px 20px -8px rgba(94, 107, 51, 0.7);
}
.y-mile h3 {
  font-size: 16px;
  margin: 0 0 6px;
}
.y-mile p {
  font-size: 13px;
  color: var(--y-ink-soft);
  margin: 0;
}
/* Hikaye bandı */
.y-storyband .inner {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 58px clamp(26px, 5vw, 60px);
  color: var(--y-cream);
  background: linear-gradient(120deg, rgba(20, 16, 11, 0.9), rgba(20, 16, 11, 0.7)), radial-gradient(80% 120% at 100% 0, rgba(168, 29, 34, 0.55), transparent 60%), var(--y-olive);
}
.y-storyband .inner::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(198, 161, 90, 0.35);
  border-radius: 18px;
  pointer-events: none;
}
.y-storyband .grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
}
.y-bigseal {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--y-gold-bright);
  flex: none;
  border: 1px solid rgba(198, 161, 90, 0.6);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 6px rgba(198, 161, 90, 0.12);
}
.y-bigseal b {
  font-family: var(--y-serif);
  font-size: 42px;
  line-height: 1;
}
.y-bigseal span {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  margin-top: 6px;
  color: #e7cfa0;
}
.y-storyband h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  color: #fff;
  margin: 0 0 14px;
}
.y-storyband p {
  max-width: 60ch;
  color: #e9d8bb;
}
.y-storyband .quote {
  font-family: var(--y-serif);
  font-style: italic;
  color: var(--y-gold-bright);
  font-size: 21px;
  margin-top: 18px;
}
/* Sosyal / WhatsApp */
.y-social .row {
  align-items: stretch;
}
.y-ig {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.y-ig a {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--y-tile);
  display: block;
}
.y-ig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.y-ig a:hover img {
  transform: scale(1.09);
}
.y-handle {
  color: var(--y-red);
  font-weight: 700;
}
.y-wa {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.y-wa h3 {
  font-size: 27px;
  margin: 12px 0 8px;
}
.y-wa p {
  color: var(--y-ink-soft);
  margin: 0 0 22px;
}
.y-wa-btn {
  background: #1faf54;
  color: #fff;
  font-weight: 700;
  padding: 15px 24px;
  border-radius: 40px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  align-self: flex-start;
  text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(31, 175, 84, 0.8);
}
.y-wa-btn:hover {
  background: #189247;
  color: #fff;
  transform: translateY(-2px);
}
/* Reveal animasyonu */
.y-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.y-reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .y-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .y-marquee-track {
    animation: none;
  }
}
/* Responsive
   NOT: eski hero kuralları (.y-hero-media/.y-float/.y-jar/.y-halo ve mobilde
   text-align:center) tam kanama hero'ya geçişte kaldırıldı — hem markup'ta
   karşılıkları yok hem de yeni düzeni eziyorlardı. Mobilde metin sola dayalı
   kalır, altındaki güven şeridiyle aynı eksende. */
@media (max-width: 991px) {
  .y-cats, .y-prod-grid, .y-process {
    grid-template-columns: repeat(2, 1fr);
  }
  .y-track {
    grid-template-columns: repeat(2, 1fr);
  }
  .y-track::before {
    display: none;
  }
  .y-storyband .grid {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}
@media (max-width: 575px) {
  /* Ürün ve kategori kartları dar ekranda da İKİ SÜTUN kalır — tek sütun,
     kartları gereksiz büyütüp sayfayı uzatıyordu. Süreç adımları ve zaman
     çizelgesi ise metin ağırlıklı olduğu için tek sütuna düşer. */
  .y-cats, .y-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .y-process, .y-track {
    grid-template-columns: 1fr;
  }
  .y-hero {
    padding-top: 22px;
  }
  .y-hero h1 {
    font-size: clamp(32px, 8vw, 40px);
  }
  .y-hero .y-lede {
    font-size: 15.5px;
  }
  .y-hero .y-cta {
    flex-direction: column;
    width: 100%;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }
  .y-hero .y-cta .y-btn {
    width: 100%;
    justify-content: center;
  }
  .y-hero .y-chips {
    gap: 8px;
  }
  .y-hero .y-chip {
    font-size: 12px;
    padding: 8px 13px;
  }
  .y-sec {
    padding: 48px 0;
  }
  .y-sec-head h2 {
    font-size: clamp(26px, 7vw, 34px);
  }
}
/* ============================================================
   SEPET PANELİ — masaüstünde dropdown, mobilde alt sayfa (modal)
   ============================================================ */
.y-cart-dd {
  position: relative;
}
.y-cartpanel {
  --cp-pad:20px;
  width: 396px;
  max-width: calc(100vw - 24px);
  padding: 0;
  margin-top: 14px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  background: #FFFCF7;
  box-shadow: 0 26px 60px -24px rgba(36, 28, 20, 0.34), 0 4px 14px -6px rgba(36, 28, 20, 0.14);
  overflow: hidden;
}
.y-cp-grip {
  display: none;
}
/* — başlık — */
.y-cp-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px var(--cp-pad) 14px;
  border-bottom: 1px solid var(--y-line);
}
.y-cp-headtx {
  flex: 1 1 auto;
  min-width: 0;
}
.y-cp-kicker {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold);
  margin-bottom: 3px;
}
.y-cp-title {
  font-family: var(--y-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
  line-height: 1.1;
}
.y-cp-count {
  flex: 0 0 auto;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--y-ink-soft);
  background: var(--y-tile);
  border-radius: 20px;
  padding: 6px 11px;
  white-space: nowrap;
}
.y-cp-close {
  display: none;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--y-line);
  border-radius: 50%;
  background: transparent;
  color: var(--y-ink-soft);
  cursor: pointer;
}
.y-cp-close:hover {
  color: var(--y-red);
  border-color: var(--y-red);
}
/* — ürün satırları — */
.y-cp-body {
  max-height: 342px;
  overflow-y: auto;
  padding: 2px var(--cp-pad);
  overscroll-behavior: contain;
}
.y-cp-body::-webkit-scrollbar {
  width: 5px;
}
.y-cp-body::-webkit-scrollbar-thumb {
  background: var(--y-line);
  border-radius: 4px;
}
.y-cp-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 15px 0;
}
.y-cp-row + .y-cp-row {
  border-top: 1px solid color-mix(in srgb, var(--y-line) 62%, transparent);
}
.y-cp-img {
  display: block;
  width: 58px;
  height: 66px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--y-line);
  flex: 0 0 auto;
}
.y-cp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.y-cp-img-gift {
  display: grid;
  place-items: center;
  color: var(--y-gold);
  background: var(--y-tile);
}
.y-cp-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.y-cp-name {
  font-family: var(--y-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--y-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y-cp-name:hover {
  color: var(--y-red);
}
.y-cp-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.y-cp-opts em {
  font-style: normal;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  background: var(--y-tile);
  border-radius: 20px;
  padding: 4px 9px;
  line-height: 1;
}
.y-cp-note {
  font-size: 11.5px;
  color: var(--y-ink-soft);
}
.y-cp-meta {
  font-size: 12px;
  color: var(--y-ink-soft);
  font-variant-numeric: tabular-nums;
}
.y-cp-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.y-cp-line {
  font-family: var(--y-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--y-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.y-cp-del {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--y-ink-soft);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}
.y-cp-del:hover {
  color: var(--y-red);
  background: color-mix(in srgb, var(--y-red) 9%, transparent);
  border-color: color-mix(in srgb, var(--y-red) 24%, transparent);
}
/* — toplamlar + eylem — */
.y-cp-foot {
  padding: 16px var(--cp-pad) 18px;
  background: var(--y-tile);
  border-top: 1px solid var(--y-line);
}
.y-cp-totals {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}
.y-cp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--y-ink-soft);
}
.y-cp-total b {
  font-weight: 500;
  color: var(--y-ink);
  font-variant-numeric: tabular-nums;
}
.y-cp-total.is-grand {
  padding-top: 9px;
  border-top: 1px dashed color-mix(in srgb, var(--y-gold-line) 52%, transparent);
}
.y-cp-total.is-grand span {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  color: var(--y-ink);
}
.y-cp-total.is-grand b {
  font-family: var(--y-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--y-red);
}
.y-cp-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.y-cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10.5px;
  padding: 13px 12px;
  border-radius: 40px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.y-cp-btn-ghost {
  border-color: var(--y-ink-soft);
  color: var(--y-ink);
  background: transparent;
}
.y-cp-btn-ghost:hover {
  border-color: var(--y-ink);
  background: rgba(36, 28, 20, 0.05);
  color: var(--y-ink);
}
.y-cp-btn-solid {
  background: var(--y-red);
  color: #fff;
}
.y-cp-btn-solid:hover {
  background: var(--y-red-deep);
  color: #fff;
}
.y-cp-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--y-ink-soft);
}
.y-cp-trust svg {
  color: var(--y-olive);
  flex: 0 0 auto;
}
/* — boş sepet — */
.y-cp-empty {
  padding: 38px 26px 32px;
  text-align: center;
}
.y-cp-empty-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--y-tile);
  color: var(--y-gold);
}
.y-cp-empty-ic svg {
  width: 28px;
  height: 28px;
}
.y-cp-empty-t {
  font-family: var(--y-serif);
  font-size: 19px;
  color: var(--y-ink);
  margin: 0 0 7px;
}
.y-cp-empty-s {
  font-size: 13px;
  line-height: 1.55;
  color: var(--y-ink-soft);
  margin: 0 0 18px;
}
.y-cp-empty .y-cp-btn {
  padding: 13px 26px;
}
/* — mobil: alt sayfa (modal) — */
.y-cart-backdrop {
  display: none;
}
@media (max-width: 767.98px) {
  /* TUZAK: .y-sticky'deki backdrop-filter, position:fixed için containing block yaratır
     → panel viewport yerine header kutusuna hapsolur (mobil menüde de aynısı olmuştu).
     Panel açıkken buğuyu nötrle; zaten perde arkada kaldığı için görsel kayıp yok. */
  .y-cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1054;
    background: rgba(20, 16, 11, 0.52);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }
  body.y-cart-open .y-cart-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.y-cart-open {
    overflow: hidden;
  }
  body.y-cart-open .y-sticky {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .y-cart-dd .y-cartpanel.show {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px -14px rgba(20, 16, 11, 0.4);
    animation: ySheetUp 0.3s cubic-bezier(0.22, 0.72, 0.3, 1);
  }
  .y-cp-grip {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--y-line);
    margin: 9px auto 0;
    flex: 0 0 auto;
  }
  .y-cp-close {
    display: grid;
  }
  .y-cp-head {
    padding-top: 14px;
  }
  .y-cp-body {
    max-height: none;
    flex: 1 1 auto;
  }
  .y-cp-foot {
    flex: 0 0 auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .y-cp-row {
    grid-template-columns: 54px 1fr auto;
  }
  .y-cp-img {
    width: 54px;
    height: 62px;
  }
}
@keyframes ySheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* ============================================================
   "SEPETE EKLENDİ" MODALI
   ============================================================ */
.y-added {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.y-added.open {
  display: flex;
}
body.y-added-open {
  overflow: hidden;
}
.y-added-back {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 11, 0.56);
  backdrop-filter: blur(3px);
  animation: yFade 0.22s ease;
}
.y-added-sheet {
  position: relative;
  width: min(460px, 100%);
  background: #FFFCF7;
  border: 1px solid var(--y-line);
  border-radius: 22px;
  padding: 30px 28px 24px;
  box-shadow: 0 34px 80px -28px rgba(20, 16, 11, 0.5);
  animation: yPop 0.3s cubic-bezier(0.22, 0.72, 0.3, 1);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.y-added-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--y-line);
  border-radius: 50%;
  background: transparent;
  color: var(--y-ink-soft);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
.y-added-x:hover {
  color: var(--y-red);
  border-color: var(--y-red);
}
.y-added-top {
  text-align: center;
  margin-bottom: 22px;
}
.y-added-check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--y-olive) 13%, transparent);
  color: var(--y-olive);
  border: 1px solid color-mix(in srgb, var(--y-olive) 26%, transparent);
}
.y-added-kicker {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 9.5px;
  color: var(--y-gold);
  margin-bottom: 6px;
}
.y-added-title {
  font-family: var(--y-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.y-added-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 15px;
  align-items: center;
  background: var(--y-tile);
  border: 1px solid var(--y-line);
  border-radius: 15px;
  padding: 13px;
}
.y-added-img {
  display: block;
  width: 72px;
  height: 80px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--y-line);
}
.y-added-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.y-added-tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.y-added-name {
  font-family: var(--y-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--y-ink);
}
.y-added-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.y-added-opts em {
  font-style: normal;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  background: #fff;
  border: 1px solid var(--y-line);
  border-radius: 20px;
  padding: 4px 9px;
  line-height: 1;
}
.y-added-qty {
  font-size: 12px;
  color: var(--y-ink-soft);
  font-variant-numeric: tabular-nums;
}
.y-added-price {
  font-family: var(--y-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--y-red);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.y-added-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--y-gold-line) 52%, transparent);
}
.y-added-sum span {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  color: var(--y-ink);
}
.y-added-sum b {
  font-family: var(--y-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--y-ink);
  font-variant-numeric: tabular-nums;
}
.y-added-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.y-added-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10.5px;
  padding: 14px 12px;
  border-radius: 40px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.y-added-ghost {
  border-color: var(--y-ink-soft);
  color: var(--y-ink);
  background: transparent;
}
.y-added-ghost:hover {
  border-color: var(--y-ink);
  background: rgba(36, 28, 20, 0.05);
}
.y-added-solid {
  background: var(--y-red);
  color: #fff;
}
.y-added-solid:hover {
  background: var(--y-red-deep);
  color: #fff;
}
.y-added-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--y-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.y-added-link:hover {
  color: var(--y-red);
}
@keyframes yFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes yPop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 575px) {
  .y-added-sheet {
    padding: 26px 18px 20px;
    border-radius: 20px;
  }
  .y-added-title {
    font-size: 21px;
  }
  .y-added-item {
    grid-template-columns: 64px 1fr;
    gap: 12px;
  }
  .y-added-img {
    width: 64px;
    height: 72px;
  }
  .y-added-price {
    grid-column: 2;
    justify-self: start;
    font-size: 17px;
  }
  .y-added-cta {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .y-cart-dd .y-cartpanel.show, .y-added-back, .y-added-sheet {
    animation: none !important;
  }
}
/* ============================================================
   HESAP GİRİŞ / KAYIT — bölünmüş kompozisyon
   Sol: koyu marka paneli (footer'la aynı --y-brine tonu)
   Sağ: birincil eylem — form
   ============================================================ */
#account-login {
  padding-bottom: 96px;
}
.y-auth {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  max-width: 1020px;
  margin: 8px auto 0;
  border: 1px solid var(--y-line);
  border-radius: 22px;
  overflow: hidden;
  background: #FFFCF7;
  box-shadow: 0 30px 70px -34px rgba(36, 28, 20, 0.3), 0 4px 14px -8px rgba(36, 28, 20, 0.1);
}
/* — sol panel — */
.y-auth-aside {
  position: relative;
  background: var(--y-brine);
  color: var(--y-cream);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
}
.y-auth-aside::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(198, 161, 90, 0.26);
  border-radius: 14px;
  pointer-events: none;
}
.y-auth-kicker {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 9px;
  color: var(--y-gold-bright);
  margin-bottom: 16px;
}
.y-auth-h {
  font-family: var(--y-serif);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.16;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: balance;
}
.y-auth-h em {
  display: block;
  font-style: italic;
  color: var(--y-gold-bright);
}
.y-auth-lede {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(246, 236, 214, 0.72);
  margin: 0 0 26px;
  max-width: 34ch;
}
.y-auth-list {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.y-auth-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(246, 236, 214, 0.9);
}
.y-auth-list svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: var(--y-gold-bright);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-auth-seal {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(198, 161, 90, 0.22);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9px;
  color: rgba(198, 161, 90, 0.8);
}
/* — sağ form — */
.y-auth-main {
  padding: 44px 44px 38px;
  display: flex;
  flex-direction: column;
}
.y-auth-eyebrow {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold);
  margin-bottom: 7px;
}
.y-auth-title {
  font-family: var(--y-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 6px;
  line-height: 1.1;
}
.y-auth-sub {
  font-size: 13.5px;
  color: var(--y-ink-soft);
  margin: 0 0 26px;
}
.y-field {
  margin-bottom: 18px;
}
.y-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.y-field-link {
  font-size: 12px;
  color: var(--y-red);
  text-decoration: none;
  margin-bottom: 7px;
}
.y-field-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* parola göster/gizle */
.y-pw {
  position: relative;
}
.y-pw .form-control {
  padding-right: 48px;
}
.y-pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--y-ink-soft);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.y-pw-eye:hover {
  color: var(--y-ink);
  background: rgba(36, 28, 20, 0.05);
}
.y-pw-eye svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-pw-eye .y-pw-b {
  display: none;
}
.y-pw.is-shown .y-pw-eye .y-pw-a {
  display: none;
}
.y-pw.is-shown .y-pw-eye .y-pw-b {
  display: block;
}
.y-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  padding: 16px 20px;
  border-radius: 40px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: var(--y-red);
  color: #fff;
  margin-top: 6px;
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--y-red) 80%, transparent);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.2s ease;
}
.y-auth-btn:hover {
  background: var(--y-red-deep);
  color: #fff;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--y-red) 85%, transparent);
}
.y-auth-btn-ghost {
  background: transparent;
  color: var(--y-ink);
  border-color: var(--y-ink-soft);
  box-shadow: none;
}
.y-auth-btn-ghost:hover {
  background: rgba(36, 28, 20, 0.05);
  color: var(--y-ink);
  border-color: var(--y-ink);
  box-shadow: none;
}
/* ikincil yol */
.y-auth-alt {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
}
.y-auth-or {
  position: relative;
  display: block;
  margin-bottom: 16px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
}
.y-auth-or::before, .y-auth-or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 5.6em);
  height: 1px;
  background: color-mix(in srgb, var(--y-gold-line) 45%, transparent);
}
.y-auth-or::before {
  left: 0;
}
.y-auth-or::after {
  right: 0;
}
.y-auth-alt-tx {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--y-ink-soft);
  margin: 0 0 16px;
}
@media (max-width: 860px) {
  .y-auth {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .y-auth-aside {
    order: 2;
    padding: 34px 28px;
  }
  .y-auth-aside::after {
    inset: 12px;
  }
  .y-auth-main {
    order: 1;
    padding: 34px 28px 30px;
  }
  .y-auth-list {
    margin-bottom: 0;
  }
  .y-auth-seal {
    margin-top: 26px;
  }
}
@media (max-width: 480px) {
  .y-auth-main {
    padding: 28px 20px 26px;
  }
  .y-auth-aside {
    padding: 28px 20px;
  }
  .y-auth-title {
    font-size: 26px;
  }
}
/* ---------- Auth: geniş varyant (kayıt gibi uzun formlar) ---------- */
.y-auth-wide {
  max-width: 1120px;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}
.y-auth-wide .y-auth-aside {
  padding: 0;
}
.y-auth-aside-in {
  position: sticky;
  top: 110px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
}
.y-auth-wide .y-auth-aside::after {
  inset: 16px;
}
/* zorunlu alan işareti — çekirdeğin saf #F00 yıldızı marka kırmızısına çevrildi */
div.required .col-form-label:before, div.required .form-label:before {
  content: "*";
  color: var(--y-red);
  font-weight: 400;
  margin-right: 5px;
}
/* alan grupları */
.y-fs {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
  min-width: 0;
}
.y-fs-leg {
  float: none;
  width: auto;
  padding: 0 0 12px;
  margin: 0 0 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--y-gold-line) 42%, transparent);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--y-gold);
}
.y-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.y-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 2px;
}
/* onay satırı — kutu + iki satır metin, tıklanabilir kart hissi */
.y-optin {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0;
  border: 1px solid var(--y-line);
  border-radius: 14px;
  background: #FFFCF7;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.y-optin:hover {
  border-color: color-mix(in srgb, var(--y-gold-line) 60%, transparent);
}
.y-optin:has(.form-check-input:checked) {
  border-color: color-mix(in srgb, var(--y-red) 40%, transparent);
  background: color-mix(in srgb, var(--y-red) 4%, #FFFCF7);
}
.y-optin .form-check-input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--y-line);
  background-color: #fff;
  cursor: pointer;
}
.y-optin .form-check-input:checked {
  background-color: var(--y-red);
  border-color: var(--y-red);
}
.y-optin-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.y-optin-tx strong {
  font-family: var(--y-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--y-ink);
}
.y-optin-tx strong a {
  color: var(--y-red);
}
.y-optin-tx em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--y-ink-soft);
}
.y-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 40px;
  border: 1px solid var(--y-ink-soft);
  background: transparent;
  color: var(--y-ink);
  cursor: pointer;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.y-upload:hover {
  background: rgba(36, 28, 20, 0.05);
  border-color: var(--y-ink);
}
.y-auth-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}
@media (max-width: 860px) {
  .y-auth-wide {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .y-auth-aside-in {
    position: static;
    padding: 34px 28px;
  }
  .y-field-row {
    grid-template-columns: 1fr;
  }
}
/* ---------- Auth: ortalanmış kompakt kart (parola sıfırlama vb.) ---------- */
.y-authbox {
  max-width: 470px;
  margin: 12px auto 0;
  padding: 40px 38px 34px;
  text-align: center;
  border: 1px solid var(--y-line);
  border-radius: 22px;
  background: #FFFCF7;
  box-shadow: 0 30px 70px -34px rgba(36, 28, 20, 0.3), 0 4px 14px -8px rgba(36, 28, 20, 0.1);
}
.y-authbox-ic {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--y-tile);
  color: var(--y-gold);
  border: 1px solid color-mix(in srgb, var(--y-gold-line) 40%, transparent);
}
.y-authbox-ic svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-authbox .y-auth-sub {
  margin-bottom: 24px;
}
.y-authbox .y-field {
  text-align: left;
}
.y-authbox-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  text-decoration: none;
  transition: color 0.16s ease;
}
.y-authbox-back:hover {
  color: var(--y-red);
}
#account-forgotten, #account-reset {
  padding-bottom: 96px;
}
#account-register {
  padding-bottom: 96px;
}
@media (max-width: 480px) {
  .y-authbox {
    padding: 32px 20px 28px;
    border-radius: 20px;
  }
}
/* ============================================================
   HESABIM — kurumsal profil paneli
   ============================================================ */
#account-account {
  padding-bottom: 96px;
}
.y-acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 30px;
  margin-bottom: 34px;
  border: 1px solid var(--y-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFCF7, var(--y-tile));
}
.y-acct-id {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.y-acct-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--y-red);
  color: #fff;
  font-family: var(--y-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.y-acct-eyebrow {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold);
  margin-bottom: 4px;
}
.y-acct-hi {
  font-family: var(--y-serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
  line-height: 1.1;
}
.y-acct-mail {
  font-size: 13px;
  color: var(--y-ink-soft);
  margin: 5px 0 0;
}
.y-acct-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: 40px;
  border: 1px solid var(--y-ink-soft);
  color: var(--y-ink);
  text-decoration: none;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.y-acct-out svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-acct-out:hover {
  background: var(--y-red);
  border-color: var(--y-red);
  color: #fff;
}
.y-acct-sec {
  margin-bottom: 34px;
}
.y-acct-legend {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--y-gold);
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--y-gold-line) 42%, transparent);
}
.y-acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.y-acct-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 18px 18px;
  border: 1px solid var(--y-line);
  border-radius: 16px;
  background: #FFFCF7;
  text-decoration: none;
  color: var(--y-ink);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.y-acct-card:hover {
  border-color: color-mix(in srgb, var(--y-red) 34%, transparent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(36, 28, 20, 0.4);
}
.y-acct-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--y-tile);
  color: var(--y-ink-soft);
  transition: background 0.18s ease, color 0.18s ease;
}
.y-acct-ic svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-acct-card:hover .y-acct-ic {
  background: color-mix(in srgb, var(--y-red) 11%, transparent);
  color: var(--y-red);
}
.y-acct-tx {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.y-acct-tx strong {
  font-family: var(--y-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}
.y-acct-tx em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--y-ink-soft);
}
.y-acct-card .y-acct-go {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--y-ink-soft);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.y-acct-card:hover .y-acct-go {
  opacity: 1;
  transform: none;
  color: var(--y-red);
}
@media (max-width: 575px) {
  /* dokunmatikte hover yok */
  .y-acct-head {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .y-acct-out {
    justify-content: center;
  }
  .y-acct-grid {
    grid-template-columns: 1fr;
  }
  .y-acct-card .y-acct-go {
    opacity: 1;
    transform: none;
  }
}
/* ============================================================
   BİLGİ SAYFASI + ZENGİN METİN (.y-rte)
   Panelden girilen HTML'in tipografisi. Hakkımızda, KVKK,
   mesafeli satış, iade/teslimat sayfalarının hepsi bunu kullanır.
   ============================================================ */
#information-information {
  padding-bottom: 96px;
}
.y-page-head {
  max-width: 760px;
  margin: 6px auto 34px;
  text-align: center;
}
.y-page-rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 18px;
  background: linear-gradient(to right, transparent, var(--y-gold-line), transparent);
}
.y-page-title {
  font-family: var(--y-serif);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
}
.y-rte {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--y-sans);
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--y-ink);
}
.y-rte > *:first-child {
  margin-top: 0;
}
.y-rte > *:last-child {
  margin-bottom: 0;
}
.y-rte p {
  margin: 0 0 20px;
}
.y-rte h2 {
  font-family: var(--y-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 44px 0 14px;
  line-height: 1.2;
  text-wrap: balance;
}
.y-rte h3 {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--y-gold);
  margin: 34px 0 12px;
}
.y-rte h4 {
  font-family: var(--y-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--y-ink);
  margin: 26px 0 10px;
}
.y-rte a {
  color: var(--y-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--y-red) 40%, transparent);
}
.y-rte a:hover {
  text-decoration-color: var(--y-red);
}
.y-rte strong, .y-rte b {
  font-weight: 600;
  color: var(--y-ink);
}
.y-rte ul, .y-rte ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.y-rte ol {
  counter-reset: y-ol;
}
.y-rte li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.y-rte ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--y-gold-line);
}
.y-rte ol > li {
  counter-increment: y-ol;
}
.y-rte ol > li::before {
  content: counter(y-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--y-caps);
  font-size: 13px;
  color: var(--y-gold);
}
.y-rte blockquote {
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--y-gold-line);
  font-family: var(--y-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--y-ink-soft);
}
.y-rte img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 28px 0;
  display: block;
}
.y-rte hr {
  border: 0;
  height: 1px;
  margin: 40px 0;
  background: linear-gradient(to right, transparent, var(--y-gold-line), transparent);
}
.y-rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 14px;
}
.y-rte th, .y-rte td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--y-line);
  text-align: left;
}
.y-rte th {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--y-ink-soft);
  background: var(--y-tile);
}
.y-rte-wrap {
  overflow-x: auto;
}
@media (max-width: 575px) {
  .y-rte {
    font-size: 15px;
  }
  .y-rte h2 {
    margin-top: 34px;
  }
}
/* ============================================================
   İLETİŞİM SAYFASI
   ============================================================ */
#information-contact {
  padding-bottom: 96px;
}
.y-page-lede {
  max-width: 56ch;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--y-ink-soft);
}
/* kanallar — her kart doğrudan bir eyleme götürür */
.y-ct-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
  gap: 14px;
  max-width: 1020px;
  margin: 0 auto 44px;
}
.y-ct-ch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--y-line);
  border-radius: 16px;
  background: #FFFCF7;
  text-decoration: none;
  color: var(--y-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.y-ct-ch:hover {
  border-color: color-mix(in srgb, var(--y-red) 34%, transparent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(36, 28, 20, 0.4);
  color: var(--y-ink);
}
.y-ct-ch-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--y-tile);
  color: var(--y-ink-soft);
  transition: background 0.18s ease, color 0.18s ease;
}
.y-ct-ch-ic svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-ct-ch:hover .y-ct-ch-ic {
  background: color-mix(in srgb, var(--y-red) 11%, transparent);
  color: var(--y-red);
}
.y-ct-ch-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.y-ct-ch-tx em {
  font-style: normal;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 8.5px;
  color: var(--y-ink-soft);
}
.y-ct-ch-tx strong {
  font-family: var(--y-sans);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
/* gövde — adres + form */
.y-ct-body {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 22px;
  max-width: 1020px;
  margin: 0 auto;
  align-items: start;
}
.y-ct-card {
  padding: 26px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  background: #FFFCF7;
}
.y-ct-eyebrow {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold);
  margin-bottom: 8px;
}
.y-ct-store {
  font-family: var(--y-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.y-ct-addr {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--y-ink-soft);
  margin: 0 0 18px;
}
.y-ct-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--y-gold-line) 34%, transparent);
}
.y-ct-meta-lab {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: var(--y-gold);
}
.y-ct-meta-val {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--y-ink);
}
.y-ct-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 40px;
  border: 1px solid var(--y-ink-soft);
  color: var(--y-ink);
  text-decoration: none;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.y-ct-map:hover {
  background: var(--y-red);
  border-color: var(--y-red);
  color: #fff;
}
.y-ct-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin-top: 16px;
  border: 1px solid var(--y-line);
}
.y-ct-form {
  padding: 30px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  background: #FFFCF7;
  box-shadow: 0 26px 60px -34px rgba(36, 28, 20, 0.28);
}
.y-ct-fh {
  font-family: var(--y-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 6px;
  line-height: 1.15;
}
.y-ct-fsub {
  font-size: 13.5px;
  color: var(--y-ink-soft);
  margin: 0 0 22px;
}
.y-ct-locs {
  max-width: 1020px;
  margin: 52px auto 0;
}
.y-ct-locgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
@media (max-width: 860px) {
  .y-ct-body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .y-ct-form {
    padding: 22px 18px;
  }
  .y-ct-card {
    padding: 20px;
  }
  .y-ct-channels {
    grid-template-columns: 1fr;
  }
}
/* menüdeki sabit sayfalar — kategorilerden altın dikey ayraçla ayrılır */
.y-menu-page-first {
  position: relative;
  margin-left: 8px;
  padding-left: 16px;
}
.y-menu-page-first::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: color-mix(in srgb, var(--y-gold-line) 70%, transparent);
}
.y-menu-page > a {
  color: var(--y-ink-soft);
}
.y-menu-page > a:hover {
  color: var(--y-red);
}
.y-menu li.y-menu-page + li.y-menu-page::before {
  content: "";
}
/* mobil offcanvas — kurumsal bölümü */
.y-off-sep {
  display: block;
  margin: 22px 0 8px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9px;
  color: var(--y-gold);
}
/* ============================================================
   GLOBAL BİLEŞEN EŞLEMESİ
   Henüz elden geçirilmemiş varsayılan OpenCart şablonlarını
   (hesap alt sayfaları, siparişler, iadeler, kampanyalar…)
   tek seferde tasarım diline çeker.
   ============================================================ */
/* — sayfa başlıkları — */
#content > h1, #content > h2:first-of-type {
  font-family: var(--y-serif);
  font-weight: 500;
  color: var(--y-ink);
  line-height: 1.15;
  margin: 0 0 8px;
}
#content > h1 {
  font-size: clamp(28px, 3.4vw, 38px);
}
#content > h2 {
  font-family: var(--y-serif);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 25px);
  color: var(--y-ink);
  margin: 36px 0 14px;
}
#content > h3, fieldset > legend {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--y-gold);
  float: none;
  width: auto;
  padding: 0 0 11px;
  margin: 30px 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--y-gold-line) 42%, transparent);
}
#content > p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--y-ink-soft);
}
/* — kartlar — */
.card {
  border: 1px solid var(--y-line);
  border-radius: 16px;
  background: #FFFCF7;
  overflow: hidden;
}
.card + .card {
  margin-top: 14px;
}
.card-header {
  background: var(--y-tile);
  border-bottom: 1px solid var(--y-line);
  padding: 14px 20px;
}
.card-header h4, .card-title {
  font-family: var(--y-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
}
.card-body {
  padding: 20px;
}
.card-body address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--y-ink-soft);
}
/* — tablolar — */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--y-ink);
  margin-bottom: 22px;
  border: 1px solid var(--y-line);
  border-radius: 16px;
  overflow: hidden;
}
.table > :not(caption) > * > * {
  padding: 14px 16px;
  border-bottom: 1px solid var(--y-line);
  background: transparent;
  box-shadow: none;
}
.table thead th {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  background: var(--y-tile);
  font-weight: 400;
  white-space: nowrap;
}
.table tbody tr:last-child > * {
  border-bottom: 0;
}
.table tbody tr:hover > * {
  background: color-mix(in srgb, var(--y-gold-line) 7%, transparent);
}
.table-bordered, .table-striped {
  border: 1px solid var(--y-line);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent;
  color: var(--y-ink);
}
.table td.text-end, .table th.text-end {
  font-variant-numeric: tabular-nums;
}
.table-responsive {
  overflow-x: auto;
}
/* — uyarı kutuları — */
.alert {
  border: 1px solid var(--y-line);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  background: #FFFCF7;
  color: var(--y-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert i {
  flex: 0 0 auto;
}
.alert-success {
  border-color: color-mix(in srgb, var(--y-olive) 40%, transparent);
  background: color-mix(in srgb, var(--y-olive) 8%, #FFFCF7);
}
.alert-success i {
  color: var(--y-olive);
}
.alert-danger {
  border-color: color-mix(in srgb, var(--y-red) 38%, transparent);
  background: color-mix(in srgb, var(--y-red) 6%, #FFFCF7);
}
.alert-danger i {
  color: var(--y-red);
}
.alert-info, .alert-warning {
  border-color: color-mix(in srgb, var(--y-gold-line) 50%, transparent);
  background: color-mix(in srgb, var(--y-gold-line) 8%, #FFFCF7);
}
.alert-info i, .alert-warning i {
  color: var(--y-gold);
}
.alert .btn-close {
  margin-left: auto;
}
/* — hesap alt sayfalarında düz bağlantı listeleri — */
#content .list-unstyled {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
#content .list-unstyled > li {
  margin-bottom: 2px;
}
#content .list-unstyled > li > a {
  display: block;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14px;
  color: var(--y-ink);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
#content .list-unstyled > li > a:hover {
  background: color-mix(in srgb, var(--y-red) 7%, transparent);
  color: var(--y-red);
}
/* — buton varyantları (gradientler zaten kapalı) — */
.btn-light, .btn-secondary {
  background-color: transparent !important;
  color: var(--y-ink) !important;
  border: 1px solid var(--y-ink-soft) !important;
}
.btn-light:hover, .btn-secondary:hover {
  background-color: rgba(36, 28, 20, 0.05) !important;
  border-color: var(--y-ink) !important;
  color: var(--y-ink) !important;
}
.btn-danger {
  background-color: var(--y-red) !important;
  border-color: var(--y-red) !important;
  color: #fff !important;
}
.btn-info {
  background-color: transparent !important;
  color: var(--y-ink) !important;
  border: 1px solid var(--y-ink-soft) !important;
}
.btn-info:hover {
  background-color: var(--y-red) !important;
  border-color: var(--y-red) !important;
  color: #fff !important;
}
.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}
/* — boş durum metinleri — */
#content > p:only-of-type {
  padding: 34px 0;
  text-align: center;
  font-size: 15px;
}
/* — input-group (tarih alanları vb.) — */
.input-group-text {
  background: var(--y-tile);
  border: 1px solid var(--y-line);
  color: var(--y-ink-soft);
  border-radius: 0 12px 12px 0;
}
.input-group > .form-control:not(:last-child) {
  border-radius: 12px 0 0 12px;
}
/* ============================================================
   VARSAYILAN FORM IZGARASINI DİKEY DÜZENE ÇEVİR
   OpenCart şablonları alanları "etiket solda / input sağda"
   Bootstrap ızgarasıyla kurar. Şablonları tek tek yeniden
   yazmak yerine kalıbı burada dönüştürüyoruz — hesap, iade,
   adres ve ödeme formlarının hepsi bundan yararlanır.
   ============================================================ */
/* DİKKAT: yalnızca GERÇEK etiket ızgaraları dönüştürülür.
   `.row.mb-3` sınıfını ürün detay düzeni (galeri | bilgi) ve sipariş/iade/bakiye
   listeleri de kullanıyor; koşulsuz `display:block` onları da tek sütuna düşürüyordu.
   `:has(> [class*="col-form-label"])` ile sadece etiketli form satırları eşleşir. */
#content .row.mb-3:has(> [class*="col-form-label"]) {
  display: block;
  margin: 0 0 18px;
}
#content .row.mb-3:has(> [class*="col-form-label"]) > [class*="col-form-label"] {
  display: block;
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  margin: 0 0 7px;
  text-align: left;
}
#content .row.mb-3:has(> [class*="col-form-label"]) > [class^="col-"]:not([class*="col-form-label"]), #content .row.mb-3:has(> [class*="col-form-label"]) > [class*=" col-"]:not([class*="col-form-label"]) {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}
/* alt eylem satırı — geri / devam */
#content form > .row:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--y-gold-line) 34%, transparent);
}
#content form > .row:last-child > .col {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
/* hesap alt sayfaları — içerik bir kart içinde dursun */
#account-edit #content, #account-password #content, #account-address #content, #account-newsletter #content, #account-returns #content, #account-transaction #content, #account-reward #content, #account-wishlist #content, #account-order #content, #account-subscription #content, #account-affiliate #content, #account-download #content {
  padding: 32px 34px 30px;
  border: 1px solid var(--y-line);
  border-radius: 20px;
  background: #FFFCF7;
  box-shadow: 0 26px 60px -38px rgba(36, 28, 20, 0.26);
}
#account-edit, #account-password, #account-address, #account-newsletter, #account-returns, #account-transaction, #account-reward, #account-wishlist, #account-order, #account-subscription, #account-affiliate, #account-download {
  padding-bottom: 96px;
}
@media (max-width: 575px) {
  #account-edit #content, #account-password #content, #account-address #content, #account-newsletter #content, #account-returns #content, #account-transaction #content, #account-reward #content, #account-wishlist #content, #account-order #content, #account-subscription #content, #account-affiliate #content, #account-download #content {
    padding: 22px 18px 20px;
    border-radius: 16px;
  }
  #content form > .row:last-child {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #content form > .row:last-child > .col {
    width: 100%;
  }
  #content form > .row:last-child .btn {
    width: 100%;
  }
}
/* ---------- 404 ---------- */
#error-not-found {
  padding-bottom: 110px;
}
.y-404 {
  max-width: 560px;
  margin: 20px auto 0;
  text-align: center;
}
.y-404-num {
  display: block;
  font-family: var(--y-serif);
  font-size: clamp(72px, 12vw, 120px);
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, var(--y-gold-line) 40%, transparent);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.y-404-title {
  font-family: var(--y-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 12px;
  line-height: 1.15;
  text-wrap: balance;
}
.y-404-tx {
  font-size: 15px;
  line-height: 1.7;
  color: var(--y-ink-soft);
  margin: 0 0 28px;
}
.y-404-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.y-404-cta .y-auth-btn {
  width: auto;
  padding: 15px 30px;
  margin-top: 0;
}
.y-404-hint {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: var(--y-ink-soft);
}
@media (max-width: 480px) {
  .y-404-cta {
    flex-direction: column;
  }
  .y-404-cta .y-auth-btn {
    width: 100%;
  }
}
/* iletişim sayfası sol sütunu — kart + görsel dikey akış */
.y-ct-info {
  display: flex;
  flex-direction: column;
}
/* ============================================================
   ONAY KUTUSU / RADYO / ANAHTAR — GLOBAL
   .form-check ebeveyni ŞART DEĞİL: OpenCart bazı yerlerde
   .form-check-inline, bazı yerlerde sarmalayıcısız kullanıyor.
   Doğrudan .form-check-input'a yazıyoruz ki gözden kaçan
   sayfalarda da doğru görünsün.
   İZOLASYON: ürün seçenek kartları (#product-info #product) ve
   .y-optin kendi kuralları daha spesifik olduğu için etkilenmez.
   ============================================================ */
.form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin-top: 0.1em;
  flex-shrink: 0;
  vertical-align: top;
  border: 1px solid var(--y-line);
  background-color: #FFFCF7;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
  cursor: pointer;
  print-color-adjust: exact;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.form-check-input[type="checkbox"] {
  border-radius: 6px;
}
.form-check-input[type="radio"] {
  border-radius: 50%;
}
.form-check-input:hover:not(:checked) {
  border-color: color-mix(in srgb, var(--y-ink-soft) 42%, var(--y-line));
}
.form-check-input:checked {
  background-color: var(--y-red);
  border-color: var(--y-red);
}
.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10.5 4 4 8-9'/%3E%3C/svg%3E");
}
.form-check-input:checked[type="radio"] {
  background-size: 48%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff'/%3E%3C/svg%3E");
}
.form-check-input:focus-visible {
  border-color: var(--y-gold-line);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--y-gold-line) 18%, transparent);
}
.form-check-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.form-check-label {
  font-family: var(--y-sans);
  font-size: 13.5px;
  color: var(--y-ink);
  cursor: pointer;
  line-height: 1.4;
}
/* sarmalayıcı düzenleri */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-left: 0;
  margin-bottom: 8px;
}
.form-check .form-check-input {
  margin-left: 0;
}
.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 22px 6px 0;
  padding-left: 0;
}
.form-check-reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
/* anahtar (switch) — hap biçimli */
.form-switch {
  padding-left: 0;
}
.form-switch .form-check-input {
  width: 44px;
  height: 24px;
  border-radius: 24px;
  background-size: auto;
  background-position: left 3px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%236E6049'/%3E%3C/svg%3E");
  transition: background-color 0.2s ease, border-color 0.2s ease, background-position 0.2s ease;
}
.form-switch .form-check-input:checked {
  background-position: right 3px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23fff'/%3E%3C/svg%3E");
}
.form-switch.form-switch-lg .form-check-input {
  width: 50px;
  height: 27px;
}
/* ---------- Paylaşılan onay sayfası ---------- */
#common-success {
  padding-bottom: 110px;
}
.y-done {
  max-width: 560px;
  margin: 24px auto 0;
  padding: 46px 40px 38px;
  text-align: center;
  border: 1px solid var(--y-line);
  border-radius: 22px;
  background: #FFFCF7;
  box-shadow: 0 30px 70px -34px rgba(36, 28, 20, 0.3), 0 4px 14px -8px rgba(36, 28, 20, 0.1);
}
.y-done-seal {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--y-olive) 13%, transparent);
  color: var(--y-olive);
  border: 1px solid color-mix(in srgb, var(--y-olive) 30%, transparent);
}
.y-done-seal svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-done-title {
  font-family: var(--y-serif);
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 16px;
  line-height: 1.15;
  text-wrap: balance;
}
.y-done-tx {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--y-ink-soft);
}
.y-done-tx p {
  margin: 0 0 12px;
}
.y-done-tx p:last-child {
  margin-bottom: 0;
}
.y-done-tx a {
  color: var(--y-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.y-done-cta {
  margin-top: 28px;
}
.y-done-cta .y-auth-btn {
  width: auto;
  min-width: 200px;
  padding: 15px 32px;
  margin-top: 0;
}
.y-done-seal-tx {
  display: block;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--y-gold-line) 36%, transparent);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold);
}
@media (max-width: 480px) {
  .y-done {
    padding: 34px 20px 28px;
    border-radius: 20px;
  }
  .y-done-cta .y-auth-btn {
    width: 100%;
    min-width: 0;
  }
}
/* auth sayfalarında uyarı kutusu, kartla aynı genişlikte hizalansın */
#account-login > .alert, #account-register > .alert {
  max-width: 1020px;
  margin: 0 auto 18px;
}
#account-forgotten > .alert, #account-reset > .alert, #common-success > .alert {
  max-width: 560px;
  margin: 0 auto 18px;
}
/* ============================================================
   HERO KAMPANYA ALANI
   Otomatik dönen carousel DEĞİL: ilk kart büyük, kalanlar altta
   yatay şeritte. Üçten fazla kart olduğunda şerit kaydırılabilir
   (scroll-snap) — kullanıcı kontrolünde, kendi kendine oynamaz.
   ============================================================ */
.y-promo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* — büyük kart — */
.y-promo-lead {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  min-height: 320px;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  border: 1px solid var(--y-line);
  background: var(--y-brine);
  box-shadow: 0 26px 60px -34px rgba(36, 28, 20, 0.42);
  transition: transform 0.28s cubic-bezier(0.22, 0.72, 0.3, 1), box-shadow 0.28s ease;
}
.y-promo-lead:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 70px -34px rgba(36, 28, 20, 0.5);
  color: #fff;
}
.y-promo-lead > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.y-promo-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 16, 11, 0.14) 0%, rgba(20, 16, 11, 0.52) 52%, rgba(20, 16, 11, 0.86) 100%);
}
.y-promo-lead.is-plain::after {
  background: linear-gradient(140deg, color-mix(in srgb, var(--y-red) 88%, #000) 0%, var(--y-brine) 100%);
}
.y-promo-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px;
  height: 100%;
  justify-content: flex-end;
  min-height: 320px;
}
.y-promo-eyebrow {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: var(--y-gold-bright);
}
.y-promo-title {
  font-family: var(--y-serif);
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 500;
  line-height: 1.18;
  color: #fff;
  text-wrap: balance;
}
.y-promo-tx {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 36ch;
}
.y-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 40px;
  background: #fff;
  color: var(--y-ink);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  transition: background 0.18s ease, color 0.18s ease;
}
.y-promo-lead:hover .y-promo-btn {
  background: var(--y-red);
  color: #fff;
}
/* — küçük kartlar şeridi — */
.y-promo-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.y-promo-rail.is-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding-bottom: 6px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.y-promo-rail.is-scroll::-webkit-scrollbar {
  height: 5px;
}
.y-promo-rail.is-scroll::-webkit-scrollbar-thumb {
  background: var(--y-line);
  border-radius: 4px;
}
.y-promo-rail.is-scroll .y-promo-mini {
  flex: 0 0 calc(50% - 6px);
  scroll-snap-align: start;
}
.y-promo-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--y-line);
  background: #FFFCF7;
  text-decoration: none;
  color: var(--y-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.y-promo-mini:hover {
  border-color: color-mix(in srgb, var(--y-red) 34%, transparent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(36, 28, 20, 0.44);
  color: var(--y-ink);
}
.y-promo-mini-img {
  flex: 0 0 auto;
  width: 52px;
  height: 56px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--y-tile);
  border: 1px solid var(--y-line);
}
.y-promo-mini-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.y-promo-mini-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.y-promo-mini-tx em {
  font-style: normal;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 8px;
  color: var(--y-gold);
}
.y-promo-mini-tx strong {
  font-family: var(--y-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y-promo-mini-tx small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--y-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 991px) {
  .y-promo {
    margin-top: 34px;
  }
  .y-promo-lead, .y-promo-body {
    min-height: 260px;
  }
}
@media (max-width: 575px) {
  .y-promo-rail {
    grid-template-columns: 1fr;
  }
  .y-promo-rail.is-scroll .y-promo-mini {
    flex: 0 0 86%;
  }
  .y-promo-body {
    padding: 22px;
  }
  .y-promo-lead, .y-promo-body {
    min-height: 230px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .y-promo-lead, .y-promo-mini {
    transition: none;
  }
  .y-promo-lead:hover, .y-promo-mini:hover {
    transform: none;
  }
}
/* ============================================================
   MOBİL İLETİŞİM DÜĞMELERİ (≤991px) — sol alt, alt üste
   Tam genişlik şerit "telefonla sipariş" izlenimi veriyordu ve
   sayfanın birincil eylemi gibi okunuyordu. Küçük yüzen düğmeler
   erişimi korur, ticari hiyerarşiyi bozmaz.
   ============================================================ */
.y-mcta {
  display: none;
}
@media (max-width: 991px) {
  /* Bootstrap Icons — DOLGULU set (header'daki person-circle ile aynı aile).
     Çizgisel kurallar (fill:none + stroke) bu ikonlarda onları görünmez yapar. */
  /* WhatsApp yeşili platform tanınırlığı için korundu, sıcak paletle otursun
     diye bir tık koyulaştırıldı. Telefon markanın koyu tonunda — kırmızı
     bilinçli olarak kullanılmadı: kırmızı bu sitede "satın al" demek. */
  /* footer'ın sol alt köşesindeki telif satırı düğmelerin altında kalmasın */
  .y-mcta {
    position: fixed;
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .y-mcta-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(20, 16, 11, 0.5);
    transition: transform 0.18s ease, filter 0.18s ease;
  }
  .y-mcta-btn:active {
    transform: scale(0.94);
    filter: brightness(0.94);
  }
  .y-mcta-btn:hover, .y-mcta-btn:focus {
    color: #fff;
  }
  .y-mcta-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
  }
  .y-mcta-wa {
    background: #1FA855;
  }
  .y-mcta-call {
    background: var(--y-brine);
  }
  footer {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .y-mcta-btn {
    transition: none;
  }
  .y-mcta-btn:active {
    transform: none;
  }
}
/* ---------- Dar ekranda iki sütunlu kart ayarları ---------- */
@media (max-width: 575px) {
  /* ana sayfa kategori kartı */
  /* ürün kartı (.y-card / product-thumb) */
  .y-cat .meta {
    padding: 12px 8px;
    gap: 4px;
  }
  .y-cat .meta h3 {
    font-size: 15px;
  }
  .y-cat .meta small {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .y-cat .arrow {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
  }
  .y-cat .arrow i {
    font-size: 11px;
  }
  #product-list {
    --bs-gutter-x:.75rem;
    --bs-gutter-y:.75rem;
  }
  .y-card .body {
    padding: 12px 13px 14px;
  }
  .y-card h3 {
    font-size: 13.5px;
    line-height: 1.35;
  }
  .y-card .buy {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .y-card .price {
    font-size: 15px;
  }
  .y-card .price-old {
    font-size: 12px;
  }
  .y-card .add {
    font-size: 11px;
    padding: 7px 12px;
  }
  .y-card .tag {
    font-size: 9px;
    padding: 4px 8px;
  }
}
@media (max-width: 360px) {
  .y-cat .meta h3 {
    font-size: 14px;
  }
  .y-card h3 {
    font-size: 12.5px;
  }
  .y-card .add {
    font-size: 10px;
    padding: 6px 10px;
  }
}
/* ============================================================
   SAYFA ÜST BOŞLUĞU — tutarlılık
   Header yüzen bir kart olduğu için altındaki her sayfanın aynı
   nefes payına ihtiyacı var. Bazı sayfalarda breadcrumb menü
   şeridine bitişik duruyordu: `.breadcrumb`ın üst marjı yok ve
   sayfa kapsayıcılarına da üst boşluk verilmemişti.
   `main > .container` tüm iç sayfaları kapsar; ana sayfa
   (.y-home) container DEĞİL, o yüzden hero'nun yukarı çekilmesi
   bundan etkilenmez.
   ============================================================ */
main > .container {
  padding-top: 30px;
}
main > .container > .breadcrumb:first-child {
  margin-top: 0 !important;
}
/* boş sepet / boş durum sayfası */
#checkout-cart {
  padding-bottom: 96px;
}
.y-empty {
  max-width: 520px;
  margin: 26px auto 0;
  text-align: center;
}
.y-empty-ic {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--y-tile);
  color: var(--y-gold);
  border: 1px solid color-mix(in srgb, var(--y-gold-line) 40%, transparent);
}
.y-empty-ic svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.y-empty-title {
  font-family: var(--y-serif);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 12px;
  line-height: 1.15;
}
.y-empty-tx {
  font-size: 15px;
  line-height: 1.7;
  color: var(--y-ink-soft);
  margin: 0 0 26px;
}
.y-empty-cta .y-auth-btn {
  width: auto;
  min-width: 220px;
  padding: 15px 32px;
  margin-top: 0;
}
.y-empty-hint {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--y-ink-soft);
}
@media (max-width: 991px) {
  main > .container {
    padding-top: 22px;
  }
}
@media (max-width: 480px) {
  .y-empty-cta .y-auth-btn {
    width: 100%;
    min-width: 0;
  }
}
/* ücretsiz kargo göstergesi (sepet paneli) — eşik kargo ayarından gelir */
.y-cp-ship {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 10px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  background: color-mix(in srgb, var(--y-gold-line) 13%, transparent);
  color: var(--y-ink);
}
.y-cp-ship b {
  font-weight: 600;
  color: var(--y-red);
}
.y-cp-ship.is-free {
  background: color-mix(in srgb, var(--y-olive) 13%, transparent);
  color: var(--y-olive);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}
/* ==========================================================================
   ALIŞVERİŞİ TAMAMLA (checkout)
   --------------------------------------------------------------------------
   Üç adımlı akış: solda adımlar, sağda yapışkan sipariş özeti.
   Kilitli adım hem soluk hem pointer-events:none — betik yüklenmese bile
   sıradışı bir sırayla veri girilemez.
   ========================================================================== */
.y-co {
  padding-bottom: 70px;
}
.y-co .breadcrumb {
  margin-bottom: 22px;
}
.y-co-top {
  margin-bottom: 30px;
  box-shadow: none;
}
.y-co-eyebrow {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 9.5px;
  color: var(--y-gold);
  margin-bottom: 9px;
}
.y-co-title {
  font-family: var(--y-serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 22px;
  line-height: 1.1;
}
/* Adım rayı */
.y-co-rail {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.y-co-rail-i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 16px;
  margin-right: 16px;
  position: relative;
  color: var(--y-ink-soft);
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
}
.y-co-rail-i:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--y-line);
}
.y-co-rail-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--y-line);
  font-family: var(--y-sans);
  font-size: 11.5px;
  font-weight: 600;
  flex: 0 0 auto;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.y-co-rail-t {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10px;
  white-space: nowrap;
}
.y-co-rail-i.is-on {
  opacity: 1;
  color: var(--y-ink);
}
.y-co-rail-i.is-on .y-co-rail-n {
  background: var(--y-red);
  border-color: var(--y-red);
  color: #fff;
}
.y-co-rail-i.is-done {
  opacity: 1;
  color: var(--y-ink-soft);
}
.y-co-rail-i.is-done .y-co-rail-n {
  background: var(--y-olive);
  border-color: var(--y-olive);
  color: #fff;
  font-size: 0;
}
.y-co-rail-i.is-done .y-co-rail-n::before {
  content: "✓";
  font-size: 12px;
  line-height: 1;
}
.y-co-alert:not(:empty) {
  margin-bottom: 20px;
}
.y-co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 38px;
  align-items: start;
}
.y-co-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* ---------- Adım kartı ---------- */
.y-cos {
  background: #FFFCF7;
  border: 1px solid var(--y-line);
  border-radius: 16px;
  padding: 24px 26px;
  transition: opacity 0.25s, border-color 0.25s;
}
.y-cos-h {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.y-cos-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--y-tile);
  color: var(--y-ink);
  font-family: var(--y-sans);
  font-size: 13px;
  font-weight: 600;
  margin-top: 1px;
}
.y-cos.is-done .y-cos-n {
  background: var(--y-olive);
  color: #fff;
  font-size: 0;
}
.y-cos.is-done .y-cos-n::before {
  content: "✓";
  font-size: 14px;
  line-height: 1;
}
.y-cos-ht {
  flex: 1 1 auto;
  min-width: 0;
}
.y-cos-t {
  font-family: var(--y-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0;
  line-height: 1.2;
}
.y-cos-s {
  font-size: 13px;
  color: var(--y-ink-soft);
  margin: 5px 0 0;
  line-height: 1.55;
}
.y-cos-edit {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: var(--y-red);
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 6px;
}
.y-cos-edit:hover {
  color: var(--y-red-deep);
  text-decoration: underline;
}
.y-cos-b {
  margin-top: 22px;
}
.y-cos-go {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 22px;
  flex-wrap: wrap;
}
/* Tamamlanmış adımın tek satırlık özeti */
.y-cos-done {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 15px;
  background: rgba(94, 107, 51, 0.07);
  border-radius: 10px;
}
.y-cos-done-ic {
  color: var(--y-olive);
  flex: 0 0 auto;
  margin-top: 2px;
}
.y-cos-done-tx {
  font-size: 13px;
  color: var(--y-ink);
  line-height: 1.5;
}
/* Kilitli adım */
.y-cos-wait {
  display: none;
  font-size: 13px;
  color: var(--y-ink-soft);
  margin: 0;
  padding: 14px 16px;
  background: var(--y-tile);
  border-radius: 10px;
  line-height: 1.55;
}
.y-co-lock {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.y-co-lock .y-cos {
  border-style: dashed;
}
.y-co-lock .y-cos-wait {
  display: block;
}
.y-co-lock .y-cos-b > *:not(.y-cos-wait) {
  display: none;
}
/* ---------- Form ---------- */
.y-cof {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.y-cof-h {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  color: var(--y-gold);
  margin: 0 0 4px;
}
.y-cof-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.y-cof-f {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.y-cof-l {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  margin-bottom: 7px;
}
.y-cof-l i {
  color: var(--y-red);
  font-style: normal;
  margin-left: 3px;
}
.y-cof-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.y-cof-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.y-cof-more {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
}
.y-cof-more:hover {
  color: var(--y-red);
}
.y-cof-more svg {
  transition: transform 0.2s;
}
.y-cof-more.is-open svg {
  transform: rotate(180deg);
}
.y-cof-extra {
  margin-top: -4px;
}
/* ---------- Kayıtlı adres kartları ---------- */
.y-adr {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.y-adr-c {
  position: relative;
  cursor: pointer;
  margin: 0;
}
.y-adr-c input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.y-adr-in {
  display: block;
  height: 100%;
  padding: 16px 16px 15px 40px;
  border: 1px solid var(--y-line);
  border-radius: 12px;
  background: var(--y-page);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.y-adr-c:hover .y-adr-in {
  border-color: var(--y-gold-line);
}
.y-adr-c input:checked + .y-adr-in {
  border-color: var(--y-red);
  background: #fff;
  box-shadow: 0 0 0 1px var(--y-red), 0 10px 26px -18px rgba(168, 29, 34, 0.6);
}
.y-adr-tick {
  position: absolute;
  left: 15px;
  top: 17px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--y-line);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all 0.18s;
}
.y-adr-c input:checked + .y-adr-in .y-adr-tick {
  background: var(--y-red);
  border-color: var(--y-red);
  color: #fff;
}
.y-adr-nm {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--y-ink);
  margin-bottom: 5px;
}
.y-adr-tx {
  display: block;
  font-size: 12.5px;
  color: var(--y-ink-soft);
  line-height: 1.6;
}
.y-adr-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 96px;
  border: 1px dashed var(--y-line);
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  color: var(--y-ink-soft);
  transition: border-color 0.18s, color 0.18s;
}
.y-adr-new:hover {
  border-color: var(--y-red);
  color: var(--y-red);
}
.y-adr-new-ic {
  display: grid;
  place-items: center;
}
/* ---------- Seçenek listesi (kargo / ödeme) ---------- */
.y-opt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.2s;
}
.y-opt.is-busy {
  opacity: 0.5;
  pointer-events: none;
}
.y-opt-i {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--y-line);
  border-radius: 12px;
  background: var(--y-page);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.y-opt-i:hover {
  border-color: var(--y-gold-line);
}
.y-opt-i input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.y-opt-i.is-on {
  border-color: var(--y-red);
  background: #fff;
  box-shadow: 0 0 0 1px var(--y-red), 0 10px 26px -18px rgba(168, 29, 34, 0.55);
}
.y-opt-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--y-line);
  flex: 0 0 auto;
  position: relative;
  transition: border-color 0.18s;
}
.y-opt-i.is-on .y-opt-dot {
  border-color: var(--y-red);
}
.y-opt-i.is-on .y-opt-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--y-red);
}
.y-opt-tx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.y-opt-tx b {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--y-ink);
}
.y-opt-tx em {
  font-style: normal;
  font-size: 12px;
  color: var(--y-ink-soft);
}
.y-opt-p {
  font-family: var(--y-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--y-ink);
  flex: 0 0 auto;
  white-space: nowrap;
}
.y-opt-load, .y-opt-err {
  font-size: 13px;
  color: var(--y-ink-soft);
  margin: 0;
  padding: 12px 0;
}
.y-opt-err {
  color: var(--y-red);
}
/* Sipariş notu + sözleşme */
.y-cos-note {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
}
.y-agree {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--y-tile);
  border-radius: 10px;
  cursor: pointer;
}
.y-agree .form-check-input {
  margin-top: 2px;
  flex: 0 0 auto;
}
.y-agree-tx {
  font-size: 13px;
  color: var(--y-ink);
  line-height: 1.55;
}
.y-agree-tx a {
  color: var(--y-red);
  text-decoration: underline;
}
/* ---------- Düğmeler ---------- */
.y-cob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 13px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, opacity 0.18s;
  text-decoration: none;
}
.y-cob-solid {
  background: var(--y-red);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(168, 29, 34, 0.75);
}
.y-cob-solid:hover:not(:disabled) {
  background: var(--y-red-deep);
  color: #fff;
  transform: translateY(-2px);
}
.y-cob-ghost {
  background: transparent;
  color: var(--y-ink-soft);
  border-color: var(--y-line);
}
.y-cob-ghost:hover {
  border-color: var(--y-red);
  color: var(--y-red);
}
.y-cob-full {
  width: 100%;
}
.y-cob:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.y-cob.is-busy {
  opacity: 0.6;
  cursor: wait;
}
/* ---------- Sipariş özeti ---------- */
.y-co-side {
  position: sticky;
  top: calc(var(--y-headh,142px) + 16px);
  min-width: 0;
}
.y-sum {
  background: var(--y-brine);
  color: var(--y-cream);
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow: var(--y-shadow);
}
.y-sum-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(198, 161, 90, 0.24);
}
.y-sum-t {
  font-family: var(--y-serif);
  font-size: 19px;
  font-weight: 500;
  margin: 0;
  color: var(--y-cream);
}
.y-sum-edit {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  color: var(--y-gold-bright);
  text-decoration: none;
  flex: 0 0 auto;
}
.y-sum-edit:hover {
  color: #fff;
  text-decoration: underline;
}
.y-sum-list {
  list-style: none;
  margin: 0;
  padding: 16px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 290px;
  overflow-y: auto;
}
.y-sum-i {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.y-sum-im {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 9px;
  overflow: visible;
  background: var(--y-shot);
  display: grid;
  place-items: center;
}
.y-sum-im img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}
.y-sum-im-gift {
  color: var(--y-brine);
}
.y-sum-q {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 19px;
  background: var(--y-red);
  color: #fff;
  font-family: var(--y-sans);
  font-size: 10.5px;
  font-weight: 600;
  display: grid;
  place-items: center;
  line-height: 1;
}
.y-sum-tx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.y-sum-nm {
  font-size: 13.5px;
  color: var(--y-cream);
  text-decoration: none;
  line-height: 1.4;
}
a.y-sum-nm:hover {
  color: var(--y-gold-bright);
}
.y-sum-op {
  font-size: 11.5px;
  color: rgba(246, 236, 214, 0.6);
  line-height: 1.45;
}
.y-sum-p {
  font-family: var(--y-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--y-cream);
  flex: 0 0 auto;
  white-space: nowrap;
}
.y-sum-tot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(198, 161, 90, 0.24);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.y-sum-r {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(246, 236, 214, 0.78);
}
.y-sum-r b {
  font-weight: 500;
  color: var(--y-cream);
}
.y-sum-r.is-grand {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid rgba(198, 161, 90, 0.24);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11px;
  color: var(--y-cream);
}
.y-sum-r.is-grand b {
  font-family: var(--y-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--y-gold-bright);
}
.y-sum-go {
  margin-top: 20px;
}
.y-sum-go .btn, .y-sum-go .y-cob {
  width: 100%;
}
.y-sum-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(246, 236, 214, 0.62);
  margin: 0 0 12px;
  line-height: 1.5;
}
.y-sum-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: rgba(246, 236, 214, 0.55);
  text-align: center;
}
/* Ödeme eklentisinin kendi düğmesi koyu kart içinde tutarlı görünsün */
.y-sum-go .btn-primary {
  background: var(--y-red);
  border-color: var(--y-red);
  border-radius: 2px;
  padding: 14px 24px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.y-sum-go .btn-primary:hover {
  background: var(--y-red-deep);
  border-color: var(--y-red-deep);
}
/* Çekirdek yer yer bu sayfaya .text-end sarmalayıcı basıyor */
.y-sum-go .text-end {
  text-align: center !important;
}
/* Gizli ama DOM'da kalması gereken alanlar (çekirdek JS bunlara yazıyor) */
.y-hidden-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
@media (max-width: 991px) {
  .y-co-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .y-co-side {
    position: static;
    order: 2;
  }
  .y-cos {
    padding: 20px 18px;
    border-radius: 14px;
  }
  .y-cof-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .y-adr {
    grid-template-columns: 1fr;
  }
  .y-co-rail-i {
    padding-right: 11px;
    margin-right: 11px;
  }
  .y-co-rail-i:not(:last-child)::after {
    width: 11px;
  }
  .y-co-rail-t {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .y-cos-go .y-cob {
    flex: 1 1 auto;
  }
  .y-sum-list {
    max-height: none;
  }
}
@media (max-width: 480px) {
  .y-opt-i {
    padding: 13px 14px;
    gap: 11px;
  }
  .y-opt-p {
    font-size: 14px;
  }
  .y-co-rail-t {
    display: none;
  }
  .y-co-rail-i {
    padding-right: 8px;
    margin-right: 8px;
  }
}
/* ==========================================================================
   FORM ALANLARI — dinlenme durumu güçlendirmesi (SİTE GENELİ)
   --------------------------------------------------------------------------
   Ölçüm: kart zemini (#FFFCF7) ile input dolgusu (#FFFCF7) arasındaki kontrast
   1.00:1 idi — yani alanı yalnızca rgba(...,.12) kenarlık belli ediyordu ve
   yer tutucu %55 opaklıktaydı. Sonuç: dolu ve aktif bir form bile "pasif"
   okunuyordu. Kenarlık ve yer tutucu belirginleştirildi, dolgu karttan bir ton
   ayrıldı. Odak halkası (altın) bilerek korundu — o zaten çalışıyordu.
   ========================================================================== */
:root {
  --y-field:#FAF6EE;
  --y-field-brd:rgba(40,30,18,.20);
  --y-ground:#fcfcf8;
}
.form-control, .form-select {
  border: 1px solid var(--y-field-brd);
  background-color: var(--y-field);
}
.form-control::placeholder {
  color: var(--y-ink-soft);
  opacity: 0.72;
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--y-ink-soft) 55%, var(--y-field-brd));
}
/* Başlıktaki arama kutusu cam yüzey üstünde; bu güçlendirme oraya uygulanmaz */
.y-hsearch #search .form-control {
  border: 0;
  background-color: transparent;
}
/* ==========================================================================
   ÖDEME SAYFASI — yüzey hiyerarşisi
   --------------------------------------------------------------------------
   Üç kademe, her biri gözle ayırt edilebilir:
     ZEMİN    sıcak parşömen  (--y-ground)  → sayfanın tamamı
     AKTİF    beyaz + gölge                 → üzerinde çalışılan kart YÜKSELİR
     KİLİTLİ  zemin rengi, gölge yok        → karta hiç "yükselmez", geri çekilir
   Aktiflik böylece yalnızca opaklıkla değil, YAPISAL olarak anlatılır.
   Açık yüzeyler arası sayısal kontrast doğası gereği düşüktür (~1.2:1);
   ayrımı kenarlık + gölge taşır, dolgu tek başına taşıyamaz.
   ========================================================================== */
.y-co {
  background: var(--y-ground);
  padding-top: 26px;
}
.y-cos {
  background: #fff;
  border: 1px solid rgba(40, 30, 18, 0.1);
  box-shadow: 0 6px 26px -16px rgba(60, 40, 15, 0.5), 0 1px 2px rgba(60, 40, 15, 0.05);
  padding: 26px 28px;
}
.y-cos-n {
  background: var(--y-red);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(168, 29, 34, 0.8);
}
.y-cos-t {
  font-size: 21px;
}
.y-cos-s {
  color: var(--y-ink-soft);
}
/* Tamamlanmış adım: hâlâ beyaz ama sakin — iş bitti, dikkat çekmesin */
.y-cos.is-done {
  box-shadow: none;
  border-color: rgba(94, 107, 51, 0.3);
  background: #FDFCF9;
}
.y-cos.is-done .y-cos-n {
  background: var(--y-olive);
  box-shadow: none;
}
/* Kilitli adım: yükselmez, zemine gömülür */
.y-co-lock {
  opacity: 1;
}
/* soluklaştırma yerine yapısal fark */
.y-co-lock .y-cos {
  background: transparent;
  border: 1px dashed rgba(40, 30, 18, 0.22);
  box-shadow: none;
}
.y-co-lock .y-cos-n {
  background: transparent;
  color: var(--y-ink-soft);
  border: 1px dashed rgba(40, 30, 18, 0.3);
  box-shadow: none;
}
.y-co-lock .y-cos-t {
  color: var(--y-ink-soft);
}
.y-co-lock .y-cos-wait {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(40, 30, 18, 0.08);
}
/* Aktif kartın içindeki alanlar beyaz zeminde bir ton koyu → alan olduğu belli */
.y-cos .form-control, .y-cos .form-select {
  background-color: var(--y-field);
  border-color: var(--y-field-brd);
  border-radius: 10px;
  padding: 14px 16px;
}
.y-cos .form-control:focus, .y-cos .form-select:focus {
  background-color: #fff;
}
.y-cof-l {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--y-ink);
  opacity: 0.72;
}
/* Seçenek ve adres kartları beyaz kartın İÇİNDE; onlar da bir ton ayrılmalı */
.y-opt-i, .y-adr-in {
  background: var(--y-field);
  border-color: var(--y-field-brd);
}
.y-opt-i.is-on, .y-adr-c input:checked + .y-adr-in {
  background: #fff;
}
/* ---------- Sipariş özeti: koyu → parşömen ----------
   Eski hâli #14100B idi; sayfa zeminine karşı 18.30:1 ile aşırı sertti ve
   ürün fotoğrafları o zeminde kayboluyordu. Ayrıca kırmızı onay düğmesi koyu
   zeminde yalnızca 2.58:1 kontrast alıyor, yani AKTİF olduğu hâlde pasif
   okunuyordu. Açık zeminde aynı düğme 6.75:1 — tereddütsüz aktif. */
.y-sum {
  background: linear-gradient(180deg, #FFFDF8, #FBF5E9);
  color: var(--y-ink);
  border: 1px solid rgba(196, 160, 82, 0.42);
  border-radius: 16px;
  box-shadow: 0 14px 40px -24px rgba(60, 40, 15, 0.55);
  padding: 22px 24px 22px;
}
.y-sum-h {
  border-bottom: 1px solid rgba(40, 30, 18, 0.1);
}
.y-sum-t {
  color: var(--y-ink);
}
.y-sum-edit {
  color: var(--y-red);
}
.y-sum-edit:hover {
  color: var(--y-red-deep);
}
.y-sum-nm {
  color: var(--y-ink);
}
a.y-sum-nm:hover {
  color: var(--y-red);
}
.y-sum-op {
  color: var(--y-ink-soft);
}
.y-sum-p {
  color: var(--y-ink);
}
.y-sum-im {
  background: var(--y-shot);
  border: 1px solid rgba(40, 30, 18, 0.08);
  border-radius: 9px;
}
.y-sum-tot {
  border-top: 1px solid rgba(40, 30, 18, 0.1);
}
.y-sum-r {
  color: var(--y-ink-soft);
}
.y-sum-r b {
  color: var(--y-ink);
}
.y-sum-r.is-grand {
  border-top: 1px solid rgba(40, 30, 18, 0.1);
  color: var(--y-ink);
}
.y-sum-r.is-grand b {
  color: var(--y-red);
  font-size: 25px;
}
.y-sum-wait {
  color: var(--y-ink-soft);
  background: rgba(40, 30, 18, 0.045);
  border-radius: 9px;
  padding: 11px 13px;
  align-items: flex-start;
}
.y-sum-wait svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.y-sum-trust {
  color: var(--y-ink-soft);
  border-top: 1px solid rgba(40, 30, 18, 0.08);
  padding-top: 13px;
}
/* Pasif onay düğmesi: kırmızının soluğu değil, apayrı bir görünüm.
   Böylece "kırmızı ama sönük" ikircikliği kalkar. */
.y-sum-go .y-cob:disabled {
  background: transparent;
  color: var(--y-ink-soft);
  border: 1px solid rgba(40, 30, 18, 0.2);
  box-shadow: none;
  opacity: 1;
}
.y-sum-go .btn-primary {
  box-shadow: 0 12px 26px -14px rgba(168, 29, 34, 0.75);
}
@media (max-width: 991px) {
  .y-co {
    padding-top: 18px;
  }
  .y-cos {
    padding: 20px 18px;
  }
  .y-sum {
    padding: 0 18px 18px;
  }
  .y-sum::before {
    margin: 0 -18px 16px;
  }
}
/* ==========================================================================
   ADIM ŞERİDİ — yeniden tasarım
   --------------------------------------------------------------------------
   Önceki hâli "daire + rakam + kısa çizgi" idi: her hazır arayüz kitaplığında
   bulunan jenerik stepper. Yerine markanın KENDİ diline dayanan bir şerit:

     · Kavan etiketi gibi çift altın filet (üstte kalın+ince, altta ince+kalın)
     · Adımlar arası ✦ (\2726) — menüdeki ayracın AYNISI, yeni motif icat edilmedi
     · Aktif adımın altında büyüyen altın çizgi — menü bağlantılarının
       :hover göstergesinin aynısı, yani site içi tutarlı bir "buradasınız" dili
     · Rakamlar Fraunces (başlık yazı tipi) — daire içinde küçük sans değil

   Sınıf adları JS ile paylaşıldığı için DEĞİŞTİRİLMEDİ (.y-co-rail-i, is-on,
   is-done, data-rail); yalnızca sunum yeniden yazıldı.
   ========================================================================== */
.y-co-rail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 15px 2px 14px;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--y-gold-line) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--y-gold-line) 55%, transparent);
  justify-content: center;
}
/* Etiket kenarı hissi veren ikinci, daha ince filetler */
.y-co-rail::before, .y-co-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--y-gold-line) 24%, transparent);
}
.y-co-rail::before {
  top: 3px;
}
.y-co-rail::after {
  bottom: 3px;
}
.y-co-rail-i {
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: relative;
  padding: 0;
  margin: 0 26px 0 0;
  opacity: 1;
  color: var(--y-ink-soft);
  transition: color 0.25s;
}
.y-co-rail-i:last-child {
  margin-right: 0;
}
/* Ayraç: menüdekiyle birebir aynı glif ve renk */
.y-co-rail-i + .y-co-rail-i::before {
  content: "✦";
  color: var(--y-gold-line);
  font-size: 8px;
  opacity: 0.9;
  margin-right: 26px;
  position: static;
  width: auto;
  height: auto;
  background: none;
  align-self: center;
  flex: 0 0 auto;
}
/* Rakam: başlık yazı tipiyle, daire yok */
.y-co-rail-n {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--y-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--y-ink-soft);
  opacity: 0.5;
  transition: color 0.25s, opacity 0.25s;
}
.y-co-rail-t {
  position: relative;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10px;
  white-space: nowrap;
  padding-bottom: 3px;
}
/* Aktif göstergesi: menü bağlantılarındaki büyüyen altın çizginin aynısı */
.y-co-rail-t::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 0;
  background: var(--y-gold);
  transition: width 0.3s ease;
}
/* --- Durumlar --- */
.y-co-rail-i.is-on {
  color: var(--y-ink);
}
.y-co-rail-i.is-on .y-co-rail-n {
  color: var(--y-red);
  opacity: 1;
}
.y-co-rail-i.is-on .y-co-rail-t::after {
  width: 100%;
}
.y-co-rail-i.is-done {
  color: var(--y-ink-soft);
}
.y-co-rail-i.is-done .y-co-rail-n {
  color: var(--y-olive);
  opacity: 1;
  font-size: 0;
}
.y-co-rail-i.is-done .y-co-rail-n::before {
  content: "✓";
  font-family: var(--y-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 991px) {
  .y-co-rail {
    padding: 13px 2px 12px;
  }
  .y-co-rail-i {
    margin-right: 18px;
    gap: 8px;
  }
  .y-co-rail-i + .y-co-rail-i::before {
    margin-right: 18px;
  }
  .y-co-rail-n {
    font-size: 17px;
  }
  .y-co-rail-t {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
}
@media (max-width: 480px) {
  /* Dar ekranda TÜM etiketleri gizlemek yerine yalnız aktif olanı bırak:
     müşteri hangi adımda olduğunu okuyabilsin, geçmiş/gelecek rakamla yetsin. */
  .y-co-rail-i:not(.is-on) .y-co-rail-t {
    display: none;
  }
  .y-co-rail-i {
    margin-right: 14px;
  }
  .y-co-rail-i + .y-co-rail-i::before {
    margin-right: 14px;
  }
}
/* Eski stepper kalıntılarının kapatılması.
   Bunlar yukarıdaki yeni kurallardan DAHA ÖZGÜL olduğu için (.y-co-rail-i.is-on
   .y-co-rail-n = 0,3,0) sırf sonra gelmek yetmiyor; aynı seçiciyle ezilmeleri
   gerekiyor. Aksi hâlde daireler ve kısa çizgi ekranda kalırdı. */
.y-co-rail-i:not(:last-child)::after {
  display: none;
  content: none;
}
.y-co-rail-i.is-on .y-co-rail-n, .y-co-rail-i.is-done .y-co-rail-n {
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  display: inline;
}
.y-co-rail-i.is-on .y-co-rail-n {
  color: var(--y-red);
}
.y-co-rail-i.is-done .y-co-rail-n {
  color: var(--y-olive);
}
@media (max-width: 480px) {
  /* Eski kural tüm etiketleri gizliyordu; aktif olanı geri getir */
  .y-co-rail-i.is-on .y-co-rail-t {
    display: inline-block;
  }
  .y-co-rail-i:not(:last-child)::after {
    display: none;
  }
}
/* Misafir/üyelik seçimi: iki seçenek yan yana (kargo listesi dikey akar) */
.y-opt-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.y-opt-2 .y-opt-i {
  align-items: flex-start;
}
.y-opt-2 .y-opt-dot {
  margin-top: 2px;
}
.y-reg-login {
  font-size: 13px;
  color: var(--y-ink-soft);
  margin: 14px 0 4px;
  line-height: 1.55;
}
.y-reg-login a {
  color: var(--y-red);
  text-decoration: underline;
}
.y-reg-login a:hover {
  color: var(--y-red-deep);
}
/* Bölüm başlıkları arasında nefes payı */
.y-cof .y-cof-h {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--y-line);
}
.y-cof > .y-cof-h:first-of-type {
  margin-top: 0;
}
@media (max-width: 600px) {
  .y-opt-2 {
    grid-template-columns: 1fr;
  }
}
/* Yasal sayfalarda doldurulmayı bekleyen alanlar — göze batsın ki canlıya
   çıkarken gözden kaçmasın. Bilgiler girilince <mark> etiketleri kaldırılır. */
.y-rte .y-todo {
  background: #FFF3CD;
  color: #7A5B00;
  border: 1px dashed #D9AF3C;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 0.88em;
  font-style: normal;
}
.y-rte-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: 14.5px;
}
.y-rte-tbl th, .y-rte-tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--y-line);
  text-align: left;
  vertical-align: top;
}
.y-rte-tbl th {
  width: 190px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: var(--y-ink-soft);
  font-weight: 400;
}
.y-rte ol {
  padding-left: 20px;
  margin: 0 0 18px;
}
.y-rte ol li {
  margin-bottom: 8px;
  line-height: 1.65;
}
@media (max-width: 600px) {
  .y-rte-tbl, .y-rte-tbl tbody, .y-rte-tbl tr, .y-rte-tbl th, .y-rte-tbl td {
    display: block;
    width: auto;
  }
  .y-rte-tbl th {
    border: 0;
    padding-bottom: 2px;
  }
  .y-rte-tbl td {
    padding-top: 0;
    padding-bottom: 14px;
  }
}
/* ==========================================================================
   SİPARİŞ ONAY SAYFASI
   --------------------------------------------------------------------------
   Ödeme sayfasıyla aynı yüzey dili (parşömen zemin + beyaz kart) kullanılıyor;
   müşteri onay adımından buraya geçtiğinde başka bir siteye düşmüş hissetmesin.
   ========================================================================== */
.y-ok {
  background: var(--y-ground);
  padding: 26px 0 70px;
}
.y-ok .breadcrumb {
  margin-bottom: 24px;
}
.y-ok-top {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 34px;
}
.y-ok-seal {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--y-olive);
  color: #fff;
  box-shadow: 0 14px 32px -16px rgba(94, 107, 51, 0.9);
}
.y-ok-seal svg {
  width: 28px;
  height: 28px;
}
.y-ok-title {
  font-family: var(--y-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 12px;
  line-height: 1.15;
  text-wrap: balance;
}
.y-ok-lede {
  font-size: 14.5px;
  color: var(--y-ink-soft);
  margin: 0;
  line-height: 1.6;
}
.y-ok-lede b {
  color: var(--y-ink);
  font-weight: 500;
}
.y-ok-no {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  padding: 12px 22px;
  background: #fff;
  border: 1px solid rgba(196, 160, 82, 0.45);
  border-radius: 12px;
  box-shadow: 0 6px 20px -14px rgba(60, 40, 15, 0.5);
}
.y-ok-no-l {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
}
.y-ok-no-v {
  font-family: var(--y-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--y-red);
}
.y-ok-no-d {
  font-size: 12.5px;
  color: var(--y-ink-soft);
  padding-left: 12px;
  border-left: 1px solid var(--y-line);
}
/* Durum çizelgesi */
.y-ok-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  position: relative;
}
.y-ok-rail-i {
  position: relative;
  padding: 0 10px;
  text-align: center;
  color: var(--y-ink-soft);
  opacity: 0.5;
}
.y-ok-rail-i::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 50%;
  height: 2px;
  background: var(--y-line);
}
.y-ok-rail-i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  right: 0;
  height: 2px;
  background: var(--y-line);
}
.y-ok-rail-i:first-child::before, .y-ok-rail-i:last-child::after {
  display: none;
}
.y-ok-rail-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 14px;
  height: 14px;
  margin: 2px auto 12px;
  border-radius: 50%;
  background: var(--y-page);
  border: 2px solid var(--y-line);
  transition: all 0.25s;
}
.y-ok-rail-t {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  margin-bottom: 5px;
}
.y-ok-rail-d {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--y-ink-soft);
}
.y-ok-rail-i.is-done {
  opacity: 1;
}
.y-ok-rail-i.is-done .y-ok-rail-dot {
  background: var(--y-olive);
  border-color: var(--y-olive);
}
.y-ok-rail-i.is-done::before, .y-ok-rail-i.is-done::after {
  background: var(--y-olive);
}
.y-ok-rail-i.is-on {
  opacity: 1;
  color: var(--y-ink);
}
.y-ok-rail-i.is-on .y-ok-rail-dot {
  background: var(--y-red);
  border-color: var(--y-red);
  box-shadow: 0 0 0 5px rgba(168, 29, 34, 0.16);
}
.y-ok-rail-i.is-on::before {
  background: var(--y-olive);
}
/* Kartlar */
.y-ok-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.y-ok-card {
  background: #fff;
  border: 1px solid rgba(40, 30, 18, 0.1);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 6px 26px -16px rgba(60, 40, 15, 0.5);
}
.y-ok-card-sm {
  padding: 20px 22px;
}
.y-ok-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.y-ok-h {
  font-family: var(--y-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--y-ink);
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--y-line);
}
.y-ok-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.y-ok-i {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.y-ok-im {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--y-shot);
  border: 1px solid rgba(40, 30, 18, 0.08);
  display: grid;
  place-items: center;
}
.y-ok-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.y-ok-im-gift {
  color: var(--y-ink-soft);
  background: var(--y-tile);
}
.y-ok-q {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 20px;
  background: var(--y-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  line-height: 1;
}
.y-ok-tx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.y-ok-nm {
  font-size: 14.5px;
  color: var(--y-ink);
  text-decoration: none;
  line-height: 1.4;
}
a.y-ok-nm:hover {
  color: var(--y-red);
}
.y-ok-op {
  font-size: 12px;
  color: var(--y-ink-soft);
  line-height: 1.45;
}
.y-ok-p {
  font-family: var(--y-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--y-ink);
  flex: 0 0 auto;
  white-space: nowrap;
}
.y-ok-tot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--y-line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.y-ok-r {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--y-ink-soft);
}
.y-ok-r b {
  font-weight: 500;
  color: var(--y-ink);
}
.y-ok-r.is-grand {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--y-line);
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11px;
  color: var(--y-ink);
}
.y-ok-r.is-grand b {
  font-family: var(--y-serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--y-red);
}
.y-ok-addr {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
  color: var(--y-ink-soft);
  line-height: 1.55;
}
.y-ok-addr b {
  color: var(--y-ink);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.y-ok-meta {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--y-line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.y-ok-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.y-ok-meta dt {
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  flex: 0 0 auto;
}
.y-ok-meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--y-ink);
  text-align: right;
}
.y-ok-note {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--y-tile);
  border-radius: 9px;
}
.y-ok-note-l {
  display: block;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 9.5px;
  color: var(--y-ink-soft);
  margin-bottom: 5px;
}
.y-ok-note p {
  margin: 0;
  font-size: 13px;
  color: var(--y-ink);
  line-height: 1.55;
}
.y-ok-help-tx {
  font-size: 13px;
  color: var(--y-ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}
.y-ok-help-a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--y-ink);
  text-decoration: none;
  border-top: 1px solid var(--y-line);
}
.y-ok-help-a:first-of-type {
  border-top: 0;
}
.y-ok-help-a svg {
  color: var(--y-gold);
  flex: 0 0 auto;
}
.y-ok-help-a:hover {
  color: var(--y-red);
}
.y-ok-help-a:hover svg {
  color: var(--y-red);
}
.y-ok-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.y-ok-seal-tx {
  text-align: center;
  margin: 26px 0 0;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 9px;
  color: var(--y-ink-soft);
  opacity: 0.7;
}
@media (max-width: 991px) {
  /* Dar ekranda çizelge dikeyleşir: noktalar solda, çizgi dikey akar */
  .y-ok-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .y-ok-card {
    padding: 20px 18px;
  }
  .y-ok-rail {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 28px;
  }
  .y-ok-rail-i {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0 14px;
    text-align: left;
    padding: 0 0 18px;
  }
  .y-ok-rail-i::before {
    top: 0;
    bottom: auto;
    left: 9px;
    right: auto;
    width: 2px;
    height: 12px;
  }
  .y-ok-rail-i::after {
    top: 12px;
    left: 9px;
    right: auto;
    width: 2px;
    height: calc(100% - 12px);
  }
  .y-ok-rail-i:last-child::after {
    display: none;
  }
  .y-ok-rail-dot {
    margin: 10px 0 0;
    grid-row: 1 / span 2;
    align-self: start;
  }
  .y-ok-rail-t {
    grid-column: 2;
    margin: 8px 0 4px;
  }
  .y-ok-rail-d {
    grid-column: 2;
  }
  .y-ok-no {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .y-ok-no-d {
    padding-left: 0;
    border-left: 0;
    width: 100%;
    text-align: center;
  }
  .y-ok-cta .y-cob {
    width: 100%;
  }
}
/* ==========================================================================
   ÇEREZ BİLDİRİMİ
   --------------------------------------------------------------------------
   Çekirdek sürüm koyu gri bir şerit + Bootstrap mavisi düğme basıyordu; sitenin
   dilinin tamamen dışındaydı. Alt bilgi ile aynı koyu zemin ve altın filet.
   ========================================================================== */
.y-ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background: var(--y-brine);
  border-top: 1px solid rgba(196, 160, 82, 0.4);
  box-shadow: 0 -14px 40px -22px rgba(0, 0, 0, 0.7);
  animation: y-ck-up 0.45s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
@keyframes y-ck-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .y-ck {
    animation: none;
  }
}
.y-ck-in {
  max-width: 1220px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.y-ck-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(196, 160, 82, 0.14);
  color: var(--y-gold-bright);
}
.y-ck-ic svg {
  width: 19px;
  height: 19px;
}
.y-ck-tx {
  flex: 1 1 340px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.82);
}
.y-ck-tx a {
  color: var(--y-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.y-ck-tx a:hover {
  color: #000;
}
.y-ck-btns {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.y-ck-b {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 10px 22px;
  font-family: var(--y-caps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.y-ck-b-solid {
  background: var(--y-red);
  color: #fff;
}
.y-ck-b-solid:hover {
  background: var(--y-red-deep);
  color: #fff;
  transform: translateY(-1px);
}
.y-ck-b-ghost {
  background: transparent;
  color: rgb(0 0 0);
  border-color: rgba(196, 160, 82, 0.34);
}
.y-ck-b-ghost:hover {
  border-color: var(--y-gold-line);
}
@media (max-width: 600px) {
  .y-ck-in {
    padding: 14px 16px;
    gap: 12px;
  }
  .y-ck-ic {
    display: none;
  }
  .y-ck-btns {
    width: 100%;
  }
  .y-ck-b {
    flex: 1 1 0;
    padding: 11px 12px;
  }
}
/* Mobilde ürün kartları HER ZAMAN iki sütun.
   Bootstrap'ın `row-cols-2` kuralı bunu zaten sağlıyor, ancak o kural `.col` ile
   AYNI özgüllükte ve yalnızca dosyada sonra geldiği için kazanıyor. Bootstrap
   sürümü değişirse ya da sıralama bozulursa ızgara sessizce tek sütuna düşer.
   Kategori, arama, marka ve kampanya listelerinin hepsi #product-list kullanıyor. */
@media (max-width: 575px) {
  #product-list {
    display: flex;
    flex-wrap: wrap;
  }
  #product-list > .col {
    flex: 0 0 auto;
    width: 50%;
  }
}
/* Onay sayfası: e-posta gönderilemediğinde. Kırmızı "hata" değil, sarı "bilgi" —
   sipariş başarıyla kaydedildi, sorun yalnızca bildirim gönderiminde. */
.y-ok-warn {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  background: #FFF6E0;
  border: 1px solid #E4C97F;
  border-radius: 11px;
  padding: 13px 17px;
  color: #6E5312;
  max-width: 520px;
  margin: 0 auto;
}
.y-ok-warn svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
/* ==========================================================================
   KATEGORİ — LİSTE GÖRÜNÜMÜ
   --------------------------------------------------------------------------
   Izgara/liste geçişi common.js'te: liste modunda #product-list sınıfı
   `row row-cols-1 product-list` oluyor. `.product-list` bağlamında kart
   YATAY dizilir — görsel solda, bilgi sağda. Bu kural olmadan kart dikey
   kalıp tam genişliğe yayılıyordu (bozuk görünüm).
   ========================================================================== */
#product-list.product-list > .col {
  width: 100%;
}
.product-list .y-card {
  flex-direction: row;
  align-items: stretch;
  border-radius: 16px;
}
.product-list .y-card .imgwrap {
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: auto;
  border-radius: 16px 0 0 16px;
  /* sabit kare yerine kart yüksekliğine uy */
}
.product-list .y-card .body {
  flex: 1;
  padding: 22px 26px;
  justify-content: center;
  gap: 8px;
}
.product-list .y-card h3 {
  font-size: 21px;
}
/* Liste modunda seçenek çipleri ve fiyat/düğme aynı satırda dursun */
.product-list .y-card .opts {
  margin-top: 6px;
}
.product-list .y-card .buy {
  margin-top: 12px;
  justify-content: flex-start;
  gap: 20px;
}
.product-list .y-card .add {
  margin-left: auto;
}
@media (max-width: 640px) {
  /* Dar ekranda liste de dikeyleşir — 240px görsel sığmaz */
  .product-list .y-card {
    flex-direction: column;
  }
  .product-list .y-card .imgwrap {
    flex: none;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px 16px 0 0;
  }
  .product-list .y-card .buy {
    justify-content: space-between;
  }
  .product-list .y-card .add {
    margin-left: 0;
  }
}
/* ==========================================================================
   MOBİL ARAMA — ikona indirgeme
   --------------------------------------------------------------------------
   Masaüstünde arama her zaman açık; .y-search-toggle düğmesi gizli.
   Mobilde (991px altı) arama çubuğu varsayılan KAPALI, düğme .y-utils içinde
   hesap/sepet yanında görünür. Tıklanınca .y-hsearch.is-open ile açılır.
   Not: bu blok bilerek dosyanın sonunda — mevcut header kurallarının (kullanıcı
   revizyonları dahil) üzerine yazmaz, yalnız mobilde ekler/ezer.
   ========================================================================== */
.y-search-toggle {
  display: none;
}
/* masaüstünde yok */
@media (max-width: 991px) {
  /* Düğme: hesap/sepet ikonlarıyla aynı ölçü ve his */
  /* Arama çubuğu: kapalıyken yer kaplamaz, açılınca tam satır iner.
     max-height geçişi yükseklik animasyonu verir; kapalıyken tıklanamaz. */
  .y-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    order: -1;
    border: 0;
    background: transparent;
    color: var(--y-ink);
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.18s, color 0.18s;
  }
  .y-search-toggle:hover, .y-search-toggle[aria-expanded="true"] {
    background: var(--y-tile);
    color: var(--y-red);
  }
  .y-search-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }
  .y-hsearch {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.28s ease;
    margin-top: 0;
  }
  .y-hsearch.is-open {
    max-height: 64px;
    opacity: 1;
    pointer-events: auto;
    margin-top: 2px;
  }
}
/* ==========================================================================
   MOBİL MENÜ — telefon & whatsapp eylem kartları
   --------------------------------------------------------------------------
   Eski sade metin bağlantıları yerine iki dokunmatik kart: yan yana, ne olduğu
   üstte, alt satırda kısa açıklama/numara. Sona eklendi — mevcut .y-off-foot
   kuralının (kullanıcı revizyonları dahil) üzerine yazmaz.
   ========================================================================== */
.y-off-foot {
  flex-direction: row !important;
  gap: 10px !important;
  /* eski dikey akışı yatay ikiliye çevir */
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom)) !important;
}
.y-off-cta {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid var(--y-line);
  background: var(--y-page);
  transition: transform 0.16s, border-color 0.18s, box-shadow 0.18s;
}
.y-off-cta:active {
  transform: scale(0.97);
}
.y-off-cta-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
}
.y-off-cta-ic svg {
  width: 19px;
  height: 19px;
}
.y-off-cta-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.y-off-cta-tx b {
  font-size: 14px;
  font-weight: 600;
  color: var(--y-ink);
}
.y-off-cta-tx em {
  font-style: normal;
  font-size: 11px;
  color: var(--y-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* WhatsApp — yeşil; Telefon — marka kırmızısı */
.y-off-cta-wa .y-off-cta-ic {
  background: #1FA855;
}
.y-off-cta-wa:active, .y-off-cta-wa:hover {
  border-color: #1FA855;
  box-shadow: 0 6px 18px -12px rgba(31, 168, 85, 0.7);
}
.y-off-cta-call .y-off-cta-ic {
  background: var(--y-red);
}
.y-off-cta-call:active, .y-off-cta-call:hover {
  border-color: var(--y-red);
  box-shadow: 0 6px 18px -12px rgba(168, 29, 34, 0.7);
}