/* ==========================================================================
   HK Cat Litter — catlitterhk.com
   01. Fontlar
   02. Tasarım tokenleri
   03. Reset & temel
   04. Yardımcılar
   05. Topbar
   ========================================================================== */

/* ===== 01. FONTLAR ======================================================= */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../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;
}

/* ===== 02. TASARIM TOKENLERİ ============================================ */
:root {
  /* Zeytin yeşili — ana koyu zemin */
  --olive-950: #171C10;
  --olive-900: #1E2416;
  --olive-800: #262E1B;
  --olive-700: #333D24;
  --olive-600: #465433;
  --olive-400: #74855A;
  --olive-200: #B9C4A2;

  /* Turuncu — marka aksanı (logo) */
  --orange: #F26D1F;
  --orange-600: #D9581A;
  --orange-300: #F9A66F;
  --orange-50: #FFF3EC;

  /* Arama alanı zemini — beyaza çok yakın, hafif pembe */
  --field-bg: #FFF9FA;
  --field-bg-focus: #FFFCFC;

  /* Toprak & krem */
  --cream: #FAF7F1;
  --cream-2: #F4EFE5;
  --sand: #E7DCC8;
  --clay: #C4AE8C;

  /* Metin */
  --ink: #1B1F16;
  --ink-2: #4A4F42;
  --muted: #7C8172;
  --on-dark: rgba(250, 247, 241, 0.74);
  --on-dark-strong: #FAF7F1;

  /* Çizgi */
  --line: rgba(27, 31, 22, 0.1);
  --line-dark: rgba(250, 247, 241, 0.14);

  /* Tipografi */
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Tek aile: başlıklar da Jost, yalnız ağırlık ve harf aralığı farklı.
     Token duruyor ki ileride başlık fontu değişmek istenirse tek yerden dönsün. */
  --font-display: var(--font-sans);

  /* Ölçü */
  --wrap: 1280px;
  --gutter: 24px;
  --topbar-h: 40px;
  --hdr-h: 88px;
  --nav-h: 56px;
  /* menü tipografisi — ekran genişliğiyle ölçeklenir, asla alt satıra taşmaz */
  --nav-fs: clamp(14px, 0.434vw + 10.06px, 17.5px);
  --nav-pad: clamp(9px, 0.7vw + 2px, 17px);
  --hero-slant: clamp(34px, 4.2vw, 72px); /* hero'nun açılı + dalgalı tabanı */
  --marq-h: clamp(42px, 3.4vw, 52px);     /* kayan şerit yüksekliği */

  /* Hareket */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.3s;
}

/* ===== 03. RESET & TEMEL ================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ===== 04. YARDIMCILAR ================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.ico { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ===== 05. TOPBAR ======================================================= */
.topbar {
  position: relative;
  background: var(--olive-900);
  color: var(--on-dark);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* üstte ince turuncu marka çizgisi */
.topbar::before {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-300) 38%, var(--olive-400) 100%);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--topbar-h);
}

/* --- sol: kayan duyuru --- */
.ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ticker__pulse {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.ticker__pulse::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--orange);
  opacity: 0;
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { opacity: 0.9; transform: scale(0.6); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}

.ticker__view {
  height: var(--topbar-h);
  overflow: hidden;
  min-width: 0;
}

.ticker__list {
  animation: ticker 13.5s steps(1, end) infinite;
}

.ticker__list li {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticker__list b {
  font-weight: 500;
  color: var(--on-dark-strong);
}

.ticker__sep { color: var(--olive-400); }

@keyframes ticker {
  0%, 30%      { transform: translateY(0); }
  33.3%, 63.3% { transform: translateY(calc(var(--topbar-h) * -1)); }
  66.6%, 96.6% { transform: translateY(calc(var(--topbar-h) * -2)); }
  100%         { transform: translateY(0); }
}

/* --- sağ: mini navigasyon --- */
.topbar__nav {
  display: flex;
  align-items: center;
  flex: none;
}

.topbar__nav > * + *::before {
  content: '';
  display: inline-block;
  width: 1px; height: 13px;
  margin: 0 16px;
  vertical-align: -2px;
  background: var(--line-dark);
}

.tb-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--on-dark);
  transition: color var(--t-fast) var(--ease);
}
.tb-link:hover { color: var(--orange-300); }

.tb-phone { font-weight: 500; color: var(--on-dark-strong); font-variant-numeric: tabular-nums; }
.tb-phone:hover { color: var(--orange-300); }

/* pazaryerleri */
.tb-shops {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.tb-shops__label {
  color: var(--olive-400);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tb-shop {
  position: relative;
  color: var(--on-dark);
  transition: color var(--t-fast) var(--ease);
}
/* hover'da alttan dolan ince çizgi */
.tb-shop::after {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.tb-shop:hover { color: var(--on-dark-strong); }
.tb-shop:hover::after { transform: scaleX(1); }

/* dil seçici — JS'siz, <details> ile */
.tb-lang { position: relative; }
.tb-lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.tb-lang > summary::-webkit-details-marker { display: none; }
.tb-lang > summary:hover { color: var(--orange-300); }
.tb-lang__chev { transition: transform var(--t) var(--ease); }
.tb-lang[open] .tb-lang__chev { transform: rotate(180deg); }

.tb-lang__menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 60;
  min-width: 124px;
  padding: 6px;
  background: var(--olive-800);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}
.tb-lang__menu a {
  display: block;
  padding: 7px 10px;
  color: var(--on-dark);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-lang__menu a:hover { background: var(--olive-700); color: var(--on-dark-strong); }
.tb-lang__menu a[aria-current='true'] { color: var(--orange); }

/* --- mobil --- */
@media (max-width: 960px) {
  .tb-shops, .tb-phone-text { display: none; }
}

@media (max-width: 600px) {
  :root { --topbar-h: 36px; }
  .topbar { font-size: 11.5px; }
  .topbar__inner { gap: 12px; }
  .topbar__nav > * + *::before { margin: 0 12px; }
}

/* ===== 06. HEADER ======================================================= */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* --- üst satır: logo · arama · aksiyonlar --- */
.hdr__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  height: var(--hdr-h);
  transition: height var(--t) var(--ease);
}

.hdr__logo { display: block; flex: none; }
.hdr__logo img {
  width: 186px; height: 56px;
  object-fit: contain;
  transition: width var(--t) var(--ease), height var(--t) var(--ease);
}

/* --- arama --- */
.search { position: relative; max-width: 560px; width: 100%; justify-self: center; }

.search__field {
  display: flex;
  align-items: center;
  height: 48px;
  padding-left: 16px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.search:focus-within .search__field {
  background: var(--field-bg-focus);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 109, 31, 0.13);
}

.search__ico { width: 18px; height: 18px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.search:focus-within .search__ico { color: var(--orange); }

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
}
.search__input::placeholder { color: var(--muted); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__btn {
  height: 100%;
  padding: 0 24px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--olive-800);
  border-radius: 0 2px 2px 0;
  transition: background var(--t-fast) var(--ease);
}
.search__btn:hover { background: var(--orange); }

/* arama paneli */
.search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 60;
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 18px 44px -20px rgba(27, 31, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.search.is-open .search__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.search__head {
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.search__head + .search__head { margin-top: 20px; }

.search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search__chips a {
  padding: 6px 13px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 100px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.search__chips a:hover { color: var(--orange); background: var(--orange-50); border-color: rgba(242,109,31,.3); }

.search__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease);
}
.search__links a:last-child { border-bottom: 0; }
.search__links a:hover { color: var(--orange); }
.search__links svg { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.search__links a:hover svg { opacity: 1; transform: none; }

/* --- sağ aksiyonlar: ikon + etiket + rozet --- */
.acts { display: flex; align-items: center; gap: 30px; }

.act {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.act:hover { color: var(--orange); }

.act__ico { position: relative; display: block; }
.act__ico svg {
  width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}
.act:hover .act__ico svg { transform: translateY(-2px); }

.act__badge {
  position: absolute;
  top: -6px; right: -10px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10.5px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  color: #fff;
  background: var(--olive-700);
  border: 2px solid #fff;
  border-radius: 100px;
}

.act__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.act--cart { color: var(--orange); }
.act--cart .act__badge { background: var(--orange); }
.act--cart .act__label { font-weight: 500; }
.act--cart:hover { color: var(--orange-600); }

/* --- ana menü satırı --- */
.mainnav { position: relative; border-top: 1px solid var(--line); background: #fff; }
.mainnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

.mainnav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
}

.mainnav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: var(--nav-h);
  padding: 0 var(--nav-pad);
  font-size: var(--nav-fs);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.mainnav__link::after {
  content: '';
  position: absolute; left: var(--nav-pad); right: var(--nav-pad); bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.mainnav__link:hover { color: var(--orange); }
.mainnav__link:hover::after,
.mainnav__link[aria-current='page']::after { transform: scaleX(1); }
.mainnav__link[aria-current='page'] { color: var(--orange); }

.mainnav__chev { width: 13px; height: 13px; stroke-width: 2; transition: transform var(--t) var(--ease); }
.has-mega:hover .mainnav__chev,
.has-mega:focus-within .mainnav__chev,
.has-mega.is-open .mainnav__chev { transform: rotate(180deg); }

/* sağdaki vurgu rozeti */
/* Havale indirimi rozeti — düz yazıydı, gözden kaçıyordu.
   Yumuşak turuncu hap + içinde dolu bir oran rozeti: belirgin ama sakin. */
.mainnav__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 5px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(242, 109, 31, 0.26);
  background: linear-gradient(180deg, #FFF6EF 0%, var(--orange-50) 100%);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--olive-800);
  white-space: nowrap;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.mainnav__note:hover {
  border-color: rgba(242, 109, 31, 0.5);
  box-shadow: 0 6px 16px -10px rgba(242, 109, 31, 0.9);
}
.mainnav__note b {
  padding: 5px 11px 6px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 5px 11px -5px rgba(217, 88, 26, 0.95);
}
.mainnav__note svg { width: 16px; height: 16px; stroke: var(--orange-600); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- mega menü --- */
.has-mega { position: static; }

.mega {
  position: absolute;
  top: calc(100% + 9px);
  /* kutulu: wrap ile aynı hizada, kenardan kenara değil */
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  z-index: 40;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  /* buzlu cam: altındaki hero/bölüm bulanık geçiyor.
     %88 opaklık, koyu hero'nun üstünde bile yazıyı taşıyacak kadar. */
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 34px 64px -30px rgba(23, 28, 16, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
/* Açık hâl — her tetikleyici kendi kuralında dursun ki biri
   desteklenmezse (seçici grubu tümden düşer) diğerleri çalışsın. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mega { background: #fff; border-color: var(--line); }
}

.has-mega.is-open > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.has-mega:hover > .mega   { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.has-mega:focus-within > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.mega > .wrap { max-width: none; padding-inline: 0; }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 320px;
  gap: 0;
  padding: clamp(22px, 2.2vw, 30px);
}
.mega__col { padding-inline: clamp(16px, 1.8vw, 28px); border-left: 1px solid rgba(27, 31, 22, 0.12); }
.mega__col:first-child { padding-left: 0; border-left: 0; }

.mega__title {
  margin-bottom: 14px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mega__title span { display: block; margin-top: 3px; font-family: var(--font-sans);
  font-size: 12px; font-weight: 400; color: var(--ink-2); letter-spacing: 0.02em; }

/* Ürün menüsünde tam ürün adları sütun genişliğine göre bir ya da iki satır
   oluyor; iki satırlık yer ayrılmazsa paket listeleri sütunlar arasında kayıyor.
   Rehber menüsünde başlıklar kısa, orada bu boşluk gereksiz. */
.mega--urun .mega__title { min-height: 4.1em; }

.mega__links li + li { margin-top: 2px; }
.mega__links a {
  display: block;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease), padding-left var(--t) var(--ease);
}
.mega__links a:hover { color: var(--orange); padding-left: 7px; }

.mega__all {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  font-size: 13.5px; font-weight: 600;
  color: var(--olive-800);
  transition: color var(--t-fast) var(--ease);
}
.mega__all svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.mega__all:hover { color: var(--orange); }
.mega__all:hover svg { transform: translateX(4px); }

/* mega öne çıkan */
.mega__feat {
  position: relative;
  display: block;
  padding: 24px 26px 26px;
  border-radius: 15px;
  background: var(--olive-900);
  color: var(--on-dark);
  overflow: hidden;
}
.mega__feat::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(242,109,31,.28), transparent 62%);
  pointer-events: none;
}
.mega__feat-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--olive-900); background: var(--orange); border-radius: 2px;
}
.mega__feat h4, .mega__feat-bas {
  position: relative; z-index: 1;
  margin: 1.33em 0; /* SEO: başlık etiketi değil (sayfada h1'den önce başlık olmasın); h4'ün varsayılan boşluğu korunur */
  font-size: 21px; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.24; color: var(--on-dark-strong);
}
.mega__feat p { position: relative; z-index: 1; margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; }
.mega__feat-go {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-size: 13.5px; font-weight: 600; color: var(--orange-300);
}
.mega__feat-go svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.mega__feat:hover .mega__feat-go svg { transform: translateX(4px); }

/* --- kompakt (aşağı kaydırınca) --- */
.hdr.is-stuck .hdr__row { height: 64px; }
.hdr.is-stuck .hdr__logo img { width: 146px; height: 44px; }

/* --- mobil tetikleyiciler (masaüstünde gizli) --- */
.hdr__mobile { display: none; }

/* --- duyarlı --- */
@media (max-width: 1180px) {
  .hdr__row { gap: 24px; }
  .acts { gap: 22px; }
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 280px; }
  .mega__col { padding-inline: 22px; }
}

@media (max-width: 1024px) {
  .mainnav__note { display: none; }
}

@media (max-width: 900px) {
  :root { --hdr-h: 68px; }
  .hdr__row { grid-template-columns: auto 1fr; gap: 16px; }
  .hdr__logo img { width: 150px; height: 45px; }
  .search { display: none; }
  .mainnav { display: none; }
  .acts { gap: 18px; justify-self: end; }
  .act__label { display: none; }
  .act--fav { display: none; }
  .hdr__mobile { display: flex; align-items: center; gap: 18px; }
  .hdr.is-stuck .hdr__row { height: 58px; }
  .hdr.is-stuck .hdr__logo img { width: 132px; height: 40px; }
}


/* ===== 06c'. BÖLÜM BAŞLIĞI (ortak) ================================= */
/* --- bölüm başlığı --- */
.bolum-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(30px, 3.4vw, 52px);
}
.bolum-bas__sol { max-width: 680px; }

.bolum-bas__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-600);
}
.bolum-bas__eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--orange); }

.bolum-bas h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.bolum-bas p {
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  max-width: 56ch;
  font-size: clamp(14.5px, 1vw, 16.5px);
  line-height: 1.66;
  color: var(--ink-2);
}

.bolum-bas__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--olive-700);
  border-bottom: 1px solid rgba(27, 31, 22, 0.2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bolum-bas__link svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.9;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease); }
.bolum-bas__link:hover { color: var(--orange); border-color: var(--orange); }
.bolum-bas__link:hover svg { transform: translateX(5px); }
@media (max-width: 620px) {
  .bolum-bas { display: block; }
  .bolum-bas__link { margin-top: 20px; }
}

/* ===== 06d. ÜRÜNLER — 3 sekme, 12 paket =============================== */
.urunler {
  position: relative;
  padding: clamp(56px, 6vw, 100px) 0 clamp(60px, 6.5vw, 108px);
  background: #fff;
}
/* krem gövdenin üstünde beyaz alanın sınırı belli olsun */
.urunler::before,
.urunler::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27, 31, 22, 0.12) 22%, rgba(27, 31, 22, 0.12) 78%, transparent);
}
.urunler::before { top: 0; }
.urunler::after { bottom: 0; }

/* --- ortalanmış bölüm başlığı --- */
.bolum-bas--orta {
  display: block;
  text-align: center;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.bolum-bas--orta .bolum-bas__eyebrow { justify-content: center; font-size: 12.5px; }
/* ortalıyken tek taraflı çizgi dengesiz duruyor: iki yana da koy */
.bolum-bas--orta .bolum-bas__eyebrow::after {
  content: '';
  width: 26px; height: 1px;
  background: var(--orange);
}
.bolum-bas--orta h2 { max-width: 20ch; margin-inline: auto; }
.bolum-bas--orta p {
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.68;
  color: var(--ink-2);
}

/* --- sekmeler: ayrı ayrı düğmeler, ortalı --- */
.urunler__radyo { position: absolute; }

.sekme {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(14px, 1.5vw, 20px);
}

.sekme__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px clamp(18px, 1.8vw, 30px);
  border: 1px solid rgba(27, 31, 22, 0.17);
  border-radius: 999px;
  background: #fff;
  font-size: clamp(14.5px, 1vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sekme__btn:hover { color: var(--ink); border-color: var(--clay); }

.sekme__btn b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cream-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

#usk1:checked ~ .sekme label[for="usk1"],
#usk2:checked ~ .sekme label[for="usk2"],
#usk3:checked ~ .sekme label[for="usk3"] {
  background: var(--olive-900);
  border-color: var(--olive-900);
  color: var(--on-dark-strong);
}
#usk1:checked ~ .sekme label[for="usk1"] b,
#usk2:checked ~ .sekme label[for="usk2"] b,
#usk3:checked ~ .sekme label[for="usk3"] b {
  background: var(--orange);
  color: #fff;
}

#usk1:focus-visible ~ .sekme label[for="usk1"],
#usk2:focus-visible ~ .sekme label[for="usk2"],
#usk3:focus-visible ~ .sekme label[for="usk3"] {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* --- panel --- */
.uk-grid { display: none; }
#usk1:checked ~ .uk-grid[data-k="1"],
#usk2:checked ~ .uk-grid[data-k="2"],
#usk3:checked ~ .uk-grid[data-k="3"] { display: block; }

.uk-grid__not {
  max-width: 60ch;
  margin: 0 auto clamp(22px, 2.4vw, 34px);
  text-align: center;
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.6;
  color: var(--ink-2);
}

.uk-grid__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
}

/* --- kart --- */
.uk {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  /* kart koyu zeminli bölümlerde de kullanılıyor (bkz. .ayin): metin rengini
     bağlamdan miras almasın, yoksa beyaz kartta krem yazı kayboluyor */
  color: var(--ink);
  border: 1px solid rgba(27, 31, 22, 0.13);
  border-radius: 18px;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.uk:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 109, 31, 0.4);
  box-shadow: 0 22px 44px -26px rgba(23, 28, 16, 0.55);
}

/* sekme değişince kartlar sırayla girsin */
.uk-grid__liste .uk { animation: ukGir 0.46s var(--ease) both; }
.uk-grid__liste .uk:nth-child(2) { animation-delay: 0.05s; }
.uk-grid__liste .uk:nth-child(3) { animation-delay: 0.1s; }
.uk-grid__liste .uk:nth-child(4) { animation-delay: 0.15s; }
@keyframes ukGir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* görsel alanı — beyaz, ürün taban gölgesiyle oturuyor */
.uk__gorsel {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px) clamp(20px, 2vw, 28px);
  border-radius: 17px 17px 0 0;
  overflow: hidden;
  background: #fff;
}
.uk__kutu {
  position: relative;
  width: 100%;
  height: 100%;
}
/* ürünün altındaki elips: genişliği kartın --gw değeriyle ürüne göre ayarlı */
.uk__golge {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: var(--gw, 60%);
  height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(23, 28, 16, 0.3), rgba(23, 28, 16, 0) 70%);
  transition: width var(--t) var(--ease), opacity var(--t) var(--ease);
}
.uk__kutu img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.46s var(--ease);
}
.uk:hover .uk__kutu img { transform: translateY(-8px) scale(1.035); }
.uk:hover .uk__golge { width: calc(var(--gw, 60%) * 1.09); opacity: 0.62; }

.uk__rozet {
  position: absolute;
  z-index: 2;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 11px 7px;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px -9px rgba(217, 88, 26, 0.95);
}
.uk__rozet b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }

/* sağ üstteki hızlı eylem rayı */
.uk__ray {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: grid;
  gap: 6px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.uk:hover .uk__ray,
.uk:focus-within .uk__ray { opacity: 1; transform: none; }

.uk__ikon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.uk__ikon svg {
  width: 17px; height: 17px;
  stroke: var(--olive-700); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-fast) var(--ease);
}
.uk__ikon:hover { background: var(--olive-900); border-color: var(--olive-900); }
.uk__ikon:hover svg { stroke: var(--on-dark-strong); }

/* gövde */
.uk__govde {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(15px, 1.4vw, 19px) clamp(15px, 1.4vw, 19px) clamp(16px, 1.5vw, 19px);
  border-top: 1px solid var(--line);
}

.uk__ust {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive-600);
}
.uk__ust span { margin: 0 6px; color: var(--clay); }

.uk__ad {
  margin: 0;
  font-size: clamp(16.5px, 1.25vw, 19.5px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.022em;
}
.uk__ad a { transition: color var(--t-fast) var(--ease); }
.uk__ad a:hover { color: var(--orange); }
/* kartın her yerinden ürüne gidilsin, ama düğmeler üstte kalsın */
.uk__ad a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.uk__etiket {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}
.uk__etiket li {
  padding: 4px 9px 5px;
  border-radius: 6px;
  background: var(--cream-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--olive-700);
}

.uk__fiyat { margin-top: auto; padding-top: 16px; }

.uk__ilk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0 0 3px;
}
.uk__ilk s {
  font-size: 14.5px;
  color: var(--muted);
  text-decoration-thickness: 1px;
}
.uk__kazanc {
  padding: 3px 8px 4px;
  border-radius: 6px;
  background: var(--orange-50);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange-600);
}

.uk__son {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
}
.uk__son strong {
  font-size: clamp(22px, 1.75vw, 27px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.uk__birim {
  font-size: 13.5px;
  color: var(--ink-2);
}

.uk__alt {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.uk__sepet {
  position: relative;
  z-index: 2;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 12px;
  border-radius: 11px;
  background: var(--olive-900);
  color: var(--on-dark-strong);
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.uk__sepet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: translateX(-101%);
  transition: transform 0.36s var(--ease);
}
.uk__sepet svg {
  position: relative;
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 1.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.uk__sepet span { position: relative; }
.uk__sepet:hover::before { transform: none; }

.uk__git {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 11px;
  border: 1px solid rgba(27, 31, 22, 0.14);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.uk__git svg {
  width: 18px; height: 18px;
  stroke: var(--olive-700); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}
.uk__git:hover { background: var(--cream-2); border-color: var(--clay); }
.uk__git:hover svg { transform: translateX(3px); }

/* --- ızgaranın altı: tümünü gör + havale notu --- */
.urunler__alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 3vw, 44px);
}

.urunler__tum {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 30px;
  border: 1px solid rgba(27, 31, 22, 0.18);
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.urunler__tum svg {
  width: 17px; height: 17px;
  stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}
.urunler__tum:hover {
  background: var(--olive-900);
  border-color: var(--olive-900);
  color: var(--on-dark-strong);
}
.urunler__tum:hover svg { transform: translateX(5px); }

/* --- duyarlı --- */
/* Dört sütunlu masaüstünde bazı ürün adları iki satıra iniyor; iki satırlık yer
   ayırınca etiket şeritleri de hizalı kalıyor. İki sütunlu düzende adlar tek
   satır olduğu için bu ayırma orada kapalı. */
@media (min-width: 1001px) {
  .uk__ad { min-height: 2.6em; }
}

/* 4 ürün var: üç sütunda dördüncüsü tek başına alt satıra düşerdi.
   Bu yüzden ara kademe yok, doğrudan 4 → 2 sütun. */
@media (max-width: 1000px) {
  .uk-grid__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .uk__govde { padding: 13px 13px 14px; }
  /* dar kartta ürün fotoğrafı asıl iş: kutuyu kareye çevirince paket büyüyor */
  .uk__gorsel { aspect-ratio: 1 / 1; padding-bottom: 22px; }
  /* üç çip dar karta yan yana sığmıyor, alt alta düşünce kart şişiyordu:
     mobilde çipleri tek satırlık özellik yazısına çeviriyoruz */
  .uk__etiket { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
  .uk__etiket li {
    display: inline;
    padding: 0;
    background: none;
    font-size: inherit;
    color: inherit;
  }
  .uk__etiket li + li::before { content: ' · '; color: var(--clay); }
  /* dar kartta "ZEYTİN ÇEKİRDEĞİ · 15 LİTRE" iki satıra iniyor, "ÇAM PELET · 10 KG"
     inmiyor; iki satırlık yer ayırınca yan yana kartların başlıkları hizalı kalıyor */
  .uk__ust { min-height: 3.2em; font-size: 12px; }
  .uk__ilk s { font-size: 13.5px; }
  .uk__birim { font-size: 13px; }
  /* dar kartta ok düğmesi ile kazanç rozetine yer yok; kartın tamamı zaten
     ürün bağlantısı, indirim oranı da görselin üstündeki rozette yazıyor */
  .uk__git { display: none; }
  .uk__kazanc { display: none; }
  .uk__sepet { height: 44px; font-size: 14.5px; gap: 7px; }
  .sekme { gap: 8px; }
  .sekme__btn { padding: 11px 16px; gap: 7px; font-size: 14px; }
  .sekme__btn b { display: none; }
}

@media (max-width: 430px) {
  .uk__ray { display: none; }
  /* üç sekme tek satırda kalsın */
  .sekme { gap: 6px; }
  .sekme__btn { padding: 10px 13px; font-size: 13.5px; }
  .uk__rozet { top: 8px; left: 8px; padding: 5px 9px 6px; }
  .uk__rozet b { font-size: 13.5px; }
}

/* dokunmatikte hover yok: hızlı eylem rayı hep açık */
@media (hover: none) {
  .uk__ray { opacity: 1; transform: none; }
}

/* ===== 06m. E-BÜLTEN — footer üstü şerit ============================== */
.bul {
  position: relative;
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(26px, 3vw, 40px);
  background: var(--olive-950);
}
/* şeridin üstünde ince marka çizgisi */
.bul::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--olive-600), var(--orange) 42%, var(--orange-300) 68%, var(--clay));
}

/* --- kart --- */
.bul__kart {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 3vw, 56px);
  align-items: center;
  padding: clamp(26px, 2.8vw, 40px) clamp(22px, 2.6vw, 44px);
  border-radius: clamp(18px, 1.8vw, 26px);
  border: 1px solid rgba(250, 247, 241, 0.1);
  background:
    radial-gradient(120% 160% at 88% 50%, rgba(242, 109, 31, 0.16), rgba(242, 109, 31, 0) 62%),
    var(--olive-900);
  color: var(--on-dark-strong);
}

/* sağ kenarda büyük, çok soluk pati filigranı */
.bul__filigran {
  position: absolute;
  right: -28px; bottom: -58px;
  width: 240px; height: 240px;
  opacity: 0.05;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF7F1'%3E%3Cellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/%3E%3Cellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/%3E%3Cellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/%3E%3Cellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/%3E%3Cpath d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transform: rotate(-14deg);
}

/* --- sol: yazı --- */
.bul__yazi { position: relative; }

.bul__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--orange-300);
}
.bul__eyebrow svg {
  width: 15px; height: 15px;
  stroke: var(--orange-300); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

.bul h2 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(20px, 1.85vw, 27px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.028em;
}

/* --- sağ: form --- */
.bul__sag { position: relative; }

/* giriş ve düğme tek hapın içinde */
.bul__hap {
  position: relative;
  display: flex;
  align-items: center;
  height: 58px;
  padding: 6px;
  border: 1px solid rgba(250, 247, 241, 0.2);
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.07);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.bul__hap:focus-within {
  border-color: var(--orange);
  background: rgba(250, 247, 241, 0.1);
  box-shadow: 0 0 0 3px rgba(242, 109, 31, 0.2);
}
.bul__hap input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px 0 18px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;                 /* iOS odakta yakınlaştırmasın */
  color: var(--on-dark-strong);
}
.bul__hap input::placeholder { color: rgba(250, 247, 241, 0.5); }
.bul__hap input:focus { outline: 0; }
.bul__hap.is-hatali {
  border-color: #E4785C;
  box-shadow: 0 0 0 3px rgba(228, 120, 92, 0.18);
}

.bul__gonder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 100%;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t) var(--ease);
}
.bul__gonder svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}
.bul__gonder:hover { background: var(--orange-600); }
.bul__gonder:hover svg { transform: translateX(4px); }

/* hata */
.bul__hata {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.5;
  color: #F0A58C;
  transition: max-height var(--t) var(--ease), margin var(--t) var(--ease);
}
.bul__hata.is-var { max-height: 3.4em; margin: 8px 0 0 18px; }

/* --- KVKK onayı: ince yazı --- */
.bul__onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 13px 0 0;
  padding-left: 2px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--on-dark);
}
.bul__onay input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bul__kutucuk {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1.5px solid rgba(250, 247, 241, 0.42);
  border-radius: 5px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bul__kutucuk svg {
  width: 11px; height: 11px;
  stroke: #fff; stroke-width: 3;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.bul__onay input:checked ~ .bul__kutucuk { background: var(--orange); border-color: var(--orange); }
.bul__onay input:checked ~ .bul__kutucuk svg { opacity: 1; transform: none; }
.bul__onay input:focus-visible ~ .bul__kutucuk { outline: 2px solid var(--orange); outline-offset: 3px; }
.bul__onay input[aria-invalid="true"] ~ .bul__kutucuk { border-color: #E4785C; }

.bul__onay a {
  font-weight: 600;
  color: var(--on-dark-strong);
  border-bottom: 1px solid rgba(250, 247, 241, 0.34);
}
.bul__onay a:hover { color: var(--orange-300); border-color: var(--orange-300); }

.bul__ince {
  margin: 9px 0 0 28px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(250, 247, 241, 0.52);
}

/* --- başarı --- */
/* [hidden] UA kuralı, sınıfın display'ini ezemiyor: açıkça kapatıyoruz */
.bul__basari[hidden],
.bul__form[hidden] { display: none; }

.bul__basari {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
}
.bul__tik {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(242, 109, 31, 0.18);
  border: 1px solid rgba(242, 109, 31, 0.44);
}
.bul__tik svg {
  width: 20px; height: 20px;
  stroke: var(--orange-300); stroke-width: 2.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.bul__basari p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--on-dark); }
.bul__basari b { color: var(--on-dark-strong); }

/* --- duyarlı --- */
@media (max-width: 900px) {
  .bul__kart { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bul h2 { max-width: 30ch; font-size: clamp(20px, 3.2vw, 26px); }
}
@media (max-width: 520px) {
  /* Dar ekranda düğme hapın içine sığmıyor. Hapı iç içe bırakmak yerine
     tamamen çözüyoruz: girdi kendi kutusu, düğme altında tam genişlik. */
  .bul__hap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .bul__hap:focus-within { box-shadow: none; background: none; }
  .bul__hap input {
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(250, 247, 241, 0.2);
    border-radius: 14px;
    background: rgba(250, 247, 241, 0.07);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  .bul__hap input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(242, 109, 31, 0.2);
  }
  .bul__hap.is-hatali input { border-color: #E4785C; box-shadow: 0 0 0 3px rgba(228, 120, 92, 0.18); }
  .bul__hap.is-hatali { border-color: transparent; box-shadow: none; }
  .bul__gonder { height: 52px; border-radius: 14px; justify-content: center; }
  .bul__hata.is-var { margin-left: 4px; }
  .bul__ince { margin-left: 0; }
}

/* ===== 07. MOBİL ARAMA ŞERİDİ ========================================== */
.msearch {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t) var(--ease);
}
.msearch.is-open { max-height: 88px; }
.msearch__field {
  display: flex;
  align-items: center;
  height: 46px;
  margin: 12px 0;
  padding-left: 14px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.msearch__field svg { width: 17px; height: 17px; color: var(--muted); stroke: currentColor;
  stroke-width: 1.7; fill: none; stroke-linecap: round; flex: none; }
.msearch__field input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px;
  font: inherit; font-size: 15px; background: none; border: 0; outline: 0; color: var(--ink);
}
.msearch__field button { height: 100%; padding: 0 20px; font-size: 13.5px; font-weight: 500;
  color: #fff; background: var(--olive-800); border-radius: 0 2px 2px 0; }

@media (max-width: 900px) { .msearch { display: block; } }

/* ===== 08. MOBİL MENÜ (drill-down) ===================================== */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  /* ŞART: visibility kalıtsaldır ve içerideki .mmenu__pane.is-active onu
     "visible" diye ezer. opacity:0 tıklamayı engellemediği için menü kapalıyken
     bile tüm ekranı yutan görünmez bir katman oluşur. pointer-events bunu keser. */
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
}
.mmenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* masaüstünde mobil menü hiç var olmasın */
@media (min-width: 901px) { .mmenu { display: none; } }
body.mmenu-lock { overflow: hidden; }

.mmenu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  height: 64px;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.mmenu__top img { width: 140px; height: 42px; object-fit: contain; }
.mmenu__close { display: grid; place-items: center; width: 40px; height: 40px;
  margin-right: -8px; color: var(--ink-2); }
.mmenu__close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6;
  fill: none; stroke-linecap: round; }

/* kaydırılan alan */
.mmenu__body { position: relative; flex: 1; overflow: hidden; }

.mmenu__pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px var(--gutter) 28px;
  background: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s var(--ease), visibility 0.32s;
}
.mmenu__pane.is-active { transform: none; visibility: visible; }
.mmenu__pane.is-behind { transform: translateX(-26%); visibility: visible; }

.mmenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  font-size: clamp(16px, 4.3vw, 18.5px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease);
}
.mmenu__row:active { color: var(--orange); }
.mmenu__row svg { width: 17px; height: 17px; stroke: var(--muted); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mmenu__row em { font-style: normal; font-size: 14px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.mmenu__row--accent { color: var(--orange); font-weight: 500; }

.mmenu__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mmenu__back svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }

.mmenu__heading {
  margin: 4px 0 10px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mmenu__sub { margin: 26px 0 2px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); }

/* alt bilgi */
.mmenu__foot {
  flex: none;
  padding: 18px var(--gutter);
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--olive-900);
  color: var(--on-dark);
  font-size: 13.5px;
}
.mmenu__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark-strong); }
.mmenu__foot svg { width: 15px; height: 15px; stroke: var(--orange); stroke-width: 1.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mmenu__shops { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: 13px; }
.mmenu__shops span { color: var(--olive-400); }

/* ===== 09. HAREKETİ AZALT ============================================== */
@media (prefers-reduced-motion: reduce) {
  .ticker__list, .ticker__pulse::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ===== 10. FOOTER ====================================================== */
.ft {
  position: relative;
  /* koyu zeminde tersi: soluk pati, gölge neredeyse yok */
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'><defs><filter id='g' x='-30%' y='-30%' width='170%' height='170%'><feDropShadow dx='0' dy='4' stdDeviation='7' flood-color='%23000000' flood-opacity='0.12'/></filter></defs><g fill='%23C9D2B4' fill-opacity='0.032' filter='url(%23g)'><g transform='translate(74 108) rotate(-22) scale(2.583) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(268 56) rotate(14) scale(2.000) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(430 168) rotate(38) scale(2.917) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(150 300) rotate(6) scale(2.167) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(352 372) rotate(-14) scale(2.667) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(66 462) rotate(26) scale(1.917) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(486 470) rotate(-8) scale(2.083) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g><g transform='translate(250 196) rotate(-40) scale(1.583) translate(-12 -12)'><path d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/><ellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/><ellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/><ellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/><ellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/></g></g></svg>") 0 0 / 560px 560px repeat, var(--olive-950);
  color: var(--on-dark);
  /* bülten şeridiyle tek koyu taban oluşturuyor, araya hairline giriyor */
  border-top: 1px solid rgba(250, 247, 241, 0.08);
  padding-top: clamp(40px, 5vw, 68px);
}

/* --- üst: marka + üç sütun --- */
.ft__ust {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 60px);
  padding-bottom: clamp(30px, 3.4vw, 46px);
}

.ft__logo { display: inline-block; }
.ft__logo img { width: clamp(158px, 15vw, 196px); height: auto; }

.ft__blurb {
  max-width: 44ch;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(250, 247, 241, 0.62);
}

.ft__yer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 7px 14px 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 241, 0.14);
  background: rgba(250, 247, 241, 0.05);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-dark-strong);
}
.ft__yer svg {
  width: 15px; height: 15px;
  stroke: var(--orange-300); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

.ft__sosyal { margin-top: 16px; }
.ft__sosyal a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark-strong);
  transition: color var(--t-fast) var(--ease);
}
.ft__sosyal svg {
  width: 34px; height: 34px;
  padding: 7px;
  border-radius: 11px;
  border: 1px solid rgba(250, 247, 241, 0.16);
  background: rgba(250, 247, 241, 0.05);
  stroke: currentColor; stroke-width: 1.6;
  fill: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ft__sosyal a:hover { color: var(--orange-300); }
.ft__sosyal a:hover svg { background: rgba(242, 109, 31, 0.16); border-color: rgba(242, 109, 31, 0.44); }

/* --- bağlantı sütunları ---
   <details> kullanılıyor: JS yoksa hepsi açık kalıyor (içerik hep DOM'da).
   Masaüstünde başlık tıklanmaz, mobilde katlanabilir oluyor. */
.ft__kol summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.ft__kol summary::-webkit-details-marker { display: none; }
.ft__kol summary::marker { content: ''; }
.ft__kol-ok { display: none; }

.ft__kol h3 {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-strong);
}
.ft__kol ul { display: grid; gap: 11px; }
.ft__kol a {
  display: inline-block;
  position: relative;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(250, 247, 241, 0.62);
  transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
/* üzerine gelince küçük turuncu çizgi sola açılıyor */
.ft__kol a::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%;
  width: 0; height: 1px;
  background: var(--orange);
  transform: translateY(-50%);
  transition: width var(--t) var(--ease);
}
.ft__kol a:hover { color: var(--on-dark-strong); transform: translateX(4px); }
.ft__kol a:hover::before { width: 9px; }

/* --- iletişim kartları --- */
.ft__iletisim {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-top: 1px solid rgba(250, 247, 241, 0.09);
}
.ft__kart {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: clamp(14px, 1.4vw, 18px);
  border: 1px solid rgba(250, 247, 241, 0.1);
  border-radius: 14px;
  background: rgba(250, 247, 241, 0.035);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.ft__kart:hover {
  background: rgba(250, 247, 241, 0.06);
  border-color: rgba(242, 109, 31, 0.34);
  transform: translateY(-2px);
}
.ft__ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(242, 109, 31, 0.14);
  border: 1px solid rgba(242, 109, 31, 0.28);
}
.ft__ikon svg {
  width: 18px; height: 18px;
  stroke: var(--orange-300); stroke-width: 1.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.ft__kart-yazi {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(250, 247, 241, 0.62);
}
.ft__kart-yazi b {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-strong);
}

/* --- pazaryerleri --- */
.ft__pazar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: clamp(18px, 2vw, 26px) 0 clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(250, 247, 241, 0.09);
}
.ft__pazar-bas {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.5);
}
.ft__pazar-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.ft__pazar-liste a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(250, 247, 241, 0.16);
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark-strong);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.ft__pazar-liste svg {
  width: 14px; height: 14px;
  stroke: var(--orange-300); stroke-width: 1.9;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.ft__pazar-liste a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.ft__pazar-liste a:hover svg { stroke: #fff; transform: translate(2px, -2px); }

/* --- alt bar --- */
.ft__alt {
  position: relative;
  /* yanlarda kırp; üstte yüzen "yukarı" düğmesi görünsün. Alt kırpmayı damga
     kendi kutusunda yapıyor — taşarsa sayfanın altında beyaz boşluk açılıyor. */
  overflow-x: clip;
  border-top: 1px solid rgba(250, 247, 241, 0.09);
  background: rgba(0, 0, 0, 0.22);
}

/* arkadaki dev marka damgası: taşan kısmı kırpılıyor */
.ft__damga {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  /* harflerin alt %18'i kesik görünsün: kutu glifden kısa, taşanı kendisi kırpar */
  height: 0.82em;
  overflow: hidden;
  /* alt barın yüksekliğine sığacak kadar: taşınca kırpılıp gürültü oluyor */
  font-size: clamp(42px, 5.6vw, 84px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 247, 241, 0.07);
  pointer-events: none;
  user-select: none;
}
/* -webkit-text-stroke yoksa çok soluk dolgu ile aynı etki */
@supports not (-webkit-text-stroke: 1px red) {
  .ft__damga { color: rgba(250, 247, 241, 0.05); }
}

.ft__alt-ic {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 26px;
  padding-top: clamp(16px, 1.8vw, 22px);
  padding-bottom: clamp(16px, 1.8vw, 22px);
}

.ft__telif {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.5);
}
.ft__telif span { margin: 0 7px; color: rgba(250, 247, 241, 0.28); }
.ft__telif a {
  color: rgba(250, 247, 241, 0.78);
  transition: color var(--t-fast) var(--ease);
}
.ft__telif a:hover { color: var(--orange-300); }

.ft__odeme {
  margin-left: auto;              /* ödeme şeridi hep en sağda */
  width: clamp(200px, 22vw, 264px);
  height: auto;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(250, 247, 241, 0.12);
}

.ft__yukari {
  position: absolute;             /* barın üst çizgisine oturan yüzen daire */
  top: -21px; right: var(--gutter);
  z-index: 2;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 241, 0.18);
  background: var(--olive-900);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.ft__yukari svg {
  width: 17px; height: 17px;
  stroke: var(--on-dark-strong); stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.ft__yukari:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-3px);
}

/* --- duyarlı --- */
@media (max-width: 1000px) {
  .ft__ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__marka { grid-column: 1 / -1; }
  .ft__iletisim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__kart:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .ft__ust { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* mobilde sütunlar katlanabilir: 15 bağlantı alt alta çok uzuyordu */
  .ft__kol {
    border-top: 1px solid rgba(250, 247, 241, 0.09);
  }
  .ft__marka { margin-bottom: 22px; }
  .ft__kol summary {
    pointer-events: auto;
    cursor: pointer;
    padding: 15px 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ft__kol summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
  .ft__kol h3 { margin: 0; }
  .ft__kol-ok {
    display: block;
    flex: none;
    width: 18px; height: 18px;
    stroke: rgba(250, 247, 241, 0.6); stroke-width: 1.8;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--t) var(--ease);
  }
  .ft__kol[open] .ft__kol-ok { transform: rotate(180deg); }
  .ft__kol ul { padding-bottom: 16px; }
  .ft__iletisim { grid-template-columns: minmax(0, 1fr); }
  .ft__kart:first-child { grid-column: auto; }
  .ft__pazar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ft__pazar-liste { width: 100%; }
  .ft__pazar-liste a { flex: 1; justify-content: center; padding: 0 12px; }
  .ft__alt-ic { flex-direction: column; align-items: flex-start; }
  .ft__odeme { width: 230px; }
  .ft__odeme { margin-left: 0; }
}

/* ===== 11. ÜYE ÇEKMECESİ ============================================== */
/* Sağ kenardan giren örtü bileşeni. Dört görünüm tek çekmecede; görünürlük
   yalnız `hidden` özniteliğiyle — CSS hiçbir yerde [hidden]'ı ezmiyor.
   Sayfa akışının parçası olmadığı için dosyanın sonunda duruyor. */

body.uye-kilit { overflow: hidden; }

/* --- perde --- */
.uye-perde {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 25, 14, 0.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
.uye-perde[hidden] { display: none; }
body.uye-acik .uye-perde { opacity: 1; visibility: visible; }

/* --- çekmece --- */
.uye {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 71;
  width: min(452px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s;
  box-shadow: -30px 0 70px -44px rgba(23, 28, 16, 0.9);
}
body.uye-acik .uye { transform: none; visibility: visible; }

/* --- üst bant --- */
.uye__ust {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  overflow: hidden;
  background:
    radial-gradient(110% 170% at 100% 0%, rgba(242, 109, 31, 0.32), transparent 62%),
    linear-gradient(135deg, var(--olive-950) 0%, var(--olive-800) 100%);
}
.uye__ust::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-300), transparent);
}
/* köşedeki soluk pati */
.uye__pati {
  position: absolute;
  right: -22px; bottom: -34px;
  width: 150px; height: 150px;
  opacity: 0.09;
  transform: rotate(-16deg);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF7F1'%3E%3Cellipse cx='5.6' cy='9.4' rx='2.3' ry='3'/%3E%3Cellipse cx='10.7' cy='6.5' rx='2.45' ry='3.25'/%3E%3Cellipse cx='16.1' cy='7.2' rx='2.35' ry='3.05'/%3E%3Cellipse cx='20.2' cy='11.4' rx='2.05' ry='2.7'/%3E%3Cpath d='M12.1 11.9c3.2 0 5.9 2.3 5.9 4.9 0 2.05-1.65 3.4-3.7 3.4-1.05 0-1.7-.32-2.5-.32s-1.45.32-2.5.32c-2.05 0-3.7-1.35-3.7-3.4 0-2.6 2.7-4.9 6.5-4.9Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.uye__logo { position: relative; z-index: 1; width: 168px; height: auto; }

.uye__kapat {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(250, 247, 241, 0.3);
  border-radius: 50%;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.uye__kapat svg {
  width: 17px; height: 17px;
  stroke: var(--on-dark-strong); stroke-width: 1.9;
  fill: none; stroke-linecap: round;
  transition: stroke var(--t) var(--ease);
}
.uye__kapat:hover { background: #fff; border-color: #fff; transform: rotate(90deg); }
.uye__kapat:hover svg { stroke: var(--olive-900); }

/* --- gövde --- */
.uye__govde {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 30px;
}

/* --- sekme --- */
.uye__sekme {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.uye__sekme[hidden] { display: none; }
.uye__sekme button {
  position: relative;
  z-index: 1;
  height: 40px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t) var(--ease);
}
.uye__sekme button[aria-selected="true"] { color: var(--on-dark-strong); }
.uye__sekme i {
  position: absolute;
  z-index: 0;
  top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: var(--olive-900);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.uye__sekme.is-ikinci i { transform: translateX(calc(100% + 4px)); }

/* --- görünüm --- */
.uye__gorunum { display: block; }
.uye__gorunum[hidden] { display: none; }

.uye__etiket {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
}
.uye__etiket::before { content: ''; flex: none; width: 24px; height: 1px; background: var(--orange); }

.uye__baslik {
  margin: 11px 0 0;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.uye__metin { margin: 9px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* --- form --- */
.uye__form { display: grid; gap: 15px; margin-top: 22px; }
.uye__alan { display: grid; gap: 7px; }
.uye__et { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--olive-800); }

.uye__sar { position: relative; display: block; }
.uye__girdi {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(27, 31, 22, 0.16);
  border-radius: 12px;
  background: var(--field-bg);
  font: inherit;
  font-size: 16px;                    /* iOS odakta yakınlaştırmasın */
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.uye__girdi::placeholder { color: var(--muted); }
.uye__girdi:focus {
  outline: 0;
  background: var(--field-bg-focus);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 109, 31, 0.18);
}
.uye__girdi--sifre { padding-right: 48px; }

.uye__goz {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease);
}
.uye__goz svg {
  width: 18px; height: 18px;
  stroke: var(--muted); stroke-width: 1.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-fast) var(--ease);
}
.uye__goz:hover { background: var(--cream-2); }
.uye__goz:hover svg { stroke: var(--orange-600); }

/* hata */
.uye__hata {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: #B8300C;
}
.uye__hata svg {
  flex: none; width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round;
}
.uye__alan.is-hatali .uye__hata { display: flex; }
.uye__alan.is-hatali .uye__girdi { border-color: #D1543A; }
.uye__alan.is-hatali .uye__girdi:focus { box-shadow: 0 0 0 3px rgba(209, 84, 58, 0.16); }

/* şifre gücü */
.uye__guc { display: block; height: 3px; border-radius: 2px; background: var(--cream-2); overflow: hidden; }
.uye__guc i { display: block; width: 0; height: 100%; border-radius: 2px; background: #D1543A;
  transition: width var(--t) var(--ease), background var(--t) var(--ease); }
.uye__guc.g-1 i { width: 26%; }
.uye__guc.g-2 i { width: 50%; background: var(--orange); }
.uye__guc.g-3 i { width: 78%; background: #8E9A6E; }
.uye__guc.g-4 i { width: 100%; background: var(--olive-600); }
.uye__ipucu { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* onay kutusu */
.uye__onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  cursor: pointer;
}
.uye__onay input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.uye__kutucuk {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  margin-top: 1px;
  border: 1.5px solid rgba(27, 31, 22, 0.26);
  border-radius: 6px;
  background: #fff;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.uye__kutucuk svg {
  width: 12px; height: 12px;
  stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.uye__onay input:checked ~ .uye__kutucuk { background: var(--orange); border-color: var(--orange); }
.uye__onay input:checked ~ .uye__kutucuk svg { opacity: 1; }
.uye__onay input:focus-visible ~ .uye__kutucuk { outline: 2px solid var(--orange); outline-offset: 2px; }
.uye__onay.is-hatali .uye__kutucuk { border-color: #D1543A; }
.uye__onay a { color: var(--olive-700); border-bottom: 1px solid rgba(27, 31, 22, 0.24); }
.uye__onay a:hover { color: var(--orange); border-color: var(--orange); }

.uye__satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.uye__bag {
  font-size: 13px;
  color: var(--olive-700);
  border-bottom: 1px solid rgba(27, 31, 22, 0.24);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.uye__bag:hover { color: var(--orange); border-color: var(--orange); }

/* ana düğme */
.uye__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: 4px;
  border: 1px solid var(--orange);
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: 0 12px 24px -14px rgba(242, 109, 31, 0.95);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.uye__btn svg {
  width: 17px; height: 17px;
  stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}
.uye__btn:hover { background: var(--orange-600); border-color: var(--orange-600); }
.uye__btn:hover svg { transform: translateX(4px); }
.uye__btn--cizgi {
  background: #fff;
  color: var(--ink);
  border-color: rgba(27, 31, 22, 0.18);
  box-shadow: none;
}
.uye__btn--cizgi:hover { background: var(--cream-2); border-color: var(--clay); color: var(--ink); }

/* ayraç */
.uye__ayrac { position: relative; margin: 22px 0 16px; text-align: center; }
.uye__ayrac::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.uye__ayrac span {
  position: relative;
  padding: 0 12px;
  background: var(--cream);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.uye__alt { margin: 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.uye__alt button {
  font-size: 14px; font-weight: 600; color: var(--olive-700);
  border-bottom: 1px solid rgba(27, 31, 22, 0.24);
}
.uye__alt button:hover { color: var(--orange); border-color: var(--orange); }

/* avantaj kutusu */
.uye__avantaj {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 20px 0 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.uye__avantaj svg {
  flex: none; width: 17px; height: 17px; margin-top: 2px;
  stroke: var(--orange-600); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.uye__avantaj b { font-weight: 600; color: var(--ink); }

/* genel uyarı */
.uye__uyari {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #F0C9BD;
  border-radius: 10px;
  background: #FDEDE8;
  font-size: 13px;
  color: #A32B10;
}
.uye__uyari[hidden] { display: none; }
.uye__uyari svg { flex: none; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }

/* --- sonuç --- */
/* Sonuç ekranında sekme şeridi yok; kısa içerik tepede asılı kalmasın diye
   dikeyde ortalanıyor. `margin: auto` seçildi: taşma olduğunda otomatik
   kenar boşlukları sıfırlanır, `justify-content: center` gibi üstü kırpmaz. */
.uye__sonuc { text-align: center; padding-top: 14px; margin-block: auto; }
.uye__tik {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid rgba(242, 109, 31, 0.32);
  background: rgba(242, 109, 31, 0.12);
}
.uye__tik svg {
  width: 28px; height: 28px;
  stroke: var(--orange-600); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.uye__sonuc .uye__baslik { margin-top: 0; }
.uye__sonuc .uye__metin { max-width: 330px; margin-inline: auto; }
.uye__sonuc-d { display: grid; gap: 10px; margin-top: 24px; }

/* --- alt şerit --- */
.uye__foot {
  flex: none;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.uye__foot a { color: var(--olive-700); border-bottom: 1px solid rgba(27, 31, 22, 0.22); }
.uye__foot a:hover { color: var(--orange); border-color: var(--orange); }

/* --- mobil --- */
@media (max-width: 520px) {
  .uye__ust { padding: 16px 18px; }
  .uye__logo { width: 146px; }
  .uye__govde { padding: 20px 18px 26px; }
  .uye__baslik { font-size: 24px; }
  .uye__foot { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .uye, .uye-perde, .uye__sekme i, .uye__btn svg, .uye__kapat { transition: none; }
  .uye__kapat:hover { transform: none; }
}

/* tasarım imzası — NeoBloom footer'ındaki gibi küçük "DESIGN + logo" */
.ft__telif .ft__imza, .odk-ft .ft__imza {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
  color: rgba(250, 247, 241, 0.42);
}
.ft__imza a { display: inline-flex; border: 0; }
.ft__imza img { height: 18px; width: auto; opacity: 0.8; transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease); }
.ft__imza a:hover img { opacity: 1; transform: translateY(-1px); }

/* ===== 13. ÇEREZ ONAYI ================================================= */
/* Sol altta yüzen kart; bant değil — sayfa içeriğini kapatmaz. */
.cerez {
  position: fixed;
  left: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 95;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(27, 31, 22, 0.1);
  box-shadow: 0 30px 70px -30px rgba(10, 13, 7, 0.55);
  color: var(--ink);
  animation: cerezGir 0.5s var(--ease) both;
}
.cerez[hidden] { display: none; }
@keyframes cerezGir { from { opacity: 0; transform: translateY(18px); } }
.cerez__ust { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
.cerez__ikon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--orange-50); }
.cerez__ikon svg { width: 22px; height: 22px; stroke: var(--orange-600); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cerez h2 { font-size: 16.5px; letter-spacing: -0.015em; }
.cerez p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.cerez p a { color: var(--olive-800); font-weight: 500; border-bottom: 1px solid rgba(27, 31, 22, 0.25); }
.cerez__ayar { display: grid; border-radius: 14px; background: var(--cream); padding: 4px 14px; }
.cerez__ayar[hidden] { display: none; }
.cerez__sat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; cursor: pointer; }
.cerez__sat + .cerez__sat { border-top: 1px solid var(--line); }
.cerez__sat span { display: grid; font-size: 14px; }
.cerez__sat small { font-size: 12.5px; color: var(--ink-2); }
.cerez__sat input { position: absolute; opacity: 0; pointer-events: none; }
.cerez__sat i { flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: rgba(27, 31, 22, 0.2); transition: background 0.25s var(--ease); }
.cerez__sat i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23, 28, 16, 0.25); transition: transform 0.25s var(--ease); }
.cerez__sat input:checked + i { background: var(--orange); }
.cerez__sat input:checked + i::after { transform: translateX(16px); }
.cerez__sat input:focus-visible + i { outline: 2px solid var(--orange); outline-offset: 2px; }
.cerez__sat.is-kilitli { cursor: default; }
.cerez__sat.is-kilitli i { background: var(--olive-600); opacity: 0.55; }
.cerez__dg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* kabul ve red EŞİT görsel ağırlıkta (rehberin açık beklentisi) */
.cerez__btn { height: 44px; border-radius: 12px; border: 1px solid var(--olive-900); background: var(--olive-900); color: #fff; font-size: 14px; font-weight: 600; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.cerez__btn:hover { background: var(--orange); border-color: var(--orange); }
.cerez__btn[hidden] { display: none; }
.cerez__btn--kaydet { grid-column: 1 / -1; }
.cerez__ayar-ac { grid-column: 1 / -1; padding: 4px; font-size: 13.5px; font-weight: 500; color: var(--olive-800); text-decoration: underline; text-underline-offset: 3px; }
.cerez__ayar-ac:hover { color: var(--orange-600); }
@media (max-width: 520px) { .cerez { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cerez { animation: none; } }