/* ═════════════════════════════════════════════════════════════════════════════
   KadınımGuzelim — Demo Site v1.0
   Premium Accessible Lingerie / Sleepwear / Comfortwear
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --color-dark:        #2D2D2D;
  --color-dark-deep:   #1A1A1A;
  --color-cream:       #F5F0EB;
  --color-cream-warm:  #F0EBE5;
  --color-gold:        #C4A77D;
  --color-rose:        #d6006e;
  --color-white:       #FFFFFF;
  --color-gray:        #6B6B6B;
  --color-gray-light:  #DDDDDD;

  --font-display:      'Playfair Display', Georgia, serif;
  --font-body:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:           'Montserrat', -apple-system, sans-serif;

  --space-xs:          4px;
  --space-sm:          8px;
  --space-md:          16px;
  --space-lg:          24px;
  --space-xl:          40px;
  --space-2xl:         64px;
  --space-3xl:         80px;

  --radius-sm:         4px;
  --radius-md:         8px;

  --shadow-sm:         0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:         0 4px 16px rgba(0,0,0,0.08);

  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
}

/* ── RESET ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ── TYPOGRAPHY ────────────────────────────────────────────────────────────── */
.font-display {
  font-family: var(--font-display);
}

.font-ui {
  font-family: var(--font-ui);
}

.text-xs    { font-size: 11px; }
.text-sm    { font-size: 13px; }
.text-base  { font-size: 15px; }
.text-md    { font-size: 18px; }
.text-lg    { font-size: 24px; }
.text-xl    { font-size: 32px; }
.text-2xl   { font-size: 42px; }
.text-3xl   { font-size: 56px; }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.uppercase     { text-transform: uppercase; letter-spacing: 0.12em; }

/* ── COLORS ────────────────────────────────────────────────────────────────── */
.bg-dark       { background: var(--color-dark); color: var(--color-white); }
.bg-cream      { background: var(--color-cream); }
.bg-white      { background: var(--color-white); }

.text-white    { color: var(--color-white); }
.text-dark     { color: var(--color-dark); }
.text-gray     { color: var(--color-gray); }
.text-gold     { color: var(--color-gold); }
.text-rose     { color: var(--color-rose); }

/* ── LAYOUT ────────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm        { gap: var(--space-sm); }
.gap-md        { gap: var(--space-md); }
.gap-lg        { gap: var(--space-lg); }

.grid          { display: grid; }
.grid-2        { grid-template-columns: repeat(2, 1fr); }
.grid-4        { grid-template-columns: repeat(4, 1fr); }

.hidden        { display: none; }
.block         { display: block; }

.w-full        { width: 100%; }
.h-full        { height: 100%; }

.relative      { position: relative; }
.sticky        { position: sticky; }

/* ── SPACING ───────────────────────────────────────────────────────────────── */
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-xl  { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
.py-lg  { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
.py-md  { padding-top: var(--space-md);  padding-bottom: var(--space-md); }

.px-md  { padding-left: var(--space-md); padding-right: var(--space-md); }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

/* ── COMPONENTS: HEADER ────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-cream-warm);
  height: 64px;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}

.nav-desktop {
  display: none;
  gap: var(--space-lg);
}

.nav-desktop a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-dark);
  position: relative;
  padding: var(--space-sm) 0;
}

.nav-desktop a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-rose);
  transition: width var(--transition-base);
}

.nav-desktop a:hover::after {
  width: 100%;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-icons a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
}

.header-icons a svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.mobile-menu-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-dark);
}

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Mobile nav overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;          /* bottom sheet — does not cover the screen */
  background: var(--color-white);
  z-index: 200;
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
  transform: translateY(100%);
  transition: transform var(--transition-base);
  max-height: 80vh;
  overflow-y: auto;
}

.mobile-nav::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  margin: 0 auto var(--space-md);
  border-radius: 999px;
  background: var(--color-gray-light);
}

.mobile-nav.active {
  transform: translateY(0);
}

.mobile-nav-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  color: var(--color-dark);
}

.mobile-nav-close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.mobile-nav ul {
  margin-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav li:last-child a { border-bottom: none; }

.mobile-nav a {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  display: block;
  padding: 15px var(--space-xs);
  border-bottom: 1px solid var(--color-cream);
  transition: opacity var(--transition-fast);
}

.mobile-nav a:active {
  opacity: 0.5;
}

/* ── Generic bottom sheet (size guide, etc.) ────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 249;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
.sheet-overlay.active { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 250;
  background: var(--color-white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--transition-base);
  max-height: 85vh;
  overflow-y: auto;
}
.sheet::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  margin: 0 auto var(--space-md);
  border-radius: 999px;
  background: var(--color-gray-light);
}
.sheet.active { transform: translateY(0); }
.sheet-close {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--color-dark); cursor: pointer;
}
.sheet-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.sheet-title {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 var(--space-md);
}
.sheet table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sheet th { background: var(--color-cream); padding: 10px; text-align: left; font-family: var(--font-ui); font-weight: 600; font-size: 12px; }
.sheet td { padding: 10px; border-bottom: 1px solid var(--color-cream-warm); }
.sheet .fit-note {
  margin-top: var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: 13px; color: var(--color-gray); line-height: 1.6;
}

/* ── COMPONENTS: HERO — Kampanya Banner ────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 520px;
  max-height: 800px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 60%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) var(--space-md);
  max-width: 600px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-white);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-white);
  opacity: 0.85;
  margin-top: var(--space-md);
  max-width: 360px;
}

.hero__cta {
  display: inline-block;
  margin-top: var(--space-xl);
  padding: 14px 36px;
  border: 1.5px solid var(--color-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  transition: all var(--transition-base);
}

.hero__cta:hover {
  background: var(--color-white);
  color: var(--color-dark);
}

/* ── COMPONENTS: SECTION LABELS ────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-gray);
}

.section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-dark);
  margin-top: var(--space-sm);
}

/* ── COMPONENTS: CATEGORY CARDS ────────────────────────────────────────────── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.category-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.category-card:hover img {
  transform: scale(1.04);
}

.category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
}

.category-card__name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
}

.category-card__count {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-white);
  opacity: 0.75;
  margin-top: 2px;
}

/* ── COMPONENTS: PRODUCT CARDS ─────────────────────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-white);
  border: 1px solid rgba(45, 45, 45, 0.08);   /* resting: restrained hairline (luxury) */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

/* Hover (desktop): the frame becomes a defined gold border + gentle lift */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}

.product-card__image {
  position: relative;
  aspect-ratio: 3 / 4;   /* tüm ürün kartları tek portre oran → hizalı, tutarlı (#7) */
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;   /* mankenin yüzü/üst kısmı hep görünür, kesilmez (#3) */
}

.product-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 3px 8px;
  background: var(--color-rose);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
}

.product-card__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: 0.01em;
  display: flex;            /* sıra: %indirim → üstü çizili eski → güncel (#1/#8) */
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Horizontal scroll product row */
.product-scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
  padding-inline-end: var(--space-md);   /* sondaki kart tam görünsün, yarım kalmasın (#2) */
  scroll-padding-inline: var(--space-md);
  margin-top: var(--space-xl);
  -webkit-overflow-scrolling: touch;
}

.product-scroll::-webkit-scrollbar {
  display: none;
}

.product-scroll .product-card {
  flex: 0 0 170px;   /* a touch wider so the framed card + padding breathes */
  scroll-snap-align: start;
}

/* ── COMPONENTS: TRUST LAYER ───────────────────────────────────────────────── */
.trust-layer {
  padding: var(--space-2xl) var(--space-md);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.trust-item {
  text-align: center;
}

.trust-item__icon {
  font-size: 32px;
  line-height: 1;
}

.trust-item__title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--space-md);
}

.trust-item__desc {
  font-family: var(--font-body);
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
}

/* Slim güven şeridi — ana banner altında, kompakt (#4) */
.trust-layer--slim { padding: var(--space-md) var(--space-md); }
.trust-layer--slim .trust-grid { gap: var(--space-md); max-width: 1000px; }
.trust-layer--slim .trust-item__icon { font-size: 20px; }
.trust-layer--slim .trust-item__title { font-size: 12px; margin-top: 6px; }
.trust-layer--slim .trust-item__desc { font-size: 11px; }

/* Kategori banner (#6) — başlık alanına görselli banner */
.category-banner {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.category-banner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.category-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
}
.category-banner__content {
  position: relative;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg);
  color: var(--color-white);
}
.category-banner__content .section-title { color: var(--color-white); }
.category-banner__sub {
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.92;
  margin-top: var(--space-xs);
}

/* ── COMPONENTS: BRAND STORY ───────────────────────────────────────────────── */
.brand-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.brand-story__image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.brand-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-story__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
}

.brand-story__text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-gray);
  line-height: 1.7;
  margin-top: var(--space-md);
}

.brand-story__link {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-rose);
}

/* ── COMPONENTS: INSTAGRAM LAYER ───────────────────────────────────────────── */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.instagram-grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ── COMPONENTS: KUŞAKLAR (canlı site paritesi, 2026-07-19) ───────────────────
   promo-band  : üçlü görsel promo bandı (canlıda iki kez: ürün rafları arasında)
   rehber-grid : "İç Giyim Üzerine Her Şey" içerik kartları
   marka-metin : alt marka/SEO metin kuşağı
   Mobil: promo bandı tek sütuna, rehber kartları tek sütuna iner.
   ─────────────────────────────────────────────────────────────────────────── */
.promo-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.promo-band__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  line-height: 0;
}

.promo-band__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}

.promo-band__item:hover img { transform: scale(1.03); }

.rehber-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.rehber-kart {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: box-shadow .3s ease, transform .3s ease;
}

.rehber-kart:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
}

.rehber-kart img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* rehber-kart yalnız görsel taşır: başlık görselin içinde basılı (canlı parite).
   Alt-yazı sınıfları bilerek YOK — çift başlık olurdu. */

.marka-metin {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.marka-metin p {
  color: var(--color-gray);
  line-height: 1.75;
  margin-top: var(--space-md);
}

@media (max-width: 860px) {
  .promo-band,
  .rehber-grid { grid-template-columns: 1fr; }
}

/* Ödeme/taksit logoları şeridi (canlı parite 2026-07-20) */
.odeme-serit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0 var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: var(--space-lg);
}

.odeme-serit img {
  height: 24px;
  width: auto;
  opacity: .9;
  border-radius: 3px;
}

/* ── COMPONENTS: FOOTER ────────────────────────────────────────────────────── */
.site-footer {
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.footer-col h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-family: var(--font-body);
  font-size: 13px;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.footer-col a:hover {
  opacity: 1;
}

.footer-bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.footer-copyright {
  font-size: 12px;
  opacity: 0.6;
}

.footer-trust {
  display: flex;
  gap: var(--space-md);
  font-size: 12px;
  opacity: 0.6;
}

/* ── COMPONENTS: BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.btn--primary {
  background: var(--color-dark);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-dark-deep);
}

.btn--outline {
  background: transparent;
  color: var(--color-dark);
  border: 1.5px solid var(--color-dark);
}

.btn--outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.btn--rose {
  background: var(--color-rose);
  color: var(--color-white);
}

.btn--rose:hover {
  background: #b0005a;
}

/* ── CATEGORY PAGE: FILTER BAR ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-cream-warm);
  position: sticky;
  top: 64px;
  background: var(--color-white);
  z-index: 50;
}

.filter-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--color-gray-light);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Filter drawer close button */
.filter-drawer button[onclick*="toggleFilterDrawer"] {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Filter drawer */
.filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  z-index: 300;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.filter-drawer.active {
  transform: translateY(0);
}

.filter-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.filter-drawer__overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── PRODUCT PAGE: GALLERY ─────────────────────────────────────────────────── */
.product-gallery {
  position: relative;
}

.product-gallery__main {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  overflow-x: auto;
}

.product-gallery__thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.product-gallery__thumbs img.active {
  border-color: var(--color-dark);
}

/* ── PRODUCT PAGE: VARIANTS ────────────────────────────────────────────────── */
.variant-group {
  margin-top: var(--space-lg);
}

.variant-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray);
  margin-bottom: var(--space-sm);
}

.swatches {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-light);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.swatch:hover,
.swatch.active {
  border-color: var(--color-dark);
  transform: scale(1.1);
}

.size-options {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.size-btn {
  min-width: 52px;
  padding: 10px 14px;
  border: 1px solid var(--color-gray-light);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.size-btn:hover,
.size-btn.active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

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

/* ── PRODUCT PAGE: QUANTITY & CTA ──────────────────────────────────────────── */
.product-info__cta {
  display: none;
}

.quantity {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.quantity button {
  width: 40px;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity input {
  width: 48px;
  height: 40px;
  text-align: center;
  border: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  -moz-appearance: textfield;
}

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-cream-warm);
  padding: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  z-index: 100;
}

.sticky-cta .btn {
  flex: 1;
  padding: 14px;
}

.sticky-cta .btn--heart {
  flex: 0 0 48px;
  padding: 0;
  font-size: 20px;
}

/* ── STAR RATING ───────────────────────────────────────────────────────────── */
.stars {
  display: flex;
  gap: 2px;
  color: var(--color-gold);
  font-size: 14px;
}

/* ── BREADCRUMB ────────────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: 13px;
  color: var(--color-gray);
  padding: var(--space-md) 0;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ── PAGINATION ────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}

.pagination a,
.pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-light);
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination a:hover,
.pagination button:hover:not(:disabled),
.pagination a.active,
.pagination button.active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination .pg-gap {
  display: flex;
  align-items: center;
  color: var(--color-gray);
  padding: 0 2px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: TABLET (768px+)
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-xl);
  }

  .hero__title {
    font-size: 48px;
  }

  .hero__content {
    padding: var(--space-2xl) var(--space-xl);
  }

  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }

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

  .brand-story {
    grid-template-columns: 1fr 1fr;
  }

  .trust-grid {
    /* SİYAH BANT TEK SATIR (Kırmızı Halı/_base portu, 2026-07-20):
       app.js her .trust-grid'e 5. kalemi ("Gizli Paketleme") ekliyor —
       4 sütunda 5. kalem ikinci satıra TEK BAŞINA sarkıyordu. 5 eşit sütun +
       geniş max-width + dar gap ile beş kalem tek satırda durur. */
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    max-width: 1180px;
  }

  .trust-item__title,
  .trust-item__desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-scroll .product-card {
    flex: 0 0 200px;
  }

  .product-info__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .product-info__cta .btn {
    width: 100%;
    padding: 16px;
  }

  .sticky-cta {
    display: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: DESKTOP (1024px+)
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }

  .mobile-menu-btn {
    display: none;
  }

  .hero {
    height: 85vh;
    min-height: 640px;
  }

  .hero__title {
    font-size: 56px;
  }

  .section-title {
    font-size: 36px;
  }

  .product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }

}

/* ═════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY & PERFORMANCE
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Active / tap feedback */
button:active,
.btn:active,
a:active {
  transform: scale(0.97);
  transition: transform 100ms ease;
}

.product-card:active {
  transform: scale(0.985);
  transition: transform 100ms ease;
}

.category-card:active {
  transform: scale(0.98);
  transition: transform 100ms ease;
}

.mobile-menu-btn:active,
.mobile-nav-close:active,
.header-icons a:active {
  transform: scale(0.92);
}

.swatch:active,
.size-btn:active {
  transform: scale(0.92);
  transition: transform 100ms ease;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--color-dark);
  color: var(--color-white);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  z-index: 400;
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Focus styles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-rose);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--color-gold);
  color: var(--color-white);
}

/* ═════════════════════════════════════════════════════════════════════════════
   PREMIUM PDP — PRODUCT EVIDENCE MODULES (v1.2)
   Zoom · Fullscreen Gallery · Detail Callouts · Fabric Card · Storytelling
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Storytelling hint ──────────────────────────────────────────────────────── */
.evidence-hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray);
}
.evidence-hint svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  stroke: var(--color-gold);
  fill: none; stroke-width: 1.6;
}

/* ── Gallery main: zoom affordance ──────────────────────────────────────────── */
.product-gallery__main { position: relative; cursor: zoom-in; }

.zoom-hint {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 6;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.zoom-hint svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.product-gallery__main.zooming .zoom-hint { opacity: 0; }

/* ── Zoom lens + result panel ───────────────────────────────────────────────── */
.zoom-lens {
  position: absolute; top: 0; left: 0;
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.zoom-lens.active { opacity: 1; }

.zoom-panel {
  position: absolute;
  top: 0; left: calc(100% + var(--space-lg));
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #fff;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.zoom-panel.active { opacity: 1; }

/* ── Detail Callout Layer ───────────────────────────────────────────────────── */
.callout-layer { position: absolute; inset: 0; z-index: 7; }

.callout-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  padding: 0; border: none; background: none;
  cursor: pointer;
  display: grid; place-items: center;
}
.callout-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 6px rgba(0,0,0,0.28);
  transition: transform var(--transition-fast);
}
.callout-dot::after {
  content: '';
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-rose);
}
.callout-dot:hover::before, .callout-dot.open::before { transform: scale(1.18); }

.callout-label {
  position: absolute;
  bottom: 145%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  background: var(--color-dark);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.callout-dot:hover .callout-label, .callout-dot.open .callout-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.callout-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--space-md);
  background: var(--color-cream);
  border: 1px solid var(--color-cream-warm);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.callout-toggle:hover { background: var(--color-cream-warm); }
.callout-toggle svg { width: 15px; height: 15px; stroke: var(--color-gold); fill: none; stroke-width: 2; }

/* ── Fabric / Quality Evidence Card ─────────────────────────────────────────── */
.fabric-card {
  margin-top: var(--space-xl);
  border: 1px solid var(--color-cream-warm);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fff, var(--color-cream));
  padding: var(--space-lg);
}
.fabric-card__title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 var(--space-md);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-dark);
}
.fabric-card__title svg { width: 18px; height: 18px; stroke: var(--color-gold); fill: none; stroke-width: 1.6; }
.fabric-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin: 0;
}
.fabric-row { display: flex; flex-direction: column; gap: 3px; }
.fabric-row dt {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray);
}
.fabric-row dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
}
@media (max-width: 520px) { .fabric-card__grid { grid-template-columns: 1fr; } }

/* ── Fullscreen Gallery Modal ───────────────────────────────────────────────── */
.fs-gallery {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(22, 19, 19, 0.96);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.fs-gallery.open { opacity: 1; visibility: visible; }
.fs-gallery__bar { display: flex; justify-content: flex-end; padding: 16px 20px; }
.fs-gallery__close {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 8px;
  display: grid; place-items: center;
}
.fs-gallery__close svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.fs-gallery__stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 0 12px;
}
.fs-gallery__img {
  max-width: 90%; max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  user-select: none; -webkit-user-drag: none;
}
.fs-gallery__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none; color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transition-fast);
}
.fs-gallery__nav:hover { background: rgba(255,255,255,0.22); }
.fs-gallery__nav svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
.fs-gallery__nav--prev { left: 16px; }
.fs-gallery__nav--next { right: 16px; }
.fs-gallery__dots { display: flex; justify-content: center; gap: 8px; padding: 18px; }
.fs-gallery__dots button {
  width: 8px; height: 8px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer; padding: 0;
  transition: background var(--transition-fast);
}
.fs-gallery__dots button.active { background: #fff; }
@media (max-width: 767px) {
  .fs-gallery__nav { width: 40px; height: 40px; }
  .fs-gallery__img { max-width: 95%; }
}

/* Suppress hover-zoom affordance where there is no fine pointer */
@media (hover: none), (pointer: coarse) {
  .product-gallery__main { cursor: pointer; }
  .zoom-lens, .zoom-panel { display: none !important; }
}

/* ── Fullscreen gesture zoom (pinch · double-tap · pan) ──────────────────────── */
.fs-gallery__stage { touch-action: none; }
.fs-gallery__img {
  transform-origin: center center;
  will-change: transform;
  transform: translate(0, 0) scale(1);
}
.fs-gallery__tip {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  max-width: 86vw;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  z-index: 2;
}
.fs-gallery__tip.show { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .fs-gallery__tip { display: none; } }

/* ── Ken Burns motion preview (honest pseudo-video from the still) ───────────── */
.gallery-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-md); }
.gallery-actions .callout-toggle { margin-top: 0; }

.motion-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 0;
  background: var(--color-dark);
  border: 1px solid var(--color-dark);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.motion-toggle:hover { background: var(--color-dark-deep); }
.motion-toggle svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.motion-toggle.is-on { background: var(--color-rose); border-color: var(--color-rose); }

@keyframes kb-drape {
  0%   { transform: scale(1.06) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-2%, -2%); }
  100% { transform: scale(1.06) translate(2%, 1%); }
}
.product-gallery__main.motion { cursor: pointer; }
.product-gallery__main.motion img#mainImage {
  animation: kb-drape 12s ease-in-out infinite alternate;
}
.product-gallery__main.motion .callout-layer,
.product-gallery__main.motion .zoom-hint { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .product-gallery__main.motion img#mainImage { animation: none; }
}

/* ── Mobile: kill any horizontal page panning from off-canvas overlays ───────── */
html, body { overflow-x: hidden; }
body { max-width: 100%; }

/* ── Inline swipeable gallery (mobile) ──────────────────────────────────────── */
.inline-dots {
  display: flex; justify-content: center; gap: 7px;
  margin-top: var(--space-sm);
}
.inline-dots button {
  width: 7px; height: 7px;
  padding: 0; border: none;
  border-radius: 50%;
  background: var(--color-gray-light);
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}
.inline-dots button.active {
  width: 18px; border-radius: 4px;
  background: var(--color-dark);
}
@media (min-width: 768px) {
  .inline-dots { display: none; }   /* desktop uses the thumb strip */
}
@media (max-width: 767px) {
  .product-gallery__thumbs { display: none; } /* mobile uses swipe + dots */
}

/* Sticky add button: keep the live variant label on one line */
.sticky-cta .btn--primary { white-space: nowrap; }

/* ── Cart drawer + badge (works across pages, localStorage) ──────────────────── */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 399;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
.cart-overlay.active { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw, 400px);
  background: var(--color-white);
  z-index: 400;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  /* visibility:hidden while closed removes this off-canvas panel from the pannable
     area (fixed elements escape body{overflow-x:hidden} on iOS → horizontal page drift).
     Delay the change to hidden until the slide-out finishes. Mirrors .search-overlay. */
  visibility: hidden;
  transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
  box-shadow: -8px 0 30px rgba(0,0,0,0.18);
}
.cart-drawer.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-base), visibility 0s;
}
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-cream-warm);
}
.cart-drawer__head h3 {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0;
}
.cart-close { background: none; border: none; cursor: pointer; color: var(--color-dark); display: grid; place-items: center; width: 36px; height: 36px; }
.cart-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }

.cart-items { flex: 1; overflow-y: auto; padding: var(--space-md) var(--space-lg); }
.cart-empty { color: var(--color-gray); font-size: 14px; text-align: center; padding: var(--space-2xl) 0; }
.cart-item { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-cream); }
.cart-item img { width: 64px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__title { font-family: var(--font-body); font-size: 14px; color: var(--color-dark); margin: 0 0 2px; }
.cart-item__meta { font-size: 12px; color: var(--color-gray); }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--color-cream-warm); border-radius: 999px; }
.cart-qty button { width: 28px; height: 28px; border: none; background: none; cursor: pointer; font-size: 16px; color: var(--color-dark); }
.cart-qty span { min-width: 22px; text-align: center; font-size: 13px; }
.cart-item__price { font-family: var(--font-ui); font-weight: 600; font-size: 14px; }
.cart-item__remove { background: none; border: none; color: var(--color-gray); font-size: 12px; cursor: pointer; text-decoration: underline; margin-top: 6px; padding: 0; }

.cart-drawer__foot { padding: var(--space-lg); border-top: 1px solid var(--color-cream-warm); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-md); }
.cart-total .label { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gray); }
.cart-total .value { font-family: var(--font-ui); font-size: 20px; font-weight: 700; }

.header-icons a[aria-label="Sepet"] { position: relative; }
.cart-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--color-rose); color: #fff;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cart-badge.hidden { display: none; }

/* ── Campaign pricing ────────────────────────────────────────────────────────── */
.price-now { color: var(--color-dark); order: 3; }
.price-now.sale { color: var(--color-rose); }
.price-old { color: var(--color-gray); text-decoration: line-through; font-size: 0.78em; font-weight: 400; order: 2; }
.price-off { display: inline-block; background: var(--color-rose); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; align-self: center; order: 1; }
/* PDP fiyat bloğu da aynı sırayı kullansın (scoped, diğer .text-2xl'leri etkilemez) */
.product-info .text-2xl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ── Category controls + quick-add ───────────────────────────────────────────── */
.cat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--space-md) 0; }
.cat-ctrl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--color-gray); }
.cat-ctrl select { font-family: var(--font-ui); font-size: 13px; padding: 8px 12px; border: 1px solid var(--color-cream-warm); border-radius: var(--radius-sm); background: #fff; color: var(--color-dark); cursor: pointer; }
.cat-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.color-chip { font-family: var(--font-ui); font-size: 12px; color: var(--color-dark); background: #fff; border: 1px solid var(--color-cream-warm); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all var(--transition-fast); }
.color-chip:hover { border-color: var(--color-gold); }
.color-chip.active { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.cat-more { display: block; margin: var(--space-xl) auto 0; min-width: 220px; }

.product-card-wrap { position: relative; display: flex; flex-direction: column; }
.card-add {
  margin-top: 8px;
  background: var(--color-dark); color: #fff; border: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  padding: 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.card-add:hover { background: var(--color-rose); }
@media (hover: hover) and (pointer: fine) {
  .card-add { opacity: 0; }
  .product-card-wrap:hover .card-add { opacity: 1; }
}

/* ── Search overlay ──────────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: var(--color-white);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-head { display: flex; align-items: center; gap: 12px; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-cream-warm); }
.search-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-display); font-size: 22px; color: var(--color-dark); }
.search-close { background: none; border: none; cursor: pointer; color: var(--color-dark); display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; }
.search-close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
.search-results { flex: 1; overflow-y: auto; padding: var(--space-lg); }
.search-hint { color: var(--color-gray); font-size: 13px; margin: 0 0 var(--space-md); }
/* Popüler aramalar çipleri (#P1-8) */
.pop-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pop-chip { font-family: var(--font-ui); font-size: 13px; color: var(--color-dark); background: var(--color-cream); border: 1px solid var(--color-cream-warm); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.pop-chip:hover { background: var(--color-rose); color: #fff; border-color: var(--color-rose); }

/* ── Favorites icon + badge ──────────────────────────────────────────────────── */
.header-icons .fav-icon { position: relative; }
.fav-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--color-dark); color: #fff;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.fav-badge.hidden { display: none; }

/* ── Cart free-shipping progress bar ─────────────────────────────────────────── */
.cart-ship { margin-bottom: var(--space-md); }
.ship-msg { font-family: var(--font-ui); font-size: 12px; color: var(--color-gray); margin-bottom: 6px; }
.ship-msg.done { color: #2e7d4f; font-weight: 600; }
.ship-msg strong { color: var(--color-rose); }
.ship-bar { height: 6px; background: var(--color-cream-warm); border-radius: 999px; overflow: hidden; }
.ship-bar span { display: block; height: 100%; background: var(--color-gold); transition: width 300ms ease; }
.ship-msg.done + .ship-bar span { background: #2e7d4f; }

/* ── Filter chips: Renk / Beden / Materyal (#3) ──────────────────────────────── */
.cat-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cat-chips__lbl { font-family: var(--font-ui); font-size: 12px; color: var(--color-gray); margin-right: 2px; }
.filter-chip { font-family: var(--font-ui); font-size: 12px; color: var(--color-dark); background: #fff; border: 1px solid var(--color-cream-warm); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all var(--transition-fast); }
.filter-chip:hover { border-color: var(--color-gold); }
.filter-chip.active { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

/* ── Real rating on cards + PDP (#2) ─────────────────────────────────────────── */
.card-rating { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-family: var(--font-ui); font-size: 12px; }
.card-rating .rating-stars { color: var(--color-gold); letter-spacing: 1px; font-size: 12px; }
.card-rating .rating-val { font-weight: 600; color: var(--color-dark); }
.card-rating .rating-cnt { color: var(--color-gray); }

/* ── Weekly countdown / urgency strip (#4) ───────────────────────────────────── */
.promo-strip {   /* #5: büyütüldü + vurgu (rose gradient, dikkat çekici) */
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, #a30050, var(--color-rose) 55%, #e85a9a);
  color: #fff;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
  padding: 14px 50px 14px 20px; position: relative; text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10);
}
.promo-strip__txt { text-transform: uppercase; }
.promo-strip__time { font-weight: 800; color: #fff; background: rgba(0,0,0,.24); padding: 4px 12px; border-radius: 999px; font-size: 1.02em; font-variant-numeric: tabular-nums; }
.promo-strip__x {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; opacity: 0.65; padding: 4px;
}
.promo-strip__x:hover { opacity: 1; }
@media (max-width: 600px) {
  .promo-strip { font-size: 13px; gap: 10px; padding: 11px 38px 11px 14px; }
}

/* ── Sepette indirim satırı (#P2-10) ─────────────────────────────────────── */
.cart-discount { margin: 6px 0; }
.cart-promo { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-dark); background: var(--color-cream); border: 1px dashed var(--color-cream-warm); border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; }
.cart-promo--on { color: #1a7a4a; background: #eef8f1; border-color: #bfe6cd; }

/* ── Hızlı Bakış (Quick-view) — #P2-11 ───────────────────────────────────── */
.product-card__image { position: relative; }
.qv-btn { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 8px); z-index: 2;
  background: rgba(255,255,255,.95); color: var(--color-dark); font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.product-card:hover .qv-btn, .qv-btn:focus { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (hover: none) { .qv-btn { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); bottom: 8px; font-size: 11px; padding: 6px 12px; } }

.qv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 200ms ease; }
.qv-overlay.active { opacity: 1; visibility: visible; }
.qv-modal { background: #fff; border-radius: 14px; max-width: 760px; width: 100%; max-height: 88vh; overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.qv-close { position: absolute; right: 12px; top: 12px; z-index: 3; background: rgba(255,255,255,.92); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.qv-body { display: flex; width: 100%; }
.qv-media { flex: 0 0 46%; background: var(--color-cream); }
.qv-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.qv-info { flex: 1; padding: var(--space-xl); overflow-y: auto; }
.qv-title { font-family: var(--font-display, 'Playfair Display', serif); font-size: 20px; line-height: 1.3; margin: 0 0 10px; }
.qv-price { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md); }
.qv-row { margin: var(--space-md) 0; }
.qv-lbl { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.qv-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-size { font-family: var(--font-ui); font-size: 13px; border: 1px solid var(--color-cream-warm); background: #fff; border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; }
.qv-size.active { border-color: var(--color-dark); background: var(--color-dark); color: #fff; }
.qv-colors { display: flex; gap: 10px; }
.qv-color { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px var(--color-cream-warm); }
.qv-color.active { box-shadow: 0 0 0 2px var(--color-dark); }
.qv-actions { display: flex; gap: 10px; margin-top: var(--space-lg); }
.qv-actions .btn { flex: 1; text-align: center; }
.qv-trust { font-size: 12px; color: var(--color-gray); margin-top: var(--space-md); }
.qv-loading { padding: var(--space-2xl); text-align: center; color: var(--color-gray); }
@media (max-width: 600px) { .qv-body { flex-direction: column; } .qv-media { flex: 0 0 auto; height: 240px; } .qv-modal { max-height: 90vh; overflow-y: auto; } }

/* ═══ KAMPANYA KATMANI (konsept-güvenli: rose/cream, minimal) ═══ */

/* 1) Kategori kartı kampanya satırı */
.category-card__promo { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-gold); }

/* 2) Ürün kartı rozetleri (Çok Satan / Flaş) — görselin sol üstü */
.pcard-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 9px; border-radius: 999px; line-height: 1; }
.pcard-badge--best { background: #fff; color: #8a6d2f; border: 1px solid var(--color-gold); }
.pcard-badge--flash { background: var(--color-rose); color: #fff; }

/* 3) Günün Fırsatları flaş bölümü */
.flash-section { padding: var(--space-2xl) 0; background: linear-gradient(180deg, #fbf4f6, var(--color-cream)); }
.flash-head { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: var(--space-lg); }
.flash-head h2 { font-family: var(--font-display, 'Playfair Display', serif); font-size: clamp(22px, 3vw, 30px); margin: 0; }
.flash-countdown { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--color-dark); }
.flash-countdown b { background: var(--color-dark); color: #fff; padding: 5px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* 4) İlk sipariş indirimi — köşe slide-in (pop-up değil, ince) */
.fo-slidein { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 320px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid var(--color-cream-warm); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 20px 20px 18px; transform: translateY(140%); transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.fo-slidein.show { transform: translateY(0); }
.fo-slidein__x { position: absolute; right: 10px; top: 8px; background: none; border: none; font-size: 15px; color: var(--color-gray); cursor: pointer; line-height: 1; }
.fo-slidein__title { font-family: var(--font-display, 'Playfair Display', serif); font-size: 19px; margin: 0 0 4px; }
.fo-slidein__sub { font-size: 12.5px; color: var(--color-gray); margin: 0 0 12px; }
.fo-slidein__row { display: flex; gap: 8px; }
.fo-slidein__row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-cream-warm); border-radius: var(--radius-sm); font-size: 13px; }
.fo-slidein__row button { white-space: nowrap; padding: 10px 16px; border: none; background: var(--color-rose); color: #fff; border-radius: var(--radius-sm); font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer; }
.fo-slidein__ok { font-size: 13px; color: #1a7a4a; text-align: center; padding: 8px 0; }

/* ═══ KG-FILTER — Sol Dikey Filtre Sütunu (≥1024px) ═══════════════════════ */

/* Kategori sayfası 2 sütun: [filtre 240px] [içerik flex-1] */
.kg-cat-layout {
  display: block; /* mobil: tek sütun (filtre drawer'da) */
}
@media (min-width: 1024px) {
  .kg-cat-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
  }
}

/* Sol filtre sütunu */
.kg-filter-sidebar {
  display: none; /* mobilde gizli — aynı içerik drawer'a render edilir */
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 80px; /* header yüksekliği + boşluk */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-bottom: var(--space-lg);
}
@media (min-width: 1024px) {
  .kg-filter-sidebar {
    display: block;
  }
}

/* Sağ içerik bölgesi */
.kg-cat-content {
  flex: 1;
  min-width: 0; /* flex overflowu engelle */
}

/* Filtre grup başlığı */
.kg-filter-group {
  border-bottom: 1px solid var(--color-cream-warm);
  padding: var(--space-md) 0;
}
.kg-filter-group:first-child {
  padding-top: 0;
}
.kg-filter-group__title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}

/* Hızlı toggle butonları (İndirimli / Yeni) */
.kg-filter-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kg-filter-toggle {
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--color-cream-warm);
  border-radius: 999px;
  background: #fff;
  color: var(--color-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.kg-filter-toggle:hover { border-color: var(--color-gold); }
.kg-filter-toggle.active {
  background: var(--color-dark);
  color: #fff;
  border-color: var(--color-dark);
}

/* Renk listesi */
.kg-filter-colors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kg-filter-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  padding: 2px 0;
}
.kg-filter-color-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-dark);
  cursor: pointer;
  flex-shrink: 0;
}
.kg-filter-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}
.kg-filter-color-name { flex: 1; }
.kg-filter-color-count {
  color: var(--color-gray);
  font-size: 11px;
}

/* Beden listesi */
.kg-filter-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kg-filter-size {
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--color-cream-warm);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.kg-filter-size:hover { border-color: var(--color-gold); }
.kg-filter-size.active {
  background: var(--color-dark);
  color: #fff;
  border-color: var(--color-dark);
}

/* Fiyat min/max girdileri */
.kg-filter-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kg-filter-price-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-cream-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  background: #fff;
}
.kg-filter-price-input:focus {
  outline: none;
  border-color: var(--color-gold);
}
.kg-filter-price-sep {
  color: var(--color-gray);
  font-size: 13px;
  flex-shrink: 0;
}
.kg-filter-price-apply {
  width: 100%;
  padding: 9px;
  background: var(--color-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.kg-filter-price-apply:hover { background: var(--color-rose); }

/* Filtreleri Temizle bağlantısı */
.kg-filter-reset {
  display: none; /* aktif filtre varsa gösterilir */
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-gray);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-sm) 0 0;
  margin-top: var(--space-sm);
}
.kg-filter-reset:hover { color: var(--color-rose); }
.kg-filter-reset.visible { display: inline-block; }

/* ── Aktif filtre çipleri + sonuç sayısı (gridin üstü) ── */
.kg-filter-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
  min-height: 32px;
}
.kg-result-count {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-gray);
  flex-shrink: 0;
}
.kg-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.kg-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 12px;
  background: var(--color-dark);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
}
.kg-active-chip__x {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: .8;
  display: inline-flex;
  align-items: center;
}
.kg-active-chip__x:hover { opacity: 1; }

/* Sıralama kontrolü (masaüstü topbar'ında) */
.kg-sort-ctrl {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-gray);
  margin-left: auto;
}
@media (min-width: 1024px) {
  .kg-sort-ctrl {
    display: inline-flex;
  }
}
.kg-sort-ctrl select {
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--color-cream-warm);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-dark);
  cursor: pointer;
}

/* Mobil drawer'da filtre bölümleri */
.kg-drawer-filter-group {
  margin-bottom: var(--space-xl);
}
.kg-drawer-filter-group .kg-filter-group__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
/* Mobil drawer uygula butonu */
.kg-drawer-apply {
  position: sticky;
  bottom: var(--space-md);
  width: 100%;
  margin-top: var(--space-md);
}

/* Masaüstünde filter-bar ve cat-controls'u gizle */
@media (min-width: 1024px) {
  .filter-bar { display: none !important; }
  #catControls { display: none !important; }
}
@media (max-width: 600px) { .fo-slidein { right: 12px; left: 12px; bottom: 12px; width: auto; } }

/* ── Üyelik sayfaları (giris / kayit / hesabim) ─────────────────────────────
   Premium minimal: cream zemin, beyaz kart, Playfair başlık, altın vurgu. */
.auth-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  min-height: 70vh;
}
.auth-back {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray);
  margin-bottom: var(--space-xl);
  transition: color var(--transition-base);
}
.auth-back:hover { color: var(--color-rose); }
.auth-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.auth-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-gray);
  margin-bottom: var(--space-xl);
}
.auth-form {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.auth-field { display: flex; flex-direction: column; gap: var(--space-sm); }
.auth-field label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-dark);
}
.auth-optional { color: var(--color-gray); font-weight: 400; text-transform: none; letter-spacing: 0; }
.auth-field input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-dark);
  background: var(--color-cream);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.auth-field input:focus { border-color: var(--color-gold); background: var(--color-white); }
.auth-consent {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray);
  cursor: pointer;
}
.auth-consent input { margin-top: 3px; accent-color: var(--color-rose); flex: none; }
.auth-consent a { color: var(--color-rose); text-decoration: underline; }
.auth-msg { font-size: 13px; line-height: 1.5; min-height: 1em; margin: 0; }
.auth-msg--err { color: #B3261E; }
.auth-msg--ok  { color: #1B6E4A; }
.auth-submit { width: 100%; border: none; cursor: pointer; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-alt { text-align: center; font-size: 14px; color: var(--color-gray); margin-top: var(--space-lg); }
.auth-alt a { color: var(--color-rose); font-weight: 500; }

/* Hesabım */
.acct-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.acct-card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: var(--space-md);
}
.acct-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  font-size: 14px;
  border-bottom: 1px solid var(--color-cream-warm);
}
.acct-row:last-child { border-bottom: none; }
.acct-row dt { color: var(--color-gray); }
.acct-row dd { color: var(--color-dark); font-weight: 500; text-align: right; }
.acct-actions { display: flex; flex-direction: column; gap: var(--space-md); }
.acct-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-dark);
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: all var(--transition-base);
}
.acct-btn:hover { background: var(--color-dark); color: var(--color-white); }
.acct-btn--danger { border-color: #B3261E; color: #B3261E; }
.acct-btn--danger:hover { background: #B3261E; color: var(--color-white); }
.acct-note { font-size: 12px; line-height: 1.6; color: var(--color-gray); margin-top: var(--space-sm); }


/* ── LİSTE KARTI FİYATI (orijinal site paritesi, 2026-07-20) ──────────────────
   Üstü çizili eski fiyat + altında "%X İndirim ₺Y" rozeti. YALNIZ category
   liste kartlarında (.liste-fiyat) — PDP ve ana sayfa kuşakları kapsam dışı. */
.product-card__price.liste-fiyat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
}

.liste-fiyat__eski {
  font-size: 13px;
  color: var(--color-gray);
  text-decoration: line-through;
}

.liste-fiyat__rozet {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #C2185B;
  background: #FCE4EC;
  border-radius: 3px;
  padding: 3px 8px;
  line-height: 1.25;
}

.liste-fiyat__rozet--sade {
  color: var(--color-dark);
  background: transparent;
  padding: 3px 0;
}