/* ============================================
   ALTITUDE MOTION - Premium Outdoor Brand
   Design System & Global Styles
   ============================================ */

:root {
  /* ── Zemin & çizgi (mail paletiyle hizalı krem aile) ── */
  --bg: #f4f4f3;
  --bg-soft: #fafaf9;
  --panel: #ebebe9;
  --line: #e3e3e0;
  --line-strong: #c6c6c2;
  --text: #171717;
  --muted: #57575a;
  /* ── Marka renkleri (tek kaynak: mail paleti) ── */
  --brand-900: #0a1f19;   /* en koyu yeşil — koyu bölümler, footer, scrolled header */
  --brand-800: #0f2922;   /* koyu yeşil — CTA, hover */
  --accent: var(--brand-800);
  --accent-warm: #c87f3e; /* turuncu vurgu — eyebrow, rozet, indirim */
  --accent-soft: #e5ece2;
  --summit: var(--brand-900);
  --white: #ffffff;
  /* ── Semantik ── */
  --sale: var(--accent-warm);
  --success: #2e7d5b;
  --error: #b3462f;
  /* ── Hareket ── */
  --duration: 600ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --dur-reveal: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: var(--ease-out);
  /* ── Yüzey ── */
  --shadow: 0 24px 64px rgba(10, 31, 25, 0.14);
  --shadow-sm: 0 4px 16px rgba(10, 31, 25, 0.08);
  --radius: 0.4rem;
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;
  /* ── Boşluk ölçeği (4px grid) ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px;  --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px;
  /* ── Tipografi ── */
  --font-display: "Archivo", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.2vw, 4rem);
  --text-display: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  /* ── Global page gutter: applied to all inset sections ── */
  --page-gutter: clamp(1.25rem, 2.75vw, 2.5rem);
  /* ── Shared mobile bottom bar content height (all pages/states) ── */
  --mob-bar-content-height: 64px;
  /* ── Site logosu ölçüsü (tek kaynak) ──
     Logo maskesi `contain` ile basıldığı için görünen boyutu kutunun
     GENİŞLİĞİ belirler; kutu oranı yalnızca ayrılan dikey alanı verir.
     Bu değerler header yüksekliğine (desktop 76px / solid 64px, mobil 56px)
     göre seçildi. Tüm sayfa CSS'leri bu değişkenleri kullanır. */
  --brand-logo-width: clamp(132px, 11vw, 172px);
  --brand-logo-width-mobile: clamp(112px, 34vw, 140px);
  --brand-logo-ratio: 10 / 3;
  /* --brand-logo-ratio'nun sayısal karşılığı; sabit yükseklik hesaplayan
     yerlerde (mobil modal başlığı, üyelik ekranı) kullanılır. */
  --brand-logo-ratio-num: 3.3333;
  /* Kare logo YALNIZCA mobilde (<=980px) iç sayfalarda devreye girer;
     index.php bu değeri --brand-logo-width-mobile üzerine yazar
     (kaynak: ayarlar.logo_ic, boşsa ayarlar.favicon). Desktop her zaman
     geniş logoyu ve kendi stilini korur. */
  --brand-logo-square-width-mobile: 40px;
  /* Üyelik ekranının marka panelindeki büyük logo; header'dan bağımsız ölçek */
  --brand-logo-hero-width: var(--brand-logo-width);
  /* Mobil plaka header'ının yatay iç boşluğu: geniş logoda 0 (logo plakayı
     doldurur), kare logoda plaka rozet gibi görünsün diye artırılır. */
  --brand-plate-pad-x: 0px;
  /* ── Teknoloji logoları ölçüsü (tek kaynak) ──
     Logolar YATAY (geniş) formatta hazırlanıyor. Bu yüzden ölçek her yerde
     GENİŞLİKTEN verilir; yükseklik `height:auto` ile orana göre oluşur.
     Ayar yapmak için yalnızca aşağıdaki genişlikleri değiştirmek yeterli;
     anasayfa, teknoloji liste/detay ve ürün detay sayfaları bunları kullanır. */
  --tek-logo-width-home: 210px;      /* anasayfa teknoloji kartı (hover logosu) */
  --tek-logo-width-teaser: 176px;    /* teknoloji liste kartı (görsel üzeri) */
  --tek-logo-width-hero: 340px;      /* teknoloji detay hero */
  --tek-logo-width-product: 190px;   /* ürün detay teknoloji kartı */
  /* Güvenlik tavanı: henüz yatay sürümüyle değiştirilmemiş eski kare
     logolar (600x600) genişlikten ölçeklenince aşırı büyür. Aşağıdaki
     yükseklik sınırı devreye girdiğinde `object-fit: contain` logoyu
     oranını bozmadan küçültür. Tüm logolar yatay olduğunda bu değerler
     hiçbir zaman devreye girmez. */
  --tek-logo-maxh-home: 84px;
  --tek-logo-maxh-teaser: 68px;
  --tek-logo-maxh-hero: 120px;
  --tek-logo-maxh-product: 68px;
}

@media (max-width: 640px) {
  :root {
    --tek-logo-width-home: 160px;
    --tek-logo-width-teaser: 140px;
    --tek-logo-width-hero: 240px;
    --tek-logo-width-product: 160px;
    --tek-logo-maxh-home: 64px;
    --tek-logo-maxh-teaser: 54px;
    --tek-logo-maxh-hero: 88px;
    --tek-logo-maxh-product: 56px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Yatay taşma kilidi: 100vw tabanlı bloklar (galeri, nav, carousel) viewport'u
   aşınca sayfa mobilde sağa-sola kayabiliyor. `clip` scroll container
   oluşturmadığı için position:sticky bozulmaz; `hidden` yalnızca html'de
   eski Safari (<16) fallback'i olarak durur. */
html {
  overflow-x: hidden;
}

html,
body {
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button,
input {
  font: inherit;
}

/* ============================================
   Site Header
   ============================================ */

.site-header {
  --header-progress: 0;
  --header-bg: 0;
  --header-border: 0;
  --header-blur: 0px;
  --header-ink: rgb(
    calc(248 - (230 * var(--header-progress))),
    calc(249 - (231 * var(--header-progress))),
    calc(251 - (233 * var(--header-progress)))
  );
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
}

.main-nav {
  display: flex;
  align-items: center;
  position: relative;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  height: 4.75rem;
  z-index: 5;
  background: rgba(250, 250, 249, var(--header-bg));
  border-bottom: 1px solid rgba(12, 20, 24, var(--header-border));
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  transition: background-color 560ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 560ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 560ms cubic-bezier(0.22, 1, 0.36, 1),
              color 560ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 560ms cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-backdrop-filter 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header.scrolled .main-nav {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* ============================================
   Brand Logo
   ============================================ */

.brand {
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 0;
  white-space: nowrap;
  transition: opacity 180ms ease;
  z-index: 2;
}

.brand:hover {
  opacity: 0.75;
}

.brand-logo {
  width: var(--brand-logo-width);
  height: auto;
  aspect-ratio: var(--brand-logo-ratio);
  display: block;
  position: relative;
  flex-shrink: 0;
}

.brand-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(
    calc(248 - (231 * var(--header-progress))),
    calc(249 - (232 * var(--header-progress))),
    calc(251 - (234 * var(--header-progress)))
  );
  -webkit-mask-image: var(--site-logo-url, url("../../images/logo-desktop-center.webp"));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--site-logo-url, url("../../images/logo-desktop-center.webp"));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 220ms var(--ease-smooth);
  will-change: background-color;
}

@media (min-width: 981px) {
  .main-nav {
    justify-content: flex-start;
  }

  /* Logo solda normal akışta; menü sağa yaslanıp ikonların soluna oturur.
     Menü-ikon arası boşluk, ikonların kendi aralığından belirgin fazla tutulur. */
  .brand {
    position: static;
    transform: none;
    margin-right: 0;
  }

  .main-nav .nav-links {
    margin-left: auto;
  }

  .main-nav .nav-actions {
    margin-left: 0.75rem;
  }
}

/* ============================================
   Desktop Navigation Links
   ============================================ */

.nav-links {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 0;
  background: transparent;
  /* MENÜ v7: ana menü öğesi <a> — link stilleri nötrlenir */
  text-decoration: none;
  color: var(--header-ink);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 200ms var(--ease-smooth);
  position: relative;
}

.menu-link::after {
  content: "";
  position: absolute;
  bottom: 0.12rem;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--header-ink);
  transition: all 250ms var(--ease-out);
  transform: translateX(-50%);
}

.menu-link:hover::after,
.menu-link[aria-expanded="true"]::after {
  width: calc(100% - 1.4rem);
}

.menu-link:hover,
.menu-link[aria-expanded="true"] {
  color: var(--header-ink);
}

.menu-link i {
  font-size: 0.88rem;
  transition: transform 250ms var(--ease-out);
  opacity: 0.8;
}

.menu-link[aria-expanded="true"] i {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* ============================================
   Action Buttons (Search, Account, Cart)
   ============================================ */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--header-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 260ms cubic-bezier(0.22, 1, 0.36, 1), color 260ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.action-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.action-btn:hover,
.action-btn[aria-expanded="true"] {
  background: rgb(
    calc(38 + (200 * var(--header-progress))),
    calc(41 + (199 * var(--header-progress))),
    calc(45 + (197 * var(--header-progress)))
  );
  color: var(--header-ink);
}

/* Desktop header hover dili: çizgi yerine gri, hafif radiuslu çerçeve */
@media (min-width: 981px) {
  .menu-link {
    gap: 0;
    border-radius: 8px;
    padding: 0.38rem 0.58rem;
  }

  .menu-link::after {
    display: none;
  }

  .menu-link i {
    display: none;
  }

  .menu-link:hover,
  .menu-link[aria-expanded="true"] {
    background: rgba(124, 124, 124, 0.10);
    color: var(--header-ink);
  }

  .action-btn {
    border-radius: 8px;
  }

  .action-btn:hover,
  .action-btn[aria-expanded="true"] {
    background: rgba(124, 124, 124, 0.10);
    color: var(--header-ink);
  }
}

.cart-btn {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  display: grid;
  place-items: center;
  background: var(--accent-warm);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}

/* ============================================
   Mobile Menu Toggle (2-line hamburger)
   ============================================ */

.menu-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.3rem;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--header-ink);
  margin: 0.38rem 0;
  transition: transform 240ms var(--ease-out);
}

.menu-toggle.is-open span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============================================
   Mega Dropdown Layer
   ============================================ */

.dropdown-layer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 4;
}

.mega-dropdown {
  display: none;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 84px);
  overflow: auto;
  animation: megaSlideDown 200ms var(--ease-out);
}

/* Panel açıkken sayfa karartma (menü hover-intent'e dokunmaz) */
.dropdown-layer::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 31, 25, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  pointer-events: none;
  transition: background 250ms var(--ease-out), backdrop-filter 250ms var(--ease-out), -webkit-backdrop-filter 250ms var(--ease-out);
}

.dropdown-layer:has(.mega-dropdown.is-open)::before {
  background: rgba(10, 31, 25, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes megaSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mega-dropdown.is-open {
  display: block;
  pointer-events: auto;
}

.mega-content {
  display: grid;
  grid-template-columns: 13rem 1fr minmax(15rem, 22rem);
  min-height: 22rem;
}

/* ============================================
   Mega Side Panel
   ============================================ */

.mega-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.8rem 1.4rem;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafa;
}

.side-icon-wrap {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--white);
  border-radius: var(--radius);
}

.side-icon-wrap svg {
  width: 1.1rem;
  height: 1.1rem;
}

.side-title {
  margin: 0;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
}

.side-tags {
  display: grid;
  gap: 0.3rem;
}

.side-tag {
  display: inline-flex;
  width: fit-content;
  padding: 0.2rem 0.5rem;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 0.15rem;
  transition: transform 180ms ease, opacity 180ms ease;
}

.side-tag:hover {
  opacity: 0.85;
}

.side-tag.hot {
  background: var(--accent-warm);
  color: #fff;
}

.side-tag.dark {
  background: var(--text);
  color: #fff;
}

/* ============================================
   Mega Main Content
   ============================================ */

.mega-main {
  padding: 1.4rem 1.6rem 1.5rem;
  color: var(--text);
}

.mega-main-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mega-tabs {
  display: flex;
  gap: 1.2rem;
}

.mega-tabs a {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.12rem;
  transition: all 180ms ease;
}

.mega-tabs a.is-current,
.mega-tabs a:hover {
  color: var(--text);
  border-color: var(--text);
}

.mega-close,
.action-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: all 180ms ease;
}

.mega-close:hover,
.action-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

/* ============================================
   Mega Categories Grid
   ============================================ */

.mega-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.1rem;
}

.mega-col {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.mega-title {
  margin: 0;
  color: var(--text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mega-col a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
  display: inline-block;
  justify-self: start;
  width: max-content;
  position: relative;
  padding-bottom: 0.12rem;
}

.mega-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}

.mega-col a:hover {
  color: #000;
}

.mega-col a:hover::after {
  transform: scaleX(1);
}

/* ============================================
   Activity Grid
   ============================================ */

.mega-activity {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 1rem;
}

.mega-activity-title {
  margin: 0;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
}

.activity-grid {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.activity-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.15rem;
  border-radius: var(--radius);
  transition: all 180ms ease;
}

.activity-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.activity-icon {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--white);
  font-size: 0.82rem;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.activity-icon svg {
  width: 0.8rem;
  height: 0.8rem;
  stroke: #fff;
}

/* ============================================
   Mega Visual Panel
   ============================================ */

.mega-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.72) 100%), var(--visual);
  background-size: cover;
  background-position: center;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.mega-visual-content {
  padding: 1.4rem;
  position: relative;
  z-index: 1;
}

.mega-visual p {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

.mega-visual h3 {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.2vw, 2.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

.mega-visual-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.08);
  transition: all 200ms ease;
}

.mega-visual-cta:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.65);
}

/* ============================================
   Action Panels (Search, Account, Cart)
   ============================================ */

.action-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.action-layer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.action-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0);
  transition: background 360ms var(--ease-out);
}

.action-layer.is-open .action-overlay {
  background: rgba(8, 8, 8, 0.42);
}

.action-panel {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(30rem, calc(100vw - 1rem));
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.action-panel.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.action-drawer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    linear-gradient(180deg, #f7f5f2 0%, #f2efeb 100%);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.16);
}

.action-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 48%),
    var(--brand-900);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.action-drawer-headcopy {
  display: grid;
  gap: 0.2rem;
}

.action-drawer-kicker {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  font-weight: 700;
}

.action-drawer-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.action-close {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.action-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.action-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.35rem 1.4rem 1.5rem;
}

.action-drawer-body--cart {
  padding-bottom: 0.6rem;
}

.action-drawer-intro {
  margin: 0 0 1.15rem;
  max-width: 25rem;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.55;
}

.action-search-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 3.4rem;
  padding: 0 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.action-search-field:focus-within {
  border-color: #161616;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.action-search-field svg {
  color: #777;
  flex-shrink: 0;
}

.action-search-field input {
  width: 100%;
  border: 0;
  outline: none;
  color: var(--text);
  background: transparent;
  font-size: 0.95rem;
}

.action-search-field input::placeholder {
  color: #999;
}

.action-drawer-section + .action-drawer-section {
  margin-top: 1.6rem;
}

.action-drawer-label {
  margin: 0;
  color: #7a7a7a;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

.action-chip-list {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.34rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.74rem;
  font-weight: 600;
  color: #474747;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.action-chip:hover {
  border-color: rgba(0, 0, 0, 0.18);
  color: #111;
  background: #ededeb;
}

.action-chip-list--soft .action-chip {
  background: rgba(17, 17, 17, 0.04);
}

.action-link-list {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
}

.action-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.98rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 180ms ease, color 180ms ease, padding-left 180ms ease;
}

.action-row-link:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.03);
  padding-left: 0.45rem;
}

.action-row-link i {
  color: #8b8b8b;
  font-size: 1rem;
}

.action-account-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.1rem 0 1.3rem;
}

.action-account-avatar {
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.action-account-title {
  margin: 0;
  color: #111;
  font-size: 1.02rem;
  font-weight: 700;
}

.action-account-sub {
  margin: 0.3rem 0 0;
  color: #666;
  font-size: 0.86rem;
  line-height: 1.5;
}

.action-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

/* Cart sticky footer — coupon + summary + note + CTA buttons, outside scroll */
.action-cart-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #f7f5f2;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

/* CTA button pair inside footer */
.action-cart-footer-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.75rem 1.4rem 1.1rem;
}

.action-drawer-btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 2px;
  border: 1px solid #111;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.action-drawer-btn--primary {
  background: #111;
  color: #fff;
}

.action-drawer-btn--primary:hover {
  background: #232323;
  border-color: #232323;
}

.action-drawer-btn--secondary {
  background: rgba(255, 255, 255, 0.72);
  color: #111;
}

.action-drawer-btn--secondary:hover {
  background: #ece9e5;
}

.action-cart-progress {
  padding: 0.7rem 0 0.5rem;
}

/* Footstep tracker header */
.action-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.1rem;
}

.action-progress-header p,
.action-progress-header span {
  margin: 0;
}

.action-progress-header p {
  color: #3c3c3c;
  font-size: 0.82rem;
  line-height: 1.45;
}

.action-progress-header strong {
  color: #111;
  font-weight: 700;
}

.action-progress-header span {
  color: #999;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* SVG footstep track wrapper */
.action-track-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
}

.action-track-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── Dashed background (remaining distance) ── */
.action-track-bg {
  stroke: rgba(0, 0, 0, 0.16);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
}

/* ── Solid filled track (completed distance) ── */
.action-track-fill {
  stroke: #1a1a1a;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 550ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Footprint shapes — transforms set exclusively via JS ── */
.action-fp path {
  fill: #1a1a1a;
  opacity: 0.78;
}

/* ── Start dot — solid black filled circle; fades out when goal reached ── */
.action-track-startdot {
  fill: #1a1a1a;
  stroke: none;
  transition: opacity 350ms ease;
}
.action-track-svg.is-complete .action-track-startdot {
  opacity: 0;
}

/* ── Traveling progress dot — moves along the line via JS cx/cy ── */
.action-track-dot {
  fill: #1a1a1a;
  stroke: #f7f5f2;
  stroke-width: 2;
  transition: opacity 350ms ease;
}
.action-track-svg.is-complete .action-track-dot {
  opacity: 0;
}

/* ── End marker (goal, not yet reached) ── */
.action-track-end-bg {
  fill: #f7f5f2;
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 1.5;
  transition: fill 350ms ease, stroke 350ms ease;
}

.action-track-end-check {
  stroke: rgba(0, 0, 0, 0.28);
  fill: none;
  transition: stroke 350ms ease;
}

/* ── End marker (free shipping reached) ── */
.action-track-svg.is-complete .action-track-end-bg {
  fill: #1a1a1a;
  stroke: #1a1a1a;
}

.action-track-svg.is-complete .action-track-end-check {
  stroke: #fff;
}

.action-track-svg.is-complete .action-fp path {
  opacity: 1;
}

.action-cart-list {
  display: grid;
  gap: 0;
}

.action-cart-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.action-cart-item:last-child {
  border-bottom: 0;
}

.action-cart-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ece8e2;
}

.action-cart-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action-cart-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
}

.action-cart-meta {
  margin: 0.32rem 0 0;
  color: #707070;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.action-cart-foot {
  margin-top: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.action-cart-edit {
  color: #666;
  font-size: 0.74rem;
  font-weight: 600;
}

.action-cart-edit:hover {
  color: #111;
}

.action-cart-price {
  font-size: 0.9rem;
  color: #111;
}

.action-cart-summary {
  padding: 0.7rem 1.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Ara Toplam row — large, dominant, customer-first */
.action-cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.35rem 0;
  color: #111;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.action-cart-summary-row strong {
  font-size: 1.22rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.02em;
}

/* Kargo row — secondary, muted */
.action-cart-summary-row--muted {
  padding-top: 0.45rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: #888;
  font-size: 0.72rem;
  font-weight: 500;
}

.action-cart-note {
  margin: 0;
  padding: 0.35rem 1.4rem 0.6rem;
  color: #b0b0b0;
  font-size: 0.69rem;
  line-height: 1.45;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* ── Search: ESC hint key ── */
.action-search-kbd {
  display: inline-flex;
  align-items: center;
  height: 1.35rem;
  padding: 0 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #aaa;
  font-family: var(--font-display);
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Search: trend label row ── */
.action-drawer-label-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  margin-top: 0.8rem;
}

.action-drawer-label-row .action-drawer-label {
  margin: 0;
}

.action-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.55rem;
  background: var(--accent-warm);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Search: category grid ── */
.action-cat-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

.action-cat-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  transition: background 180ms, border-color 180ms, transform 180ms;
  letter-spacing: 0.01em;
}

.action-cat-card:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.18);
}

.action-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 2px;
  background: rgba(26, 92, 54, 0.09);
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Search: form + clear button ── */
.action-search-form {
  margin: 0;
}

.action-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.95rem;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  padding: 0;
}

.action-search-clear:hover {
  background: rgba(0, 0, 0, 0.14);
  color: #111;
  transform: scale(1.05);
}

.action-search-clear[hidden] { display: none; }

.action-drawer-text-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #6f6f6f;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: auto;
  transition: color 160ms ease;
}

.action-drawer-text-btn:hover { color: #111; text-decoration: underline; }

/* ── Search: results panel (modala entegre) ── */
.search-results-live {
  margin-top: 1rem;
  background: transparent;
  overflow: hidden;
  animation: searchFadeIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-results-live[hidden] { display: none; }

.search-results-live.is-loading { min-height: 80px; }

@keyframes searchFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-result-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.8rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
}

.search-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #161616;
  border-radius: 50%;
  animation: searchSpin 720ms linear infinite;
  display: inline-block;
}

@keyframes searchSpin { to { transform: rotate(360deg); } }

.search-result-empty {
  padding: 1.6rem 1rem;
  font-size: 0.82rem;
  text-align: center;
  color: #6b6b6b;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}

/* Üst etiket — sonuçlar üzerinde minik başlık */
.search-results-live::before {
  content: 'Sonuçlar';
  display: block;
  margin: 0 0 0.5rem 0.05rem;
  color: #7a7a7a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.search-results-live.is-loading::before,
.search-results-live:has(.search-result-empty)::before {
  display: none;
}

.search-results-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 0.15rem;
  scroll-behavior: smooth;
}

.search-results-grid::-webkit-scrollbar { width: 5px; }
.search-results-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 999px; }
.search-results-grid::-webkit-scrollbar-track { background: transparent; }

.search-result-item {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.55rem 0.7rem 0.55rem 0.55rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}

.search-result-item::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent, #1a5c36);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-result-item:hover,
.search-result-item.is-active {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.search-result-item:hover::after,
.search-result-item.is-active::after { transform: scaleY(1); }

.search-result-item:hover .search-result-img img,
.search-result-item.is-active .search-result-img img { transform: scale(1.05); }

.search-result-img {
  width: 60px;
  height: 74px;
  overflow: hidden;
  border-radius: 3px;
  background: #efeae3;
  flex-shrink: 0;
}

.search-result-img img,
.search-img-placeholder {
  width: 100%;
  height: 100%;
}

.search-result-img img {
  display: block;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #888;
  font-family: var(--font-display);
}

.search-result-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.search-result-name {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
  color: #161616;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-name strong {
  font-weight: 700;
  color: var(--accent, #1a5c36);
  background: transparent;
  padding: 0;
}

.search-result-sku {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #9c9c9c;
  text-transform: uppercase;
}

.search-result-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #161616;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.search-result-item .search-result-info .search-result-price {
  justify-self: start;
}

.search-price-old {
  color: #a3a3a3;
  font-weight: 500;
  font-size: 0.7rem;
  text-decoration: line-through;
}

.search-result-stock-out {
  align-self: flex-start;
  margin-top: 0.22rem;
  padding: 0.18rem 0.5rem;
  background: #161616;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
}

.search-see-all {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}

.search-see-all a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.78rem 1rem;
  background: #161616;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 220ms ease, letter-spacing 220ms ease;
}

.search-see-all a::after {
  content: '→';
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: transform 220ms ease;
}

.search-see-all a:hover { background: var(--accent, #1a5c36); }

/* Recent search chip (button) — extends action-chip */
.action-chip[data-search-recent-term] {
  cursor: pointer;
}

/* ── Search: Popüler Kategoriler pill strip (home pc-pill ile uyumlu) ── */
.action-cat-strip {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.action-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem 0.35rem 0.35rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  color: var(--text);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.action-cat-pill:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.action-cat-pill-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--line, rgba(0, 0, 0, 0.1));
  background: #f1ede7;
  transition: border-color 220ms ease;
}

.action-cat-pill:hover .action-cat-pill-img {
  border-color: var(--accent, #1a5c36);
}

.action-cat-pill-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.action-cat-pill-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1a1a1a;
}

/* ── Account: loyalty card ── */
.action-loyalty-card {
  background: linear-gradient(135deg, var(--summit) 0%, var(--accent) 100%);
  border-radius: 4px;
  padding: 1.05rem 1.1rem 0.85rem;
  margin-bottom: 1.3rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.action-loyalty-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.action-loyalty-card::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 30%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.action-loyalty-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  position: relative;
}

.action-loyalty-label {
  margin: 0 0 0.25rem;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 700;
}

.action-loyalty-pts {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
}

.action-loyalty-pts strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.action-loyalty-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
}

.action-loyalty-bar-wrap {
  height: 0.3rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.55rem;
  position: relative;
}

.action-loyalty-bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.78);
  border-radius: inherit;
  transition: width 600ms var(--ease-out);
}

.action-loyalty-hint {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.4;
  position: relative;
}

.action-loyalty-hint strong {
  color: rgba(255, 255, 255, 0.88);
}

.action-loyalty-hint-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.3rem;
  color: rgba(255, 255, 255, 0.88);
}

/* ── Deneyim Merkezi: info toggle accordion (header modal) ── */
.action-loyalty-info-toggle {
  width: 100%;
  margin: 0.6rem 0 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  transition: background 200ms var(--ease-out);
}

.action-loyalty-info-toggle:hover {
  background: var(--accent-soft);
}

.action-loyalty-info-toggle i:first-child {
  font-size: 1rem;
  opacity: 0.85;
}

.action-loyalty-info-toggle .ri-arrow-down-s-line {
  margin-left: auto;
  transition: transform 250ms var(--ease-out);
}

.action-loyalty-info-toggle[aria-expanded="true"] .ri-arrow-down-s-line {
  transform: rotate(180deg);
}

.action-loyalty-info-panel {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.action-loyalty-info-panel[hidden] {
  display: none;
}

.action-loyalty-info-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

.action-loyalty-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.78rem;
}

.action-loyalty-table th {
  text-align: left;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

.action-loyalty-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

.action-loyalty-table tr:last-child td {
  border-bottom: 0;
}

.action-loyalty-table tr.is-current {
  background: var(--accent-soft);
}

.action-loyalty-table tr.is-current td:first-child {
  font-weight: 700;
  color: var(--accent);
}

.action-loyalty-table .tier-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.action-loyalty-table .tier-icon i {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
  font-size: 0.85rem;
}

.action-loyalty-table .tier-explorer i { color: #9aa0aa; }
.action-loyalty-table .tier-trekker i { color: #c89a4b; }
.action-loyalty-table .tier-summit i { color: #3b6f5a; }

.action-loyalty-table .discount-pct {
  font-weight: 700;
  color: var(--accent);
}

.action-loyalty-earn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.action-loyalty-earn-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  color: var(--text);
}

.action-loyalty-earn-list i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.action-loyalty-earn-list strong {
  color: var(--accent);
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.78rem;
}

.action-loyalty-info-note {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.75rem;
  background: var(--white);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}

/* ── Account: row links with icons ── */
.action-row-inner {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.action-row-inner svg {
  color: var(--accent);
  flex-shrink: 0;
  opacity: 0.85;
}

/* ── Cart: new item layout ── */
.action-cart-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.22rem;
}

.action-cart-remove {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #c2c2c2;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}

.action-cart-remove:hover {
  background: rgba(200, 30, 30, 0.07);
  border-color: rgba(200, 30, 30, 0.14);
  color: #c01010;
}

/* ── Cart: quantity stepper ── */
.action-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}

.action-cart-qty-btn {
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #555;
  transition: background 150ms, color 150ms;
}

.action-cart-qty-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}

.action-cart-qty-val {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #111;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  user-select: none;
  padding: 0 0.3rem;
}

.action-cart-foot {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.action-cart-price {
  font-size: 0.96rem;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
}

/* ── Cart: empty state ── */
.action-cart-empty-state {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.2rem 1rem 2rem;
}

.action-cart-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  margin: 0 auto 1.1rem;
}

.action-cart-empty-title {
  margin: 0 0 0.38rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #111;
}

.action-cart-empty-sub {
  margin: 0 0 1.4rem;
  font-size: 0.84rem;
  color: #777;
  line-height: 1.5;
}

.action-cart-empty-cta {
  width: 100%;
}

/* ── Cart: coupon code (now lives in sticky footer) ── */
.action-cart-coupon {
  padding: 0.85rem 1.4rem 0.7rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.action-coupon-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.82);
  padding: 0 0.7rem;
  transition: border-color 200ms;
}

.action-coupon-field:focus-within {
  border-color: #1a1a1a;
  background: #fff;
}

.action-coupon-field svg {
  color: #aaa;
  flex-shrink: 0;
}

.action-coupon-input {
  flex: 1;
  height: 2.6rem;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.84rem;
  color: #111;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.action-coupon-input::placeholder {
  color: #bbb;
  text-transform: none;
  letter-spacing: 0;
}

.action-coupon-btn {
  height: 2rem;
  padding: 0 0.8rem;
  background: #1a1a1a;
  color: #fff;
  border: 0;
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  /* Hidden until user types — revealed by :not(:placeholder-shown) below */
  opacity: 0;
  pointer-events: none;
  transition: background 180ms, opacity 220ms ease;
}

.action-coupon-btn:hover {
  background: #2d2d2d;
}

/* Reveal button once the coupon input has a value */
.action-coupon-input:not(:placeholder-shown) ~ .action-coupon-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ── Cart: summary row variants ── */
.action-cart-summary-row--muted strong {
  color: #888;
  font-weight: 500;
  font-size: 0.72rem;
}

/* ── Cart: item remove animation helper ── */
.action-cart-item {
  transition: opacity 260ms var(--ease-smooth), transform 260ms var(--ease-smooth), max-height 320ms var(--ease-out), margin 260ms var(--ease-smooth), padding 260ms var(--ease-smooth);
}

/* ============================================
   Mobile Menu
   ============================================ */

.mobile-menu {
  display: none;
}

.mobile-menu-top {
  display: block;
}

.mobile-menu-content {
  display: block;
}

.mobile-login {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--text);
  color: #fff;
  text-decoration: none;
}

.mobile-login-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.mobile-login-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mobile-login-text strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-login-text small {
  font-size: 0.65rem;
  opacity: 0.55;
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}

.mobile-login > i:last-child {
  font-size: 1.2rem;
  opacity: 0.4;
}

.mobile-close {
  display: none;
}

.mobile-section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--white);
}

.mobile-tabs-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.7rem;
  padding: 1rem 0.9rem 0.7rem;
}

.mobile-tabs-row--compact {
  align-items: end;
}

.mobile-rail-label {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted);
}

.mobile-section-heading {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mobile-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.4rem;
}

.mobile-tabs a {
  color: #bbb;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.03em;
  line-height: 1;
  font-weight: 400;
}

.mobile-tabs a.is-current {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--text);
  text-decoration-thickness: 1.5px;
}

.mobile-list {
  padding: 0 0.9rem 0.8rem 2.2rem;
}

.mobile-list-trigger,
.mobile-list-link {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 2.8rem 1fr 1.4rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 0;
  color: var(--text);
  cursor: pointer;
}

.mobile-item-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: #f2f2f2;
  color: var(--text);
  font-size: 1.15rem;
  border-radius: var(--radius);
}

.mobile-item-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: left;
  font-weight: 400;
}

.item-chevron {
  font-size: 1.3rem;
  color: #bbb;
  transition: transform 200ms var(--ease-out), color 200ms ease;
}

.mobile-list-trigger[aria-expanded="true"] .item-chevron {
  transform: rotate(90deg);
  color: var(--text);
}

.mobile-panel {
  max-height: 0;
  overflow: hidden;
  margin: 0 0 0 3.4rem;
  transition: max-height 280ms var(--ease-out);
}

.mobile-panel.is-open {
  visibility: visible;
}

.mobile-panel-inner {
  padding: 0.1rem 0 0.9rem;
}

.mobile-panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  padding: 0.2rem 0 0.95rem;
}

.mobile-panel-tabs a {
  padding: 0;
  color: #8d8d8d;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

.mobile-panel-tabs a.is-current {
  color: var(--text);
}

.mobile-subgroup + .mobile-subgroup {
  margin-top: 1rem;
}

.mobile-subgroup-title {
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-panel-link {
  display: block;
  padding: 0.42rem 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  transition: color 150ms ease;
}

.mobile-panel-link:hover,
.mobile-panel-tabs a:hover {
  color: var(--text);
}

.mobile-explore-links {
  padding: 0 0.9rem 1.15rem 2.2rem;
}

.mobile-explore-links a {
  display: block;
  color: var(--text);
  font-size: 1.65rem;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0.3rem 0;
  font-weight: 400;
}

/* ============================================
   Hero Banner
   ============================================ */

.hero-banner {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: clamp(34rem, 82vh, 54rem);
  --hero-content-bottom-gap: clamp(6.5rem, 12.5vh, 10.4rem);
  /* Sabit header yüksekliği (.main-nav) — hero içeriğinin üst güvenli payı */
  --hero-header-safe: 4.75rem;
  overflow: clip;
  background: #050708;
  isolation: isolate;
}

.hero-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 700ms var(--ease-smooth), visibility 700ms step-end;
  background: #06080a;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 700ms var(--ease-smooth), visibility 0ms step-start;
}

.hero-slide--split {
  background:
    linear-gradient(90deg, rgba(7, 9, 12, 0) 0%, rgba(7, 9, 12, 0) 46%, rgba(7, 9, 12, 0.95) 100%),
    #080b0f;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.hero-split-visual {
  position: relative;
  overflow: hidden;
}

.hero-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  image-rendering: auto;
}

.hero-bg-video,
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.04);
}

.hero-split-content,
.hero-slide--video .hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}

.hero-split-content {
  --hero-panel-rgb: 10, 31, 25;
  padding: clamp(3.2rem, 8vh, 6.4rem) clamp(1.6rem, 4vw, 4rem) var(--hero-content-bottom-gap);
  background-color: rgb(var(--hero-panel-rgb));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Alt pay boşluğu yalnızca masaüstünde (>980px) kullanılır; mobilde sağ blok
   ortalandığı için akışta yer tutmaz. */
.hero-split-gap {
  display: none;
}

/* Sağ blok arka planı — slayt görselinin flu devamı + yarı saydam renk tülü */
.hero-split-content-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.hero-split-content-bg-img {
  position: absolute;
  /* Ek büyütme yok: görsel alanı object-fit ile kaplar; yalnızca blur kenar
     taşması kadar (px bazında) dışa taşırılır ki flulukta açık kenar oluşmasın */
  top: calc(-1 * var(--hero-panel-blur, 4px));
  left: calc(-1 * var(--hero-panel-blur, 4px));
  width: calc(100% + 2 * var(--hero-panel-blur, 4px));
  height: calc(100% + 2 * var(--hero-panel-blur, 4px));
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Fluluk ve parlaklık panelden ayarlanır (blur 0-30px, parlaklık %30-100).
     Karartma işini brightness üstlenir; renk tülü ince tutulur. */
  filter: blur(var(--hero-panel-blur, 4px)) saturate(1.05) brightness(var(--hero-panel-brightness, 0.85));
}

/* Seçilen renk: soldan sağa koyulaşan degrade yapısı korunur, ince tül olarak biner */
.hero-split-content-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--hero-panel-rgb), 0.42) 0%,
    rgba(var(--hero-panel-rgb), 0.56) 48%,
    rgba(var(--hero-panel-rgb), 0.7) 100%
  );
}

/* Aurora ışık küreleri — yavaş kayan, çapraz köşelerden parıldayan */
.hero-split-content::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -2;
  background:
    radial-gradient(42% 36% at 16% 82%, rgba(255, 255, 255, 0.13), transparent 70%),
    radial-gradient(48% 38% at 84% 18%, rgba(255, 255, 255, 0.10), transparent 72%),
    radial-gradient(60% 45% at 50% 50%, rgba(0, 0, 0, 0.22), transparent 80%),
    radial-gradient(30% 22% at 75% 75%, rgba(255, 255, 255, 0.05), transparent 75%);
  filter: blur(6px);
  animation: heroAuroraOrbit 24s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

/* Film grain — ince organik doku, her renge uyum sağlar */
.hero-split-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes heroAuroraOrbit {
  0%   { transform: translate3d(0%, 0%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) rotate(4deg) scale(1.05); }
  100% { transform: translate3d(2%, -3%, 0) rotate(-3deg) scale(1.08); }
}

.hero-slide--video .hero-content {
  height: 100%;
  padding: clamp(3.2rem, 8vh, 6.4rem) clamp(4rem, 6vw, 6.5rem) var(--hero-content-bottom-gap) clamp(1.6rem, 4vw, 4rem);
}

/* Masaüstünde (>980px) video slaytta metin bloğu, split slaytla aynı
   --hero-content-bottom-gap tabanını kullanır; alt kenarı sağ raydaki dikey
   dil seçicinin alt kenarıyla aynı hizadadır (ikisi de aynı değişkene bağlı). */
@media (min-width: 981px) {
  .hero-slide--video .hero-text--video {
    transform: none;
  }
}

.hero-text {
  position: relative;
  z-index: 2;
}

.hero-text--split,
.hero-text--video {
  text-align: left;
  width: 100%;
}

.hero-text--split {
  max-width: min(32rem, 95%);
}

.hero-slide.is-active.hero-slide--video .hero-bg-video,
.hero-slide.is-active.hero-slide--video .hero-bg-img {
  animation: heroVideoDrift 8s linear forwards;
}

@keyframes heroVideoDrift {
  from { transform: scale(1.1); }
  to { transform: scale(1.04); }
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 40%, rgba(8, 12, 16, 0.1) 0%, rgba(8, 12, 16, 0.38) 58%, rgba(8, 12, 16, 0.64) 100%),
    linear-gradient(180deg, rgba(6, 9, 12, 0.18) 0%, rgba(6, 9, 12, 0.55) 78%, rgba(6, 9, 12, 0.72) 100%);
  z-index: 1;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 247, 252, 0.72);
  margin-bottom: 1rem;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.52) 100%);
}

.hero-text--split .hero-eyebrow {
  justify-content: flex-start;
}

.hero-text--split .hero-eyebrow::after,
.hero-text--video .hero-eyebrow::after {
  display: none;
}

.hero-text--video {
  width: min(43rem, calc(100vw - 7rem));
  max-width: 43rem;
  transform: translateY(-20%);
}

.hero-text--video .hero-eyebrow {
  justify-content: flex-start;
}

.hero-text--split h1,
.hero-text--video h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-size: var(--text-3xl);
  text-wrap: balance;
}

h2 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

.hero-desc {
  margin: 1rem 0 0;
  color: rgba(236, 244, 250, 0.83);
  font-size: 0.88rem;
  line-height: 1.6;
  font-weight: 300;
}

.hero-text--split .hero-desc,
.hero-text--video .hero-desc {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: rgba(236, 244, 250, 0.84);
  font-size: 0.94rem;
  font-weight: 400;
}

.hero-text--split .hero-cta-group,
.hero-text--video .hero-cta-group {
  justify-content: flex-start;
  align-items: flex-start;
}

.hero-cta-group {
  margin-top: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.64rem 1.5rem;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(10, 14, 18, 0.26);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform 250ms var(--ease-out), background-color 250ms var(--ease-smooth), border-color 250ms var(--ease-smooth), color 250ms var(--ease-smooth), box-shadow 250ms var(--ease-smooth);
}

.hero-btn:focus-visible,
.hero-slider-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.hero-btn-primary {
  background: rgba(255, 255, 255, 0.96);
  color: #0a0f12;
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
}

.hero-btn-primary:hover {
  background: #000;
  border-color: #fff;
  color: #fff;
}

.hero-btn-ghost {
  background: rgba(5, 8, 10, 0.32);
  border-color: rgba(255, 255, 255, 0.36);
  color: rgba(255, 255, 255, 0.94);
}

.hero-btn-ghost:hover {
  background: rgba(5, 8, 10, 0.62);
  border-color: rgba(255, 255, 255, 0.76);
}

.hero-text--video .hero-btn {
  min-height: 2.52rem;
  font-size: 0.76rem;
  padding: 0.62rem 0.95rem;
}

.hero-products {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
  width: 100%;
}

.hero-pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.42rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 280ms var(--ease-smooth), transform 280ms var(--ease-out), box-shadow 280ms var(--ease-smooth);
}

.hero-pcard:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.hero-pcard-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.hero-pcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 700ms var(--ease-out);
}

.hero-pcard:hover .hero-pcard-img {
  transform: scale(1.05);
}

.hero-pcard-body {
  padding: 0.45rem 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.hero-pcard-name {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-pcard-price {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.48);
}

.hero-products-more {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 1rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth), background 220ms var(--ease-smooth);
}

.hero-products-more:hover {
  color: #0a1f19;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.94);
}

.hero-scroll-hint {
  position: absolute;
  left: clamp(1.6rem, 4vw, 4rem);
  bottom: clamp(1.3rem, 4.5vh, 2.3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.26);
}

.hero-scroll-hint span {
  font-size: 0.54rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 600;
}

.scroll-line {
  width: 2.9rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.62);
  animation: heroScrollPulse 2s ease-in-out infinite;
}

@keyframes heroScrollPulse {
  0% { left: -100%; }
  100% { left: 100%; }
}

.hero-slider-ui {
  position: absolute;
  right: clamp(0.75rem, 1.9vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  z-index: 5;
}

.hero-slider-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.52rem;
}

.hero-slider-dot {
  position: relative;
  overflow: hidden;
  width: 0.32rem;
  height: 0.9rem;
  border-radius: var(--r-pill);
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  transition: height 250ms var(--ease-out), background-color 250ms var(--ease-smooth), opacity 250ms var(--ease-smooth);
}

.hero-slider-dot.is-active {
  height: 2.1rem;
  background: rgba(255, 255, 255, 0.28);
}

/* Aktif gösterge: autoplay süresi boyunca dolan çizgi (8s = heroDelay) */
.hero-slider-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.98);
  transform: scaleY(0);
  transform-origin: top;
  animation: heroDotFill 8s linear forwards;
}

@keyframes heroDotFill {
  to { transform: scaleY(1); }
}

.hero-slider-dot:not(.is-active):hover {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slider-track,
  .hero-bg-video,
  .hero-bg-img,
  .hero-split-img,
  .hero-split-content::before,
  .hero-btn,
  .hero-slider-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   Hero Language Switcher — sağ raydaki slider
   dotları ile aynı dikey eksende, dikey pill.
   Alt kenarı hero metniyle aynı hizada
   (--hero-content-bottom-gap). Etiketler yatay.
   ============================================ */
.hero-lang-switcher {
  position: absolute;
  right: clamp(0.75rem, 1.9vw, 1.6rem);
  bottom: var(--hero-content-bottom-gap);
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.14rem;
  padding: 0.36rem 0.22rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  z-index: 5;
}

.hero-lang-globe {
  color: rgba(255, 255, 255, 0.85);
  align-self: center;
  width: 11px;
  height: 11px;
  margin: 0.1rem 0 0.16rem;
  flex-shrink: 0;
}

.hero-lang-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.3rem 0.24rem;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  text-decoration: none;
  transition: color 200ms var(--ease-smooth), background-color 200ms var(--ease-smooth), transform 200ms var(--ease-out);
}

.hero-lang-link:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.12);
}

.hero-lang-link.is-active {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.hero-lang-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* Solid header sayfalarında (anasayfa dışı) hero-lang-switcher görünmez — yalnızca .hero-banner içinde render edildiği için zaten görünmüyor; ek koruma gerekmez. */

@media (prefers-reduced-motion: reduce) {
  .hero-lang-link {
    transition: none !important;
  }
}

/* ============================================
   Season Blocks
   ============================================ */

.season-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 10px;
  gap: 10px;
}

.season-block {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: clamp(28rem, 60vh, 42rem);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
}

.season-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 800ms var(--ease-out);
}

.season-block:hover .season-img {
  transform: scale(1.04);
}

.season-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.05) 100%);
  transition: background 400ms ease;
}

.season-block:hover .season-overlay {
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.08) 100%);
}

.season-content {
  position: relative;
  z-index: 1;
  padding: clamp(1.8rem, 4vw, 3rem);
}

.season-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.season-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.85;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.season-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.season-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: all 250ms ease;
}

.season-cta svg {
  transition: transform 250ms ease;
}

.season-block:hover .season-cta {
  border-color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   Design Notes — Designer Quotes Section
   ============================================ */

.design-notes {
  margin-top: 10px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  /* header (3.75rem) + margin-top of season (10px) + season + margin-top here (10px) = 100vh */
  height: calc(100vh - 3.75rem - clamp(28rem, 60vh, 42rem) - 20px);
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Header bar ── */
.notes-header {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem clamp(2rem, 5vw, 5rem) 0;
  flex-shrink: 0;
}

.notes-label {
  font-family: var(--font-display);
  font-size: 0.54rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.55;
}

.notes-label--right {
  letter-spacing: 0.16em;
}

.notes-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Bülten formu — ortak durum/honeypot (footer + blog) */

.nl-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
}

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

.nl-msg {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  border-left: 2px solid transparent;
}

.nl-msg[hidden] {
  display: none;
}

.nl-msg.is-error {
  color: var(--error);
  background: rgba(179, 70, 47, 0.06);
  border-left-color: var(--error);
}

.nl-msg.is-success {
  color: var(--success);
  background: rgba(46, 125, 91, 0.07);
  border-left-color: var(--success);
}

.nl-msg.is-info {
  color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
  border-left-color: var(--line-strong);
}

.ft-nl-form.is-busy .ft-nl-btn,
.ft-nl-form.is-done .ft-nl-btn {
  opacity: 0.6;
  cursor: default;
}

.ft-nl-form.is-done .ft-nl-field {
  border-color: rgba(46, 125, 91, 0.45);
}

.ft-nl-form.is-done .ft-nl-input {
  color: rgba(0, 0, 0, 0.55);
}

/* ── Body grid ── */
.notes-body {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  flex: 1;
  padding: 0 clamp(2rem, 5vw, 5rem);
  gap: 0;
  align-items: center;
  min-height: 0;
}

/* ── Card ── */
.note-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  justify-content: center;
}

.note-ss {
  padding-right: clamp(2rem, 4vw, 4.5rem);
}

.note-aw {
  padding-left: clamp(2rem, 4vw, 4.5rem);
}

/* ── Season tag ── */
.note-season-tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.note-ss .note-season-tag {
  color: var(--accent);
}

.note-aw .note-season-tag {
  color: var(--accent-warm);
}

.note-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.note-ss .note-dot {
  background: var(--accent);
  box-shadow: 0 0 5px rgba(26, 92, 54, 0.45);
}

.note-aw .note-dot {
  background: var(--accent-warm);
  box-shadow: 0 0 5px rgba(196, 98, 42, 0.45);
}

/* ── Blockquote ── */
.note-blockquote {
  margin: 0;
  position: relative;
}

/* Large decorative mark — positioned behind text, no extra vertical space */
.note-mark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 6vw, 8rem);
  line-height: 1;
  color: rgba(0, 0, 0, 0.045);
  position: absolute;
  top: -0.55rem;
  left: -0.4rem;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.note-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* ── Footer ── */
.note-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.note-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  flex-shrink: 0;
}

.note-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.note-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
}

.note-role {
  display: block;
  font-size: 0.59rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.note-code {
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--line-strong);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Vertical divider ── */
.notes-divider {
  background: var(--line);
  align-self: stretch;
  margin: 1.6rem 0;
}

/* ── Floor bar ── */
.notes-floor {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 clamp(2rem, 5vw, 5rem) 1.1rem;
  flex-shrink: 0;
}

.notes-floor-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.notes-floor-text {
  font-family: var(--font-display);
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.4;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================
   Highlights — Product Carousel
   ============================================ */

.highlights {
  --hl-pad: var(--page-gutter);
  --hl-media-radius: 0.72rem;
  margin-top: 50px;
  position: relative;
}

/* ── Header ── */
.hl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vh, 2.5rem) var(--hl-pad) clamp(1rem, 2vh, 1.6rem);
}

.hl-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--text);
}

.hl-counter {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Track Wrapper ── */
.hl-track-wrap {
  position: relative;
}

.hl-track-wrap::before,
.hl-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 110px;
  height: var(--hl-mask-h, 100%);
  pointer-events: none;
  z-index: 4;
}

.hl-track-wrap::before {
  left: 0;
  background: linear-gradient(to left, transparent 0%, var(--bg) 100%);
}

.hl-track-wrap::after {
  right: 0;
  background: linear-gradient(to right, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 4;
}

/* ── Carousel Navigation ── */
.hl-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.hl-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.35rem;
  height: 3.35rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(10, 18, 26, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(10, 18, 26, 0.14);
  cursor: pointer;
  color: #12181d;
  pointer-events: auto;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background 200ms var(--ease-smooth), border-color 200ms var(--ease-smooth);
  opacity: 1;
}

.hl-prev {
  left: 0.35rem;
}

.hl-next {
  right: 0.35rem;
}

.hl-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(10, 18, 26, 0.34);
  transform: translateY(-50%) scale(1.04);
}

.hl-nav-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.hl-prev:disabled {
  transform: translateY(-50%) translateX(-10px);
}

.hl-next:disabled {
  transform: translateY(-50%) translateX(10px);
}

.hl-nav-arrow {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

/* ── Scroll Track ── */
.hl-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hl-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hl-spacer {
  flex: 0 0 calc(var(--hl-pad) - 10px);
  scroll-snap-align: start;
  transition: flex-basis 500ms var(--ease-out);
}

.hl-track--full .hl-spacer {
  flex-basis: 0;
}

.hl-track::-webkit-scrollbar {
  display: none;
}

/* ── Product Card ── */
.hl-card {
  flex: 0 0 calc((100vw - var(--hl-pad) - 32px) / 4.15);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Tüm z-index çatışmalarını karta hapseden temiz stacking context. */
  isolation: isolate;
}

/* Ghost link: invisible overlay covering the entire card.
   z-index 5: görsel (.hl-card-media z:2) ve başlık (.hl-card-body z:2) üstünde
   olmalı ki tüm kart tıklanabilir olsun. Favori/sepet/swatch butonları daha
   yüksek z-index ile bu overlay'in üstünde kalır. */
.hl-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  cursor: pointer;
  text-decoration: none;
}

.hl-track--full .hl-card {
  flex: 0 0 calc((100vw - 32px) / 4.15);
}

.hl-card:last-child {
  margin-right: var(--hl-pad);
  transition: margin-right 500ms var(--ease-out);
}

.hl-track--full .hl-card:last-child {
  margin-right: 0;
}

/* ── Image ──
   z-index YOK: aksi halde medya kendi stacking context'ini oluşturur ve
   içindeki .hl-card-fav / .hl-card-bag / .hl-card-swatches butonları
   .hl-card-link (z:5) overlay'inin üstüne çıkamaz. */
.hl-card-media {
  position: relative;
  aspect-ratio: 1696 / 2528;
  overflow: hidden;
  border: 1px solid rgba(16, 22, 28, 0.06);
  background: #dfe0da;
}

.hl-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}

.hl-card-img--alt {
  opacity: 0;
  z-index: 1;
}

.hl-card:hover .hl-card-img:not(.hl-card-img--alt) {
  transform: scale(1.02);
}

.hl-card:hover .hl-card-img--alt {
  opacity: 1;
  transform: scale(1.02);
}

/* ── Favorite Button (top-right) ── */
.hl-card-fav {
  --hl-card-action-edge: 0.65rem;
  position: absolute;
  top: 0.65rem;
  right: var(--hl-card-action-edge);
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth), background 200ms, color 200ms;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hl-card:hover .hl-card-fav {
  opacity: 1;
  transform: translateY(0);
}

.hl-card-fav:hover {
  background: var(--text);
  color: #fff;
}

.hl-card-fav.is-active {
  opacity: 1;
  transform: translateY(0);
  color: #e74c3c;
}

.hl-card-fav.is-active svg {
  fill: #e74c3c;
}

.hl-card-fav:hover.is-active {
  background: rgba(255, 255, 255, 0.92);
}

/* ── Shopping Bag Button (bottom-right) ── */
.hl-card-bag {
  position: absolute;
  bottom: 0.65rem;
  right: var(--hl-card-action-edge, 0.65rem);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: #111;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth), color 200ms;
  z-index: 6;
  box-shadow: none;
}

.hl-card-bag svg {
  width: 1.75rem;
  height: 1.75rem;
}

.hl-card-bag svg path {
  stroke: currentColor;
  stroke-width: 0.35;
  paint-order: stroke fill;
}

.hl-card:hover .hl-card-bag {
  opacity: 1;
  transform: translateY(0);
}

.hl-card-bag:hover {
  background: transparent;
  color: var(--accent);
  transform: translateY(0);
}

.hl-card-bag:active {
  transform: translateY(0);
}

/* ── Color Swatches (inside image, bottom-left) ── */
.hl-card-swatches {
  position: absolute;
  left: 0.72rem;
  bottom: 0.72rem;
  z-index: 6;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  overflow: visible;
  opacity: 1;
  padding: 0.3rem;
  border-radius: 0.62rem;
  border: 1px solid rgba(18, 24, 29, 0.14);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 7px 18px rgba(10, 18, 26, 0.14);
}

.hl-swatch {
  position: relative;
  display: block;
  width: 2.44rem;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.42rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: border-color 220ms var(--ease-smooth), transform 260ms var(--ease-out), margin-left 280ms var(--ease-out), box-shadow 220ms var(--ease-smooth);
}

.hl-swatch:nth-child(1) { z-index: 5; }
.hl-swatch:nth-child(2) { z-index: 4; }
.hl-swatch:nth-child(3) { z-index: 3; }
.hl-swatch:nth-child(4) { z-index: 2; }

.hl-swatch + .hl-swatch {
  margin-left: -1.42rem;
}

.hl-card:hover .hl-swatch + .hl-swatch,
.hl-card:focus-within .hl-swatch + .hl-swatch {
  margin-left: 0.34rem;
}

.hl-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hl-swatch:hover {
  border-color: rgba(20, 27, 33, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(10, 18, 26, 0.16);
}

.hl-swatch.is-active {
  border-color: rgba(17, 24, 31, 0.72);
  box-shadow: 0 3px 8px rgba(10, 18, 26, 0.12);
}

/* ── Card Body ──
   z-index YOK: stacking context oluşturmasın diye (üstte .hl-card-link
   tıklamayı yakalayabilsin). */
.hl-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.55rem 0.15rem 1rem;
}

.hl-card-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.hl-card-tag--sale {
  color: var(--sale);
}

.hl-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.2;
}

.hl-card-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-top: 0.15rem;
}

/* ── Fiyat satırı: indirimli fiyat + üstü çizili eski fiyat ──
   list.css'teki pl-card-price-row ile aynı dil; hl-card her sayfada
   (ana sayfa, 404, ürün detay ilgili ürünler, sepet önerileri)
   kullanıldığı için stiller burada, global dosyada da tanımlı. */
.pl-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.pl-card-price-row .hl-card-price {
  margin-top: 0;
}

.pl-card-price--old {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
}

.pl-card-discount {
  font-size: 0.65rem;
  font-weight: 700;
  color: #dc2626;
}

/* ── Card Rating (popüler kart yıldız puanı) ──
   Editoryal, sakin satır: ince üst çizgi, solda kesirli dolgulu yıldızlar
   ve puan, sağda mikro etiketli değerlendirme sayısı. */
.hl-card-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.hl-rating-stars {
  position: relative;
  display: inline-flex;
  color: var(--line-strong);
}

.hl-rating-row {
  display: flex;
}

.hl-rating-row svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: block;
}

/* Kesirli dolgu: alttaki gri sıranın üstünde, genişliği puana göre
   kırpılmış turuncu kopya (width inline style ile PHP'den gelir). */
.hl-rating-row--fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  color: var(--accent-warm);
}

.hl-rating-val {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1;
}

.hl-rating-count {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================
   Member CTA Banner
   ============================================ */

.member-cta {
  width: 100%;
  margin: 0;
  background: #5b7a3f;
  color: #fff;
  border: 0;
  overflow: hidden;
}

.member-cta-inner {
  width: min(1520px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--page-gutter);
}

.member-cta-logo {
  flex-shrink: 0;
  display: block;
}

.member-cta-logo img {
  display: block;
  width: clamp(74px, 7vw, 104px);
  height: clamp(74px, 7vw, 104px);
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  object-fit: contain;
}

.member-cta-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.member-cta-title {
  margin: 0;
  text-transform: none;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.05vw, 1.85rem);
  font-weight: 550;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.85);
  max-width: 32ch;
}

/* Marka vurgusu — renk çakışması yerine ağırlık/kontrast ile */
.member-cta-brand {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.member-cta-desc {
  margin: 0;
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: 56ch;
}

.member-cta-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.member-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: 132px;
  height: 2.85rem;
  padding: 0 1.35rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 220ms var(--ease-smooth),
              color 220ms var(--ease-smooth),
              border-color 220ms var(--ease-smooth);
}

.member-cta-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.member-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.member-cta-btn--primary {
  background: var(--accent-warm);
  color: #14100c;
  border: 1px solid var(--accent-warm);
}

.member-cta-btn--primary:hover {
  background: #d68f4e;
  border-color: #d68f4e;
}

/* ============================================
   Quick Order Drawer
   ============================================ */

/* ── Backdrop ── */
.qo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 18, 12, 0.45);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-smooth), visibility 0s 400ms;
}

.qo-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-smooth), visibility 0s 0s;
}

/* Mobilde gövde kilitlenmez (iOS araç çubuğu zıplaması); kilit script.js'te */
@media (min-width: 981px) {
  body.qo-open {
    overflow: hidden;
  }
}

/* ── Drawer Panel ── */
.qo-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  width: min(480px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: -16px 0 56px rgba(0, 0, 0, 0.14), -2px 0 6px rgba(0, 0, 0, 0.04);
  transform: translateX(100%);
  transition: transform 480ms var(--ease-out);
  overflow: hidden;
}

.qo-drawer.is-open {
  transform: translateX(0);
}

/* ── Drag Handle (mobile only) ── */
.qo-drag-handle {
  display: none;
}

.qo-product-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qo-close {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  transition: background 200ms, color 200ms;
}

.qo-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

.qo-close--overlay {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 6;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1a2128;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.qo-close--overlay:hover {
  background: rgba(255, 255, 255, 0.97);
  color: #0f141a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* ── Scrollable Body ── */
.qo-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.qo-body::-webkit-scrollbar { width: 4px; }
.qo-body::-webkit-scrollbar-track { background: transparent; }
.qo-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ── Hero Image ── */
.qo-hero {
  position: relative;
  height: clamp(30rem, calc(68vh + 4.5rem), 50rem);
  overflow: hidden;
  background: #e8e9e4;
}

.qo-hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Yerel yatay kaydırma + snap: mobilde parmakla, masaüstünde oklarla */
.qo-hero-track {
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.qo-hero-track::-webkit-scrollbar {
  display: none;
}

.qo-hero-slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.qo-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: opacity 300ms var(--ease-smooth);
}

.qo-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111a21;
  box-shadow: 0 4px 16px rgba(10, 18, 26, 0.12), 0 1px 3px rgba(10, 18, 26, 0.06);
  cursor: pointer;
  z-index: 6;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth), opacity 220ms var(--ease-smooth), box-shadow 220ms var(--ease-smooth);
}

.qo-hero-prev {
  left: 0.75rem;
}

.qo-hero-next {
  right: 0.75rem;
}

.qo-hero-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 22px rgba(10, 18, 26, 0.16), 0 2px 5px rgba(10, 18, 26, 0.08);
}

.qo-hero-nav:disabled {
  opacity: 0.18;
  pointer-events: none;
}

.qo-hero-dots {
  position: absolute;
  top: 50%;
  right: 0.62rem;
  transform: translateY(-50%);
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
}

.qo-hero-dot {
  width: 0.36rem;
  height: 0.36rem;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 2px 6px rgba(10, 18, 26, 0.2);
  cursor: pointer;
  transition: all 220ms var(--ease-out);
}

.qo-hero-dot.is-active {
  width: 0.42rem;
  height: 1.1rem;
  background: rgba(255, 255, 255, 0.98);
}

.qo-hero-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 1.15rem;
  background:
    linear-gradient(180deg, rgba(10, 16, 22, 0) 0%, rgba(10, 16, 22, 0.32) 40%, rgba(10, 16, 22, 0.65) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.qo-hero-fav {
  position: static;
  width: 2.2rem;
  height: 2.2rem;
  opacity: 1;
  transform: none;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ── Sections ── */
.qo-section {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--line);
}

.qo-section-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

/* ── Color Swatches (in drawer) ── */
.qo-color-swatches {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.qo-color-swatch {
  width: 3rem;
  aspect-ratio: 4 / 5;
  border: 1.25px solid rgba(17, 24, 31, 0.18);
  border-radius: 0.42rem;
  overflow: hidden;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms var(--ease-out);
}

.qo-color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qo-color-swatch:hover {
  border-color: rgba(17, 24, 31, 0.46);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.qo-color-swatch.is-active {
  border-color: rgba(17, 24, 31, 0.75);
  box-shadow: 0 5px 12px rgba(10, 18, 26, 0.14);
}

.qo-color-name {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-size: 0.6rem;
}

.qo-related-swatches {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.qo-related-swatch {
  width: 2.7rem;
  height: 3.4rem;
  border: 1.2px solid rgba(17, 24, 31, 0.2);
  border-radius: 0.42rem;
  overflow: hidden;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: border-color 180ms, transform 180ms var(--ease-out), box-shadow 180ms;
}

.qo-related-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qo-related-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(17, 24, 31, 0.5);
}

.qo-related-swatch.is-active {
  border-color: rgba(17, 24, 31, 0.82);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

/* ── Size Selector ── */
.qo-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.qo-size {
  min-width: 3rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  padding: 0 0.6rem;
  transition: border-color 200ms, background 200ms, color 200ms;
}

.qo-size:hover {
  border-color: var(--text);
}

.qo-size.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--white);
}

.qo-size.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Product Info ── */
.qo-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.qo-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.qo-stock {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

.qo-features-wrap {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.qo-features-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.qo-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.qo-feature {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
  background: var(--bg-soft);
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  transition: border-color var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth);
}

.qo-feature:hover {
  border-color: var(--line-strong);
  background: var(--white);
}

.qo-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent);
}

.qo-feature-icon svg {
  width: 100%;
  height: 100%;
}

.qo-feature svg {
  color: var(--accent);
  flex-shrink: 0;
}

.qo-feature--more {
  background: var(--white);
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: help;
}

.qo-feature--more:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--white);
}

/* ── Sticky Footer ── */
.qo-footer {
  flex-shrink: 0;
  padding: 1rem 1.5rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--white);
  display: block;
}

.qo-add-btn {
  width: 100%;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: none;
  background: #000;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 240ms var(--ease-smooth), transform 150ms, box-shadow 240ms var(--ease-smooth);
}

.qo-add-btn:hover {
  background: #14472a;
  box-shadow: 0 8px 24px rgba(26, 92, 54, 0.28);
}

.qo-add-btn:active {
  transform: scale(0.985);
}

.qo-add-btn.is-added {
  background: #14472a;
}

.qo-add-price {
  opacity: 0.72;
  font-weight: 500;
  margin-left: 0.15rem;
}

.qo-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.22rem 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: none;
  transition: color 200ms var(--ease-smooth);
}

.qo-detail-link:hover {
  color: var(--text);
}

/* ============================================
   Special Collection Section
   ============================================ */

.sc-section {
  --sc-content-offset: clamp(1rem, 3.2vh, 2rem);
  --sc-card-w: clamp(290px, 30vw, 500px);
  --sc-gap: 12px;
  --sc-side: var(--page-gutter);
  --sc-left-slot: calc(var(--sc-card-w) + var(--sc-gap));
  --sc-visual-w: calc((var(--sc-card-w) * 2) + var(--sc-gap));
  --sc-dots-gap: 34px;
  --sc-shift: 0px;
  --sc-motion: 680ms;
  margin-top: 50px;
  position: relative;
  height: calc((100vh - 4.75rem) * 0.97);
  min-height: 572px;
  overflow: hidden;
  background: #ececea;
}

.sc-stage {
  position: absolute;
  inset: 0;
}

.sc-hero-visual {
  position: absolute;
  top: 0;
  left: var(--sc-side);
  bottom: 0;
  width: var(--sc-visual-w);
  overflow: hidden;
  z-index: 1;
  transform: translate3d(var(--sc-shift), 0, 0);
  transition: transform var(--sc-motion) cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transition: transform 1200ms var(--ease-out);
}

.sc-section:hover .sc-hero-img {
  transform: scale(1.03);
}

.sc-rail-shell {
  position: absolute;
  inset: var(--sc-content-offset) 0 calc(var(--sc-content-offset) + var(--sc-dots-gap));
  overflow: hidden;
  z-index: 3;
}

.sc-rail {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--sc-gap);
  padding-left: calc(var(--page-gutter) + var(--sc-left-slot));
  padding-right: var(--page-gutter);
  transform: translate3d(var(--sc-shift), 0, 0);
  transition: transform var(--sc-motion) cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-card {
  position: relative;
  flex: 0 0 var(--sc-card-w);
  height: 100%;
  min-width: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #fff;
}

.sc-intro-card {
  flex-basis: var(--sc-card-w);
  margin-right: 0;
  background: #000;
  padding: clamp(1.1rem, 1.6vw, 1.7rem) clamp(1rem, 1.35vw, 1.35rem) clamp(1.25rem, 1.8vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 4;
}

.sc-intro-inner {
  max-width: 100%;
}

.sc-intro-card .sc-hero-title {
  font-size: clamp(1.5rem, 2.35vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.sc-hero-title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.8vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
}

.sc-hero-desc {
  margin: 0.85rem 0 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.8rem, 0.88vw, 0.95rem);
  line-height: 1.38;
  font-weight: 400;
}

.sc-intro-next {
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  margin-top: clamp(1rem, 2.2vh, 1.8rem);
  align-self: flex-start;
  opacity: 0.94;
  transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-smooth);
}

.sc-intro-next:hover {
  transform: translateX(8px);
  opacity: 1;
}

.sc-intro-next:active {
  transform: translateX(3px);
}

.sc-intro-next svg {
  display: block;
}

.sc-section.is-transitioning .sc-hero-visual,
.sc-section.is-transitioning .sc-rail {
  pointer-events: none;
  will-change: transform;
}

.sc-section.is-transitioning .sc-slider-btn,
.sc-section.is-transitioning .sc-intro-next {
  opacity: 0.3;
  pointer-events: none;
}

.sc-card-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  transition: transform 900ms var(--ease-out), filter 520ms var(--ease-out);
}

.sc-card--mono .sc-card-img {
  filter: grayscale(100%);
}

.sc-card:hover .sc-card-img {
  transform: scale(1.045);
}

.sc-card--more .sc-card-more-cta {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.85vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}

.sc-card--more:hover .sc-card-more-cta {
  opacity: 1;
  transform: scale(1);
}

.sc-card--more:hover .sc-card-img {
  transform: scale(1.08);
  filter: blur(7px) brightness(0.66);
}

.sc-card--more:hover .sc-card-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.34) 100%);
}

.sc-card--more:hover .sc-card-bottom {
  opacity: 0;
  transform: translateY(8px);
}

.sc-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.22) 52%, rgba(0, 0, 0, 0.02) 100%);
  transition: background 400ms ease;
  z-index: 1;
}

.sc-card:hover .sc-card-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.27) 56%, rgba(0, 0, 0, 0.06) 100%);
}

.sc-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1.05rem, 1.9vw, 1.75rem) clamp(1.05rem, 1.7vw, 1.55rem);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}

.sc-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.05vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #fff;
  line-height: 1.1;
}

.sc-card-arrow {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out), background 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth);
  opacity: 0.86;
}

.sc-card:hover .sc-card-arrow {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.72);
  transform: scale(1.06);
}

.sc-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(10, 18, 26, 0.16);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(10, 18, 26, 0.12);
  cursor: pointer;
  color: #12181d;
  pointer-events: auto;
  z-index: 8;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background 200ms var(--ease-smooth);
}

.sc-slider-prev {
  left: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
}

.sc-section:not(.is-first) .sc-slider-prev {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.sc-slider-next {
  right: 0.45rem;
}

.sc-slider-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 18, 26, 0.32);
  transform: translateY(-50%) scale(1.06);
}

.sc-slider-btn:disabled {
  opacity: 0.34;
  pointer-events: none;
}

.sc-section.is-first .sc-slider-prev {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
}

.sc-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(0.5rem, 1.5vh, 0.95rem);
  margin-top: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 6;
}

.sc-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  border: none;
  background: #0f1114;
  opacity: 0.32;
  cursor: pointer;
  padding: 0;
  transition: width 220ms var(--ease-out), opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.sc-dot:hover {
  transform: scale(1.1);
}

.sc-dot.is-active {
  width: 1.7rem;
  opacity: 1;
}

.sc-section.is-transitioning .sc-dot {
  pointer-events: none;
}

/* ============================================
   Category Accordion
   ============================================ */

.cat-accordion {
  display: flex;
  height: clamp(420px, 70vh, 640px);
  margin-top: clamp(2rem, 5vw, 4rem);
  background: #080808;
  gap: 1.5px;
  overflow: hidden;
}

main > .cat-accordion {
  display: none !important;
}

/* ── Individual Panel ── */
.cat-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: flex 680ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-panel.is-active {
  flex: 3.4;
}

.cat-accordion.has-hover .cat-panel:not(.is-active) {
  flex: 0.72;
}

/* ── Media Layer ── */
.cat-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.cat-panel.is-active .cat-img {
  transform: scale(1.03);
}

.cat-panel:not(.is-active) .cat-img {
  transform: scale(1.1);
}

/* ── Gradient Overlay ── */
.cat-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.08) 100%),
    linear-gradient(to right, rgba(0,0,0,0.18) 0%, transparent 60%);
  transition: background 500ms ease;
  z-index: 1;
}

.cat-panel.is-active .cat-shade {
  background:
    linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.04) 100%),
    linear-gradient(to right, rgba(0,0,0,0.15) 0%, transparent 50%);
}

/* ── Index Number ── */
.cat-num {
  position: absolute;
  top: clamp(1rem, 2.5vh, 1.8rem);
  left: clamp(1rem, 2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
  z-index: 2;
  transition: color 400ms ease;
}

.cat-panel.is-active .cat-num {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Vertical Label (collapsed state) ── */
.cat-vert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  z-index: 2;
  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.cat-panel.is-active .cat-vert {
  opacity: 0;
  transition: opacity 180ms ease;
}

/* ── Bottom Meta (expanded state) ── */
.cat-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1.2rem, 3vh, 2rem) clamp(1.2rem, 2.5vw, 2rem);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.cat-meta-inner {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cat-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.9;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  white-space: nowrap;
}

.cat-count {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 340ms var(--ease-out) 50ms, transform 340ms var(--ease-out) 50ms;
}

.cat-arrow-wrap {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.8) translateY(8px);
  transition: opacity 320ms var(--ease-out) 100ms,
              transform 320ms var(--ease-out) 100ms,
              background 200ms ease,
              border-color 200ms ease;
}

.cat-panel:hover .cat-arrow-wrap {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ── Reveal when active ── */
.cat-panel.is-active .cat-name,
.cat-panel.is-active .cat-count,
.cat-panel.is-active .cat-arrow-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Separator line ── */
.cat-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5px;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
  z-index: 3;
}

.cat-panel:last-child::after {
  display: none;
}

/* ============================================
   Responsive - Tablet
   ============================================ */

@media (max-width: 1200px) {
  .main-nav {
    padding-inline: 1.2rem;
  }

  .mega-content {
    grid-template-columns: 11rem 1fr minmax(12rem, 17rem);
  }

  .mega-main {
    padding: 1.2rem 1rem;
  }

  .mega-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .action-panel {
    width: min(28rem, calc(100vw - 1rem));
  }

  .design-notes {
    height: calc(100vh - 3.75rem - clamp(28rem, 60vh, 42rem) - 20px);
  }

  .cat-accordion {
    height: clamp(340px, 58vh, 520px);
  }

  .sc-section {
    --sc-card-w: clamp(260px, 36vw, 420px);
    --sc-gap: 10px;
    --sc-side: var(--page-gutter);
    --sc-content-offset: clamp(0.8rem, 2.6vh, 1.55rem);
    --sc-dots-gap: 30px;
  }

  .sc-hero-title {
    font-size: clamp(1.95rem, 3.25vw, 3.2rem);
  }
}

/* ============================================
   Responsive - Mobile
   ============================================ */

@media (max-width: 980px) {
  .nav-links,
  .dropdown-layer,
  .action-layer {
    display: none;
  }

  .menu-toggle {
    display: block;
    order: 1;
    margin: 0 auto 0 0;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    order: 3;
    margin-left: auto;
  }

  .nav-actions .action-btn[data-action-trigger="account"] {
    display: none;
  }

  .nav-actions .action-btn {
    width: 2.02rem;
    height: 2.02rem;
  }

  .mobile-menu {
    display: grid;
    background: var(--white);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0 0 0.6rem 0.6rem;
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: auto;
    transition: max-height 300ms var(--ease-out);
    position: relative;
    z-index: 6;
  }

  .mobile-menu.is-open {
    max-height: calc(100vh - 62px);
  }

  .main-nav {
    background: rgba(255, 255, 255, calc(0.08 + (var(--header-progress) * 0.92)));
    border-bottom-color: rgba(12, 20, 24, calc(var(--header-progress) * 0.14));
    justify-content: space-between;
  }

  .brand-logo {
    width: var(--brand-logo-width-mobile);
  }

  .hero-banner {
    /* İlk ekran = hero + alt çubuk: hero, sabit çubuğun üstünde biter;
       gösterge ve ürün kartları çubuğun altında kalmaz. */
    --hero-h: calc(100dvh - var(--mob-bar-content-height, 64px) - env(safe-area-inset-bottom, 0px));
    height: var(--hero-h);
    min-height: clamp(27rem, 72dvh, 46rem);
    --hero-content-bottom-gap: 2.86rem;
    /* Görsel/içerik sınırı: görsel üstten hizalı, içerik en az bu kadar yer alır */
    --hero-visual-h: calc(var(--hero-h) * 0.58);
    --hero-content-min: calc(var(--hero-h) * 0.42);
  }

  .hero-text--split {
    width: 100%;
    max-width: none;
  }

  /* ── Mobil: yatay kaydırmalı ray. Slaytlar üst üste değil yan yana durur,
     ray translateX ile kayar; sürükleme parmağı takip eder (script.js). ── */
  .hero-slider-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    touch-action: pan-y;
  }

  .hero-slider-track.is-dragging {
    transition: none;
  }

  .hero-slide,
  .hero-slide.is-active {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    transition: none;
  }

  .hero-split-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  /* Görsel üstten hizalı: kafa/omuz üstten kırpılmaz */
  .hero-split-img,
  .hero-bg-img,
  .hero-bg-video {
    object-position: center top;
  }

  .hero-split-content {
    padding: 1.3rem 1.1rem var(--hero-content-bottom-gap) 1.1rem;
    align-items: flex-start;
    justify-content: center;
    min-height: var(--hero-content-min);
  }

  .hero-slide--video .hero-content {
    padding: calc(var(--hero-visual-h) + 1.3rem) 0 var(--hero-content-bottom-gap) 0;
    justify-content: center;
  }

  .hero-text--video {
    width: 100%;
    max-width: none;
    padding: 0 1.1rem;
  }


  .hero-text--split h1,
  .hero-text--video h1 {
    font-size: clamp(1.5rem, 5.55vw, 2.55rem);
    line-height: 1.2;
  }

  .hero-eyebrow {
    margin-bottom: 0.75rem;
    gap: 0.5rem;
    letter-spacing: 0.15em;
  }

  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 1.05rem;
  }

  /* Açıklama mobilde gizli: yer kazanımı */
  .hero-text--split .hero-desc,
  .hero-text--video .hero-desc {
    display: none;
  }

  /* Ürün kartları + sağda kart yüksekliğinde ince "Tümünü Gör" şeridi */
  .hero-text--split .hero-products {
    margin-top: 0.95rem;
    flex-direction: row;
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
  }

  .hero-products-grid {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.45rem;
  }

  .hero-pcard-body {
    padding: 0.35rem 0.35rem 0.4rem;
  }

  .hero-pcard-name {
    font-size: 0.48rem;
  }

  .hero-pcard-price {
    font-size: 0.53rem;
  }

  .hero-products-more {
    flex: 0 0 2.1rem;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: 0.42rem;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
  }

  .hero-products-more-text {
    display: none;
  }

  .hero-products-more svg {
    width: 16px;
    height: 16px;
  }

  .hero-scroll-hint {
    display: none;
  }

  .hero-cta-group {
    margin-top: 1.25rem;
    gap: 0.48rem;
  }

  .hero-btn {
    min-height: 2.36rem;
    padding: 0.56rem 1rem;
    font-size: 0.52rem;
    letter-spacing: 0.12em;
  }

  /* Gösterge: sol altta yatay çizgi segmentleri (dikey nokta sütunu yerine) */
  .hero-slider-ui {
    top: auto;
    right: auto;
    bottom: 1.05rem;
    left: 1.1rem;
    transform: none;
    gap: 0;
  }

  .hero-slider-dots {
    flex-direction: row;
    gap: 0.32rem;
  }

  .hero-slider-dot {
    width: 1rem;
    height: 2px;
    border-radius: 1px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.34);
    transition: width 280ms var(--ease-out), background-color 280ms var(--ease-smooth);
  }

  /* Dokunma alanı: 2px çizgi için görünmez geniş hedef */
  .hero-slider-dot::before {
    content: "";
    position: absolute;
    left: -0.16rem;
    right: -0.16rem;
    top: -0.8rem;
    bottom: -0.8rem;
  }

  .hero-slider-dot.is-active {
    width: 1.9rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.96);
  }

  .hero-slider-dot.is-active::after {
    display: none;
  }

  .hero-lang-switcher {
    display: none;
  }

  .hero-lang-globe {
    width: 12px;
    height: 12px;
    margin: 0 0.22rem 0 0.14rem;
  }

  .hero-lang-link {
    min-width: 1.55rem;
    padding: 0.26rem 0.42rem;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .design-notes {
    height: auto;
    margin-bottom: 1.5rem;
  }

  .notes-body {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.5rem;
    gap: 0;
  }

  .notes-divider {
    width: 100%;
    height: 1px;
    margin: 1rem 0;
    align-self: auto;
  }

  .note-ss { padding-right: 0; padding-bottom: 1.2rem; }
  .note-aw { padding-left: 0; padding-top: 1.2rem; }

  .notes-label--right { display: none; }

  .notes-floor { padding-bottom: 1.4rem; }

  .hl-card {
    flex: 0 0 calc((100vw - var(--hl-pad) - 16px) / 1.45);
  }

  .hl-track--full .hl-card {
    flex: 0 0 calc((100vw - 16px) / 1.45);
  }

  .hl-card-fav,
  .hl-card-bag {
    opacity: 1;
    transform: translateY(0);
  }

  .hl-card-fav {
    width: 2rem;
    height: 2rem;
  }

  .hl-card-bag {
    width: 3rem;
    height: 3rem;
  }

  .hl-card-swatches {
    left: 0.52rem;
    bottom: 0.52rem;
    padding: 0.24rem;
    border-radius: 0.54rem;
    gap: 0.22rem;
  }

  .hl-swatch {
    width: 2.16rem;
    border-radius: 0.34rem;
  }

  .hl-swatch + .hl-swatch {
    margin-left: 0;
  }

  .hl-nav-btn {
    width: 2.65rem;
    height: 2.65rem;
  }

  .hl-prev {
    left: 0.2rem;
  }

  .hl-next {
    right: 0.2rem;
  }

  .hl-track-wrap::before,
  .hl-track-wrap::after {
    width: 56px;
  }

  .season-blocks {
    grid-template-columns: 1fr;
  }

  .season-block {
    min-height: clamp(18rem, 45vh, 28rem);
  }

  .member-cta-inner {
    flex-wrap: wrap;
    gap: 1.1rem clamp(1rem, 2.5vw, 1.75rem);
  }

  .member-cta-copy {
    flex: 1 1 60%;
  }

  .member-cta-actions {
    flex-basis: 100%;
  }

  /* ── Special Collection — Mobile ── */
  .sc-section {
    height: clamp(34rem, 96vh, 48rem);
    min-height: 34rem;
    --sc-content-offset: 0.8rem;
    --sc-gap: 10px;
    --sc-side: var(--page-gutter);
    --sc-card-w: clamp(265px, 78vw, 420px);
    --sc-left-slot: 0px;
    --sc-visual-w: 100%;
    --sc-dots-gap: 30px;
  }

  .sc-hero-visual {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: clamp(13.5rem, 43vh, 20rem);
    transform: none !important;
    transition: none !important;
  }

  .sc-hero-img {
    object-position: center 30%;
  }

  .sc-rail-shell {
    inset: clamp(12rem, 36vh, 17.2rem) 0 calc(var(--sc-content-offset) + var(--sc-dots-gap)) 0;
  }

  .sc-rail {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  .sc-hero-title {
    font-size: clamp(1.34rem, 5.2vw, 1.95rem);
    max-width: 12ch;
  }

  .sc-hero-desc {
    font-size: 0.74rem;
    line-height: 1.35;
    margin-top: 0.75rem;
  }

  .sc-intro-card {
    padding: 1rem 0.9rem 1.2rem;
  }

  .sc-card-title {
    font-size: clamp(1rem, 4.5vw, 1.35rem);
  }

  .sc-slider-btn {
    width: 2.35rem;
    height: 2.35rem;
  }

  .sc-slider-prev { left: 0.28rem; }
  .sc-slider-next { right: 0.28rem; }

  .sc-dots {
    bottom: 0.25rem;
    margin-top: 30px;
  }

  .cat-accordion {
    flex-direction: column;
    height: auto;
    gap: 1.5px;
  }

  .cat-panel {
    flex: none !important;
    height: 6rem;
    transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cat-panel.is-active {
    height: clamp(240px, 44vw, 380px);
    flex: none !important;
  }

  .cat-vert {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    font-size: 0.72rem;
  }

  .cat-panel.is-active .cat-meta { opacity: 1; }

  .cat-name {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  /* ── Quick Order — Bottom Sheet ── */
  .qo-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 94vh;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
    box-shadow: 0 -12px 52px rgba(0, 0, 0, 0.18), 0 -2px 8px rgba(0, 0, 0, 0.06);
  }

  .qo-drawer.is-open {
    transform: translateY(0);
  }

  .qo-drag-handle {
    display: flex;
    justify-content: center;
    padding: 0.55rem 0 0.15rem;
    cursor: grab;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
  }

  .qo-drag-bar {
    width: 2.8rem;
    height: 0.24rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
  }

  .qo-hero {
    height: clamp(24rem, calc(60vh + 4.5rem), 38rem);
  }

  .qo-hero-bar {
    padding: 0.85rem 1rem;
    background:
      linear-gradient(180deg, rgba(10, 16, 22, 0) 0%, rgba(10, 16, 22, 0.35) 40%, rgba(10, 16, 22, 0.68) 100%);
  }

  .qo-product-name {
    font-size: 0.92rem;
  }

  .qo-close--overlay {
    top: 0.6rem;
    right: 0.6rem;
    width: 2.3rem;
    height: 2.3rem;
  }

  .qo-hero-nav {
    display: none;
  }

  .qo-hero-dots {
    display: flex;
    flex-direction: row;
    top: auto;
    bottom: 4.2rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: 0.5rem;
  }

  .qo-hero-dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .qo-hero-dot.is-active {
    width: 1.35rem;
    height: 0.38rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.25);
  }

  .qo-hero-fav {
    width: 2rem;
    height: 2rem;
  }

  .qo-section {
    padding: 1.1rem 1.25rem;
  }

  .qo-footer {
    padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  .qo-add-btn {
    height: 3.1rem;

  }
}

/* ============================================
   Responsive - Small Mobile
   ============================================ */

@media (max-width: 560px) {
  /* Logo ölçüsü --brand-logo-width-mobile içindeki clamp ile küçük ekranlarda
     zaten daralıyor; ayrı bir küçük-mobil kuralına gerek yok. */

  .mobile-tabs a {
    font-size: 1.4rem;
  }

  .mobile-item-title {
    font-size: 1.5rem;
  }

  .mobile-rail-label {
    font-size: 0.55rem;
  }

  .hero-banner {
    min-height: clamp(26rem, 70dvh, 37rem);
    --hero-content-bottom-gap: 2.6rem;
  }

  .hero-split-content {
    padding: 1.1rem 0.95rem var(--hero-content-bottom-gap) 0.95rem;
    justify-content: center;
  }

  .hero-slide--video .hero-content {
    padding: calc(var(--hero-visual-h) + 1.1rem) 0 var(--hero-content-bottom-gap) 0;
    justify-content: center;
  }

  .hero-text--video {
    width: 100%;
    max-width: none;
    padding: 0 0.95rem;
  }

  .hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
  }

  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 0.72rem;
  }

  .hero-text--split h1,
  .hero-text--video h1 {
    font-size: clamp(1.25rem, 7.28vw, 1.82rem);
    line-height: 1.2;
  }

  .hero-text--split .hero-desc,
  .hero-text--video .hero-desc {
    display: none;
  }

  .hero-cta-group {
    margin-top: 0.86rem;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    gap: 0.4rem;
  }

  .hero-btn {
    width: auto;
    min-height: 2.08rem;
    font-size: 0.70rem;
    padding-inline: 0.72rem;
  }

  .hero-text--split .hero-products {
    margin-top: 0.72rem;
    gap: 0.3rem;
  }

  .hero-products-grid {
    gap: 0.3rem;
  }

  /* Kısa ekranlarda (SE/mini) kart görseli kademeli kısılır, içerik görseli yutmaz */
  .hero-pcard-media {
    aspect-ratio: 3 / 3.35;
    max-height: 16dvh;
  }

  .hero-pcard-body {
    padding: 0.24rem 0.24rem 0.28rem;
  }

  .hero-pcard-name {
    font-size: 0.42rem;
  }

  .hero-pcard-price {
    font-size: 0.46rem;
  }

  .hero-products-more {
    flex-basis: 1.9rem;
  }

  .hero-scroll-hint {
    display: none;
  }

  .hero-slider-ui {
    left: 0.95rem;
    bottom: 0.95rem;
  }

  .hero-slider-dots {
    gap: 0.28rem;
  }

  .hero-slider-dot {
    width: 0.85rem;
  }

  .hero-slider-dot.is-active {
    width: 1.7rem;
  }

  .hero-lang-globe {
    width: 11px;
    height: 11px;
    margin: 0 0.18rem 0 0.1rem;
  }

  .hero-lang-link {
    min-width: 1.4rem;
    padding: 0.22rem 0.36rem;
    font-size: 0.54rem;
  }

  .season-title {
    font-size: clamp(2.8rem, 14vw, 4.5rem);
  }

  .season-block {
    min-height: clamp(16rem, 40vh, 24rem);
  }

}

/* ============================================
   Popular Categories - Pill Strip
   ============================================ */

.popular-categories {
  width: calc(100% - (var(--page-gutter) * 2));
  margin: var(--sp-16) auto;
}

/* ── Görünürlük anahtarı: desktop pill şeridi / mobil kart vitrini ── */
.pc-desktop { display: block; }
.pc-mobile { display: none; }

@media (max-width: 980px) {
  .pc-desktop { display: none; }
  .pc-mobile { display: block; }
}

/* ── Desktop: orijinal pill şeridi ── */
@media (min-width: 981px) {
  .popular-categories {
    margin: 2rem auto;
  }
}

.pc-title {
  margin: 0 0 0.95rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--text);
}

.pc-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  flex-wrap: wrap;
}

.pc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.2rem 0.45rem 0.45rem;
  background: var(--white);
  border-radius: 100px;
  text-decoration: none;

  color: var(--text);

}

.pc-pill:hover {
  background: #eceff1;
  color: var(--text);

  transform: none;
  box-shadow: none;
}

.pc-pill-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  transition: border-color 300ms var(--ease-smooth), transform 300ms var(--ease-out);
}


.pc-pill-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-pill-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pc-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  flex-shrink: 0;
  margin: 0 0.25rem;
}


.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
}

.pc-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  isolation: isolate;
}

.pc-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.pc-card:hover .pc-card-img {
  transform: scale(1.04);
}

.pc-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 31, 25, 0) 45%, rgba(10, 31, 25, 0.68) 100%);
  transition: background 300ms var(--ease);
}

.pc-card-title {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  right: 2.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.2;
}

.pc-card-arrow {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: rgba(250, 250, 249, 0.18);
  color: #fff;
  transition: background 250ms var(--ease), transform 250ms var(--ease);
}

.pc-card:hover .pc-card-arrow {
  background: var(--accent-warm);
}

@media (max-width: 640px) {
  .pc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .pc-card-title {
    font-size: 0.92rem;
    left: 0.8rem;
    bottom: 0.75rem;
  }
}

.promo-strip {
  width: 100%;
  height: 50px;
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: #d9dee2;
  color: #1a1f24;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.08vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

.promo-strip-text {
  display: inline-flex;
  align-items: center;
}

.promo-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.promo-strip-cta svg {
  display: block;
}

@media (max-width: 640px) {
  .member-cta-inner {
    gap: 0.9rem 1rem;
    padding: 1.5rem var(--page-gutter) 1.6rem;
  }

  .member-cta-logo img {
    width: 60px;
    height: 60px;
  }

  .member-cta-copy {
    flex: 1 1 0;
  }

  .member-cta-title {
    font-size: clamp(1.02rem, 5vw, 1.35rem);
  }

  .member-cta-btn {
    flex: 1 1 44%;
    min-width: 0;
    height: 2.7rem;
  }

  .promo-strip {
    min-height: 50px;
    height: auto;
    padding: 0.45rem 0.9rem;
    gap: 0.48rem;
    font-size: 0.8rem;
  }

}

/* ============================================
   Technology Banner
   ============================================ */

.tech-banner {
  position: relative;
  width: calc(100% - (var(--page-gutter) * 2));
  margin: 10px auto 0;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.tech-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tech-banner-video,
.tech-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .tech-banner-video {
    display: none;
  }
}

.tech-banner-overlay {
  position: absolute;
  inset: 0;
  /* Karartma minimize: görselin üst ve orta bölümü açık kalır, yalnızca
     metnin oturduğu alt şeritte hafif bir kararma uygulanır. */
  background: linear-gradient(
    180deg,
    rgba(12, 20, 14, 0) 0%,
    rgba(12, 20, 14, 0.04) 38%,
    rgba(12, 20, 14, 0.26) 70%,
    rgba(12, 20, 14, 0.52) 100%
  );
}

.tech-banner-content {
  position: relative;
  z-index: 1;
  padding: clamp(1.1rem, 2.8vh, 2rem) clamp(1.05rem, 2.4vw, 2rem);
  max-width: min(560px, calc(100% - clamp(2rem, 8vw, 8rem)));
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.75rem;
  margin-left: auto;
  margin-right: clamp(0.8rem, 2.2vw, 2rem);
  margin-bottom: clamp(0.95rem, 4.4vh, 2.6rem);
  /* Karartma minimize edildiği için okunurluk yumuşak gölge ile korunur */
  text-shadow: 0 1px 14px rgba(8, 14, 10, 0.55);
}

.tech-banner--left {
  justify-content: flex-start;
}

.tech-banner--left .tech-banner-content {
  margin-left: clamp(0.8rem, 2.2vw, 2rem);
  margin-right: auto;
}

/* Alttaki yatay banner: karartma korunur, eski haline göre bir tık daha açık */
.tech-banner--left .tech-banner-overlay {
  background: linear-gradient(
    105deg,
    rgba(15, 26, 13, 0.72) 0%,
    rgba(15, 26, 13, 0.5) 50%,
    rgba(15, 26, 13, 0.18) 100%
  );
}

.tech-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.3rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tech-banner-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.96rem 0.34rem 0.58rem;
  background: #0a0a0a;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: #fff;
  line-height: 1;
}

.tech-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-transform: none;
  margin: 0;
}

.tech-banner-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  text-transform: none;
  color: #fff;
  margin: 0;
  max-width: 440px;
}

.tech-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 200ms ease;
}

.tech-banner-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 640px) {
  .tech-banner {
    min-height: 300px;
  }

  .tech-banner-content {
    padding: 0.95rem 0.95rem 1.05rem;
    max-width: min(86vw, 420px);
    margin-right: max(0.9rem, var(--page-gutter));
    margin-bottom: 0.9rem;
  }

  .tech-banner--left .tech-banner-content {
    margin-left: max(0.9rem, var(--page-gutter));
    margin-right: auto;
  }

  .tech-banner-desc {
    font-size: 0.8rem;
  }

  /* Görsel kırpılırken metnin bulunduğu taraf görünür kalsın:
     metin sağda (varsayılan) → görselin sağı, metin solda → görselin solu.
     Görsel ekran oranıyla aynıysa cover kırpmaz, tamamı görünür. */
  .tech-banner .tech-banner-img,
  .tech-banner .tech-banner-video {
    object-position: right center;
  }

  .tech-banner--left .tech-banner-img,
  .tech-banner--left .tech-banner-video {
    object-position: left center;
  }
}

/* ============================================
   Site Footer — Light Gray Theme
   ============================================ */

.site-footer {
  background: #f4f4f2;
  color: #1a1a1a;
  font-family: var(--font-display);
}

/* ── Newsletter ── */

.ft-newsletter {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ft-nl-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vh, 2.5rem) var(--page-gutter);
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.ft-nl-text {
  flex-shrink: 0;
}

.ft-nl-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1e2b3c;
  margin-bottom: 0.4rem;
}

.ft-nl-heading {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.ft-nl-form {
  flex: 1;
  min-width: 0;
  max-width: 480px;
}

.ft-nl-field {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 280ms var(--ease-smooth),
              box-shadow 280ms var(--ease-smooth);
}

.ft-nl-field:focus-within {
  border-color: rgba(30, 43, 60, 0.35);
  box-shadow: 0 0 0 3px rgba(30, 43, 60, 0.1);
}

.ft-nl-input {
  flex: 1;
  min-width: 0;
  padding: 0.68rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border: none;
  color: #1a1a1a;
  font-family: var(--font-display);
  font-size: 0.9rem;
  outline: none;
}

.ft-nl-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.ft-nl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 1.25rem;
  background: #1e2b3c;
  color: #fff;
  border: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 260ms var(--ease-smooth);
}

.ft-nl-btn:hover {
  background: #2c3f58;
}

.ft-nl-note {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.01em;
}

.ft-nl-note a {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 220ms;
}

.ft-nl-note a:hover {
  color: rgba(0, 0, 0, 0.8);
}

/* ── Body grid ── */

.ft-body {
  padding: clamp(3rem, 6vh, 5rem) 0 clamp(2.5rem, 5vh, 4rem);
}

.ft-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 1.3fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

/* ── Nav columns ── */

.ft-col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0 0 1.2rem;
  cursor: default;
  pointer-events: none;
  text-align: left;
}

.ft-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.ft-chevron {
  display: none;
  color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  transition: transform 320ms var(--ease-out);
}

.ft-col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

/* Ana menü dropdown (mega-link-list) hover diliyle birebir:
   sabit konum, soldan açılan ince alt çizgi */
.ft-col-links a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.93rem;
  color: rgba(0, 0, 0, 0.52);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
  position: relative;
}

.ft-col-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}

.ft-col-links a:hover {
  color: #1a1a1a;
}

.ft-col-links a:hover::after {
  transform: scaleX(1);
}

/* Sale link */

.ft-link--hot {
  color: var(--accent-warm) !important;
}

.ft-link--hot:hover {
  color: #a04d20 !important;
}

.ft-badge-sale {
  display: inline-block;
  padding: 0.08rem 0.38rem;
  background: rgba(196, 98, 42, 0.1);
  border: 1px solid rgba(196, 98, 42, 0.3);
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-warm);
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── Bottom bar ── */

.ft-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ft-bottom-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1.1rem, 2.2vh, 1.5rem) var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ft-copy {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.02em;
  margin: 0;
}

.ft-legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.ft-legal a {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.38);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 220ms var(--ease-smooth);
}

.ft-legal a:hover {
  color: #1a1a1a;
}

.ft-locale {
  position: relative;
  display: inline-flex;
}

.ft-locale-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.82rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius);
  color: rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 240ms var(--ease-smooth),
              border-color 240ms var(--ease-smooth),
              color 240ms var(--ease-smooth);
}

.ft-locale--switcher .ft-locale-btn {
  cursor: pointer;
}

.ft-locale-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1a1a1a;
}

.ft-locale-chev {
  transition: transform 220ms var(--ease-smooth);
  opacity: 0.65;
}

.ft-locale.is-open .ft-locale-chev {
  transform: rotate(180deg);
}

.ft-locale-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  margin: 0;
  padding: 0.32rem;
  list-style: none;
  min-width: 12.5rem;
  background: #ffffff;
  border: 1px solid var(--line, #d1d6c9);
  border-radius: var(--radius, 0.5rem);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 40;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-smooth), transform 220ms var(--ease-out);
}

.ft-locale.is-open .ft-locale-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ft-locale-menu[hidden] { display: block; }

.ft-locale-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: calc(var(--radius, 0.5rem) - 2px);
  text-decoration: none;
  color: #1a1a1a;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: background-color 160ms var(--ease-smooth);
}

.ft-locale-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ft-locale-item.is-active {
  background: var(--accent-soft, #dfeee2);
  color: var(--accent, #1a5c36);
}

.ft-locale-item-code {
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ft-locale-item-name {
  font-weight: 500;
  color: inherit;
}

.ft-locale.is-open ~ * .ft-locale-item-cur,
.ft-locale-item-cur {
  font-size: 0.7rem;
  color: var(--muted, #555);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ft-locale-item.is-active .ft-locale-item-cur {
  color: var(--accent, #1a5c36);
  opacity: 0.85;
}

/* ── Deneyim Merkezi (4. blok) ── */

.ft-exp {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tek parça CTA: yüksekliği tamamen görsel alanı belirler (dikey padding yok) */
.ft-exp-cta {
  --ft-exp-visual: 78px;
  display: flex;
  align-items: stretch;
  height: var(--ft-exp-visual);
  padding: 0 1.1rem 0 0;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 260ms var(--ease-smooth),
              box-shadow 260ms var(--ease-smooth);
}

.ft-exp-cta:hover {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}

/* Siyah zeminli görsel alanı — kenarlara tam oturur */
.ft-exp-visual {
  display: grid;
  place-items: center;
  width: var(--ft-exp-visual);
  flex-shrink: 0;
  background: #0d0d0d;
}

.ft-exp-mark {
  display: block;
  width: 50px;
  height: 50px;
  padding: 3px;
  background: #fff;
  border-radius: 50%;
  object-fit: contain;
  transition: transform 320ms var(--ease-out);
}

.ft-exp-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
}

.ft-exp-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1e2b3c;
}

.ft-exp-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 240ms var(--ease-smooth);
}

.ft-exp-arrow {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.3);
  transition: transform 240ms var(--ease-out),
              color 240ms var(--ease-smooth);
}

.ft-exp-cta:hover .ft-exp-arrow {
  color: #1e2b3c;
}

/* Sosyal satır — kutu değil, tek hizada açık şerit */
.ft-exp-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ft-exp-social-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
  white-space: nowrap;
  flex-shrink: 0;
}

.ft-exp-social-rule {
  flex: 1;
  height: 1px;
  min-width: 0.5rem;
  background: rgba(0, 0, 0, 0.1);
}

.ft-exp-social-icons {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.ft-soc {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: border-color 240ms var(--ease-smooth),
              color 240ms var(--ease-smooth),
              background 240ms var(--ease-smooth);
}

.ft-soc:hover {
  border-color: #0d0d0d;
  color: #fff;
  background: #0d0d0d;
}

/* ══════════════════════════════════════════
   Footer — Tablet (641–980px)
   ══════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 980px) {
  .ft-inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
  }

  .ft-nl-heading {
    white-space: normal;
  }

  .ft-col--exp {
    grid-column: 1 / -1;
  }

  .ft-exp {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }

  .ft-exp-cta {
    flex: 1;
    min-width: 0;
  }

  .ft-exp-social {
    flex-shrink: 0;
  }

  .ft-exp-social-rule {
    display: none;
  }
}

/* ══════════════════════════════════════════
   Footer — Mobile (≤ 640px)
   ══════════════════════════════════════════ */

@media (max-width: 640px) {
  .ft-nl-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    padding: 1.6rem var(--page-gutter);
  }

  .ft-nl-heading {
    white-space: normal;
    font-size: 0.95rem;
  }

  .ft-body {
    padding: 2rem 0 1rem;
  }

  .ft-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Nav columns — accordion */
  .ft-col--nav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  .ft-col-toggle {
    cursor: pointer;
    pointer-events: auto;
    padding: 1rem var(--page-gutter);
  }

  .ft-chevron {
    display: block;
  }

  .ft-col--nav.is-open .ft-chevron {
    transform: rotate(180deg);
  }

  .ft-col-links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 380ms var(--ease-out),
                opacity 280ms var(--ease-smooth);
    padding: 0 var(--page-gutter);
  }

  .ft-col--nav.is-open .ft-col-links {
    opacity: 1;
    padding: 0 var(--page-gutter) 1.1rem;
  }

  .ft-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.25rem var(--page-gutter);
  }

  .ft-legal {
    margin-left: 0;
    gap: 0.9rem 1.2rem;
  }

  .ft-col--exp {
    margin: 1.5rem var(--page-gutter) 0.75rem;
  }

  .ft-exp-cta {
    --ft-exp-visual: 70px;
  }

  .ft-exp-title {
    font-size: 0.86rem;
  }
}

/* ══════════════════════════════════════════
   Mobile Bottom Navigation Bar
   ══════════════════════════════════════════ */

/* Default: hidden on desktop */
.mob-bar {
  display: none;
}

/* Modal: hidden on desktop */
.mob-modal {
  display: none;
}

/* Icon state helpers */
.mob-icon-open,
.mob-icon-close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mob-icon-close {
  display: none;
}

@media (max-width: 980px) {

  /* ─── Strip header of items now living in the bottom bar ─── */
  .menu-toggle,
  .nav-actions,
  .mobile-menu {
    display: none !important;
  }

  /* ─── Mobil üst bar: 56px, hero üzerinde şeffaf, scroll'da krem zemin ─── */
  .main-nav {
    height: 3.5rem;
    padding: 0 max(var(--page-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--page-gutter), env(safe-area-inset-left, 0px));
    background: rgba(250, 250, 249, var(--header-bg));
    border-bottom: 1px solid rgba(16, 32, 27, var(--header-border));
  }

  .site-header {
    transition: transform 300ms var(--ease-out);
  }

  .site-header.nav-hidden {
    transform: translateY(-100%);
  }

  /* ─── Logo: solda, rengi header mürekkebini takip eder ─── */
  .brand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .brand-logo {
    width: var(--brand-logo-width-mobile);
  }

  .brand-logo::before {
    transition: none;
  }

  /* Push page content up so nothing hides behind the bar */
  body {
    padding-bottom: calc(var(--mob-bar-content-height, 64px) + env(safe-area-inset-bottom, 0px));
  }

  /* ─── Bar container ───
     Tek tip uygulama çubuğu: her sayfada (ana sayfa dahil) ilk andan itibaren
     açık zemin + koyu ikon. Kaydırmaya bağlı görünüm değişimi YOK; .is-scrolled
     yalnızca liste/ürün/sepet sayfalarında İÇERİK takasını (sırala-filtrele,
     sepete ekle) sürer, zemin/ikon rengini etkilemez.
     Alt güvenli alan: viewport-fit=cover ile env() gerçek değer alır; ikonlar
     iOS Safari'nin daralmış alt çubuğunun dokunma bölgesinin üstünde kalır. */
  .mob-bar {
    display: flex;
    position: fixed;
    /* --vv-bottom-gap: Chrome iOS'ta araç çubuğu gizlenince layout viewport
       güncellenmez ve bottom:0 çubuk havada kalır; script.js ölçtüğü farkı
       bu değişkene yazar (Safari'de 0). Bkz. "Görünür viewport hizalama". */
    bottom: calc(-1 * var(--vv-bottom-gap, 0px));
    left: 0;
    right: 0;
    z-index: 90;
    height: calc(var(--mob-bar-content-height, 64px) + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(16, 32, 27, 0.08);
    box-shadow: 0 -4px 18px rgba(16, 32, 27, 0.05);
    touch-action: manipulation;
  }

  .mob-bar > * {
    min-height: var(--mob-bar-content-height, 64px);
  }

  /* Default button row wrapper (used inside .mob-bar) */
  .pl-mobbar-default {
    display: flex;
    flex: 1;
    width: 100%;
    align-items: stretch;
    min-height: var(--mob-bar-content-height, 64px);
  }

  /* Eski gradyan/beyaz katmanlar kaldırıldı: zemin çubuğun kendisinde */
  .mob-bar::before,
  .mob-bar::after {
    display: none;
  }

  /* ─── Each button / link ─── */
  .mob-bar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    background: transparent;
    border: none;
    color: #111;
    cursor: pointer;
    text-decoration: none;
    min-height: var(--mob-bar-content-height, 64px);
    -webkit-tap-highlight-color: transparent;
    transition: color 200ms var(--ease-smooth);
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    touch-action: manipulation;
  }

  .mob-bar-btn:active,
  .mob-bar-btn.is-active {
    color: #000;
  }

  /* Accent dot indicator at top of active item */
  .mob-bar-btn.is-active::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    z-index: 1;
  }

  /* ─── Icon wrapper: 24px, basınca hafif küçülür (uygulama hissi) ─── */
  .mob-bar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 160ms var(--ease-out);
  }
  .mob-bar-btn:active .mob-bar-icon {
    transform: scale(0.9);
  }
  .mob-bar-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }
  .mob-bar-icon i {
    font-size: 1.5rem;
    line-height: 1;
  }

  /* ─── Cart badge ─── */
  .mob-bar-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid transparent;
    transition: transform 240ms var(--ease-out);
  }

  .mob-bar-badge[data-count="0"] {
    display: none;
  }

  /* ─── Menu icon: hamburger ↔ close ─── */
  .mob-icon-open  { display: flex; }
  .mob-icon-close { display: none; }

  #mob-menu-btn.is-active .mob-icon-open  { display: none; }
  #mob-menu-btn.is-active .mob-icon-close { display: flex; }

  /* ══════════════════════════════════════════
     Mobile Full-Page Modals
     ══════════════════════════════════════════ */

  .mob-modal {
    display: block;
    position: fixed;
    inset: 0;
    bottom: calc(-1 * var(--vv-bottom-gap, 0px)); /* Chrome iOS araç çubuğu boşluğu */
    z-index: 200;
    visibility: hidden;
    transition: visibility 0s linear 400ms;
  }

  .mob-modal.is-open {
    visibility: visible;
    transition-delay: 0s;
  }

  /* Semi-transparent overlay (tap to close) */
  .mob-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 400ms var(--ease-smooth);
    cursor: default;
  }

  .mob-modal.is-open .mob-modal-overlay {
    background: rgba(0, 0, 0, 0.38);
  }

  /* Sliding panel */
  .mob-modal-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 400ms var(--ease-out);
    overflow: hidden;
    will-change: transform;
  }

  .mob-modal.is-open .mob-modal-panel {
    transform: translateX(0);
  }

  /* ─── Modal header (dark summit green) ─── */
  .mob-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--page-gutter);
    min-height: 64px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--summit);
    flex-shrink: 0;
  }

  /* Logo in menu modal header */
  .mob-modal-logo {
    display: block;
    width: var(--brand-logo-width-mobile);
    /* Kutu oranı header'daki logoyla aynı (--brand-logo-ratio = 10/3) */
    height: calc(var(--brand-logo-width-mobile) / var(--brand-logo-ratio-num));
    position: relative;
  }

  .mob-modal-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    -webkit-mask-image: var(--site-logo-url, url("../../images/logo-desktop-center.webp"));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: contain;
    mask-image: var(--site-logo-url, url("../../images/logo-desktop-center.webp"));
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: contain;
  }

  /* Title text in other modal headers */
  .mob-modal-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
  }

  /* Close button (X) */
  .mob-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 180ms;
  }

  .mob-modal-close:active {
    background: rgba(255, 255, 255, 0.22);
  }

  /* ─── Modal scrollable body ─── */
  .mob-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.75rem var(--page-gutter) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  }

  /* ─── Stack-nav body: no padding, overflow hidden (panes handle scroll) ─── */
  .mob-modal-body--stack {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .mob-modal-body--stack .mobile-stack {
    flex: 1;
    min-height: 0;
  }

  /* ─── Modal sticky footer ─── */
  .mob-modal-footer {
    display: flex;
    gap: 1.75rem;
    padding: 0.9rem var(--page-gutter) calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }

  .mob-modal-footer-link {
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 180ms;
  }

  .mob-modal-footer-link:active {
    color: var(--accent);
  }

  /* ─── Modal dil seçici ─── */
  .mob-modal-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem var(--page-gutter);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }

  .mob-modal-lang-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mob-modal-lang-pills {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.22rem;
    background: var(--accent-soft, #dfeee2);
    border-radius: 999px;
  }

  .mob-modal-lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.4rem 0.78rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 200ms, color 200ms;
  }

  .mob-modal-lang-pill.is-active {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }

  /* Dil bloğu en altta, mob-modal-footer'ın üstünde — mevcut border-top onu zaten ayırır,
     bu nedenle footer'ın üst kenarını sade tutmak için border iptal edilir */
  .mob-modal-lang + .mob-modal-footer {
    border-top: 0;
    padding-top: 0.6rem;
  }

  /* ─── Section label ─── */
  .mob-menu-section {
    margin-bottom: 2rem;
  }

  .mob-menu-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.875rem;
  }

  /* ─── List nav rows ─── */
  .mob-menu-list {
    display: flex;
    flex-direction: column;
  }

  .mob-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms;
  }

  .mob-menu-item:first-child {
    border-top: 1px solid var(--line);
  }

  .mob-menu-item:active {
    color: var(--accent);
  }

  .mob-menu-item svg {
    color: var(--line-strong);
    flex-shrink: 0;
  }

  /* ─── Chip row (flat tags) ─── */
  .mob-menu-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mob-menu-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 1rem;
    border-radius: 100px;
    border: 1.5px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent;
    transition: background 180ms, border-color 180ms, color 180ms;
  }

  .mob-menu-chip:active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* ─── Search input ─── */
  .mob-search-field-wrap {
    position: relative;
    margin-bottom: 2rem;
  }

  .mob-search-field-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
  }

  .mob-search-field {
    width: 100%;
    height: 52px;
    padding: 0 3rem 0 3.1rem;
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 100px;
    font-size: 1rem;
    color: var(--text);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 200ms;
  }

  .mob-search-field:focus {
    border-color: var(--accent);
    background: var(--bg-soft);
  }

  .mob-search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .mob-search-form { margin: 0; }

  .mob-search-clear {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #555;
    font-size: 1.05rem;
    padding: 0;
    cursor: pointer;
  }

  .mob-search-clear[hidden] { display: none; }

  .mob-search-section {
    margin-bottom: 2rem;
  }

  .mob-search-section-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
  }

  .mob-search-text-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: auto;
  }

  .mob-search-results-live {
    margin-bottom: 1.4rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel);
    overflow: hidden;
  }

  .mob-search-results-live[hidden] { display: none; }

  .mob-search-results-live .search-result-item {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.8rem 0.95rem;
  }

  .mob-search-results-live .search-result-img {
    width: 70px;
    height: 86px;
  }

  .mob-search-results-live .search-see-all a {
    width: 100%;
    min-width: 0;
  }

  /* Search chips */
  .mob-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mob-search-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 0.875rem;
    border-radius: 100px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: background 180ms, color 180ms, border-color 180ms;
  }

  .mob-search-chip:active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* ─── Account: hero row ─── */
  .mob-account-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0 2rem;
  }

  .mob-account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--panel);
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0;
  }

  .mob-account-greeting {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
  }

  .mob-account-sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
  }

  .mob-account-ctas {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }

  /* ─── Shared CTA buttons — mirror desktop .action-drawer-btn style ─── */
  .mob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: 2px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid #111;
    text-decoration: none;
    cursor: pointer;
    flex: 1;
    -webkit-tap-highlight-color: transparent;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }

  .mob-btn--primary {
    background: #111;
    border-color: #111;
    color: #fff;
  }

  .mob-btn--primary:active {
    background: #232323;
    border-color: #232323;
  }

  .mob-btn--outline {
    background: rgba(255, 255, 255, 0.72);
    border-color: #111;
    color: #111;
  }

  .mob-btn--outline:active {
    background: #ece9e5;
  }

  /* ─── Cart empty state ─── */
  .mob-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 0 2rem;
    text-align: center;
  }

  .mob-cart-empty-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--panel);
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    margin-bottom: 1.5rem;
  }

  .mob-cart-empty-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
  }

  .mob-cart-empty-sub {
    margin: 0 0 2rem;
    font-size: 0.875rem;
    color: var(--muted);
  }

  .mob-cart-empty .mob-btn {
    flex: none;
    padding: 0 2.5rem;
  }

  /* ─── Mobile cart layout ─── */
  .mob-cart-panel {
    display: flex;
    flex-direction: column;
  }

  .mob-cart-kicker {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: none;
  }

  .mob-cart-body {
    padding: 0;
  }

  .mob-cart-progress {
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid var(--line);
    background: #faf9f6;
  }

  .mob-cart-progress-text {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.4;
  }

  .mob-cart-progress-text strong { color: var(--text); font-weight: 700; }

  .mob-cart-progress-bar {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
  }

  .mob-cart-progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent, #c2562a), var(--accent-warm, #d97048));
    border-radius: 999px;
    transition: width 360ms var(--ease-smooth, cubic-bezier(0.22,1,0.36,1));
  }

  .mob-cart-progress-amount {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  .mob-cart-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
  }

  .mob-cart-list .action-cart-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--line);
    align-items: stretch;
  }

  .mob-cart-list .action-cart-item:last-child { border-bottom: 0; }

  .mob-cart-list .action-cart-media {
    width: 88px;
    height: 110px;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #f0f0ee;
    display: block;
  }

  .mob-cart-list .action-cart-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mob-cart-list .action-cart-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
  }

  .mob-cart-list .action-cart-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .mob-cart-list .action-cart-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mob-cart-list .action-cart-remove {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
  }

  .mob-cart-list .action-cart-remove:active {
    background: #f6efe9;
    color: var(--accent-warm, #d97048);
    border-color: var(--accent-warm, #d97048);
  }

  .mob-cart-list .action-cart-remove i { font-size: 0.9rem; line-height: 1; }

  .mob-cart-list .action-cart-meta {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .mob-cart-list .action-cart-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.55rem;
  }

  .mob-cart-list .action-cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    height: 1.85rem;
  }

  .mob-cart-list .action-cart-qty-btn {
    width: 1.85rem;
    height: 1.85rem;
    background: transparent;
    border: 0;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-cart-list .action-cart-qty-btn:active { background: #f1ede8; }

  .mob-cart-list .action-cart-qty-val {
    min-width: 1.4rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
  }

  .mob-cart-list .action-cart-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
  }

  /* ─── Mobile cart sticky footer ─── */
  .mob-cart-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    background: #fff;
    padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  .mob-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
  }

  .mob-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.86rem;
    color: var(--text);
  }

  .mob-cart-summary-row strong { font-weight: 700; }
  .mob-cart-summary-row--muted { color: var(--muted); }
  .mob-cart-summary-row--muted strong { font-weight: 500; color: var(--muted); }

  .mob-cart-cta {
    display: flex;
    gap: 0.6rem;
  }

  .mob-cart-cta .mob-btn { flex: 1; }
  .mob-btn--secondary {
    background: transparent;
    border-color: #111;
    color: #111;
  }
  .mob-btn--secondary:active { background: #f1ede8; }
}

/* ============================================
   Lookbook – Shop The Look (Family)
   Full-width premium interactive lookbook
   ============================================ */

.lookbook {
  position: relative;
  width: calc(100% - (var(--page-gutter) * 2));
  margin: 2.5rem auto;
  height: clamp(520px, 80vh, 800px);
  overflow: hidden;
  border-radius: var(--radius);
}

/* ── Hero image (full-bleed) ── */

.lookbook-hero {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 50%;
}

/* ── Subtle depth gradient at bottom ── */

.lookbook-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 95% at 0% 100%, rgba(10, 15, 12, 0.62) 0%, rgba(10, 15, 12, 0.28) 36%, transparent 64%),
    radial-gradient(85% 70% at 100% 0%, rgba(10, 15, 12, 0.42) 0%, rgba(10, 15, 12, 0.16) 40%, transparent 62%);
  z-index: 1;
  pointer-events: none;
}

/* ── Info overlay (sol altta editoryal tipografi — hero/tech-banner diliyle hizalı) ── */

.lookbook-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  max-width: min(34rem, 82%);
  padding: 0 clamp(1.5rem, 3.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.6rem);
  transition: opacity 0.4s var(--ease-out);
}

.lookbook.has-active-dot .lookbook-overlay {
  opacity: 0.35;
  pointer-events: none;
}

.lookbook-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.8rem;
  text-shadow: 0 1px 10px rgba(8, 14, 10, 0.4);
}

.lookbook-label::before {
  content: '';
  width: 1.9rem;
  height: 1px;
  background: var(--accent-warm);
  flex: none;
}

.lookbook-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.9rem;
  text-shadow: 0 1px 18px rgba(8, 14, 10, 0.45);
}

.lookbook-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 10px rgba(8, 14, 10, 0.4);
}

.lookbook-sub i {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Hotspot Dots ── */

.lookbook-dot {
  position: absolute;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 6;
  transform: translate(-50%, -50%);
  visibility: hidden; /* shown by JS after image-aware positioning */
}

.lookbook-dot.is-placed {
  visibility: visible;
}

.lookbook-dot-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.95);
  border: 2.5px solid rgba(34,34,34,0.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.lookbook-dot:hover .lookbook-dot-fill,
.lookbook-dot.is-active .lookbook-dot-fill {
  background: var(--text);
  border-color: var(--text);
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 5px rgba(17,17,17,0.08), 0 4px 16px rgba(0,0,0,0.22);
}

.lookbook-dot-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.25);
  transform: translate(-50%, -50%);
  animation: lbRing 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0;
}

@keyframes lbRing {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  25%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.lookbook-dot.is-active .lookbook-dot-ring {
  animation: none;
  opacity: 0;
}

/* stagger ring delays */
.lookbook-dot[data-dot="dad-shorts"] .lookbook-dot-ring  { animation-delay: 0.45s; }
.lookbook-dot[data-dot="mom-hat"] .lookbook-dot-ring     { animation-delay: 0.9s; }
.lookbook-dot[data-dot="mom-tshirt"] .lookbook-dot-ring  { animation-delay: 1.35s; }
.lookbook-dot[data-dot="child-hat"] .lookbook-dot-ring   { animation-delay: 1.8s; }
.lookbook-dot[data-dot="child-suit"] .lookbook-dot-ring  { animation-delay: 2.25s; }

/* ── Floating Product Card (editoryal: keskin köşe, hairline detay) ── */

.lookbook-card {
  position: absolute;
  z-index: 10;
  width: 336px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.lookbook-card.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Editoryal kart — tümü tıklanabilir; görsel + künye yatay */
.lookbook-card-inner {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.lookbook-card-thumb {
  width: 118px;
  flex: none;
  align-self: stretch;
  overflow: hidden;
  background: var(--bg);
}

.lookbook-card-thumb img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.lookbook-card:hover .lookbook-card-thumb img {
  transform: scale(1.04);
}

.lookbook-card-body {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.05rem 0.95rem;
  display: flex;
  flex-direction: column;
}

/* Eyebrow dili: turuncu tik + aralıklı büyük harf */
.lookbook-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.42rem;
}

.lookbook-card-tag::before {
  content: '';
  width: 0.85rem;
  height: 1px;
  background: var(--accent-warm);
  flex: none;
}

.lookbook-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gerçek ürün özellikleri — sade metin çipleri, ikon yok */
.lookbook-card-feats {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.lookbook-card-pill {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.lookbook-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.lookbook-card-price {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* CTA: editoryal alt çizgi dili — buton değil */
.lookbook-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--text);
  transition: color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
}

.lookbook-card:hover .lookbook-card-cta {
  color: var(--accent-warm);
  border-color: var(--accent-warm);
}

.lookbook-card-cta i {
  font-size: 0.78rem;
  transition: transform 0.3s var(--ease-out);
}

.lookbook-card:hover .lookbook-card-cta i {
  transform: translateX(3px);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .lookbook {
    height: clamp(440px, 72vh, 680px);
  }

  .lookbook-card {
    width: 320px;
  }
}

@media (max-width: 768px) {
  .lookbook {
    height: clamp(400px, 75vh, 640px);
  }

  .lookbook-hero {
    /* Dar ekranda kırpma yatay eksene döner; modeller görselin sol yarısında */
    object-position: 30% 50%;
  }

  .lookbook-card {
    width: 300px;
  }

  .lookbook-card-thumb {
    width: 108px;
  }

  .lookbook-card-body {
    padding: 0.9rem 0.95rem 0.85rem;
  }
}

@media (max-width: 640px) {
  .lookbook {
    width: 100%;
    border-radius: 0;
    margin: 1.5rem auto;
    height: 80vh;
  }

  .lookbook-hero {
    /* Telefonda dikey konteyner: modeller görselin sol yarısında */
    object-position: 30% 50%;
  }

  .lookbook-overlay {
    max-width: 94%;
    padding: 0 1.25rem 1.4rem;
  }

  .lookbook-heading {
    font-size: 1.5rem;
  }

  .lookbook-dot {
    width: 34px;
    height: 34px;
  }

  .lookbook-dot-fill {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }

  .lookbook-dot-ring {
    width: 34px;
    height: 34px;
  }

  /* Mobile: card slides up from bottom */
  .lookbook-card {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    top: auto;
    width: auto;
    transform: translateY(100%);
  }

  .lookbook-card.is-visible {
    transform: translateY(0);
  }
}

/* MooseNew Migration Overrides */
.lookbook-grid-wrap {
  margin: 0;
  padding: 0;
}

.lookbook-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.lookbook-grid--split {
  grid-template-columns: 1fr 1fr;
}

.lookbook-grid .lookbook {
  margin: 0;
  border-radius: 0;
}

/* ============================================
   Lookbook — Bölüm Başlığı (dergi sırtı dikey etiket)
   Desktop only · ust_baslik sağ üst köşede, sol alttaki eyebrow
   diliyle çapraz simetri kuran ince editoryal tipografi
   ============================================ */
.lookbook-vlabel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.3rem, 2.4vw, 2.2rem);
  pointer-events: none;
}

.lookbook-vlabel-text {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(8, 14, 10, 0.4);
}

/* Sol alttaki eyebrow çizgisinin dikey karşılığı — turuncu aksan */
.lookbook-vlabel-text::before {
  content: '';
  width: 1px;
  height: 1.9rem;
  background: var(--accent-warm);
  flex: none;
}

/* Mobil & tabletde dikey metin gizlenir */
@media (max-width: 980px) {
  .lookbook-vlabel { display: none; }
}


.qo-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qo-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.14);
  flex: 0 0 auto;
}

.qo-color-label {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.01em;
}

@media (max-width: 980px) {
  .lookbook-grid--split {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Mega Dropdown — Yeni Yapı (mega-left, bloklar, feature-chip)
   ============================================ */

/* Sol panel — ikonsuz, sadece başlık + hızlı linkler */
.mega-left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.8rem 1.4rem;
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.mega-left-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 600;
}

.mega-left-tags {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.35rem;
}

.mega-left-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.42rem 0;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.mega-left-tag:hover { color: var(--text); }

.mega-left-tag.hot {
  background: transparent;
  color: var(--accent-warm);
  font-weight: 600;
  position: relative;
  padding-left: 0.85rem;
}

.mega-left-tag.hot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
}

.mega-left-tag.hot:hover { color: var(--text); }

/* Blok grid içi */
.mega-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 0.75rem;
  align-items: flex-start;
}

.mega-list-block,
.mega-product-block {
  flex: 1 1 140px;
  min-width: 120px;
}

.mega-block-title {
  margin: 0 0 0.8rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.mega-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.mega-link-list li a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-block;
  position: relative;
  padding-bottom: 0.1rem;
  transition: color 180ms ease;
}

.mega-link-list li a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}

.mega-link-list li a:hover { color: var(--text); }
.mega-link-list li a:hover::after { transform: scaleX(1); }

/* Ürün kartları track */
.mega-product-block { flex: 0 0 auto; }

.mega-products-track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.2rem 0 0.55rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
}

.mega-products-track::-webkit-scrollbar { height: 3px; }
.mega-products-track::-webkit-scrollbar-track { background: transparent; }
.mega-products-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 2px; }

.mega-product-card {
  flex: 0 0 175px;
  max-width: 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  transition: transform 200ms var(--ease-out);
}


.mega-product-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #f0f0ee;
}

.mega-discount-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sale);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.28rem 0.42rem;
  border-radius: 0;
  pointer-events: none;
}

.mega-product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 380ms var(--ease-out);
}

.mega-product-card:hover .mega-product-media img { transform: scale(1.04); }

.mega-product-info { padding: 0 0.1rem; }

.mega-product-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.mega-product-price {
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.mega-product-price.has-discount .price-old {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
}

.mega-product-price.has-discount .price-new { color: var(--accent-warm); }

/* Özellik şeridi — yatay kaydırmalı kompakt tasarım
   (Dropdown yüksekliği, eklenen özellik/aktivite sayısından bağımsızdır) */
.mega-features {
  margin-top: 0.9rem;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 0.75rem;
}

.mega-features-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items: start;
}

.mega-features-col {
  min-width: 0;
  position: relative;
}

.mega-features-title {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mega-features-title::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Tek satır, yatay kaydırılabilir şerit */
.mega-features-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 1.5rem 0.45rem 0.05rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}

.mega-features-grid::-webkit-scrollbar { height: 4px; }
.mega-features-grid::-webkit-scrollbar-track { background: transparent; }
.mega-features-grid::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
.mega-features-grid:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); }

.mega-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem 0.3rem 0.38rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fafafa;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.mega-feature-chip:link,
.mega-feature-chip:visited { color: var(--text); text-decoration: none; }
.mega-feature-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mega-feature-chip:hover {
  background: #fff;
  border-color: rgba(0,0,0,.22);
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.mega-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.mega-feature-icon svg,
.mega-feature-icon i {
  width: 18px;
  height: 18px;
  font-size: 15px;
  color: var(--accent);
  transition: transform .2s ease;
}

.mega-feature-chip:hover .mega-feature-icon svg,
.mega-feature-chip:hover .mega-feature-icon i {
  transform: scale(1.08);
}

/* Sağ kenar kaydırma oku (içeriğin taştığını belli eden hafif ipucu) */
.mega-features-col::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  opacity: 0;
  transition: opacity .2s ease;
}

.mega-features-col:hover::after { opacity: .55; }

/* Tek sütunlu varyant (Aktivite veya Teknik yoksa tüm genişliği kullan) */
.mega-features-split.is-single {
  grid-template-columns: 1fr;
}

@media (max-width: 960px) {
  .mega-features-split { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* mega-visual kicker (yeni class) */
.mega-visual-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  font-weight: 600;
}

/* Grid column override — mega-left yerine (3 sütun: left / main / visual) */
.mega-content {
  grid-template-columns: 12rem 1fr minmax(14rem, 20rem);
}

/* ============================================
   Mobile Stack-Nav
   ============================================ */

/* Stack container — position relative, overflow hidden */
.mobile-stack {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Tüm pane'ler absolute, tam genişlik */
.mobile-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Root pane: sol kenarda başlar */
.mobile-pane[data-pane-level="0"] {
  transform: translateX(0);
}

/* Aktif pane: görünür */
.mobile-pane.is-active {
  transform: translateX(0) !important;
}

/* Çıkış animasyonu (eskisi sola kayar) */
.mobile-pane.is-exit {
  transform: translateX(-30%) !important;
  opacity: 0.6;
  pointer-events: none;
}

/* Giriş animasyonu — sağdan gelir */
.mobile-pane.is-entering {
  transform: translateX(100%) !important;
}

/* Pop animasyonu (sağa gider) */
.mobile-pane.is-popping {
  transform: translateX(100%) !important;
  pointer-events: none;
}

/* Geri dön animasyonu */
.mobile-pane.is-returning {
  transform: translateX(-30%) !important;
  opacity: 0.6;
  pointer-events: none;
}

/* Pane body scroll */
.mobile-pane-body {
  padding-bottom: 2rem;
}

/* Geri butonu */
.mobile-back-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  border: 0;
  background: var(--text);
  color: #fff;
  padding: 0.9rem 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.mobile-back-btn i {
  font-size: 1.2rem;
  opacity: .75;
}

/* Tüm gör linki */
.mobile-see-all {
  display: block;
  padding: 0.7rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Root nav listesi */
.mobile-root-nav {
  padding: 0.5rem 0;
}

.mobile-root-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.04);
  text-align: left;
}

.mobile-root-item span {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  font-weight: 400;
  color: var(--text);
}

.mobile-root-item i {
  font-size: 1.25rem;
  color: #bbb;
  flex-shrink: 0;
}

.mobile-root-item--link { text-decoration: none; }

/* Pane içi bölümler */
.mobile-pane-section {
  padding: 1rem 1rem 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.mobile-pane-title {
  margin: 0 0 0.6rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-pane-link {
  display: block;
  padding: 0.48rem 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: color 150ms ease;
}

.mobile-pane-link:last-child { border-bottom: 0; }
.mobile-pane-link:hover { color: var(--accent); }

/* Mobil ürün kartları */
.mobile-pane-section--cards { overflow: hidden; }

.mobile-product-track {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 0.6rem;
  scrollbar-width: none;
}

.mobile-product-track::-webkit-scrollbar { display: none; }

.mobile-product-card {
  flex: 0 0 calc((100vw - 3.4rem) / 2.5);
  max-width: 180px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
}

.mobile-product-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #f0f0ee;
}

.mobile-discount-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sale);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.28rem 0.42rem;
  border-radius: 0;
  pointer-events: none;
}

.mobile-product-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 360ms var(--ease-smooth, cubic-bezier(0.22,1,0.36,1));
}

.mobile-product-card:hover .mobile-product-media img,
.mobile-product-card:active .mobile-product-media img { transform: scale(1.04); }

.mobile-product-info { padding: 0 0.1rem; }

.mobile-product-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Mobil özellik şeridi */
.mobile-pane-features {
  background: #fafafa;
  display: none !important;
}

.mobile-features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mobile-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text);
}

.mobile-feature-icon {
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.mobile-feature-icon svg,
.mobile-feature-icon i {
  width: 18px; height: 18px; font-size: 16px;
  color: var(--accent);
}

/* Mobil hızlı linkler */
.mobile-quick-links {
  padding: 1rem 1rem 0.75rem;
  border-top: 1px solid rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mobile-quick-links a {
  display: block;
  padding: 0.35rem 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Mobile menü — stack düzeni */
@media (max-width: 980px) {
  .mobile-menu {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-top: 1px solid rgba(0,0,0,.06);
    border-radius: 0 0 0.6rem 0.6rem;
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms var(--ease-out);
    position: relative;
    z-index: 6;
  }

  .mobile-menu.is-open {
    max-height: calc(100dvh - 62px);
    overflow: visible;
  }

  .mobile-stack {
    flex: 1;
    min-height: 340px;
    max-height: calc(100dvh - 120px);
    position: relative;
    overflow: hidden;
  }

  .mobile-pane {
    position: absolute;
    inset: 0;
    overflow-y: auto;
  }
}

/* Tablet mega: mega-left daha dar */
@media (max-width: 1200px) {
  .mega-content {
    grid-template-columns: 10rem 1fr minmax(11rem, 15rem);
  }

  .mega-left {
    padding: 1.4rem 1rem;
  }

  .mega-product-card {
    flex-basis: 150px;
  }
}

/* ============================================
   FAZ 0 — Tipografi sistemi: section heading
   şablonu, eyebrow ve fiyat kuralları.
   (Sonraki fazlarda tüm bölümler bu şablona
   geçirilecek; yeni bileşenler bunları kullanır.)
   ============================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.section-head .section-title,
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: none;
  color: var(--text);
}

.section-head .section-desc {
  margin: 0.5rem 0 0;
  max-width: 65ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--muted);
}

.section-head .section-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.section-head .section-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Fiyatlar: her yerde hizalı rakamlar */
.price,
[class*="price"],
[class*="fiyat"] {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   FAZ 1 — Announcement bar
   ============================================ */

.announce-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 81;
  background: var(--brand-900);
  color: rgba(250, 250, 249, 0.92);
}

.announce-bar-text {
  margin: 0;
  padding: 0 var(--page-gutter);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announce-bar-text strong {
  color: #fff;
  font-weight: 600;
}

.announce-bar-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-warm);
  margin: 0 0.65rem;
  vertical-align: middle;
}

.announce-bar-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.announce-bar-link:hover,
.announce-bar-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Header, duyuru barının hemen altına oturur */
.announce-bar + .site-header {
  top: 1.75rem;
}

@media (max-width: 980px) {
  .announce-bar { display: none; }
  .announce-bar + .site-header { top: 0; }
}

/* ============================================
   FAZ 1 — Desktop arama: tam genişlik overlay
   ============================================ */

@media (min-width: 981px) {
  .action-panel--search {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    transform: translateY(-6%);
    opacity: 0;
    transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
  }

  .action-panel--search.is-open {
    transform: translateY(0);
    opacity: 1;
  }

  .action-panel--search .action-drawer {
    height: auto;
    max-height: min(84vh, 46rem);
    overflow: auto;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 32px 64px rgba(10, 31, 25, 0.22);
  }

  .action-panel--search .action-drawer-head {
    padding: 1rem clamp(1.5rem, 6vw, 4rem) 0.9rem;
  }

  .action-panel--search .action-drawer-body {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(1.5rem, 6vw, 4rem);
    padding-right: clamp(1.5rem, 6vw, 4rem);
  }

  .action-panel--search .action-search-form {
    grid-column: 1 / -1;
  }

  .action-panel--search .action-search-field input {
    font-size: 1.15rem;
  }

  .action-panel--search .action-search-suggest {
    grid-column: 1;
    grid-row: 2;
  }

  .action-panel--search .search-results-live {
    grid-column: 2;
    grid-row: 2;
    min-height: 12rem;
  }
}

/* ============================================
   FAZ 1 — Mobil menü: görselli kök satırlar + kampanya kartı
   ============================================ */

.mobile-root-item {
  min-height: 64px;
}

.mobile-root-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
}

.mobile-root-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--brand-900);
  color: rgba(250, 250, 249, 0.94);
}

.mobile-promo-copy {
  display: grid;
  gap: 0.2rem;
}

.mobile-promo-kicker {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.mobile-promo-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.mobile-promo-card i {
  font-size: 1.25rem;
  color: var(--accent-warm);
  flex-shrink: 0;
}

/* Faz 1 ek: mobil menü satır düzeni */
.mobile-root-item .mobile-root-label {
  flex: 1;
  text-align: left;
}

.mobile-root-thumb--letter {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel);
}

/* ============================================
   FAZ 2 — Scroll reveal (güvenli desen)
   İçerik varsayılan görünür; animasyon yalnızca
   JS'in eklediği sınıf + hareket tercihiyle çalışır.
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  .sc-section.sc-reveal-pending {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--dur-reveal) ease, transform var(--dur-reveal) var(--ease);
  }

  .sc-section.sc-reveal-pending.is-inview {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Plaka sağ blok öğeleri yalnız mobil plaka bağlamında görünür */
.mplate-meta,
.mplate-back {
  display: none;
}

/* ============================================
   Mobil plaka header standardı (liste düzeni)
   — ana sayfa/liste/ürün/sayfa-n dışındaki tüm
   alt sayfalarda geçerli (.site-header--mplate)
   ============================================ */

@media (max-width: 980px) {
  .site-header--mplate {
    --header-progress: 0 !important;
    --header-bg: 0 !important;
    --header-border: 0 !important;
    --header-blur: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    pointer-events: none;
    transition: none !important;
  }

  .site-header--mplate.nav-hidden {
    transform: none !important;
  }

  .site-header--mplate .main-nav {
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.55rem;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0 0 var(--page-gutter);
  }

  .site-header--mplate .nav-links,
  .site-header--mplate .nav-actions,
  .site-header--mplate .menu-toggle {
    display: none !important;
  }

  .site-header--mplate .brand {
    margin: 0;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 10px var(--brand-plate-pad-x) 14px;
    background: var(--brand-900) !important;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    pointer-events: auto;
    clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 0% 100%);
  }

  .site-header--mplate .brand-logo {
    width: var(--brand-logo-width-mobile);
  }

  /* Plaka koyu zeminli olduğu için logo her sayfada beyaz basılmalı.
     Sayfa CSS'lerindeki `.<sayfa>-body .site-header--solid .brand-logo::before`
     kuralları (0,4,1) özgüllükle geldiğinden `body` öneki ile (0,4,2) yapılır;
     aksi halde blog / iletişim / kariyer / teknoloji sayfalarında logo koyu
     yeşil plakanın üzerinde siyah kalıyor. */
  body .site-header.site-header--solid.site-header--mplate .brand-logo::before {
    background-color: #fff !important;
  }

  /* Sağ blok: sayfa başlığı + geri butonu (script.js doldurur) */
  .site-header--mplate .mplate-meta {
    display: flex;
    align-items: center;
    margin: 0.72rem 0.6rem 0 auto;
    min-width: 0;
    max-width: 52vw;
    pointer-events: auto;
  }

  /* Başlık pill'i: sayfa zemininden bağımsız okunurluk (geri butonuyla aynı aile) */
  .site-header--mplate .mplate-title {
    max-width: 100%;
    display: inline-block;
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 14px rgba(10, 31, 25, 0.08);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header--mplate .mplate-back {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0.72rem var(--page-gutter) 0 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto;
    transition: background 200ms ease, transform 150ms ease;
  }

  .site-header--mplate .mplate-back:active {
    transform: scale(0.94);
    background: var(--panel);
  }

  /* Checkout/sepet sayfalarının kendi header enjeksiyonları (SEPETİM,
     SEPETİ TEMİZLE, Adım 2/3, geri linki) plaka standardıyla çakışmasın:
     başlık + geri artık mplate'ten geliyor. Adım göstergesi (ct-progress)
     header altında yaşamaya devam eder. */
  .site-header--mplate .ct-mobile-meta,
  .site-header--mplate .ct-hdr-clear,
  .site-header--mplate .co-mobile-meta,
  .site-header--mplate .co-hdr-back {
    display: none !important;
  }

  /* İçerik plakanın altında rahat başlasın */
  .site-header--mplate ~ main,
  body:has(.site-header--mplate) main {
    scroll-margin-top: 70px;
  }
}

/* ============================================
   FAZ 4 — Sayfalar arası yumuşak geçiş
   (View Transitions destekleyen tarayıcılarda
   cross-document crossfade; progressive enhancement)
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
  }
}

/* ============================================
   MENÜ v2 — Mobil akordeon
   ============================================ */

.macc {
  display: block;
}

.macc-item {
  border-bottom: 1px solid var(--line);
}

.macc-item--link,
.macc-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}

.macc-trigger-inner {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0.6rem 1rem;
  gap: 0;
}

.macc-label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.macc-chevron {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--muted);
  transition: transform 200ms var(--ease);
}

.macc-item.is-open .macc-chevron {
  transform: rotate(180deg);
  color: var(--text);
}

/* Panel: yükseklik animasyonu (grid tekniği) */
.macc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease);
}

.macc-item.is-open .macc-panel {
  grid-template-rows: 1fr;
}

.macc-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 1rem 0 calc(1rem + 44px + 0.9rem); /* thumb hizasından girinti */
}

.macc-item.is-open .macc-panel-inner {
  padding-bottom: 1rem;
}

/* Grup başlığı: eyebrow dili — linklerin üstünde etiket olarak okunur */
.macc-group {
  margin: 0.9rem 0 0.25rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.macc-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.macc-links li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 450;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.macc-links li a:active,
.macc-links li a:hover {
  color: var(--text);
}

.macc-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.macc-all svg {
  transition: transform var(--dur-fast) var(--ease);
}

.macc-all:active svg {
  transform: translateX(3px);
}

/* Açılışta linklerin kademeli gelişi */
@media (prefers-reduced-motion: no-preference) {
  .macc-item.is-open .macc-links li {
    animation: maccLinkIn 300ms var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 30ms + 60ms);
  }

  @keyframes maccLinkIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

/* ============================================
   MENÜ v2 — Desktop mega: tek tek düşen bloklar
   ============================================ */

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .mega-dropdown.is-open .mega-left,
  .mega-dropdown.is-open .mega-list-block,
  .mega-dropdown.is-open .mega-product-block,
  .mega-dropdown.is-open .mega-features,
  .mega-dropdown.is-open .mega-visual {
    animation: megaBlockIn 350ms var(--ease-out) backwards;
    animation-delay: calc(var(--mega-i, 0) * 65ms);
  }

  .mega-dropdown.is-open .mega-visual {
    animation-name: megaVisualIn;
  }

  @keyframes megaBlockIn {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
  }

  @keyframes megaVisualIn {
    from {
      opacity: 0;
      transform: translateY(-12px) scale(1.03);
    }
  }
}

/* ============================================
   MENÜ v3 — Açık palet (siyah/beyaz baskın)
   + iki seviyeli kayan panel
   ============================================ */

/* ── Modal paleti: yeşil tonları menü alanından çıkar ── */
#mob-modal-menu .mob-modal-panel {
  background: #fff;
}

#mob-modal-menu .mob-modal-head {
  background: #fff;
  border-bottom: 1px solid #ececec;
}

#mob-modal-menu .mob-modal-logo::before {
  background-color: #111 !important;
}

#mob-modal-menu .mob-modal-close {
  background: #f4f4f4;
  color: #111;
}

#mob-modal-menu .mob-modal-lang {
  background: #fff;
  border-top: 1px solid #ececec;
}

#mob-modal-menu .mob-modal-lang-label {
  color: #8a8a8a;
}

#mob-modal-menu .mob-modal-lang-pills {
  background: #f4f4f4;
}

#mob-modal-menu .mob-modal-lang-pill.is-active {
  background: #111;
  color: #fff;
}

#mob-modal-menu .mob-modal-footer {
  background: #fff;
  border-top: 1px solid #ececec;
}

#mob-modal-menu .mob-modal-footer-link {
  color: #6f6f6f;
}

/* ── Kayan panel mekaniği ── */
.mm2 {
  overflow: hidden;
}

.mm2-track {
  display: flex;
  width: 200%;
  transition: transform 320ms var(--ease);
}

.mm2.is-sub .mm2-track {
  transform: translateX(-50%);
}

.mm2-panel {
  width: 50%;
  flex-shrink: 0;
  min-height: 0;
}

/* ── Seviye 1: sade kök liste ── */
.mm2-root-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0 1.1rem;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: #111;
}

.mm2-root-label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
}

.mm2-root-item i {
  font-size: 1.2rem;
  color: #b5b5b5;
}

.mm2-root-item:active {
  background: #fafafa;
}

.mm2-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 1.1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid #e4e4e4;
  border-radius: var(--r-md);
  background: #fff;
  color: #111;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.mm2-promo i {
  color: var(--accent-warm);
}

#mob-modal-menu .mobile-quick-links {
  padding: 1rem 1.1rem;
}

#mob-modal-menu .mobile-quick-links a {
  color: #6f6f6f;
}

/* ── Seviye 2: geri + Tümünü Gör + grup akordeonları ── */
.mm2-back {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.1rem;
  border: 0;
  border-bottom: 1px solid #ececec;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #111;
}

.mm2-back i {
  font-size: 1.2rem;
}

.mm2-all {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 50px;
  padding: 0 1.1rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #111;
  text-decoration: none;
}

.mm2-group .macc-trigger {
  border-bottom: 1px solid #f0f0f0;
}

.mm2-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 1.1rem;
}

.mm2-group-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
}

.mm2-group .macc-chevron {
  color: #b5b5b5;
}

.mm2-group .macc-panel-inner {
  padding: 0 1.1rem;
  background: #fafafa;
}

.mm2-group.is-open .macc-panel-inner {
  padding-bottom: 0.5rem;
}

.mm2-group .macc-links li a {
  color: #5c5c5c;
  border-bottom: 1px solid #f0f0f0;
}

.mm2-group .macc-links li:last-child a {
  border-bottom: 0;
}

/* ============================================
   MENÜ v3 — Desktop mega: açık nötr palet
   ============================================ */

.mega-dropdown {
  background: #fff;
  border-top: 1px solid #ececec;
}

.mega-left {
  background: #fafafa;
  border-right: 1px solid #ececec;
}

.mega-left-title {
  color: #111;
}

.mega-left-tag {
  color: #6f6f6f;
}

.mega-left-tag:hover {
  color: #111;
}

.mega-left-tag.hot {
  color: #111;
  font-weight: 600;
}

.mega-left-tag.hot::before {
  background: var(--accent-warm);
}

.mega-block-title {
  color: #9a9a9a;
}

.mega-link-list li a {
  color: #5c5c5c;
}

.mega-link-list li a:hover {
  color: #111;
}

.mega-link-list li a::after {
  background: #111;
}

/* Panel açıkken sayfa karartma: yeşil ton yerine nötr */
.dropdown-layer:has(.mega-dropdown.is-open)::before {
  background: rgba(0, 0, 0, 0.34);
}

/* Menü v3: grup ayraçları da nötr (krem token yerine) */
.mm2-group.macc-item {
  border-bottom-color: #ececec;
}

/* ============================================
   MENÜ v3.1 — rötuşlar
   ============================================ */

/* Head: logosuz, kapat sağda */
#mob-modal-menu .mob-modal-head--bare {
  justify-content: flex-end;
  min-height: 56px;
}

/* Dil: pill grubu solda, etiketin yanında */
#mob-modal-menu .mob-modal-lang {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
}

/* Tümünü Gör: altta, hafif ağırlıkta */
.mm2-all--bottom {
  margin-top: 0.35rem;
  min-height: 52px;
  border-bottom: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6f6f6f;
}

.mm2-all--bottom:active {
  color: #111;
}

/* Marka Hikayesi / Blog: satır kurgusu */
.mm2-quick {
  margin-top: 0.75rem;
  border-top: 1px solid #ececec;
  padding: 0.35rem 0 1rem;
}

.mm2-quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 1.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: #6f6f6f;
  text-decoration: none;
}

.mm2-quick-item i {
  font-size: 1.1rem;
  color: #c2c2c2;
}

.mm2-quick-item:active {
  color: #111;
  background: #fafafa;
}

/* Menü açılış animasyonu + kök öğe stagger'ı */
@media (prefers-reduced-motion: no-preference) {
  #mob-modal-menu.is-open .mob-modal-panel {
    animation: mm2PanelIn 260ms var(--ease);
  }

  #mob-modal-menu.is-open .mm2-root-item {
    animation: mm2ItemIn 280ms var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 35ms + 60ms);
  }

  @keyframes mm2PanelIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  @keyframes mm2ItemIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

/* ============================================
   MENÜ v4 — rötuşlar ve modal paleti
   ============================================ */

/* 1) Mobil menü: kapat kesin sağda */
#mob-modal-menu .mob-modal-head--bare {
  justify-content: flex-start !important;
}

/* 2) Kök liste sonrası çift çizgi -> tek çizgi */
.mm2-quick {
  border-top: 0;
  margin-top: 0.4rem;
}

/* 3) Modal içi kaydırma: arka plana zincirlenme yok */
.mob-modal-panel {
  overscroll-behavior: contain;
}

.mob-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 5) Desktop: announcement bar scroll'da gizlenir; header yukarı kayar */
@media (min-width: 981px) {
  .announce-bar {
    transition: transform 250ms var(--ease);
  }

  body.ann-hidden .announce-bar {
    transform: translateY(-100%);
  }

  .announce-bar + .site-header {
    transition: top 250ms var(--ease);
  }

  body.ann-hidden .announce-bar + .site-header {
    top: 0;
  }

  /* Sticky ofsetleri announce kapanınca header'a yapışsın */
  body.ann-hidden .pd-info {
    top: 4.75rem;
  }

  body.ann-hidden .list-body .pl-cat-bar {
    top: 4.75rem;
  }
}

/* 7) Arama overlay: içerik tüm genişliğe yayılır */
@media (min-width: 981px) {
  .action-panel--search .action-drawer-body {
    display: block;
  }

  .action-panel--search .action-search-suggest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 1.4rem;
  }

  .action-panel--search .search-results-live {
    margin-top: 1.4rem;
    min-height: 0;
  }

  .action-panel--search .search-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem 1.75rem;
  }
}

/* 8) Arama / Sepet / Hesap panelleri: menü modalıyla paralel açık palet */
.action-drawer {
  background: #fff;
  border-left: 1px solid #ececec;
}

.action-drawer-head {
  background: #fff;
  color: #111;
  border-bottom: 1px solid #ececec;
}

.action-drawer-head h3 {
  color: #111;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-size: 1.3rem;
}

.action-drawer-kicker {
  color: #9a9a9a;
}

.action-close {
  background: #f4f4f4;
  color: #111;
  border-radius: 50%;
}

.action-close:hover {
  background: #eaeaea;
  color: #111;
}

.action-drawer-label {
  color: #9a9a9a;
}

.action-chip {
  background: #fff;
  border: 1px solid #e4e4e4;
  color: #444;
}

.action-chip:hover {
  border-color: #111;
  color: #111;
  background: #fff;
}

.action-cat-pill {
  background: #fff;
  border: 1px solid #e4e4e4;
}

.action-drawer-btn--primary {
  background: #111;
  border-color: #111;
  color: #fff;
}

.action-drawer-btn--primary:hover {
  background: #000;
}

.action-drawer-btn--secondary {
  background: #fff;
  color: #111;
  border: 1px solid #dcdcdc;
}

.action-row-link {
  color: #444;
}

.action-row-link:hover {
  color: #111;
}

/* ============================================
   MENÜ v4.1 — arama düzeni + modal sadeleştirmeleri
   ============================================ */

/* 1) Arama: bloklar alt alta, öğeler tam genişlik */
@media (min-width: 981px) {
  .action-panel--search .action-search-suggest {
    display: block;
  }

  .action-panel--search .action-drawer-section {
    margin-top: 1.4rem;
  }

  .action-panel--search .action-chip-list,
  .action-panel--search .action-cat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
  }
}

/* 2) Mobil arama: desktop paleti + tipografi paralelliği */
#mob-modal-search .mob-modal-panel {
  background: #fff;
}

#mob-modal-search .mob-modal-head {
  background: #fff;
  border-bottom: 1px solid #ececec;
}

#mob-modal-search .mob-modal-title {
  color: #111;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

#mob-modal-search .mob-modal-close {
  background: #f4f4f4;
  color: #111;
}

#mob-modal-search .mob-search-field-wrap {
  background: transparent;
  border: 0;
}

#mob-modal-search .mob-menu-section-label {
  color: #9a9a9a;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#mob-modal-search .mob-search-chip {
  background: #fff;
  border: 1px solid #e4e4e4;
  color: #444;
}

/* 3) Hesap modalı: avatar kutusu kalksın */
.action-account-avatar {
  display: none !important;
}

/* 4) Sepet modalı sadeleştirme */
.action-cart-progress,
.mob-cart-progress {
  display: none !important;
}

.action-cart-coupon {
  display: none !important;
}

.action-cart-note {
  display: none !important;
}

.action-cart-name {
  font-weight: 500;
}

/* Mobil arama inputu: desktop arama alanıyla aynı dil */
#mob-modal-search .mob-search-field {
  background: #fff;
  color: #111;
  border: 1.5px solid #111;
  border-radius: 12px;
}

#mob-modal-search .mob-search-field:focus {
  border-color: #111;
  background: #fff;
}

#mob-modal-search .mob-search-field::placeholder {
  color: #9a9a9a;
}

#mob-modal-search .mob-search-field-icon {
  color: #6f6f6f;
}

/* ── Topbar: scroll'a bağlı kayma (JS transform) + kapatma ── */
@media (min-width: 981px) {
  .announce-bar {
    transition: none; /* transform artık scroll'a bağlı, JS sürer */
    will-change: transform;
  }

  .announce-bar + .site-header {
    transition: none; /* top değeri de scroll'la senkron */
  }
}

.announce-bar-close {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(250, 250, 249, 0.85);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.announce-bar-close:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}

/* Kalıcı kapatma */
body.ann-dismissed .announce-bar {
  display: none !important;
}

body.ann-dismissed .announce-bar + .site-header {
  top: 0 !important;
}

@media (min-width: 981px) {
  body.ann-dismissed .pd-info {
    top: 4.75rem;
  }

  body.ann-dismissed .list-body .pl-cat-bar {
    top: 4.75rem;
  }
}

/* ============================================
   MENÜ v4.3 — Mobil arama sonuç dropdown'u:
   bej/oval kart yerine menü estetiğinde düz liste
   ============================================ */

#mob-modal-search .mob-search-results-live {
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

#mob-modal-search .search-results-grid {
  display: block;
}

#mob-modal-search .search-result-item {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0.85rem;
  padding: 0.7rem 0.15rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  box-shadow: none;
}

#mob-modal-search .search-result-item:active {
  background: #fafafa;
}

#mob-modal-search .search-result-img {
  width: 56px;
  height: 70px;
  border-radius: 4px;
  overflow: hidden;
  background: #f4f4f4;
  border: 0;
}

#mob-modal-search .search-result-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  line-height: 1.35;
}

#mob-modal-search .search-result-name strong {
  font-weight: 600;
}

#mob-modal-search .search-result-sku {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #9a9a9a;
}

#mob-modal-search .search-result-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
  font-variant-numeric: tabular-nums;
}

#mob-modal-search .search-result-price .search-price-old {
  color: #9a9a9a;
  font-weight: 400;
}

#mob-modal-search .search-result-empty {
  background: #fff;
  border: 0;
  color: #6f6f6f;
  padding: 1rem 0;
}

#mob-modal-search .search-see-all {
  border-top: 0;
  padding-top: 0.9rem;
}

#mob-modal-search .search-see-all a {
  background: #111;
  border-radius: 0;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

/* Yükleniyor iskeleti de nötr */
#mob-modal-search .mob-search-results-live.is-loading {
  background: #fff;
}

/* ============================================
   Hero sağ blok: CTA satırı, sağ raydaki dikey
   dil seçicinin alt kenarı ile aynı hat (desktop)
   ============================================ */

@media (min-width: 981px) {
  /* İçerik alta yaslı durur (margin-top:auto), ama taşma yönü aşağıdır:
     metin bloğu alana sığmazsa auto marj sıfırlanır, blok header payının
     hemen altından başlayıp aşağı doğru büyür. justify-content:flex-end
     ile taşma yukarı çıkıp padding-top'u da yutarak header altında
     kalıyordu; flex-start + auto marj bunu engeller. */
  .hero-split-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Taşma durumunda üst sınır: header + nefes payı */
    padding-top: calc(var(--hero-header-safe, 4.75rem) + clamp(0.9rem, 2.2vh, 2rem));
    /* Alt pay artık padding değil, daralabilen .hero-split-gap boşluğu */
    padding-bottom: 0;
  }

  /* Boşluk varken bloğu aşağı iter; sığmadığında kendiliğinden 0'a iner. */
  .hero-text--split {
    margin-top: auto;
    flex: 0 0 auto;
  }

  /* Alt pay: dil seçici ile aynı değişkene bağlı (alt kenarlar birebir
     hizalı), ancak içerik sığmadığında ilk daralan öğe burasıdır —
     böylece metin header'a doğru değil, alt paya doğru genişler. */
  .hero-split-gap {
    display: block;
    flex: 0 1 var(--hero-content-bottom-gap);
    min-height: 0;
    pointer-events: none;
  }

  .hero-text--split .hero-cta-group {
    margin-bottom: 0;
  }

  .hero-text--split .hero-products {
    margin-bottom: 0;
  }

  /* Buton yüksekliği = dil buton seti (36px) */
  .hero-text--split .hero-btn {
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-text--split .hero-products-more {
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* ── Kısa masaüstü ekranlar (yatay tablet / düşük çözünürlük): alt pay tamamen
   daraldıktan sonra bile sığmayan ürün ızgarası, görsel yüksekliği kademeli
   kısılarak alana oturtulur — böylece blok alt kenardan kırpılmaz ── */
@media (min-width: 981px) and (max-height: 760px) {
  .hero-products {
    margin-top: 1.1rem;
  }

  .hero-pcard-media {
    max-height: 24vh;
  }
}

/* Çok kısa ekranlarda bir kademe daha */
@media (min-width: 981px) and (max-height: 580px) {
  .hero-products {
    margin-top: 0.85rem;
  }

  .hero-pcard-media {
    max-height: 20vh;
  }
}

/* ── Sepet modalı: görsel satır yüksekliğine eşit, adet seçici küçük ── */
.action-cart-media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 5rem;
  align-self: stretch;
  background: #f4f4f4;
}

.action-cart-qty-btn {
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.8rem;
}

.action-cart-qty-val {
  min-width: 1.5rem;
  font-size: 0.82rem;
}

/* ============================================
   MENÜ v4.6 — Mobil Hesap + Sepet modalları:
   desktop panelleriyle paralel açık palet
   ============================================ */

#mob-modal-account .mob-modal-panel,
#mob-modal-cart .mob-modal-panel {
  background: #fff;
}

#mob-modal-account .mob-modal-head,
#mob-modal-cart .mob-modal-head {
  background: #fff;
  border-bottom: 1px solid #ececec;
}

#mob-modal-account .mob-modal-title,
#mob-modal-cart .mob-modal-title {
  color: #111;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

#mob-modal-account .mob-modal-close,
#mob-modal-cart .mob-modal-close {
  background: #f4f4f4;
  color: #111;
}

/* Hesap: avatar kutusu desktop ile paralel şekilde kalkar */
#mob-modal-account .mob-account-avatar {
  display: none !important;
}

#mob-modal-account .mob-account-hero {
  background: transparent;
  border: 0;
  padding-left: 0;
}

#mob-modal-account .mob-account-greeting {
  color: #111;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

#mob-modal-account .mob-account-sub {
  color: #6f6f6f;
}

#mob-modal-account .mob-btn--primary,
#mob-modal-cart .mob-btn--primary {
  background: #111;
  border-color: #111;
  color: #fff;
}

#mob-modal-account .mob-btn--outline,
#mob-modal-account .mob-btn--secondary,
#mob-modal-cart .mob-btn--outline,
#mob-modal-cart .mob-btn--secondary {
  background: #fff;
  color: #111;
  border: 1px solid #dcdcdc;
}

/* Sepet: kicker, özet, footer, boş durum */
#mob-modal-cart .mob-cart-kicker {
  color: #9a9a9a;
}

#mob-modal-cart .mob-cart-body {
  background: #fff;
}

#mob-modal-cart .mob-cart-footer {
  background: #fff;
  border-top: 1px solid #ececec;
}

#mob-modal-cart .mob-cart-summary-row span {
  color: #6f6f6f;
}

#mob-modal-cart .mob-cart-summary-row strong {
  color: #111;
  font-variant-numeric: tabular-nums;
}

#mob-modal-cart .action-cart-name {
  color: #111;
}

#mob-modal-cart .action-cart-meta {
  color: #9a9a9a;
}

#mob-modal-cart .mob-cart-empty-icon {
  background: #f4f4f4;
  color: #6f6f6f;
}

#mob-modal-cart .mob-cart-empty-title {
  color: #111;
  font-family: var(--font-display);
  font-weight: 600;
}

#mob-modal-cart .mob-cart-empty-sub {
  color: #6f6f6f;
}

/* ============================================
   Teknolojilerimiz Vitrini (tech-showcase)
   Ana sayfa — aktivite görseli + logo + liste
   ============================================ */

.tech-showcase {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
  padding: clamp(4rem, 8vw, 7rem) var(--page-gutter);
}

.tech-showcase-inner {
  max-width: 1360px;
  margin: 0 auto;
}

.tech-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.tech-showcase-kicker {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.tech-showcase-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 22ch;
}

.tech-showcase-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: border-color var(--dur-base) var(--ease-out);
}

.tech-showcase-all:hover {
  border-color: var(--text);
}

/* ── Blog ilham alanı (sc-card) ile birebir kartlar ── */
.tech-showcase-cards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px));
  justify-content: center;
}

/* sc-card rail dışında: yükseklik oranla belirlenir */
.tech-showcase-cards .sc-card {
  flex: none;
  height: auto;
  aspect-ratio: 5 / 8;
}

/* Hover: görsel fululaşır */
.tech-showcase-cards .sc-card:hover .sc-card-img {
  transform: scale(1.06);
  filter: blur(7px) brightness(0.85);
}

/* Hover: alt satır çekilir, ortada isim "yazılır" */
.tech-showcase-cards .sc-card:hover .sc-card-bottom {
  opacity: 0;
  transform: translateY(8px);
}

.tech-sc-hovername {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 200ms var(--ease-out),
              clip-path 620ms var(--ease-out) 60ms;
  pointer-events: none;
}

.tech-showcase-cards .sc-card:hover .tech-sc-hovername {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Hover'da ortada beliren orijinal logo (yatay format; oran korunur) */
.tech-sc-hovername--logo {
  clip-path: none;
  transition: opacity 260ms var(--ease-out);
}

.tech-showcase-cards .sc-card:hover .tech-sc-hovername--logo {
  clip-path: none;
}

.tech-sc-hoverlogo {
  /* Yatay logo: genişlik sabit, yükseklik oranla. max-height kart taşmasını
     engelleyen güvenlik sınırıdır, normalde devreye girmez. */
  width: min(var(--tek-logo-width-home), 78%);
  height: auto;
  max-height: min(var(--tek-logo-maxh-home), 40%);
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition: opacity 380ms var(--ease-out),
              transform 520ms var(--ease-out);
}

.tech-showcase-cards .sc-card:hover .tech-sc-hoverlogo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tech-sc-hoverlogo {
    transform: none;
    transition: opacity 200ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-sc-hovername {
    clip-path: none;
    transition: opacity 200ms ease;
  }

  .tech-showcase-cards .sc-card:hover .sc-card-img {
    transform: none;
  }
}

@media (max-width: 900px) {
  .tech-showcase-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .tech-showcase-cards .sc-card {
    aspect-ratio: 3 / 4;
  }
}

/* ============================================
   MENÜ v5 — dropdown_tipi'ne göre orta alan düzeni
   liste: sarmalı kolonlar, dikey scroll yalnız orta blokta
   kart : tek sıra, yatay scroll
   karma: liste + genişleyebilir kart katmanı
   ============================================ */
@media (min-width: 981px) {
  .dropdown-layer {
    --mega-cap: calc(100vh - 84px);
    --mega-cap: calc(100dvh - 84px);
    --mega-card-w: 180px;
    --mega-bleed: 1.6rem; /* .mega-main sağ padding'i — kart şeridi bu kadar sağa taşar */
  }

  /* Kaydırma hapsi: panel değil, yalnız orta blok kayar */
  .mega-dropdown { overflow: hidden; }
  .mega-content { max-height: var(--mega-cap); }

  .mega-main {
    min-width: 0;
    max-height: var(--mega-cap);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    scrollbar-gutter: stable;
  }

  .mega-left,
  .mega-visual { overflow: hidden; }

  /* ── Ürün kartı: hl-card ile hizalama ── */
  .mega-product-card {
    flex: 0 0 var(--mega-card-w);
    max-width: none;
  }

  .mega-product-media {
    aspect-ratio: 1696 / 2528;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #dfe0da;
  }

  .mega-product-name {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    -webkit-line-clamp: 1;
  }

  .mega-product-price {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .mega-product-price .price-old {
    color: var(--muted);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.72rem;
  }

  .mega-product-price.has-discount .price-new { color: var(--sale, var(--accent-warm)); }

  /* ── Mod: liste ── */
  .mega-content--liste .mega-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 1.6rem 1.4rem;
    align-items: start;
  }

  .mega-content--liste .mega-list-block { min-width: 0; }

  /* ── Mod: kart ── */
  .mega-content--kart .mega-blocks {
    display: block;
    margin-top: 0.75rem;
    margin-right: calc(-1 * var(--mega-bleed)); /* kartlar sağ kenara yaslanır */
  }

  .mega-content--kart .mega-product-block {
    width: 100%;
    min-width: 0;
  }

  .mega-content--kart .mega-product-block + .mega-product-block { margin-top: 1.2rem; }

  .mega-content--kart .mega-products-track {
    flex-wrap: nowrap;
    padding-bottom: 0.7rem;
  }

  /* ── Kart şeridi kabuğu: sağ kenar degrade-flu geçişi + ok navigasyonu ──
     Durum sınıfları (has-overflow / at-start / at-end) JS tarafından yönetilir */
  .mega-cards-shell { position: relative; }

  .mega-products-track { scroll-snap-type: none; }

  .mega-cards-shell::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.95));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
    mask-image: linear-gradient(to right, transparent, #000 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out);
    z-index: 1;
  }

  .mega-cards-shell.has-overflow:not(.at-end)::after { opacity: 1; }

  .mega-track-nav {
    position: absolute;
    top: calc(var(--mega-card-w) * 0.75 - 1.2rem); /* medya alanının dikey ortası */
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 1.3rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease-out), background 160ms ease, visibility 0s linear 200ms;
  }

  .mega-track-nav--next { right: 0.9rem; }
  .mega-track-nav--prev { left: 0.9rem; }
  .mega-track-nav:hover { background: #000; }

  .mega-cards-shell.has-overflow:not(.at-end) .mega-track-nav--next,
  .mega-cards-shell.has-overflow:not(.at-start) .mega-track-nav--prev {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  /* ── Mod: karma ── */
  .mega-content--karma .mega-blocks {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.6rem;
    position: relative;
    min-height: calc(var(--mega-card-w) * 1.49 + 5rem);
    margin-right: calc(-1 * var(--mega-bleed)); /* kart alanı sağ kenara yaslanır */
  }

  .mega-content--karma .mega-list-block {
    order: 1;
    flex: 0 1 12rem;
    min-width: 9rem;
  }

  .mega-content--karma .mega-product-block {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Kapalı kabuk: kart alanını doldurur, taşan kart sağ kenarda degrade altında kırpılır */
  .mega-content--karma [data-mega-expandable]:not(.is-expanded) .mega-products-track { overflow: hidden; }

  /* Kapalı durumda oklar gizli — yalnız artı butonu görünür */
  .mega-content--karma [data-mega-expandable]:not(.is-expanded) .mega-track-nav { display: none; }

  .mega-expand-btn {
    position: absolute;
    top: calc(var(--mega-card-w) * 0.75 - 1.2rem);
    right: 0.9rem;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 1.25rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 180ms var(--ease-out), background 180ms ease;
  }

  .mega-expand-btn:hover {
    transform: scale(1.08);
    background: #000;
  }

  .mega-collapse-btn { display: none; }

  /* Açık katman: kabuk tüm orta alana (liste+kart) yayılır */
  .mega-content--karma [data-mega-expandable].is-expanded .mega-cards-shell {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    z-index: 3;
    background: #fff;
    padding: 0.5rem 0 0.25rem 0.25rem; /* sağ kenar açık — kartlar degradeye kadar uzanır */
  }

  .mega-content--karma [data-mega-expandable].is-expanded .mega-products-track {
    overflow-x: auto;
    height: 100%;
    align-items: flex-start;
  }

  .mega-content--karma [data-mega-expandable].is-expanded .mega-expand-btn { display: none; }

  .mega-content--karma [data-mega-expandable].is-expanded .mega-collapse-btn {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 4;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
  }

  .mega-content--karma [data-mega-expandable].is-expanded .mega-collapse-btn:hover {
    background: #111;
    color: #fff;
  }

  /* ── Responsive kademeler ── */
  @media (max-width: 1200px) {
    .dropdown-layer { --mega-card-w: 152px; --mega-bleed: 1rem; }
    .mega-content--liste .mega-blocks { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
    .mega-content--karma .mega-list-block { flex-basis: 10rem; min-width: 8rem; }
  }

  @media (min-width: 1401px) {
    .dropdown-layer { --mega-card-w: 195px; }
    .mega-content--liste .mega-blocks { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
  }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .mega-content--karma [data-mega-expandable].is-expanded .mega-cards-shell {
    animation: megaExpandIn 320ms var(--ease-out);
  }

  .mega-content--karma [data-mega-expandable].is-collapsing .mega-cards-shell {
    animation: megaExpandOut 200ms var(--ease-out) forwards;
  }
}

@keyframes megaExpandIn {
  from { opacity: 0; clip-path: inset(0 0 0 62%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes megaExpandOut {
  to { opacity: 0; transform: translateX(14px); }
}

/* ============================================
   MENÜ v6 — Sadeleştirilmiş dropdown
   - Sol rail (Tümünü Gör vb.) ve sağ görsel blok kaldırıldı; tek kolon
   - Kart bloğu: ürün kartı yerine kategori kartı (görsel + alt-sol etiket)
   - Görselli özellik/aktiviteler aynı kart tasarımıyla gösterilir
   - Mobil alt panel: üstte kaydırılabilir kart şeridi
   - Mobil X: hover'da tam tur dönüş; açılış/geçişlerde rafine animasyon
   ============================================ */

/* ── Desktop: tek kolonlu içerik ── */
@media (min-width: 981px) {
  .mega-content {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .mega-main { padding: 1.9rem 2.4rem 2rem; }

  .dropdown-layer { --mega-cat-w: 15rem; }

  /* ── Kategori kartı: keskin köşe, görsel, degrade, alt-sol beyaz etiket ── */
  .mega-cat-block {
    flex: 1 1 100%;
    min-width: 0;
  }

  .mega-cat-track { scroll-snap-type: x proximity; }

  .mega-cat-card {
    position: relative;
    flex: 0 0 var(--mega-cat-w);
    aspect-ratio: 4 / 5;
    display: block;
    overflow: hidden;
    border-radius: 2px;
    background: #eceded;
    scroll-snap-align: start;
    isolation: isolate;
  }

  .mega-cat-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mega-cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0) 62%);
    transition: background 300ms ease;
  }

  .mega-cat-card-label {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.85rem;
    z-index: 2;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.22;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
  }

  .mega-cat-card:hover img { transform: scale(1.05); }
  .mega-cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── Görselli özellik/aktivite kartları: aynı tasarım, kompakt oran ── */
  .mega-feature-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.7rem;
    overflow-x: auto;
    padding: 0.15rem 0 0.5rem;
    margin-bottom: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }

  .mega-feature-cards::-webkit-scrollbar { height: 3px; }
  .mega-feature-cards::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }

  .mega-cat-card--feature {
    flex-basis: 11rem;
    aspect-ratio: 16 / 10;
  }

  .mega-cat-card--feature .mega-cat-card-label {
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.6rem;
    font-size: 0.86rem;
  }

  /* ── Mod: kart — blok tam genişlik, tek sıra yatay kaydırma ── */
  .mega-content--kart .mega-blocks {
    display: block;
    margin-top: 0.5rem;
    margin-right: calc(-1 * var(--mega-bleed));
  }

  .mega-content--kart .mega-cat-block + .mega-cat-block { margin-top: 1.2rem; }

  /* ── Mod: karma — listeler solda, kart bloğu kalan alanı doldurur ── */
  .mega-content--karma .mega-blocks {
    display: flex;
    flex-wrap: nowrap;
    gap: 2.2rem;
    min-height: 0;
    margin-right: calc(-1 * var(--mega-bleed));
  }

  .mega-content--karma .mega-list-block {
    order: 1;
    flex: 0 1 12rem;
    min-width: 9rem;
  }

  .mega-content--karma .mega-cat-block {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Ok navigasyonu: kart oranından bağımsız dikey merkez */
  .mega-cat-block .mega-track-nav { top: calc(50% - 1.2rem); }

  /* Boyut kademeleri */
  @media (max-width: 1200px) {
    .dropdown-layer { --mega-cat-w: 12.5rem; }
    .mega-cat-card--feature { flex-basis: 9.5rem; }
  }

  @media (min-width: 1401px) {
    .dropdown-layer { --mega-cat-w: 16.5rem; }
  }
}

/* ── Desktop açılış animasyonları: panel + blok + kart stagger ── */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .mega-dropdown.is-open {
    animation: megaRevealV6 380ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mega-dropdown.is-open .mega-list-block,
  .mega-dropdown.is-open .mega-cat-block,
  .mega-dropdown.is-open .mega-features {
    animation: megaBlockInV6 440ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--mega-i, 0) * 55ms + 40ms);
  }

  .mega-dropdown.is-open .mega-cat-card {
    animation: megaCardInV6 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--mega-i, 0) * 55ms + var(--card-i, 0) * 45ms + 90ms);
  }

  @keyframes megaRevealV6 {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  @keyframes megaBlockInV6 {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
  }

  @keyframes megaCardInV6 {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}

/* ── Mobil: alt panel kart şeridi ── */
@media (max-width: 980px) {
  .mm2-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 1rem 1.1rem 0.4rem;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1.1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mm2-cards::-webkit-scrollbar { display: none; }

  .mm2-card {
    position: relative;
    flex: 0 0 44%;
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    border-radius: 2px;
    background: #ececea;
    scroll-snap-align: start;
    text-decoration: none;
    isolation: isolate;
  }

  .mm2-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms ease;
  }

  .mm2-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0) 64%);
  }

  .mm2-card-label {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.6rem;
    z-index: 2;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  }

  .mm2-card:active img { transform: scale(1.03); }
}

/* ── X butonu: üzerine gelince tam tur dönüş ── */
.mob-modal-close i { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .mob-modal-close:hover i,
  .mob-modal-close:focus-visible i {
    animation: mmCloseSpinV6 640ms cubic-bezier(0.45, 0.05, 0.2, 1) 1;
  }

  @keyframes mmCloseSpinV6 {
    to { transform: rotate(360deg); }
  }
}

/* ── Mobil geçiş animasyonları ── */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  /* Modal panel: daha yumuşak yay eğrisi */
  .mob-modal-panel {
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mob-modal { transition: visibility 0s linear 480ms; }
  .mob-modal.is-open { transition-delay: 0s; }

  /* Seviye geçişi (kök <-> alt panel) */
  .mm2-track {
    transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Alt panel içerikleri: kartlar sağdan süzülür, gruplar sırayla düşer */
  .mm2.is-sub .mm2-sub:not([hidden]) .mm2-card {
    animation: mm2CardInV6 460ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--ci, 0) * 55ms + 140ms);
  }

  .mm2.is-sub .mm2-sub:not([hidden]) .mm2-group {
    animation: mm2GroupInV6 400ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--gi, 0) * 45ms + 180ms);
  }

  .mm2.is-sub .mm2-sub:not([hidden]) .mm2-all--bottom {
    animation: mm2GroupInV6 400ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 320ms;
  }

  .mm2.is-sub .mm2-back {
    animation: mm2BackInV6 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards 100ms;
  }

  @keyframes mm2CardInV6 {
    from {
      opacity: 0;
      transform: translateX(22px);
    }
  }

  @keyframes mm2GroupInV6 {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  @keyframes mm2BackInV6 {
    from {
      opacity: 0;
      transform: translateX(10px);
    }
  }
}

/* ============================================
   MENÜ v6.1 — Kart şeridi slider davranışı
   - rAF ile yürütülen ok/atalet animasyonu (CSS snap ile çakışmaz)
   - Fare ile sürükleme (grab/grabbing)
   - Kaydırma çubuğu yerine ok + sağ degrade
   ============================================ */
@media (min-width: 981px) {
  .mega-products-track,
  .mega-feature-cards {
    scroll-behavior: auto;              /* JS animasyonu tek yetkili */
    scroll-snap-type: none;             /* hizalamayı JS yapar */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mega-products-track::-webkit-scrollbar,
  .mega-feature-cards::-webkit-scrollbar { height: 0; width: 0; }

  .mega-cards-shell.has-overflow .mega-products-track,
  .mega-cards-shell.has-overflow .mega-feature-cards { cursor: grab; }

  .mega-products-track.is-dragging,
  .mega-feature-cards.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Sürüklerken kart hover efekti tetiklenmesin */
  .mega-products-track.is-dragging .mega-cat-card:hover img,
  .mega-feature-cards.is-dragging .mega-cat-card:hover img { transform: none; }

  .mega-cat-card img,
  .mega-product-card img { -webkit-user-drag: none; user-drag: none; }

  /* Ok butonu: yumuşak ölçek geri bildirimi */
  .mega-track-nav {
    transition: opacity 200ms var(--ease-out), background 160ms ease,
                transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }

  .mega-track-nav:hover { transform: scale(1.06); }
  .mega-track-nav:active { transform: scale(0.94); }
  .mega-track-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Sol kenar degradesi: sağ kenarın simetriği */
  .mega-cards-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4.5rem;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.95));
    -webkit-mask-image: linear-gradient(to left, transparent, #000 55%);
    mask-image: linear-gradient(to left, transparent, #000 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out);
    z-index: 1;
  }

  .mega-cards-shell.has-overflow:not(.at-start)::before { opacity: 1; }

  /* Özellik/aktivite kart şeridi de aynı slider kabuğunu kullanır */
  .mega-features .mega-cards-shell { position: relative; }
  .mega-features .mega-track-nav {
    top: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
    transform: translateY(-50%);
  }

  .mega-features .mega-track-nav:hover { transform: translateY(-50%) scale(1.06); }
  .mega-features .mega-track-nav:active { transform: translateY(-50%) scale(0.94); }
  .mega-features .mega-track-nav--next { right: 0.5rem; }
  .mega-features .mega-track-nav--prev { left: 0.5rem; }
  .mega-features .mega-cards-shell::before,
  .mega-features .mega-cards-shell::after { width: 3.5rem; }
}

/* ============================================
   BM — Marka manifestosu (anasayfa, blog altı)
   Editoryal tanıtım bloğu: açık zemin, keskin
   köşeli görsel kolajı + SEO metni. Görsel
   kaynağı blog içeriği (hikaye ile aynı yaklaşım).
   ============================================ */
.bm-section {
  margin-top: 50px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 9vw, 7.5rem);
  overflow: hidden;
}

.bm-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}

/* ── Metin sütunu ── */
.bm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.bm-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--line-strong);
}

.bm-title {
  margin: 1.2rem 0 1.6rem;
  font-family: var(--font-display);
  /* Global h2 kuralı başlıkları uppercase yapar; bu blok editoryal
     dilde normal yazımla kalır. */
  text-transform: none;
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.bm-title em {
  font-style: italic;
  font-weight: 450;
  color: inherit;
  position: relative;
  padding-bottom: 0.06em;
}

/* Vurgu kelimesinin altında elle çizilmiş hissi veren turuncu fırça çizgisi */
.bm-title em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.06em;
  bottom: -0.1em;
  height: 0.16em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1.5 6.2 Q 54 0.8 98.5 4.4' fill='none' stroke='%23c87f3e' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}

.bm-lead {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.62;
  color: var(--text);
}

/* Dergi dili: giriş paragrafına gömme (drop cap) ilk harf */
.bm-lead::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.04em 0.14em 0 0;
  font-weight: 600;
  color: var(--accent-warm);
}

.bm-para {
  margin: 0 0 1rem;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
}

.bm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1.6rem;
}

/* Alt çizgi dili: mega dropdown / footer linkleriyle aynı —
   sabit ince çizgi üzerinde hover'da soldan dolan koyu çizgi.
   Konum hareketi yok. */
.bm-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.bm-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
}

.bm-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
  z-index: 1;
}

.bm-link:hover::before {
  transform: scaleX(1);
}

/* ── Görsel kolajı ── */
.bm-visual {
  position: relative;
  z-index: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* Kontur yazı: görsellerin arkasında sanatsal marka izi */
.bm-ghost {
  position: absolute;
  top: -0.02em;
  left: -1%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7.5vw, 7rem);
  white-space: nowrap;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
  user-select: none;
}

.bm-fig {
  margin: 0;
  overflow: hidden;
  background: var(--panel);
}

.bm-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease-out);
}

/* sc-section hero'su ile aynı hover dili: kadraj içinde yavaş zoom */
.bm-visual:hover .bm-fig img {
  transform: scale(1.04);
}

.bm-fig--main {
  position: relative;
  z-index: 1;
  width: 74%;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  /* Baskı/registrasyon hissi: görselin dışında ince ofset çerçeve */
  outline: 1px solid var(--line-strong);
  outline-offset: 12px;
}

.bm-fig--small {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: clamp(2rem, 4vw, 3.5rem);
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 10px solid var(--bg-soft);
}

.bm-caption {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bm-caption::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--line-strong);
}

@media (max-width: 980px) {
  .bm-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .bm-visual {
    padding-top: 2rem;
  }

  .bm-fig--main {
    width: 80%;
  }

  .bm-ghost {
    font-size: clamp(2.75rem, 12vw, 4.75rem);
  }

  .bm-fig--main {
    outline-offset: 9px;
  }
}

@media (max-width: 640px) {
  .bm-section {
    padding: 3.25rem 0 3.25rem;
  }

  .bm-links {
    gap: 1.25rem 1.75rem;
  }

  .bm-fig--main {
    width: 84%;
  }

  .bm-fig--small {
    width: 52%;
    border-width: 6px;
    bottom: 1.5rem;
  }
}