/* ==========================================================================
   NEOBLOOM — Ana Stil Dosyası
   Siyah & Beyaz · Minimalist · Keskin köşe (0 border-radius)
   İçindekiler:
   00. Yazı tipi (@font-face)
   01. Tokenlar
   02. Reset & Temel
   03. Yardımcılar / Layout
   04. Topbar
   05. Header (Logo · Arama · Aksiyonlar)
   06. Arama kutusu & öneri paneli
   07. Aksiyonlar (Hesabım · Favoriler · Sepetim)
   08. Menübar
   09. Mega menü
   10. Avantaj bandı (kayan şerit)
   11. Hero slider
   12. Mobil menü (panel panel)
   13. Ürün vitrini (sekmeli ızgara)
   14. Perfume Edit (tam ekran üç panel)
   15. Ayın kampanyası (film + tek ürün)
   16. Keşif carousel'i (blog)
   17. Güzellik Atlası + koku testi
   18. Instagram
   19. Footer
   20. Kategori sayfası
   21. Responsive
   ========================================================================== */

/* ---------- 00. YAZI TİPİ ---------------------------------------------- */
/* Montserrat kendi sunucumuzda. Google Fonts'a giden render engelleyici
   istek ve ardından fonts.gstatic.com'a giden ikinci tur böylece kalkıyor.
   Değişken font olduğu için 300-600 arası tüm ağırlıklar tek dosyada;
   latin-ext alt kümesi Türkçe karakterler (ğ ş ı İ) için gerekli. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/montserrat-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: "Montserrat";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/montserrat-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;
}

/* ---------- 01. TOKENLAR ------------------------------------------------ */
:root {
  /* Renk */
  --c-black:        #000000;
  --c-ink:          #111111;
  --c-body:         #1c1c1c;
  --c-muted:        #767676;
  --c-muted-2:      #9a9a9a;
  --c-muted-dark:   #4a4a4a;   /* ikincil ama okunmasi gereken metin */
  --c-line:         #e6e6e6;
  --c-line-2:       #d4d4d4;
  --c-bg:           #ffffff;
  --c-bg-soft:      #f5f5f5;
  --c-bg-soft-2:    #ededed;
  --c-bg-tint:      #fbfbfb;   /* vitrin zemini — beyaz ürün kartları ayrışsın */
  --c-white:        #ffffff;

  /* Vurgu — avantaj bandı, kampanya rozetleri */
  --c-accent:       #F4553B;
  --c-accent-0:     rgba(244, 85, 59, 0);

  /* Tipografi — tek aile: Montserrat.
     --font-display : başlık, menü, buton, etiket (geometrik, geniş harf aralığıyla iyi durur)
     --font         : gövde metni, ürün adı, fiyat, form */
  --font-display: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --font: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-topbar: 11.5px;
  --fs-nav:    13px;
  --fs-base:   14px;

  /* Ölçü */
  --container:   1440px;
  --gutter:      32px;
  --h-topbar:    38px;
  --h-header:    92px;
  --h-menubar:   54px;
  --h-altnav:    58px;   /* mobil alt çubuk */

  /* Hareket */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: .18s ease;
  --t-mid:  .28s ease;

  /* Katman */
  --z-mega:    80;
  --z-menubar: 90;
  --z-drawer:  120;
}

/* ---------- 02. RESET & TEMEL ------------------------------------------ */

/* Projenin temel kuralı: hiçbir öğede yuvarlak köşe yok. */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-sizing: border-box;
}

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* iOS'ta cift dokunma sayfayi buyutuyordu: Safari dokunulan blogu ekrana
     sigdirmak icin olcegi ~1.03'e cikariyor, sonra sayfa yana panlanabiliyor.
     Duzen tasmasi olmadigi halde "sayfa saga sola kayiyor" hissini bu veriyor.
     manipulation = kaydirma + parmakla yakinlastirma kalir, yalnizca cift
     dokunma buyutmesi kalkar. Erisilebilirligi bozmaz; user-scalable=no
     ile bastirmiyoruz, o parmakla yakinlastirmayi da kapatirdi. */
  touch-action: manipulation;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Başlıklar ve tüm "display" tipografi --font-display kullanır */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: pointer; }

ul, ol { list-style: none; }

/* Odak görünürlüğü — klavye kullanıcıları için net, kare çerçeve */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 2px;
}

/* İkonlar keskin: yuvarlak uç/birleşim yok */
svg { stroke-linecap: square; stroke-linejoin: miter; }

::selection { background: var(--c-black); color: var(--c-white); }

/* İçeriğe atla */
.skip-link {
  position: absolute;
  left: 0; top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* ---------- 03. YARDIMCILAR / LAYOUT ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  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;
}

.divider-v {
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: .3;
}

/* ---------- 04. TOPBAR -------------------------------------------------- */
.topbar {
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-topbar);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

/* Dönen duyuru mesajı */
.topbar__ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: rgba(255, 255, 255, .92);
}
.topbar__ticker svg { flex: none; }

.ticker__viewport {
  position: relative;
  height: var(--h-topbar);
  overflow: hidden;
  min-width: 0;
}
.ticker__item {
  display: flex;
  align-items: center;
  height: var(--h-topbar);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-mid), transform var(--t-mid);
  position: absolute;
  inset: 0;
}
.ticker__item.is-active {
  opacity: 1;
  transform: none;
  position: relative;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
}
.topbar__links a { color: rgba(255, 255, 255, .78); }
.topbar__links a:hover { color: var(--c-white); }

.topbar__select {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-display);
  font-size: var(--fs-topbar);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.topbar__select:hover { color: var(--c-white); }
.topbar__select svg { opacity: .7; }

/* ---------- 05. HEADER -------------------------------------------------- */
.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  height: var(--h-header);
}

.header__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.header__logo img {
  height: 26px;
  width: auto;
  transition: opacity var(--t-fast);
}
.header__logo:hover img { opacity: .65; }

/* Mobil sol taraf: hamburger */
.header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -10px;
  color: var(--c-black);
}

/* ---------- 06. ARAMA --------------------------------------------------- */
.search {
  position: relative;
  justify-self: center;
  width: clamp(320px, 40vw, 560px);
}

.search__field {
  display: flex;
  align-items: center;
  height: 46px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  transition: border-color var(--t-fast);
}
.search__field:focus-within { border-color: var(--c-black); }

/* Alanın kendi kenarlığı odakta zaten koyulaşıyor; üstüne bir de genel
   odak halkası binince iç içe iki çerçeve oluşuyordu. Input'ta halkayı
   kapatıyoruz — odak göstergesi kenarlığın koyulaşması olarak kalıyor.
   Butonda halka içeri alınıyor ki siyah zeminde görünsün ve taşmasın. */
.search__input:focus-visible { outline: none; }
.search__submit:focus-visible {
  outline-color: var(--c-white);
  outline-offset: -4px;
}

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  font-size: 13.5px;
  letter-spacing: .01em;
  background: transparent;
}
.search__input::placeholder { color: var(--c-muted-2); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 100%;
  margin: -1px -1px -1px 0;
  background: var(--c-black);
  color: var(--c-white);
  transition: background var(--t-fast);
}
.search__submit:hover { background: var(--c-ink); }
.search__submit:active { background: #2a2a2a; }

/* Odaklanınca açılan öneri paneli */
.search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 22px 22px;
  background: var(--c-bg);
  border: 1px solid var(--c-black);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.search.is-open .search__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.search__panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
/* İlk başlık hariç her başlık bir öncekinden nefes alır
   (araya .search__tags girdiği için kardeş "+" seçicisi yetmiyor) */
.search__panel-title:not(:first-child) { margin-top: 26px; }

.search__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search__tags a {
  padding: 7px 12px;
  border: 1px solid var(--c-line-2);
  font-size: 12px;
  color: var(--c-body);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.search__tags a:hover {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}

.search__list li + li { margin-top: 2px; }
.search__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin-inline: -10px;
  font-size: 13px;
  transition: background var(--t-fast);
}
.search__list a:hover { background: var(--c-bg-soft); }
.search__list span { color: var(--c-muted); font-size: 12px; margin-left: auto; }

/* ---------- 07. AKSİYONLAR --------------------------------------------- */
.actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 30px;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--c-body);
}
.action:hover { color: var(--c-black); }

.action__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.action:hover .action__icon svg { transform: translateY(-1px); }
.action__icon svg { transition: transform var(--t-fast); }

.action__label {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.action:hover .action__label { color: var(--c-black); }

.action__badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--c-black);
  color: var(--c-white);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

/* Mobilde header sağındaki sadeleşmiş ikonlar */
.actions__mobile-search { display: none; }

/* ---------- 08. MENÜBAR ------------------------------------------------- */
.menubar-sentinel { height: 1px; }

.menubar {
  position: sticky;
  top: 0;
  z-index: var(--z-menubar);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t-mid);
}
.menubar.is-stuck { box-shadow: 0 1px 0 var(--c-line), 0 12px 28px -22px rgba(0, 0, 0, .5); }

.menubar__inner {
  display: flex;
  align-items: center;
  height: var(--h-menubar);
}

/* Not: sabitlenince görünen kompakt logo kaldırıldı — 10 menü başlığı
   1376px'lik kap genişliğini doldurduğu için yer kalmıyordu. */

.menubar__nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-width: 0;
}

.nav__item { display: flex; }

/* Tek satirlik alt menu: mega acmaya degmeyen editoryal baslıklar icin
   (ornegin Parfum Hikayeleri > Neo'nun Secimi). */
.nav__item--soft.has-alt { position: relative; }
.nav__alt {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 90;
  min-width: 210px;
  padding: 7px 0;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.has-alt:hover > .nav__alt,
.has-alt:focus-within > .nav__alt {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__alt a {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--c-body);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__alt a:hover { color: var(--c-black); background: var(--c-bg-soft); }

/* Mobil karsiligi: ust basligin altina girintili satir */
.mnav__row--alt { padding-left: 34px; }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--h-menubar);
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--c-body);
  white-space: nowrap;
  transition: color var(--t-fast);
}

/* Alt çizgi göstergesi — soldan çizilir */
.nav__link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link,
.nav__link.is-active { color: var(--c-black); }

.nav__caret { opacity: .45; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav__item:hover > .nav__link .nav__caret,
.nav__item:focus-within > .nav__link .nav__caret { transform: rotate(180deg); opacity: 1; }

/* Editoryal bağlantılar — mağaza kategorileriyle aynı ağırlıkta.
   Sınıf yalnızca dar ekranda çekmeceye devretmek için duruyor. */

.menubar__aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: none;
}

.menubar__search {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line-2);
  color: var(--c-black);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.menubar.is-stuck .menubar__search { display: grid; }
.menubar__search:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

/* Mega açıkken sayfayı karartan perde */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menubar) - 1);
  background: rgba(0, 0, 0, .34);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
  pointer-events: none;
}
body:has(.menubar:not(.is-mega-locked) .has-mega:hover) .nav-scrim,
body:has(.menubar:not(.is-mega-locked) .has-mega:focus-within) .nav-scrim {
  opacity: 1;
  visibility: visible;
}

/* Perde topbar ve header'ın üstüne çıkmasın;
   header ayrıca menübarın da üstünde kalmalı ki arama paneli kesilmesin */
.topbar { position: relative; z-index: var(--z-menubar); }
.site-header { position: relative; z-index: calc(var(--z-menubar) + 2); }

/* ---------- 09. MEGA MENÜ ---------------------------------------------- */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-mega);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 32px 44px -34px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path .42s var(--ease),
    opacity .16s ease,
    visibility .42s;
}
.nav__item.has-mega:hover > .mega,
.nav__item.has-mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
}
.menubar.is-mega-locked .mega { visibility: hidden !important; opacity: 0 !important; }

.mega__inner {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 232px;
  gap: 52px;
  padding-block: 44px 48px;
}
/* Yan sutunu olmayan mega (Parfum): sutunlar bosluga yayilsin */
.mega__inner:not(:has(.mega__aside)) { grid-template-columns: 320px minmax(0, 1fr); }

/* İçerik kademeli belirir */
.mega__visual,
.mega__cols,
.mega__brands,
.mega__aside {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .38s var(--ease);
}
.has-mega:hover > .mega .mega__visual,
.has-mega:focus-within > .mega .mega__visual { opacity: 1; transform: none; transition-delay: .06s; }
.has-mega:hover > .mega .mega__cols,
.has-mega:hover > .mega .mega__brands,
.has-mega:focus-within > .mega .mega__cols,
.has-mega:focus-within > .mega .mega__brands { opacity: 1; transform: none; transition-delay: .12s; }
.has-mega:hover > .mega .mega__aside,
.has-mega:focus-within > .mega .mega__aside { opacity: 1; transform: none; transition-delay: .18s; }

/* --- Sol sütun: editoryal görsel --- */
.mega__visual {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.mega__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.mega__visual:hover img { transform: scale(1.045); }
.mega__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 38%, rgba(0, 0, 0, 0) 68%);
}
.mega__visual-text {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--c-white);
}
.mega__visual-eyebrow {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .78;
}
.mega__visual-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.005em;
}
.mega__visual-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: gap var(--t-fast);
}
.mega__visual:hover .mega__visual-cta { gap: 14px; }

/* --- Orta: bağlantı sütunları --- */
.mega__cols { display: grid; gap: 40px; }
.mega__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mega__col-title {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 18px;
}

.mega__list li + li { margin-top: 11px; }
.mega__list a {
  position: relative;
  display: inline-block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--c-body);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast);
}
/* Hover'da öne çıkan ince tire */
.mega__list a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.mega__list a:hover { color: var(--c-black); transform: translateX(6px); }
.mega__list a:hover::before { transform: scaleX(1); }

/* --- Marka ızgarası --- */
.mega__brand-grid {
  columns: 4;
  column-gap: 32px;
}
.mega__brand-grid li {
  break-inside: avoid;
  margin-bottom: 11px;
}
.mega__brand-grid a {
  position: relative;
  display: inline-block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--c-body);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast);
}
.mega__brand-grid a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.mega__brand-grid a:hover { color: var(--c-black); transform: translateX(6px); }
.mega__brand-grid a:hover::before { transform: scaleX(1); }

/* --- Sağ: hızlı erişim --- */
.mega__aside {
  border-left: 1px solid var(--c-line);
  padding-left: 32px;
}
.mega__quick li + li { margin-top: 2px; }
.mega__quick a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 13.5px;
  color: var(--c-body);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.mega__quick a span {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.mega__quick a:hover { color: var(--c-black); border-color: var(--c-black); }
.mega__quick a:hover span { color: var(--c-black); }

/* ---------- 10. AVANTAJ BANDI (kayan şerit) ---------------------------- */
/* İki birebir satır yan yana durur; şerit tam %50 kaydırıldığında ikinci
   kopya birincinin yerine oturur, dolayısıyla döngü dikişsizdir.
   Hız --band-speed ile tek yerden ayarlanır. */
.promo-band {
  --band-speed: 34s;
  position: relative;
  overflow: hidden;
  background: var(--c-accent);
  color: var(--c-white);
  height: 46px;
  display: flex;
  align-items: center;
}

/* Kenarlarda yazı sert kesilmesin diye zemin renginden perde.
   Maske yerine gradyan kullanılıyor ki bandın zemini tam dolu kalsın. */
.promo-band::before,
.promo-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 44px;
  pointer-events: none;
}
.promo-band::before { left: 0;  background: linear-gradient(to right, var(--c-accent), var(--c-accent-0)); }
.promo-band::after  { right: 0; background: linear-gradient(to left,  var(--c-accent), var(--c-accent-0)); }

.promo-band__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: promo-band-scroll var(--band-speed) linear infinite;
}
.promo-band:hover .promo-band__track { animation-play-state: paused; }

@keyframes promo-band-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.promo-band__row {
  display: flex;
  align-items: center;
  /* Basliklar kisaldi: her kopya en az ekran genisligi olsun ki genis
     ekranda seridin sonunda bosluk acilmasin. */
  flex: none;
  min-width: 100vw;
}

/* Her madde esit genislikte bir goz: baslik gozun ortasinda durdugu icin
   iki ayrac cizgisinin tam ortasina denk geliyor. */
.promo-band__item {
  position: relative;
  flex: 1 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 30px;
  white-space: nowrap;
}

/* Ayrac: gozun sag sinirinda, yani iki baslik arasinda ortada */
.promo-band__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: currentColor;
  opacity: .4;
}

.promo-band__title {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Bant artik yalnizca tiklanabilir basliklar tasiyor: ikon + ad,
   tamami sunduklarimiz.html'deki ilgili bolume gidiyor. */
.promo-band__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  transition: opacity var(--t-fast);
}
.promo-band__link:hover { opacity: .72; }
.promo-band__ikon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}
/* satir ici svg'nin taban cizgisi bosluk birakmasin */
.promo-band__ikon svg { display: block; }

/* ---------- 11. HERO SLIDER -------------------------------------------- */
/* Slaytlar aynı grid gözünde üst üste durur: hem çapraz geçiş yapılabilir
   hem de kap yüksekliği en uzun slayta göre kendiliğinden oluşur. */
.hero {
  --hero-split: 60%;      /* görsel / metin ayrımı */
  --hero-pad: 60px;       /* panel iç boşluğu */
  --hero-dur: 6.5s;       /* slayt süresi — ilerleme çubuğu ve zoom bunu kullanır */
  position: relative;
  background: var(--c-bg-soft);
  overflow: hidden;
}

.hero__slides { display: grid; }

.hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: var(--hero-split) 1fr;
  min-height: clamp(500px, 60vh, 660px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

/* --- Görsel --- */
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-soft-2);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease);
}
/* Etkin slaytta yavaş yakınlaşma */
.hero__slide.is-active .hero__media img {
  transform: scale(1);
  animation: hero-zoom var(--hero-dur) linear forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

/* Video slayt — görselin yerini alır. Poster karesi hemen boyanır,
   dosya ise ancak oynatma tetiklendiğinde indirilir (preload="none"). */
.hero__media--video { background: var(--c-ink); }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Not: film 2.39:1; siyah bantlar dosyanın kendisinden kırpıldığı için
   ayrıca büyütmeye gerek yok, object-fit: cover yeterli. */

/* --- Metin paneli --- */
.hero__panel {
  display: flex;
  align-items: center;
  padding: var(--hero-pad) var(--hero-pad) calc(var(--hero-pad) + 56px);
  background: var(--c-bg-soft);
}

.hero__body { max-width: 440px; }

/* İçerik kademeli yükselir */
.hero__eyebrow,
.hero__title,
.hero__text,
.hero__cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .65s var(--ease);
}
.hero__slide.is-active .hero__eyebrow { opacity: 1; transform: none; transition-delay: .10s; }
.hero__slide.is-active .hero__title   { opacity: 1; transform: none; transition-delay: .18s; }
.hero__slide.is-active .hero__text    { opacity: 1; transform: none; transition-delay: .26s; }
.hero__slide.is-active .hero__cta     { opacity: 1; transform: none; transition-delay: .34s; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero__eyebrow-rule {
  flex: none;
  width: 30px;
  height: 1px;
  background: var(--c-accent);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -.015em;
  color: var(--c-black);
}

.hero__text {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--c-muted);
}

.hero__cta {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: gap var(--t-fast), background var(--t-fast), color var(--t-fast), opacity .55s ease, transform .65s var(--ease);
}
.hero__cta:hover { gap: 20px; background: var(--c-accent); color: var(--c-white); }

/* --- Kontroller --- */
.hero__ui {
  position: absolute;
  left: var(--hero-split);
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--hero-pad) 36px;
}

.hero__arrows { display: flex; gap: 8px; }
.hero__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--c-line-2);
  color: var(--c-black);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.hero__arrow:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.hero__progress { display: flex; gap: 7px; }

/* Buton 16px yüksek: parmak/fare için tutulur bir alan.
   Görünen çizgi ::before, dolum ise ayrı katman. */
.hero__bar {
  position: relative;
  width: 34px;
  height: 16px;
  background: none;
}
.hero__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: rgba(0, 0, 0, .2);      /* pasif ama daima görünür */
  transition: background var(--t-fast);
}
.hero__bar:hover::before,
.hero__bar:focus-visible::before { background: rgba(0, 0, 0, .58); }

.hero__bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  z-index: 1;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--c-accent);
}
.hero__bar.is-active .hero__bar-fill { animation: hero-fill var(--hero-dur) linear forwards; }
@keyframes hero-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Geçilmiş slaytlar dolu ama sönük kalsın */
.hero__bar.is-done .hero__bar-fill { transform: scaleX(1); background: rgba(0, 0, 0, .42); }

.hero__count {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--c-muted);
}
.hero__count-now { color: var(--c-black); }

/* Üzerine gelince hem ilerleme hem zoom durur; JS de bu animasyona bağlı
   olduğu için slayt geçişi de birlikte beklemeye alınır. */
.hero:hover .hero__bar.is-active .hero__bar-fill,
.hero:hover .hero__slide.is-active .hero__media img { animation-play-state: paused; }

/* ---------- 12. MOBİL MENÜ --------------------------------------------- */
/* Kurgu: aynı anda yalnızca TEK panel DOM akışında durur (hidden ile).
   Paneller üst üste binmediği için hangi panelin görüneceği konusunda
   belirsizlik yok. Giren panel keyframe ile kayarak gelir. */
.mnav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  background: var(--c-bg);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility .42s;
  box-shadow: 24px 0 60px -40px rgba(0, 0, 0, .6);
}
.mnav.is-open { transform: none; visibility: visible; }

/* --- Üst şerit --- */
.mnav__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--c-line);
}
.mnav__logo { height: 19px; width: auto; }
.mnav__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: -8px;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.mnav__close:hover { background: var(--c-black); color: var(--c-white); }

/* --- Panel alanı (kaydırılan kısım) --- */
.mnav__stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

.mnav__panel { animation: mnav-panel .34s var(--ease) both; }
@keyframes mnav-panel {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
/* Geri dönerken ters yönden gelsin */
.mnav__panel.is-back { animation-name: mnav-panel-back; }
@keyframes mnav-panel-back {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

/* --- Satırlar --- */
.mnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-body);
  transition: background var(--t-fast), color var(--t-fast);
}
.mnav__row:hover,
.mnav__row:focus-visible { background: var(--c-bg-soft); color: var(--c-black); }
.mnav__row:active { background: var(--c-bg-soft-2); }

.mnav__chev { flex: none; color: var(--c-muted-2); transition: transform var(--t-fast), color var(--t-fast); }
.mnav__row--in:hover .mnav__chev { color: var(--c-black); transform: translateX(3px); }

.mnav__list--soft { margin-top: 10px; border-top: 1px solid var(--c-line); }
.mnav__row--soft { font-weight: 400; letter-spacing: .06em; text-transform: none; font-size: 14px; }

/* Alt kategori satırları: küçük harf, sağda adet */
.mnav__panel:not([data-panel="root"]) .mnav__list .mnav__row {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  min-height: 50px;
  padding-block: 12px;
}
.mnav__row em {
  flex: none;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--c-muted-dark);
}

/* --- Geri ve başlık --- */
.mnav__back {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: color var(--t-fast), gap var(--t-fast), background var(--t-fast);
}
.mnav__back:hover { color: var(--c-black); gap: 14px; background: var(--c-bg-soft); }

.mnav__title {
  padding: 22px 20px 16px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--c-black);
}

/* --- Kategori görseli --- */
.mnav__hero {
  position: relative;
  display: block;
  margin: 0 20px 4px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.mnav__hero img { width: 100%; height: 100%; object-fit: cover; }
.mnav__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .15) 62%, rgba(0, 0, 0, 0) 100%);
}
.mnav__hero-body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: block;
  color: var(--c-white);
}
.mnav__hero-title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
}
.mnav__hero-cta {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

/* --- Grup etiketleri --- */
.mnav__group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.mnav__group-rule { flex: none; width: 16px; height: 1px; background: var(--c-accent); }

.mnav__list--brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mnav__list--brands .mnav__row { font-size: 13px; letter-spacing: 0; }
.mnav__list--brands .mnav__row:nth-child(odd) { border-right: 1px solid var(--c-line); }

/* --- Kök paneldeki yardımcı bağlantılar --- */
.mnav__utils {
  margin-top: 14px;
  padding: 4px 20px 0;
  border-top: 1px solid var(--c-line);
}
.mnav__util {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  font-size: 13.5px;
  color: var(--c-body);
  transition: color var(--t-fast);
}
.mnav__util:hover { color: var(--c-black); }
.mnav__util svg { flex: none; color: var(--c-muted-dark); }

/* --- Sabit alt şerit: hangi panelde olursan ol görünür --- */
.mnav__foot {
  flex: none;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}
.mnav__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mnav__btn {
  display: grid;
  place-items: center;
  height: 46px;
  border: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.mnav__btn:hover { background: var(--c-bg-soft); }
.mnav__btn--solid { background: var(--c-black); color: var(--c-white); }
.mnav__btn--solid:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }

.mnav__bottom {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mnav__social { display: flex; gap: 8px; }
.mnav__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line-2);
  color: var(--c-body);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.mnav__social a:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.mnav__lang {
  padding: 10px 14px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-body);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.mnav__lang:hover { border-color: var(--c-black); color: var(--c-black); }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* ---------- 13. ÜRÜN VİTRİNİ ------------------------------------------- */
.showcase {
  padding-block: 84px 96px;
  background: var(--c-bg-tint);
}

/* --- Sekmeler --- */
.showcase__head { margin-bottom: 44px; }

.showcase__tabs {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line);
}
.showcase__tab {
  padding: 0 24px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.showcase__tab:hover { color: var(--c-black); }
.showcase__tab.is-active { color: var(--c-black); }

/* Sekmeler arasında kayan alt çizgi — konumu JS ölçüp yazıyor */
.showcase__ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-black);
  transition: left .42s var(--ease), width .42s var(--ease);
}

.showcase__panel[hidden] { display: none; }

.showcase__more {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

/* --- Izgara --- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 26px;
}

/* Anasayfa secki seridi: 2 satir x 3 urun. Kartlar daha genis nefes aliyor. */
.showcase .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Sekme değişince kartlar sırayla belirir */
.showcase__panel.is-active .pcard { animation: pcard-in .5s var(--ease) backwards; }
.showcase__panel.is-active .pcard:nth-child(1) { animation-delay: .02s; }
.showcase__panel.is-active .pcard:nth-child(2) { animation-delay: .06s; }
.showcase__panel.is-active .pcard:nth-child(3) { animation-delay: .10s; }
.showcase__panel.is-active .pcard:nth-child(4) { animation-delay: .14s; }
.showcase__panel.is-active .pcard:nth-child(5) { animation-delay: .18s; }
.showcase__panel.is-active .pcard:nth-child(6) { animation-delay: .22s; }
.showcase__panel.is-active .pcard:nth-child(7) { animation-delay: .26s; }
.showcase__panel.is-active .pcard:nth-child(8) { animation-delay: .30s; }
@keyframes pcard-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --- Kart --- */
.pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);   /* tint zemin üzerinde tek parça beyaz blok */
}

.pcard__frame {
  position: relative;
  overflow: hidden;
  background: var(--c-white);
}

.pcard__media {
  --n: 1;
  position: relative;
  aspect-ratio: 3 / 4;
}

.pcard__imgs { position: absolute; inset: 0; }
.pcard__imgs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .28s ease, transform .6s var(--ease);
}
.pcard__imgs img:first-child { opacity: 1; }
.pcard:hover .pcard__imgs img { transform: scale(1.035); }

/* Görsel üstündeki görünmez bölgeler: fare hangi bölgedeyse o görsel açılır.
   Tamamen CSS — kart bağlantısının içinde durdukları için tıklama yine ürüne gider. */
.pcard__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: calc(100% / var(--n));
}
.pcard__zone:nth-of-type(1) { left: 0; }
.pcard__zone:nth-of-type(2) { left: calc(100% / var(--n) * 1); }
.pcard__zone:nth-of-type(3) { left: calc(100% / var(--n) * 2); }
.pcard__zone:nth-of-type(4) { left: calc(100% / var(--n) * 3); }

.pcard__zone:hover ~ .pcard__imgs img { opacity: 0; }
.pcard__zone:nth-of-type(1):hover ~ .pcard__imgs img:nth-child(1),
.pcard__zone:nth-of-type(2):hover ~ .pcard__imgs img:nth-child(2),
.pcard__zone:nth-of-type(3):hover ~ .pcard__imgs img:nth-child(3),
.pcard__zone:nth-of-type(4):hover ~ .pcard__imgs img:nth-child(4) { opacity: 1; }

/* Görsel sayacı */
/* Görsel sayacı her zaman görünür; dinlenme hâlinde sönük, kartın
   üstüne gelince koyulaşır. */
.pcard__bars {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  gap: 5px;
}
.pcard__bars i {
  flex: 1;
  height: 2px;
  background: rgba(0, 0, 0, .12);        /* pasif */
  transition: background var(--t-fast);
}
.pcard__bars i:first-child { background: rgba(0, 0, 0, .38); }

/* Kart üstündeyken tümü koyulaşır */
.pcard__frame:hover .pcard__bars i { background: rgba(0, 0, 0, .2); }
.pcard__frame:hover .pcard__bars i:first-child { background: var(--c-black); }

/* Bölgeler arasında gezinirken işaret o görsele taşınır.
   .pcard__frame:hover ön eki, yukarıdaki :first-child kuralını geçmek için. */
.pcard__frame:hover .pcard__zone:hover ~ .pcard__bars i { background: rgba(0, 0, 0, .2); }
.pcard__frame:hover .pcard__zone:nth-of-type(1):hover ~ .pcard__bars i:nth-child(1),
.pcard__frame:hover .pcard__zone:nth-of-type(2):hover ~ .pcard__bars i:nth-child(2),
.pcard__frame:hover .pcard__zone:nth-of-type(3):hover ~ .pcard__bars i:nth-child(3),
.pcard__frame:hover .pcard__zone:nth-of-type(4):hover ~ .pcard__bars i:nth-child(4) { background: var(--c-black); }

/* --- Rozetler --- */
.pcard__badges {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;   /* bölge hover'ını engellemesin */
}
.pcard__badge {
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-white);
}
.pcard__badge--gift { background: var(--c-black); }
.pcard__badge--cart { background: var(--c-accent); }

/* --- Favori butonu: görselin sağ üstünde --- */
/* Sepete ekle butonu gibi daire; projedeki keskin köşe kuralının
   bilinçli ikinci istisnası, ikisi birlikte bir aile oluştursun diye. */
.pfav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .9);
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.pfav:hover {
  background: var(--c-black);
  color: var(--c-white);
  transform: scale(1.07);
}
.pfav.is-on {
  background: var(--c-accent);
  color: var(--c-white);
}
/* Eklenince kalp içi dolar */
.pfav.is-on svg path { fill: currentColor; }

/* --- Kart metni + sepete ekle --- */
.pcard__body {
  padding: 16px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pcard__info { flex: 1; min-width: 0; }

/* Projedeki "sıfır yuvarlak köşe" kuralının tek bilinçli istisnası:
   sepete ekle butonu daire. !important gerekiyor çünkü genel reset
   tüm öğelere border-radius: 0 !important uyguluyor. */
.pcard__add {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line-2);
  border-radius: 50% !important;
  color: var(--c-black);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.pcard__add:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
  transform: scale(1.06);
}
.pcard__add.is-done {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}
.pcard__add-ok { display: none; }
.pcard__add.is-done .pcard__add-bag { display: none; }
.pcard__add.is-done .pcard__add-ok { display: block; }
.pcard__brand {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.pcard__name {
  margin-top: 6px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  transition: color var(--t-fast);
}
.pcard__info:hover .pcard__name { color: var(--c-black); }

/* --- Fiyat --- */
.pcard__price {
  margin-top: auto;      /* satırdaki tüm fiyatlar aynı hizaya oturur */
  padding: 12px 16px 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* "Sepette indirim" rozeti fiyat satırının en sağında; dar kartta alt satıra iner */
.pcard__price .pcard__badge--cart {
  margin-left: auto;
  font-size: 9.5px;
  padding: 5px 8px;
  letter-spacing: .1em;
}

/* Eski fiyat üstte, yeni fiyat altta; oran kutusu ikisinin soluna hizalanır */
.pcard__amounts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pcard__off {
  flex: none;
  padding: 4px 7px;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.pcard__old {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--c-muted-2);
  text-decoration: line-through;
}
.pcard__now {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--c-black);
}

/* İndirimli fiyat vurgusu */
.pcard__old + .pcard__now { color: var(--c-accent); }

/* --- Hayalet buton (yardımcı) --- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 32px;
  border: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: gap var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn-ghost:hover { gap: 18px; background: var(--c-black); color: var(--c-white); }

/* ---------- 14. PERFUME EDIT (tam ekran üç panel) ---------------------- */
/* Üç eşit sütun; birinin üstüne gelince o sütun genişler, diğerleri
   kısılır ve söner. grid-template-columns geçişi tarayıcı tarafından
   canlandırılabildiği için ayrıca JS gerekmiyor. */
.editions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100vh;
  min-height: 600px;
  max-height: 880px;
  background: var(--c-black);
  transition: grid-template-columns .75s var(--ease);
}
.editions:has(.edition:nth-child(2):hover) { grid-template-columns: 1.85fr .78fr .78fr; }
.editions:has(.edition:nth-child(3):hover) { grid-template-columns: .78fr 1.85fr .78fr; }
.editions:has(.edition:nth-child(4):hover) { grid-template-columns: .78fr .78fr 1.85fr; }

/* Bölümün üstünde duran serbest etiket */
.editions__label {
  position: absolute;
  top: 38px;
  left: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  pointer-events: none;
}
.editions__label-rule {
  width: 34px;
  height: 1px;
  background: var(--c-white);
}

/* --- Panel --- */
.edition { position: relative; overflow: hidden; min-width: 0; }
.edition + .edition { box-shadow: -1px 0 0 rgba(255, 255, 255, .18); }

.edition__link {
  position: relative;
  display: block;
  height: 100%;
  color: var(--c-white);
}

.edition__media { position: absolute; inset: 0; }
.edition__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s ease;
}
.edition__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .88) 0%,
    rgba(0, 0, 0, .45) 42%,
    rgba(0, 0, 0, .12) 100%);
}
.edition:hover .edition__media img { transform: scale(1.05); }

/* Üstüne gelinmeyen paneller geri çekilir */
.editions:has(.edition:hover) .edition:not(:hover) .edition__media img {
  filter: brightness(.4) saturate(.6);
}

/* İçi boş büyük sıra numarası */
.edition__no {
  position: absolute;
  top: 30px;
  right: 34px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
  transition: -webkit-text-stroke-color .5s ease, color .5s ease;
}
.edition:hover .edition__no {
  color: rgba(255, 255, 255, .92);
  -webkit-text-stroke-color: transparent;
}

/* --- Metin --- */
.edition__body {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 42px;
  z-index: 2;
  display: block;
}

.edition__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-white);
}

.edition__title {
  /* Panel dar: uzun yazi basliklari en fazla uc satir, gerisi kirpiliyor. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
}

/* Açıklama yalnızca genişleyen panelde açılır */
.edition__text {
  display: block;
  max-width: 380px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  transition: max-height .6s var(--ease), opacity .45s ease, margin-top .6s var(--ease);
}
.edition:hover .edition__text {
  max-height: 140px;
  opacity: 1;
  margin-top: 16px;
}

.edition__cta {
  position: relative;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: gap var(--t-fast);
}
.edition__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.edition:hover .edition__cta { gap: 16px; }
.edition:hover .edition__cta::after { transform: scaleX(1); }

/* ---------- 15. AYIN KAMPANYASI ---------------------------------------- */
/* Solda %75 film, sağda %25 tek ürün. Film alanı koyu, ürün paneli beyaz —
   kontrast ürünü öne çıkarıyor. */
.promo {
  display: grid;
  grid-template-columns: 75% 25%;
  min-height: clamp(560px, 74vh, 780px);
  background: var(--c-black);
}

/* --- Sol: film --- */
.promo__media {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
.promo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(103deg,
    rgba(0, 0, 0, .86) 0%,
    rgba(0, 0, 0, .66) 30%,
    rgba(0, 0, 0, .3) 58%,
    rgba(0, 0, 0, .04) 88%,
    rgba(0, 0, 0, 0) 100%);
}

.promo__overlay {
  position: absolute;
  left: clamp(28px, 4.5vw, 72px);
  right: clamp(28px, 4.5vw, 72px);
  bottom: clamp(34px, 5vw, 62px);
  z-index: 1;
  max-width: 560px;
  color: var(--c-white);
}

.promo__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.promo__eyebrow-rule {
  width: 34px;
  height: 1px;
  background: var(--c-accent);
}

.promo__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.025em;
}

.promo__text {
  margin-top: 18px;
  max-width: 430px;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .82);
}

/* --- Geri sayım --- */
.promo__timer { margin-top: 28px; }
.promo__timer-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.promo__clock {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.promo__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 58px;
  padding: 12px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(0, 0, 0, .28);
}
.promo__unit b {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.promo__unit i {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.promo__sep {
  align-self: center;
  margin-top: -14px;
  font-size: 18px;
  color: rgba(255, 255, 255, .35);
}

.promo__cta {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: gap var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.promo__cta:hover { gap: 19px; background: var(--c-accent); color: var(--c-white); }

/* --- Sağ: ürün paneli --- */
.promo__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
}

.promo__card-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 8px 12px;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.promo__card-media {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--c-bg-tint);
}
.promo__card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, transform .7s var(--ease);
}
.promo__card-alt { opacity: 0; }
.promo__card-media:hover .promo__card-alt { opacity: 1; }
.promo__card-media:hover img { transform: scale(1.04); }

.promo__card-body {
  flex: none;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--c-line);
}
.promo__card-brand {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.promo__card-name {
  margin-top: 7px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.promo__card-link:hover .promo__card-name { color: var(--c-black); }

.promo__card-price {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo__add {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.promo__add:hover { background: var(--c-accent); }
.promo__add.is-done { background: var(--c-accent); }

/* ---------- 16. KEŞİF — blog carousel'i -------------------------------- */
/* Ray gerçek bir kaydırma alanı: dokunmatik, trackpad ve klavye kaydırması
   tarayıcıdan hazır geliyor. Oklar yalnızca bir "sayfa" kadar scrollBy
   çağırıyor, altındaki ince çubuk da konumu gösteriyor. */
.journal {
  padding-block: 92px 100px;
  background: var(--c-bg);
}

.journal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

/* Ortak bolum basligi: gorsel bloklarin (atlas banner'i, koku testi,
   instagram seridi) ust uste yapismasini onleyen nefes araligi. */
.bhead {
  padding-block: clamp(48px, 5.5vw, 84px) clamp(20px, 2.2vw, 32px);
}
.bhead__et {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.bhead__rule {
  flex: none;
  width: 34px;
  height: 1px;
  background: var(--c-accent);
}
.bhead__h {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-black);
}

.journal__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.journal__eyebrow-rule {
  width: 34px;
  height: 1px;
  background: var(--c-accent);
}

.journal__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-black);
}

.journal__nav { display: flex; gap: 8px; flex: none; }
.journal__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--c-line-2);
  color: var(--c-black);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.journal__arrow:hover:not(:disabled) {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}
.journal__arrow:disabled { opacity: .32; cursor: default; }

/* --- Ray --- */
.journal__track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  /* proximity, mandatory değil: mandatory snap programlı kaydırmayı
     iptal edip mevcut noktaya geri döndürüyor ve oklar ölüyor.
     Buraya scroll-behavior: smooth de yazılmayacak — aynı sebep.
     Yumuşak geçişi JS kendi rAF döngüsüyle sürüyor. */
  scroll-snap-type: x proximity;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Kartın odak halkası kırpılmasın */
  padding-block: 4px;
}
.journal__track::-webkit-scrollbar { display: none; }
.journal__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.journal__track.is-dragging img { pointer-events: none; }

.post {
  flex: 0 0 calc((100% - 52px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.post__link { display: block; }

/* --- Görsel --- */
.post__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kategori etiketi — beyaz zemin, siyah yazı: fotoğrafın üstünde
   mercan ve siyah rozetlerden ayrışsın diye üçüncü bir ton. */
.post__cat {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 12px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- Metin --- */
.post__body { display: block; padding-top: 18px; }

.post__date {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.post__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--c-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.56em;
}

.post__text {
  display: -webkit-box;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}

.post__more {
  position: relative;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: gap var(--t-fast);
}
.post__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.post__link:hover .post__more { gap: 15px; }
.post__link:hover .post__more::after { transform: scaleX(1); }

/* --- Konum çubuğu --- */
.journal__rail {
  position: relative;
  margin-top: 34px;
  height: 2px;
  background: var(--c-line);
}
.journal__rail-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33%;
  background: var(--c-black);
  transition: left .25s ease, width .25s ease;
}

.journal__more {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}

/* ---------- 17. GÜZELLİK ATLASI + KOKU TESTİ --------------------------- */
.atlas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(600px, 76vh, 780px);
  background: var(--c-bg-tint);
}

/* --- Sol: Atlas banner --- */
.atlas__banner {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-white);
}
.atlas__media { position: absolute; inset: 0; }
.atlas__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.atlas__banner:hover .atlas__media img { transform: scale(1.045); }
.atlas__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .82) 0%,
    rgba(0, 0, 0, .42) 44%,
    rgba(0, 0, 0, .06) 100%);
}

.atlas__body {
  position: absolute;
  left: clamp(28px, 3.6vw, 56px);
  right: clamp(28px, 3.6vw, 56px);
  bottom: clamp(30px, 3.6vw, 52px);
  z-index: 1;
  display: block;
  max-width: 400px;
}
.atlas__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.atlas__rule { flex: none; width: 30px; height: 1px; background: var(--c-accent); }

.atlas__title {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.atlas__text {
  display: block;
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
}
.atlas__cta {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 26px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: gap var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.atlas__banner:hover .atlas__cta { gap: 17px; background: var(--c-accent); color: var(--c-white); }

/* --- Sağ: test --- */
.quiz {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 3.6vw, 58px);
  background: var(--c-bg);
}

/* Kaçıncı sorudayız — içi boş büyük rakam, köşede sessizce duruyor */
.quiz__no {
  position: absolute;
  top: clamp(24px, 2.6vw, 40px);
  right: clamp(28px, 3.6vw, 58px);
  font-family: var(--font-display);
  font-size: clamp(58px, 6.4vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line-2);
  pointer-events: none;
  user-select: none;
}

.quiz__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.quiz__eyebrow .atlas__rule { background: var(--c-accent); }

.quiz__title {
  margin-top: 14px;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-black);
}

/* İlerleme: tek çubuk yerine soru sayısı kadar bölme */
.quiz__steps {
  margin-top: clamp(24px, 2.6vw, 34px);
  display: flex;
  gap: 6px;
}
.quiz__steps i {
  flex: 1;
  height: 3px;
  background: var(--c-line);
  transition: background .45s var(--ease);
}
.quiz__steps i.is-on { background: var(--c-accent); }

/* Her soruda içerik yeniden belirsin */
.quiz__stage { animation: quiz-in .45s var(--ease) both; }
@keyframes quiz-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.quiz__q {
  margin-top: clamp(22px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--c-black);
  min-height: 2.5em;
}

/* Şıklar: kutu değil, ince çizgilerle ayrılmış liste satırları.
   Üstüne gelince dolgu soldan sağa süpürerek geliyor. */
.quiz__opts { margin-top: 6px; }

.quiz__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: clamp(14px, 1.5vw, 18px) 16px;
  border-top: 1px solid var(--c-line);
  background: none;
  overflow: hidden;
  text-align: left;
  color: var(--c-body);
  transition: color .3s ease;
}
.quiz__opts .quiz__opt:last-child { border-bottom: 1px solid var(--c-line); }

.quiz__opt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease);
}
.quiz__opt > * { position: relative; z-index: 1; }

.quiz__opt-key {
  flex: none;
  width: 22px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-muted-2);
  transition: color .3s ease;
}
.quiz__opt-label {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.35;
}
.quiz__opt-arrow {
  flex: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .38s var(--ease);
}

.quiz__opt:hover::before,
.quiz__opt:focus-visible::before { transform: scaleX(1); }
.quiz__opt:hover,
.quiz__opt:focus-visible { color: var(--c-white); }
.quiz__opt:hover .quiz__opt-key,
.quiz__opt:focus-visible .quiz__opt-key { color: rgba(255, 255, 255, .7); }
.quiz__opt:hover .quiz__opt-arrow,
.quiz__opt:focus-visible .quiz__opt-arrow { opacity: 1; transform: none; }

/* Seçilen şık: dolgu mercan renkte kalır */
.quiz__opt.is-picked::before { transform: scaleX(1); background: var(--c-accent); }
.quiz__opt.is-picked { color: var(--c-white); }
.quiz__opt.is-picked .quiz__opt-key { color: rgba(255, 255, 255, .8); }
.quiz__opt.is-picked .quiz__opt-arrow { opacity: 1; transform: none; }

.quiz__back {
  margin-top: auto;
  padding-top: clamp(20px, 2.2vw, 30px);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast), gap var(--t-fast);
}
.quiz__back:hover { color: var(--c-black); gap: 14px; }
.quiz__back[hidden] { display: none; }

/* --- Güzellik Atlası: tam ekran, ortalanmış banner ---------------------
   Lavanta fotoğrafı açık tonlu; ortadaki beyaz yazının okunabilmesi için
   merkezden koyulaşan radyal perde + hafif dikey karartma birlikte
   kullanılıyor. Tek katman yeterli kontrastı vermiyordu. */
.atlasfull {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(420px, 58vh, 620px);
  background: var(--c-ink);
  color: var(--c-white);
  text-align: center;
}
/* Parallax: görsel kapsayıcıdan uzun tutuluyor; JS kaydırmaya göre dikeyde
   ötelerken üstte/altta bırakılan pay sayesinde kenarda boşluk açılmıyor.
   Hareketi kısıtlayan kullanıcıda JS hiç devreye girmiyor, görsel sabit. */
.atlasfull__media {
  position: absolute;
  left: 0;
  right: 0;
  top: -32%;
  height: 164%;
  will-change: transform;
}
.atlasfull__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.atlasfull__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 64% at 50% 50%,
      rgba(0, 0, 0, .58) 0%,
      rgba(0, 0, 0, .40) 42%,
      rgba(0, 0, 0, .18) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .22), rgba(0, 0, 0, .34));
}

/* Banner ikiye bolundu: solda basliklar, sagda atlasa en son eklenen madde. */
.atlasfull__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: min(100% - var(--gutter) * 2, var(--container));
  padding-block: clamp(48px, 6vw, 92px);
}
.atlasfull__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.atlasson {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .3);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.atlasson:hover { border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .42); }
.atlasson__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.atlasson__sira {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.atlasson__gorsel {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.atlasson__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.atlasson__gov { display: block; }
.atlasson__ad {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-white);
}
.atlasson__m {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.atlasson__ok {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: gap var(--t-fast);
}
.atlasson:hover .atlasson__ok { gap: 14px; }
.atlasfull__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}
.atlasfull__rule { flex: none; width: 34px; height: 1px; background: var(--c-accent); }

.atlasfull__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.7vw, 58px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.atlasfull__text {
  display: block;
  margin-top: 22px;
  max-width: 560px;
  font-size: clamp(14.5px, 1.25vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
}
.atlasfull__cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 32px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: gap var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.atlasfull__cta:hover { gap: 17px; background: var(--c-accent); color: var(--c-white); }

/* --- Koku testi sol paneli --------------------------------------------
   Aynı banner iskeletini kullanıyor ama tıklanabilir değil (testin
   kendisi hemen sağında), o yüzden hover yakınlaşması kapatıldı. */
.atlas__banner--kt { cursor: default; }
.atlas__banner--kt:hover .atlas__media img { transform: none; }

.atlas__meta {
  display: inline-flex;
  align-items: center;
  margin-top: 26px;
  padding: 9px 17px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* Başlık sol panele taşındığı için sağdaki test dikeyde ortalanıyor */
.quiz { justify-content: center; }
.quiz__steps { margin-top: 0; }

/* --- Sonuç popup'ı --- */
.result {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.result[hidden] { display: none; }

.result__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  animation: result-fade .3s ease both;
}
@keyframes result-fade { from { opacity: 0; } to { opacity: 1; } }

.result__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: clamp(30px, 3.4vw, 48px);
  background: var(--c-bg);
  animation: result-rise .42s var(--ease) both;
}
@keyframes result-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.result__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.result__close:hover { background: var(--c-black); color: var(--c-white); }

.result__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.result__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.result__title span { color: var(--c-accent); }
.result__text {
  margin-top: 12px;
  max-width: 520px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--c-muted);
}

.result__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.rcard { display: block; }
.rcard__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-tint);
}
.rcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.rcard:hover .rcard__media img { transform: scale(1.045); }
.rcard__brand {
  margin-top: 13px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.rcard__name {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.rcard__price {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-black);
}

.result__foot {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.result__again {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.result__again:hover { color: var(--c-black); }

/* ---------- 18. INSTAGRAM ---------------------------------------------- */
/* Tam genişlik kare şerit: kaplayıcı yok, boşluk yok, üstteki bölüme
   yapışık duruyor. Kareler kendi başına bir Instagram duvarı gibi okunuyor. */
.insta { padding: 0; }

.insta__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}

.ig {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.ig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.ig:hover img { transform: scale(1.06); }

.ig__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .5);
  color: var(--c-white);
  opacity: 0;
  transition: opacity var(--t-mid);
}
.ig:hover .ig__veil,
.ig:focus-visible .ig__veil { opacity: 1; }
.ig__veil svg { transform: scale(.84); transition: transform .45s var(--ease); }
.ig:hover .ig__veil svg { transform: none; }

/* ---------- 19. FOOTER ------------------------------------------------- */
/* Siyah zemin, mercan yalnızca küçük vurgularda: sütun çizgileri,
   abone ol butonu, onay kutusu ve bağlantı hover'ı. */
.foot {
  background: var(--c-black);
  color: rgba(255, 255, 255, .68);
}

.foot__inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1.15fr 1.5fr;
  gap: clamp(30px, 3.4vw, 56px);
  padding-block: clamp(56px, 5.6vw, 84px);
}

/* --- 1. sütun: marka --- */
.foot__logo { display: inline-block; }
.foot__logo img { height: 22px; width: auto; }

.foot__adres {
  margin-top: 26px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.72;
}

.foot__iletisim {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  transition: color var(--t-fast);
}
.foot__iletisim:hover { color: var(--c-white); }
.foot__iletisim + .foot__iletisim { margin-top: 4px; }

.foot__social {
  margin-top: 24px;
  display: flex;
  gap: 10px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .8);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.foot__social a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

/* --- Sütun başlıkları --- */
.foot__title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-white);
}
.foot__rule { flex: none; width: 18px; height: 1px; background: var(--c-accent); }

/* Politikalar ve Kurumsal başlıkları <button>: mobilde akordiyon düğmesi
   olurlar, masaüstünde düz başlık gibi görünüp tıklanmazlar. */
.foot__title { width: 100%; text-align: left; cursor: default; }
.foot__chev { display: none; }

/* --- Bağlantı listeleri --- */
.foot__links { margin-top: 22px; }
.foot__links li + li { margin-top: 11px; }
.foot__links a {
  position: relative;
  display: inline-block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .68);
  transition: color var(--t-fast);
}
.foot__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.foot__links a:hover { color: var(--c-white); }
.foot__links a:hover::after { transform: scaleX(1); }

/* --- 4. sütun: e-bülten --- */
.foot__note {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.68;
  color: rgba(255, 255, 255, .62);
}

.foot__form {
  margin-top: 20px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: border-color var(--t-fast);
}
.foot__form:focus-within { border-color: var(--c-white); }

.foot__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 4px;
  font-size: 13.5px;
  color: var(--c-white);
  background: transparent;
}
.foot__input::placeholder { color: rgba(255, 255, 255, .42); }

.foot__submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--c-white);
  color: var(--c-black);
  transition: opacity var(--t-fast);
}
.foot__submit:hover { opacity: .78; }

/* Onay kutusu — kare, projedeki keskin dile uygun */
.foot__check {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.foot__check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.foot__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, .34);
  color: var(--c-white);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.foot__box svg { opacity: 0; transition: opacity var(--t-fast); }
.foot__check input:checked + .foot__box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.foot__check input:checked + .foot__box svg { opacity: 1; }
.foot__check input:focus-visible + .foot__box { outline: 2px solid var(--c-white); outline-offset: 2px; }

.foot__check-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .6);
}
.foot__check-text a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 2px; }
.foot__check-text a:hover { color: var(--c-white); }

/* --- Alt şerit --- */
.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 22px 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.foot__copy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

.foot__design {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.foot__design img {
  height: 14px;
  width: auto;
  opacity: .75;
  transition: opacity var(--t-fast);
}
.foot__design a:hover img { opacity: 1; }

.foot__ssl {
  height: 26px;
  width: auto;
  opacity: .9;
}

/* ---------- 20. KATEGORİ SAYFASI --------------------------------------- */
.cat-head {
  padding: clamp(34px, 4vw, 60px) var(--gutter) clamp(24px, 2.6vw, 36px);
  max-width: var(--container);
  margin-inline: auto;
}
.cat-crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.cat-crumb a { color: var(--c-muted-dark); transition: color var(--t-fast); }
.cat-crumb a:hover { color: var(--c-black); }

.cat-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--c-black);
}
.cat-desc {
  margin-top: 16px;
  max-width: 620px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--c-muted);
}

/* --- Araç çubuğu: menübarın hemen altına yapışır --- */
.cat-bar {
  position: sticky;
  top: var(--h-menubar);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px var(--gutter);
  background: var(--c-bg);
  border-block: 1px solid var(--c-line);
}
.cat-count {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.cat-count b { color: var(--c-black); font-weight: 500; }

.cat-tools { display: flex; align-items: center; gap: 10px; }

.cat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cat-toggle:hover { border-color: var(--c-black); }
.cat-toggle[aria-expanded="true"] { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.cat-toggle__chev { transition: transform var(--t-fast); }
.cat-toggle[aria-expanded="true"] .cat-toggle__chev { transform: rotate(180deg); }
.cat-toggle__n {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 10px;
  letter-spacing: 0;
}
.cat-toggle__n[hidden] { display: none; }

.cat-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--c-line-2);
  transition: border-color var(--t-fast);
}
.cat-sort:hover { border-color: var(--c-black); }
.cat-sort label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.cat-sort select {
  appearance: none;
  padding-right: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-black);
  cursor: pointer;
}
.cat-sort svg { pointer-events: none; color: var(--c-muted-dark); }

/* --- Filtre paneli: akış içinde, aşağı doğru açılır --- */
.cat-filters {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  border-bottom: 1px solid transparent;
  background: var(--c-bg-tint);
  transition: max-height .45s var(--ease), visibility .45s;
}
.cat-filters.is-open {
  max-height: 720px;
  visibility: visible;
  border-bottom-color: var(--c-line);
}

.cat-filters__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 24px;
  padding: 30px var(--gutter) 24px;
}
.fgroup { border: 0; }
.fbaslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  text-align: left;
  cursor: default;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-black);
}
/* Ok ve mobil sayfa basligi yalnizca kucuk ekranda gorunur */
.fchev { display: none; }
.cat-filters__top { display: none; }

.fopt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--c-body);
  transition: color var(--t-fast);
}
.fopt:hover { color: var(--c-black); }
.fopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.fbox {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.fbox::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--c-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.fopt input:checked + .fbox { background: var(--c-accent); border-color: var(--c-accent); }
.fopt input:checked + .fbox::after { transform: rotate(45deg) scale(1); }
.fopt input:focus-visible + .fbox { outline: 2px solid var(--c-black); outline-offset: 2px; }
.fad { flex: 1; }
.fsay { flex: none; font-family: var(--font-display); font-size: 11px; color: var(--c-muted-2); }

.cat-filters__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 var(--gutter) 26px;
}
.cat-clear {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: color var(--t-fast);
}
.cat-clear:hover { color: var(--c-black); }
.cat-apply {
  height: 44px;
  padding: 0 26px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.cat-apply:hover { background: var(--c-accent); }

/* --- Izgara: tam genişlik, 4 sütun, aralarında saç teli çizgi --- */
/* Kutular arasi ince bosluk; aradaki tint zemin kartlari birbirinden
   ayiriyor, cizgi cekmeye gerek kalmiyor. Izgara yine ucdan uca. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 12px 48px;
  background: var(--c-bg-tint);
}
.cat-grid > .pcard { padding-bottom: 6px; }
.cat-grid > .pcard[hidden] { display: none; }

.cat-empty {
  padding: 70px var(--gutter) 90px;
  text-align: center;
  font-size: 15px;
  color: var(--c-muted);
}
.cat-empty[hidden] { display: none; }

/* ---------- 21. RESPONSIVE --------------------------------------------- */

/* Geniş masaüstü: menü nefesini daralt */
/* ==========================================================================
   22. ÜRÜN DETAY
   Sol sutun galeri (masaustunde yapiskan), sag sutun bilgi. Bilgi sutunu
   uzun oldugu icin gorsel ekranda kalir — kullanici asagi inerken urunu
   gormeye devam eder.
   ========================================================================== */

/* Bolum ustu kucuk etiket — bu sayfada birden fazla yerde kullaniliyor */
.bolum__etiket {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* --- Kırıntı --- */
.ucrumb { border-bottom: 1px solid var(--c-line); }
.ucrumb__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.ucrumb__in a { color: var(--c-muted-dark); transition: color var(--t-fast); }
.ucrumb__in a:hover { color: var(--c-black); }
.ucrumb__in span[aria-current] { color: var(--c-black); }

/* --- İki sütun --- */
.udetay {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: start;
}

/* --------------------------- Galeri --------------------------- */
.galeri {
  position: sticky;
  top: calc(var(--h-menubar) + 20px);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
}

.galeri__kucukler { display: flex; flex-direction: column; gap: 10px; }
.gkucuk {
  display: block;
  padding: 0;
  background: var(--c-bg-tint);
  border: 1px solid var(--c-line);
  transition: border-color var(--t-fast), opacity var(--t-fast);
  opacity: .72;
}
.gkucuk img { display: block; width: 100%; height: auto; }
.gkucuk:hover { opacity: 1; }
.gkucuk.is-on { border-color: var(--c-black); opacity: 1; }

.galeri__cerceve {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-tint);
}
/* Serit: masaustunde transform ile kayar, dokunmatikte native kaydirma
   devralir (asagidaki dokunmatik blogunda). */
.galeri__serit {
  --i: 0;
  display: flex;
  transform: translateX(calc(var(--i) * -100%));
  transition: transform .55s var(--ease);
}
.gkare { flex: 0 0 100%; margin: 0; }
.gkare img { display: block; width: 100%; height: auto; }

.galeri__rozet {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 12px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Buyutec ipucu — yalnizca imlecli cihazda gosterilir (asagida). */
.galeri__ipucu {
  display: none;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, .92);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  pointer-events: none;
  transition: opacity var(--t-fast);
}

.galeri__noktalar {
  display: none;                       /* yalnizca dokunmatikte */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  justify-content: center;
  gap: 6px;
}
.gnokta {
  width: 22px;
  height: 2px;
  padding: 0;
  background: rgba(0, 0, 0, .16);
  transition: background var(--t-fast);
}
.gnokta.is-on { background: var(--c-black); }

/* --------------------------- Bilgi sütunu --------------------------- */
.ubilgi { padding-top: 4px; }

.ubilgi__marka {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ubilgi__marka a { color: var(--c-black); }
.ubilgi__marka a:hover { text-decoration: underline; text-underline-offset: 4px; }

.ubilgi__ad {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-black);
}

.ubilgi__meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 12px;
  color: var(--c-muted-dark);
}
.ubilgi__ayrac { width: 1px; height: 11px; background: var(--c-line-2); }

/* Yildiz: dolu katman yuzdeye gore kirpilir, ikinci bir ikon setine gerek yok */
.uyildiz { position: relative; display: inline-block; line-height: 1; }
.uyildiz__bos { color: var(--c-line-2); letter-spacing: 1px; }
.uyildiz__dolu {
  position: absolute;
  inset: 0;
  width: var(--p);
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-accent);
  letter-spacing: 1px;
}

.ubilgi__ozet {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-muted-dark);
}

/* --- Fiyat --- */
.ufiyat {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.ufiyat__simdi {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--c-black);
}
.ufiyat__kdv {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ufiyat__haric {
  flex: 1 0 100%;
  font-size: 12px;
  color: var(--c-muted);
}

/* --- Kampanya şeridi: turuncu ölçülü kullanılıyor, sadece sol kenar + hafif zemin --- */
.ubant {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 2px solid var(--c-accent);
  background: #fff6f4;
  font-size: 13px;
  color: var(--c-body);
}
.ubant b { font-weight: 600; }

.upuan {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--c-muted-dark);
}
.upuan b { color: var(--c-black); font-weight: 600; }
.upuan span { color: var(--c-muted); }

/* --- Ücretsiz kargo çubuğu --- */
.ukargo {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--c-line);
}
.ukargo__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.ukargo__ad {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-black);
}
.ukargo__esik { font-size: 11.5px; color: var(--c-muted); }
.ukargo__ray { height: 3px; background: var(--c-bg-soft-2); overflow: hidden; }
.ukargo__ray i { display: block; width: var(--w); height: 100%; background: var(--c-accent); }
.ukargo__not { margin-top: 9px; font-size: 12px; color: var(--c-muted-dark); }

/* --- Seçim grupları --- */
.usec { margin-top: 26px; border: 0; }
.usec__baslik {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-black);
}
.usec__zorunlu {
  padding: 3px 7px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 9px;
  letter-spacing: .1em;
}
.usec__sira { display: flex; flex-wrap: wrap; gap: 8px; }

/* Boy seçenekleri */
.uboy { cursor: pointer; }
.uboy input { position: absolute; opacity: 0; pointer-events: none; }
.uboy span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 86px;
  padding: 11px 14px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-black);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.uboy span small {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
}
.uboy:hover span { border-color: var(--c-black); }
.uboy input:checked + span { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.uboy input:checked + span small { color: rgba(255, 255, 255, .6); }
.uboy input:focus-visible + span { outline: 2px solid var(--c-black); outline-offset: 2px; }

/* Hediye kartları */
.uhkartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uhkart { cursor: pointer; }
.uhkart input { position: absolute; opacity: 0; pointer-events: none; }
.uhkart__gov {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--c-line-2);
  transition: border-color var(--t-fast);
}
.uhkart__gov img { flex: none; width: 52px; height: 52px; object-fit: contain; background: var(--c-bg-tint); }
.uhkart__ad {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--c-black);
}
.uhkart__et {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 6px;
  background: var(--c-bg-soft);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.uhkart:hover .uhkart__gov { border-color: var(--c-black); }
.uhkart input:checked + .uhkart__gov { border-color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-black); }
.uhkart input:checked + .uhkart__gov .uhkart__et { background: var(--c-black); color: var(--c-white); }
.uhkart input:focus-visible + .uhkart__gov { outline: 2px solid var(--c-black); outline-offset: 2px; }

/* Hediye paketi */
.upaket {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.upaket:hover { border-color: var(--c-line-2); }
.upaket input { position: absolute; opacity: 0; pointer-events: none; }
.upaket__kutu {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--c-line-2);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.upaket input:checked + .upaket__kutu {
  background: var(--c-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color: var(--c-black);
}
.upaket input:focus-visible + .upaket__kutu { outline: 2px solid var(--c-black); outline-offset: 2px; }
.upaket__gov { flex: 1; min-width: 0; }
.upaket__ad { display: block; font-size: 13px; color: var(--c-black); }
.upaket__ac { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--c-muted); }
.upaket__f {
  flex: none;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-black);
}

/* Hediye kartı mesajı — paket secilince acilir.
   Gorunurlugu JS `hidden` ile yonetiyor; [hidden]'i CSS ile ezmiyoruz
   (bu projede bir kez o yuzden mobil menu tamamen kilitlenmisti). */
.unot {
  margin-top: -1px;                    /* paket kutusuyla tek blok gibi dursun */
  padding: 14px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.unot__et {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.unot__alan {
  display: block;
  width: 100%;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-body);
  resize: vertical;
  transition: border-color var(--t-fast);
}
.unot__alan::placeholder { color: var(--c-muted-2); }
.unot__alan:focus { outline: none; border-color: var(--c-black); }
.unot__alt {
  margin-top: 7px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--c-muted);
}
.unot__say b { font-weight: 600; color: var(--c-muted-dark); }
.unot__say.is-dolu b { color: var(--c-accent); }

/* Stok */
.ustok {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-muted-dark);
}
.ustok__nokta { width: 7px; height: 7px; background: var(--c-black); }

/* --- Sepet --- */
.usepet { margin-top: 12px; display: flex; gap: 10px; }
.uadet {
  flex: none;
  display: flex;
  align-items: center;
  border: 1px solid var(--c-line-2);
}
.uadet__d {
  width: 44px;
  height: 54px;
  font-size: 17px;
  color: var(--c-black);
  transition: background var(--t-fast);
}
.uadet__d:hover { background: var(--c-bg-soft); }
.uadet__g {
  width: 34px;
  height: 54px;
  border: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
  background: transparent;
}
.uadet__g:focus-visible { outline: 2px solid var(--c-black); outline-offset: -4px; }

.ubtn {
  height: 54px;
  padding: 0 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ubtn--ana { flex: 1; background: var(--c-black); color: var(--c-white); }
.ubtn--ana:hover { background: var(--c-accent); }
.ubtn--ana.is-done { background: var(--c-accent); }
.ubtn--hemen {
  width: 100%;
  margin-top: 10px;
  background: var(--c-bg);
  color: var(--c-black);
  border: 1px solid var(--c-black);
}
.ubtn--hemen:hover { background: var(--c-black); color: var(--c-white); }

/* İkincil aksiyonlar */
.uaks {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.uaks__d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 12px;
  color: var(--c-muted-dark);
  transition: color var(--t-fast);
}
.uaks__d:hover { color: var(--c-black); }
.uaks__d[aria-pressed="true"] { color: var(--c-accent); }
.uaks__d[aria-pressed="true"] svg { fill: var(--c-accent); }

/* Paylas paneli — etiket kutusuyla ayni dil */
.upaylas {
  margin-top: 14px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.upay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--c-muted-dark);
  transition: border-color var(--t-fast), color var(--t-fast);
}
/* DIKKAT: .upaylas'a display verdigimiz an tarayicinin [hidden]{display:none}
   kurali eziliyor ve panel her zaman gorunur kaliyor. display veren her
   acilir kutuya [hidden] karsiligi da yazilmali. */
.upaylas[hidden] { display: none; }
.uetiket[hidden] { display: none; }
.unot[hidden] { display: none; }

.upay:hover { border-color: var(--c-black); color: var(--c-black); }
.upay svg { flex: none; }
.upay.is-ok { border-color: var(--c-accent); color: var(--c-accent); }

/* Etiketler kutusu — gorunurlugu JS `hidden` ile yonetiliyor, [hidden]'i
   CSS ile ezmiyoruz (bkz. hediye karti notu). */
.uaks__d[aria-expanded="true"] { color: var(--c-black); }
.uetiket {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.uetiket__liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.uetiket__liste a {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-muted-dark);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.uetiket__liste a:hover { border-color: var(--c-black); color: var(--c-black); }

/* --- Bilgi kartları --- */
.ukart {
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid var(--c-line);
}
.ukart__b {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-black);
}
.ukart__a { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--c-muted-dark); }
.ukart__a b { color: var(--c-black); font-weight: 600; }

/* --- Güven rozetleri --- */
.uguven {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.uguven__o {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 3px 11px;
  color: var(--c-black);
}
.uguven__o svg { grid-row: span 2; margin-top: 2px; }
.uguven__b {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-black);
}
.uguven__a { font-size: 11.5px; color: var(--c-muted); }

/* --------------------------- Sekmeler ---------------------------
   Koku piramidi, marka, degerlendirme ve oneriler tek bir sekme
   bilesenine toplandi. Sekmeler icerigi YERINDE degistirir — capa degil,
   yani tiklayinca sayfa asagi kaymaz. Kayan alt cizgi anasayfadaki urun
   vitrini sekmeleriyle ayni dili konusur. */
.usek { border-top: 1px solid var(--c-line); }
.usek__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 88px;
}

/* --- Tam ekran görüntüleyici ---
   Zemin beyaz: ürün görselleri zaten beyaz tuvalde, siyah zeminde ortada
   beyaz bir dikdörtgen gibi dururlardı. Kontroller siyah, sayfanın diliyle
   aynı. display verdigimiz icin [hidden] karsiligi da yaziliyor. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  background: var(--c-bg);
}
.lb[hidden] { display: none; }

.lb__serit {
  flex: 1;
  min-width: 0;
  min-height: 0;                 /* yoksa icerik yuksekligi kutuyu buyutur */
  display: flex;
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lb__serit::-webkit-scrollbar { display: none; }

/* Yukseklik acikca veriliyor: stretch ile gelen yukseklik "belirsiz" sayildigi
   icin img'nin max-height:100% kurali tutmuyordu ve gorsel ekrandan tasiyordu. */
.lb__kare {
  flex: 0 0 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 76px 84px;
  scroll-snap-align: center;
}
/* Yukseklik siniri dogrudan viewport biriminden: yuzde zinciri esnek kutu
   icinde "belirsiz" kaldigi icin max-height:100% tutmuyor ve gorsel ekrandan
   tasiyordu. Cikarilan deger .lb__kare'nin ust+alt ic boslugu.
   dvh ikinci kez yaziliyor: destekleyen tarayicida telefonun adres cubugu
   payini da dogru hesaplar, desteklemeyen ilk satirda kalir. */
.lb__kare img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  max-height: calc(100vh - 152px);
  max-height: calc(100dvh - 152px);
}

.lb__kapat,
.lb__ok {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--c-bg);
  color: var(--c-black);
  transition: color var(--t-fast), background var(--t-fast);
}
.lb__kapat:hover,
.lb__ok:hover { background: var(--c-black); color: var(--c-white); }
.lb__kapat { top: 14px; right: 14px; }
.lb__ok { top: 50%; transform: translateY(-50%); }
.lb__ok--sol { left: 14px; }
.lb__ok--sag { right: 14px; }
.lb__ok[hidden] { display: none; }

.lb__sayac {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--c-muted-dark);
}
.lb__sayac span { color: var(--c-black); }

/* --- Seçili görselde imleçle yakınlaştırma ---
   Kaynak görseller 1400px; ~700px'lik alanda 2x native çözünürlüğe denk
   gelir, yani büyütünce bulanıklaşmaz. transform-origin imleci takip eder,
   böylece nereye bakıyorsan orası büyür. Yalnızca imleçli cihazda: dokunmatikte
   hover yok, orada şerit parmakla kaydırılıyor. */
@media (hover: hover) and (pointer: fine) {
  .galeri__ipucu { display: inline-flex; }
  .gkare {
    overflow: hidden;
    cursor: zoom-in;
  }
  .gkare img {
    transition: transform .45s var(--ease);
    will-change: transform;
  }
  .gkare.is-zoom img {
    transform: scale(2.1);
    transition: transform .18s ease-out;
  }
  /* Büyütürken ipucu çekilsin, görselin önünü kapatmasın */
  .galeri__cerceve:has(.gkare.is-zoom) .galeri__ipucu { opacity: 0; }
}

/* Sekme oklari: seridin kaydirilabildigini gorunur kilar. Yalnizca o yonde
   kaydirilacak yer varken JS gosteriyor; iki uctan birindeysen o ok gizlenir.
   Arkalarindaki gecis, sekmelerin okun altina suzuluyor izlenimi verir. */
.usek__sarmal { position: relative; }
.usek__ok {
  position: absolute;
  top: 0;
  bottom: 1px;                 /* alt cizginin uzerine binmesin */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  padding: 0;
  color: var(--c-black);
  transition: color var(--t-fast);
}
.usek__ok[hidden] { display: none; }
.usek__ok:hover { color: var(--c-accent); }
.usek__ok--sol {
  left: 0;
  justify-items: start;
  background: linear-gradient(to right, var(--c-bg) 58%, rgba(255, 255, 255, 0));
}
.usek__ok--sag {
  right: 0;
  justify-items: end;
  background: linear-gradient(to left, var(--c-bg) 58%, rgba(255, 255, 255, 0));
}

/* Sekme seridi her genislikte kendi icinde kayar. Yedi sekme 1124px
   yer kapliyor; yalnizca 640 altinda kaydirilabilir yapinca 768 ve 1024'te
   sayfa yatay tasiyordu. overscroll kesiliyor ki kaydirma sayfaya bulasmasin. */
.usek__bar {
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.usek__bar::-webkit-scrollbar { display: none; }
.usek__seritler {
  position: relative;
  display: flex;
  gap: 4px;
}
.usek__tab {
  padding: 26px 20px 20px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.usek__tab:hover { color: var(--c-black); }
.usek__tab.is-on { color: var(--c-black); }

/* Konumu JS olcup yaziyor */
.usek__ink {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-black);
  transition: left .42s var(--ease), width .42s var(--ease);
}

.usek__govde { padding-top: 44px; }
.usek__panel[hidden] { display: none; }
.usek__panel.is-on { animation: usek-in .4s var(--ease) backwards; }
@keyframes usek-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.usek__etiket {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.usek__h {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-black);
}
.usek__giris { max-width: 660px; font-size: 14px; line-height: 1.75; color: var(--c-muted-dark); }
.usek__giris b { color: var(--c-black); font-weight: 600; }
.usek__dip { margin-top: 16px; font-size: 12px; color: var(--c-muted); }

/* --- Ürün hakkında --- */
.usek__ikili {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: start;
}
.usek__metin p { font-size: 14.5px; line-height: 1.85; color: var(--c-muted-dark); }

.uanlat__kunye { border-top: 1px solid var(--c-line); }
.uanlat__kunye > div {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}
.uanlat__kunye dt {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.uanlat__kunye dd { font-size: 13.5px; color: var(--c-black); }

/* --- Koku piramidi: sekmenin icinde siyah blok, dramayi koruyor --- */
.npanel {
  padding: 52px 48px 40px;
  background: var(--c-black);
  color: var(--c-white);
}
.npanel__bas { margin-bottom: 30px; }
.npanel__etiket {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-white);
}
.npanel__h {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--c-white);
}
/* Koku piramidi: aileler + ust/orta/alt nota satirlari.
   Etiket solda, notalar sagda; satirlar ince cizgiyle ayriliyor. */
.npiramit { display: grid; }
.npiramit__sira {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 34px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.npiramit__sira:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.npiramit__et {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.npiramit__gov {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin: 0;
}
.npiramit__n {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  color: var(--c-white);
}
.npiramit__aile {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .38);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-white);
}

/* --- Marka --- */
/* Marka banneri kaynaginda 2560x610 — kendi oraninda, tam genislikte durur.
   Kirparsak markanin kendi kompozisyonu bozuluyor. */
.mpanel__banner {
  margin: 0 0 40px;
  overflow: hidden;
  background: var(--c-bg-tint);
}
.mpanel__banner img { display: block; width: 100%; height: auto; }

.mpanel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px;
  align-items: start;
}
.mpanel__metin p { font-size: 14.5px; line-height: 1.85; color: var(--c-muted-dark); }

.mpanel__kolBaslik {
  margin: 26px 0 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.mpanel__kol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.mpanel__kol li {
  padding: 8px 13px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--c-black);
}
.mpanel__link {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.mpanel__link:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* --- Değerlendirmeler --- */
.ypanel {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.ypanel__puan {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.ypanel__ozet .uyildiz { display: inline-block; margin-top: 10px; font-size: 15px; }
.ypanel__adet { margin-top: 6px; font-size: 12px; color: var(--c-muted); }

.udag { margin-top: 20px; list-style: none; }
.udag__s {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--c-muted-dark);
}
.udag__ray { height: 3px; background: var(--c-bg-soft-2); overflow: hidden; }
.udag__ray i { display: block; width: var(--w); height: 100%; background: var(--c-black); }
.udag__n { text-align: right; color: var(--c-muted); }

.uyorum { padding: 20px 0; border-top: 1px solid var(--c-line); }
.uyorum:first-child { padding-top: 0; border-top: 0; }
.uyorum__ust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 9px;
}
.uyorum__ad {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-black);
}
.uyorum__ust .uyildiz { font-size: 12px; }
.uyorum__t { font-size: 11.5px; color: var(--c-muted); }
.uyorum__m { font-size: 13.5px; line-height: 1.8; color: var(--c-muted-dark); }

/* --- Detay: uyarilar + sorumlu kisi --- */
.dpanel__uyari {
  padding: 22px 24px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.dpanel__baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-black);
}
.dpanel__ikon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.dpanel__liste { list-style: none; }
.dpanel__liste li {
  position: relative;
  padding: 7px 0 7px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-muted-dark);
}
.dpanel__liste li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--c-accent);
}

.dpanel__adres {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-muted-dark);
}
.dpanel__adres b { display: block; margin-bottom: 4px; color: var(--c-black); font-weight: 600; }
.dpanel__iletisim { margin-top: 18px; border-top: 1px solid var(--c-line); }
.dpanel__iletisim > div {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.dpanel__iletisim dt {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.dpanel__iletisim dd { font-size: 13.5px; color: var(--c-black); }
.dpanel__iletisim a { color: var(--c-black); }
.dpanel__iletisim a:hover { color: var(--c-accent); }
.dpanel__not { margin-top: 16px; font-size: 12px; line-height: 1.65; color: var(--c-muted); }

/* --- Yorum fotograflari: musterinin ekledigi kareler --- */
.uyorum__fotolar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.uyorum__fotolar img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  background: var(--c-bg-tint);
  border: 1px solid var(--c-line);
  transition: transform var(--t-fast);
}
.uyorum__fotolar img:hover { transform: scale(1.04); }

/* --- Oneri formu --- */
.ofor {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 20px 56px;
  align-items: start;
}
/* Sag sutunda dort oge var (secenekler, not etiketi, not alani, gonder);
   sol sutun dordunu birden kapsamazsa gonder butonu sola dusuyor. */
.ofor__bas { grid-row: span 4; }
.ofor__giris { font-size: 13.5px; line-height: 1.8; color: var(--c-muted-dark); }

.ofor__secenekler { display: grid; gap: 2px; }
.ofor__sec {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ofor__sec:hover { border-color: var(--c-line-2); background: var(--c-bg-tint); }
.ofor__sec input { position: absolute; opacity: 0; pointer-events: none; }
.ofor__kutu {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--c-line-2);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ofor__sec input:checked + .ofor__kutu {
  background: var(--c-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color: var(--c-black);
}
.ofor__sec input:focus-visible + .ofor__kutu { outline: 2px solid var(--c-black); outline-offset: 2px; }
.ofor__sec input:checked ~ .ofor__ad { color: var(--c-black); }
.ofor__ad { font-size: 13.5px; line-height: 1.5; color: var(--c-muted-dark); }

.ofor__notEt {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.ofor__notEt span {
  margin-left: 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-muted-2);
}
.ofor__not {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 11px 13px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-body);
  resize: vertical;
  transition: border-color var(--t-fast);
}
.ofor__not::placeholder { color: var(--c-muted-2); }
.ofor__not:focus { outline: none; border-color: var(--c-black); }

.ofor__alt { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.ofor__gonder { flex: none; padding: 0 34px; }
.ofor__tesekkur {
  font-size: 12.5px;
  color: var(--c-accent);
}
.ofor__tesekkur.is-uyari { color: var(--c-muted-dark); }

/* --- Benzer urunler: sekmelerin disinda, sayfanin altinda --- */
.ilgili { background: var(--c-bg-tint); border-top: 1px solid var(--c-line); }
.ilgili__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter) 84px;
}
.ilgili__bas { margin-bottom: 34px; }
.ilgili__h {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-black);
}

/* --- İlgili yazılar: anasayfadaki .post kartı yeniden kullanılıyor.
   .post'un flex temeli carousel içindi; ızgarada flex yok sayılır,
   kart hücreyi doldurur, o yüzden ek kural gerekmiyor. --- */
.yazilar { border-top: 1px solid var(--c-line); }
.yazilar__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 76px var(--gutter) 88px;
}
.yazilar__bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.yazilar__h {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-black);
}
.yazilar__tum {
  flex: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.yazilar__tum:hover { color: var(--c-accent); border-color: var(--c-accent); }
.yazilar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

/* ==========================================================================
   23. HAKKIMIZDA
   Ritim bilincli kuruldu: sessiz tipografik acilis -> tam genislik fotograf
   -> iki sutunlu hikaye -> yatay kilometre taslari -> uc sutun -> siyah
   rakam bandi -> kapanis. Anasayfada kahraman slider var; burada acilisi
   kasten sakin tuttuk ki iki sayfa ayni ritmi tekrar etmesin.
   ========================================================================== */

/* Ortak: cizgili kucuk etiket */
.hgiris__etiket {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.hgiris__cizgi { width: 34px; height: 1px; background: var(--c-accent); }

/* --- Açılış --- */
.hgiris__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 76px var(--gutter) 56px;
}
.hgiris__h {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.hgiris__gorsel { margin: 0; overflow: hidden; background: var(--c-bg-tint); }
.hgiris__gorsel img { display: block; width: 100%; height: auto; }

/* --- Hikâye --- */
.hhikaye__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 84px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
/* Metin uzun; gorsel kayarken ekranda kalsin */
.hhikaye__gorsel {
  position: sticky;
  top: calc(var(--h-menubar) + 24px);
  margin: 0;
  overflow: hidden;
  background: var(--c-bg-tint);
}
.hhikaye__gorsel img { display: block; width: 100%; height: auto; }

.hhikaye__metin p {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-muted-dark);
}
.hhikaye__metin p:last-child { margin-bottom: 0; }

.halinti {
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--c-accent);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--c-black);
}

/* --- Kilometre taşları --- */
.hyol { background: var(--c-bg-tint); border-block: 1px solid var(--c-line); }
.hyol__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter);
}
.hyol__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  list-style: none;
}
/* Cizgi + nokta: her durak kendi genisliginde bir cizgi tasir.
   Once cizgiyi bosluga tasirip (right:-34px) kesintisiz gostermeyi denedim;
   iki sutuna dusunce satir sonundaki durak sayfayi 10px yatay tasiriyordu
   ve suclu bir pseudo-element oldugu icin ogeleri tarayan testte gorunmuyordu.
   Bolumlu cizgi hem guvenli hem de her sutun sayisinda ayni duruyor. */
.hdurak { position: relative; padding-top: 32px; }
.hdurak::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-line-2);
}
.hdurak::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--c-accent);
}
.hdurak__yil {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--c-black);
}
.hdurak__h {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hdurak__m { font-size: 13.5px; line-height: 1.7; color: var(--c-muted-dark); }

/* --- Neobloom ne için var? --- */
.hvar__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 84px var(--gutter);
}
.hvar__bas { max-width: 640px; margin-bottom: 48px; }
.hvar__h {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.hvar__giris { font-size: 15px; line-height: 1.85; color: var(--c-muted-dark); }

.hvar__sutunlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.hsut__gorsel {
  position: relative;
  margin: 0 0 20px;
  overflow: hidden;
  background: var(--c-bg-tint);
}
.hsut__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .7s var(--ease);
}
.hsut:hover .hsut__gorsel img { transform: scale(1.04); }
.hsut__no {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 12px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
}
.hsut__h {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--c-black);
}
.hsut__m { font-size: 14px; line-height: 1.8; color: var(--c-muted-dark); }

/* --- Rakamlar --- */
.hrakamlar { background: var(--c-black); color: var(--c-white); }
.hrakamlar__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 62px var(--gutter);
}
.hrakamlar__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  list-style: none;
}
.hrakam { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 20px; }
.hrakam__n {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-white);
}
.hrakam__e {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

/* --- Kapanış --- */
.hson__in {
  max-width: 860px;
  margin: 0 auto;
  padding: 88px var(--gutter) 96px;
  text-align: center;
}
.hson .hgiris__etiket { justify-content: center; }
.hson__m {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--c-black);
}
.hson__cagri {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--c-accent);
}
.hson__dugmeler {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hbtn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.hbtn:hover { background: var(--c-black); color: var(--c-white); }
.hbtn--ana { background: var(--c-black); color: var(--c-white); }
.hbtn--ana:hover { background: var(--c-accent); border-color: var(--c-accent); }

/* ==========================================================================
   24. GÜZELLİK ATLASI
   83 maddelik sozluk. Eski sayfada her madde akordiyondu, okumak icin tek tek
   tiklamak gerekiyordu. Burada hepsi acik: gezinmeyi arama kutusu ve yapiskan
   A-Z seridi ustleniyor. Harf, masaustunde sol sutunda yapisik kalir; boylece
   uzun listede nerede oldugunu hep bilirsin.
   ========================================================================== */

/* --- Kapak --- */
.akapak { position: relative; }
.akapak__gorsel { overflow: hidden; background: var(--c-bg-tint); }
.akapak__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}
/* Beyaz kart gorselin uzerine biner — sayfaya derinlik veren tek hareket */
.akapak__in {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: -110px auto 0;
  padding: 46px 56px 40px;
  background: var(--c-bg);
  text-align: center;
}
.akapak .hgiris__etiket { justify-content: center; }
.akapak__h {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.akapak__giris {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--c-muted-dark);
}

/* --- Arama --- */
.aara {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 28px auto 0;
  border: 1px solid var(--c-line-2);
  transition: border-color var(--t-fast);
}
.aara:focus-within { border-color: var(--c-black); }
.aara__ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 54px;
  color: var(--c-muted);
}
.aara__alan {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-body);
}
.aara__alan::placeholder { color: var(--c-muted-2); }
.aara__alan:focus { outline: none; }
.aara__alan::-webkit-search-cancel-button { display: none; }
.aara__temizle {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  color: var(--c-muted-dark);
  transition: color var(--t-fast);
}
.aara__temizle:hover { color: var(--c-black); }
.aara__temizle[hidden] { display: none; }

.akapak__sayac {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.akapak__sayac b { color: var(--c-black); }

/* --- A–Z şeridi (yapışkan) --- */
/* Sarmal yapisir, kaydirma ic kutuda: oklar seritle birlikte kaymasin diye
   ikisi ayrildi. */
.aharfler {
  position: sticky;
  top: var(--h-menubar);
  z-index: 60;
  margin-top: 36px;
  background: var(--c-bg);
  border-block: 1px solid var(--c-line);
}
.aharfler__kaydir {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.aharfler__kaydir::-webkit-scrollbar { display: none; }

/* Oklar: yalnizca telefonda (asagidaki 640 blogunda aciliyor) */
.aharfler__ok { display: none; }
.aharfler__in {
  display: flex;
  justify-content: center;
  gap: 2px;
  min-width: max-content;
  margin: 0 auto;
  padding: 9px var(--gutter);
}
.atlas-harf {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast);
}
.atlas-harf:hover { background: var(--c-bg-soft); color: var(--c-black); }
.atlas-harf.is-bos { color: var(--c-line-2); pointer-events: none; }

/* --- Maddeler --- */
/* DIKKAT: kapsayici ".atlas" olamaz — anasayfadaki Guzellik Atlasi bolumu
   ayni adi kullaniyor ve "display:grid; 1fr 1fr" tasiyor. Ilk denemede sozluk
   harfleri ikiser sutun halinde yan yana diziliyordu. */
.sozluk {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px var(--gutter) 88px;
}

.atlas-bolum {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 40px;
  /* Yapiskan serit hedefi ortmesin */
  scroll-margin-top: calc(var(--h-menubar) + 62px);
}
.atlas-bolum[hidden] { display: none; }
.atlas-bolum__harf {
  position: sticky;
  top: calc(var(--h-menubar) + 74px);
  align-self: start;
  padding-top: 34px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-line-2);
}

.madde {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--c-line);
}
.madde[hidden] { display: none; }
.atlas-bolum:first-child .madde:first-child { border-top: 0; }

.madde__gorsel { overflow: hidden; background: var(--c-bg-tint); }
.madde__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .7s var(--ease);
}
.madde:hover .madde__gorsel img { transform: scale(1.05); }

/* Okuma olcusu: genis ekranda satir 1000px'e uzuyordu, goz satir sonunda
   kayboluyor. ~78 karakterde tutuluyor. */
.madde__govde { max-width: 78ch; }
.madde__ad {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--c-black);
}
.madde__govde p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-muted-dark);
}
.madde__govde p:last-child { margin-bottom: 0; }

/* --- Sonuç yok --- */
.atlas-bos {
  padding: 64px 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--c-muted-dark);
}
.atlas-bos[hidden] { display: none; }
.atlas-bos button {
  padding: 0;
  border-bottom: 1px solid var(--c-black);
  font-family: inherit;
  font-size: inherit;
  color: var(--c-black);
}
.atlas-bos button:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* --- Başa dön --- */
.ayukari {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--c-black);
  color: var(--c-white);
  transition: background var(--t-fast);
}
.ayukari:hover { background: var(--c-accent); }
.ayukari[hidden] { display: none; }

/* ==========================================================================
   25. SEPET SAYFASI
   Sol sutun satirlar, sag sutun yapiskan siparis ozeti. Tum tutarlar
   main.js 24. blokta kurusdan hesaplanir; buradaki degerler yalnizca
   ilk (JS'siz) goruntu icin. Rakamlar tabular-nums ile alt alta hizali.
   ========================================================================== */

.sep-head {
  padding: clamp(34px, 4vw, 60px) var(--gutter) clamp(22px, 2.4vw, 34px);
  max-width: var(--container);
  margin-inline: auto;
}
.sep-head__sira {
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.sep-head__metin { min-width: 0; }
.sep-head__ozet {
  margin-top: 14px;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}
.sep-head__ozet b { color: var(--c-black); font-weight: 500; }

/* --- Adim seridi: 01 Sepet — 02 Bilgiler — 03 Onay --- */
.sadim {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  padding-bottom: 6px;
}
.sadim__i {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.sadim__i + .sadim__i::before {
  content: "";
  width: clamp(16px, 2.6vw, 44px);
  height: 1px;
  margin-left: 14px;
  background: var(--c-line-2);
}
.sadim__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-line-2);
  font-size: 10px;
  letter-spacing: .04em;
}
.sadim__i.is-active { color: var(--c-black); }
.sadim__i.is-active .sadim__n {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

/* --- Ucretsiz kargo cubugu: tam genislik, menubarin altindaki serit --- */
.skargo {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  /* Serit tam genislikte (cizgiler ekrani boydan boya gecsin) ama icerigi
     sayfa kabina hizali: 1440 ustunde kabin ortalandigi icin duz --gutter
     verirsek kamyon ikonu "Sepetim" basligindan yuzlerce piksel solda kalir. */
  padding-block: 15px;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  border-block: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.skargo[hidden] { display: none; }
.skargo__ikon { flex: none; color: var(--c-black); }
.skargo__m {
  flex: none;
  font-size: 13px;
  color: var(--c-muted-dark);
}
.skargo__m b {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-black);
}
.skargo.is-yaklasiyor .skargo__m b { color: var(--c-accent); }
.skargo__ray {
  flex: 1;
  min-width: 90px;
  max-width: 560px;
  height: 3px;
  background: var(--c-bg-soft-2);
  overflow: hidden;
}
.skargo__ray i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--c-accent);
  transition: width .45s var(--ease);
}
.skargo__esik {
  flex: none;
  /* Esik degeri kabın sag kenarina otursun; ray ile arasi bosluk kalsin */
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.skargo__esik b { font-weight: 500; color: var(--c-muted-dark); letter-spacing: .04em; }

/* --- Iki sutunlu duzen --- */
.sep-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(30px, 3.4vw, 52px) var(--gutter) clamp(56px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: clamp(34px, 4vw, 68px);
  align-items: start;
}
.sep-wrap[hidden] { display: none; }
.sep-sol { min-width: 0; }

.slist__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}
.slist__h {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.slist__h span { color: var(--c-muted-2); letter-spacing: .06em; }

/* Sepeti bosalt: tek tikta silmez, yerinde onay ister */
.sbosalt { font-size: 12px; color: var(--c-muted); }
.sbosalt__ac,
.sbosalt__evet,
.sbosalt__hayir {
  font-size: 12px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.sbosalt__ac:hover { color: var(--c-accent); }
.sbosalt__onay { display: inline-flex; align-items: center; gap: 10px; color: var(--c-black); }
.sbosalt__onay[hidden] { display: none; }
.sbosalt__evet { color: var(--c-accent); }
.sbosalt__hayir:hover { color: var(--c-black); }

/* --- Satir --- */
.slist { border-top: 1px solid var(--c-black); }

.sline {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--c-line);
  transition: opacity var(--t-mid), transform var(--t-mid);
}
.sline.is-cikiyor { opacity: 0; transform: translateX(-14px); }
.sline.is-mesgul { opacity: .5; pointer-events: none; }

.sline__gorsel {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.sline__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.sline:hover .sline__gorsel img { transform: scale(1.04); }

.sline__gov { min-width: 0; display: flex; flex-direction: column; }

.sline__bas { display: flex; align-items: flex-start; gap: 16px; }
.sline__kimlik { flex: 1; min-width: 0; }

.sline__marka {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.sline__ad {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--c-black);
}
.sline__ad a { transition: color var(--t-fast); }
.sline__ad a:hover { color: var(--c-accent); }
.sline__nitelik { margin-top: 8px; font-size: 12.5px; color: var(--c-muted); }
.sline__rozet {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 9px;
  background: var(--c-accent);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-white);
}

.sline__sil {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 0 0;
  color: var(--c-muted-2);
  transition: color var(--t-fast), background var(--t-fast);
}
.sline__sil:hover { background: var(--c-bg-soft); color: var(--c-accent); }

/* Satira bagli ekler: secilen hediye, hediye paketi + kart notu */
.sek { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
/* Izgara: baslik ile fiyat ust satirda, aciklama altta tam genislikte.
   Flex'te aciklama dar bir sutuna sikisip 4 satira boluniyordu. */
.sek__i {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "ikon ad  fiyat sil"
    "ikon not not   not";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 10px 13px;
  background: var(--c-bg-soft);
}
.sek__i--hediye {
  box-shadow: inset 2px 0 0 var(--c-accent);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "ikon ad  fiyat"
    "ikon not not";
}
.sek__gorsel { grid-area: ikon; width: 40px; height: 40px; object-fit: cover; }
.sek__ikon { grid-area: ikon; color: var(--c-muted-dark); }
.sek__ad {
  grid-area: ad;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.sek__aciklama {
  grid-area: not;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-muted);
  overflow-wrap: anywhere;
}
.sek__aciklama--el { font-style: italic; }
.sek__f {
  grid-area: fiyat;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
}
.sek__sil {
  grid-area: sil;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--c-muted-2);
  transition: color var(--t-fast);
}
.sek__sil:hover { color: var(--c-accent); }

/* Adet + stok + fiyat */
.sline__alt {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sadet {
  flex: none;
  display: flex;
  align-items: center;
  border: 1px solid var(--c-line-2);
}
.sadet__d {
  width: 38px;
  height: 44px;
  font-size: 16px;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.sadet__d:hover { background: var(--c-bg-soft); }
.sadet__d[disabled] { color: var(--c-line-2); cursor: default; background: none; }
.sadet__g {
  width: 34px;
  height: 44px;
  border: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.sadet__g:focus-visible { outline: 2px solid var(--c-black); outline-offset: -4px; }

.sline__stok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--c-muted);
}
.sline__stok span {
  width: 5px;
  height: 5px;
  background: var(--c-accent);
}
.sline__stok--az { color: var(--c-accent); }

.sline__fiyat {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sline__birim {
  font-size: 11.5px;
  color: var(--c-muted-2);
}
.sline__birim[hidden] { display: none; }
.sline__eski {
  font-size: 13px;
  color: var(--c-muted-2);
  text-decoration: line-through;
}
.sline__eski[hidden] { display: none; }
.sline__tutar {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-black);
  white-space: nowrap;
}

.sline__araclar { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.sline__arac {
  font-size: 12px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.sline__arac:hover { color: var(--c-black); }
.sline__arac.is-done { color: var(--c-accent); text-decoration: none; }

/* --- Siparis notu --- */
.snot { margin-top: 30px; }
.snot__et {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.snot__et span { color: var(--c-muted-2); letter-spacing: .06em; }
.snot__alan {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-body);
  resize: vertical;
  transition: border-color var(--t-fast);
}
.snot__alan::placeholder { color: var(--c-muted-2); }
.snot__alan:focus { border-color: var(--c-black); outline: none; }
.snot__say { margin-top: 7px; text-align: right; font-size: 11.5px; color: var(--c-muted-2); }

.sdevam {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.sdevam:hover { color: var(--c-black); }

/* --- Sag sutun: siparis ozeti --- */
.sep-sag { position: sticky; top: calc(var(--h-menubar) + 24px); }
.ozet {
  border: 1px solid var(--c-line);
  padding: 26px;
}
.ozet__h {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}

/* Kupon ve hediye ceki: kapali satir, tiklaninca form acilir */
.skod { border-bottom: 1px solid var(--c-line); }
.skod__ac {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  text-align: left;
}
.skod__ad {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-black);
}
.skod__isaret {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-line-2);
  color: var(--c-black);
  transition: transform var(--t-mid), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.skod__ac:hover .skod__isaret { border-color: var(--c-black); }
/* Donen sey SVG degil, onu saran HTML kutusu. SVG kok ogesinde donme
   merkezi kutunun sol ust kosesi kabul ediliyor ve artı isareti kayboluyor. */
.skod__arti { display: block; line-height: 0; transition: transform var(--t-mid); }
.skod__ac[aria-expanded="true"] .skod__isaret {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}
.skod__ac[aria-expanded="true"] .skod__arti { transform: rotate(45deg); }
.skod__form { display: flex; gap: 8px; padding-bottom: 15px; }
.skod__form[hidden] { display: none; }
.skod__giris {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color var(--t-fast);
}
.skod__giris::placeholder { letter-spacing: .04em; text-transform: none; color: var(--c-muted-2); }
.skod__giris:focus { border-color: var(--c-black); outline: none; }
.skod__btn {
  flex: none;
  height: 44px;
  padding: 0 18px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.skod__btn:hover { background: var(--c-accent); }
.skod__uyari {
  padding-bottom: 14px;
  font-size: 12px;
  color: var(--c-accent);
}
.skod__uyari[hidden] { display: none; }
.skod__liste:not(:empty) { padding-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.skod__cip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--c-bg-soft);
  font-size: 12px;
}
.skod__cip-ad {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-black);
}
.skod__cip-tut {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.skod__cip-sil {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--c-muted-2);
  transition: color var(--t-fast);
}
.skod__cip-sil:hover { color: var(--c-black); }

/* Tutar satirlari */
.ozet__satirlar { padding: 18px 0; font-variant-numeric: tabular-nums; }
.ozet__s {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--c-muted-dark);
}
.ozet__s[hidden] { display: none; }
.ozet__s dt span { color: var(--c-muted-2); font-size: 12.5px; }
.ozet__s dd { color: var(--c-black); font-family: var(--font-display); font-weight: 500; }
.ozet__s--eksi dd { color: var(--c-accent); }

.ozet__toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--c-black);
  font-variant-numeric: tabular-nums;
}
.ozet__toplam span {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.ozet__toplam b {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.ozet__kdv { margin-top: 6px; text-align: right; font-size: 11.5px; color: var(--c-muted); }
.ozet__kdv b { font-weight: 500; color: var(--c-muted-dark); }

.ozet__puan {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
  padding: 11px 13px;
  background: var(--c-bg-soft);
  font-size: 12px;
  color: var(--c-muted-dark);
}
.ozet__puan svg { position: relative; top: 2px; color: var(--c-accent); }
.ozet__puan b { font-weight: 500; color: var(--c-black); }
.ozet__puan span { color: var(--c-muted-2); }

.ozet__ode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  margin-top: 18px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.ozet__ode:hover { background: var(--c-accent); }
.ozet__ode svg { transition: transform var(--t-fast); }
.ozet__ode:hover svg { transform: translateX(4px); }

.ozet__not { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--c-muted); }

.ozet__guven {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ozet__guven li { display: flex; align-items: flex-start; gap: 11px; }
.ozet__guven svg { flex: none; margin-top: 1px; color: var(--c-black); }
.ozet__guven span { font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.ozet__guven b {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-black);
}
/* Ozette acik zemin surumu kullaniliyor (footer'daki siyah zeminli degil),
   bu yuzden solduracak bir opaklik yok. */
.ozet__ssl { margin-top: 18px; width: 100%; }

/* --- Bos sepet --- */
.sbos {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(46px, 6vw, 88px) var(--gutter) clamp(60px, 7vw, 110px);
  text-align: center;
}
.sbos[hidden] { display: none; }
.sbos__ikon { display: inline-flex; color: var(--c-line-2); }
.sbos__h {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.sbos__m { margin-top: 12px; font-size: 14px; color: var(--c-muted); }
.sbos__btnlar {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.sbos__b {
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 34px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.sbos__b:hover { background: var(--c-accent); }
.sbos__l {
  font-size: 12.5px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sbos__l:hover { color: var(--c-black); }

/* --- Mobil sabit alt cubuk: yalnizca 1023 altinda gorunur --- */
.smobil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--c-bg);
  box-shadow: 0 -1px 0 var(--c-line), 0 -12px 28px -22px rgba(0, 0, 0, .5);
}
.smobil[hidden] { display: none; }
.smobil__t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.smobil__t span {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.smobil__t b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--c-black);
}
.smobil__b {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.smobil__b:active { background: var(--c-accent); }


/* ==========================================================================
   26. ÖDEME SAYFASI
   Sol sutunda numarali bloklar, sagda yapiskan siparis ozeti. Sepet
   sayfasiyla ayni kabuk (.sep-head, .sadim, .ozet, .skod, .smobil) yeniden
   kullaniliyor; burada yalnizca forma ve odeme adimlarina ait parcalar var.
   ========================================================================== */

/* Sepet adimi tamamlandi isareti */
.sadim__i.is-tamam { color: var(--c-black); }
.sadim__geri { display: flex; align-items: center; gap: 9px; }
.sadim__i.is-tamam .sadim__n {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}
.sadim__geri:hover .sadim__n { background: var(--c-accent); border-color: var(--c-accent); }

.sep-head .cat-title { line-height: 1.1; }

.ode-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(28px, 3.2vw, 46px) var(--gutter) clamp(56px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: clamp(30px, 3.4vw, 56px);
  align-items: start;
}
.ode-sol { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* Ozet 1500px'i asiyor; yapiskan birakip da tasarsak "Siparisi Tamamla"
   butonu masaustunde hicbir zaman ekrana gelmiyordu. Kutu kendi icinde
   kayiyor, sayfayla birlikte de yukari cikmiyor. */
/* Sag sutun kendi icinde kaymiyor: ozet sayfayla birlikte, en alta kadar akiyor. */
.ode-sag {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Uye girisi cagrisi --- */
.giris-serit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.giris-serit__ikon { flex: none; color: var(--c-black); }
.giris-serit__m { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--c-muted); }
.giris-serit__m b {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.giris-serit__b {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.giris-serit__b:hover { background: var(--c-black); color: var(--c-white); }
.giris-serit__b svg { transition: transform var(--t-fast); }
.giris-serit__b:hover svg { transform: translateX(3px); }

/* --- Uyelik olusturma --- */
.uyelik { border: 1px solid var(--c-line); padding: 18px 20px; }
.uyelik.is-kapali .uyelik__gov { display: none; }
.uyelik__bas { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.uyelik__bas input { position: absolute; opacity: 0; width: 0; height: 0; }
.uyelik__metin { font-size: 12.5px; line-height: 1.6; color: var(--c-muted); }
.uyelik__metin b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-black);
}
.uyelik__gov { margin-top: 16px; padding-left: 30px; }
.uyelik__ipucu { margin-top: 10px; font-size: 11.5px; color: var(--c-muted-2); }
.uyelik__ipucu.is-hata { color: var(--c-accent); }

/* --- Onay kutusu (tum sayfada ortak) --- */
.okutu {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  color: var(--c-white);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.okutu svg { opacity: 0; transition: opacity var(--t-fast); }
input:checked ~ .okutu,
input:checked + .okutu {
  background: var(--c-black);
  border-color: var(--c-black);
}
input:checked ~ .okutu svg,
input:checked + .okutu svg { opacity: 1; }
input:focus-visible ~ .okutu,
input:focus-visible + .okutu { outline: 2px solid var(--c-black); outline-offset: 2px; }

.onay { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; cursor: pointer; }
.onay input { position: absolute; opacity: 0; width: 0; height: 0; }
.onay__m { font-size: 12.5px; line-height: 1.55; color: var(--c-muted-dark); }
.onay__m a {
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line-2);
  transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.onay__m a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }
.onay__m em {
  font-style: normal;
  margin-left: 5px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.onay--kutu { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--c-line); }
.onay--kutu:hover { border-color: var(--c-line-2); }

/* --- Numarali blok --- */
.blok { border: 1px solid var(--c-line); background: var(--c-bg); transition: border-color var(--t-mid); }
.blok.is-aktif { border-color: var(--c-black); }
.blok__bas {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.blok__no {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}
.blok__no svg { position: absolute; opacity: 0; transition: opacity var(--t-fast); }
.blok__no span { transition: opacity var(--t-fast); }
.blok.is-tamam .blok__no { background: var(--c-accent); }
.blok.is-tamam .blok__no svg { opacity: 1; }
.blok.is-tamam .blok__no span { opacity: 0; }
.blok__h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--c-black);
}
.blok__ipucu {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--c-muted);
  text-align: right;
}
.blok__gov { padding: 24px 22px; }

/* --- Form alanlari --- */
.izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.izgara[hidden] { display: none; }   /* display veren kutunun [hidden] karsiligi sart */
.alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.alan--tam { grid-column: 1 / -1; }
.alan__et {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-black);
}
.alan__et i { font-style: normal; color: var(--c-accent); }
.alan__et em {
  font-style: normal;
  letter-spacing: .06em;
  color: var(--c-muted-2);
}
.alan__sar { position: relative; display: block; }

.giris {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-size: 14px;
  color: var(--c-body);
  transition: border-color var(--t-fast);
}
.giris::placeholder { color: var(--c-muted-2); }
.giris:hover { border-color: var(--c-muted-2); }
.giris:focus { border-color: var(--c-black); outline: none; }
.giris--alan { height: auto; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.giris:disabled { background: var(--c-bg-soft); color: var(--c-muted-2); cursor: not-allowed; }

.secim { appearance: none; padding-right: 42px; cursor: pointer; }
.alan__chev {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-muted-dark);
}
.alan__goz {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--c-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.alan__goz:hover { background: var(--c-bg-soft); color: var(--c-black); }
.alan__goz.is-acik { color: var(--c-accent); }
.alan__tik {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--c-black);
  color: var(--c-white);
}
.alan__tik[hidden] { display: none; }
.alan__marka {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  padding: 3px 8px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-black);
}
.alan__marka[hidden] { display: none; }

.alan__hata {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-accent);
}
.alan.is-hata .alan__hata { display: flex; }
.alan.is-hata .giris { border-color: var(--c-accent); }
.alan__say { text-align: right; font-size: 11.5px; color: var(--c-muted-2); }

/* --- Acilir alan (fatura, not, hediye) --- */
.acilir { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acilir > div { overflow: hidden; min-height: 0; }
.acilir.is-acik { grid-template-rows: 1fr; }
.acilir__ic { padding-top: 20px; }

.notac {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: color var(--t-fast);
}
.notac:hover { color: var(--c-black); }
.notac svg { transition: transform var(--t-mid); }
.notac[aria-expanded="true"] { color: var(--c-black); }
.notac[aria-expanded="true"] svg { transform: rotate(45deg); }

/* --- Anahtar (toggle) --- */
.anahtar-satir {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.anahtar-satir > svg { flex: none; color: var(--c-black); }
.anahtar-satir__m { flex: 1; min-width: 0; font-size: 12px; color: var(--c-muted); }
.anahtar-satir__m > b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-black);
}
.anahtar-satir__f { color: var(--c-accent); font-weight: 500; }

.anahtar { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar__ray {
  position: relative;
  width: 46px;
  height: 24px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.anahtar__ray::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--c-muted-2);
  transition: transform var(--t-mid) var(--ease), background var(--t-fast);
}
.anahtar input:checked + .anahtar__ray { background: var(--c-black); border-color: var(--c-black); }
.anahtar input:checked + .anahtar__ray::after { transform: translateX(22px); background: var(--c-white); }
.anahtar input:focus-visible + .anahtar__ray { outline: 2px solid var(--c-black); outline-offset: 3px; }

/* --- Segment (bireysel / kurumsal) --- */
.segment { display: inline-flex; margin-bottom: 20px; border: 1px solid var(--c-line-2); }
.segment__b {
  height: 40px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast);
}
.segment__b + .segment__b { border-left: 1px solid var(--c-line-2); }
.segment__b:hover { color: var(--c-black); }
.segment__b.is-active { background: var(--c-black); color: var(--c-white); }

/* --- Alt baslik --- */
.altbaslik {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.altbaslik::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.altbaslik svg { color: var(--c-accent); }

/* --- Secenek karti (kargo, banka) --- */
.secenekler { display: flex; flex-direction: column; gap: 12px; }
.secenek { position: relative; display: block; }
.secenek input { position: absolute; opacity: 0; width: 0; height: 0; }
.secenek__kutu {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.secenek__kutu:hover { border-color: var(--c-muted-2); }
.secenek input:checked + .secenek__kutu { border-color: var(--c-black); background: var(--c-bg-tint); }
.secenek input:focus-visible + .secenek__kutu { outline: 2px solid var(--c-black); outline-offset: 2px; }

.secenek__radyo {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  transition: border-color var(--t-fast);
}
.secenek__radyo::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--c-black);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.secenek input:checked + .secenek__kutu .secenek__radyo { border-color: var(--c-black); }
.secenek input:checked + .secenek__kutu .secenek__radyo::after { opacity: 1; transform: scale(1); }

.secenek__marka {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 34px;
  border: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--c-muted-dark);
}
.secenek input:checked + .secenek__kutu .secenek__marka { border-color: var(--c-black); color: var(--c-black); }
.secenek__gov { min-width: 0; }
.secenek__ad {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
}
.secenek__et {
  font-style: normal;
  padding: 3px 8px;
  background: var(--c-accent);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-white);
}
.secenek__not { display: block; margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.secenek__f {
  flex: none;
  text-align: right;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-black);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.secenek__f.is-bedava { color: var(--c-accent); }
.secenek__f del { display: block; margin-top: 3px; font-size: 11.5px; color: var(--c-muted-2); }

/* --- Teslimat gunleri --- */
.gunler { display: flex; flex-wrap: wrap; gap: 10px; }
.gun { position: relative; }
.gun input { position: absolute; opacity: 0; width: 0; height: 0; }
.gun__kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 10px 14px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.gun__kutu b { font-family: var(--font-display); font-size: 12.5px; font-weight: 500; color: var(--c-black); }
.gun__kutu span { font-size: 10.5px; color: var(--c-muted); }
.gun__kutu:hover { border-color: var(--c-muted-2); }
.gun input:checked + .gun__kutu { border-color: var(--c-black); background: var(--c-black); }
.gun input:checked + .gun__kutu b { color: var(--c-white); }
.gun input:checked + .gun__kutu span { color: rgba(255, 255, 255, .62); }
.gun input:focus-visible + .gun__kutu { outline: 2px solid var(--c-black); outline-offset: 2px; }
.gunler__not { margin-top: 12px; font-size: 11.5px; color: var(--c-muted-2); }

/* --- Odeme yontemi sekmeleri --- */
.odetabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.odetab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.odetab:hover { border-color: var(--c-muted-2); }
.odetab.is-active { border-color: var(--c-black); background: var(--c-bg-tint); }
.odetab svg { flex: none; color: var(--c-muted-dark); transition: color var(--t-fast); }
.odetab.is-active svg { color: var(--c-black); }
.odetab__gov { min-width: 0; }
.odetab__gov b {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-black);
}
.odetab__gov small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--c-muted); }
.odetab__et {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 3px 8px;
  background: var(--c-accent);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-white);
}

.odepane[hidden] { display: none; }

/* --- 3D kart --- */
.kart-alan { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.kart-sahne { perspective: 1200px; }
.kart3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.kart3d.is-arka { transform: rotateY(180deg); }
.kart3d__yuz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-black);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.kart3d__yuz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, .04) 26px 27px);
}
.kart3d__arka { transform: rotateY(180deg); }
.kart3d__ic {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 20px 22px;
}
.kart3d__ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kart3d__cip { width: 40px; height: 28px; background: linear-gradient(150deg, #d8d8d8, #8f8f8f 55%, #cfcfcf); }
.kart3d__marka {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.kart3d__no {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kart3d__alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.kart3d__et {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.kart3d__deger {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .94);
}
.kart3d__serit { display: block; height: 40px; margin: 8px -22px 0; background: #262626; }
.kart3d__cvvsatir { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.kart3d__cvv {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 32px;
  padding: 0 12px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .18em;
}
.kart3d__not { margin-top: auto; font-size: 9.5px; line-height: 1.6; color: rgba(255, 255, 255, .5); }

.kart-guven {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.kart-guven svg { color: var(--c-black); }

.paytr[hidden] { display: none; }

/* --- Bilgi kutusu --- */
.bilgi {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-muted-dark);
}
.bilgi:last-child { margin: 20px 0 0; }
.bilgi svg { flex: none; margin-top: 1px; color: var(--c-black); }
.bilgi b { font-weight: 500; color: var(--c-black); }
.bilgi--vurgu { box-shadow: inset 3px 0 0 var(--c-accent); }

/* --- Banka / IBAN --- */
.bankalar { display: flex; flex-direction: column; gap: 12px; }
.banka { position: relative; display: block; }
.banka input { position: absolute; opacity: 0; width: 0; height: 0; }
.banka__kutu {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.banka__kutu:hover { border-color: var(--c-muted-2); }
.banka input:checked + .banka__kutu { border-color: var(--c-black); background: var(--c-bg-tint); }
.banka input:focus-visible + .banka__kutu { outline: 2px solid var(--c-black); outline-offset: 2px; }
.banka__bas { display: flex; align-items: center; gap: 13px; }
.banka input:checked + .banka__kutu .secenek__radyo { border-color: var(--c-black); }
.banka input:checked + .banka__kutu .secenek__radyo::after { opacity: 1; transform: scale(1); }
.banka__marka {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 32px;
  border: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-muted-dark);
}
.banka__ad { min-width: 0; font-size: 11.5px; color: var(--c-muted); }
.banka__ad b { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 500; color: var(--c-black); }
.banka__iban {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 11px 13px;
  background: var(--c-bg-soft);
}
.banka__iban code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-black);
}
.kopyala {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.kopyala:hover { border-color: var(--c-black); color: var(--c-black); }
.kopyala.is-done { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.banka__sahip {
  display: block;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--c-line);
  font-size: 11.5px;
  color: var(--c-muted);
}

/* --- Ozet: odeme sayfasina ozel parcalar --- */
.ozet--ode { padding: 0; }
.ozet__h--ode {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid var(--c-black);
  background: var(--c-bg-tint);
}
.ozet__rozet {
  margin-left: auto;
  padding: 3px 9px;
  background: var(--c-black);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-white);
}
.ozet__gov { padding: 20px 24px 24px; }

/* Mobilde basligin yerine gecen acici; 1023 altinda gorunur olur */
.ozet__mac {
  display: none;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  text-align: left;
  background: var(--c-bg-tint);
}
.ozet__mac-gov { min-width: 0; }
.ozet__mac-gov b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-black);
}
.ozet__mac-gov span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-muted); }
.ozet__mac-tut {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
}
.ozet__mac-ok { flex: none; color: var(--c-muted-dark); transition: transform var(--t-mid); }
.ozet__mac[aria-expanded="true"] .ozet__mac-ok { transform: rotate(180deg); }

.oliste {
  display: flex;
  flex-direction: column;
}

.osatir {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
}
.osatir:first-child { padding-top: 0; }
.osatir:last-child { border-bottom: 0; }
.osatir__gorsel { position: relative; display: block; background: var(--c-bg-soft); }
.osatir__gorsel img { width: 100%; height: 72px; object-fit: cover; display: block; }
.osatir__adet {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--c-black);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--c-white);
}
.osatir__gov { min-width: 0; }
.osatir__ad {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-body);
  transition: color var(--t-fast);
}
.osatir__ad:hover { color: var(--c-accent); }
.osatir__birim { display: block; margin-top: 4px; font-size: 11px; color: var(--c-muted-2); font-variant-numeric: tabular-nums; }
.osatir__birim em { font-style: normal; color: var(--c-accent); }
.osatir__tutar {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-black);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ohediye {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--c-bg-soft);
  box-shadow: inset 2px 0 0 var(--c-accent);
}
.ohediye[hidden] { display: none; }
.ohediye svg { flex: none; margin-top: 2px; color: var(--c-muted-dark); }
.ohediye b {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.ohediye i {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--c-muted);
  overflow-wrap: anywhere;
}

.oduzenle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.oduzenle:hover { color: var(--c-black); }

.ozet--ode .skod:first-of-type { margin-top: 18px; border-top: 1px solid var(--c-line); }

.okargo { margin-top: 18px; padding: 13px 15px; border: 1px solid var(--c-line); }
.okargo__m { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-muted-dark); }
.okargo__m svg { flex: none; color: var(--c-black); }
.okargo__m b { font-family: var(--font-display); font-weight: 500; color: var(--c-black); }
.okargo.is-yaklasiyor .okargo__m b { color: var(--c-accent); }
.okargo__ray { display: block; height: 3px; margin-top: 10px; background: var(--c-bg-soft-2); overflow: hidden; }
.okargo__ray i { display: block; width: var(--w, 0%); height: 100%; background: var(--c-accent); transition: width .45s var(--ease); }

.ozet__s dt .ozet__alt { display: block; margin-top: 2px; font-size: 11px; color: var(--c-muted-2); }
.ozet__s--kdv {
  margin-top: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--c-line);
  font-size: 12px;
  color: var(--c-muted-2);
}
.ozet__s--kdv dd { color: var(--c-muted) !important; font-weight: 400 !important; }
.ozet__toplam span small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-muted-2);
}

/* --- Sozlesmeler --- */
.sozlesmeler { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.onay--tumu {
  margin-bottom: 8px;
  padding: 12px 13px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg-tint);
}
.onay--tumu .onay__m b { font-family: var(--font-display); font-weight: 500; color: var(--c-black); }
.sozlesmeler.is-hata [data-zorunlu-onay]:not(:checked) ~ .okutu { border-color: var(--c-accent); }
.sozlesmeler__hata { margin-top: 10px; font-size: 11.5px; color: var(--c-accent); }
.sozlesmeler__hata[hidden] { display: none; }

.ozet__ode { width: 100%; }

/* --- Yardim karti --- */
.yardim {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
}
.yardim > svg { flex: none; color: var(--c-black); }
.yardim__gov { min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--c-muted); }
.yardim__gov b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-black);
}
.yardim__gov a { color: var(--c-muted-dark); text-decoration: underline; text-underline-offset: 2px; }
.yardim__gov a:hover { color: var(--c-accent); }


/* --- Siparis notu + ucretsiz istek paneli ---------------------------------
   Sayfadaki diger kutular ince gri cerceveli; bu panel kasten farkli:
   siyah baslik seridi, mercan etiket ve kalin kenarlik. */
.istek { border: 1px solid var(--c-accent); }
/* Serit komple turuncu, uzerindeki her sey beyaz: siyah zemin uzerine
   turuncu etiket yerine tek parca vurgu. */
.istek__bas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: var(--c-accent);
  color: var(--c-white);
}
.istek__etiket {
  flex: none;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .55);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-white);
}
.istek__yazi { flex: 1; min-width: 0; }
.istek__h {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--c-white);
}
.istek__ac { margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .82); }
.istek__ikon { flex: none; color: rgba(255, 255, 255, .75); }
.istek__gov { display: flex; flex-direction: column; gap: 24px; padding: 24px 22px; }

/* Not alani panelin ana isi: digerlerinden daha genis nefes alsin */
.istek__alan { min-height: 132px; }
.istek__ornek { display: flex; flex-direction: column; gap: 7px; }
.istek__ornek li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}
.istek__ornek li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 1px;
  background: var(--c-accent);
}

/* Ozette siparis notu */
.onot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--c-bg-soft);
  box-shadow: inset 2px 0 0 var(--c-accent);
}
.onot[hidden] { display: none; }
.onot svg { flex: none; margin-top: 2px; color: var(--c-muted-dark); }
.onot b {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.onot i { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--c-muted); }

/* ==========================================================================
   27. BİR PARFÜMÖRÜN GÜNCESİ
   Sekmeli filtre + kare kartlar. Kart tasarimi kesif sayfasindan: yazi
   dogrudan gorselin uzerinde. Oradaki tek zaaf acik fotograflarda beyaz
   yazinin okunmamasiydi; alttan yukari koyulasan bir perde koyup her
   fotografta okunur hale getirdim.
   ========================================================================== */

.gbar {
  position: sticky;
  top: var(--h-menubar);
  z-index: 70;
  background: var(--c-bg);
  border-block: 1px solid var(--c-line);
}
.gtabs {
  position: relative;
  display: flex;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Kaydirma kutusu taban kuralda: dar ekranda sekmeler sigmayinca
     yalnizca serit kayar, sayfa tasmaz. */
  overflow-x: auto;
  scrollbar-width: none;
}
.gtabs::-webkit-scrollbar { display: none; }

.gtab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  /* 8 sekme 1440'ta tam sigsin diye dar: 16px'te 2px tasip serit
     bosuna kaydirilabilir hale geliyordu. */
  padding-inline: 14px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-muted);
  transition: color var(--t-fast);
}
.gtab:hover { color: var(--c-black); }
.gtab.is-active { color: var(--c-black); }
.gtab__n {
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}
.gtab.is-active .gtab__n { color: var(--c-accent); }

.gtabs__ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--c-black);
  transition: transform .38s var(--ease), width .38s var(--ease);
}

/* Sekme seridi kaydirma oklari: serit tasinca beliriyor, tasmayinca hic
   gorunmuyor. Fare kullanicisi surukleme yapmak zorunda kalmasin diye. */
.gbar { position: sticky; }
.gbar__ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-black);
  padding: 0;
  cursor: pointer;
  color: var(--c-black);
  background: var(--c-bg);
  transition: background var(--t-fast), color var(--t-fast);
}
.gbar__ok[hidden] { display: none; }
/* Serit kapsayicidan genis: oklar ekran kenarina degil, sekmelerin
   basladigi hizaya oturuyor -- boylece tablara bitisik duruyorlar. */
.gbar__ok--sol { left: max(4px, calc((100% - var(--container)) / 2 + 4px)); }
.gbar__ok--sag { right: max(4px, calc((100% - var(--container)) / 2 + 4px)); }
/* Sekmeler okun altindan gecerken sert kesilmesin */
.gbar__ok::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 54px;
  pointer-events: none;
}
.gbar__ok--sol::after { left: 100%; background: linear-gradient(to right, var(--c-bg), transparent); }
.gbar__ok--sag::after { right: 100%; background: linear-gradient(to left, var(--c-bg), transparent); }
.gbar__ok:hover { background: var(--c-black); color: var(--c-white); }
.gbar__ok svg { flex: none; }

/* --- Izgara --- */
.gwrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 58px) var(--gutter) clamp(60px, 7vw, 110px);
}
.gizgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

/* --- Kart: kare gorsel, yazi ustunde --- */
.gkart { position: relative; }
.gkart[hidden] { display: none; }

.gkart__link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-black);
}
.gkart__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-black);
  opacity: 0;
  transition: opacity var(--t-mid);
}
.gkart__link:hover::after { opacity: .14; }

.gkart__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.gkart__link:hover .gkart__img { transform: scale(1.06); }

/* Perde: yazinin okunmasini fotografin sansina birakmiyoruz */
.gkart__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, .90) 0%,
      rgba(0, 0, 0, .74) 24%,
      rgba(0, 0, 0, .40) 52%,
      rgba(0, 0, 0, .10) 78%,
      rgba(0, 0, 0, 0) 100%);
}

.gkart__gov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  color: var(--c-white);
}
.gkart__kat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.gkart__kat i { flex: none; width: 20px; height: 1px; background: var(--c-white); }

.gkart__ad {
  margin-top: 13px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--c-white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gkart__ozet {
  display: -webkit-box;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gkart__ok {
  position: relative;
  margin-top: 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: gap var(--t-fast);
}
.gkart__ok::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.gkart__link:hover .gkart__ok { gap: 15px; }
.gkart__link:hover .gkart__ok::after { transform: scaleX(1); }

/* --- Bos durum + daha fazla --- */
.gbos {
  padding: 70px var(--gutter) 40px;
  text-align: center;
  font-size: 15px;
  color: var(--c-muted);
}
.gbos[hidden] { display: none; }

.gdaha {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gdaha[hidden] { display: none; }
.gdaha__b {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding: 0 34px;
  border: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: background var(--t-fast), color var(--t-fast);
}
.gdaha__b:hover { background: var(--c-black); color: var(--c-white); }
.gdaha__b svg { transition: transform var(--t-fast); }
.gdaha__b:hover svg { transform: translateY(3px); }
.gdaha__say {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
}
.gdaha__say b { color: var(--c-black); font-weight: 500; }


/* ==========================================================================
   28. PARFÜM HİKÂYELERİ
   Acilis "spread"i (440px gorsel + siyah tipografi paneli) ve altinda
   sutun akisli mozaik. Kaynak gorseller 440px genisliginde; karti asla
   bundan genis gostermiyoruz, o yuzden ızgara uc sutun ve one cikan
   blogun gorsel sutunu sabit 440px.
   ========================================================================== */

.phone {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(22px, 2.6vw, 38px) var(--gutter) clamp(26px, 3vw, 44px);
}
/* One cikan alan bir galeri: slaytlar ust uste duruyor, yalnizca aktif
   olan gorunuyor. Yukseklik en uzun slayta gore sabit kaliyor. */
.phone__ray {
  position: relative;
  display: grid;
}
.phone__link {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s var(--ease), visibility .55s;
}
.phone__link.is-aktif {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.phone__pmt {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}
.phone__noktalar {
  display: flex;
  align-items: center;
  gap: 9px;
}
.phone__nokta {
  width: 26px;
  height: 2px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--c-line);
  transition: background var(--t-fast);
}
.phone__nokta:hover { background: var(--c-muted); }
.phone__nokta.is-aktif { background: var(--c-black); }
/* Oklar slaytin kendi ustunde, dikey ortada: alttaki noktalara gitmeden
   bir sonraki hikayeye gecilebiliyor. */
.phone__yon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .55);
  padding: 0;
  cursor: pointer;
  color: var(--c-white);
  background: rgba(0, 0, 0, .38);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.phone__yon:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-black);
}
.phone__yon--sol { left: 16px; }
.phone__yon--sag { right: 16px; }
.phone__gorsel {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.phone__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.phone__link:hover .phone__gorsel img { transform: scale(1.05); }

.phone__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4vw, 68px);
  background: var(--c-black);
  color: var(--c-white);
}
.phone__etiket {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.phone__etiket span { width: 32px; height: 1px; background: var(--c-white); }

.phone__kat {
  margin-top: clamp(22px, 2.4vw, 34px);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-white);
}
.phone__ad {
  margin-top: 15px;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--c-white);
}
.phone__ozet {
  margin-top: 20px;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .64);
}
.phone__ok {
  position: relative;
  align-self: flex-start;
  margin-top: clamp(24px, 2.6vw, 38px);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: gap var(--t-fast);
}
.phone__ok::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .28);
}
.phone__ok::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.phone__link:hover .phone__ok { gap: 17px; }
.phone__link:hover .phone__ok::after { transform: scaleX(1); }

/* --- Mozaik: sutun akisi, iki farkli kart orani --- */
.phwrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(30px, 3.6vw, 52px) var(--gutter) clamp(60px, 7vw, 110px);
}
/* Tum kartlar kare: sutun akisi yerine gercek izgara, okuma sirasi soldan saga. */
.phizgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.phkart {
  break-inside: avoid;
  margin-bottom: 0;
}
.phkart[hidden] { display: none; }

.phkart__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-black);
}
.phkart--uzun .phkart__link,
.phkart--kare .phkart__link { aspect-ratio: 1 / 1; }

.phkart__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-black);
  opacity: 0;
  transition: opacity var(--t-mid);
}
.phkart__link:hover::after { opacity: .14; }

.phkart__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.phkart__link:hover .phkart__img { transform: scale(1.06); }

.phkart__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, .92) 0%,
      rgba(0, 0, 0, .76) 26%,
      rgba(0, 0, 0, .40) 55%,
      rgba(0, 0, 0, .10) 80%,
      rgba(0, 0, 0, 0) 100%);
}

.phkart__gov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  color: var(--c-white);
}
.phkart__kat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.phkart__kat i { flex: none; width: 18px; height: 1px; background: var(--c-white); }

.phkart__ad {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--c-white);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.phkart--uzun .phkart__ad,
.phkart--kare .phkart__ad { font-size: 17px; -webkit-line-clamp: 2; }

.phkart__ozet {
  display: -webkit-box;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.phkart--uzun .phkart__ozet,
.phkart--kare .phkart__ozet { -webkit-line-clamp: 2; }

.phkart__ok {
  position: relative;
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: gap var(--t-fast);
}
.phkart__ok::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.phkart__link:hover .phkart__ok { gap: 15px; }
.phkart__link:hover .phkart__ok::after { transform: scaleX(1); }


/* ==========================================================================
   29. ÖDEME SONUCU (basarili / basarisiz)
   Iki ekran ayni iskeleti paylasiyor: ustte tek buyuk bildirim blogu,
   altinda sol aciklama sutunu + sagda siparis ozeti. Tek fark ikon,
   cerceve rengi ve hata kutusu.
   ========================================================================== */

/* Adim seridinde hata durumu */
.sadim__i.is-hata { color: var(--c-accent); }
.sadim__i.is-hata .sadim__n {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

.snuc {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 6vw, 96px);
}

.snuc__bas {
  padding: clamp(34px, 4vw, 56px) clamp(28px, 3.4vw, 56px);
  border: 1px solid var(--c-black);
  text-align: center;
}
.snuc--hata .snuc__bas { border-color: var(--c-accent); }

.snuc__ikon {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  background: var(--c-black);
  color: var(--c-white);
}
.snuc--hata .snuc__ikon { background: var(--c-accent); }

.snuc__h {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--c-black);
}
.snuc__m {
  margin: 14px auto 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-muted);
}
.snuc__m b { font-weight: 500; color: var(--c-black); }

.snuc__no {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 12px 14px;
  background: var(--c-bg-soft);
}
.snuc__no-et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.snuc__no code {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-black);
}

/* Bankadan donen yanit */
.hatakutu {
  max-width: 620px;
  margin: 26px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
  box-shadow: inset 3px 0 0 var(--c-accent);
  text-align: left;
}
.hatakutu__b {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hatakutu__m { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--c-black); }
.hatakutu__a { margin-top: 9px; font-size: 11.5px; color: var(--c-muted-2); }
.hatakutu__a code { font-family: var(--font-display); letter-spacing: .06em; }

.snuc__grid {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: clamp(26px, 3vw, 48px);
  align-items: start;
}
.snuc__sol { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.snuc__sag { display: flex; flex-direction: column; gap: 16px; }

/* Zaman cizelgesi */
.zaman { display: flex; flex-direction: column; }
.zaman__i { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.zaman__i:last-child { padding-bottom: 0; }
.zaman__i::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--c-line-2);
}
.zaman__i:last-child::before { display: none; }
.zaman__nokta {
  position: relative;
  z-index: 1;
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
}
.zaman__i.is-simdi .zaman__nokta { background: var(--c-accent); border-color: var(--c-accent); }
.zaman__gov { min-width: 0; }
.zaman__gov b {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-black);
}
.zaman__gov span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--c-muted); }
.zaman__gov i {
  display: inline-block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.zaman__i.is-simdi .zaman__gov i { color: var(--c-accent); }

/* Bilgi listesi */
.bilgiler { display: flex; flex-direction: column; }
.bilgiler__s {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
}
.bilgiler__s:first-child { padding-top: 0; }
.bilgiler__s:last-child { border-bottom: 0; padding-bottom: 0; }
.bilgiler__s dt {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.bilgiler__s dd { font-size: 13.5px; line-height: 1.65; color: var(--c-body); }
.bilgiler__s dd b { font-weight: 500; color: var(--c-black); }
.bilgiler__s dd i { color: var(--c-muted); }

/* Olasi nedenler */
.neden { display: flex; flex-direction: column; gap: 13px; }
.neden li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--c-muted);
}
.neden li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--c-accent);
}
.neden li b { font-weight: 500; color: var(--c-black); }

/* Cikis yollari */
.cikis { display: flex; flex-direction: column; gap: 12px; }
.cikis__i {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--c-line-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cikis__i:hover { border-color: var(--c-black); background: var(--c-bg-tint); }
.cikis__ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line);
  color: var(--c-black);
}
.cikis__i:hover .cikis__ikon { border-color: var(--c-black); }
.cikis__gov { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); }
/* Yalnizca dogrudan cocuk blok olsun; ic metindeki <b> satir icinde kalsin,
   yoksa "%3 ek indirim" cumleyi ikiye boluyor. */
.cikis__gov > b {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-black);
}
.cikis__f { font-weight: 500; color: var(--c-accent); }
.cikis__ok { flex: none; color: var(--c-muted-2); transition: transform var(--t-fast), color var(--t-fast); }
.cikis__i:hover .cikis__ok { transform: translateX(4px); color: var(--c-black); }

/* Alt butonlar */
.snuc__btnlar {
  margin-top: clamp(26px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.snuc__b {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 32px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.snuc__b:hover { background: var(--c-accent); }
.snuc__b svg { transition: transform var(--t-fast); }
.snuc__b:hover svg { transform: translateX(4px); }
.snuc__l {
  font-size: 12.5px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.snuc__l:hover { color: var(--c-black); }


/* ==========================================================================
   30. HESABIM
   Solda yapiskan menu, sagda panel panel icerik. Form alanlari, bloklar,
   anahtarlar ve banka kartlari odeme sayfasindan (26. bolum) devraliniyor;
   burada yalnizca hesaba ozgu parcalar tanimli.
   ========================================================================== */

.hs {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(26px, 3vw, 44px) var(--gutter) clamp(56px, 6vw, 96px);
}

/* --- Kapak --- */
.hs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: stretch;
  background: var(--c-black);
  color: var(--c-white);
}
.hs-hero__panel { padding: clamp(30px, 3.6vw, 52px); }
.hs-hero__etiket {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.hs-hero__etiket span { width: 30px; height: 1px; background: var(--c-white); }
.hs-hero__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--c-white);
}
.hs-hero__h em { font-style: normal; color: var(--c-white); }
.hs-hero__m {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

/* Puan: yuvarlak halka yerine kare kutu + ince ray */
.hs-puan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  border-left: 3px solid var(--c-white);
  background: rgba(255, 255, 255, .09);
}
/* Club kutusu hero'nun icinde ayri bir yuzey: siyah uzerinde kendi zemini
   ve cercevesiyle duruyor, koseye sikismis bir etiket gibi degil. */
.hs-puan__marka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.hs-puan__ad {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--c-white);
  transition: opacity var(--t-fast);
}
.hs-puan__ad:hover { opacity: .72; }
.hs-puan__seviye {
  flex: none;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .5);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hs-puan__btn {
  align-self: flex-start;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .45);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hs-puan__btn:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-black);
}
.hs-puan__no {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.hs-puan__no small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.hs-puan__ray {
  display: block;
  height: 3px;
  margin-top: 16px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.hs-puan__ray i { display: block; width: var(--w, 0%); height: 100%; background: var(--c-white); }
.hs-puan__alt { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .5); }
.hs-puan__alt b { font-weight: 500; color: rgba(255, 255, 255, .8); }

/* --- Duzen --- */
.hs-layout {
  margin-top: clamp(24px, 2.8vw, 40px);
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(24px, 2.8vw, 44px);
  align-items: start;
}
.hs-yan { position: sticky; top: calc(var(--h-menubar) + 20px); }
.hs-ana { min-width: 0; }

/* --- Kullanici karti --- */
.hs-uye {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  padding: 18px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.hs-uye__avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
}
.hs-uye__gov { min-width: 0; align-self: center; }
.hs-uye__hi {
  display: block;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.hs-uye__ad {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
}
.hs-uye__tier {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--c-accent);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hs-uye__mail {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-size: 11.5px;
  color: var(--c-muted);
  overflow-wrap: anywhere;
}
.hs-uye__mail svg { flex: none; color: var(--c-muted-2); }

/* --- Menu --- */
.hs-menu-ac { display: none; }

.hs-menu { margin-top: 14px; border: 1px solid var(--c-line); }
.hs-menu__baslik {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hs-menu__liste { padding: 6px; }

.hs-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast);
}
.hs-link svg { flex: none; color: var(--c-muted-2); transition: color var(--t-fast); }
.hs-link span { flex: 1; min-width: 0; }
.hs-link:hover { background: var(--c-bg-soft); color: var(--c-black); }
.hs-link:hover svg { color: var(--c-black); }
.hs-link.is-active { background: var(--c-black); color: var(--c-white); }
.hs-link.is-active svg { color: var(--c-white); }
.hs-link__n {
  flex: none;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--c-bg-soft-2);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--c-black);
}
.hs-link__n--acil { background: var(--c-accent); color: var(--c-white); }
.hs-link.is-active .hs-link__n { background: rgba(255, 255, 255, .18); color: var(--c-white); }
.hs-link__chev { transition: transform var(--t-mid); }
.hs-link[aria-expanded="true"] .hs-link__chev { transform: rotate(180deg); }
.hs-link--cikis { color: var(--c-muted); }
.hs-link--cikis:hover { color: var(--c-accent); }
.hs-link--cikis:hover svg { color: var(--c-accent); }

.hs-alt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.hs-alt > div { overflow: hidden; min-height: 0; }
.hs-grup.is-acik .hs-alt { grid-template-rows: 1fr; }
.hs-altlink {
  width: 100%;
  display: block;
  padding: 9px 12px 9px 40px;
  text-align: left;
  font-size: 12.5px;
  color: var(--c-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.hs-altlink:hover { background: var(--c-bg-soft); color: var(--c-black); }
.hs-altlink.is-active { color: var(--c-black); box-shadow: inset 2px 0 0 var(--c-accent); }

/* --- Panel --- */
.hs-panel { display: flex; flex-direction: column; gap: 18px; }
.hs-panel[hidden] { display: none; }
.hs-panel__bas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.hs-panel__h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.hs-panel__m { margin-top: 9px; max-width: 68ch; font-size: 13.5px; line-height: 1.65; color: var(--c-muted); }
.hs-panel__m a { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; }
.hs-panel__m a:hover { color: var(--c-accent); }

/* --- Butonlar --- */
.hs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.hs-btn:hover { background: var(--c-accent); }
.hs-btn--hayalet { background: none; border: 1px solid var(--c-line-2); color: var(--c-black); }
.hs-btn--hayalet:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.hs-mini {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hs-mini:hover { border-color: var(--c-black); color: var(--c-black); }
.hs-mini--ana { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.hs-mini--ana:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.hs-mini--tehlike:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* Paylas butonu geri bildirimi: baglanti kopyalandi/paylasildi */
.hs-mini.is-done { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.hs-form__foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.hs-ipucu { margin-top: 12px; font-size: 11.5px; color: var(--c-muted-2); }
.hs-ipucu.is-hata { color: var(--c-accent); }

/* --- Istatistikler --- */
.hs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hs-stat { padding: 18px; border: 1px solid var(--c-line); }
.hs-stat__et {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hs-stat__no {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
}
.hs-stat__alt { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--c-muted-2); }

.bilgi__link {
  font: inherit;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.bilgi__link:hover { color: var(--c-accent); }

/* --- Kucuk gorseller --- */
.hs-kucuk { display: flex; align-items: center; gap: 9px; }
.hs-kucuk__i { display: block; width: 54px; height: 54px; overflow: hidden; background: var(--c-bg-soft); }
.hs-kucuk__i img { width: 100%; height: 100%; object-fit: cover; }
.hs-kucuk__f {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted-dark);
}

/* --- Takip seridi --- */
.hs-takip { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-takip__i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hs-takip__i::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--c-line-2);
}
.hs-takip__i:first-child::before { display: none; }
.hs-takip__i.is-tamam::before,
.hs-takip__i.is-simdi::before { background: var(--c-accent); }
.hs-takip__nokta {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
}
.hs-takip__i.is-tamam .hs-takip__nokta { background: var(--c-accent); border-color: var(--c-accent); }
.hs-takip__i.is-simdi .hs-takip__nokta { background: var(--c-black); border-color: var(--c-black); }
.hs-takip__ad {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.hs-takip__i.is-tamam .hs-takip__ad,
.hs-takip__i.is-simdi .hs-takip__ad { color: var(--c-black); }
.hs-takip__t { font-size: 11px; color: var(--c-muted-2); }

/* --- Hizli erisim --- */
.hs-hizli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hs-hizli__i {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--c-line);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.hs-hizli__i:hover { border-color: var(--c-black); background: var(--c-bg-tint); }
.hs-hizli__i > svg { flex: none; color: var(--c-black); }
.hs-hizli__gov { flex: 1; min-width: 0; font-size: 12px; color: var(--c-muted); }
.hs-hizli__gov b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--c-black); }
.hs-hizli__ok { flex: none; color: var(--c-muted-2); transition: transform var(--t-fast), color var(--t-fast); }
.hs-hizli__i:hover .hs-hizli__ok { transform: translateX(4px); color: var(--c-black); }

/* --- Adres kartlari --- */
.hs-adresler { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hs-adres { position: relative; padding: 20px 18px 18px; border: 1px solid var(--c-line); }
.hs-adres__flag {
  position: absolute;
  top: -1px;
  right: 14px;
  padding: 4px 9px;
  background: var(--c-black);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hs-adres__baslik {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.hs-adres__m { margin-top: 13px; font-size: 13px; line-height: 1.7; color: var(--c-muted); }
.hs-adres__m b { display: block; margin-bottom: 3px; font-weight: 500; color: var(--c-black); }
.hs-adres .hs-mini { margin-top: 16px; }

/* --- Satir listeleri (sepet, kayitli sepet) --- */
.hs-satirlar { display: flex; flex-direction: column; }
.hs-satir {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.hs-satir:first-child { padding-top: 0; }
.hs-satir:last-child { border-bottom: 0; padding-bottom: 0; }
.hs-satir__g { flex: none; width: 58px; height: 58px; overflow: hidden; background: var(--c-bg-soft); }
.hs-satir__g img { width: 100%; height: 100%; object-fit: cover; }
.hs-satir__g--ikon { display: grid; place-items: center; border: 1px solid var(--c-line); background: none; color: var(--c-muted-2); }
.hs-satir__gov { flex: 1; min-width: 160px; }
.hs-satir__ad { display: block; font-size: 13.5px; line-height: 1.45; color: var(--c-black); }
a.hs-satir__ad:hover { color: var(--c-accent); }
.hs-satir__m { display: block; margin-top: 5px; font-size: 12px; color: var(--c-muted); }
.hs-satir__f {
  flex: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hs-satir-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-black);
}
.hs-satir-foot__t { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.hs-satir-foot__t span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hs-satir-foot__t b { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--c-black); }

/* --- Filtre / arama --- */
.hs-filtre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hs-cipler { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hs-cip b { font-weight: 500; color: var(--c-muted-2); }
.hs-cip:hover { border-color: var(--c-black); color: var(--c-black); }
.hs-cip.is-active { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.hs-cip.is-active b { color: var(--c-accent); }

.hs-ara { position: relative; display: flex; align-items: center; }
.hs-ara svg { position: absolute; left: 13px; color: var(--c-muted-2); pointer-events: none; }
.hs-ara input {
  width: 260px;
  height: 36px;
  padding: 0 14px 0 36px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-size: 13px;
  transition: border-color var(--t-fast);
}
.hs-ara input::placeholder { color: var(--c-muted-2); }
.hs-ara input:focus { border-color: var(--c-black); outline: none; }

/* --- Siparis karti --- */
.hs-siparisler { display: flex; flex-direction: column; gap: 14px; }
.hs-siparis { border: 1px solid var(--c-line); }
.hs-siparis[hidden] { display: none; }
.hs-siparis__bas {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.hs-siparis__alan { display: flex; flex-direction: column; gap: 3px; }
.hs-siparis__alan span {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.hs-siparis__alan b { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--c-black); }
.hs-siparis__alan--tutar { margin-left: auto; text-align: right; }
.hs-siparis__alan--tutar b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hs-siparis__gov { padding: 20px; }
.hs-siparis__ozet { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--c-muted); }
.hs-siparis__ozet b { font-weight: 500; color: var(--c-black); }
.hs-siparis__alt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.hs-siparis__alt:empty { display: none; }

.hs-iade { padding: 16px 20px; border-top: 1px dashed var(--c-line-2); }
.hs-iade[hidden] { display: none; }
.hs-iade .hs-mini { margin-top: 12px; }

/* --- Durum rozeti --- */
.hs-durum {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hs-durum--ship { background: var(--c-black); color: var(--c-white); }
.hs-durum--done { border: 1px solid var(--c-line-2); color: var(--c-muted-dark); }
.hs-durum--wait { background: var(--c-accent); color: var(--c-white); }
.hs-durum--cancel { border: 1px solid var(--c-accent); color: var(--c-accent); }

/* --- Tablo --- */
.hs-tablo-kutu { overflow-x: auto; border: 1px solid var(--c-line); }
.hs-tablo { width: 100%; border-collapse: collapse; min-width: 620px; }
.hs-tablo th,
.hs-tablo td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--c-line); }
.hs-tablo thead th {
  background: var(--c-bg-tint);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hs-tablo tbody tr:last-child td { border-bottom: 0; }
.hs-tablo tbody td { font-size: 13px; color: var(--c-muted-dark); }
.hs-tablo__no { font-family: var(--font-display); font-weight: 500; color: var(--c-black) !important; white-space: nowrap; }
.hs-tablo__sag { text-align: right; }
.hs-tablo__para {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-black) !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Favoriler --- */
.hs-favlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.hs-fav { border: 1px solid var(--c-line); transition: opacity var(--t-mid), transform var(--t-mid); }
.hs-fav.is-cikiyor { opacity: 0; transform: scale(.97); }
.hs-fav__g { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-bg-soft); }
.hs-fav__g img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.hs-fav__g:hover img { transform: scale(1.04); }
.hs-fav__rozet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 5px 9px;
  background: var(--c-accent);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hs-fav__gov { padding: 14px; }
.hs-fav__marka {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.hs-fav__ad {
  display: -webkit-box;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-body);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.hs-fav__ad:hover { color: var(--c-black); }
.hs-fav__f {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-variant-numeric: tabular-nums;
}
.hs-fav__f del { font-size: 12px; color: var(--c-muted-2); }
.hs-fav__f b { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; color: var(--c-black); }
.hs-fav__alt { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.hs-fav__alt .hs-mini { flex: 1; justify-content: center; }
.hs-fav__sil {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-line-2);
  color: var(--c-muted-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.hs-fav__sil:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* --- Bos durum --- */
.hs-bos {
  padding: clamp(44px, 5vw, 72px) 24px;
  border: 1px solid var(--c-line);
  text-align: center;
}
.hs-bos[hidden] { display: none; }
.hs-bos--sade { border: 0; padding: 40px 0; }
.hs-bos__ikon { display: inline-flex; color: var(--c-line-2); }
.hs-bos__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--c-black);
}
.hs-bos__m { margin: 10px auto 0; max-width: 52ch; font-size: 13.5px; line-height: 1.65; color: var(--c-muted); }
.hs-bos .hs-btn { margin-top: 22px; }


/* ==========================================================================
   31. MARKA DETAY
   Tam genislik kapak -> kunye + hikaye -> kategori kisayollari -> urunler
   -> markadan hikayeler -> diger markalar. Urun izgarasi kategori
   sayfasinin bilesenlerini (.cat-bar, .cat-grid, .pcard) aynen kullaniyor,
   siralama da 16. blokla calisiyor.
   ========================================================================== */

.mkapak {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 34vw, 460px);
  overflow: hidden;
  background: var(--c-black);
}
.mkapak__g {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkapak__perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .56) 42%, rgba(0, 0, 0, .22) 78%, rgba(0, 0, 0, .3) 100%);
}
.mkapak__ic {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(28px, 3.4vw, 52px) var(--gutter) clamp(30px, 3.6vw, 54px);
}
.mkapak__crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(28px, 4vw, 62px);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.mkapak__crumb a { color: rgba(255, 255, 255, .82); transition: color var(--t-fast); }
.mkapak__crumb a:hover { color: var(--c-white); }

.mkapak__logo {
  width: clamp(168px, 17vw, 234px);
  height: auto;
}
.mkapak__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 2vw, 26px);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.mkapak__meta i { width: 14px; height: 1px; background: var(--c-white); }
.mkapak__slogan {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--c-white);
}

/* --- Kunye + hikaye --- */
.mhikaye {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(44px, 5vw, 82px) var(--gutter);
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(34px, 4.5vw, 78px);
  align-items: start;
}

.mkunye { border-top: 1px solid var(--c-black); padding-top: 20px; }
.mkunye__baslik {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mkunye__liste { margin-top: 16px; }
.mkunye__s {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
}
.mkunye__s dt {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mkunye__s dd { font-size: 13px; text-align: right; color: var(--c-black); }
.mkunye__s dd b { font-weight: 500; }
.mkunye__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: gap var(--t-fast), border-color var(--t-fast);
}
.mkunye__link:hover { gap: 15px; border-color: var(--c-accent); }

.mmetin__etiket {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mmetin__etiket span { width: 30px; height: 1px; background: var(--c-accent); }
.mmetin__h {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--c-black);
}
.mmetin p { margin-top: 18px; font-size: 15px; line-height: 1.8; color: var(--c-muted-dark); }
.mmetin p em { font-style: italic; color: var(--c-black); }
.mmetin__ilk {
  margin-top: 24px !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  color: var(--c-black) !important;
}

/* --- Kategori kisayollari --- */
.mkisalar {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(46px, 5vw, 82px);
}
.mkisalar__bas { margin-bottom: clamp(24px, 2.6vw, 36px); }
.mkisalar__h {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -.022em;
  color: var(--c-black);
}
.mkisalar__izgara {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.mkisa { position: relative; display: block; overflow: hidden; background: var(--c-black); }
.mkisa__g { display: block; aspect-ratio: 1 / 1; }
.mkisa__g img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mkisa:hover .mkisa__g img { transform: scale(1.07); }
.mkisa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, .12) 66%, transparent 100%);
}
.mkisa__gov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  color: var(--c-white);
}
.mkisa__ad {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-white);
}
.mkisa__m {
  display: -webkit-box;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkisa__ok {
  position: relative;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: gap var(--t-fast);
}
.mkisa__ok::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.mkisa:hover .mkisa__ok { gap: 14px; }
.mkisa:hover .mkisa__ok::after { transform: scaleX(1); }

/* --- Markadan hikayeler --- */
.mhik { background: var(--c-bg-tint); border-top: 1px solid var(--c-line); }
.mhik__in {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(50px, 5.4vw, 88px) var(--gutter);
}
.mhik__bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}
.mhik__h {
  grid-column: 1;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  letter-spacing: -.024em;
  color: var(--c-black);
}
.mhik__tum {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  white-space: nowrap;
  transition: gap var(--t-fast), border-color var(--t-fast);
}
.mhik__tum:hover { gap: 15px; border-color: var(--c-accent); }
.mhik__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* --- Diger markalar --- */
.mdiger { border-top: 1px solid var(--c-line); }
.mdiger__in {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(46px, 5vw, 78px) var(--gutter);
}
.mdiger__h {
  margin-top: 14px;
  margin-bottom: clamp(22px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -.022em;
  color: var(--c-black);
}
.mdiger__liste { display: flex; flex-wrap: wrap; gap: 10px; }
.mdiger__i {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mdiger__i:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }


/* ==========================================================================
   32. MARKALAR (genel liste)
   Arama + A-Z seridi + siralama; kartta fotograf, hover'da markanin kendi
   logo karosu one geciyor. Eski sayfada yalnizca logo vardi; urun sayisi,
   ozet ve arama burada eklendi.
   ========================================================================== */

.mistat {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mistat b { color: var(--c-black); font-weight: 500; }
.mistat i { width: 16px; height: 1px; background: var(--c-accent); }

/* --- Arac cubugu --- */
.mbar {
  position: sticky;
  top: var(--h-menubar);
  z-index: 70;
  background: var(--c-bg);
  border-block: 1px solid var(--c-line);
}
.mbar__in {
  max-width: var(--container);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}

.mara {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 340px;
}
.mara > svg { position: absolute; left: 14px; color: var(--c-muted-2); pointer-events: none; }
.mara input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 40px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-size: 13.5px;
  transition: border-color var(--t-fast);
}
.mara input::placeholder { color: var(--c-muted-2); }
.mara input:focus { border-color: var(--c-black); outline: none; }
.mara input::-webkit-search-cancel-button { display: none; }
.mara__sil {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--c-muted-2);
  transition: color var(--t-fast);
}
.mara__sil:hover { color: var(--c-black); }
.mara__sil[hidden] { display: none; }

.msonuc {
  flex: 1;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.msonuc b { color: var(--c-black); }
.msirala { flex: none; }

/* --- A-Z seridi --- */
.mharf {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) 10px;
  display: flex;
  gap: 2px;
  /* Taban kuralda kaydirilabilir: 29 harf dar ekrana sigmaz */
  overflow-x: auto;
  scrollbar-width: none;
}
.mharf::-webkit-scrollbar { display: none; }
.mharf__b {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast);
}
.mharf__b:first-child { padding-inline: 12px; letter-spacing: .14em; text-transform: uppercase; }
.mharf__b:hover:not(:disabled) { background: var(--c-bg-soft); color: var(--c-black); }
.mharf__b.is-active { background: var(--c-black); color: var(--c-white); }
.mharf__b:disabled { color: var(--c-line-2); cursor: default; }

/* --- Izgara --- */
.mwrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(28px, 3.2vw, 46px) var(--gutter) clamp(56px, 6vw, 96px);
}
.mizgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 22px;
}

/* --- Marka karti --- */
.mkart { min-width: 0; }
.mkart[hidden] { display: none; }
.mkart__link { display: block; }

.mkart__g {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.mkart__foto,
.mkart__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkart__foto { transition: transform .9s var(--ease), opacity var(--t-mid); }
/* Markanin kendi logo karosu hover'da one gecer — eski sayfadaki jest,
   ama ad ve urun sayisi karonun disinda kaldigi icin hep okunur. */
.mkart__logo { opacity: 0; transform: scale(1.02); transition: opacity var(--t-mid), transform .9s var(--ease); }
.mkart__link:hover .mkart__foto { opacity: 0; transform: scale(1.04); }
.mkart__link:hover .mkart__logo { opacity: 1; transform: scale(1); }
.mkart__link:focus-visible .mkart__logo { opacity: 1; }

.mkart__gov { display: block; padding-top: 16px; }
.mkart__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mkart__ad {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-black);
  transition: color var(--t-fast);
}
.mkart__link:hover .mkart__ad { color: var(--c-accent); }
.mkart__adet {
  flex: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mkart__adet--yakinda { color: var(--c-accent); }

.mkart__m {
  display: -webkit-box;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-muted);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em;
}
.mkart__ok {
  position: relative;
  margin-top: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: gap var(--t-fast);
}
.mkart__ok::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.mkart__link:hover .mkart__ok { gap: 14px; }
.mkart__link:hover .mkart__ok::after { transform: scaleX(1); }

/* --- Bos durum --- */
.mbos { padding: clamp(50px, 6vw, 90px) 20px; text-align: center; }
.mbos[hidden] { display: none; }
.mbos__ikon { display: inline-flex; color: var(--c-line-2); }
.mbos__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--c-black);
}
.mbos__m { margin-top: 10px; font-size: 13.5px; color: var(--c-muted); }
.mbos__b {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 26px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.mbos__b:hover { background: var(--c-accent); }

/* --- Kapanis --- */
.mcta { background: var(--c-black); color: var(--c-white); }
.mcta__in {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(46px, 5vw, 78px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 3vw, 56px);
}
.mcta .mmetin__etiket { color: rgba(255, 255, 255, .55); }
.mcta__h {
  margin-top: 15px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.026em;
  color: var(--c-white);
}
.mcta__m { margin-top: 14px; max-width: 56ch; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .62); }
.mcta__aksiyon { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mcta__b {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 30px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.mcta__b:hover { background: var(--c-accent); color: var(--c-white); }
.mcta__l {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mcta__l:hover { color: var(--c-white); }


/* ==========================================================================
   33. İLETİŞİM
   Bolunmus kapak (siyah panel + butik fotografi) -> form + bilgi sutunu ->
   tam genislik harita + konum karti -> e-bulten bandi. Form alanlari odeme
   sayfasinin bilesenlerini (.izgara, .alan, .giris, .onay) kullaniyor.
   ========================================================================== */

.ilt-kapak {
  background: var(--c-black);
  color: var(--c-white);
}
/* Solda baslik, sagda hizli iletisim kartlari. */
.ilt-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(30px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(34px, 4vw, 68px);
}
.ilt-kapak__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ilt-crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(24px, 3vw, 44px);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.ilt-crumb a { color: rgba(255, 255, 255, .8); transition: color var(--t-fast); }
.ilt-crumb a:hover { color: var(--c-white); }

.ilt-kapak__etiket {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.ilt-kapak__etiket span { width: 30px; height: 1px; background: var(--c-white); }
.ilt-kapak__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.032em;
  color: var(--c-white);
}
.ilt-kapak__h em { font-style: normal; color: var(--c-white); }
.ilt-kapak__m {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .62);
}

.ilt-hizli {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border-block: 1px solid rgba(255, 255, 255, .14);
}
.ilt-hizli__i {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 4px;
  background: var(--c-black);
  transition: padding-left var(--t-fast);
}
.ilt-hizli__i:hover { padding-left: 12px; }
.ilt-hizli__ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--c-white);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ilt-hizli__i:hover .ilt-hizli__ikon { background: var(--c-accent); border-color: var(--c-accent); }
.ilt-hizli__gov { min-width: 0; }
.ilt-hizli__gov b {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-white);
}
.ilt-hizli__gov span { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .5); }


/* --- Form + bilgi --- */
.ilt-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(44px, 5vw, 82px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 4vw, 68px);
  align-items: start;
}
.ilt-form-sutun { min-width: 0; }
.ilt-h {
  margin-top: 15px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 300;
  letter-spacing: -.026em;
  color: var(--c-black);
}
.ilt-alt { margin-top: 12px; max-width: 60ch; font-size: 14px; line-height: 1.7; color: var(--c-muted); }
.ilt-form { margin-top: clamp(24px, 2.6vw, 34px); }
.ilt-form.is-gizli { display: none; }

.ilt-form__hata { margin-top: 8px; font-size: 11.5px; color: var(--c-accent); }
.ilt-form__hata[hidden] { display: none; }
.ilt-form__foot {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ilt-form__not { font-size: 12px; color: var(--c-muted-2); }
.ilt-form__not b { font-weight: 500; color: var(--c-black); }

.ilt-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 30px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--t-fast);
}
.ilt-btn:hover { background: var(--c-accent); }
.ilt-btn svg { transition: transform var(--t-fast); }
.ilt-btn:hover svg { transform: translateX(4px); }

/* Basari durumu */
.ilt-basari {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--c-black);
}
.ilt-basari[hidden] { display: none; }
.ilt-basari__ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--c-black);
  color: var(--c-white);
}
.ilt-basari__h {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--c-black);
}
.ilt-basari__m { margin-top: 9px; font-size: 14px; line-height: 1.7; color: var(--c-muted); }
.ilt-basari__m b { font-weight: 500; color: var(--c-black); }
.ilt-basari__b {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--c-accent);
}
.ilt-basari__b:hover { color: var(--c-accent); }

/* --- Yan sutun --- */
.ilt-yan { display: flex; flex-direction: column; gap: 16px; }
.ilt-kutu { padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--c-line); }
.ilt-kutu__h {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
}
.ilt-kutu__m { margin-top: 14px; font-size: 13px; color: var(--c-muted); }

.ilt-satir { display: flex; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--c-line); }
.ilt-satir:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.ilt-satir__ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-line);
  color: var(--c-black);
}
.ilt-satir__gov { min-width: 0; }
.ilt-satir__et {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.ilt-satir__m {
  margin-top: 6px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--c-body);
}
.ilt-satir__m a { color: var(--c-black); transition: color var(--t-fast); }
.ilt-satir__m a:hover { color: var(--c-accent); }
.ilt-satir__kapali { color: var(--c-muted-2); }
.ilt-satir__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  border-bottom: 1px solid var(--c-line-2);
  padding-bottom: 4px;
  transition: gap var(--t-fast), border-color var(--t-fast);
}
.ilt-satir__link:hover { gap: 13px; border-color: var(--c-accent); }

.ilt-sosyal { padding-top: 17px; border-top: 1px solid var(--c-line); }
.ilt-sosyal__liste { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.ilt-sosyal__i {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-muted-dark);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ilt-sosyal__i:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.ilt-kutu--yardim { background: var(--c-bg-tint); }
.ilt-yardim { margin-top: 14px; display: flex; flex-direction: column; }
.ilt-yardim li { border-bottom: 1px solid var(--c-line); }
.ilt-yardim li:last-child { border-bottom: 0; }
.ilt-yardim a {
  display: block;
  padding: 12px 0;
  font-size: 13.5px;
  color: var(--c-muted-dark);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.ilt-yardim a:hover { color: var(--c-black); padding-left: 6px; }

/* --- Harita --- */
.ilt-harita { position: relative; border-top: 1px solid var(--c-line); background: var(--c-bg-soft); }
.ilt-harita__cerceve { height: clamp(360px, 42vw, 540px); }
.ilt-harita__cerceve iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

.ilt-konum {
  position: absolute;
  top: 50%;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  transform: translateY(-50%);
  width: min(360px, calc(100% - var(--gutter) * 2));
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--c-black);
  color: var(--c-white);
}
.ilt-konum__et {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.ilt-konum__et span { width: 26px; height: 1px; background: var(--c-accent); }
.ilt-konum__h {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300;
  letter-spacing: -.026em;
  color: var(--c-white);
}
.ilt-konum__m { margin-top: 12px; font-style: normal; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .68); }
.ilt-konum__saat { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.ilt-konum__b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-top: 20px;
  padding: 0 22px;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.ilt-konum__b:hover { background: var(--c-accent); color: var(--c-white); }

/* --- E-bulten --- */
.ilt-bulten {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  align-items: stretch;
  background: var(--c-black);
  color: var(--c-white);
}
.ilt-bulten__gorsel { position: relative; overflow: hidden; min-height: 320px; }
.ilt-bulten__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.ilt-bulten__gov {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4vw, 66px) clamp(24px, 3.4vw, 62px);
  max-width: calc(var(--container) * .62);
}
.ilt-bulten__rozet {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--c-accent);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-white);
}
.ilt-bulten__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--c-white);
}
.ilt-bulten__m { margin-top: 14px; max-width: 50ch; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .62); }
.ilt-bulten__form { margin-top: 24px; max-width: 480px; }
.ilt-bulten__satir { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, .3); transition: border-color var(--t-fast); }
.ilt-bulten__satir:focus-within { border-color: var(--c-white); }
.ilt-bulten__giris {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 4px;
  font-size: 14px;
  color: var(--c-white);
  background: transparent;
}
.ilt-bulten__giris::placeholder { color: rgba(255, 255, 255, .42); }
.ilt-bulten__b {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 22px;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.ilt-bulten__b:hover { background: var(--c-white); color: var(--c-black); }
.ilt-bulten__onay { margin-top: 16px; align-items: flex-start; }
.ilt-bulten__onay .onay__m { color: rgba(255, 255, 255, .6); font-size: 12px; }
.ilt-bulten__onay .onay__m a { color: rgba(255, 255, 255, .9); text-decoration-color: rgba(255, 255, 255, .4); }
.ilt-bulten__onay .onay__m a:hover { color: var(--c-accent); }
.ilt-bulten__onay .okutu { border-color: rgba(255, 255, 255, .35); background: transparent; }
.ilt-bulten__onay input:checked ~ .okutu { background: var(--c-accent); border-color: var(--c-accent); }
.ilt-bulten__uyari { margin-top: 12px; font-size: 12px; color: var(--c-accent); }
.ilt-bulten__uyari[hidden] { display: none; }
.ilt-bulten__uyari.is-ok { color: var(--c-white); }
.ilt-bulten__dip { margin-top: 14px; font-size: 11px; color: rgba(255, 255, 255, .4); }


/* ==========================================================================
   34. YAZI DETAY (blog)
   Dergi acilisi (tipografi + kapak) -> yapiskan paylas/icindekiler rayi +
   dar olcu (measure) govde -> onceki/sonraki -> ilgili yazilar.
   Govde icindeki genis bilesenler (nota kutusu, urun karti, e-bulten)
   olcunun disina tasiyor; 1023 altinda tasma sifirlaniyor.
   ========================================================================== */

/* --- Okuma ilerlemesi: menubar'in ustunde ince cizgi ------------------- */
.yz-ilerleme {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: calc(var(--z-menubar) + 2);
  pointer-events: none;
  background: transparent;
}
.yz-ilerleme i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-accent);
  transform-origin: left center;
}

/* --- Acilis -------------------------------------------------------------- */
.yz-bas {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-top: 26px;
}
.yz-crumb { margin-bottom: clamp(26px, 3vw, 46px); }

.yz-bas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  padding-bottom: clamp(34px, 4vw, 62px);
  border-bottom: 1px solid var(--c-line);
}

.yz-kat {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 22px;
}
.yz-kat span {
  width: 30px;
  height: 1px;
  background: var(--c-accent);
}

.yz-h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 66px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--c-black);
}
/* Vurgulu satir: Montserrat'in italik kesimi bizde yok, egik yazi sentezlenir.
   Onun yerine altina sac teli kalinliginda vurgu cizgisi cekiyoruz. */
.yz-h1 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.yz-h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: 1px;
  background: var(--c-accent);
}

.yz-ozet {
  max-width: 56ch;
  margin-top: clamp(20px, 2vw, 30px);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}

.yz-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(24px, 2.6vw, 38px);
  font-size: 12.5px;
  color: var(--c-muted);
}
.yz-meta__ayrac { width: 1px; height: 22px; background: var(--c-line-2); }
.yz-meta__i { font-variant-numeric: tabular-nums; }

.yz-yazar { display: flex; align-items: center; gap: 12px; }
.yz-yazar__av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
}
.yz-yazar__gov { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.yz-yazar__gov b { font-size: 13px; font-weight: 500; color: var(--c-ink); }
.yz-yazar__gov span {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.yz-bas__gorsel { position: relative; }
.yz-bas__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --- Govde: yapiskan ray + olcu ------------------------------------------ */
/* Tek yazi akisi: metin sayfanin tam ortasinda dursun diye sagda paylasim
   seridiyle ayni genislikte bos bir sutun birakiliyor. */
.yz-govde {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 52px minmax(0, 720px) 52px;
  justify-content: center;
  gap: clamp(34px, 4.5vw, 76px);
  padding-block: clamp(40px, 5vw, 76px) clamp(50px, 6vw, 90px);
}

.yz-yan {
  position: sticky;
  top: calc(var(--h-menubar) + 34px);
  align-self: start;
}
.yz-paylas { position: relative; }
/* Ray artik tek isi paylasim; basligi kaldirip yerine ince bir cizgi koyduk. */
.yz-paylas__cizgi {
  display: block;
  width: 1px;
  height: 44px;
  margin: 0 auto 18px;
  background: var(--c-line-2);
}
.yz-yan__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}

/* Rayda ikonlar tek bir sutun halinde, aralarinda sac teli cizgi;
   ayri ayri kutular dizisi olarak durunca metnin yaninda dagimik goruniyordu.
   Mobil seritte ayni liste yan yana diziliyor (asagida eziliyor). */
.yz-paylas__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--c-line);
}
.yz-paylas__i {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.yz-paylas__liste > :last-child { border-bottom: 0; }
.yz-paylas__i:hover { color: var(--c-white); background: var(--c-black); }
.yz-paylas__ok {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.yz-paylas__ok[hidden] { display: none; }

/* --- Metin --------------------------------------------------------------- */
.yz-metin {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--c-body);
}
.yz-metin p { margin-bottom: 24px; }
.yz-metin p:last-child { margin-bottom: 0; }
.yz-metin b { font-weight: 500; color: var(--c-ink); }
.yz-metin a {
  color: var(--c-black);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--c-line-2);
  transition: box-shadow var(--t-fast), color var(--t-fast);
}
.yz-metin a:hover { color: var(--c-accent); box-shadow: inset 0 -1px 0 var(--c-accent); }

.yz-ilk { font-size: 19px; line-height: 1.75; color: var(--c-ink); }
/* Dergi acilisi: ilk harf dort satir boyu. */
.yz-ilk::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.1em;
  font-weight: 300;
  line-height: .82;
  margin: .06em .14em 0 0;
  color: var(--c-black);
}

/* Bu yazida ara baslik yok — kaynak metinde de yoktu. Kural duruyor ki
   basligi olan yazilarda sayfa kendiliginden o sekli alsin. */
.yz-h2 {
  position: relative;
  margin: clamp(44px, 4.4vw, 66px) 0 22px;
  padding-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--c-black);
  scroll-margin-top: calc(var(--h-menubar) + 26px);
}
.yz-h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--c-accent);
}

.yz-alinti {
  margin: clamp(34px, 3.6vw, 52px) 0;
  padding-block: clamp(26px, 2.6vw, 36px);
  border-block: 1px solid var(--c-line);
  text-align: center;
}
.yz-alinti p {
  max-width: 30ch;
  margin: 0 auto !important;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--c-black);
}

.yz-figur { margin: clamp(30px, 3vw, 44px) 0; }
.yz-figur img { display: block; width: 100%; height: auto; }
.yz-figur figcaption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-muted);
}
.yz-figur figcaption::before {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  margin-top: 10px;
  background: var(--c-accent);
}

/* --- Kompozisyon kutusu (olcunun disina tasar) --------------------------- */
.yz-nota {
  margin: clamp(36px, 4vw, 56px) -60px;
  padding: clamp(26px, 2.8vw, 40px);
  background: var(--c-black);
  color: var(--c-white);
}
.yz-nota__baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-white);
}
.yz-nota__baslik i {
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--c-accent);
}
.yz-nota__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.yz-nota__et {
  margin-bottom: 14px !important;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.yz-nota__liste { list-style: none; }
.yz-nota__liste li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
}
.yz-nota__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.yz-nota__liste i {
  font-style: normal;
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
}

/* --- Yazida gecen urun --------------------------------------------------- */
.yz-urun {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: stretch;
  margin: clamp(36px, 4vw, 56px) -60px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  transition: border-color var(--t-mid);
}
.yz-urun:hover { border-color: var(--c-line-2); }
.yz-urun__g {
  display: block;
  overflow: hidden;
  border-right: 1px solid var(--c-line);
  background: var(--c-bg-soft);
}
.yz-urun__g img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.yz-urun__g:hover img { transform: scale(1.05); }
.yz-urun__gov {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.4vw, 32px);
}
.yz-urun__et {
  margin-bottom: 14px !important;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.yz-urun__marka {
  margin-bottom: 6px !important;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.yz-urun__ad {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-black);
}
.yz-urun__ad a { color: inherit; text-decoration: none; box-shadow: none; }
.yz-urun__ad a:hover { color: var(--c-accent); box-shadow: none; }
.yz-urun__f {
  margin: 12px 0 20px !important;
  font-size: 19px;
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
}
.yz-urun__alt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.yz-urun__b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.yz-urun__b:hover { background: var(--c-white); color: var(--c-black); }
.yz-urun__l {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--c-line-2) !important;
}
.yz-urun__l:hover { color: var(--c-accent); box-shadow: inset 0 -1px 0 var(--c-accent) !important; }

/* --- Parfumor portresi --------------------------------------------------- */
.yz-portre {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 36px);
  align-items: start;
  margin: clamp(30px, 3vw, 44px) 0;
}
.yz-portre__g img { display: block; width: 100%; height: auto; }
.yz-portre__g figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.yz-portre__m p:last-child { margin-bottom: 0; }

/* --- E-bulten bandi ------------------------------------------------------ */
.yz-bulten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: clamp(40px, 4.4vw, 62px) -60px 0;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--c-black);
  background: var(--c-bg-soft);
}
.yz-bulten__et {
  margin-bottom: 10px !important;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.yz-bulten__h {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-black);
}
.yz-bulten__m {
  max-width: 44ch;
  margin: 10px 0 0 !important;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted-dark);
}
.yz-bulten__b {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 30px;
  background: var(--c-black);
  color: var(--c-white) !important;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;
  transition: gap var(--t-fast), background-color var(--t-fast);
}
.yz-bulten__b:hover { gap: 17px; background: var(--c-accent); }

/* --- Yazar imzasi -------------------------------------------------------- */
.yz-imza {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 22px;
  margin-top: clamp(40px, 4.4vw, 62px);
  padding-top: clamp(28px, 3vw, 38px);
  border-top: 1px solid var(--c-line);
}
.yz-imza__av {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
}
.yz-imza__et {
  margin-bottom: 8px !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.yz-imza__ad {
  margin-bottom: 8px !important;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-black);
}
.yz-imza__m { font-size: 14px; line-height: 1.7; color: var(--c-muted-dark); }
.yz-imza__l {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black) !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: gap var(--t-fast), color var(--t-fast);
}
.yz-imza__l:hover { gap: 15px; color: var(--c-accent) !important; }

/* Mobil paylasim: masaustunde ray zaten var. */
.yz-mpaylas { display: none; margin-top: 40px; }
.yz-mpaylas { position: relative; }
.yz-mpaylas .yz-paylas__liste {
  grid-template-columns: repeat(4, 44px);
  justify-content: start;
  width: max-content;
}
.yz-mpaylas .yz-paylas__i { border-bottom: 0; border-right: 1px solid var(--c-line); }
.yz-mpaylas .yz-paylas__liste > :last-child { border-right: 0; }
.yz-mpaylas .yz-paylas__ok { position: static; margin-top: 12px; }

/* --- Onceki / sonraki ---------------------------------------------------- */
.yz-gezin {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: clamp(50px, 6vw, 84px);
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.yz-gez {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--c-bg);
  text-decoration: none;
  transition: background-color var(--t-fast);
}
.yz-gez:hover { background: var(--c-bg-tint); }
.yz-gez--sonraki { flex-direction: row-reverse; text-align: right; }
.yz-gez__g {
  flex: none;
  width: 84px;
  overflow: hidden;
}
.yz-gez__g img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.yz-gez:hover .yz-gez__g img { transform: scale(1.06); }
.yz-gez__gov { min-width: 0; }
.yz-gez__yon {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  transition: color var(--t-fast);
}
.yz-gez--sonraki .yz-gez__yon { justify-content: flex-end; }
.yz-gez:hover .yz-gez__yon { color: var(--c-accent); }
.yz-gez__ad {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   35. SIKÇA SORULAN SORULAR
   Ortalanmis kapak + canli arama -> solda yapiskan konu rayi, sagda akordiyon
   gruplari -> yardim bandi. Akordiyon `hidden` ile degil `grid-template-rows`
   0fr/1fr ile aciliyor: yukseklik JS'te olculmuyor, gecis puruzsuz kaliyor.
   ========================================================================== */

/* --- Kapak ---------------------------------------------------------------- */
.sss-kapak {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.sss-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: 26px 0 clamp(36px, 4vw, 60px);
  text-align: center;
}
.sss-crumb { justify-content: center; margin-bottom: clamp(26px, 3vw, 44px); }

.sss-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 18px;
}
.sss-eyebrow span { width: 30px; height: 1px; background: var(--c-accent); }

.sss-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--c-black);
}
.sss-lead {
  max-width: 58ch;
  margin: clamp(16px, 1.6vw, 22px) auto 0;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}

.sss-ara {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 640px);
  margin: clamp(26px, 2.8vw, 38px) auto 0;
  padding: 0 16px;
  height: 60px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  transition: border-color var(--t-fast);
}
.sss-ara:focus-within { border-color: var(--c-black); }
.sss-ara__ikon { flex: none; color: var(--c-muted); }
.sss-ara__alan {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  color: var(--c-ink);
}
.sss-ara__alan:focus { outline: none; }
.sss-ara__alan::placeholder { color: var(--c-muted-2); }
/* Tarayicinin kendi "temizle" carpisi bizimkiyle ust uste biniyordu */
.sss-ara__alan::-webkit-search-cancel-button { display: none; }
.sss-ara__sil {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-muted-dark);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sss-ara__sil:hover { color: var(--c-black); border-color: var(--c-black); }
.sss-ara__sil[hidden] { display: none; }

.sss-pop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.sss-pop__et {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-right: 4px;
}
.sss-pop__c {
  padding: 8px 15px;
  border: 1px solid var(--c-line-2);
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--c-muted-dark);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.sss-pop__c:hover {
  color: var(--c-white);
  background: var(--c-black);
  border-color: var(--c-black);
}

/* --- Govde ---------------------------------------------------------------- */
.sss-govde {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 90px);
  padding-block: clamp(40px, 4.6vw, 72px) clamp(50px, 6vw, 88px);
  align-items: start;
}

.sss-yan {
  position: sticky;
  top: calc(var(--h-menubar) + 30px);
}
.sss-yan__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.sss-konu { display: flex; flex-direction: column; }
.sss-konu__b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 0 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-left: 1px solid transparent;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  text-align: left;
  color: var(--c-muted-dark);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sss-konu__b em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
}
.sss-konu__b:hover { color: var(--c-black); }
.sss-konu__b.is-active {
  color: var(--c-black);
  font-weight: 500;
  border-left-color: var(--c-accent);
}
.sss-konu__b.is-active em { color: var(--c-accent); }
.sss-konu__b[hidden] { display: none; }

.sss-yan__kart {
  margin-top: 30px;
  padding: 24px;
  background: var(--c-black);
  color: var(--c-white);
}
.sss-yan__kh {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}
.sss-yan__km {
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 16px;
}
.sss-yan__kl {
  display: block;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  color: var(--c-white);
  text-decoration: none;
  transition: color var(--t-fast);
}
.sss-yan__kl:hover { color: var(--c-accent); }

/* --- Liste ---------------------------------------------------------------- */
.sss-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.sss-sayac { font-size: 12.5px; color: var(--c-muted); }
.sss-sayac b {
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
}
.sss-tumu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  cursor: pointer;
  transition: color var(--t-fast);
}
.sss-tumu:hover { color: var(--c-accent); }
.sss-tumu svg { transition: transform var(--t-mid); }
.sss-tumu[aria-expanded="true"] svg { transform: rotate(180deg); }

.sss-grup { padding-top: clamp(34px, 3.4vw, 50px); }
.sss-grup[hidden] { display: none; }
.sss-grup__h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-black);
  scroll-margin-top: calc(var(--h-menubar) + 20px);
}
.sss-grup__h svg { flex: none; color: var(--c-accent); }
.sss-grup__h em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
}

.sss-oge { border-bottom: 1px solid var(--c-line); }
.sss-oge[hidden] { display: none; }
.sss-oge__h { font: inherit; }
.sss-oge__ac {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--c-black);
}
.sss-oge__soru {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.45;
  transition: color var(--t-fast);
}
.sss-oge__ac:hover .sss-oge__soru { color: var(--c-accent); }
.sss-oge.is-acik .sss-oge__soru { font-weight: 500; }

.sss-oge__isaret {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  position: relative;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* Arti/eksi iki cubukla ciziliyor. Kutunun kendisini 45 derece dondurmek
   kareyi baklava dilimine ceviriyordu; SVG kokunu dondurmek de ise yaramiyor
   (donme merkezi sol ust kose sayiliyor). Cubuk cozumu ikisinden de bagimsiz. */
.sss-oge__isaret b {
  position: absolute;
  width: 11px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-mid);
}
.sss-oge__isaret b:last-child { transform: rotate(90deg); }
.sss-oge.is-acik .sss-oge__isaret b:last-child { transform: rotate(90deg) scaleX(0); }
.sss-oge__ac:hover .sss-oge__isaret { border-color: var(--c-line-2); }
.sss-oge.is-acik .sss-oge__isaret {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

/* Acilis: satir yuksekligi 0fr'den 1fr'ye. `hidden` kullanmiyoruz cunku
   gecis animasyonu olmuyor; kapaliyken odaklanilabilir kalmasin diye
   visibility de kapatiliyor. */
.sss-oge__cevap {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-mid), visibility var(--t-mid);
}
.sss-oge.is-acik .sss-oge__cevap {
  grid-template-rows: 1fr;
  visibility: visible;
}
.sss-oge__ic { overflow: hidden; }
.sss-oge__ic > :first-child { padding-top: 2px; }
.sss-oge__ic > :last-child { margin-bottom: 26px; }
.sss-oge__ic p {
  max-width: 74ch;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-body);
}
.sss-oge__ic b { font-weight: 500; color: var(--c-ink); }
.sss-oge__ic a {
  color: var(--c-black);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--c-line-2);
  transition: color var(--t-fast), box-shadow var(--t-fast);
}
.sss-oge__ic a:hover { color: var(--c-accent); box-shadow: inset 0 -1px 0 var(--c-accent); }

/* Bizim ekledigimiz yonlendirme notu — kaynak metnin parcasi degil */
.sss-not {
  padding-left: 16px;
  border-left: 1px solid var(--c-accent);
  font-size: 13.5px !important;
  color: var(--c-muted-dark) !important;
}

.sss-sart { list-style: none; margin-bottom: 16px; }
.sss-sart li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--c-body);
}
.sss-sart li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 1px;
  background: var(--c-accent);
}

.sss-esik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 8px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.sss-esik__s {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--c-bg);
}
.sss-esik__e {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sss-esik__d {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
}

.sss-adres {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.sss-adres__et {
  margin-bottom: 10px !important;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent) !important;
}
.sss-adres__m {
  margin-bottom: 12px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--c-ink) !important;
}
.sss-adres__l {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
  font-size: 13px !important;
}
.sss-adres__l span { color: var(--c-muted-2); }

/* Arama vurgusu */
.sss-oge__soru mark {
  background: rgba(244, 85, 59, .16);
  color: inherit;
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

/* Bos sonuc */
.sss-bos {
  padding: clamp(40px, 5vw, 70px) clamp(24px, 3vw, 40px);
  margin-top: 30px;
  border: 1px solid var(--c-line);
  text-align: center;
}
.sss-bos[hidden] { display: none; }
.sss-bos__h {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--c-black);
  margin-bottom: 10px;
}
.sss-bos__m {
  max-width: 46ch;
  margin: 0 auto 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted-dark);
}
.sss-bos__d { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.sss-bos__b,
.sss-bos__l {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sss-bos__b {
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}
.sss-bos__b:hover { background: var(--c-white); color: var(--c-black); }
.sss-bos__l {
  border: 1px solid var(--c-line-2);
  background: transparent;
  color: var(--c-black);
}
.sss-bos__l:hover { border-color: var(--c-black); }

/* --- Yardim bandi --------------------------------------------------------- */
.sss-yardim { background: var(--c-black); color: var(--c-white); }
.sss-yardim__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  padding-block: clamp(44px, 5vw, 76px);
}
.sss-yardim__et {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.sss-yardim__et span { width: 28px; height: 1px; background: var(--c-accent); }
.sss-yardim__h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sss-yardim__m {
  max-width: 46ch;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .66);
}
.sss-yardim__kanal { display: flex; flex-direction: column; }
.sss-kanal {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-decoration: none;
  color: var(--c-white);
  transition: color var(--t-fast);
}
.sss-kanal:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.sss-kanal__et {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  transition: color var(--t-fast);
}
.sss-kanal__d { font-size: 15px; }
.sss-kanal__ok { display: grid; place-items: center; transition: transform var(--t-fast); }
.sss-kanal:hover { color: var(--c-accent); }
.sss-kanal:hover .sss-kanal__et { color: var(--c-accent); }
.sss-kanal:hover .sss-kanal__ok { transform: translateX(4px); }

/* ==========================================================================
   36. HAVALE / EFT BİLDİRİMİ (bagimsiz sayfa)
   Hesabim'daki panelin uye girisi istemeyen surumu. Form bilesenleri
   (.blok / .izgara / .alan / .giris / .bankalar / .onay) odeme sayfasindan
   oldugu gibi geliyor; burada yalnizca sayfaya ozel kabuk tanimlaniyor.
   ========================================================================== */

.hv-kapak {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.hv-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: 26px 0 clamp(32px, 3.6vw, 54px);
}
.hv-kapak__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 42px);
}

.hv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.hv-eyebrow span { width: 30px; height: 1px; background: var(--c-accent); }

.hv-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--c-black);
}
.hv-lead {
  max-width: 54ch;
  margin-top: 16px;
  font-size: clamp(14px, 1vw, 15.5px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}
.hv-lead b { font-weight: 500; color: var(--c-ink); }

.hv-adim { list-style: none; border-top: 1px solid var(--c-line-2); }
.hv-adim__i {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-2);
}
.hv-adim__n {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.hv-adim__gov { display: flex; flex-direction: column; gap: 4px; }
.hv-adim__gov b { font-size: 14px; font-weight: 500; color: var(--c-black); }
.hv-adim__gov span { font-size: 12.5px; line-height: 1.6; color: var(--c-muted); }

/* --- Govde -------------------------------------------------------------- */
.hv-govde {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
  padding-block: clamp(34px, 4vw, 60px) clamp(50px, 6vw, 84px);
}
.hv-sol { display: flex; flex-direction: column; gap: 22px; }
.hv-sol > .bilgi { margin: 0; }

/* --- Form ---------------------------------------------------------------- */
.hv-form .blok__gov > .onay { margin-top: 20px; }
/* Tek basina duran hata satiri (.alan disinda) her zaman gizli degil, JS acar */
.alan__hata--tek { display: flex; margin-top: 6px; }
.alan__hata--tek[hidden] { display: none; }

.alan__ipucu {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--c-muted);
}
.alan__ipucu a { color: var(--c-muted-dark); text-decoration: underline; text-decoration-color: var(--c-line-2); }
.alan__ipucu a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* Tutar alani: birim isareti kutunun icinde sabit durur */
.giris--para { padding-right: 42px; }
.alan__birim {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--c-muted);
  pointer-events: none;
}

/* --- Dekont yukleme ------------------------------------------------------ */
.hv-dosya {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px dashed var(--c-line-2);
  background: var(--c-bg-tint);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.hv-dosya:hover { border-color: var(--c-black); background: var(--c-bg); }
.hv-dosya.is-suruklenen { border-color: var(--c-accent); background: var(--c-bg); }
.hv-dosya.is-dolu { border-style: solid; border-color: var(--c-black); background: var(--c-bg); }
/* Klavyeyle gezende gizli input'un odagi etikette gorunsun */
.hv-dosya:focus-within { border-color: var(--c-black); }
.hv-dosya__ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
}
.hv-dosya.is-dolu .hv-dosya__ikon {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}
.hv-dosya__gov { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hv-dosya__gov b {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hv-dosya__gov span { font-size: 11.5px; color: var(--c-muted); }
.hv-dosya__b {
  padding: 9px 16px;
  border: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.hv-dosya:hover .hv-dosya__b { background: var(--c-black); color: var(--c-white); }
.hv-dosya__sil {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--c-muted-dark);
  cursor: pointer;
  transition: color var(--t-fast);
}
.hv-dosya__sil:hover { color: var(--c-accent); }
.hv-dosya__sil[hidden] { display: none; }

.hv-form__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.hv-form__not { font-size: 12px; line-height: 1.6; color: var(--c-muted); }
.hv-gonder { min-width: 220px; justify-content: center; }

/* --- Gonderim sonrasi ---------------------------------------------------- */
.hv-sonuc {
  padding: clamp(30px, 3.4vw, 46px);
  border: 1px solid var(--c-black);
  background: var(--c-bg);
}
.hv-sonuc[hidden] { display: none; }
.hv-sonuc__tik {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  background: var(--c-black);
  color: var(--c-white);
}
.hv-sonuc__h {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-black);
}
.hv-sonuc__m {
  max-width: 56ch;
  margin-top: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}

.hv-ozet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.hv-ozet__s {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 18px;
  background: var(--c-bg);
}
.hv-ozet dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hv-ozet dd {
  font-size: 15px;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.hv-sonuc__d { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Yan sutun ----------------------------------------------------------- */
.hv-yan {
  position: sticky;
  top: calc(var(--h-menubar) + 24px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hv-kart { padding: 24px; border: 1px solid var(--c-line); background: var(--c-bg); }
.hv-kart__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-line);
}
.hv-sira { list-style: none; }
.hv-sira li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}
.hv-sira li:last-child { border-bottom: 0; padding-bottom: 0; }
.hv-sira b { font-size: 13px; font-weight: 500; color: var(--c-black); }
.hv-sira span { font-size: 12.5px; line-height: 1.65; color: var(--c-muted); }
.hv-sira span b { font-size: inherit; }

.hv-kart--siyah { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.hv-kart__et--acik { color: rgba(255, 255, 255, .5); border-bottom-color: rgba(255, 255, 255, .16); }
.hv-kart__m {
  margin: 14px 0 16px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .68);
}
.hv-kart__l {
  display: block;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  color: var(--c-white);
  text-decoration: none;
  transition: color var(--t-fast);
}
.hv-kart__l:hover { color: var(--c-accent); }

.hv-form[hidden] { display: none; }

/* ==========================================================================
   37. SADAKAT PROGRAMI (Bloom Club)
   Siyah kapak -> hos geldin kuponu -> nasil calisir -> seviye kartlari +
   karsilastirma tablosu -> puan hesaplayici (siyah) -> program sorulari
   (32. blogun akordiyonu yeniden kullaniliyor) -> kapanis.
   ========================================================================== */

/* --- Ortak parcalar ------------------------------------------------------ */
.sdk-et {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 18px;
}
.sdk-et span { width: 30px; height: 1px; background: var(--c-accent); }
.sdk-et--orta { justify-content: center; }

.sdk-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--c-black);
}
.sdk-h2 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.sdk-h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: 1px;
  background: var(--c-accent);
}
.sdk-h2--acik { color: var(--c-white); }

.sdk-m {
  max-width: 58ch;
  margin-top: 16px;
  font-size: clamp(14px, 1vw, 15.5px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}
.sdk-m b { font-weight: 500; color: var(--c-ink); }
.sdk-m--orta { margin-inline: auto; }
.sdk-m--acik { color: rgba(255, 255, 255, .68); }
.sdk-m--acik b { color: var(--c-white); }

.sdk-bas { margin-bottom: clamp(28px, 3vw, 46px); }
.sdk-bas--orta { text-align: center; }

.sdk-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 30px;
  border: 1px solid var(--c-white);
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: gap var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sdk-btn:hover { gap: 17px; background: rgba(255, 255, 255, .84); border-color: rgba(255, 255, 255, .84); color: var(--c-black); }
.sdk-btn--acik { background: transparent; color: var(--c-white); }
.sdk-btn--acik:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
.sdk-btn--kucuk { padding: 15px 24px; border-color: var(--c-black); background: var(--c-black); color: var(--c-white); }
.sdk-btn--kucuk:hover { background: var(--c-ink); border-color: var(--c-ink); }
.sdk-btn--beyaz { border-color: var(--c-white); background: var(--c-white); color: var(--c-black); }
.sdk-btn--cizgi { border-color: rgba(255, 255, 255, .4); background: transparent; color: var(--c-white); }
.sdk-btn--cizgi:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

/* --- Kapak --------------------------------------------------------------- */
.sdk-kapak { background: var(--c-black); color: var(--c-white); }
.sdk-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: 26px 0 clamp(40px, 4.4vw, 64px);
}
.sdk-crumb { margin-bottom: clamp(34px, 4vw, 60px); }
.sdk-crumb a, .sdk-crumb span { color: rgba(255, 255, 255, .55); }
.sdk-crumb a:hover { color: var(--c-white); }

.sdk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 20px;
}
.sdk-eyebrow span { width: 30px; height: 1px; background: var(--c-white); }

.sdk-h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 108px);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.sdk-h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--c-white);
}
.sdk-lead {
  max-width: 52ch;
  margin-top: clamp(20px, 2vw, 30px);
  font-size: clamp(14px, 1.1vw, 16.5px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .7);
}
.sdk-lead b { font-weight: 500; color: var(--c-white); }

.sdk-kapak__d {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 36px);
}

.sdk-serit {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 4vw, 60px);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
}
.sdk-serit__i {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: var(--c-black);
}
.sdk-serit__n {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.sdk-serit__ad {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sdk-serit__o {
  margin-left: auto;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .58);
  font-variant-numeric: tabular-nums;
}

/* --- Hos geldin kuponu --------------------------------------------------- */
.sdk-kupon { border-bottom: 1px solid var(--c-line); }
.sdk-kupon__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(30px, 4vw, 74px);
  align-items: center;
  padding-block: clamp(44px, 5vw, 78px);
}

.sdk-form { margin-top: clamp(22px, 2.4vw, 32px); max-width: 520px; }
.sdk-form__satir { display: flex; gap: 10px; }
.sdk-giris {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-ink);
  transition: border-color var(--t-fast);
}
.sdk-giris:focus { outline: none; border-color: var(--c-black); }
.sdk-giris::placeholder { color: var(--c-muted-2); }
.sdk-giris.is-hata { border-color: var(--c-accent); }
.sdk-form .onay { margin-top: 12px; }
.sdk-form__uyari {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--c-accent);
}
.sdk-form__uyari[hidden] { display: none; }
.sdk-form__uyari.is-ok { color: var(--c-black); }

/* Bilet: solda oran, sagda kod; ortada delikli ayrac */
.sdk-bilet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.15fr);
  align-items: stretch;
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}
.sdk-bilet__sol,
.sdk-bilet__sag { padding: clamp(24px, 2.6vw, 34px); }
.sdk-bilet__marka {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 18px;
}
.sdk-bilet__oran {
  font-family: var(--font-display);
  font-size: clamp(46px, 5vw, 74px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--c-white);
}
.sdk-bilet__ad {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
/* Ayrac: kesik cizgi + iki ucta oyuk */
.sdk-bilet__cizgi {
  position: relative;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .34) 0 6px, transparent 6px 12px);
}
.sdk-bilet__cizgi::before,
.sdk-bilet__cizgi::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 9px;
  transform: translateX(-50%);
  background: var(--c-bg);
}
.sdk-bilet__cizgi::before { top: -1px; }
.sdk-bilet__cizgi::after { bottom: -1px; }

.sdk-bilet__et {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 14px;
}
.sdk-bilet__kod {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-white);
  overflow-wrap: anywhere;
}
.sdk-bilet__not {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
}
.sdk-bilet__kopya {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sdk-bilet__kopya:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
.sdk-bilet__kopya[hidden] { display: none; }
.sdk-bilet.is-hazir { border-color: var(--c-white); }

/* --- Nasil calisir ------------------------------------------------------- */
.sdk-nasil__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(44px, 5vw, 78px);
}
.sdk-adimlar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 52px);
}
.sdk-adim { padding-top: 20px; border-top: 1px solid var(--c-black); }
.sdk-adim__n {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.sdk-adim__h {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-black);
  margin-bottom: 10px;
}
.sdk-adim__m { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--c-muted-dark); }
.sdk-adim__m b { font-weight: 500; color: var(--c-ink); }

/* --- Seviyeler ----------------------------------------------------------- */
.sdk-seviye { background: var(--c-bg-tint); border-block: 1px solid var(--c-line); }
.sdk-seviye__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(48px, 5.4vw, 88px);
}

.sdk-kartlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}
.sdk-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  transition: border-color var(--t-mid);
}
.sdk-kart:hover { border-color: var(--c-line-2); }
.sdk-kart--ust { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.sdk-kart--ust:hover { border-color: var(--c-white); }
.sdk-kart__rozet {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 13px;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sdk-kart__bas { padding-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.sdk-kart--ust .sdk-kart__bas { border-bottom-color: rgba(255, 255, 255, .18); }
.sdk-kart__n {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.sdk-kart__ad {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-black);
}
.sdk-kart--ust .sdk-kart__ad { color: var(--c-white); }
.sdk-kart__aralik {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.sdk-kart--ust .sdk-kart__aralik { color: rgba(255, 255, 255, .58); }

.sdk-kart__oran {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}
.sdk-kart--ust .sdk-kart__oran { border-bottom-color: rgba(255, 255, 255, .18); }
.sdk-kart__oran b {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.sdk-kart--ust .sdk-kart__oran b { color: var(--c-white); }
.sdk-kart__oran span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sdk-kart--ust .sdk-kart__oran span { color: rgba(255, 255, 255, .55); }

.sdk-liste { list-style: none; padding: 18px 0; flex: 1 1 auto; }
.sdk-liste li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-body);
}
.sdk-kart--ust .sdk-liste li { color: rgba(255, 255, 255, .8); }
.sdk-liste li b { font-weight: 500; color: var(--c-ink); }
.sdk-kart--ust .sdk-liste li b { color: var(--c-white); }
/* Tik isareti iki kenarli kucuk bir kutudan; dolgu ikon kullanmiyoruz. */
.sdk-liste i {
  flex: none;
  width: 10px;
  height: 6px;
  margin-top: 6px;
  border-left: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(-45deg);
}
.sdk-kart__ornek {
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: 12.5px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.sdk-kart--ust .sdk-kart__ornek { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .58); }
.sdk-kart__ornek b { font-weight: 500; color: var(--c-black); }
.sdk-kart--ust .sdk-kart__ornek b { color: var(--c-white); }
/* Siyah kartta turuncu okunmuyor: rozet, sira numarasi ve tikler beyaz */
.sdk-kart--ust .sdk-kart__rozet { background: var(--c-white); color: var(--c-black); }
.sdk-kart--ust .sdk-kart__n { color: var(--c-white); }
.sdk-kart--ust .sdk-liste i { border-left-color: var(--c-white); border-bottom-color: var(--c-white); }

/* --- Karsilastirma tablosu ----------------------------------------------- */
.sdk-tablo__sar {
  margin-top: clamp(30px, 3.4vw, 52px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.sdk-tablo { width: 100%; min-width: 640px; border-collapse: collapse; }
.sdk-tablo th,
.sdk-tablo td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--c-line);
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--c-body);
  font-variant-numeric: tabular-nums;
}
.sdk-tablo thead th {
  padding-block: 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-black);
  background: var(--c-bg-tint);
}
.sdk-tablo__n {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--c-accent);
}
.sdk-tablo tbody th {
  text-align: left;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--c-ink);
}
.sdk-tablo td b { font-weight: 500; color: var(--c-black); }
.sdk-tablo tr:last-child th,
.sdk-tablo tr:last-child td { border-bottom: 0; }
/* En ust seviye sutunu tum satirlarda vurgulu */
.sdk-tablo__ust { background: var(--c-bg-tint); }
.sdk-tablo thead .sdk-tablo__ust { background: var(--c-black); color: var(--c-white); }
.sdk-tablo thead .sdk-tablo__ust .sdk-tablo__n { color: var(--c-accent); }

.sdk-tablo td[data-var]::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(-45deg) translateY(-2px);
}
.sdk-tablo td[data-yok]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--c-line-2);
  vertical-align: middle;
}

/* --- Hesaplayici --------------------------------------------------------- */
.sdk-hesap { background: var(--c-black); color: var(--c-white); }
.sdk-hesap__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(30px, 4vw, 76px);
  align-items: center;
  padding-block: clamp(48px, 5.4vw, 88px);
}
.sdk-et--acik { color: var(--c-accent); }

.sdk-alan { margin-top: clamp(24px, 2.6vw, 36px); }
.sdk-alan__et {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.sdk-alan__sar { position: relative; display: block; max-width: 320px; }
.sdk-alan__giris {
  width: 100%;
  height: 62px;
  padding: 0 46px 0 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast);
}
.sdk-alan__giris:focus { outline: none; border-color: var(--c-white); }
.sdk-alan__birim {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255, 255, 255, .5);
  pointer-events: none;
}

.sdk-kaydir {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 520px;
  height: 2px;
  margin-top: 30px;
  background: rgba(255, 255, 255, .24);
  cursor: pointer;
}
.sdk-kaydir::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--c-white);
  cursor: pointer;
}
.sdk-kaydir::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--c-white);
  cursor: pointer;
}
.sdk-kaydir:focus-visible { outline: 2px solid var(--c-white); outline-offset: 6px; }
.sdk-kaydir__et {
  display: flex;
  justify-content: space-between;
  max-width: 520px;
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .42);
  font-variant-numeric: tabular-nums;
}

.sdk-sonuc { padding: clamp(26px, 2.8vw, 40px); background: var(--c-white); color: var(--c-black); }
.sdk-sonuc__bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.sdk-sonuc__et {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sdk-sonuc__sev { display: flex; align-items: baseline; gap: 12px; }
.sdk-sonuc__sev b {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.sdk-sonuc__sev > span {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sdk-cubuk {
  position: relative;
  height: 4px;
  margin-top: 22px;
  background: var(--c-bg-soft-2);
}
.sdk-cubuk__dolgu {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-black);
  transition: width var(--t-mid);
}
.sdk-cubuk__isaret {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 12px;
  background: var(--c-muted-2);
}
.sdk-sonuc__ilerleme {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--c-muted-dark);
}
.sdk-sonuc__ilerleme b { font-weight: 500; color: var(--c-black); font-variant-numeric: tabular-nums; }

.sdk-sonuc__satirlar { margin-top: 22px; }
.sdk-sonuc__satirlar > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.sdk-sonuc__satirlar dt { font-size: 12.5px; color: var(--c-muted-dark); }
.sdk-sonuc__satirlar dd {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sdk-sonuc__toplam {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
  padding: 20px;
  background: var(--c-black);
  color: var(--c-white);
}
.sdk-sonuc__toplam .sdk-sonuc__et { color: rgba(255, 255, 255, .5); }
.sdk-sonuc__puan,
.sdk-sonuc__tl {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sdk-sonuc__puan { color: var(--c-accent); }
.sdk-sonuc__not {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--c-muted);
}

/* --- Program sorulari ---------------------------------------------------- */
.sdk-sss__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(48px, 5.4vw, 84px);
}
.sdk-sss__liste { max-width: 860px; }
/* Bu sayfada grup basligi yok; ilk ogenin ust cizgisi bassin */
.sdk-sss__liste .sss-grup { padding-top: 0; border-top: 1px solid var(--c-line); }
.sdk-sss__alt {
  max-width: 860px;
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-muted-dark);
}
.sdk-sss__alt a { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-2); }
.sdk-sss__alt a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* --- Kapanis ------------------------------------------------------------- */
.sdk-son { background: var(--c-black); color: var(--c-white); }
.sdk-son__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(48px, 5.4vw, 84px);
  text-align: center;
}
.sdk-son__h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.015em;
}
.sdk-son__h em { font-style: normal; font-weight: 500; color: var(--c-accent); }
.sdk-son__d {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 36px);
}

/* Kirilim satirindaki oran rozeti */
.sdk-oran {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--c-line);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--c-muted-dark);
}
/* Kod uretildikten sonra form satiri gizlenir */
.sdk-form__satir[hidden] { display: none; }

/* ==========================================================================
   38. ÜYE ÇEKMECESİ
   Header'daki "Üye Ol / Giriş Yap" acar. SAG kenardan girer, tepeden tabana
   tam boy. Icinde uc gorunum var (giris / uye ol / sifremi unuttum) +
   gonderim sonrasi sonuc ekrani.
   ========================================================================== */

/* Mobil menu soldan aciliyor; uye cekmecesi SAGDAN. Tetigi de header'in
   sag ucunda oldugu icin panel oradan giriyor. */
.uye {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(440px, 94vw);
  background: var(--c-bg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility .42s;
  box-shadow: -24px 0 60px -40px rgba(0, 0, 0, .6);
}
.uye.is-open { transform: none; visibility: visible; }

.uye__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--c-line);
}
.uye__logo { display: block; width: 128px; height: auto; }
.uye__kapat {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.uye__kapat:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.uye__govde {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 26px 32px;
}
.uye__gorunum { display: block; }
/* display verdigimiz her ogenin [hidden] karsiligi da olmali */
.uye__gorunum[hidden] { display: none; }

.uye__et {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.uye__et span { width: 26px; height: 1px; background: var(--c-accent); }

.uye__h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--c-black);
}
.uye__m {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-muted-dark);
}
.uye__m b { font-weight: 500; color: var(--c-ink); }

.uye__form { margin-top: 22px; }
.uye__alan { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.uye__aet {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.uye__sar { position: relative; display: block; }
.uye__giris {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-ink);
  transition: border-color var(--t-fast);
}
.uye__giris:focus { outline: none; border-color: var(--c-black); }
.uye__giris--sifre { padding-right: 46px; }
.uye__goz {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--t-fast);
}
.uye__goz:hover { color: var(--c-black); }
/* Sifre gorunurken ikonun uzerine egik cizgi düşer */
.uye__goz.is-acik::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
}

.uye__hata {
  display: none;
  font-size: 11.5px;
  color: var(--c-accent);
}
.uye__alan.is-hata .uye__hata { display: block; }
.uye__alan.is-hata .uye__giris { border-color: var(--c-accent); }
.uye__ipucu { font-size: 11.5px; line-height: 1.5; color: var(--c-muted-2); }

/* Sifre gucu */
.uye__guc { display: block; height: 2px; background: var(--c-bg-soft-2); }
.uye__guc i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-accent);
  transition: width var(--t-mid), background-color var(--t-mid);
}
.uye__guc.is-orta i { background: #b8860b; }
.uye__guc.is-iyi i { background: var(--c-black); }

.uye__satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 20px;
}
.uye__satir .onay { padding: 0; }
.uye__bag {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--c-muted-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line-2);
  cursor: pointer;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.uye__bag:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

.uye__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: gap var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.uye__btn:hover { gap: 16px; background: var(--c-accent); border-color: var(--c-accent); }
.uye__btn--cizgi { background: transparent; color: var(--c-black); }
.uye__btn--cizgi:hover { background: var(--c-black); color: var(--c-white); }

.uye__uyari {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-accent);
}
.uye__uyari[hidden] { display: none; }

.uye__ayrac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--c-muted-2);
}
.uye__ayrac::before,
.uye__ayrac::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-line); }
.uye__ayrac span {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.uye__alt { font-size: 13px; color: var(--c-muted-dark); text-align: center; }
.uye__alt button {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-black);
  cursor: pointer;
  border-bottom: 1px solid var(--c-black);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.uye__alt button:hover { color: var(--c-accent); border-color: var(--c-accent); }

.uye__kupon {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 24px;
  padding: 15px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-tint);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-muted-dark);
}
.uye__kupon svg { flex: none; margin-top: 2px; color: var(--c-accent); }
.uye__kupon b { font-weight: 500; color: var(--c-ink); }
.uye__kupon a { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; }
.uye__kupon a:hover { color: var(--c-accent); }

/* Sonuc ekrani */
.uye__tik {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  background: var(--c-black);
  color: var(--c-white);
}
.uye__sonuc__d { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.uye__foot {
  flex: none;
  padding: 16px 26px;
  border-top: 1px solid var(--c-line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--c-muted);
}
.uye__foot a { color: var(--c-muted-dark); text-decoration: underline; text-underline-offset: 3px; }
.uye__foot a:hover { color: var(--c-accent); }

/* Header'daki tetik: <a> degil <button> oldu, gorunum ayni kalmali */
.action--uye {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.action--uye .action__label { white-space: nowrap; }

/* ==========================================================================
   39. YASAL BELGELER (KVKK · Çerez · Gizlilik · Kullanıcı Sözleşmesi)
   Dort belge tek kutuphane gibi davraniyor: ustte belge seridi, solda
   yapiskan icindekiler + diger belgeler, sagda ~760px olcu. Basligi olmayan
   belge (Gizlilik) icindekiler rayini bassiz gosteriyor — sayfa metnin
   sekline uyuyor, metin sayfaya degil.
   ========================================================================== */

/* --- Kapak --------------------------------------------------------------- */
.ys-kapak {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.ys-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: 26px 0 clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--c-line);
}
.ys-crumb { margin-bottom: clamp(26px, 3vw, 42px); }

.ys-et {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.ys-et span { width: 30px; height: 1px; background: var(--c-accent); }

.ys-h1 {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.ys-lead {
  max-width: 62ch;
  margin-top: 16px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}

.ys-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(20px, 2.2vw, 30px);
  font-size: 12.5px;
  color: var(--c-muted);
}
.ys-meta__ayrac { width: 1px; height: 20px; background: var(--c-line-2); }
.ys-yazdir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 11px 20px;
  border: 1px solid var(--c-line-2);
  background: transparent;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ys-yazdir:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }


/* --- Gövde --------------------------------------------------------------- */
.ys-govde {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  /* Belge solda, yasal belge listesi sagda. Ortalama yok. */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(36px, 5vw, 72px);
  padding-block: clamp(40px, 4.6vw, 70px) clamp(50px, 6vw, 88px);
  align-items: start;
}

/* Sagdaki belge listesi: okurken yerinde kalir. */
.ys-belgeler {
  position: sticky;
  top: calc(var(--h-menubar) + 28px);
}
.ys-belgeler__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.ys-belgeler__liste {
  margin-top: 16px;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.ys-belgeler__liste li { border-bottom: 1px solid var(--c-line); }
.ys-belgeler__liste a {
  display: block;
  padding: 13px 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--c-body);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.ys-belgeler__liste a:hover { color: var(--c-black); padding-left: 6px; }
.ys-belgeler__liste a[aria-current="page"] {
  font-weight: 500;
  color: var(--c-black);
}

.ys-ic { list-style: none; display: flex; flex-direction: column; }
.ys-ic a {
  display: flex;
  gap: 10px;
  padding: 8px 0 8px 14px;
  border-left: 1px solid var(--c-line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ys-ic a:hover { color: var(--c-ink); border-color: var(--c-line-2); }
.ys-ic a.is-active { color: var(--c-black); font-weight: 500; border-left-color: var(--c-accent); }
.ys-ic em {
  font-style: normal;
  flex: none;
  font-size: 10.5px;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
}
.ys-ic a.is-active em { color: var(--c-accent); }

.ys-diger { list-style: none; }
.ys-diger a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-muted-dark);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ys-diger a:hover { color: var(--c-accent); }
.ys-diger li:last-child a { border-bottom: 0; }

.ys-kart { padding: 20px; background: var(--c-black); color: var(--c-white); }
.ys-kart__h { font-family: var(--font-display); font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.ys-kart__m { font-size: 12px; line-height: 1.65; color: rgba(255, 255, 255, .66); margin-bottom: 14px; }
.ys-kart__l {
  display: block;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px;
  color: var(--c-white);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ys-kart__l:hover { color: var(--c-accent); }

/* --- Metin --------------------------------------------------------------- */
.ys-metin {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--c-body);
}
.ys-metin p { margin-bottom: 16px; }
.ys-metin b { font-weight: 500; color: var(--c-ink); }
.ys-metin a {
  color: var(--c-black);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--c-line-2);
  transition: color var(--t-fast), box-shadow var(--t-fast);
}
.ys-metin a:hover { color: var(--c-accent); box-shadow: inset 0 -1px 0 var(--c-accent); }

.ys-giris {
  padding: clamp(20px, 2.2vw, 28px);
  margin-bottom: clamp(28px, 3vw, 40px);
  border-left: 2px solid var(--c-black);
  background: var(--c-bg-tint);
}
.ys-giris p:last-child { margin-bottom: 0; }
.ys-giris p { font-size: 15px; color: var(--c-muted-dark); }

.ys-bolum { padding-top: clamp(30px, 3.2vw, 46px); }
.ys-bolum:first-child { padding-top: 0; }
.ys-bolum__bas {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--h-menubar) + 24px);
}
.ys-bolum__n {
  flex: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.ys-h2 {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--c-black);
}
/* Bolume dogrudan baglanti — imlec uzerine gelince cikar */
.ys-bag {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-muted-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ys-bolum__bas:hover .ys-bag,
.ys-bag:focus-visible { opacity: 1; }
.ys-bag:hover { color: var(--c-black); border-color: var(--c-line); }
.ys-bag.is-done { opacity: 1; color: var(--c-accent); border-color: var(--c-accent); }

/* Listeler */
.ys-liste { list-style: none; margin: 0 0 18px; }
.ys-liste li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--c-line);
  font-size: 14.5px;
  line-height: 1.7;
}
.ys-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 12px;
  height: 1px;
  background: var(--c-accent);
}
.ys-liste li:last-child { border-bottom: 0; }
/* Numarali surumde madde isareti yerine (i)/(1) etiketi var; cizgi cikmasin */
.ys-liste--n li { padding-left: 0; display: flex; gap: 10px; }
.ys-liste--n li::before { display: none; }
.ys-liste--n b {
  flex: none;
  font-weight: 500;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

/* Numarali izgara (KVKK isleme amaclari gibi) */
.ys-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 20px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  list-style: none;
}
.ys-izgara li {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  background: var(--c-bg);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-body);
}
.ys-izgara b {
  flex: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

/* Cerez turleri karti */
.ys-kartlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 22px;
}
.ys-tur {
  padding: 20px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  transition: border-color var(--t-mid);
}
.ys-tur:hover { border-color: var(--c-line-2); }
.ys-tur__ad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-black);
}
.ys-tur__ad i { flex: none; width: 18px; height: 1px; background: var(--c-accent); }
.ys-tur p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--c-muted-dark); }

/* Kunye kutusu (veri sorumlusu / satici) */
.ys-kunye {
  margin: 6px 0 20px;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--c-black);
  color: var(--c-white);
}
.ys-kunye__et {
  margin-bottom: 16px !important;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.ys-kunye dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; }
.ys-kunye dt,
.ys-kunye dd {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 13.5px;
  line-height: 1.6;
}
.ys-kunye dt { color: rgba(255, 255, 255, .55); }
.ys-kunye dd { color: var(--c-white); overflow-wrap: anywhere; }
.ys-kunye dl > :nth-last-child(-n+2) { border-bottom: 0; }
.ys-kunye a { color: var(--c-white); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35) !important; }
.ys-kunye a:hover { color: var(--c-accent); box-shadow: inset 0 -1px 0 var(--c-accent) !important; }

/* Onay vurgusu (buyuk harfli kabul beyani) */
.ys-beyan {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--c-black);
  font-size: 13.5px !important;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--c-black) !important;
}

/* Belge sonu */
.ys-son {
  margin-top: clamp(34px, 3.6vw, 52px);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--c-line);
}
.ys-son__m { font-size: 13px; line-height: 1.75; color: var(--c-muted); }
.ys-son__d { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ys-son__l {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  text-decoration: none;
  box-shadow: none !important;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ys-son__l:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white) !important; }

/* --- Yazdirma ------------------------------------------------------------ */
@media print {
  .topbar, .header, .menubar, .mnav, .drawer-overlay, .uye,
  .foot, .ys-yazdir, .ys-bag, .skip-link { display: none !important; }
  .ys-govde { display: block; padding: 0; width: 100%; }
  .ys-kapak { background: none; border: 0; }
  .ys-kapak__in, .ys-govde { max-width: none; }
  .ys-metin { font-size: 11pt; line-height: 1.55; color: #000; }
  .ys-h1 { font-size: 22pt; }
  .ys-h2 { font-size: 13pt; }
  .ys-bolum { break-inside: avoid; padding-top: 14pt; }
  .ys-kunye { background: none; color: #000; border: 1pt solid #000; }
  .ys-kunye dt, .ys-kunye dd { color: #000; border-color: #999; }
  .ys-kunye__et { color: #000 !important; }
  a { color: #000 !important; box-shadow: none !important; }
}

/* ==========================================================================
   40. BEĞENDİKLERİM · KARŞILAŞTIRMA · 404
   Ucu birlikte calisiyor: begendiklerim'de secilen urunler alttaki yapiskan
   seritle karsilastirmaya gidiyor. 404 ayni bilesenleri kullanmiyor, sonda.
   ========================================================================== */

/* --- Ortak kapak --------------------------------------------------------- */
.bg-kapak {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.bg-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: 26px 0 clamp(28px, 3vw, 44px);
}
.bg-crumb { margin-bottom: clamp(24px, 3vw, 40px); }
.bg-et {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.bg-et span { width: 30px; height: 1px; background: var(--c-accent); }
.bg-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.bg-lead {
  max-width: 58ch;
  margin-top: 14px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}

/* Araç çubuğu */
.bg-arac {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: 18px;
  border-bottom: 1px solid var(--c-line);
}
.bg-sayac { font-size: 13px; color: var(--c-muted); }
.bg-sayac b { font-weight: 500; color: var(--c-black); font-variant-numeric: tabular-nums; }
.bg-arac__sag { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.bg-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--c-line-2);
  background: transparent;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bg-mini:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.bg-mini--ana { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.bg-mini--ana:hover { background: var(--c-accent); border-color: var(--c-accent); }
.bg-mini.is-done { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }

.bg-sirala { position: relative; display: inline-flex; align-items: center; }
.bg-sirala select {
  appearance: none;
  padding: 11px 34px 11px 16px;
  border: 1px solid var(--c-line-2);
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--c-ink);
  cursor: pointer;
}
.bg-sirala select:focus { outline: none; border-color: var(--c-black); }
.bg-sirala svg { position: absolute; right: 13px; pointer-events: none; color: var(--c-muted); }

/* --- Beğendiklerim ızgarası ---------------------------------------------- */
.bg-govde {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(30px, 3.4vw, 50px) clamp(50px, 6vw, 84px);
}
.bg-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.bg-kart { position: relative; display: flex; flex-direction: column; }
.bg-kart[hidden] { display: none; }
.bg-kart__cerceve {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-soft);
  border: 1px solid transparent;
  transition: border-color var(--t-mid);
}
.bg-kart.is-secili .bg-kart__cerceve { border-color: var(--c-black); }
.bg-kart__g { display: block; aspect-ratio: 3 / 4; }
.bg-kart__g img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-mid), transform .7s var(--ease);
}
/* Ikinci gorsel varsa hover'da devreye girer */
.bg-kart__g img + img { position: absolute; inset: 0; opacity: 0; }
.bg-kart__g:hover img + img { opacity: 1; }
.bg-kart__g:hover img { transform: scale(1.03); }

.bg-kart__rozet {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 11px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bg-kart__rozet--indirim { background: var(--c-accent); }
.bg-kart__sil {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.bg-kart:hover .bg-kart__sil,
.bg-kart__sil:focus-visible { opacity: 1; }
.bg-kart__sil:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

/* Karşılaştırma seçimi */
.bg-sec {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.bg-sec:hover { border-color: var(--c-black); }
.bg-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.bg-sec__m {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
}
.bg-sec input:checked ~ .bg-sec__m { color: var(--c-black); }
.bg-kart.is-secili .bg-sec { background: var(--c-black); border-color: var(--c-black); }
.bg-kart.is-secili .bg-sec__m { color: var(--c-white); }

.bg-kart__gov { padding-top: 14px; }
.bg-kart__marka {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.bg-kart__ad {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 8px;
}
.bg-kart__ad a { color: var(--c-black); text-decoration: none; }
.bg-kart__ad a:hover { color: var(--c-accent); }
.bg-kart__f {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.bg-kart__f b { font-size: 15px; font-weight: 500; color: var(--c-black); }
.bg-kart__f del { font-size: 12.5px; color: var(--c-muted-2); }
.bg-kart__b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--c-black);
  background: transparent;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.bg-kart__b:hover { background: var(--c-black); color: var(--c-white); }
.bg-kart__b.is-done { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }

/* Boş durum */
.bg-bos {
  padding: clamp(46px, 6vw, 90px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--c-line);
  text-align: center;
}
.bg-bos[hidden] { display: none; }
.bg-bos__kalp { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border: 1px solid var(--c-line-2); color: var(--c-accent); }
.bg-bos__h {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 400;
  color: var(--c-black);
  margin-bottom: 10px;
}
.bg-bos__m { max-width: 48ch; margin: 0 auto 24px; font-size: 14px; line-height: 1.75; color: var(--c-muted-dark); }
.bg-bos__d { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* Yapışkan karşılaştırma şeridi */
.bg-serit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-menubar) - 1);
  transform: translateY(100%);
  transition: transform .34s var(--ease);
  background: var(--c-black);
  color: var(--c-white);
}
.bg-serit.is-acik { transform: none; }
.bg-serit__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
}
.bg-serit__kucuk { display: flex; gap: 8px; }
.bg-serit__kucuk img { width: 46px; height: 60px; object-fit: cover; }
.bg-serit__m { font-size: 13px; color: rgba(255, 255, 255, .72); }
.bg-serit__m b { color: var(--c-white); font-weight: 500; font-variant-numeric: tabular-nums; }
.bg-serit__d { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bg-serit__b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid var(--c-white);
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: gap var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.bg-serit__b:hover { gap: 15px; background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.bg-serit__b--bos { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, .4); }
.bg-serit__b--bos:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

/* --- Karşılaştırma ------------------------------------------------------- */
.ks-sar {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  margin-block: clamp(26px, 3vw, 44px) clamp(50px, 6vw, 84px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.ks-tablo { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.ks-tablo col:first-child { width: 190px; }

.ks-tablo th,
.ks-tablo td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
  vertical-align: middle;
  font-size: 14px;
  font-weight: 300;
  color: var(--c-body);
}
.ks-tablo th:first-child,
.ks-tablo td:first-child { border-left: 0; }
.ks-tablo tbody th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-bg-tint);
  position: sticky;
  left: 0;
  z-index: 2;
}
.ks-tablo tbody tr:last-child th,
.ks-tablo tbody tr:last-child td { border-bottom: 0; }
.ks-satir[hidden] { display: none; }
/* Farkli degerler vurgulanir */
.ks-tablo td.is-fark { color: var(--c-black); font-weight: 400; }
.ks-tablo td b { font-weight: 500; color: var(--c-black); font-variant-numeric: tabular-nums; }

/* Üst ürün satırı */
.ks-bas { padding: 0 !important; vertical-align: top; }
.ks-bas--kose { background: var(--c-bg-tint); position: sticky; left: 0; z-index: 3; }
.ks-urun { position: relative; display: flex; flex-direction: column; padding: 18px; }
.ks-urun__g { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-bg-soft); margin-bottom: 14px; }
.ks-urun__g img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ks-urun__g:hover img { transform: scale(1.04); }
.ks-urun__marka {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.ks-urun__ad {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 10px;
}
.ks-urun__ad a { color: var(--c-black); text-decoration: none; }
.ks-urun__ad a:hover { color: var(--c-accent); }
.ks-urun__f {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-black);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.ks-urun__sil {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ks-urun__sil:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

.ks-ekle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  padding: 18px;
  border: 1px dashed var(--c-line-2);
  margin: 12px;
  color: var(--c-muted);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.ks-ekle:hover { border-color: var(--c-black); color: var(--c-black); }
.ks-ekle span {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ks-ekle i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  font-style: normal;
  font-size: 20px;
  font-weight: 300;
}

/* --- 404 ----------------------------------------------------------------- */
.hata { background: var(--c-black); color: var(--c-white); }

/* Gorsel zaten "404 / YOLUNU KAYBETTIN" yaziyor; uzerine yazi basmiyoruz.
   Ust kenardan hizali cunku o yazi karenin ust yarisinda. */
.hata__gorsel {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-top: clamp(20px, 2.4vw, 34px);
}
/* Kompozisyon butun: kirpma yok. Genisligi sinirlayip ortaliyoruz ki
   genis ekranda devasa durmasin ama adamin ayaklari da kesilmesin. */
.hata__gorsel img {
  display: block;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  height: auto;
}

.hata__et {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.hata__et span { width: 30px; height: 1px; background: var(--c-accent); }

.hata__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(30px, 4vw, 76px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 96px);
}
.hata__h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.hata__m {
  max-width: 50ch;
  margin-top: 16px;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .7);
}
.hata__m b { color: var(--c-white); font-weight: 500; }
.hata__d { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.4vw, 34px); }
.hata__b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid var(--c-white);
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.hata__b:hover { gap: 16px; background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.hata__b--cizgi { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, .4); }
.hata__b--cizgi:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

/* Kayıp ilanı */
.hata__ilan {
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(255, 255, 255, .28);
}
.hata__ilan__et {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.hata__ilan dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.hata__ilan dt,
.hata__ilan dd {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px;
  line-height: 1.55;
}
.hata__ilan dt { color: rgba(255, 255, 255, .5); }
.hata__ilan dd { color: rgba(255, 255, 255, .92); overflow-wrap: anywhere; }
.hata__ilan dl > :nth-last-child(-n+2) { border-bottom: 0; }
.hata__odul {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
}
.hata__odul a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }
.hata__odul a:hover { color: var(--c-accent); }

/* Koku izi — sayfadan çıkıp giden noktalar */
.hata__iz {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(26px, 3vw, 40px);
}
.hata__iz i {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  animation: izGit 2.4s var(--ease) infinite;
}
.hata__iz i:nth-child(2) { animation-delay: .12s; }
.hata__iz i:nth-child(3) { animation-delay: .24s; }
.hata__iz i:nth-child(4) { animation-delay: .36s; }
.hata__iz i:nth-child(5) { animation-delay: .48s; }
.hata__iz i:nth-child(6) { animation-delay: .60s; }
.hata__iz span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
@keyframes izGit {
  0%, 100% { opacity: .25; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(5px); }
}

/* Arama + kestirmeler */
.hata-alt {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(44px, 5vw, 76px);
}
.hata-ara {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 620px);
  height: 58px;
  padding: 0 16px;
  border: 1px solid var(--c-line-2);
  transition: border-color var(--t-fast);
}
.hata-ara:focus-within { border-color: var(--c-black); }
.hata-ara__i { flex: none; color: var(--c-muted); }
.hata-ara input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  color: var(--c-ink);
}
.hata-ara input:focus { outline: none; }
.hata-ara button {
  flex: none;
  padding: 11px 20px;
  border: 0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.hata-ara button:hover { background: var(--c-accent); }

.hata-tabela { margin-top: clamp(26px, 3vw, 40px); }
.hata-tabela__et {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 12px;
}
.hata-tabela__d { display: flex; flex-wrap: wrap; gap: 9px; }
/* Gorseldeki ahsap tabelalarin karsiligi: sagi sivri kucuk levhalar */
.hata-tabela__i {
  position: relative;
  padding: 11px 28px 11px 16px;
  /* Kenarlik yok: clip-path 1px cizgiyi kopruyor, ucu acikta kaliyordu.
     Onun yerine dolu zemin — levha hissi bozulmuyor. */
  background: var(--c-bg-soft);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-black);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.hata-tabela__i:hover { background: var(--c-black); color: var(--c-white); }

.hata-kisa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 3.4vw, 48px);
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.hata-kisa__i {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  background: var(--c-bg);
  text-decoration: none;
  transition: background-color var(--t-fast);
}
.hata-kisa__i:hover { background: var(--c-bg-tint); }
.hata-kisa__n {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.hata-kisa__ad {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-black);
}
.hata-kisa__m { font-size: 12.5px; line-height: 1.6; color: var(--c-muted); }

.hata-son {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-muted-dark);
}
.hata-son a { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-2); }
.hata-son a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* ==========================================================================
   41. SİPARİŞ TAKİBİ
   Sorgu formu -> "servise baglaniliyor" iskeleti -> gonderi sonucu
   (adim seridi + hareket dokumu + kunye). Veri sayfadaki JSON blogundan
   geliyor; CodeIgniter bunu Yurtici Kargo yanitiyla degistirecek.
   ========================================================================== */

/* --- Kapak --------------------------------------------------------------- */
.tk-kapak {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-tint);
}
.tk-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: 26px 0 clamp(34px, 4vw, 58px);
}
.tk-crumb { margin-bottom: clamp(24px, 3vw, 40px); }
.tk-kapak__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.tk-et {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.tk-et span { width: 30px; height: 1px; background: var(--c-accent); }
.tk-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-black);
}
.tk-lead {
  max-width: 56ch;
  margin-top: 14px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-muted-dark);
}
.tk-lead b { font-weight: 500; color: var(--c-ink); }

/* --- Sorgu formu --------------------------------------------------------- */
.tk-form {
  margin-top: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.tk-sekme { display: flex; border-bottom: 1px solid var(--c-line); }
.tk-sekme__b {
  flex: 1 1 0;
  padding: 15px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tk-sekme__b:hover { color: var(--c-ink); }
.tk-sekme__b.is-active { color: var(--c-black); border-bottom-color: var(--c-black); }

.tk-pane { padding: clamp(20px, 2.2vw, 28px); }
.tk-pane[hidden] { display: none; }
.tk-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tk-alanlar--tek { grid-template-columns: minmax(0, 1fr); }
.tk-alan { display: flex; flex-direction: column; gap: 7px; }
.tk-alan__et {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tk-giris {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-ink);
  transition: border-color var(--t-fast);
}
.tk-giris:focus { outline: none; border-color: var(--c-black); }
.tk-giris.is-hata { border-color: var(--c-accent); }
.tk-giris::placeholder { color: var(--c-muted-2); }

.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  margin-top: 18px;
  padding: 15px 28px;
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: gap var(--t-fast), background-color var(--t-fast);
}
.tk-btn:hover { gap: 16px; background: var(--c-accent); border-color: var(--c-accent); }
.tk-btn[disabled] { opacity: .55; cursor: default; }
.tk-btn[disabled]:hover { gap: 10px; background: var(--c-black); border-color: var(--c-black); }

.tk-uyari { margin-top: 12px; font-size: 12px; line-height: 1.55; color: var(--c-accent); }
.tk-uyari[hidden] { display: none; }
.tk-ipucu {
  padding: 0 clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-muted);
}
.tk-ipucu a { color: var(--c-muted-dark); text-decoration: underline; text-underline-offset: 3px; }
.tk-ipucu a:hover { color: var(--c-accent); }

/* --- Taşıyıcı künyesi ---------------------------------------------------- */
.tk-tasiyici { padding: clamp(22px, 2.4vw, 30px); background: var(--c-black); color: var(--c-white); }
.tk-tasiyici__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 8px;
}
.tk-tasiyici__ad {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: .01em;
  margin-bottom: 18px;
}
.tk-tasiyici__l { list-style: none; }
.tk-tasiyici__l li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
}
.tk-tasiyici__l span { color: rgba(255, 255, 255, .55); }
.tk-tasiyici__l b { font-weight: 500; text-align: right; }
.tk-tasiyici__not {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}

/* --- Gövde --------------------------------------------------------------- */
.tk-govde {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(34px, 4vw, 58px) clamp(50px, 6vw, 84px);
}

/* Yükleniyor */
.tk-yukleniyor[hidden],
.tk-yok[hidden],
.tk-sonuc[hidden] { display: none; }
.tk-yukleniyor { padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--c-line); }
.tk-yukleniyor__m {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-muted-dark);
}
.tk-nokta { display: inline-flex; gap: 5px; }
.tk-nokta i {
  width: 5px;
  height: 5px;
  background: var(--c-accent);
  animation: tkNokta 1.1s ease-in-out infinite;
}
.tk-nokta i:nth-child(2) { animation-delay: .16s; }
.tk-nokta i:nth-child(3) { animation-delay: .32s; }
@keyframes tkNokta {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.tk-iskelet { display: flex; flex-direction: column; gap: 12px; }
.tk-iskelet__c {
  display: block;
  width: var(--w, 100%);
  height: var(--h, 14px);
  background: linear-gradient(90deg, var(--c-bg-soft) 25%, var(--c-bg-soft-2) 37%, var(--c-bg-soft) 63%);
  background-size: 400% 100%;
  animation: tkParla 1.4s ease infinite;
}
@keyframes tkParla {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Bulunamadı */
.tk-yok {
  padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--c-line);
  text-align: center;
}
.tk-yok__i {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border: 1px solid var(--c-line-2);
  color: var(--c-accent);
}
.tk-yok__h {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 400;
  color: var(--c-black);
  margin-bottom: 10px;
}
.tk-yok__m { max-width: 54ch; margin: 0 auto 22px; font-size: 14px; line-height: 1.75; color: var(--c-muted-dark); }
.tk-yok__d { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.tk-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--c-line-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tk-mini:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.tk-mini--ana { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.tk-mini--ana:hover { background: var(--c-accent); border-color: var(--c-accent); }

/* --- Sonuç: üst şerit ---------------------------------------------------- */
.tk-ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}
.tk-ust__no { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.tk-ust__no b { font-weight: 500; color: var(--c-white); font-variant-numeric: tabular-nums; }
.tk-ust__durum {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-top: 8px;
}
.tk-ust__tahmin { margin-top: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .68); }
.tk-ust__tahmin b { color: var(--c-white); font-weight: 500; }
.tk-ust__sag { align-self: center; }
.tk-ust__et {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 8px;
}
.tk-ust__takip { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.tk-ust__takip code {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.tk-kopya {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tk-kopya:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
.tk-dis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .78);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .3);
  transition: color var(--t-fast);
}
.tk-dis:hover { color: var(--c-accent); }

/* --- Adım şeridi --------------------------------------------------------- */
.tk-adimlar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-top: 0;
}
.tk-adim {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  background: var(--c-bg);
}
.tk-adim__n {
  width: 12px;
  height: 12px;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
}
.tk-adim__ad {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--c-muted);
}
.tk-adim__t {
  font-size: 11px;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
/* Tamamlanan adımlar */
.tk-adim.is-ok .tk-adim__n { background: var(--c-black); border-color: var(--c-black); }
.tk-adim.is-ok .tk-adim__ad { color: var(--c-black); font-weight: 500; }
/* İçinde bulunulan adım */
.tk-adim.is-simdi .tk-adim__n { background: var(--c-accent); border-color: var(--c-accent); }
.tk-adim.is-simdi .tk-adim__ad { color: var(--c-black); font-weight: 500; }
.tk-adim.is-simdi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-accent);
}

/* --- Alt: hareket + künye ------------------------------------------------ */
.tk-alt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(30px, 3.4vw, 48px);
}
.tk-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 4px;
}
.tk-h2 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-black);
}
.tk-h2--ust { margin-top: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.tk-yenile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-dark);
  cursor: pointer;
  transition: color var(--t-fast);
}
.tk-yenile:hover { color: var(--c-accent); }
.tk-yenile svg { transition: transform .5s var(--ease); }
.tk-yenile.is-donuyor svg { transform: rotate(360deg); }

/* Hareket dökümü */
.tk-liste { list-style: none; }
.tk-hr {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0 16px 26px;
  border-bottom: 1px solid var(--c-line);
}
.tk-hr:last-child { border-bottom: 0; }
/* Dikey çizgi + nokta */
.tk-hr::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-line);
}
.tk-hr:first-child::before { top: 22px; }
.tk-hr:last-child::before { bottom: auto; height: 22px; }
.tk-hr::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 22px;
  width: 9px;
  height: 9px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
}
.tk-hr--son::after { background: var(--c-accent); border-color: var(--c-accent); }
.tk-hr__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.tk-hr__t b { font-size: 13px; font-weight: 500; color: var(--c-black); }
.tk-hr__t span { font-size: 11.5px; color: var(--c-muted-2); }
.tk-hr__g { min-width: 0; }
.tk-hr__d {
  /* span ama satir olarak duracak; yoksa sube adiyla bitisik yaziliyor */
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.tk-hr--son .tk-hr__d { color: var(--c-black); font-weight: 500; }
.tk-hr__y { display: block; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }

.tk-guncel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: 11.5px;
  color: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
}

/* Künye */
.tk-kunye { padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--c-line); background: var(--c-bg-tint); }
.tk-kunye__l { margin-top: 4px; }
.tk-kunye__l > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
}
.tk-kunye__l > div:last-child { border-bottom: 0; }
.tk-kunye__l dt { font-size: 12px; color: var(--c-muted); }
.tk-kunye__l dd { font-size: 13.5px; line-height: 1.55; color: var(--c-ink); overflow-wrap: anywhere; }

.tk-urunler { list-style: none; margin-top: 4px; }
.tk-urunler li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.tk-urunler img { width: 46px; height: 61px; object-fit: cover; background: var(--c-bg-soft); }
.tk-urunler__ad { font-size: 13px; line-height: 1.45; color: var(--c-ink); }
.tk-urunler__ad span { display: block; font-size: 11px; color: var(--c-muted-2); margin-top: 3px; }
.tk-urunler__f { font-size: 13px; font-weight: 500; color: var(--c-black); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  font-size: 13px;
  color: var(--c-muted-dark);
}
.tk-toplam b { font-size: 17px; font-weight: 500; color: var(--c-black); font-variant-numeric: tabular-nums; }

.tk-yardim {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-muted);
}
.tk-yardim a {
  display: inline-block;
  margin-right: 14px;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line-2);
}
.tk-yardim a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* --- Bilgi bandı --------------------------------------------------------- */
.tk-bilgi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(40px, 4.6vw, 70px);
  padding-top: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--c-line);
}
.tk-bilgi__n {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.tk-bilgi__h {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-black);
  margin-bottom: 8px;
}
.tk-bilgi__m { font-size: 13.5px; font-weight: 300; line-height: 1.75; color: var(--c-muted-dark); }

/* ==========================================================================
   42. MOBİL ALT ÇUBUK
   Yalnizca 1023 altinda gorunur, tabana yapisik. Footer'i ortmesin diye
   body'ye cubuk yuksekligi kadar alt bosluk veriliyor. Sepet sayfasindaki
   yapiskan cubuk (.smobil) da bu cubugun ustune cikiyor.
   ========================================================================== */

.altnav { display: none; }
.altnav__i { text-decoration: none; }

@media (max-width: 1400px) {
  .nav__link { padding-inline: 8px; letter-spacing: .06em; }
  .mega__inner { grid-template-columns: 288px minmax(0, 1fr) 214px; gap: 40px; }
  .mega__cols { gap: 32px; }
  .mega__brand-grid { column-gap: 26px; }
}

/* Gutter daralt */
@media (max-width: 1280px) {
  :root { --gutter: 24px; }
  .actions { gap: 24px; }
  .mega__inner { grid-template-columns: 260px minmax(0, 1fr) 200px; gap: 32px; }
  .mega__aside { padding-left: 24px; }
  .mega__brand-grid { columns: 3; }

  .hero { --hero-pad: 44px; }

  .pgrid { gap: 34px 20px; }

  /* Öne çıkan blokta görsel sütunu daralır ama kaynağı aşmaz */
  .phone__link { grid-template-columns: 380px minmax(0, 1fr); }
  .yz-govde { grid-template-columns: 52px minmax(0, 660px) 52px; }
  .yz-nota,
  .yz-urun,
  .yz-bulten { margin-inline: -34px; }
  .sss-govde { grid-template-columns: 230px minmax(0, 1fr); }
  .sss-kanal { grid-template-columns: 120px minmax(0, 1fr) 20px; }
  .hv-govde { grid-template-columns: minmax(0, 1fr) 300px; }
  .sdk-kupon__in { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .sdk-hesap__in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .action--uye .action__label { letter-spacing: .08em; font-size: 10.5px; }
  .bg-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-kapak__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .tk-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); }
}

/* Editoryal bağlantılar çekmeceye devreder.
   Sınır 1180 değil 1340: Montserrat, Jost'tan geniş olduğu için 1280'de
   sabitlenmiş menübar taşıyordu (nav 1249px istiyor, 1201px yer vardı). */
@media (max-width: 1340px) {
  .nav__item--soft { display: none; }
  .search { width: clamp(260px, 34vw, 420px); }
}

/* Tablet: menübar kalkar, çekmeceye geçilir */
@media (max-width: 1023px) {
  :root { --h-header: 76px; }

  /* Menü olmadığı için bant slider'ın altına geçer */
  #main { display: flex; flex-direction: column; }
  .hero        { order: 1; }
  .promo-band  { order: 2; }
  #main > *:not(.hero):not(.promo-band) { order: 3; }

  /* Hero dikeye diziliyor: görsel üstte, panel altta, kontroller en altta */
  .hero { --hero-pad: 40px; }
  .hero__slide { grid-template-columns: 1fr; min-height: 0; }
  /* Kaynaklar (5 gorsel + video) tam 1.600 oraninda; kutuyu da 16/10
     yapinca cover hicbir seyi kirpmiyor, kare butun goruluyor. */
  .hero__media { aspect-ratio: 16 / 10; }
  .hero__panel { padding: 40px var(--gutter) 30px; }
  .hero__body { max-width: 560px; }
  .hero__ui {
    position: static;
    padding: 0 var(--gutter) 40px;
  }

  .showcase { padding-block: 64px 76px; }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Kategori: 3 sütun, filtreler 3'e iner, çubuk en üste yapışır */
  .cat-bar { top: 0; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-filters__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Footer 2 sütuna iner */
  .foot__inner { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .foot__col--brand { grid-column: 1 / -1; }
  .foot__col--news { grid-column: 1 / -1; }
  .foot__note { max-width: 480px; }

  /* Atlas tam ekran banner — tablet: yükseklik ve başlık küçülüyor */
  .atlasfull { min-height: clamp(380px, 52vh, 520px); }
  .atlasfull__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 56px; }
  .atlasfull__title { font-size: clamp(34px, 5vw, 48px); }

  /* Atlas + test alt alta */
  .atlas { grid-template-columns: 1fr; min-height: 0; }
  .atlas__banner { min-height: 62vh; }
  .quiz { padding: 40px var(--gutter) 44px; }
  .result__grid { gap: 14px; }

  /* Keşif: iki kart görünür */
  .journal { padding-block: 68px 76px; }
  .post { flex: 0 0 calc((100% - 26px) / 2); }

  /* Kampanya dikeye diziliyor: film üstte, ürün altta */
  .promo { grid-template-columns: 1fr; min-height: 0; }
  .promo__media { aspect-ratio: 16 / 10; }
  .promo__card { flex-direction: row; }
  .promo__card-media { flex: 0 0 42%; }
  .promo__card-body { flex: 1; border-top: 0; border-left: 1px solid var(--c-line); display: flex; flex-direction: column; justify-content: center; }

  /* Editler dikeye diziliyor; açıklama hep açık */
  .editions {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .edition { min-height: 62vh; }
  .edition + .edition { box-shadow: 0 -1px 0 rgba(255, 255, 255, .18); }
  .edition__text { max-height: 200px; opacity: 1; margin-top: 16px; }
  .edition__cta::after { transform: scaleX(1); }
  .showcase__tab { padding: 0 16px 16px; font-size: 12px; letter-spacing: .12em; }

  .topbar__links a:not(.topbar__links-keep) { display: none; }

  .header__burger { display: flex; }
  .header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
  }
  .header__logo { justify-self: center; }
  .header__logo img { height: 22px; }

  /* Arama header'dan çıkıp altına tam genişlik satıra geçer */
  .search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
  }
  .header__inner {
    height: auto;
    padding-block: 14px 16px;
    row-gap: 14px;
    grid-template-rows: auto auto;
  }
  .header__logo, .header__burger, .actions { grid-row: 1; }

  .actions { gap: 20px; }
  .action__label { display: none; }
  .action__icon { width: 22px; height: 22px; }

  .menubar { display: none; }

  /* --- Ürün detay: tek sütun --- */
  .udetay { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 28px; }
  .galeri { position: static; grid-template-columns: 74px minmax(0, 1fr); }
  .ubilgi__ad { font-size: 27px; }
  .ufiyat__simdi { font-size: 27px; }
  .usek__in { padding-bottom: 64px; }
  .usek__govde { padding-top: 34px; }
  .usek__ikili, .mpanel { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .mpanel__banner { margin-bottom: 30px; }
  .ofor { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ofor__bas { grid-row: auto; }
  .ilgili__in { padding-block: 60px 68px; }
  .yazilar__in { padding-block: 60px 68px; }
  .yazilar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }

  /* --- Hakkımızda --- */
  .hgiris__in { padding-block: 56px 40px; }
  .hgiris__h { font-size: 34px; max-width: 24ch; }
  .hhikaye__in { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 60px; }
  .hhikaye__gorsel { position: static; }
  .halinti { font-size: 19px; }
  .hyol__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
  .hvar__in { padding-block: 60px; }
  .hvar__h { font-size: 28px; }
  .hvar__sutunlar { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hsut__gorsel { max-width: 460px; }
  .hrakamlar__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .hson__in { padding-block: 64px 72px; }
  .hson__m { font-size: 21px; }
  .hson__cagri { font-size: 27px; }

  /* --- Atlas --- */
  .akapak__gorsel img { max-height: 320px; }
  .akapak__in { margin-top: -80px; padding: 36px 34px 32px; }
  .akapak__h { font-size: 31px; }
  .atlas-bolum { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Harf tek sutunda yapisik kalamaz; liste ustunde ayirici olur */
  .atlas-bolum__harf {
    position: static;
    padding: 30px 0 10px;
    font-size: 34px;
    color: var(--c-black);
  }
  .madde { grid-template-columns: 124px minmax(0, 1fr); gap: 22px; padding: 24px 0; }
  .ypanel { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .npanel { padding: 40px 32px 30px; }
  .npanel__h { font-size: 27px; }

  /* --- Sepet: tek sutun, ozet listenin altina iner, alt cubuk devreye girer --- */
  .sep-wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sep-sag { position: static; }
  .ozet { padding: 24px 22px; }
  .smobil { display: flex; }
  /* Sabit cubuk footer'in son satirini ortmesin */
  .sayfa-sepet .foot__bar { padding-bottom: 94px; }

  /* --- Ödeme: tek sütun, özet üste çıkıp katlanır --- */
  .ode-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ode-sag { display: contents; }
  .ozet--ode { order: -1; }
  .yardim { order: 1; }
  .ozet--ode .ozet__mac { display: flex; }
  .ozet--ode .ozet__h--ode { display: none; }
  .ozet--ode .ozet__gov { display: none; border-top: 1px solid var(--c-line); }
  .ozet--ode .ozet__gov.is-acik { display: block; }
  .oliste { max-height: none; }
  .sayfa-odeme .foot__bar { padding-bottom: 94px; }

  /* --- Günce --- */
  .gbar { top: 0; }   /* menübar yok, şerit ekranın tepesine yapışır */
  .gizgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .gkart__gov { padding: 22px; }

  /* --- Parfüm hikâyeleri --- */
  .phone__link { grid-template-columns: minmax(0, 1fr); }
  .phone__gorsel { aspect-ratio: 3 / 2; }
  .phone__ad { max-width: none; }
  .phizgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .phkart__gov { padding: 22px; }

  /* --- Ödeme sonucu --- */
  .snuc__grid { grid-template-columns: minmax(0, 1fr); }
  .snuc__sag { order: -1; }

  /* --- Hesabım: menü açılır şeride döner --- */
  .hs-hero { grid-template-columns: minmax(0, 1fr); }
  .hs-puan { border-left: 0; border-top: 3px solid var(--c-white); }
  .hs-layout { grid-template-columns: minmax(0, 1fr); }
  .hs-yan { position: static; }
  .hs-menu-ac {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    margin-top: 14px;
    padding: 0 16px;
    border: 1px solid var(--c-line-2);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-black);
    text-align: left;
  }
  .hs-menu-ac > svg:first-child { flex: none; color: var(--c-muted-dark); }
  .hs-menu-ac span { flex: 1; min-width: 0; }
  .hs-menu-ac__chev { flex: none; transition: transform var(--t-mid); }
  .hs-menu-ac[aria-expanded="true"] .hs-menu-ac__chev { transform: rotate(180deg); }
  .hs-menu { display: none; margin-top: -1px; }
  .hs-menu.is-acik { display: block; }
  .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Marka detay --- */
  .mhikaye { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mkunye { order: 2; }
  .mkisalar__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mhik__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Markalar --- */
  .mbar { top: 0; }
  .mbar__in { flex-wrap: wrap; gap: 10px 14px; }
  .mara { flex: 1 1 100%; }
  .msonuc { order: 3; }
  .mizgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
  .mcta__in { grid-template-columns: minmax(0, 1fr); }

  /* --- İletişim --- */
  .ilt-kapak__in { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
  .ilt-wrap { grid-template-columns: minmax(0, 1fr); }
  .ilt-konum {
    position: static;
    transform: none;
    width: auto;
    left: auto;
  }
  .ilt-harita__cerceve { height: 380px; }
  .ilt-bulten { grid-template-columns: minmax(0, 1fr); }
  .ilt-bulten__gorsel { min-height: 0; aspect-ratio: 16 / 9; }
  .ilt-bulten__gov { max-width: none; }

  /* --- 34. Yazi detay --- */
  .yz-bas__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .yz-bas__gorsel { order: -1; }
  /* Kapak dikey bir urun fotografi; yatay kirpinca sise yariliyordu.
     4:5 orani korunuyor, bunun yerine sutun genisligi sinirlaniyor. */
  .yz-bas__gorsel { max-width: 420px; margin-inline: auto; width: 100%; }
  .yz-h1 { font-size: clamp(30px, 6vw, 44px); }
  .yz-h1 em { white-space: normal; }
  .yz-govde {
    grid-template-columns: minmax(0, 1fr);
    max-width: 740px;
    gap: 0;
  }
  .yz-yan { display: none; }
  .yz-mpaylas { display: block; }
  .yz-nota,
  .yz-urun,
  .yz-bulten { margin-inline: 0; }
  .yz-portre { grid-template-columns: 190px minmax(0, 1fr); }
  .yz-gezin { grid-template-columns: minmax(0, 1fr); }

  /* --- 35. SSS --- */
  /* Konu rayi listenin ustune, yatay kaydirilan bir serit olarak geciyor. */
  .sss-govde { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sss-yan { position: static; }
  .sss-yan__et { display: none; }
  .sss-konu {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .sss-konu::-webkit-scrollbar { display: none; }
  .sss-konu__b {
    flex: none;
    width: auto;
    padding: 10px 15px;
    border: 1px solid var(--c-line-2);
    gap: 8px;
  }
  .sss-konu__b.is-active {
    color: var(--c-white);
    background: var(--c-black);
    border-color: var(--c-black);
  }
  .sss-konu__b.is-active em { color: rgba(255, 255, 255, .6); }
  .sss-yan__kart { display: none; }
  .sss-yardim__in { grid-template-columns: minmax(0, 1fr); }

  /* --- 36. Havale bildirimi --- */
  .hv-kapak__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hv-govde { grid-template-columns: minmax(0, 1fr); }
  /* Yan sutun altta; yapiskanlik burada anlamsiz */
  .hv-yan { position: static; }
  .hv-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- 37. Sadakat programi --- */
  .sdk-serit { grid-template-columns: minmax(0, 1fr); }
  .sdk-kupon__in,
  .sdk-hesap__in { grid-template-columns: minmax(0, 1fr); }
  .sdk-adimlar { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sdk-kartlar { grid-template-columns: minmax(0, 1fr); }
  /* Ust seviye karti mobilde en basa cikmasin; sira metinle ayni kalsin */
  .sdk-kart__rozet { position: static; display: inline-block; margin-bottom: 14px; }
  .sdk-kaydir, .sdk-kaydir__et { max-width: none; }

  /* --- 39. Yasal belgeler --- */
  .ys-govde { grid-template-columns: minmax(0, 1fr); max-width: 780px; gap: 34px; }
  .ys-belgeler { position: static; }
  .ys-kunye dl { grid-template-columns: 130px minmax(0, 1fr); }

  /* --- 40. Beğendiklerim / karşılaştırma / 404 --- */
  .bg-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-arac__sag { margin-left: 0; width: 100%; }
  .hata__in { grid-template-columns: minmax(0, 1fr); }
  .hata-kisa { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- 41. Sipariş takibi --- */
  .tk-kapak__grid { grid-template-columns: minmax(0, 1fr); }
  .tk-ust { grid-template-columns: minmax(0, 1fr); }
  .tk-alt { grid-template-columns: minmax(0, 1fr); }
  /* Adim seridi bes sutunda sikisiyor; ikiye dusuyor */
  .tk-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-bilgi { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* --- 42. Mobil alt çubuk --- */
  /* Footer'ın altında kalmasın: gövdeye çubuk kadar boşluk. */
  body { padding-bottom: calc(var(--h-altnav) + env(safe-area-inset-bottom)); }

  .altnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Çekmece (120) ve sepet çubuğunun (100) altında kalmalı */
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    /* Yükseltilmiş sepet dairesi dışarı taşabilsin */
    overflow: visible;
    border-top: 1px solid var(--c-line);
    background: var(--c-bg);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -12px 28px -24px rgba(0, 0, 0, .55);
  }

  .altnav__i {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    /* Ust kenarlikla birlikte cubuk tam --h-altnav olsun; yoksa footer'in
       son pikseli cubugun altinda kaliyor. */
    min-height: calc(var(--h-altnav) - 1px);
    padding: 9px 4px;
    color: var(--c-muted);
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-fast);
  }
  .altnav__i:active { color: var(--c-black); }
  .altnav__i.is-active { color: var(--c-black); }
  /* Etkin sekmenin üstünde ince mercan çizgi */
  .altnav__i.is-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 22%;
    right: 22%;
    height: 2px;
    background: var(--c-accent);
  }

  /* Ortadaki sepet — yükseltilmiş daire.
     Temanın global `border-radius: 0 !important` kuralı burada bilerek
     deliniyor; Yusuf sepeti yuvarlak istedi. Sitedeki tek istisna. */
  .altnav__i--sepet { justify-content: flex-end; padding-top: 34px; }
  .altnav__daire {
    position: absolute;
    top: -20px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50% !important;
    background: var(--c-black);
    color: var(--c-white);
    transform: translateX(-50%);
    box-shadow: 0 0 0 5px var(--c-bg), 0 12px 22px -10px rgba(0, 0, 0, .6);
    transition: transform var(--t-fast), background-color var(--t-fast);
  }
  .altnav__i--sepet:active .altnav__daire {
    background: var(--c-accent);
    transform: translateX(-50%) translateY(2px);
  }
  .altnav__i--sepet.is-active .altnav__daire { background: var(--c-accent); }

  /* Sayaç rozetleri */
  .altnav__rozet {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    display: grid;
    place-items: center;
    border-radius: 999px !important;
    border: 2px solid var(--c-bg);
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .altnav__rozet--yan { top: 4px; left: calc(50% + 5px); right: auto; }
  .altnav__rozet[hidden] { display: none; }

  /* Sepet sayfasının kendi yapışkan çubuğu alt çubuğun üstüne çıksın */
  .smobil { bottom: calc(var(--h-altnav) + env(safe-area-inset-bottom)); }
}

/* Mobil */
@media (max-width: 640px) {
  :root { --gutter: 16px; --h-topbar: 36px; }

  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__ticker { justify-content: center; }
  .topbar { font-size: 10.5px; letter-spacing: .04em; }

  .header__logo img { height: 20px; }
  .actions { gap: 16px; }
  .search__field { height: 44px; }
  .search__submit { width: 44px; }

  /* mobilde de ayni oran korunur (ust kirilma noktasindan miras) */
  .hero__panel { padding: 32px var(--gutter) 26px; }
  .hero__text { font-size: 14px; }
  .hero__cta { margin-top: 26px; padding: 14px 22px; }
  .hero__ui { gap: 16px; padding-bottom: 32px; }
  .hero__arrow { width: 38px; height: 38px; }
  .hero__count { display: none; }

  .showcase { padding-block: 48px 56px; }
  .showcase__head { margin-bottom: 30px; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  /* Anasayfa seckisi mobilde: ekranda iki urun, kalani yana kaydirarak.
     Kartlar kaydirma sonunda kenara hizalansin diye snap kullaniliyor. */
  .showcase .pgrid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - 7px);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .showcase .pgrid::-webkit-scrollbar { display: none; }
  .showcase .pcard { scroll-snap-align: start; }
  /* Uc sekme yan yana sigsin: kaydirma yerine esit uc goz, uzun ad
     ikinci satira sariyor. */
  .showcase__tabs { justify-content: stretch; flex-wrap: nowrap; overflow: visible; }
  .showcase__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px 12px;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    hyphens: auto;
  }
  .pcard__badge { font-size: 9px; padding: 4px 7px; letter-spacing: .08em; }
  .pcard__add { width: 36px; height: 36px; }
  .pcard__body { gap: 10px; padding: 13px 12px 0; }
  .pcard__price { padding: 10px 12px 15px; gap: 6px 8px; }
  /* Telefonda kart ~176px: rozet fiyatların yanına sığmaz, kendi satırına
     iner (anasayfa ile aynı davranış). O yüzden mümkün olduğunca hafif
     dursun diye punto, iç boşluk ve harf aralığı ayrıca kısılıyor. */
  .pcard__price .pcard__badge--cart {
    margin-left: 0;
    font-size: 8.5px;
    padding: 3px 6px;
    letter-spacing: .05em;
  }
  .pcard__name { font-size: 12.5px; }
  .pcard__now { font-size: 14px; }
  .pcard__old { font-size: 12px; }
  .showcase__more { margin-top: 36px; }

  /* Küçük ekranda yazı filmin üstüne sığmıyor: film üstte, metin altında
     kendi koyu bloğunda duruyor. */
  .promo__media {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: var(--c-black);
  }
  .promo__video {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .promo__media::after { display: none; }
  .promo__overlay {
    position: static;
    max-width: none;
    padding: 26px var(--gutter) 30px;
  }
  .promo__title { font-size: 38px; }
  .promo__cta { margin-top: 24px; }

  .promo__card { flex-direction: column; }
  .promo__card-media { flex: none; aspect-ratio: 1 / 1; }
  .promo__card-body { border-left: 0; border-top: 1px solid var(--c-line); padding: 18px var(--gutter) 22px; }
  .promo__clock { gap: 6px; }
  .promo__unit { min-width: 50px; padding: 10px 6px 8px; }
  .promo__unit b { font-size: 20px; }
  .promo__sep { display: none; }

  .foot__inner { grid-template-columns: 1fr; gap: 0; }
  .foot__col--brand, .foot__col--news { grid-column: auto; }
  .foot__col--brand { margin-bottom: 28px; }
  .foot__col--news {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  /* Akordiyon: başlıklar üst üste kapanır liste gibi dizilir */
  .foot__col--acc .foot__title {
    padding: 16px 0;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .foot__col--acc .foot__chev {
    display: block;
    margin-left: auto;
    color: rgba(255, 255, 255, .55);
    transition: transform var(--t-mid) var(--ease);
  }
  .foot__col--acc .foot__title[aria-expanded="true"] .foot__chev { transform: rotate(180deg); }

  .foot__col--acc .foot__links {
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease), padding-bottom .4s var(--ease);
  }
  .foot__col--acc .foot__title[aria-expanded="true"] + .foot__links {
    max-height: 320px;
    padding-bottom: 18px;
  }
  .foot__bar { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .foot__copy { font-size: 11.5px; gap: 12px; }
  .foot__ssl { height: 22px; }

  /* Atlas tam ekran banner — telefon */
  .atlasfull { min-height: clamp(340px, 56vh, 460px); }
  .atlasfull__title { font-size: 32px; }
  .atlasson__sira { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .atlasfull__text { font-size: 14px; margin-top: 16px; }
  .atlasfull__cta { margin-top: 26px; padding: 14px 24px; }
  .atlas__meta { margin-top: 20px; }

  .atlas__banner { min-height: 54vh; }
  .quiz__title { font-size: 24px; }
  .quiz__q { font-size: 16.5px; margin-top: 20px; }
  .quiz__opt { padding: 13px 14px; font-size: 13.5px; gap: 11px; }
  .result__panel { padding: 26px 20px 28px; }
  .result__grid {
    grid-template-columns: repeat(3, 64%);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .result__grid::-webkit-scrollbar { display: none; }
  .result__foot { justify-content: center; }

  /* Keşif: tek kart + bir sonrakinden bir dilim görünsün */
  .journal { padding-block: 52px 60px; }
  .journal__head { align-items: center; margin-bottom: 28px; }
  .journal__title { font-size: 30px; margin-top: 10px; }
  .journal__arrow { width: 40px; height: 40px; }
  .journal__track { gap: 16px; }
  /* Mobilde kart tam genişlik: bir sonrakinden dilim sızmasın,
     her kaydırmada tek bir yazı tam olarak gelsin. */
  .post { flex: 0 0 100%; }
  .post__title { font-size: 17px; }
  .journal__rail { margin-top: 26px; }
  .journal__more { margin-top: 32px; }

  .editions__label { top: 24px; left: var(--gutter); }
  .edition { min-height: 54vh; }
  .edition__body { left: var(--gutter); right: var(--gutter); bottom: 30px; }
  .edition__no { top: 22px; right: 22px; font-size: 44px; }
  .edition__title { font-size: 27px; }
  .edition__text { font-size: 13.5px; }

  .promo-band { height: 42px; }
  .promo-band__title { font-size: 11px; letter-spacing: .15em; }
  .promo-band::before,
  .promo-band::after { width: 24px; }

  /* --- Kategori: telefonda ikiserli izgara --- */
  .cat-head { padding-block: 26px 20px; }
  .cat-bar { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .cat-tools { width: 100%; gap: 8px; }
  /* min-width:0 sart: flex ogeleri varsayilan olarak icerik genisliginin
     altina inmiyor, en uzun siralama secenegi kutuyu tasiriyordu. */
  .cat-toggle,
  .cat-sort {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    height: 44px;
    padding-inline: 10px;
  }
  .cat-sort label { flex: none; }
  .cat-sort select {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 8px 36px;
  }

  /* --- Filtreler: asagi acilan panel degil, tam ekran sayfa ---
     Bes grup alt alta dizilince panel 1000px'i asiyordu. Gruplar
     akordiyon, alt buton seridi sabit, govde kendi icinde kayiyor. */
  .cat-filters {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow: visible;
    background: var(--c-bg);
    border-bottom: 0;
    transform: translateY(100%);
    transition: transform .4s var(--ease), visibility .4s;
  }
  .cat-filters.is-open { transform: none; max-height: none; }

  .cat-filters__top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--c-line);
  }
  .cat-filters__baslik {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-black);
  }
  .cat-filters__kapat {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: -8px;
    color: var(--c-black);
  }

  .cat-filters__inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: block;
    padding: 0;
  }

  .fgroup { border-bottom: 1px solid var(--c-line); }
  .fbaslik {
    margin-bottom: 0;
    min-height: 54px;
    padding: 0 var(--gutter);
    cursor: pointer;
    font-size: 11.5px;
  }
  .fchev { display: block; color: var(--c-muted-2); transition: transform var(--t-fast); }
  .fbaslik[aria-expanded="true"] .fchev { transform: rotate(180deg); }

  .fsecenekler { display: none; padding: 0 var(--gutter) 14px; }
  .fbaslik[aria-expanded="true"] + .fsecenekler { display: block; }
  .fopt { padding: 11px 0; font-size: 14px; }

  .cat-filters__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px var(--gutter) calc(13px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-line);
    background: var(--c-bg);
  }
  .cat-clear { flex: none; }
  .cat-apply { flex: 1; height: 46px; }

  /* --- Ürün detay: telefon --- */
  /* Kırıntı telefonda iki satıra taşıyordu. Bulunduğun sayfanın adı hemen
     altındaki H1'de zaten yazıyor; mobilde yalnızca yol gösterilir. */
  .ucrumb__in { padding-block: 11px; font-size: 10.5px; flex-wrap: nowrap; }
  .ucrumb__in > span[aria-current],
  .ucrumb__in > :nth-last-child(2) { display: none; }
  /* Yıldız satırı sarınca ayraç satır sonunda asılı kalıyordu */
  .ubilgi__ayrac { display: none; }
  .ubilgi__meta { gap: 6px 10px; }
  /* Eşik tutarı hemen alttaki nottа zaten yazıyor, dar ekranda tekrar etmesin */
  .ukargo__esik { display: none; }
  .udetay { padding: 20px var(--gutter) 60px; gap: 28px; }
  .galeri { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .galeri__kucukler { display: none; }        /* yerini noktalar aliyor */
  .galeri__noktalar { display: flex; }
  .ubilgi__ad { font-size: 23px; }
  .ufiyat__simdi { font-size: 25px; }
  .ufiyat { margin-top: 20px; padding-top: 18px; }
  .uhkartlar { grid-template-columns: minmax(0, 1fr); }
  .uguven { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .usek__in { padding-bottom: 52px; }
  .usek__seritler { gap: 0; }
  .usek__tab { padding: 20px 14px 16px; font-size: 11.5px; letter-spacing: .12em; }
  .usek__ok { width: 40px; }
  .usek__govde { padding-top: 28px; }
  .usek__h { font-size: 21px; }
  .npanel { padding: 30px 20px 22px; }
  .npanel__h { font-size: 22px; }
  .npiramit__sira { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  .nota { padding: 15px 0; font-size: 15px; }
  .mpanel { gap: 26px; }
  .ypanel { gap: 26px; }
  .ypanel__puan { font-size: 42px; }
  .uanlat__kunye > div { grid-template-columns: 45% minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .dpanel__uyari { padding: 18px 16px; }
  .dpanel__iletisim > div { grid-template-columns: 42% minmax(0, 1fr); gap: 12px; padding: 11px 0; }
  .uyorum__fotolar img { width: 64px; height: 64px; }
  .ofor__sec { padding: 11px 12px; }
  .ofor__ad { font-size: 13px; }
  .ofor__gonder { width: 100%; padding: 0 20px; }
  .ilgili__in { padding-block: 46px 52px; }
  .ilgili__h { font-size: 22px; }
  .yazilar__in { padding-block: 46px 52px; }
  .yazilar__h { font-size: 22px; }
  .yazilar__bas { align-items: baseline; }
  .yazilar__tum { font-size: 10.5px; letter-spacing: .12em; }
  .yazilar__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  /* --- Hakkımızda: telefon --- */
  .hgiris__in { padding-block: 38px 28px; }
  .hgiris__h { font-size: 25px; max-width: none; }
  .hhikaye__in { padding-block: 44px; gap: 26px; }
  .hhikaye__metin p { font-size: 14.5px; line-height: 1.85; }
  .halinti { margin: 24px 0; padding-left: 18px; font-size: 17px; }
  .hyol__in { padding-block: 44px; }
  /* Yatay çizgi dar ekranda kırılıyor: duraklar tek sütuna, çizgi sola geçer */
  .hyol__liste { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hdurak { padding: 0 0 26px 26px; }
  .hdurak:last-child { padding-bottom: 0; }
  .hdurak::before { top: 4px; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .hdurak:last-child::before { display: none; }
  .hdurak::after { top: 0; left: 0; }
  .hvar__in { padding-block: 44px; }
  .hvar__bas { margin-bottom: 32px; }
  .hvar__h { font-size: 23px; }
  .hsut__gorsel { max-width: none; margin-bottom: 16px; }
  .hsut__h { font-size: 18px; }
  .hrakamlar__in { padding-block: 44px; }
  .hrakamlar__liste { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hrakam { padding-top: 16px; }
  .hrakam__n { font-size: 28px; }
  .hson__in { padding-block: 48px 56px; }
  .hson__m { font-size: 18px; }
  .hson__cagri { font-size: 23px; }
  .hbtn { width: 100%; justify-content: center; height: 48px; }

  /* --- Atlas: telefon --- */
  .akapak__gorsel img { max-height: 220px; }
  .akapak__in { margin-top: -52px; padding: 26px 20px 24px; }
  .akapak__h { font-size: 24px; }
  .akapak__giris { font-size: 13.5px; }
  .aara { margin-top: 22px; }
  .aara__ikon { width: 42px; height: 50px; }
  .aara__alan { height: 50px; }
  .aara__temizle { width: 40px; height: 50px; }
  /* Mobilde menubar gizli (display:none), bu yuzden serit 54px asagida
     bosluga yapisiyordu. Telefonda tam uste yapisir. */
  .aharfler { top: 0; margin-top: 26px; }
  .aharfler__in { justify-content: flex-start; padding: 7px 34px; }

  .aharfler__ok {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    padding: 0;
    color: var(--c-black);
  }
  .aharfler__ok[hidden] { display: none; }
  .aharfler__ok--sol {
    left: 0;
    justify-items: start;
    padding-left: 4px;
    background: linear-gradient(to right, var(--c-bg) 62%, rgba(255, 255, 255, 0));
  }
  .aharfler__ok--sag {
    right: 0;
    justify-items: end;
    padding-right: 4px;
    background: linear-gradient(to left, var(--c-bg) 62%, rgba(255, 255, 255, 0));
  }
  .atlas-harf { min-width: 28px; height: 28px; font-size: 12px; }
  .atlas { padding-bottom: 56px; }
  .atlas-bolum__harf { padding: 22px 0 8px; font-size: 27px; }
  /* Görsel solda kalıyor — istenen düzen bu; yalnızca küçülüyor */
  .madde { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .madde__ad { font-size: 16.5px; margin-bottom: 9px; }
  .madde__govde p { font-size: 13.5px; line-height: 1.8; }
  .ayukari { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .mpanel__kol li { padding: 7px 11px; font-size: 11px; }
  .uaks { gap: 8px 16px; }
  .uaks__d span { font-size: 11.5px; }
  .upaylas { padding: 10px; gap: 6px; }
  .upay { padding: 8px 11px; font-size: 11px; gap: 7px; }
  .lb__kare { padding: 64px 16px 70px; }
  .lb__kare img { max-height: calc(100vh - 134px); max-height: calc(100dvh - 134px); }
  .lb__kapat, .lb__ok { width: 44px; height: 44px; }
  .lb__kapat { top: 10px; right: 10px; }
  .lb__ok--sol { left: 6px; }
  .lb__ok--sag { right: 6px; }
  .uetiket { padding: 12px; }
  .uetiket__liste { gap: 6px; }
  .uetiket__liste a { padding: 6px 10px; font-size: 11px; }

  /* --- Sepet --- */
  .sep-head__sira { flex-direction: column; align-items: flex-start; gap: 22px; }
  .sep-head__ozet { font-size: 13px; }
  /* Telefonda yalnizca bulunulan adimin adi yazar, digerleri numara olarak durur */
  .sadim__i:not(.is-active) .sadim__t { display: none; }
  .sadim__i + .sadim__i::before { width: 22px; margin-left: 12px; }

  .skargo { flex-wrap: wrap; gap: 11px 12px; }
  .skargo__m { flex: 1; font-size: 12.5px; }
  .skargo__esik { display: none; }
  .skargo__ray { flex-basis: 100%; max-width: none; }

  .slist__ust { padding-bottom: 12px; }
  .slist__h { font-size: 11px; }
  .slist__h span { display: none; }

  .sline { grid-template-columns: 94px minmax(0, 1fr); gap: 15px; padding: 22px 0; }
  .sline__ad { font-size: 15px; }
  .sline__nitelik { font-size: 12px; }
  .sline__alt { gap: 12px; padding-top: 14px; }
  .sline__fiyat { order: 2; }
  .sline__stok { order: 3; flex-basis: 100%; }
  .sline__tutar { font-size: 16px; }
  .sadet__d { width: 34px; height: 40px; }
  .sadet__g { width: 30px; height: 40px; }
  /* Dar sutunda ikon/gorsel metne yer birakmiyor; satir tek sutuna iniyor */
  .sek__i {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "ad    sil"
      "not   not"
      "fiyat fiyat";
    column-gap: 10px;
    row-gap: 5px;
    padding: 10px 11px;
  }
  .sek__i--hediye {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "ad  fiyat"
      "not not";
  }
  .sek__gorsel,
  .sek__ikon { display: none; }
  .sek__f { justify-self: end; font-size: 11.5px; }
  .sek__aciklama { font-size: 11.5px; }
  .sline__rozet { font-size: 9px; letter-spacing: .08em; padding: 4px 7px; }

  .snot { margin-top: 24px; }
  .ozet__toplam b { font-size: 22px; }
  .ozet__ode { height: 52px; }

  /* --- Ödeme --- */
  .ode-wrap { padding-top: 20px; }
  .izgara { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .blok__bas { gap: 11px; padding: 14px 16px; }
  .blok__h { font-size: 14px; }
  .blok__ipucu { display: none; }
  .blok__gov { padding: 18px 16px; }

  .giris-serit { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; }
  .giris-serit__m { flex: 1 1 60%; }
  .giris-serit__b { width: 100%; justify-content: center; }
  .uyelik { padding: 16px; }
  .uyelik__gov { padding-left: 0; }

  .odetabs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kart-alan { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .kart-sahne { max-width: 340px; }

  .secenek__kutu { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; }
  .secenek__marka { display: none; }
  .secenek__f { grid-column: 2; justify-self: start; text-align: left; margin-top: 6px; }
  .secenek__f del { display: inline; margin: 0 0 0 9px; }
  .gun__kutu { min-width: 76px; padding: 9px 12px; }

  .anahtar-satir { align-items: flex-start; gap: 12px; padding: 14px; }
  .banka__kutu { padding: 14px; }
  .banka__iban { flex-wrap: wrap; gap: 9px; }
  .banka__iban code { flex-basis: 100%; }

  .istek__bas { gap: 12px; padding: 14px 16px; }
  .istek__ikon { display: none; }
  .istek__gov { gap: 20px; padding: 18px 16px; }

  .ozet__mac { padding: 15px 18px; }
  .ozet__gov { padding: 4px 18px 20px; }
  .yardim { padding: 14px 16px; }

  /* --- Günce --- */
  .gtab { height: 48px; padding-inline: 13px; font-size: 10.5px; letter-spacing: .1em; }
  .gizgara { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gkart__gov { padding: 20px; }
  .gkart__ad { font-size: 20px; -webkit-line-clamp: 4; }
  .gkart__ozet { -webkit-line-clamp: 3; }
  .gdaha { margin-top: 32px; }
  .gdaha__b { height: 48px; padding: 0 26px; }

  /* --- Parfüm hikâyeleri --- */
  .phone__gorsel { aspect-ratio: 4 / 3; }
  .phone__yon { width: 38px; height: 38px; }
  .phone__yon--sol { left: 10px; }
  .phone__yon--sag { right: 10px; }
  .phone__panel { padding: 28px 22px 32px; }
  .phizgara { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .phkart__gov { padding: 20px; }
  .phkart--uzun .phkart__ad,
  .phkart--kare .phkart__ad { font-size: 19px; -webkit-line-clamp: 3; }
  .phkart--uzun .phkart__ozet,
  .phkart--kare .phkart__ozet { -webkit-line-clamp: 3; }

  /* --- Ödeme sonucu --- */
  .snuc__bas { padding: 30px 20px 32px; }
  .snuc__no { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .bilgiler__s { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .cikis__i { gap: 13px; padding: 14px; }
  .cikis__ikon { width: 34px; height: 34px; }
  .snuc__btnlar { flex-direction: column; gap: 16px; }
  .snuc__b { width: 100%; justify-content: center; }

  /* --- Hesabım --- */
  .hs-hero__panel { padding: 26px 20px 22px; }
  .hs-puan { padding: 22px 20px 24px; }
  .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hs-stat { padding: 14px; }
  .hs-stat__no { font-size: 24px; }
  .hs-hizli { grid-template-columns: minmax(0, 1fr); }
  .hs-siparis__bas { gap: 14px 20px; padding: 14px 16px; }
  .hs-siparis__alan--tutar { margin-left: 0; text-align: left; }
  .hs-siparis__gov { padding: 16px; }
  .hs-siparis__alt { padding: 12px 16px; }
  .hs-takip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .hs-takip__i::before { display: none; }
  .hs-ara input { width: 100%; }
  .hs-ara { flex: 1; }
  .hs-favlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hs-fav__gov { padding: 12px; }
  .hs-satir__f { margin-left: auto; }
  .hs-btn { height: 44px; padding: 0 18px; }

  /* --- Marka detay --- */
  .mkapak { min-height: 300px; }
  .mkapak__crumb { margin-bottom: 40px; }
  .mkapak__meta { gap: 9px; font-size: 9.5px; letter-spacing: .14em; }
  .mmetin__ilk { font-size: 15.5px !important; }
  .mmetin p { font-size: 14px; }
  .mkisalar__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mkisa__gov { padding: 16px; }
  .mkisa__ad { font-size: 14.5px; }
  .mkisa__m { display: none; }
  .mhik__bas { grid-template-columns: minmax(0, 1fr); }
  .mhik__tum { grid-column: 1; grid-row: auto; justify-self: start; }
  .mhik__izgara { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mdiger__i { height: 38px; padding: 0 14px; font-size: 11px; }

  /* --- Markalar --- */
  .mistat { gap: 10px; font-size: 10px; letter-spacing: .1em; }
  .mizgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .mkart__ad { font-size: 14px; }
  .mkart__ust { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mkart__m { -webkit-line-clamp: 2; min-height: 3.2em; font-size: 12px; }
  .mharf__b { min-width: 27px; height: 28px; font-size: 10.5px; }
  .mcta__b { width: 100%; justify-content: center; }
  .mcta__aksiyon { width: 100%; align-items: center; }

  /* --- İletişim --- */
  .ilt-hizli__i { gap: 12px; padding: 13px 4px; }
  .ilt-hizli__ikon { width: 34px; height: 34px; }
  .ilt-form__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .ilt-btn { width: 100%; justify-content: center; }
  .ilt-basari { flex-direction: column; gap: 14px; padding: 24px 20px; }
  .ilt-harita__cerceve { height: 300px; }
  .ilt-konum { padding: 24px 20px; }
  .ilt-bulten__satir { flex-wrap: wrap; }
  .ilt-bulten__b { width: 100%; justify-content: center; margin-top: 12px; }
  .ilt-bulten__gorsel { aspect-ratio: 4 / 3; }
  .ilt-bulten__gov { padding: 28px 20px 34px; }
  /* --- 34. Yazi detay --- */
  .yz-metin { font-size: 16px; line-height: 1.8; }
  .yz-ilk { font-size: 17.5px; }
  .yz-ilk::first-letter { font-size: 3.4em; }
  .yz-alinti p { max-width: none; }
  .yz-nota__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .yz-urun { grid-template-columns: minmax(0, 1fr); }
  .yz-urun__g { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .yz-urun__g img { aspect-ratio: 4 / 3; }
  .yz-urun__b { width: 100%; justify-content: center; }
  .yz-urun__alt { width: 100%; }
  .yz-portre { grid-template-columns: minmax(0, 1fr); }
  .yz-portre__g { max-width: 220px; }
  .yz-bulten__b { width: 100%; justify-content: center; }
  .yz-imza { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .yz-meta { gap: 12px; }
  .yz-meta__ayrac { display: none; }
  .yz-gez { gap: 16px; }
  .yz-gez__g { width: 68px; }

  /* --- 35. SSS --- */
  .sss-ara { height: 54px; padding: 0 13px; }
  .sss-ara__alan { font-size: 16px; }
  .sss-pop { justify-content: flex-start; text-align: left; }
  .sss-kapak__in { text-align: left; }
  .sss-crumb { justify-content: flex-start; }
  .sss-lead { margin-inline: 0; }
  .sss-ara { margin-inline: 0; }
  .sss-oge__ac { gap: 14px; padding: 18px 0; }
  .sss-oge__isaret { width: 28px; height: 28px; }
  .sss-esik { grid-template-columns: minmax(0, 1fr); }
  .sss-kanal { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 14px; }
  .sss-kanal__et { grid-column: 1 / -1; }
  .sss-bos__b, .sss-bos__l { width: 100%; justify-content: center; }

  /* --- 36. Havale bildirimi --- */
  .hv-adim__i { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .hv-dosya { grid-template-columns: 40px minmax(0, 1fr); row-gap: 12px; }
  .hv-dosya__b { grid-column: 1 / -1; text-align: center; }
  .hv-ozet { grid-template-columns: minmax(0, 1fr); }
  .hv-gonder { width: 100%; }
  .hv-sonuc__d .hs-btn { width: 100%; justify-content: center; }

  /* --- 37. Sadakat programi --- */
  .sdk-h1 { font-size: clamp(40px, 15vw, 60px); }
  .sdk-form__satir { flex-direction: column; }
  .sdk-btn--kucuk { justify-content: center; }
  .sdk-bilet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1px auto; }
  /* Ayrac dikeyden yataya doner; oyuklar da yana gecer */
  .sdk-bilet__cizgi {
    background: repeating-linear-gradient(to right,
      rgba(255, 255, 255, .34) 0 6px, transparent 6px 12px);
  }
  .sdk-bilet__cizgi::before,
  .sdk-bilet__cizgi::after {
    left: auto;
    top: 50%;
    width: 9px;
    height: 18px;
    transform: translateY(-50%);
  }
  .sdk-bilet__cizgi::before { left: -1px; }
  .sdk-bilet__cizgi::after { right: -1px; }
  .sdk-sonuc__toplam { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sdk-sonuc__satirlar > div { flex-direction: column; gap: 4px; }
  .sdk-serit__i { gap: 10px; }
  .sdk-serit__o { margin-left: 0; width: 100%; }
  .sdk-kapak__d .sdk-btn { width: 100%; justify-content: center; }
  .sdk-son__d .sdk-btn { width: 100%; justify-content: center; }

  /* --- 38. Üye çekmecesi --- */
  .uye__top { padding: 16px 18px; }
  .uye__govde { padding: 22px 18px 26px; }
  .uye__foot { padding: 14px 18px; }
  .uye__giris { font-size: 16px; }

  /* --- 39. Yasal belgeler --- */
  .ys-izgara, .ys-kartlar { grid-template-columns: minmax(0, 1fr); }
  .ys-kunye dl { grid-template-columns: minmax(0, 1fr); }
  .ys-kunye dt { padding-bottom: 0; border-bottom: 0; }
  .ys-kunye dd { padding-top: 2px; }
  .ys-yazdir { margin-left: 0; width: 100%; justify-content: center; }
  .ys-son__l { width: 100%; justify-content: center; }
  .ys-bag { opacity: 1; }

  /* --- 40. Beğendiklerim / karşılaştırma / 404 --- */
  .bg-izgara { grid-template-columns: minmax(0, 1fr); }
  .bg-arac__sag .bg-mini,
  .bg-arac__sag .bg-sirala,
  .bg-arac__sag .bg-sirala select { width: 100%; justify-content: center; }
  .bg-serit__in { flex-wrap: wrap; gap: 10px; }
  .bg-serit__d { width: 100%; margin-left: 0; }
  .bg-serit__b { width: 100%; justify-content: center; }
  .bg-serit__m { width: 100%; }
  .hata-kisa { grid-template-columns: minmax(0, 1fr); }
  .hata-ara { flex-wrap: wrap; height: auto; padding: 12px; gap: 10px; }
  .hata-ara input { width: 100%; flex: 1 1 100%; height: 40px; font-size: 16px; }
  .hata-ara button { width: 100%; }
  .hata__b { width: 100%; justify-content: center; }
  .hata__ilan dl { grid-template-columns: minmax(0, 1fr); }
  .hata__ilan dt { padding-bottom: 0; border-bottom: 0; }
  .hata__ilan dd { padding-top: 2px; }

  /* --- 41. Sipariş takibi --- */
  .tk-alanlar { grid-template-columns: minmax(0, 1fr); }
  .tk-btn { width: 100%; min-width: 0; }
  .tk-giris { font-size: 16px; }
  .tk-sekme { flex-direction: column; }
  .tk-sekme__b { text-align: left; border-bottom: 1px solid var(--c-line); border-left: 2px solid transparent; }
  .tk-sekme__b.is-active { border-bottom-color: var(--c-line); border-left-color: var(--c-black); }
  .tk-adimlar { grid-template-columns: minmax(0, 1fr); }
  .tk-hr { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tk-hr__t { flex-direction: row; gap: 8px; align-items: baseline; }
  .tk-kunye__l > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .tk-mini { width: 100%; justify-content: center; }

  /* --- 42. Mobil alt çubuk --- */
  /* "KAMPANYALAR" ve "FAVORİLERİM" 375'te yan yana sığmıyordu; harf
     aralığı sıfırlanıp punto küçültüldü, etiketler tek satırda kalıyor. */
  .altnav__i {
    font-size: 8.5px;
    letter-spacing: .01em;
    padding-inline: 1px;
    gap: 4px;
  }
  .altnav__i > span:last-child { white-space: nowrap; }
  .altnav__i svg { width: 21px; height: 21px; }
  .altnav__daire { width: 48px; height: 48px; top: -18px; }
  .altnav__daire svg { width: 21px; height: 21px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .tk-nokta i, .tk-iskelet__c { animation: none; }
  .hata__iz i { animation: none; }
  /* Şerit durunca içerik kesilmesin diye elle kaydırılabilir olur */
  .promo-band { overflow-x: auto; }
  .promo-band__track { animation: none; }
  .promo-band__row[aria-hidden="true"] { display: none; }

  /* Yukarıdaki genel kural animasyonları 0.01ms'ye indiriyor; hero'nun
     ilerleme çubuğu buna bağlı olduğu için slaytlar saniyede onlarca kez
     değişirdi. Otomatik geçiş tamamen kapatılır, oklar çalışmaya devam eder. */
  .hero__bar.is-active .hero__bar-fill { animation: none !important; transform: scaleX(1); }
  .hero__slide.is-active .hero__media img { animation: none !important; transform: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Dokunmatik: form alanlarında en az 16px --------------------------------
   iOS Safari, 16px'in altında punto taşıyan bir alana odaklanınca sayfayı
   otomatik büyütür. Büyüme sonrası düzen görünümden dar kalır ve sayfa yana
   kaydırılabilir hale gelir — kullanıcının gördüğü "az da olsa sağa sola
   kayma" bu. Yalnızca dokunmatik cihazlarda punto yükseltilir; masaüstü
   tasarımı olduğu gibi kalır. user-scalable=no ile bastırmıyoruz, çünkü o
   parmakla yakınlaştırmayı da kapatır. */
@media (hover: none) and (pointer: coarse) {
  .search__input,
  .foot__input,
  .unot__alan,
  .ofor__not,
  .aara__alan,
  .cat-sort select { font-size: 16px; }

  /* 16px'e çıkan seçenek metni dar ekranda taşmasın */
  .cat-sort select { letter-spacing: 0; }

  /* --- Ürün kartı görselleri: dokunmatikte kaydırmalı şerit ---------------
     Masaüstünde 2./3./4. görsele :hover ile geçiliyor. Dokunmatikte hover
     olmadığı için o görseller telefonda tamamen ulaşılamıyordu. Burada aynı
     görseller native yatay kaydırmalı bir şeride dönüşüyor: jesti tarayıcı
     yönetiyor, JS yalnızca alttaki çubukları güncelliyor.
     overscroll-behavior-x sayfaya bulaşmayı keser — karttaki kaydırma
     sayfayı yana sürüklemesin. */
  .pcard__zone { display: none; }          /* dokunmayı yutmasın */

  .pcard__imgs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pcard__imgs::-webkit-scrollbar { display: none; }

  .pcard__imgs img {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    scroll-snap-align: start;
    transition: none;
  }

  /* Çubuklar dokunmatikte hep görünür; aktif olanı JS işaretler */
  .pcard__bars i,
  .pcard__bars i:first-child { background: rgba(0, 0, 0, .14); }
  .pcard__bars i.is-on { background: var(--c-black); }

  /* --- Galeri: dokunmatikte native kaydirma ---
     Masaustunde serit transform ile kayiyor; parmakla o hissi vermek
     mumkun degil, o yuzden dokunmatikte jesti tarayiciya birakiyoruz. */
  .galeri__serit {
    transform: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .galeri__serit::-webkit-scrollbar { display: none; }
  .gkare { scroll-snap-align: start; }
}



/* ============================================================
   SUNDUKLARIMIZ — akan bandın açıklamalarının kalıcı adresi.
   Kapak siyah, bölümler zikzak: görsel bir solda bir sağda.
   ============================================================ */
.skapak {
  background: var(--c-black);
  color: var(--c-white);
}
.skapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(36px, 5vw, 80px);
  align-items: end;
  padding-block: clamp(52px, 6vw, 96px);
}
.skapak__et {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.skapak__et span { width: 32px; height: 1px; background: var(--c-white); }
.skapak__h {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--c-white);
}
.skapak__m {
  margin-top: 20px;
  max-width: 52ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .68);
}

/* Sayfa ici ray: banttan gelen okuyucu istedigi basliga atlayabilsin */
.sray {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.sray__i {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .78);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.sray__i:hover { color: var(--c-white); padding-left: 6px; }
.sray__n {
  flex: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
}
.sray__ad {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- Bolumler --- */
.sundlar {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(52px, 6vw, 100px);
  display: grid;
  gap: clamp(52px, 6.5vw, 104px);
}
.sund {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  scroll-margin-top: calc(var(--h-menubar) + 28px);
}
/* Zikzak: cift sirada gorsel saga geciyor */
.sund:nth-child(even) .sund__gorsel { order: 2; }

.sund__gorsel {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-bg-soft);
}
.sund__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Buyuk sira numarasi gorselin kosesinde */
.sund__no {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  background: var(--c-black);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 300;
  color: var(--c-white);
}

.sund__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--c-line);
  color: var(--c-black);
}
.sund__h {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--c-black);
}
.sund__m {
  margin-top: 16px;
  max-width: 58ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-body);
}
.sund__l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: gap var(--t-fast);
}
.sund__l:hover { gap: 16px; }

/* --- Kapanis --- */
.sson { border-top: 1px solid var(--c-line); }
.sson__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(44px, 5vw, 76px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sson__m {
  max-width: 48ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-body);
}
.sson__d { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1023px) {
  .skapak__in { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
  .sund { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sund:nth-child(even) .sund__gorsel { order: 0; }
  .sund__gorsel { aspect-ratio: 3 / 2; }
}


/* ============================================================
   METİN İÇİ VURGU — okuma metinlerindeki kalın yazılar siyah
   içi boş çerçeveye dönüyor. Yalnızca gövde metinleri: fiyat,
   sipariş no, sayaç gibi arayüz kalınlarına dokunulmuyor.
   ============================================================ */
.yz-metin p b,
.ys-metin p b,
.sss-oge__ic p b,
.sund__m b,
.uye__m b,
.neden li b,
.hson__m b,
.skapak__m b {
  display: inline-block;
  padding: 1px 8px 2px;
  border: 1px solid var(--c-black);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-black);
}

/* Koyu zeminde aynı vurgu beyaz çerçeveyle okunur kalsın */
.skapak__m b {
  border-color: rgba(255, 255, 255, .6);
  color: var(--c-white);
}


/* ============================================================
   BİR PARFÜMÖRÜN GÜNCESİ — koyu kapak + tek büyük son kayıt.
   Parfüm Hikâyeleri ile aynı sekme/ızgara altyapısını kullanır,
   girişi editoryal bir güncelik tonuna çeker.
   ============================================================ */
.gnc-kapak {
  background: var(--c-black);
  color: var(--c-white);
}
.gnc-kapak__in {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(22px, 2.6vw, 34px) clamp(40px, 5vw, 76px);
}
.gnc-crumb { color: rgba(255, 255, 255, .5); }
.gnc-crumb a { color: rgba(255, 255, 255, .78); }
.gnc-crumb a:hover { color: var(--c-white); }

.gnc-kapak__sira {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(26px, 4vw, 72px);
  align-items: end;
  margin-top: clamp(26px, 3vw, 44px);
}
.gnc-kapak__et {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.gnc-kapak__et span { width: 32px; height: 1px; background: var(--c-white); }
.gnc-kapak__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.2vw, 78px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
}
.gnc-kapak__h em { font-style: normal; font-weight: 500; }
.gnc-kapak__yan { padding-bottom: 6px; }
.gnc-kapak__m {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .7);
}
.gnc-kapak__sayi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.gnc-kapak__sayi b { font-weight: 500; color: var(--c-white); }
.gnc-kapak__sayi span { width: 20px; height: 1px; background: rgba(255, 255, 255, .35); }

/* --- Son kayıt --- */
.gnc-son {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: clamp(34px, 4vw, 60px);
}
.gnc-son__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--c-line);
  transition: border-color var(--t-fast);
}
.gnc-son__link:hover { border-color: var(--c-black); }
.gnc-son__gorsel {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--c-bg-soft);
}
.gnc-son__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.gnc-son__gov {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3.6vw, 58px);
}
.gnc-son__et {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.gnc-son__kat {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.gnc-son__ad {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.7vw, 40px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--c-black);
}
/* Guncenin sesi: kaydin bir cumlesi one cikiyor */
.gnc-son__alinti {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--c-black);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--c-black);
}
.gnc-son__ozet {
  margin-top: 18px;
  max-width: 52ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-body);
}
.gnc-son__ok {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: gap var(--t-fast);
}
.gnc-son__link:hover .gnc-son__ok { gap: 17px; }

@media (max-width: 1023px) {
  .gnc-kapak__sira { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .gnc-son__link { grid-template-columns: minmax(0, 1fr); }
  .gnc-son__gorsel { aspect-ratio: 3 / 2; }
}