/* ==========================================================================
   MERT GÜMÜŞ — Design tokens
   ========================================================================== */
:root{
  --bg:            #FAF7F3;
  --bg-secondary:  #F3EBE4;
  --header:        #E6D1C0;
  --text:          #35231D;
  /* Darkened from the original #74665F (~4.8:1 on the site's light/cream
     surfaces) to a ~7:1-contrast tone — every existing var(--text-secondary)
     reference site-wide (product cards, breadcrumbs, form notes, cart
     lines, etc.) gets more legible for free, with zero per-rule edits.
     Only ever used on light surfaces already (never inside the dark
     mocha footer/hero, which have their own dedicated light-on-dark
     tokens below), so darkening it here is safe in every context it's
     actually referenced in. */
  --text-secondary:#5C4B42;
  --cta:           #4A2D21;
  --cta-text:      #FFFAF5;
  --silver:        #D9DDE1;
  --champagne:     #CDB89F;

  /* Champagne Mocha — dark-surface palette (hero + footer only) */
  --mocha-deep:    #3B2A23;
  --mocha-medium:  #8B6F56;
  --champagne-soft:#DCC7B1;
  --ivory-warm:    #F5EFE8;
  --taupe-accent:  #B89C82;
  --footer-muted:  #C5AD99;
  --copyright-tone:#BFA793;

  /* Header nav — second row */
  --nav-secondary-light:  #5A3C31;

  /* Inner pages — warm champagne/mocha surfaces (inner pages only, never
     referenced by homepage rules). Deliberately NOT near-white: these are
     the actual jewelry-boutique tones, not a paler "light mode" of them.
     Canonical role assignment (each tone has exactly one job, so no two
     sections on the same page ever read as the same surface by accident):
       --inner-base      page base
       --inner-alt       alternate/vurgulu section
       --inner-surface   light premium surface (reserved accent tone)
       --inner-card      card / form surface
       --inner-warn      info / warning box
       --inner-editorial deep dark editorial section — NOT the footer's
                         #4A2D21, so a dark content section never visually
                         fuses with the footer beneath it
     --inner-deep is unrelated to this role list — it's a muted icon color
     (empty states, placeholder art), left as-is. */
  --inner-base:     #F1E2D6;
  --inner-alt:      #E5CFBE;
  --inner-surface:  #F6E8DC;
  --inner-deep:     #D5B8A1;
  --inner-editorial:#593728;
  --inner-card:     #F8EEE6;
  --inner-warn:     #DFC5B1;
  --inner-input:    #F3E3D6;
  --inner-mocha:    #6A4A3B;
  --inner-text:     #35231D;
  --inner-body:     #59453D;
  --inner-muted:    #78645A;
  --inner-border:   rgba(74,45,33,.13);

  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:'Sacramento', cursive;

  --fs-hero:  clamp(2.6rem, 5.2vw + 1rem, 5.4rem);
  --fs-h2:    clamp(1.9rem, 2.4vw + 1rem, 3.1rem);
  --fs-h3:    clamp(1.3rem, 1vw + 1rem, 1.7rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem; /* 13px — small uppercase-tracked labels, never below this */

  /* ---- Shared readability scale (site-wide typography pass) ----
   * Everything a person actually reads — form fields, buttons, product
   * names/prices, footer copy — is built from these, so the floor never
   * silently drifts back down to a hairline size in one component while
   * staying fixed everywhere else.
   *   --fs-label     form field labels
   *   --fs-input     text typed/read inside input, select, textarea
   *   --fs-button    button/CTA labels
   *   --fs-helper    small helper/legal/description text — same value as
   *                  --fs-small (14px), named separately so its role here
   *                  (readability floor) reads clearly at each call site
   *   --fs-name      product name on a catalog card
   *   --fs-price     product price on a catalog card
   */
  --fs-label:  0.9375rem; /* 15px */
  --fs-input:  1rem;      /* 16px */
  --fs-button: 0.9375rem; /* 15px */
  --fs-helper: var(--fs-small); /* 14px */
  --fs-name:   1rem;      /* 16px */
  --fs-price:  1.125rem;  /* 18px */

  --container-max: 1400px;
  --pad-inline: clamp(20px, 4.5vw, 64px);
  --section-pad: clamp(64px, 9vw, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: 350ms;
  --dur-m: 550ms;
  --dur-l: 700ms;

  --radius-sm: 3px;
  --radius-md: 4px;
}

/* ==========================================================================
   Local brand font — REMOVED. This used to declare an @font-face for
   'Richmond' (a licensed script/calligraphy face never actually bundled —
   no font file ever shipped in /fonts/), but .logo-script (below) never
   referenced 'Richmond' in its own font-family anyway — it was always
   var(--font-serif) directly. So this @font-face was pure dead weight
   pointing at two files that don't exist; removing it changes nothing
   visually (the header logo wordmark keeps using --font-serif, Cormorant
   Garamond, exactly as it already did) and stops the browser ever
   requesting fonts/Richmond.woff2/.woff. If a real licensed script font
   for the logo is added later, wire its own @font-face AND update
   .logo-script's font-family together, in the same change.
   ========================================================================== */

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
/* Guarantee the native [hidden] attribute always hides an element, even when
   a component also sets its own `display` (e.g. .product-grid{display:grid})
   — without this, an equal-specificity author rule can silently beat the
   browser's default [hidden]{display:none}. */
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input{ font: inherit; }
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link{
  position: absolute; left: 12px; top: -60px;
  background: var(--cta); color: var(--cta-text);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); z-index: 1000;
  transition: top var(--dur-s) var(--ease);
}
.skip-link:focus{ top: 12px; }

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

.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.section-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--text);
  margin-top: 10px;
  letter-spacing: .002em;
}
.section-head{ max-width: 620px; margin-bottom: clamp(36px, 5vw, 64px); }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* "Neden [Mert Gümüş]?" heading only — a refined script accent on the
   brand name while "Neden" and "?" stay in the normal section-title
   serif. Sized in em (relative to the parent h2's own clamp()) so it
   scales with the heading at every breakpoint without separate media
   queries; nudged up slightly and given a touch of extra tracking since
   script faces read visually smaller than a serif at the same size. */
.script-name{
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: .01em;
  line-height: 1;
  color: inherit;
}

/* ==========================================================================
   Free shipping strip — informational only, never the source of truth for
   the actual shipping fee (that's api/_shipping.php, server-side, at
   checkout). Two variants:
     .free-shipping-strip    full-bleed banner (home, category/tum-urunler —
                              rendered edge-to-edge, a direct sibling of
                              .container-wrapped sections, never inside one)
     .free-shipping-compact  inline card row (product detail, cart, checkout)
   Both reuse .script-name (defined above) for "ücretsiz kargo" so the
   script accent reads at the same optical size as the rest of the line,
   never visually larger — align-items:baseline keeps the two faces sitting
   on the same line. ========================================================================== */
.free-shipping-strip{
  width: 100%;
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  gap: 6px;
  padding: 9px 20px;
  min-height: 30px;
  box-sizing: border-box;
  background: var(--inner-alt);
  border-top: 1px solid rgba(74,45,33,.12);
  border-bottom: 1px solid rgba(74,45,33,.12);
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: #4A2D21;
  text-align: center;
}
.free-shipping-strip svg{ flex: 0 0 14px; width: 14px; height: 14px; align-self: center; color: #4A2D21; }
/* Category pages: same strip, a touch quieter/thinner than the homepage's,
   per "ince versiyon" — sits above the toolbar/grid, still full-bleed. */
.free-shipping-strip--thin{ padding: 7px 20px; min-height: 28px; font-size: 13px; background: var(--inner-base); }

/* Compact variant (product detail / cart / checkout) — kept to one line on
   desktop (nowrap; wraps again only under the existing 430px breakpoint
   below), icon+text vertically centered rather than baseline-aligned, and
   a tighter line-height/padding since it has much less room than the
   full-bleed strip. */
.free-shipping-compact{
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  margin: 12px 0;
  background: var(--inner-alt);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  color: #4A2D21;
  white-space: nowrap;
}
.free-shipping-compact svg{ flex: 0 0 14px; width: 14px; height: 14px; color: #4A2D21; }

/* "ücretsiz kargo" in the full-bleed strip — plain sans (overrides the
   base .script-name rule, still var(--font-script) elsewhere, e.g. the
   "Neden [Mert Gümüş]?" heading — untouched), bolder and darker than the
   line's own mocha #4A2D21/600, with a hairline underline accent (::after,
   never text-decoration) instead of a badge/box. Compact variant below has
   its own, simpler rule with no underline. */
.free-shipping-strip .script-name{
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 1em !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  color: #2f1d16 !important;
  display: inline-block !important;
  margin-left: 3px !important;
  position: relative !important;
}
.free-shipping-strip .script-name::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* "ücretsiz kargo" in the compact banner — plain sans, bold, dark; no
   underline, no badge/pill, same line as "3500 TL üzeri alışverişlerde". */
.free-shipping-compact .script-name{
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 1em !important;
  line-height: inherit !important;
  letter-spacing: 0.01em !important;
  color: #2f1d16 !important;
  margin-left: 3px !important;
}

@media (max-width: 430px){
  .free-shipping-strip{ padding: 8px 14px; font-size: 12.5px; }
  .free-shipping-compact{ padding: 8px 12px; font-size: 12.5px; white-space: normal; align-items: flex-start; }
}
.section-head--left{ margin-bottom: clamp(28px, 4vw, 44px); }

.text-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--champagne);
  transition: gap var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.text-link svg{ transition: transform var(--dur-s) var(--ease); }
.text-link:hover{ color: var(--cta); gap: 12px; }
.text-link:hover svg{ transform: translateX(2px); }
.text-link:disabled{ color: var(--text-secondary); border-color: transparent; cursor: not-allowed; opacity: .55; }
.text-link:disabled:hover{ gap: 8px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-button); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 17px 40px;
  border-radius: var(--radius-md);
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space: nowrap;
}
/* A disabled action (e.g. "Tükendi", or a submit gated by MG_CONFIG until
   its real backend exists) must read as inert, not merely an ordinary
   button that silently does nothing when clicked. */
.btn:disabled{
  background: rgba(53,35,29,.14);
  color: rgba(53,35,29,.5);
  border-color: transparent;
  cursor: not-allowed;
  transform: none !important;
}
.btn-primary{
  background: var(--cta);
  color: var(--cta-text);
}
.btn-primary:hover{
  background: var(--text);
  transform: translateY(-2px);
}
.btn-light{
  background: var(--champagne-soft);
  color: var(--mocha-deep);
}
.btn-light:hover{
  background: var(--ivory-warm);
  transform: translateY(-2px);
}
.btn-outline{
  background: transparent;
  color: var(--cta);
  border: 1px solid rgba(53,35,29,.28);
}
.btn-outline:hover{
  background: var(--cta);
  color: var(--cta-text);
  border-color: var(--cta);
  transform: translateY(-2px);
}
/* "Hemen Al" — a distinct secondary tier next to Sepete Ekle
   (.btn-primary, solid) and Favorilere Ekle (.btn-outline): a light
   ivory fill with a thin mocha edge and dark mocha text, reading as a
   real premium button (not plain text) while staying visually secondary
   to the solid primary CTA. */
.btn-buy-now{
  background: var(--ivory-warm);
  color: var(--text);
  border: 1px solid var(--cta);
  font-weight: 700;
  letter-spacing: .07em;
}
.btn-buy-now:hover{
  background: var(--cta);
  color: var(--cta-text);
  transform: translateY(-2px);
}
.btn-buy-now:disabled{
  transform: none !important;
}
/* Desktop: Sepete Ekle + Hemen Al grow/shrink together to a balanced,
   even width on the qty-control's row; Favorilere Ekle — the tertiary
   action — always drops to its own full-width row underneath, reading
   as clearly lower-priority than the two primary/secondary CTAs above
   it instead of competing for space in the same row. */
@media (min-width: 641px){
  .product-actions [data-add-to-cart],
  .product-actions [data-buy-now]{ flex: 1 1 190px; }
  .product-info .product-actions [data-add-to-fav]{ flex: 1 1 100%; margin-top: 2px; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  /* Visible by default: reveal-on-scroll is an optional enhancement.
     JS opts an element into the animated hidden state via .reveal-armed
     only once it has also set up the observer that will reveal it, so
     missing/delayed/disabled JS or a full-page screenshot never leaves
     content stuck invisible. */
  opacity: 1;
  transform: none;
}
[data-reveal].reveal-armed{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].reveal-armed.is-visible{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  /* .home-ribbon-track is exempt: the trust-strip marquee is decorative
     and must keep scrolling continuously even with reduced motion on. */
  *:not(.home-ribbon-track){ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Media placeholder system
   (Stand-ins for real product / campaign photography — swap the .category-media,
   .hero-media, .seasonal-media etc. backgrounds for <img>/<video> in production.)
   ========================================================================== */
.featured-media, .gallery-main, .gallery-sub, .hero-media{
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg-secondary) 0%, var(--bg) 62%, var(--silver) 130%);
  isolation: isolate;
}
.featured-media::after, .gallery-main::after, .gallery-sub::after, .hero-media::after{
  content: '';
  position: absolute; inset: 0;
  opacity: .05; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.featured-motif{
  color: var(--champagne);
  width: 34%;
  transition: transform var(--dur-m) var(--ease);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 500;
  /* Same treatment as body.home's header (rgba mocha + blur, see below) —
     inner pages have no hero to scroll past, so this is simply their
     header's only state. body.home's own rule is more specific and keeps
     winning on the homepage untouched. */
  background: rgba(74,45,33,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
/* Belt-and-suspenders: guarantees every inner page's header matches the
   homepage's mocha header pixel-for-pixel regardless of any future
   .is-light-style override, without touching body.home at all. */
body:not(.home) .site-header{
  background: #4A2D21 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
body:not(.home) .site-header .logo-script,
body:not(.home) .site-header .nav-list a,
body:not(.home) .site-header .icon-btn{
  color: #F4EDE6 !important;
}
body:not(.home) .site-header .logo-subtitle{
  color: rgba(244,237,230,.76) !important;
}
/* Root fix, not a one-off patch: the rule above targets ".nav-list a",
   which — since the Kadın/Erkek dropdown panel's links live inside
   .nav-list too — was also forcing the dropdown's own links to this same
   light cream !important, making them unreadable against the dropdown's
   light panel background. Same specificity + !important, declared after,
   so this wins back only for links actually inside .nav-dropdown; the
   header's own light-on-dark nav text above is untouched. */
body:not(.home) .site-header .nav-dropdown a{
  color: #4A2D21 !important;
}
body:not(.home) .site-header .nav-dropdown a:hover,
body:not(.home) .site-header .nav-dropdown a:focus-visible{
  color: #35231D !important;
  background: rgba(74,45,33,.07);
}
body:not(.home) .site-header .nav-dropdown a:active{
  color: #35231D !important;
  font-weight: 600;
}
.site-header.is-light{
  background: var(--header);
  border-bottom-color: rgba(53,35,29,.08);
}
.header-inner{
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  align-items: center;
  gap: 24px;
  height: 67px;
  transition: height var(--dur-s) var(--ease);
}
.site-header.is-scrolled .header-inner{ height: 55px; }

.logo{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text);
  white-space: nowrap;
  line-height: 1;
}
.logo-script{
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 28.22px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: #F4EDE6;
}
.logo-subtitle{
  display: block;
  margin-top: 2.85px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(244,237,230,.78);
}
.site-header .logo{ color: var(--ivory-warm); transition: color var(--dur-m) var(--ease); }
.site-header.is-light .logo{ color: var(--text); }
.site-header.is-light .logo-script{ color: var(--text); }
.site-header.is-light .logo-subtitle{ color: rgba(53,35,29,.68); }

.nav{
  flex: 1; min-width: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.nav-list{
  display: flex; align-items: center; gap: clamp(24px, calc(1.8vw + 8px), 36px);
  justify-content: center;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
.nav-list a{
  font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: var(--ivory-warm);
  transition: border-color var(--dur-s) var(--ease), color var(--dur-m) var(--ease);
}
.nav-list a:hover{ border-color: var(--champagne-soft); }
.site-header.is-light .nav-list a{ color: var(--text); }
.site-header.is-light .nav-list a:hover{ border-color: var(--champagne); }

/* Kadın / Erkek dropdowns */
.nav-has-dropdown{
  position: relative;
  padding-bottom: 14px;
  margin-bottom: -14px;
}
.nav-has-dropdown > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  height: 100%;
}
.nav-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: rgba(255,255,255,.78);
  opacity: .75;
  transform: rotate(180deg);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.site-header.is-light .nav-caret{ color: rgba(53,35,29,.78); }
.nav-has-dropdown:hover .nav-caret,
.nav-has-dropdown:focus-within .nav-caret{
  opacity: 1;
  transform: rotate(0deg);
}
.nav-dropdown{
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  width: 182px;
  background: #F3E3D6;
  border: 1px solid rgba(74,45,33,.08);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding: 8px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
  z-index: 20;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav-has-dropdown:hover > a,
.nav-has-dropdown:focus-within > a{
  border-color: var(--champagne-soft);
}
.site-header.is-light .nav-has-dropdown:hover > a,
.site-header.is-light .nav-has-dropdown:focus-within > a{
  border-color: var(--champagne);
}
.nav-dropdown a{
  display: block;
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: .01em; text-transform: none;
  line-height: 1.4;
  white-space: nowrap;
  color: #4A2D21;
  opacity: 1;
  border-bottom: 0;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{
  background: rgba(74,45,33,.07);
  color: #35231D;
}
.nav-dropdown a:active{
  color: #35231D;
  font-weight: 600;
}

.header-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-shrink: 0; }
.header-actions .icon-btn svg{ width: 21.6px; height: 21.6px; }
.icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 41px; height: 41px; border-radius: 50%;
  color: var(--text);
  transition: background var(--dur-s) var(--ease);
}
.icon-btn:hover{ background: rgba(53,35,29,.08); }
.nav-toggle{ display: none; }
.site-header .icon-btn{ color: var(--ivory-warm); transition: color var(--dur-m) var(--ease), background var(--dur-s) var(--ease); }
.site-header .icon-btn:hover{ background: rgba(220,199,177,.16); }
.site-header.is-light .icon-btn{ color: var(--text); }
.site-header.is-light .icon-btn:hover{ background: rgba(53,35,29,.08); }

.search-bar{
  border-top: 1px solid rgba(220,199,177,.16);
  background: var(--mocha-deep);
  overflow: hidden;
  transition: background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.search-bar-inner{
  display: flex; align-items: center; gap: 14px;
  padding-block: 16px;
  color: var(--ivory-warm);
}
.search-bar-inner input{
  flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--ivory-warm);
  padding: 6px 2px; font-size: 1rem; color: var(--ivory-warm);
}
.search-bar-inner input::placeholder{ color: var(--taupe-accent); }
.search-bar-inner input:focus{ outline: none; border-color: var(--champagne-soft); }
.site-header.is-light .search-bar{ background: var(--header); border-top-color: rgba(53,35,29,.1); }
.site-header.is-light .search-bar-inner{ color: var(--text); }
.site-header.is-light .search-bar-inner input{ border-bottom-color: var(--text); color: var(--text); }
.site-header.is-light .search-bar-inner input::placeholder{ color: var(--text-secondary); }
.site-header.is-light .search-bar-inner input:focus{ border-color: var(--cta); }

/* Collapse the horizontal nav into the hamburger below the width where the
   full link row (Yeni Sezon / Tüm Ürünler / Çok Satanlar / Kadın / Erkek /
   Kişiye Özel / ONLINE ÖZEL) stops fitting next to the logo and icons —
   without this the two rows overlapped instead of the mobile drawer
   taking over. */
@media (max-width: 1024px){
  .nav{ display: none; }
  .nav-toggle{ display: inline-flex; }

  /* .header-inner's desktop grid (220px 1fr 180px) assumed the middle nav
     column was always present to absorb the remaining width. With .nav
     hidden above, the two fixed side columns (220+180=400px) no longer fit
     inside a narrow viewport on their own — this is what was causing
     horizontal overflow on mobile. Collapsing to a 2-column grid (fluid
     logo + auto-sized actions) fixes that at its source instead of hiding
     symptoms. */
  .header-inner{
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    height: 60px;
  }
  /* justify-self:start alone would size the box to the logo's natural
     content width (~138px) instead of its actual grid column, so at
     ≤375px it visually overlapped .header-actions instead of properly
     shrinking — measured with real iframe widths (320/360/375/390/430),
     not assumed. min-width:0 lets the flex box shrink below that content
     width, overflow:hidden + ellipsis on its two lines clip gracefully
     instead of spilling into the icons. */
  .logo{
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
  }
  .logo-script,
  .logo-subtitle{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-actions{
    justify-self: end;
    gap: 4px;
  }
  .header-actions .icon-btn{
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 640px){
  .header-inner{
    height: 58px;
    gap: 5px;
  }
  .logo-script{
    font-size: 23px;
  }
  .logo-subtitle{
    font-size: 8px;
    letter-spacing: 1.6px;
  }

  /* Hesabım / Favoriler stay reachable from the mobile drawer's
     .mobile-nav-foot (already present in the markup) — hiding them here
     only reduces header icon density, it doesn't remove the destination. */
  .header-actions .icon-btn--secondary{
    display: none;
  }
}

/* Mobile nav */
.mobile-nav-backdrop{
  position: fixed; inset: 0; background: rgba(53,35,29,.28);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease);
  z-index: 600; border: 0; padding: 0;
}
.mobile-nav{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 86vw);
  background: var(--bg);
  z-index: 601;
  transform: translateX(100%);
  transition: transform var(--dur-m) var(--ease);
  display: flex; flex-direction: column;
  padding: 22px clamp(20px, 5vw, 32px) 32px;
  overflow-y: auto;
}
body.nav-open .mobile-nav{ transform: translateX(0); }
body.nav-open .mobile-nav-backdrop{ opacity: 1; pointer-events: auto; }
body.nav-open{ overflow: hidden; }

.mobile-nav-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-nav-list{ display: flex; flex-direction: column; }
.mobile-nav-list a{
  display: block; padding: 15px 2px;
  font-family: var(--font-serif); font-size: 1.35rem;
  border-bottom: 1px solid rgba(53,35,29,.08);
}

.mobile-nav-toggle-item{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 2px;
  font-family: var(--font-serif); font-size: 1.35rem; text-align: left;
  color: inherit; background: none; border: 0;
  border-bottom: 1px solid rgba(53,35,29,.08);
  cursor: pointer;
}
.accordion-chevron{
  flex-shrink: 0; margin-left: 12px; color: var(--text-secondary);
  transform: rotate(180deg);
  transition: transform var(--dur-s) var(--ease);
}
.mobile-nav-toggle-item[aria-expanded="true"] .accordion-chevron{ transform: rotate(0deg); }

.mobile-submenu{
  max-height: 0; overflow: hidden;
  transition: max-height 340ms var(--ease);
}
.mobile-submenu.is-open{ max-height: 400px; }
.mobile-submenu a{
  display: block;
  padding: 12px 2px 12px 16px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(53,35,29,.06);
}
.mobile-submenu li:last-child a{ border-bottom: 0; padding-bottom: 18px; }
.mobile-nav-foot{ margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobile-nav-foot a{ display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: min(92vh, 920px);
  overflow: hidden;
}
.hero-track{
  position: absolute; inset: 0;
  display: flex;
  width: 100%; height: 100%;
  transition: transform 720ms var(--ease);
}
.hero-track.no-transition{ transition: none; }
.hero-slide{
  flex: 0 0 100%;
  min-width: 0;
  width: 100%; height: 100%;
  max-width: 100%;
  display: flex; align-items: center;
  position: relative;
}
.hero-media{
  position: absolute; inset: 0;
  background: linear-gradient(125deg, var(--mocha-deep) 0%, #2E2019 45%, var(--mocha-deep) 100%);
}
.hero-media-glow{
  position: absolute; right: -10%; top: 50%; translate: 0 -50%;
  width: min(60vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(184,156,130,.4) 0%, rgba(184,156,130,0) 68%);
  pointer-events: none;
}
/* Cartier-style restraint: one real product photo per slide (never a
   placeholder illustration or an oversized ghost-text watermark),
   populated by initHomepageProductVisuals() in catalog.js from
   data-visual-product — same mechanism the category strip and campaign
   banner use, so there is one image-injection system for the whole
   homepage. Sizing/position lives in the body.home section below (after
   the generic [data-visual-product]{position:relative} rule, which this
   must win over at equal specificity — see the note there). */
.hero-visual{ display: block; }

.hero-content{ position: relative; z-index: 2; max-width: 620px; }
.hero-content .eyebrow{ margin-bottom: 20px; color: var(--taupe-accent); }
.hero-title{
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1.04;
  color: var(--ivory-warm); margin-bottom: 22px;
}
.hero-sub{
  font-size: 1.1rem; color: var(--champagne-soft);
  max-width: 420px; margin-bottom: 34px;
}

/* Keyboard focus needs to stay visible against the dark hero — the site-wide
   default outline is a dark brown that would disappear on this background. */
.hero :focus-visible{ outline-color: var(--champagne-soft); }

/* ---- Carousel arrows ---- */
.hero-arrow{
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 6;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--champagne-soft);
  background: transparent;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.hero-arrow:hover{ background: rgba(245,239,232,.1); color: var(--ivory-warm); }
.hero-arrow--prev{ left: clamp(10px, 2.6vw, 28px); }
.hero-arrow--next{ right: clamp(10px, 2.6vw, 28px); }

/* ---- Carousel pagination — clean capsule-dot cluster, in a soft dark
   pill so it reads at consistent contrast whether the slide behind it is
   the dark brown media (slides 2–4) or a light campaign photo (slide 1). ---- */
.hero-pagination{
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0;
  z-index: 6;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(30,18,12,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.hero-dot{
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.hero-dot::after{
  content: '';
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(245,239,232,.5);
  transition: width var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.hero-dot:hover::after{ background: rgba(245,239,232,.8); }
.hero-dot:focus-visible{ outline: 2px solid var(--champagne-soft); outline-offset: 2px; }
.hero-dot.is-active::after{ width: 22px; background: var(--champagne-soft); }

/* ==========================================================================
   Sections — shared
   ========================================================================== */
.section{ padding-block: var(--section-pad); }
.section--alt{ background: var(--bg-secondary); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--mocha-deep); color: var(--footer-muted); position: relative; border-top: 1px solid rgba(255,248,240,.10); }
/* Footer content is capped narrower than the site's default container so
   five columns of copy stay compact and readable instead of stretching
   thin across an ultra-wide viewport. */
.site-footer .container{ max-width: 1320px; margin-inline: auto; }

/* ---- Footer top: intro + nav columns ----
   Single, consolidated color/type system for the whole footer-top area —
   intro block + all four nav columns. Every value below is literal (not a
   themed custom property), on purpose: it's the same premium palette on
   every page, homepage included, so no body.home-scoped or bolt-on global
   duplicate of these rules is needed anymore (see the two override blocks
   further down, which now only carry footer-lower/payment/security colors
   — the one part of the footer this redesign intentionally leaves alone). */
.footer-top{
  display: grid;
  grid-template-columns:
    minmax(250px, 270px)
    minmax(190px, 215px)
    minmax(175px, 195px)
    minmax(210px, 230px)
    minmax(250px, 280px);
  justify-content: space-between;
  align-items: start;
  column-gap: 40px;
  padding: 40px 0 28px;
}
.footer-top{ align-items: start !important; }
.footer-intro,
.footer-col{
  margin-top: 0;
  padding-top: 0;
  align-self: start !important;
}
.footer-intro{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  width: 270px !important;
  max-width: 270px !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  position: relative !important;

  align-self: start !important;
  justify-self: start !important;
}
/* Above 1400px the footer's own 1320px container no longer spans the
   viewport, so the real empty space to its left (between the viewport/
   footer edge and the container) is not part of the brand block's grid
   track. Pulling the block left by a fixed offset here centers it in
   that outer gap without touching the grid (Kurumsal's track, and
   therefore its x position, is untouched by a transform on a sibling). */
@media (min-width: 1400px){
  .footer-intro{
    transform: translateX(-127.5px) !important;
  }
}
.footer-intro > *{
  margin-left: 0 !important;
  transform: none !important;
}
.footer-intro .eyebrow{
  display: block;
  width: 100%;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  color: rgba(247,237,227,.82);
  font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .12em;
  text-align: left !important;
}
.footer-heading{
  width: 100%;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px;
  line-height: 1.2; color: #FFF8F0;
  text-align: left !important;
}
.footer-intro-text{
  width: 245px !important;
  max-width: 245px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  color: rgba(243,231,220,.82); font-size: 14px; font-weight: 400; line-height: 1.6;
  text-align: left !important;
}
.footer-cta{
  margin: 0 !important;
  align-self: flex-start !important;

  height: auto; box-sizing: border-box; overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255,248,240,.24); border-radius: 999px;
  background: transparent;
  color: #FFF8F0;
  padding: 13px 18px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .22s ease, border-color .22s ease;
}
.footer-cta-label{ flex: none; white-space: nowrap; line-height: 1; }
.footer-cta svg{
  width: 14px; height: 14px; padding: 0; border-left: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.footer-cta:hover{ background: rgba(255,248,240,.08); border-color: rgba(255,248,240,.42); }
/* The decorative rule under the intro heading and the small diamond rule
   under each column heading are removed from this page's markup; this
   kill-switch keeps them from ever rendering (unstyled) on any other page
   that still has the old .footer-ornament / .col-rule markup, without
   having to edit every one of those files. */
.footer-ornament, .col-rule{ display: none; }

.footer-col h3{
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
  color: #F7EDE3;
  margin: 0 0 18px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 7px; }
/* Text link rows carry a tiny hairline mark instead of a bullet/icon —
   flex row so it and the label sit on one baseline; the mark brightens
   and widens on hover alongside the row's own translateX, giving a quiet
   sense of motion without turning into an icon list. */
.footer-col a, .footer-col span{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; line-height: 1.55; color: #F3E7DC; opacity: 1;
  transition: color .22s ease, transform .22s ease;
}
.footer-col a::before{
  content: "";
  width: 10px; height: 1px; flex: none;
  background: rgba(243,231,220,.35);
  transition: width .22s ease, background .22s ease;
}
.footer-col a:hover{ color: #FFFFFF; transform: translateX(3px); }
.footer-col a:hover::before{ width: 16px; background: rgba(255,255,255,.75); }
.footer-col--contact{ width: 100%; min-width: 0; }
.footer-col--contact ul{ width: 100%; gap: 7px; }
.footer-col--contact li{ width: 100%; }
/* A fixed 20px icon column + a flexible text column, instead of the old
   inline-flex row — every row's text now starts at the exact same X
   regardless of how wide its own icon glyph happens to be. The hairline
   mark from the text columns is dropped here — the icon already reads as
   the row's indicator, so keeping both would read as clutter. */
.footer-col--contact a,
.footer-col--contact span{
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 11px;
  align-items: center;
}
.footer-col--contact a{
  display: grid;
  width: 100%;
}
.footer-col--contact a::before{ display: none; }
.footer-col--contact svg{
  width: 20px !important; height: 20px !important;
  min-width: 20px; min-height: 20px;
  display: block;
  justify-self: center; align-self: center;
  flex: none;
  stroke-width: 1.6 !important;
  opacity: 1 !important;
  color: rgba(247,237,227,.82);
  transition: color .22s ease;
}
.footer-col--contact a:hover svg{ color: #FFFFFF; }

/* ---- Trust strip ---- */
.footer-trust{ border-top: 1px solid rgba(184,156,130,.2); }
.footer-trust-inner{
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-block: 28px;
}
.trust-item{
  display: flex; align-items: center; gap: 14px;
  padding-inline: clamp(10px, 1.6vw, 22px);
  border-left: 1px solid rgba(184,156,130,.2);
}
.trust-item:first-child{ border-left: 0; padding-left: 0; }
.trust-item svg{ color: var(--champagne-soft); flex-shrink: 0; }
.trust-item strong{ display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ivory-warm); margin-bottom: 4px; }
.trust-item span{ font-size: 13px; line-height: 1.4; color: var(--footer-muted); }

/* ---- Lower footer: payment logos + brand + security, ONE row, ONE background ---- */
.footer-lower{
  background: var(--mocha-deep);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0;
}

.footer-lower-inner{
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  align-items: center;
  gap: 30px;
  min-height: 84px;
  padding: 10px 0;
}
.footer-lower-inner > *{ min-width: 0; }

.footer-payment-area{
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  min-width: 0;
}
.footer-payment-area .payment-icons{
  margin: 0;
  padding: 0;
  max-width: 300px;
  align-content: center;
}

.payment-icons{
  display: flex; flex-direction: column;
  gap: 9px;
}
.payment-row{
  display: flex; align-items: center; flex-wrap: nowrap;
  min-height: 24px;
  gap: 9px;
}
.payment-row li{ display: flex; align-items: center; }
.payment-icons img{ display: block; width: auto; object-fit: contain; }

/* Explicit per-logo heights — each logo's own aspect ratio (via
   width:auto) keeps proportions intact; Troy/Axess/Bankkart stay
   intentionally smaller since their wordmarks read visually heavier than
   Visa/Mastercard/World at an equal height. All sit on the row's shared
   align-items:center line, so every logo's vertical center matches
   regardless of its own height. */
.pay-visa{ height: 22px; }
.pay-mastercard{ height: 21px; }
.pay-troy{ height: 21px; }
.pay-bonus{ height: 18px; }
.pay-world{ height: 17px; }
.pay-axess{ height: 18px; }
.pay-paraf{ height: 18px; }
.pay-bankkart{ height: 17px; }

.payment-row li.pay-chip{
  display: flex; align-items: center; justify-content: center;
  min-height: 26px;
  background: rgba(245,239,232,.92);
  padding: 1px 3px;
  border-radius: 3px;
}

/* No more absolute-centering hack — the monogram is a real grid item in
   the middle 190px column, so it lines up on the same horizontal center
   as the payment logos (left) and security badges (right) for real. */
.footer-monogram{
  position: static;
  transform: none;
  justify-self: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #F3E9DF;
}

.footer-monogram .mg{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -.04em;
  line-height: 1;
  color: #F3E9DF;
}
.footer-monogram .mg::before,
.footer-monogram .mg::after{
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(243,233,223,.22);
}

.footer-copyright{
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  color: rgba(243,233,223,.72);
}

.footer-security{
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 22px;
  color: #F3E9DF;
}

.footer-security-item{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.footer-security-item > svg{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #D7B98B;
}
.footer-security-item--guarantee > svg{ color: #D7B98B; }

.footer-security .fs-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: rgba(243,233,223,.72);
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
}
.footer-security .fs-text em{
  color: #F3E9DF;
  font-style: normal;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

.footer-security-divider{
  display: block;
  width: 1px;
  height: 26px;
  background: rgba(243,233,223,.20);
}

/* ---- Footer responsive: 5 cols desktop → 2-3 cols tablet → 1 col mobile.
   The lower row (payment / MG / security) is a real 3-column grid now
   (see .footer-lower-inner above) — mobile just collapses it to one
   column and lets each item's own `order` stack them payment → MG →
   security, per spec. ---- */
@media (max-width: 1024px){
  .footer-top{ grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .footer-intro{ grid-column: 1 / -1; padding-right: 0; }
  .footer-intro-text{ max-width: 420px; }
}
@media (max-width: 640px){
  .site-footer .container{
    width: 100%;
    max-width: none;
    padding-left: 18px;
    padding-right: 18px;
  }

  .footer-top{
    display: block;
    width: 100%;
    padding: 28px 0 8px;
  }
  /* The desktop .footer-intro / .footer-intro-text rules above (~line 813,
     863) lock a fixed px width with !important — non-!important overrides
     here silently lose to those regardless of source order, which is why
     the intro block was stuck at a 270px/245px desktop width on phones.
     These have to fight !important with !important; nothing else in this
     file uses !important below 640px. */
  .footer-intro{
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    transform: none !important;
  }
  .footer-intro-text{
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 0 20px !important;
  }
  .footer-cta{ max-width: 100%; }

  /* Footer columns: true mobile accordions (main.js adds aria/state on
     click). Every rule that positions or sizes a .footer-col row lives
     here, in this one block, so Kurumsal/Koleksiyonlar/Destek/İletişim
     share one left edge and one +/- right edge — this used to be split
     across two separate @media(max-width:640px) blocks (this one and the
     later "MOBILE CONSOLIDATION PASS" block), which fought each other on
     source order instead of agreeing on a single value. Do not re-add a
     footer-col rule to that later block. */
  .footer-col{
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,248,240,.13);
  }
  .footer-col:last-child{ border-bottom: 1px solid rgba(255,248,240,.13); }
  .footer-col h3{
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0 32px 0 0;
    cursor: pointer;
    user-select: none;
    text-align: left;
    font-size: 14px;
    letter-spacing: .06em;
  }
  .footer-col h3::after{
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 300;
    color: rgba(255,248,240,.72);
  }
  .footer-col.is-open h3::after{ content: '−'; }
  .footer-col > ul{
    display: flex;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    gap: 0;
    margin: 0;
    padding: 0;
    transition: max-height .28s var(--ease), opacity .18s var(--ease), padding .28s var(--ease);
  }
  .footer-col.is-open > ul{
    max-height: 520px;
    opacity: 1;
    padding: 0 0 14px;
  }
  .footer-col li{ width: 100%; }
  .footer-col a,
  .footer-col--contact a,
  .footer-col--contact span{
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.35;
  }
  .footer-col a,
  .footer-col--contact a{
    min-height: 38px;
    padding: 8px 0;
    margin: 0;
  }
  /* Footer-lower authoritative order: MG → SINCE 2007/copyright (both
     inside .footer-monogram) → security → payment logos, last. Vertical
     rhythm comes entirely from each section's own margin-top below —
     .footer-lower-inner itself carries no gap, only top/bottom padding
     for the section as a whole. This is the ONLY mobile ruleset for
     footer-lower; do not add another one elsewhere in this file. */
  .footer-lower-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    gap: 0;
    padding-top: 20px;
    padding-bottom: 8px;
  }
  .footer-monogram{ order: 1; justify-self: center; margin: 0; }
  .footer-monogram .mg{ font-size: 25px; line-height: 1; gap: 9px; }
  .footer-monogram .mg::before,
  .footer-monogram .mg::after{ width: 18px; }
  .footer-copyright{ margin-top: 6px; font-size: 13px; line-height: 1.45; text-align: center; }

  /* Two security notes side by side as a real 2-column grid (not a
     flex-wrap row) so both columns always share the same width and center
     axis, regardless of which of the two text blocks is longer. */
  .footer-security{
    order: 2;
    justify-self: stretch;
    width: 100%;
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 14px;
  }
  .footer-security-item{
    width: 100%; min-width: 0;
    display: flex;
    justify-content: center; align-items: flex-start;
    gap: 6px;
  }
  .footer-security-item > svg{ width: 15px; height: 15px; flex: 0 0 15px; }
  .footer-security .fs-text{ min-width: 0; align-items: flex-start; }
  .footer-security .fs-text em{ font-size: 13px; line-height: 1.3; font-weight: 600; white-space: normal; }
  .footer-security .fs-text span{ font-size: 13px; line-height: 1.35; white-space: normal; }
  .footer-security-divider{ display: none; }

  .footer-payment-area{
    order: 3;
    justify-self: stretch; width: 100%;
    margin-top: 14px; margin-bottom: 0;
    justify-content: center;
  }
  .footer-payment-area .payment-icons{
    width: 100%; max-width: 260px;
    display: flex; flex-direction: column;
    align-items: center; gap: 7px;
  }
  .payment-row{ width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 0; }
  /* width:auto (no fixed height here) lets each logo keep the height its
     own desktop .pay-* rule already gives it (line ~1020) — those rules
     are lower specificity (0,1,0) than this one (0,1,1) only for the
     properties THIS rule actually sets (max-width/max-height/object-fit),
     so `height` itself still cascades in from .pay-visa/.pay-mastercard/
     etc. and is then clamped by max-height. Do NOT add a mobile
     `.pay-visa,...{height:auto}` override on top of this: visa.svg has no
     intrinsic width/height attributes (only a viewBox), so once BOTH
     width and height compute to auto at once it collapses to 0×0 in this
     flex row — confirmed by rendering it in Chrome. Axess/Bankkart are
     unusually wide, flat wordmarks; object-fit:contain lets them shrink
     inside the same max-width/max-height box instead of distorting. */
  .payment-row img{ width: auto; max-width: 46px; max-height: 16px; object-fit: contain; }
  /* Per-logo max-height, layered on top of the shared rule above (these
     match it on specificity via the extra .payment-row class, so they
     win): the raw logo art reads very unevenly at one flat height — Visa/
     Mastercard/Troy are dense and heavy, World is naturally faint/thin —
     so each gets hand-tuned visual weight instead of a uniform box. All
     stay at or under 18px, none exceed it. */
  .payment-row .pay-visa{ max-height: 17px; }
  .payment-row .pay-mastercard{ max-height: 16px; }
  .payment-row .pay-troy{ max-height: 16px; }
  .payment-row .pay-bonus{ max-height: 13px; }
  .payment-row .pay-world{ max-height: 13px; max-width: 36px; }
  .payment-row .pay-axess{ max-height: 15px; }
  .payment-row .pay-paraf{ max-height: 14px; }
  .payment-row .pay-bankkart{ max-height: 14px; }
  .payment-row li.pay-chip{ min-height: 20px; padding: 1px 2px; border-radius: 2px; }

  /* Back-to-top arrow: a bare, completely unstyled <button> (no CSS
     anywhere, at any width) sitting directly in <footer> after
     .footer-lower — not inside .container — so on phones it rendered
     flush against the literal left edge with native button chrome. This
     is intentionally scoped to mobile only, same as everything else in
     this block; desktop's existing look is untouched.
     .site-footer gets 1px of bottom padding here only so the button's
     own margin-bottom stops collapsing through the footer's bottom edge
     (a plain block child's margin escapes past a padding-less parent) —
     without it the button sat flush on the true edge regardless of its
     margin value. */
  .site-footer{ padding-bottom: 1px; }
  .scroll-top{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 0 9px 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,248,240,.55);
    opacity: .65;
    cursor: pointer;
  }
  .scroll-top svg{ width: 16px; height: 16px; display: block; }
}

/* ==========================================================================
   RECONSTRUCTED BASE — product card / image / badges / favorite button
   (2026-08-19h). This shared component renders on every catalog context —
   shop grids, cart, search, favorites, related products, and (via the
   optional variantClass hook) the homepage — see js/catalog.js
   renderProductCard(). Homepage-specific overrides live in the body.home
   -scoped block right below this one and win the cascade by source order.
   Reconstructed after an accidental truncation removed the original rules;
   written fresh against only the CSS custom properties confirmed present
   in :root above, matching the site's existing warm/champagne/mocha
   language rather than guessing at exact prior pixel values.
   ========================================================================== */
.product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid rgba(53,35,29,.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(58,36,28,.08);
  transition: box-shadow var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.product-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(58,36,28,.12); }

.product-card-media-link{ display: block; }

.product-image{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg-secondary) 0%, var(--bg) 62%, var(--silver) 130%);
  display: flex; align-items: center; justify-content: center;
}
.product-image-fallback{ width: 34%; color: var(--champagne); }
/* object-fit:contain everywhere a product photo renders — never crop a
   jewelry detail. Padding keeps the photo off the container edges so
   "contain" still reads as a considered canvas, not a shrunken thumbnail. */
.product-image-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: contain; object-position: center;
  padding: 14px; box-sizing: border-box;
  transition: transform var(--dur-m) var(--ease);
}
/* Subtle hover only: a light image scale + the existing -3px card lift
   below — no dramatic zoom, no glow, no heavy shadow. */
.product-card:hover .product-image-photo{ transform: scale(1.02); }
.product-image-hover{ opacity: 0; transition: opacity var(--dur-s) var(--ease); }
.product-card:hover .product-image-hover{ opacity: 1; }

.product-card-badges{
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; z-index: 4;
}
.product-badge{
  display: inline-block;
  background: var(--cta); color: var(--cta-text);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-sm);
}

/* ---- Favorite toggle — fixed-size circular button. Root cause of the
   earlier oversized-heart bug: with this rule missing, the bare
   <svg viewBox="0 0 24 24"> inside .card-fav-icon had no CSS size
   constraint and rendered at a large intrinsic default. ---- */
.card-fav-btn{
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cta-text);
  color: var(--cta);
  border: 1px solid rgba(53,35,29,.12);
  z-index: 5;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.card-fav-btn:hover{ transform: scale(1.06); }
.card-fav-icon{
  width: 16px; height: 16px; max-width: 16px; max-height: 16px;
  display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.card-fav-btn.is-active{ color: #A63A2E; }
.card-fav-btn.is-active .card-fav-icon{ fill: currentColor; }

.product-card-caption{
  display: block;
  padding: 16px 18px 18px;
  background: var(--bg-secondary);
  color: var(--text);
}
.product-card-caption h3{
  font-family: var(--font-sans);
  font-size: var(--fs-name); font-weight: 600; line-height: 1.35;
  color: var(--text);
}
.product-card-material{
  display: block; margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.price-row{ display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.price{ font-family: var(--font-sans); font-size: var(--fs-price); font-weight: 700; color: var(--text); }
/* Still visually secondary (muted color + strikethrough), just no longer
   too small to actually read — "arka planda ama okunur". */
.price-old{ font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: line-through; }
.price-tba{ font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.stock-out{
  display: inline-block; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-secondary);
}

.container--narrow{ max-width: 1440px; padding-inline: clamp(20px, 2.2vw, 32px); }

/* ==========================================================================
   SHOP / COLLECTION PAGES — one authoritative system for every inner page
   built on the shared .page-header / .content-section / .product-grid
   markup: every category page, tum-urunler, yeni-sezon, cok-satanlar,
   online-ozel, kisiye-ozel. None of this had ANY rules anywhere in this
   file before now — .content-section, .product-grid, .filter-chip,
   .page-header etc. were completely unstyled, so these pages rendered as
   plain stacked blocks. Built on the --inner-* tokens already declared in
   :root for exactly this ("inner pages only, never referenced by the
   homepage") but never previously used.
   ========================================================================== */
/* Belt-and-suspenders, same reasoning as the header fix above: guarantees
   every non-homepage page sits on the warm inner palette even before
   .inner-main's own background paints, and can never inherit the sitewide
   --bg (a paler, homepage-adjacent token this rule deliberately avoids
   touching). */
body:not(.home){ background: var(--inner-base); color: var(--inner-text); }
.inner-main{ background: var(--inner-base); }
/* .section--alt's own rule uses the sitewide --bg-secondary token (shared
   with non-inner-page consumers this task must not touch) — on inner
   pages specifically it needs the warm --inner-alt instead, or it's the
   exact near-white leftover this task is about. */
.inner-main .section--alt{ background: var(--inner-alt); }
/* Inner pages read too empty at the sitewide 1400px container — a
   narrower, still-generous width keeps copy/cards from stranding in a
   small strip of a wide screen. Header/footer sit outside .inner-main and
   keep the sitewide .container width untouched. */
.inner-main .container{ max-width: 1220px; }

/* ---- Breadcrumb ---- */
.breadcrumb{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--text-secondary);
}
.breadcrumb a{ color: var(--text-secondary); transition: color var(--dur-s) var(--ease); }
.breadcrumb a:hover{ color: var(--cta); }
.breadcrumb span:last-child{ color: var(--text); }
.crumb-sep{ opacity: .5; }

/* ---- Collection hero — compact, not a full second hero ---- */
.page-header{
  padding: 42px 0 44px;
  background: linear-gradient(180deg, var(--inner-alt) 0%, var(--inner-base) 100%);
  border-bottom: 1px solid rgba(74,45,33,.08);
}
.page-header .eyebrow{ color: var(--inner-mocha); margin-top: 18px; }
.page-title{
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem); line-height: 1.05;
  color: var(--text); margin-top: 8px;
}
.page-intro{
  margin-top: 14px; max-width: 560px;
  font-size: 15px; line-height: 1.7; color: var(--inner-body); font-weight: 500;
}
.page-header--slim{ padding: 22px 0; background: var(--inner-base); border-bottom: 0; }

/* ---- Kişiye Özel Kolye hero: .content-section--pn's reduced top padding
   keeps the hand-off into the product grid from feeling like two separate
   sections. (The rest of .page-header--pn's typography is defined once,
   further below in the "PN FINAL UI READABILITY OVERRIDE" section — an
   earlier, duplicate copy of those same rules used to live here too,
   fully shadowed by that later !important pass; removed rather than left
   as dead, conflicting CSS.) ---- */
.content-section--pn{ padding-top: 34px; }
@media (max-width: 1023px){
  .content-section--pn{ padding-top: 30px; }
}

/* ---- Hakkımızda hero: a touch more presence than the plain text-only
   hero used elsewhere — a slightly wider/stronger intro line and one tiny
   decorative rule+label beneath it. No image, no box; scoped to this one
   page's hero so every other page's .page-header is untouched. ---- */
.page-header--about .page-intro{ max-width: 620px; font-size: 16px; }
.page-header-meta{ display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.page-header-meta-rule{ display: block; width: 40px; height: 1px; background: rgba(74,45,33,.35); }
.page-header-meta-label{
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #6A4A3B;
}

/* Collection hero with a representative visual — used only on the pages
   where a real, verified product photo exists for that category. Pages
   with no inventory yet keep the plain text-only .page-header above
   rather than invent a product image. */
.page-header--visual .container{
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
  align-items: center; gap: 40px;
}
.page-header-visual{
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px; overflow: hidden; background: var(--inner-card);
}
.page-header-visual svg{
  position: absolute; inset: 0; margin: auto; width: 38%; height: 38%; color: var(--inner-deep);
}
.page-header-visual .product-image-photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; padding: 22px; box-sizing: border-box;
}

/* ---- Vertical rhythm ---- */
.content-section{ padding-block: 58px; }
.content-section--tight{ padding-block: 22px; }
.content-section--deep{ padding-block: 58px; }
.content-section--catalog-pad{ padding-top: 4px; }
@media (max-width: 1023px){
  .content-section{ padding-block: 48px; }
  .content-section--deep{ padding-block: 48px; }
}
@media (max-width: 640px){
  .content-section{ padding-block: 36px; }
  .content-section--deep{ padding-block: 36px; }
}

/* ---- Toolbar: result count + filter chips + sort, one compact row —
   no heavy sidebar. ---- */
.category-toolbar{
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px;
  padding-bottom: 22px; border-bottom: 1px solid var(--inner-border);
}
.category-count{
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-secondary); white-space: nowrap;
}
.category-filters{ display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.filter-chip{
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 100px;
  background: var(--inner-card); border: 1px solid var(--inner-border); color: var(--text-secondary);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.filter-chip:hover{ border-color: var(--inner-mocha); color: var(--text); }
.filter-chip.is-active,
.filter-chip[aria-pressed="true"]{
  background: var(--inner-mocha); border-color: var(--inner-mocha); color: var(--cta-text);
}
.sort-select{
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--text);
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: var(--radius-md);
  padding: 10px 14px; cursor: pointer;
}

/* ---- Product grid: spacious editorial density, never a cramped catalog.
   3 columns is the desktop default; 4 only opens up once there's enough
   width for cards to stay generous rather than narrow. ---- */
.product-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px;
}
@media (min-width: 1440px){
  .product-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
}
@media (max-width: 1024px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 420px){
  .product-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Empty / informational states: no inventory yet in a category, no
   filter matches, product not found, "catalog expanding" note. ---- */
.empty-state{
  text-align: center; max-width: 480px; margin-inline: auto;
  padding: 56px 32px; background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
}
.empty-state svg{ width: 56px; height: 56px; margin: 0 auto 18px; color: var(--inner-deep); }
.empty-state h3{ font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--text); }
.empty-state p{ margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.catalog-note{ margin-top: 40px; }
/* Demoted to a quiet secondary strip the moment real product cards exist
   above it (toggled in js/catalog.js), so it never outweighs the grid. */
.catalog-note.is-compact{
  padding: 20px 26px; max-width: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  text-align: left; background: transparent; border: 0; border-top: 1px solid var(--inner-border); border-radius: 0;
}
.catalog-note.is-compact h3{ font-size: 15px; }
.catalog-note.is-compact p{ margin-top: 4px; font-size: 14px; }

/* ---- Reassurance strip ---- */
.reassurance-row{
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px;
  padding-top: 22px; border-top: 1px solid var(--inner-border);
}
.reassurance-item{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--text-secondary);
}
.reassurance-item svg{ color: var(--inner-mocha); flex-shrink: 0; }
a.reassurance-item:hover{ color: var(--text); }
/* Product-detail page only: stronger presence next to the enlarged
   price/CTA column above it — same component, darker text + slightly
   larger icon, not a new treatment. */
.product-info .reassurance-item{ font-size: 15px; font-weight: 600; color: var(--text); }
.product-info .reassurance-item svg{ width: 19px; height: 19px; }

/* ==========================================================================
   PRODUCT DETAIL — urun.html: large gallery left, information right
   ========================================================================== */
.split-layout{
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr);
  gap: 56px; align-items: start;
}
.product-gallery{ position: relative; }
.product-gallery-main{ border-radius: 8px; overflow: hidden; }
.product-gallery-main .product-image{ aspect-ratio: 4 / 5; background: var(--inner-card); }
.product-gallery-main .product-image-photo{ padding: 28px; box-sizing: border-box; }
.gallery-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--inner-card); color: var(--text);
  border: 1px solid var(--inner-border);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.gallery-arrow:hover{ background: var(--cta); color: var(--cta-text); }
.gallery-arrow--prev{ left: 14px; }
.gallery-arrow--next{ right: 14px; }
.product-gallery-thumbs{ display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.gallery-thumb{
  flex: 0 0 72px; width: 72px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--inner-border); opacity: .7;
  transition: opacity var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.gallery-thumb .product-image{ aspect-ratio: 4 / 5; background: var(--inner-card); }
.gallery-thumb .product-image-photo{ padding: 8px; box-sizing: border-box; }
.gallery-thumb:hover{ opacity: 1; }
.gallery-thumb.is-active{ opacity: 1; border-color: var(--inner-mocha); }

.product-info{ padding-top: 4px; }
/* ---- Luxury (Cartier/Bvlgari-style) typographic hierarchy for the
   product-detail right column: small/tracked uppercase labels framing a
   restrained-weight serif title, light-medium body copy (never heavy —
   the weight budget is spent on labels/price/CTAs instead), and a
   deliberate, consistent vertical rhythm between every section. Scoped
   to .product-info throughout so shared classes (.eyebrow,
   .product-card-material, .free-shipping-compact, .reassurance-item)
   keep their normal appearance everywhere else on the site. ---- */
.product-info > .eyebrow{ color: var(--inner-mocha); font-weight: 600; letter-spacing: .10em; }
.product-title{
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(2rem, 1vw + 1.75rem, 2.25rem); line-height: 1.15;
  color: var(--text); margin-top: 8px;
}
.product-info .free-shipping-compact{ font-size: 14.5px; font-weight: 600; margin-top: 20px; }
.product-info > .product-card-material{ display: block; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.product-price-row{ margin-top: 22px; }
.product-price-row .price{ font-size: 26px; font-weight: 700; }
.product-price-row .price-old{ font-size: 14px; margin-left: 4px; }
/* Resets the card-context absolute badge positioning (top-left overlay
   on a photo) back to a normal inline row for the detail page. */
.product-badges .product-card-badges{ position: static; flex-direction: row; flex-wrap: wrap; margin-top: 14px; }
.product-description{ margin-top: 26px; max-width: 46ch; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--text); }
.product-details-list{ margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.product-details-list li{ position: relative; padding-left: 18px; font-size: 15.5px; font-weight: 500; line-height: 1.7; color: var(--text); }
.product-details-list li::before{
  content: ''; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--inner-mocha);
}
.product-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.product-actions .btn{ padding: 15px 28px; font-weight: 700; min-height: 50px; }
/* Favorilere Ekle stays a calm tertiary action — it must not compete in
   weight with Sepete Ekle/Hemen Al, the two real CTAs. */
.product-actions [data-add-to-fav]{ font-weight: 600; }
/* Now 3 buttons + qty-control can share this row (Sepete Ekle/Hemen Al/
   Favorilere Ekle) — below ~640px, stack every button full-width (qty
   stays its natural compact size on its own row) instead of letting
   variable-width pills wrap unevenly two-per-row. */
@media (max-width: 640px){
  .product-actions{ gap: 10px; }
  .product-actions .btn{ flex: 1 1 100%; min-height: 48px; }
}
.qty-control{ display: flex; align-items: center; border: 1px solid var(--inner-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-control button{
  width: 38px; height: 44px; font-size: 16px; font-weight: 600;
  background: var(--inner-card); color: var(--text);
  transition: background var(--dur-s) var(--ease);
}
.qty-control button:hover{ background: var(--inner-alt); }
.qty-control input{
  width: 44px; height: 44px; border: 0; border-left: 1px solid var(--inner-border); border-right: 1px solid var(--inner-border);
  text-align: center; background: var(--inner-input); color: var(--text); font-weight: 600;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
/* Product-detail row only: qty-control raised from the shared 44px to
   50px so it reads as one balanced unit with the CTA buttons next to it
   (.product-actions .btn's 15px vertical padding + 15px/600 text works
   out to roughly the same height) instead of looking a size smaller. */
.product-info .qty-control,
.product-info .qty-control button,
.product-info .qty-control input{ height: 50px; }
.product-info .qty-control button{ width: 42px; }
.product-info .qty-control input{ width: 48px; font-size: 16px; }
.product-status{ display: none; margin-top: 14px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--inner-mocha); }
.product-status.is-visible{ display: block; }

@media (max-width: 900px){
  .split-layout{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .page-header{ padding: 32px 0 28px; }
  .page-header--visual .container{ grid-template-columns: 1fr; gap: 20px; }
  .page-header-visual{ aspect-ratio: 16 / 10; order: -1; }
  .content-section{ padding-block: 40px; }
  .content-section--tight{ padding-block: 18px; }
  .category-toolbar{ gap: 12px; }
  .category-filters{ margin-right: 0; width: 100%; }
  .sort-select{ width: 100%; }
  .reassurance-row{ gap: 16px 22px; }
  .product-title{ font-size: clamp(1.75rem, 4vw + 1rem, 2rem); }
}

/* ==========================================================================
   HOMEPAGE BODY — single authoritative system (image-system normalization
   2026-08-19i). This is the ONLY place homepage `.home-*` selectors are
   defined anywhere in this file. No !important anywhere below: since there
   is exactly one definition per selector, none is needed. Deliberately
   placed at the end of the file — after every shared/global rule, including
   the generic mobile `.section{padding-block:...}` override — so the
   mobile rules here always win on source order without having to
   out-specificity anything. Scoped by `body.home` (set only on
   index.html); no inner page, shop page, cart, search, or product-detail
   page is affected.

   ONE homepage image treatment: object-fit:contain, object-position:center,
   width/height 100%, everywhere — nothing on this page ever crops a
   product photo. Editorial/banner panels (Gift, Baget Koleksiyonu) use the
   4:5 `<id>-home.webp` derivative (see resolveHomeVisualSrc in
   catalog.js) instead of the raw 941×1672 portrait, since a 4:5 photo
   letterboxes far less inside a landscape panel. Ordinary product cards
   (Featured, Bestsellers, Recommend) use the raw catalog photo and rely on
   `contain` + generous, IDENTICAL padding within each section — no
   per-product exceptions.
   ========================================================================== */

/* Homepage palette — self-contained token set, deliberately decoupled from
   the site's global --bg/--bg-secondary/--header/--mg-surface tokens (those
   must never be referenced directly by a body.home rule — this is the only
   place the homepage's own colors are defined):
     --home-brown        #4A2D21  — hero, Why Mert Gümüş, both footer layers,
                                     the header (solid, no scroll switching)
     --home-beige         #E6D1C0  — every middle section's outer background;
                                     also body.home's own base background, so
                                     no #F7F1EA gap can ever show between
                                     sections
     --home-beige-strong  #E7D0BF  — product/image surfaces. Exact sampled
                                     pixel color of the homepage product
                                     photos' own backdrop — matching this
                                     exactly (not an approximate champagne
                                     token) is what stops a visible seam from
                                     appearing wherever object-fit:contain
                                     leaves a gap around a photo
     --home-card-text     #F3E6DB  — product/card text surfaces needing
                                     separation from their image/section:
                                     a soft warm beige, never white
     --home-text          #35231D  — primary text
     --home-text-muted    #74665F  — secondary text
   --mg-dark/--mg-text alias --home-brown/--home-text so every existing
   var(--mg-dark) / var(--mg-text) consumer picks up the homepage-local
   values automatically. */
body.home{
  --home-brown: #4A2D21;
  --home-beige: #E6D1C0;
  --home-beige-strong: #E7D0BF;
  --home-card-text: #EAD8C8;
  --home-text: #35231D;
  --home-text-muted: #5C4B42; /* darkened for contrast, same tone/rationale as --text-secondary above */
  --mg-light: #F7F1EA;
  --mg-dark: var(--home-brown);
  --mg-text: var(--home-text);
  --mg-text-light: #FFF6EE;
  --mg-text-sub: rgba(53,35,29,.85);
  --mg-text-light-sub: rgba(255,246,238,.8);
  --mg-border: rgba(74,45,33,.14);
  background: var(--home-beige);
  color: var(--mg-text);
}

/* ---- Shared homepage type ---- */
body.home .home-section-head{ margin-bottom: 26px; }
body.home .home-section-head--row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* Right-side section CTA (e.g. "Tümünü Gör →") — makes a collection
   section read as a real commerce homepage row rather than a plain
   heading. Reused wherever a section links out to its full listing. */
body.home .home-section-cta{
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding-bottom: 4px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--mg-text); border-bottom: 1px solid var(--mg-border);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
body.home .home-section-cta svg{ transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine){
  body.home .home-section-cta:hover{ border-color: var(--mg-text); }
  body.home .home-section-cta:hover svg{ transform: translateX(3px); }
}
body.home .home-eyebrow{
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mg-text-sub); margin: 0; background: none; border: 0; padding: 0;
}
/* Defined after `.home-eyebrow` on purpose: an eyebrow that also carries
   this class sits on a dark surface and needs the light color to win —
   letting a later, section-specific dark-text rule land after this one
   would silently make it unreadable again. */
body.home .home-eyebrow--light{ color: var(--mg-text-light-sub); }
body.home .home-h2{
  font-family: var(--font-serif); font-size: clamp(30px, 2.6vw, 40px); font-weight: 650; letter-spacing: -.012em; line-height: 1.08;
  color: var(--mg-text); margin: 6px 0 0;
}
body.home .home-h2--light{ color: var(--mg-text-light); }
/* "Neden [Mert Gümüş]?" signature accent — Allura, not Sacramento, sized
   relative to the parent h2 so it scales at every breakpoint. */
body.home .brand-script{
  font-family: 'Allura', cursive;
  font-size: 1.45em; font-weight: 400; letter-spacing: .01em; line-height: 1;
}

/* ---- Homepage header: solid --home-brown at all times — no .is-light /
   .is-scrolled background switching. Logo/nav/icon colors stay light to
   match, regardless of scroll state. ---- */
body.home .site-header{
  background: rgba(74,45,33,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body.home .site-header .logo,
body.home .site-header .nav-list a,
body.home .site-header .icon-btn{ color: var(--mg-text-light); }
/* Belt-and-suspenders like the body:not(.home) block above: .logo-script
   and .logo-subtitle carry their own explicit `color`, which doesn't
   inherit from `.logo`'s color — so without this, scrolling on the
   homepage (which adds .is-light to .site-header for other pages' benefit)
   silently darkened the logo text against the still-brown home header,
   making it unreadable. Kept in sync with .logo-script/.logo-subtitle's
   own light-mode values (--ivory-warm / rgba(244,237,230,.78)). */
body.home .site-header.is-light .logo-script{ color: var(--ivory-warm); }
body.home .site-header.is-light .logo-subtitle{ color: rgba(244,237,230,.78); }
body.home .nav-list a{ font-weight: 700; letter-spacing: .025em; }
body.home .site-header .nav-dropdown a{ color: #4A2D21; font-weight: 500; letter-spacing: .02em; }
body.home .site-header .nav-dropdown a:hover,
body.home .site-header .nav-dropdown a:focus-visible{ color: #35231D; }
body.home .search-bar{ background: var(--home-beige-strong); border-top-color: var(--mg-border); }
body.home .search-bar-inner{ color: var(--mg-text); }
body.home .search-bar-inner input{ border-bottom-color: var(--mg-text); color: var(--mg-text); }
body.home .search-bar-inner input::placeholder{ color: var(--mg-text-sub); }
body.home .search-bar-inner input:focus{ border-color: var(--mg-dark); }

/* ---- Hero: solid --home-brown, exactly matching the header/Why Us
   strip/footer — no gradient. Slide structure/behavior (autoplay, arrows,
   pagination, swipe, reduced-motion) is untouched. ---- */
body.home .hero-media{
  background: var(--home-brown);
}
body.home .hero-media-glow{ display: none; }
body.home .hero{ min-height: 620px; }
body.home .hero-title{ font-size: clamp(3rem, 5vw, 58px); }
body.home .hero-content{ max-width: 460px; }
body.home .hero-sub{ max-width: 360px; }
body.home .hero-pagination{ bottom: 12px; }

/* ---- ONE homepage product-image treatment: never crop, never stretch,
   never force a per-product scale. Wrapper is flex-centered, overflow
   hidden (see the shared .product-image rule); the photo itself is
   width/height 100%, object-fit:contain, object-position:center,
   box-sizing:border-box. Every homepage visual (hero, category strip,
   campaign banner, story cards, discovery module) renders the same
   '<id>-home.webp' 1000×1250 derivative, so identical containers with
   identical padding already produce identical relative scale — no
   transform:scale correction needed or applied. ---- */
body.home .product-image,
body.home [data-visual-product]{ position: relative; overflow: hidden; }
body.home .product-image-photo{
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; box-sizing: border-box;
  object-fit: contain; object-position: center center;
}
body.home .product-image:has(.product-image-photo) .product-image-fallback,
body.home [data-visual-product]:has(.product-image-photo) svg{ display: none; }

/* Hero visual sizing — must come after the generic [data-visual-product]
   rule above so position:absolute wins the cascade at equal specificity.
   No hard frame — no border, no boxed background, no heavy box-shadow,
   no vignette/mask — the photo's own warm studio background is the only
   backdrop; object-fit:contain (set globally above) keeps it uncropped. */
body.home .hero-visual{
  position: absolute; right: 9%; top: 50%; translate: 0 -50%;
  width: min(40vw, 430px); aspect-ratio: 4 / 5;
  overflow: visible;
}

/* ---- Hero slide 1 — %10 campaign photo: a real background image (never
   a placeholder) filling the whole slide, with real HTML copy overlaid
   into the photo's empty middle band (product flat-lay sits ~0–28% from
   the left, the model's face/hand sit from ~61% on) so neither ever gets
   covered. Height is pinned close to the photo's own 3:1 ratio so
   object-fit:cover only trims the far outer edges, keeping that band
   clear at ordinary desktop widths. ---- */
body.home .hero{ height: clamp(620px, 33vw, 640px); min-height: 0; }
body.home .hero-campaign-img{
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
body.home .hero-campaign-content{
  position: absolute; z-index: 2; top: 50%; left: 50%; translate: -50% -50%;
  width: 390px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0;
}
body.home .hero-campaign-eyebrow{
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: .22em;
  color: var(--mg-dark); margin: 0 0 8px;
}
/* %10 is two separately-sized glyphs (the % mark reads smaller and sits
   higher than the digits in the reference), so it is built as two spans
   baseline-aligned on a flex row rather than one text node. */
body.home .hero-campaign-percent{
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  margin: 0 0 4px; line-height: 1;
}
body.home .hero-campaign-symbol{
  font-family: "Cormorant Garamond", serif; font-size: 82px; line-height: .9; font-weight: 500;
  color: #B4875D; transform: translateY(-8px);
}
/* Cormorant Garamond's lining "1" reads as a capital I at this size —
   Georgia's oldstyle "1" has a clear top serif/foot, so only the "10"
   numeral (not the % symbol) switches face here. */
body.home .hero-campaign-number{
  font-family: Georgia, "Times New Roman", serif; font-size: 150px; line-height: .82; font-weight: 500;
  color: #B4875D; letter-spacing: -0.02em; display: inline-block;
}
body.home .hero-campaign-discount{
  font-family: var(--font-serif); font-weight: 500; font-size: 64px;
  line-height: .95; letter-spacing: .12em; color: #4A2D21; margin: 4px 0 12px;
}
body.home .hero-campaign-rule{
  display: block; width: 48px; height: 1px; background: #b4875d;
  margin: 0 auto 18px;
}
body.home .hero-campaign-note{
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .08em;
  color: #8C755F; margin: 0 0 16px;
}
body.home .hero-campaign-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 265px; height: 50px; margin-bottom: 0;
  border-radius: 2px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: #4A2D21; color: #fff;
  box-shadow: 0 10px 26px rgba(74,45,33,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease), background .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  body.home .hero-campaign-cta:hover{ transform: translateY(-3px); gap: 14px; box-shadow: 0 14px 32px rgba(74,45,33,.36); }
}
body.home .hero-campaign-fine{
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1.35;
  color: #5F4B3F; text-align: center; margin: 14px 0 0; max-width: 280px;
}
body.home .hero-campaign-disclaimer{
  position: absolute; right: clamp(12px, 2vw, 24px); bottom: 14px; z-index: 3;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--mg-text-sub); letter-spacing: .01em;
}
@media (max-width: 1024px){
  body.home .hero-campaign-content{ width: 320px; }
  body.home .hero-campaign-eyebrow{ font-size: 14px; margin-bottom: 8px; }
  body.home .hero-campaign-symbol{ font-size: 61px; transform: translateY(-6px); }
  body.home .hero-campaign-number{ font-size: 111px; }
  body.home .hero-campaign-discount{ font-size: 48px; }
  body.home .hero-campaign-note{ font-size: 13px; margin-bottom: 12px; }
  body.home .hero-campaign-cta{ width: 240px; height: 46px; font-size: 15px; }
  body.home .hero-campaign-fine{ font-size: 13px; }
}
@media (max-width: 768px){
  /* Dedicated portrait mobile hero photos (images/hero-mobile/*, 941x1672,
     ratio ~0.5628) replace the desktop crops below this width — see the
     <picture><source media="(max-width:768px)"> in each slide's markup.
     Height tracks that same ratio (177.68vw) so object-fit:cover on
     body.home .hero-*-img only trims the far top/bottom edges instead of
     cropping into the product, and stays uniform across all 3 slides
     since they share identical dimensions. The clamp's max exists only
     for the wide end of this range (tablet-portrait, ~700-768px) where
     the ratio math alone would otherwise make the hero taller than is
     reasonable for a banner. */
  body.home .hero{ height: clamp(460px, 177.68vw, 620px); }
  body.home .hero-campaign-content{
    left: 0; right: 0; width: 100%; top: auto; bottom: 0; translate: 0 0;
    align-items: center; text-align: center;
    padding: 22px 20px 58px;
    background: linear-gradient(0deg, rgba(255,248,240,.92) 0%, rgba(255,248,240,.66) 55%, rgba(255,248,240,0) 100%);
  }
  body.home .hero-campaign-eyebrow{ font-size: 13px; letter-spacing: .16em; margin-bottom: 6px; }
  body.home .hero-campaign-symbol{ font-size: 37px; transform: translateY(-4px); }
  body.home .hero-campaign-number{ font-size: 68px; }
  body.home .hero-campaign-discount{ font-size: 30px; letter-spacing: .08em; margin: 2px 0 8px; }
  body.home .hero-campaign-rule{ width: 40px; margin: 0 auto 8px; }
  body.home .hero-campaign-note{ font-size: 13px; margin-bottom: 8px; }
  body.home .hero-campaign-cta{ width: 230px; height: 46px; font-size: 15px; }
  body.home .hero-campaign-fine{ font-size: 13px; margin-top: 10px; }
  body.home .hero-campaign-disclaimer{ right: 10px; bottom: 6px; font-size: 11px; }
  body.home .hero-pagination{ bottom: 12px; padding: 8px 10px; gap: 7px; }
}

/* ---- Hero slide 2 — Ferrucci 2026 watch photo: real background image,
   the two watches sit in the left ~half of the frame with a dark silk
   drape filling the right half, so copy is anchored to the right and
   never touches them. Light/gold tokens (shared with the site's
   non-home dark hero) are reused here since the backdrop is a dark
   brown photo, not the light campaign beige slide 1 sits on. ---- */
body.home .hero-ferrucci-img{
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
body.home .hero-ferrucci-content{
  position: absolute; z-index: 2; top: 50%; right: calc(clamp(48px, 6vw, 110px) + 118px);
  translate: 0 calc(-50% - 24px);
  width: min(34vw, 380px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
body.home .hero-ferrucci-brand{
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .32em;
  color: var(--champagne-soft); margin: 0 0 5px;
}
body.home .hero-ferrucci-title{
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(39px, 3.7vw, 60px);
  line-height: 1.08; color: var(--ivory-warm); margin: 0 0 4px;
}
body.home .hero-ferrucci-sub{
  font-family: var(--font-sans); font-size: 18px; font-weight: 500; line-height: 1.5;
  color: rgba(245,239,232,.78); margin: 0 0 3px; max-width: 340px;
}
body.home .hero-ferrucci-content .btn{
  width: 265px; height: 52px; border-radius: 4px;
  background: #F3E3D2; color: #4A2D21; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transform: translateY(14px);
}
body.home .hero-ferrucci-content .btn:hover{ background: #FFF7F0; color: #4A2D21; transform: translateY(13px); }
@media (max-width: 1024px){
  body.home .hero-ferrucci-content{ right: calc(clamp(32px, 5vw, 64px) + 63px); width: min(38vw, 330px); }
  body.home .hero-ferrucci-title{ font-size: clamp(32px, 4.6vw, 46px); }
  body.home .hero-ferrucci-sub{ font-size: 16px; margin-bottom: 1px; max-width: 280px; }
}
@media (max-width: 768px){
  /* Top-left safe zone: the watches sit lower/center on the mobile crop,
     so copy anchors to the top instead of vertical-centering over them. */
  body.home .hero-ferrucci-content{
    top: 22px; left: 20px; right: auto; width: min(72%, 300px);
    translate: 0 0; align-items: flex-start; text-align: left;
  }
  body.home .hero-ferrucci-brand{ font-size: 13px; letter-spacing: .16em; margin-bottom: 8px; }
  body.home .hero-ferrucci-title{ font-size: clamp(19px, 5.6vw, 25px); line-height: 1.14; margin-bottom: 8px; }
  body.home .hero-ferrucci-sub{ font-size: 14px; line-height: 1.45; margin-bottom: 14px; max-width: none; }
  body.home .hero-ferrucci-content .btn{
    width: auto; height: 44px; padding: 0 20px; font-size: 15px; transform: none;
  }
  body.home .hero-ferrucci-content .btn:hover{ transform: none; }
}

/* ---- Hero slide 3 — Kişiye özel isimli kolye photo: real background
   image, the open gift box and name necklace sit in the right ~55% of
   the frame on warm satin, with an empty band on the left (soft shadow
   foliage only), so copy is anchored to the left and never touches the
   box/necklace. Dark-photo tokens reused from slide 2 for the same
   reason: the backdrop is a warm brown/beige photo, not the light
   campaign beige of slide 1. ---- */
body.home .hero-personal-img{
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
body.home .hero-personal-content{
  position: absolute; z-index: 2; top: 50%; left: calc(clamp(48px, 6vw, 110px) + 43px);
  translate: 0 -50%;
  width: min(30vw, 360px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
body.home .hero-personal-eyebrow{
  font-family: var(--font-sans); font-size: 14.3px; font-weight: 600; letter-spacing: .28em;
  color: #D8B58C; opacity: 1; margin: 0 0 14px;
}
body.home .hero-personal-title{
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(36px, 3.61vw, 55px);
  line-height: 1.1; margin: 0 0 14px; color: var(--ivory-warm);
}
body.home .hero-personal-title span{ color: #D6B184; }
body.home .hero-personal-sub{
  font-family: var(--font-sans); font-size: 17.3px; font-weight: 500; line-height: 1.65;
  color: rgba(245,239,232,.88); margin: 0 0 20px; max-width: 320px;
}
body.home .hero-personal-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 275px; height: 52px; margin-top: 10px;
  border-radius: 999px; border: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: #E6D4C1; color: #4A2D21;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  body.home .hero-personal-cta:hover{ transform: translateY(-3px); gap: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
}
@media (max-width: 1024px){
  body.home .hero-personal-content{ width: min(38vw, 320px); }
  body.home .hero-personal-title{ font-size: clamp(28px, 4.2vw, 42px); }
  body.home .hero-personal-sub{ font-size: 14px; max-width: 280px; }
  body.home .hero-personal-cta{ width: 255px; height: 48px; font-size: 15px; }
}
@media (max-width: 768px){
  /* Top-left safe zone: the gift box/necklace and nameplate sit lower and
     right of center on the mobile crop, so copy anchors to the top-left
     corner and stays clear of them. The photo is light/warm there, so a
     dark scrim + text-shadow are added purely for contrast. */
  body.home .hero-personal-content{
    top: 20px; left: 18px; right: auto; width: min(64%, 270px);
    translate: 0 0; align-items: flex-start; text-align: left;
    padding: 14px 16px 16px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(38,24,16,.6) 0%, rgba(38,24,16,.36) 65%, rgba(38,24,16,0) 100%);
  }
  body.home .hero-personal-eyebrow{
    font-size: 13px; letter-spacing: .16em; margin-bottom: 8px;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  body.home .hero-personal-title{
    font-size: clamp(20px, 5.8vw, 27px); line-height: 1.16; margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
  }
  body.home .hero-personal-sub{
    font-size: 14px; line-height: 1.45; margin-bottom: 14px; max-width: none;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
  }
  body.home .hero-personal-cta{ width: auto; height: 46px; padding: 0 18px; font-size: 15px; margin-top: 2px; }
}

/* ---- The one homepage catalog card, base typography ----
   Luxury boutique hierarchy: name 16px/600, price 16-18px/700, material
   14px/500 — nothing hairline. Names are line-clamped to 2 lines so a
   long product name can never spill under or outside the fixed-height
   card; a min-height on the name reserves the 2-line box even for a
   1-line name, so every card's caption starts price/CTA at the same Y
   regardless of name length. */
body.home .home-product-card{ border: 1px solid var(--mg-border); border-radius: 2px; box-shadow: none; }
body.home .home-product-card .product-card-caption{ background: var(--ivory-warm); padding: 18px 16px 18px; display: flex; flex-direction: column; }
body.home .home-product-card .product-card-caption h3{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.35; color: #35231D;
  min-height: calc(1.35em * 2); margin: 0; text-align: left;
}
body.home .home-product-card .product-card-material{
  display: block; margin-top: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .02em;
  text-transform: uppercase; color: var(--home-text-muted); opacity: 1; text-align: left;
}
body.home .home-product-card .price-row{ margin-top: 10px; }
body.home .home-product-card .price-row .price,
body.home .home-product-card .product-card-caption .price{
  font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: #35231D; text-align: left;
}
body.home .home-product-card .price-row .price-old,
body.home .home-product-card .product-card-caption .price-old{
  font-size: 13.5px; color: var(--home-text-muted); text-decoration: line-through;
}
/* Soft champagne surface for the photo band — gives it a hair of
   separation from the off-white caption below without introducing an
   unrelated third color. */
body.home .home-product-card .product-image{ background: #F2E3D2; }
body.home .card-fav-btn{
  width: 30px; height: 30px; min-width: 30px; min-height: 30px; max-width: 30px; max-height: 30px;
  top: 10px; right: 10px;
  background: #fff; color: var(--mg-dark); border-color: var(--mg-border);
  box-shadow: 0 2px 8px rgba(74,45,33,.08);
}
body.home .card-fav-btn:hover{ background: #fff; }
body.home .card-fav-icon{ width: 14px; height: 14px; max-width: 14px; max-height: 14px; }
/* Real-card badge (YENİ / ÇOK SATAN etc., if present) shares the exact
   same small-pill visual language as the placeholder's "ÇOK YAKINDA"
   badge below — one badge system, not two designs. */
body.home .home-bestsellers-grid .product-card-badges{ top: 10px; left: 10px; }
body.home .home-bestsellers-grid .product-badge{
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 999px;
}

#collections{ scroll-margin-top: 80px; } /* hero "Keşfet" jump-target vs. the sticky header */

/* ==================================================
   MIDDLE HOMEPAGE — one authoritative system for Category Navigation and
   Best Sellers (Why Mert Gümüş and the Koleksiyonları Keşfet editorial
   index below have their own blocks further down). All sections share
   the same .container--narrow for identical left/right alignment. Every
   image in this system is normal flow — centered with flexbox and a
   plain max-width/max-height — never position:absolute, so nothing can
   float outside its card or collapse to zero size the way earlier passes
   did. Every card is one unified box (image + copy inside the same
   overflow:hidden container) — never a detached box.
   ================================================== */

/* 2 — Homepage product rows (Çok Satanlar / Yeni Sezon / Editörün
   Seçimi): each is its own .home-bestsellers section sharing this one
   static grid — a fixed 10-slot grid (real products + "coming soon"
   placeholders, see js/catalog.js). No horizontal slider, no arrows —
   the grid sits inline in normal page flow, width-matched to the same
   .container--narrow every other homepage section uses.

   ONE authoritative responsive system for this grid, all in this one
   place, as four cascading max-width tiers (each later, narrower query
   overriding the one above it — same pattern as the rest of this file):
     >=1024px  : 5 cols  (base rule below, unconditioned)
     768-1023  : 4 cols
     641-767   : 3 cols
     <=640px   : 2 cols, one rule all the way down to 320px
   Previously this was scattered across five different media queries
   (a stale ≤1024 3-col rule, two different ≤640 2-col rules that fought
   each other on source order, and two conflicting ≤380 rules, one of
   them 1-column) which is why the grid rendered 3+3+3+1 instead of the
   intended 5×2. Do not add another .home-bestsellers-grid breakpoint
   anywhere else — extend the tiers below instead. */
body.home .home-bestsellers{ background: var(--home-beige); padding: 20px 0 32px; border-top: 1px solid var(--mg-border); }
/* Widened just for these three product rows on true desktop (5-col
   tier only) so the grid uses more of the screen instead of sitting
   narrow with a huge auto-centered margin outside it — the section head
   and CTA line up on the same edges automatically since they share this
   container. Threshold matches the 5-col breakpoint below on purpose. */
@media (min-width: 1024px){
  body.home .home-bestsellers .container--narrow{
    max-width: 1680px;
    padding-inline: 48px;
  }
}
body.home .home-bestsellers-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
body.home .home-bestsellers-grid .home-product-card{
  display: flex; flex-direction: column;
  min-height: 385px; background: var(--ivory-warm);
  border: 1px solid rgba(74,45,33,.16); border-radius: 14px;
  box-shadow: 0 5px 16px rgba(74,45,33,.07);
  overflow: hidden;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  body.home .home-bestsellers-grid .home-product-card:hover{
    border-color: rgba(74,45,33,.26);
    box-shadow: 0 9px 22px rgba(74,45,33,.11);
  }
}
body.home .home-bestsellers-grid .product-card-media-link{ display: block; width: 100%; height: 220px; flex: 0 0 220px; overflow: hidden; background: #F2E3D2; border-radius: 14px 14px 0 0; }
body.home .home-bestsellers-grid .product-image{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
body.home .home-bestsellers-grid .product-image-photo{ padding: 10px; }
body.home .home-bestsellers-grid .product-card-caption{ flex: 1; min-height: 0; overflow: visible; border-radius: 0 0 14px 14px; }
/* Trailing "coming soon" placeholder card — same box as a real card
   (width/height/radius/border/spacing all inherited from .home-product-card
   above), not clickable and not lifted on hover so it never reads as an
   interactive product tile. Photo band reads as soft champagne silk
   (subtle diagonal gradient) rather than a flat empty box; caption band
   matches real cards exactly (off-white), just with muted mocha copy and
   a decorative, non-functional "Haber Ver" pill instead of a price. */
body.home .home-product-placeholder{ cursor: default; }
body.home .home-bestsellers-grid .home-product-placeholder{
  border-color: rgba(74,45,33,.14);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
body.home .home-bestsellers-grid .home-product-placeholder .product-card-media-link{
  background: linear-gradient(150deg, #F5EADD 0%, #EFDCC8 50%, #F3E7DB 100%);
  position: relative;
}
/* A hairline vignette frames the placeholder photo area so it reads as a
   deliberate, styled slot rather than an empty box — still purely
   decorative, no transform/lift (kept non-interactive, matches the code
   comment above: this card never reads as a clickable product tile). */
body.home .home-bestsellers-grid .home-product-placeholder .product-card-media-link::after{
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(74,45,33,.10);
  border-radius: 9px;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  body.home .home-bestsellers-grid .home-product-placeholder:hover{
    transform: none;
    border-color: rgba(74,45,33,.24);
    box-shadow: 0 10px 26px rgba(74,45,33,.09);
  }
}
/* Small corner badge — no longer the dominant centered element (was
   read as "empty box with big text"); a single quiet icon now carries
   the photo area, with the "ÇOK YAKINDA" label demoted to a compact
   pill in the top-left corner, the same visual language a real
   limited-availability badge would use elsewhere on the site. */
/* Same small-pill badge system as real cards (.product-badge above) —
   dark mocha fill, light text, matched size/tracking, just positioned
   the same absolute top-left corner spot within this card's own photo
   area (real cards use .product-card-badges for that; this placeholder
   has no such wrapper since it never carries more than one badge). */
body.home .home-product-placeholder .placeholder-badge{
  position: absolute; top: 13px; left: 13px; z-index: 1;
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(74,45,33,.85);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cta-text);
}
body.home .home-product-placeholder .placeholder-visual{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
body.home .home-product-placeholder .placeholder-icon{
  width: 39px; height: 39px;
  color: #4A2D21;
  fill: none; stroke: currentColor;
  opacity: .9;
}
body.home .home-product-placeholder .product-card-caption h3{
  color: var(--home-text-muted); font-weight: 600; font-size: 17px;
}
body.home .home-product-placeholder .product-card-material{
  text-transform: none; font-weight: 600; font-size: 14px;
}
/* Two demo-only CTAs, styled exactly like real Sepete Ekle/Hemen Al
   buttons but plain <button disabled> with no click handler anywhere in
   the codebase — see homePlaceholderCardMarkup() in js/catalog.js. Never
   wire real productId/addToCart/buy-now behaviour to these; there is no
   product behind this card. margin-top:auto pins the row to the bottom
   of the flex-column caption regardless of whether the name above wraps
   to 1 or 2 lines, so every card's CTA row lands on the same baseline. */
body.home .home-product-placeholder .placeholder-cta-row{
  display: flex; gap: 8px; margin-top: auto; padding-top: 15px;
}
body.home .home-product-placeholder .placeholder-cta{
  flex: 1 1 0; min-width: 0;
  min-height: 42px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .03em;
  border-radius: var(--radius-md);
  cursor: default;
  opacity: 1;
}
body.home .home-product-placeholder .placeholder-cta-primary{
  background: #4A2D21; color: #FFFAF5; border: 1px solid #4A2D21;
}
body.home .home-product-placeholder .placeholder-cta-secondary{
  background: var(--ivory-warm); color: #35231D; border: 1px solid rgba(74,45,33,.35);
}

/* ---- Tablet tier: 4 cols (768-1023px) ----
   10 slots over 4 columns leaves a 2-card remainder on the last row —
   expected and acceptable at this tier (only the 5-col and 2-col tiers
   are required to fill exactly). Not mentioned in the latest redesign
   spec (which only specifies 5-col desktop and 2-col <=767px) — kept as
   its own step so the grid doesn't jump straight from 5 to 2 columns on
   a genuine tablet-width screen; sizing scaled to match the new taller
   card proportions. */
@media (max-width: 1023px){
  body.home .home-bestsellers-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  body.home .home-bestsellers-grid .home-product-card{ min-height: 400px; }
  body.home .home-bestsellers-grid .product-card-media-link{ height: 250px; flex: 0 0 250px; }
}

/* ---- Mobile tier: 2 cols (<=767px), one rule all the way to 320px —
   replaces the old separate 3-col (641-767) and 2-col (<=640) tiers per
   the redesign spec's explicit "≤767px: 2 sütun". ---- */
@media (max-width: 767px){
  body.home .home-bestsellers-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.home .home-bestsellers-grid .home-product-card{ min-height: 370px; border-radius: 12px; }
  body.home .home-bestsellers-grid .product-card-media-link{ height: 237px; flex: 0 0 237px; border-radius: 12px 12px 0 0; }
  body.home .home-bestsellers-grid .home-product-card .product-card-caption{ padding: 12px 12px 14px; border-radius: 0 0 12px 12px; }
  body.home .home-product-card .product-card-caption h3{
    min-height: 0; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.3;
  }
  body.home .home-product-card .product-card-material{
    margin-top: 5px; font-size: 13px; line-height: 1.3; letter-spacing: .02em;
  }
  body.home .home-product-card .price-row{ margin-top: 8px; }
  body.home .home-product-card .price-row .price,
  body.home .home-product-card .product-card-caption .price{ font-size: 15px; }
  body.home .home-product-placeholder .placeholder-icon{ width: 26px; height: 26px; }
  body.home .home-product-placeholder .placeholder-badge{ top: 8px; left: 8px; font-size: 9.5px; padding: 3px 9px; }
  body.home .home-product-placeholder .product-card-caption h3{ font-size: 14px; }
  body.home .home-product-placeholder .placeholder-cta-row{ gap: 6px; padding-top: 8px; }
  body.home .home-product-placeholder .placeholder-cta{ min-height: 39px; font-size: 11px; letter-spacing: .01em; }
}

/* ---- Narrowest phones: if the two demo CTAs genuinely can't both stay
   legible side-by-side, stack them full-width instead of squeezing text
   — never horizontal scroll, never clipped/truncated labels. ---- */
@media (max-width: 390px){
  body.home .home-product-placeholder .placeholder-cta-row{ flex-direction: column; gap: 6px; }
  body.home .home-product-placeholder .placeholder-cta{ width: 100%; }
}

/* 3 — Promotional campaign bands: four full-width editorial banners
   (Baget Koleksiyonu / Yeni Sezon / Saat Koleksiyonu / Zarafetin Tanımı)
   replacing the old 3-column text index. Each band is a 48/52 two-track
   grid — a real product photo on one side, headline + pill CTA on the
   other — order-swapped per slide via --flip so every slide reads as a
   different composition while the two tracks keep the same width ratio.
   Only the two existing homepage surfaces (--home-beige /
   --home-beige-strong) and --mg-dark/--mg-text/--mg-text-light are used;
   no new color is introduced. */
body.home .home-promo{ background: var(--home-beige); padding: 20px 0; }
body.home .home-promo--tint{ background: var(--home-beige-strong); }
body.home .home-promo-band{
  display: grid; grid-template-columns: 48% 52%; grid-template-rows: 360px; align-items: stretch;
  border-radius: 6px; overflow: hidden;
}
body.home .home-promo-media{
  order: 1; display: block; min-height: 100%;
  background: var(--home-beige-strong);
}
body.home .home-promo--tint .home-promo-media{ background: var(--home-beige); }
body.home .home-promo-media .product-image-photo{
  width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 22px; box-sizing: border-box;
}
body.home .home-promo-text{
  order: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 20px clamp(28px, 4vw, 56px); text-align: left;
}
body.home .home-promo-band--flip .home-promo-media{ order: 2; }
body.home .home-promo-band--flip .home-promo-text{ order: 1; }
body.home .home-promo-title{
  font-family: var(--font-serif); font-size: clamp(30px, 3vw, 42px); font-weight: 650;
  letter-spacing: -.012em; line-height: 1.08; color: var(--mg-text); margin: 6px 0 0;
}
body.home .home-promo-sub{
  margin-top: 12px; max-width: 380px; font-family: var(--font-sans); font-size: 15px;
  font-weight: 500; line-height: 1.55; color: var(--home-text-muted);
}
body.home .home-promo-cta{
  display: inline-flex; align-items: center; gap: 8px; height: 50px; margin-top: 24px;
  padding: 0 32px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--mg-dark); color: var(--mg-text-light);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
/* Dark text panel (Saat Koleksiyonu slide): inverted onto --mg-dark, so
   the eyebrow/heading/sub switch to the light tokens and the pill flips
   to an outline instead of a second solid dark block. */
body.home .home-promo-text--dark{ background: var(--mg-dark); }
body.home .home-promo-text--dark .home-promo-title{ color: var(--mg-text-light); }
body.home .home-promo-text--dark .home-promo-sub{ color: var(--mg-text-light-sub); }
body.home .home-promo-text--dark .home-promo-cta{
  background: transparent; color: var(--mg-text-light); border-color: rgba(255,246,238,.75);
}
@media (hover: hover) and (pointer: fine){
  body.home .home-promo-cta:hover{ gap: 12px; }
  body.home .home-promo-text:not(.home-promo-text--dark) .home-promo-cta:hover{ background: var(--home-text); }
  body.home .home-promo-text--dark .home-promo-cta:hover{ background: var(--mg-text-light); color: var(--mg-dark); }
}

/* ==================================================
   4 — Two single-row premium typographic marquee strips, one under Çok
   Satanlar (loops left→right, 32s) and one under Yeni Sezon (loops
   right→left, 36s). No cards, icons, badges, or heavy borders — just
   letter-spaced serif type and small diamond separators on a thin
   champagne/satin strip. Each track holds the same word set twice
   back-to-back (see markup) so animating exactly -50%/0% loops with no
   seam, gap, or jump; hover never pauses it per spec. A soft multi-stop
   diagonal gradient stands in for a woven-silk sheen without an image
   asset or any glow/neon effect. */
body.home .home-strip{
  position: relative;
  /* Pulls up out of the preceding product section's 32px bottom padding
     so the visible gap above reads as ~18px (16-20px target) without
     touching that shared section rule; the following section's own 20px
     top padding alone already lands the gap below at 20px (20-24px
     target), so no bottom margin is needed here. */
  margin-top: -14px;
}
body.home .home-ribbon-row{
  position: relative; overflow: hidden;
  height: 44px; display: flex; align-items: center;
  background: linear-gradient(115deg, #EFE3D7 0%, #F4ECE3 22%, #EFE3D7 46%, #F2E8DD 70%, #EFE3D7 100%);
}
/* The mask lives on this fixed-width, transparent viewport — not on the
   row (which owns the solid champagne background, left unmasked so it
   stays full-bleed) and not on the track (which is far wider than the
   viewport once scrolled, so a mask there would fade relative to its own
   huge width instead of the visible edges). Fades only the scrolling
   text at the row's visible left/right edges. */
body.home .home-ribbon-viewport{
  width: 100%; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
body.home .home-ribbon-track{
  display: flex; flex-wrap: nowrap; align-items: center; width: max-content; height: 100%;
  will-change: transform;
  animation: mgRibbonRight 32s linear infinite;
}
body.home .home-ribbon-track--reverse{ animation-name: mgRibbonLeft; animation-duration: 36s; }
@keyframes mgRibbonRight{
  from{ transform: translate3d(-50%,0,0); }
  to{ transform: translate3d(0,0,0); }
}
@keyframes mgRibbonLeft{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
body.home .home-ribbon-set{ display: flex; flex-wrap: nowrap; align-items: center; flex-shrink: 0; }
body.home .home-ribbon-item{
  font-family: var(--font-serif); font-weight: 400; font-size: 16px; letter-spacing: 2.5px;
  color: #5A4034; white-space: nowrap; line-height: 1;
}
body.home .home-ribbon-sep{
  font-size: 12px; color: rgba(90,64,52,.5); margin: 0 22px; line-height: 1;
}
@media (max-width: 640px){
  body.home .home-ribbon-row{ height: 40px; }
  body.home .home-ribbon-item{ font-size: 14px; letter-spacing: 1.8px; }
  body.home .home-ribbon-sep{ font-size: 10px; margin: 0 14px; }
}
/* ==================================================
   5 — Footer surface lock + readability (homepage only)
   The footer markup is shared across every page; on index.html both the
   main footer and the lower payment/security strip are forced to the same
   --mg-dark (#4A2D21) as the hero — one single brown across all three dark
   anchors of the page, deliberately kept to one tone, not a family of them.
   Footer-top (intro + nav columns) no longer needs a homepage-specific
   override here — its colors are literal in the base .footer-top rules
   above, identical on every page including this one. Only footer-lower
   (payment/monogram/security) is still handled here. */
body.home .site-footer{ background: var(--mg-dark); }
body.home .footer-lower{ background: var(--mg-dark); }
body.home .footer-trust{ border-top-color: rgba(255,246,238,.14); }
body.home .trust-item{ border-left-color: rgba(255,246,238,.14); }
body.home .trust-item svg{ color: rgba(255,246,238,.82); }
body.home .trust-item strong{ color: var(--mg-text-light); }
body.home .trust-item span{ color: rgba(255,246,238,.82); }
body.home .footer-lower{ border-top-color: rgba(255,255,255,.08); }
body.home .footer-monogram,
body.home .footer-monogram .mg{ color: var(--mg-text-light); }
body.home .footer-monogram .mg::before,
body.home .footer-monogram .mg::after{ background: rgba(255,246,238,.14); }
body.home .footer-copyright{ color: rgba(255,246,238,.8); }
body.home .footer-security{ color: var(--mg-text-light); }
body.home .footer-security-item > svg{ color: rgba(255,246,238,.82); }
body.home .footer-security .fs-text{ color: rgba(255,246,238,.82); }
body.home .footer-security .fs-text em{ color: var(--mg-text-light); }
body.home .footer-security-divider{ background: rgba(255,246,238,.14); }

/* Same footer color/text/icon tone on every page, not just the homepage.
   Literal values below mirror body.home's --mg-dark/--mg-text-light since
   those custom properties only exist inside body.home. Pure addition —
   the body.home rules above are untouched and still win there via
   specificity, so the visual result stays identical on the homepage too.
   Footer-top is excluded here for the same reason noted in the body.home
   block above — it's already literal/unified in the base .footer-top
   rules, so only footer-lower (payment/monogram/security) needs this. */
.site-footer{ background: #4A2D21 !important; }
.footer-lower{ background: #4A2D21 !important; }
.footer-trust{ border-top-color: rgba(255,246,238,.14); }
.trust-item{ border-left-color: rgba(255,246,238,.14); }
.trust-item svg{ color: rgba(255,246,238,.82); }
.trust-item strong{ color: #FFF6EE; }
.trust-item span{ color: rgba(255,246,238,.82); }
.footer-monogram,
.footer-monogram .mg{ color: #FFF6EE; }
.footer-monogram .mg::before,
.footer-monogram .mg::after{ background: rgba(255,246,238,.14); }
.footer-copyright{ color: rgba(255,246,238,.8); }
.footer-security{ color: #FFF6EE; }
.footer-security-item > svg{ color: rgba(255,246,238,.82); }
.footer-security .fs-text{ color: rgba(255,246,238,.82); }
.footer-security .fs-text em{ color: #FFF6EE; }
.footer-security-divider{ background: rgba(255,246,238,.14); }

/* ==================================================
   Tablet ≤1024px
   ================================================== */
@media (max-width: 1024px){
  /* .home-bestsellers-grid's own responsive rules now live in ONE place,
     right after its base declaration above — see the tablet/mobile tier
     comments there. Do not add grid rules back here. */
  body.home .home-promo-band{ grid-template-columns: 44% 56%; grid-template-rows: 300px; }
  body.home .home-promo-text{ padding: 18px clamp(22px, 3vw, 36px); }
  body.home .home-promo-title{ font-size: clamp(26px, 3.4vw, 34px); }
  body.home .home-promo-sub{ font-size: 14px; }
}

/* ==================================================
   Mobile ≤640px — placed after the generic `.section` mobile rule
   above so these always win the cascade tie without !important.
   ================================================== */
@media (max-width: 640px){
  body.home .home-bestsellers,
  body.home .home-promo{
    padding-block: 32px;
  }

  body.home .home-promo{ padding-block: 18px; }
  body.home .home-promo-band,
  body.home .home-promo-band--flip{
    grid-template-columns: 1fr; grid-template-rows: 220px auto;
  }
  body.home .home-promo-band .home-promo-media,
  body.home .home-promo-band--flip .home-promo-media{ order: 1; }
  body.home .home-promo-band .home-promo-text,
  body.home .home-promo-band--flip .home-promo-text{ order: 2; }
  body.home .home-promo-text{
    align-items: center; text-align: center; padding: 22px 20px;
  }
  body.home .home-promo-sub{ max-width: none; }
  body.home .home-promo-title{ font-size: clamp(24px, 6vw, 30px); }
}

/* ==================================================
   Homepage campaign banners — full-bleed editorial photo with the
   headline/CTA overlaid on top of it (not beside it). Each card's
   `.container--narrow` is widened/near-flush just for this section
   (scoped selector below) so the banner reads near full page width
   without touching the shared container used by other homepage
   sections. The image fills the card as a true background
   (object-fit: cover, its own real aspect ratio, never stretched);
   a soft directional scrim behind the text is the only thing between
   photo and headline — no card surface, border or shadow. */
body.home .home-campaigns{
  background: var(--home-beige);
  padding: clamp(14px, 1.6vw, 20px) 0 0;
}
body.home .home-campaigns .container--narrow{
  max-width: 2040px;
  padding-inline: clamp(6px, 1vw, 18px);
}
body.home .home-campaign-stack{
  display: grid;
  gap: clamp(8px, 0.9vw, 12px);
}
body.home .home-campaign-card{
  position: relative;
  display: block;
  height: clamp(336px, 32.5vw, 382px);
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}
body.home .home-campaign-card--ondark{
  height: clamp(352px, 34vw, 400px);
}
body.home .home-campaign-media{ position: absolute; inset: 0; z-index: 0; }
body.home .home-campaign-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .7s var(--ease);
}
body.home .home-campaign-card::before{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(255,248,240,.6) 0%, rgba(255,248,240,.26) 34%, rgba(255,248,240,0) 58%);
}
body.home .home-campaign-card--ondark::before{
  background: linear-gradient(100deg, rgba(35,20,13,.62) 0%, rgba(35,20,13,.3) 34%, rgba(35,20,13,0) 58%);
}
body.home .home-campaign-content{
  position: relative; z-index: 2; height: 100%; max-width: 620px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-inline: clamp(28px, 5vw, 72px); text-align: left;
}
body.home .home-campaign-eyebrow{
  font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mg-text-sub); margin: 0 0 10px;
}
body.home .home-campaign-title{
  font-family: var(--font-serif); font-size: clamp(38px, 4.6vw, 58px); font-weight: 650;
  letter-spacing: -.014em; line-height: 1.04; color: var(--mg-text); margin: 0 0 14px;
}
body.home .home-campaign-sub{
  max-width: 440px; font-family: var(--font-sans); font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500; line-height: 1.55; color: var(--home-text-muted); margin: 0 0 26px;
}
body.home .home-campaign-cta{
  display: inline-flex; align-items: center; gap: 10px; height: 56px;
  padding: 0 38px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--mg-dark); color: var(--mg-text-light);
  box-shadow: 0 10px 26px rgba(74,45,33,.3);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease);
}
body.home .home-campaign-card--ondark .home-campaign-eyebrow{ color: var(--mg-text-light-sub); }
body.home .home-campaign-card--ondark .home-campaign-title{ color: var(--mg-text-light); }
body.home .home-campaign-card--ondark .home-campaign-sub{ color: var(--mg-text-light-sub); }
body.home .home-campaign-card--ondark .home-campaign-cta{
  background: var(--mg-text-light); color: var(--mg-dark); box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
@media (hover:hover) and (pointer:fine){
  body.home .home-campaign-card:hover .home-campaign-media img{ transform: scale(1.045); }
  body.home .home-campaign-cta:hover{ transform: translateY(-3px); gap: 14px; box-shadow: 0 14px 32px rgba(74,45,33,.36); }
  body.home .home-campaign-card--ondark .home-campaign-cta:hover{ box-shadow: 0 14px 32px rgba(0,0,0,.4); }
}
@media (max-width: 900px){
  body.home .home-campaign-content{ max-width: 78%; }
}
@media (max-width: 760px){
  body.home .home-campaigns{ padding-block: 14px 0; }
  body.home .home-campaigns .container--narrow{ padding-inline: 6px; }
  body.home .home-campaign-stack{ gap: 10px; }
  body.home .home-campaign-card{ height: clamp(280px, 78vw, 340px); border-radius: 2px; }
  body.home .home-campaign-card--ondark{ height: clamp(292px, 81vw, 356px); }
  body.home .home-campaign-content{ max-width: 100%; padding-inline: 22px; }
  body.home .home-campaign-title{ font-size: clamp(26px, 7vw, 34px); }
  body.home .home-campaign-sub{ max-width: none; font-size: 14px; margin-bottom: 20px; }
  body.home .home-campaign-cta{ height: 48px; padding: 0 26px; font-size: 15px; }
}

/* ==========================================================================
   "İlk Sipariş %10 İndirim" — side tab + drawer (homepage only) and the
   İndirim Kodu widget + pricing rows it feeds on the cart/checkout
   summaries. Palette is the same premium mocha/cream set used sitewide
   (#4A2D21 / #FBF6F0 / #35231D / #74665F) — no campaign red, no glow.
   ========================================================================== */

/* ---- Closed state: fixed side tab ---- */
.discount-tab{
  position: fixed;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  width: 42px;
  height: 155px;
  z-index: 650;
  background: #4A2D21;
  color: #FFF8F0;
  border: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px rgba(53,35,29,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width .22s var(--ease), opacity .22s var(--ease), transform .22s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .discount-tab:hover{ width: 46px; }
}
/* Desktop/tablet only (mobile gets its own pill shape entirely, further
   below) — a few px more compact and sitting flush at the true edge so
   it reads as a slim docked tab rather than reaching into the product
   grid's first column. */
@media (min-width: 641px){
  .discount-tab{ width: 38px; height: 138px; }
}
@media (min-width: 641px) and (hover: hover) and (pointer: fine){
  .discount-tab:hover{ width: 42px; }
}
.discount-tab-label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.discount-tab-line{
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.discount-tab-percent{
  font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .02em;
}

/* ---- Overlay + drawer ---- */
.discount-overlay{
  position: fixed; inset: 0;
  background: rgba(53,35,29,.12);
  z-index: 890;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.discount-overlay.is-open{ opacity: 1; pointer-events: auto; }

.discount-drawer{
  position: fixed;
  top: 0; left: 0;
  width: 340px;
  height: 100vh;
  height: 100dvh;
  z-index: 900;
  background: #FBF6F0;
  border-right: 1px solid rgba(74,45,33,.10);
  box-shadow: 18px 0 50px rgba(53,35,29,.14);
  transform: translateX(-100%);
  transition: transform .36s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
}
.discount-drawer.is-open{ transform: translateX(0); }

.discount-drawer-close{
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #4A2D21;
  transition: background .2s var(--ease);
}
.discount-drawer-close:hover{ background: rgba(74,45,33,.08); }

.discount-drawer-inner{ padding: 64px 32px 40px; }

.discount-drawer-eyebrow{
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #8B6F56;
  margin: 0 0 14px;
}
.discount-drawer-title{
  font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 1.15;
  color: #35231D; margin: 0 0 14px;
}
.discount-drawer-sub{
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-secondary);
  max-width: 270px; margin: 0 0 22px;
}
.discount-drawer-rule{ display: block; width: 44px; height: 1px; background: rgba(74,45,33,.22); margin: 0 0 26px; }

/* ---- Form ---- */
.discount-field{ display: block; margin-bottom: 12px; }
.discount-field input{
  width: 100%; height: 48px; box-sizing: border-box;
  background: #F3E7DB;
  border: 1px solid rgba(74,45,33,.28);
  border-radius: 8px;
  padding: 0 16px;
  font-family: var(--font-sans); font-size: 15px; color: #35231D;
  transition: border-color .2s var(--ease);
}
.discount-field input::placeholder{ color: #8A7666; }
.discount-field input:focus{ outline: none; border-color: #4A2D21; }
.discount-field input[aria-invalid="true"]{ border-color: #8B3A2A; }
.discount-error{ margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #8B3A2A; }
.discount-submit{
  width: 100%; height: 48px; border-radius: 8px;
  background: #4A2D21; color: #FFF8F0;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.discount-submit:hover{ background: #3A2119; }

/* ---- Success state ---- */
.discount-success-eyebrow{
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #8B6F56; margin: 0 0 10px;
}
.discount-success-title{
  font-family: var(--font-serif); font-weight: 500; font-size: 24px; color: #35231D; margin: 0 0 20px;
}
.discount-code-box{
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 8px 0 18px;
  background: #F3E7DB; border: 1px dashed rgba(74,45,33,.35); border-radius: 8px;
  margin: 0 0 16px;
}
.discount-code{
  font-family: var(--font-sans); font-size: 16px; font-weight: 800; letter-spacing: .08em; color: #35231D;
}
.discount-copy-btn{
  height: 38px; padding: 0 14px; border-radius: 6px; white-space: nowrap;
  background: #4A2D21; color: #FFF8F0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.discount-copy-btn:hover{ background: #3A2119; }
.discount-copy-btn.is-copied{ background: #4A5D3A; }
.discount-copy-btn.is-copy-failed{ background: #8B3A2A; }
.discount-success-note{ font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

@media (max-width: 640px){
  .discount-tab{ width: 38px; height: 130px; }
  .discount-drawer{ width: calc(100vw - 20px); max-width: 360px; }
  .discount-drawer-inner{ padding: 56px 24px 32px; }
  .discount-drawer-title{ font-size: 28px; }
}

/* ---- İndirim Kodu widget — shared by the cart and checkout summaries ---- */
.discount-code-field{ margin: 4px 0 18px; }
.discount-code-form{ display: flex; gap: 8px; }
.discount-code-form input{
  flex: 1; min-width: 0; height: 46px; box-sizing: border-box;
  background: var(--inner-alt); border: 1px solid rgba(74,45,33,.22); border-radius: 8px;
  padding: 0 14px; font-family: var(--font-sans); font-size: 15px; color: #35231D;
  transition: border-color .2s var(--ease);
}
.discount-code-form input:focus{ outline: none; border-color: #4A2D21; }
.discount-code-form button{
  height: 46px; padding: 0 18px; border-radius: 8px; white-space: nowrap;
  background: #4A2D21; color: #FFF8F0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.discount-code-form button:hover{ background: #3A2119; }
.discount-code-error{ margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #8B3A2A; }
.discount-code-applied{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--inner-alt); border: 1px solid rgba(74,45,33,.18); border-radius: 8px;
  font-size: 14.5px; color: #35231D;
}
.discount-code-applied svg{ flex: 0 0 14px; color: #8B6F56; }

/* ---- Cart summary rows ---- */
.cart-summary{
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px;
  padding: 24px 26px;
}
@media (min-width: 1024px){
  .cart-summary{ position: sticky; top: 96px; }
}
.cart-summary-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; font-size: 16px; color: #35231D;
  border-bottom: 1px solid rgba(74,45,33,.08);
}
.cart-summary-row--discount span:last-child{ color: #4A2D21; font-weight: 700; }
.cart-summary-row--total{
  border-bottom: 0; border-top: 1px solid rgba(74,45,33,.16);
  margin-top: 4px; padding-top: 14px;
  font-size: 18px; font-weight: 700;
}
.cart-summary-actions{ display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cart-continue-link{
  text-align: center; font-size: 14px; font-weight: 600; color: #4A2D21;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Checkout summary rows ---- */
.checkout-subtotal-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; font-size: 16px; color: #35231D;
  border-bottom: 1px solid rgba(74,45,33,.08);
}
.checkout-subtotal-row--discount span:last-child{ color: #4A2D21; font-weight: 700; }
.checkout-subtotal-row--total{
  border-bottom: 0; border-top: 1px solid rgba(74,45,33,.16);
  margin-top: 4px; padding-top: 14px;
  font-size: 18px; font-weight: 700;
}

/* ==========================================================================
   INNER PAGES — premium UI/UX pass (Hesabım, Sepet, Ödeme, Sipariş Takibi,
   Hakkımızda, İletişim, SSS, Kargo, İade, Ödeme ve Güvenlik, legal pages).
   Every rule below is scoped to .inner-main (or a class that only exists
   inside it) — index.html's <main> deliberately has no .inner-main class,
   so none of this can ever reach the homepage hero/product sections, and
   the header markup sits outside <main> entirely, so desktop header is
   untouched too.
   ========================================================================== */

/* ---- 12) Global form fields ---- */
.inner-main input:not([type="checkbox"]):not([type="radio"]),
.inner-main select,
.inner-main textarea{
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  border: 1px solid rgba(74,45,33,.20);
  background: #F8EFE8;
  color: #35231D;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inner-main input:not([type="checkbox"]):not([type="radio"]),
.inner-main select{ height: 50px; padding: 0 14px; }
.inner-main textarea{ padding: 13px 14px; min-height: 120px; line-height: 1.5; resize: vertical; }
/* .58 alpha (was .42) — a placeholder should read as "example text", not
   as barely-there hairline gray. */
.inner-main input::placeholder,
.inner-main textarea::placeholder{ color: rgba(53,35,29,.58); }
.inner-main input:focus,
.inner-main select:focus,
.inner-main textarea:focus{
  outline: none;
  border-color: #4A2D21;
  box-shadow: 0 0 0 3px rgba(74,45,33,.06);
}
.inner-main input:disabled,
.inner-main select:disabled,
.inner-main textarea:disabled{
  background: rgba(74,45,33,.05); color: rgba(53,35,29,.4); cursor: not-allowed;
}
.inner-main label{ display: block; font-size: var(--fs-label); font-weight: 600; color: #35231D; margin-bottom: 7px; }

/* ---- form-card / form-field / form-row (auth, contact, checkout, tracking) ---- */
.form-card{
  background: var(--inner-card);
  border: 1px solid rgba(74,45,33,.12);
  border-radius: 12px;
  padding: 28px 30px;
}
.form-field{ margin-bottom: 18px; }
.form-field:last-of-type{ margin-bottom: 0; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-card > .btn{ width: 100%; margin-top: 6px; }
/* Hesabım auth card: compact, not a full-bleed panel */
.auth-card{ max-width: 480px; }
/* Sipariş Takibi: a wide, near full-width query form reads oversized —
   cap it and give the submit button a normal button width instead of
   stretching edge to edge. */
.track-card{ max-width: 760px; }
.track-card > .btn{ width: auto; min-width: 230px; }
.form-note{ margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
.form-status{ margin-top: 14px; font-size: 14px; line-height: 1.6; color: #35231D; display: none; }
.form-status.is-visible{ display: block; }
.auth-secondary-action{ margin-top: 10px; text-align: right; }
.auth-secondary-action .text-link{ border-bottom: 0; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }

.form-gate-notice,
.checkout-payment-gate{
  display: flex; gap: 14px;
  background: var(--inner-alt);
  border: 1px solid rgba(74,45,33,.16);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.form-gate-notice svg,
.checkout-payment-gate svg{ flex: 0 0 20px; color: #4A2D21; margin-top: 2px; }
.form-gate-notice h3,
.checkout-payment-gate h3{ font-size: 14px; font-weight: 700; color: #35231D; margin: 0 0 4px; }
.form-gate-notice p,
.checkout-payment-gate p{ font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.form-gate-notice-actions,
.checkout-payment-gate-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form-gate-notice-actions .btn,
.checkout-payment-gate-actions .btn{ padding: 11px 18px; font-size: 15px; height: auto; }
.checkout-payment-gate{ max-width: 720px; }
/* Scoped bump over the shared .form-gate-notice sizes above — checkout
   page only, sikca-sorulan-sorular/hesabim/iletisim's own gate keeps the
   (already-fixed) shared sizes just above. */
.checkout-payment-gate h3{ font-size: 16px; }

/* ---- Auth tabs (Hesabım): segmented control built on the existing
   .filter-chip pill, restyled only inside this track so category-page
   filter chips are untouched. ---- */
.auth-tabs{
  display: inline-flex; gap: 4px;
  background: var(--inner-alt); padding: 4px; border-radius: 999px;
  margin-bottom: 22px;
}
.auth-tabs .filter-chip{
  background: transparent; border-color: transparent; color: var(--text-secondary);
  padding: 9px 22px;
}
.auth-tabs .filter-chip.is-active,
.auth-tabs .filter-chip[aria-pressed="true"]{
  background: #4A2D21; border-color: #4A2D21; color: #FFF8F0;
}

/* ---- Benefits panel (Hesabım, right column) ---- */
.benefits-panel{
  background: #4A2D21; color: #FFF8F0;
  border-radius: 12px; padding: 32px 30px;
}
.benefits-panel h2{
  font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2;
  color: #FFF8F0; margin: 8px 0 22px;
}
.benefits-list{ display: flex; flex-direction: column; gap: 18px; }
.benefits-list li{
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 14px; line-height: 1.5; color: rgba(255,248,240,.88);
}
.benefits-list li svg{ flex: 0 0 22px; color: #DCC7B1; margin-top: 1px; }

/* ---- Consent checkbox (Ödeme) ----
 * .checkout-consent-block wraps the Mesafeli Satış Sözleşmesi step inside
 * the same Sipariş Özeti card as everything above it — a top divider is
 * what separates it visually, not a whole new card. */
.checkout-consent-block{ margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(74,45,33,.10); }
.consent-check{ display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 4px; }
.consent-check input[type="checkbox"]{
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  accent-color: #4A2D21; cursor: pointer;
}
.consent-check span{ font-size: 15px; line-height: 1.6; color: #35231D; }
.consent-link{
  display: inline-block; margin-top: 8px;
  font-size: 14px; font-weight: 600; color: #4A2D21;
  text-decoration: underline; text-underline-offset: 2px;
}
.checkout-payment-note{ display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.checkout-payment-note svg{ flex: 0 0 16px; color: #4A2D21; }

/* ---- İletişim: contact detail list ---- */
.contact-intro-panel{ margin-bottom: 28px; }
.contact-intro-panel p{ color: var(--inner-body); font-weight: 500; font-size: 14.5px; line-height: 1.7; max-width: 480px; }
.contact-detail-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.contact-detail{ display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(74,45,33,.10); }
.contact-detail svg{ flex: 0 0 22px; color: #4A2D21; margin-top: 2px; }
.contact-detail h3{ font-size: 13px; font-weight: 700; color: #6A4A3B; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .1em; }
.contact-detail p{ font-size: 14.5px; color: var(--inner-body); font-weight: 500; line-height: 1.5; }
.contact-detail p a{ color: #35231D; transition: color .2s var(--ease); }
.contact-detail p a:hover{ color: #4A2D21; }

/* ---- Accordion (SSS / FAQ) — main.js toggles aria-expanded and sets
   panel.style.maxHeight directly; the CSS only needs to supply the closed
   default (max-height:0, overflow hidden) and the open/close transition. ---- */
.accordion-wrap{ max-width: 820px; }
.accordion-item{ border-bottom: 1px solid rgba(74,45,33,.12); }
.accordion-item:first-child{ border-top: 1px solid rgba(74,45,33,.12); }
.accordion-item-btn{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 4px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; text-align: left;
  color: #35231D;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.accordion-item-btn:hover{ color: #4A2D21; background: rgba(74,45,33,.045); }
.accordion-plus{ position: relative; flex: 0 0 15px; width: 15px; height: 15px; }
.accordion-plus span{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #4A2D21; transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.accordion-plus span:first-child{ width: 13px; height: 1px; }
.accordion-plus span:last-child{ width: 1px; height: 13px; }
.accordion-item-btn[aria-expanded="true"] .accordion-plus span:last-child{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.accordion-panel-inner{ padding: 0 4px 20px; }
.accordion-panel-inner p{ font-size: 14.5px; font-weight: 500; line-height: 1.7; color: var(--inner-body); max-width: 720px; }

/* ---- Process / stepper cards (Kargo, Sipariş Takibi) — numbered via CSS
   counters so the existing HTML (h3 + p, no icon markup) doesn't need to
   change. ---- */
.process-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
  counter-reset: process-step;
}
.process-grid--four{ grid-template-columns: repeat(4, 1fr); }
.process-card{
  padding: 26px 24px;
  border-right: 1px solid rgba(74,45,33,.10);
  counter-increment: process-step;
}
.process-card:last-child{ border-right: 0; }
@media (max-width: 900px){
  .process-grid,
  .process-grid--four{ grid-template-columns: 1fr; }
  .process-card{ border-right: 0; border-bottom: 1px solid rgba(74,45,33,.10); }
  .process-card:last-child{ border-bottom: 0; }
}
.process-card::before{
  content: counter(process-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif); font-weight: 600; font-size: 26px;
  line-height: 1; color: #8C6B57;
  margin-bottom: 14px;
}
.process-card h3{ font-size: 15px; font-weight: 700; color: #35231D; margin: 0 0 8px; }
.process-card p{ font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--inner-body); margin: 0; }

/* ---- Trust / value cards (Ödeme ve Güvenlik, Hakkımızda, Kargo özel
   durumlar) — auto-fit so the same rule works whether a page has 2 or 4
   cards, without per-page column overrides. ---- */
.block-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.block-card{
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px;
  padding: 26px 22px;
}
.block-card svg{ color: #4A2D21; margin-bottom: 14px; }
.block-card h3{ font-size: 15px; font-weight: 700; color: #35231D; margin: 0 0 8px; }
/* Ödeme ve Güvenlik: one bordered surface with dividers between the 4
   trust items instead of 4 separate floating boxes. */
.block-grid--surface{
  gap: 0;
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
}
.block-grid--surface .block-card{
  background: transparent; border: 0; border-radius: 0;
  border-right: 1px solid rgba(74,45,33,.10);
}
.block-grid--surface .block-card:last-child{ border-right: 0; }
@media (max-width: 900px){
  .block-grid--surface{ grid-template-columns: 1fr; }
  .block-grid--surface .block-card{ border-right: 0; border-bottom: 1px solid rgba(74,45,33,.10); }
  .block-grid--surface .block-card:last-child{ border-bottom: 0; }
}
.block-card p{ font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--inner-body); margin: 0; }

/* ---- Shared small accent rule under a .section-head title — used across
   Hakkımızda's sections without touching the shared .section-head/
   .section-title rules that render on every other page. ---- */
.section-head-rule{ display: block; width: 48px; height: 2px; background: #4A2D21; margin-top: 20px; }

/* ---- Value blocks (Hakkımızda: "Bizi Biz Yapan Değerler") — a light
   card-tint + top rule gives each block enough presence to fill its column
   without becoming a heavy bordered/shadowed card. Exclusive to this page. ---- */
.value-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.value-block{
  padding: 20px 18px 18px;
  background: #F7E9DE;
  border: 1px solid rgba(74,45,33,.10);
  border-radius: 8px;
}
.value-block .value-num{
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: 22px;
  line-height: 1; color: rgba(74,45,33,.35); margin-bottom: 10px;
}
.value-block h3{ font-size: 16px; font-weight: 700; color: #35231D; margin: 0 0 6px; }
.value-block p{ font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--inner-body); margin: 0; }

/* ---- Hakkımızda: "Markamız" — small label/title column beside the copy,
   with a very small, deliberately-not-dominant "MG" signature above the
   eyebrow (13px, low-opacity serif — nowhere near the old full-size MG
   panel this page used to carry). ---- */
.about-brand-grid{ display: grid; grid-template-columns: minmax(200px,34%) minmax(0,1fr); gap: 40px; align-items: start; }
.about-mini-mark{
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; color: rgba(74,45,33,.4); margin-bottom: 10px;
}
@media (max-width: 900px){
  .about-brand-grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Hakkımızda: "Sadelikte Zarafet" — text column + a small pull-quote
   panel instead of the old full-size MG mark. Quote panel uses the same
   card tone/accent language as the rest of the page (var(--inner-card),
   #4A2D21 accent), so it reads as part of the same system, not a one-off
   decoration. ---- */
.elegance-section{ background: var(--inner-alt); }
.elegance-section .content-copy p{ max-width: 600px; }
.about-design-grid{ display: grid; grid-template-columns: minmax(0,1.5fr) minmax(200px,.85fr); gap: 48px; align-items: center; }
.about-quote{
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 28px 25px;
  background: var(--inner-card);
  border-left: 3px solid #4A2D21;
  border-radius: 0 10px 10px 0;
}
.about-quote-mark{ font-family: var(--font-serif); font-size: 42px; line-height: .6; color: rgba(74,45,33,.32); }
.about-quote-text{ font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: 21px; line-height: 1.3; color: #35231D; }
.about-quote-rule{ display: block; width: 36px; height: 1px; background: rgba(74,45,33,.35); }
@media (max-width: 900px){
  .about-design-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Hakkımızda: "Kişiye Özel Tasarım" — copy column + a short list of
   plain, undecorated info rows (numbered, hairline-divided) instead of
   bordered/shadowed boxes, so the section fills out without reading as a
   product-feature grid. ---- */
.about-custom-grid{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(230px,.9fr); gap: 56px; align-items: start; }
/* A little extra breathing room before the footer — this is the page's
   last section, and 58px of shared .content-section bottom padding alone
   read as glued to the footer beneath it. */
.content-section.about-custom-section{ padding-bottom: 108px; }
@media (max-width: 1023px){
  .content-section.about-custom-section{ padding-bottom: 96px; }
}
@media (max-width: 640px){
  .content-section.about-custom-section{ padding-bottom: 82px; }
}
.about-custom-list{ display: flex; flex-direction: column; gap: 4px; }
.about-custom-item{ display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(74,45,33,.14); }
.about-custom-item:first-child{ border-top: 0; padding-top: 0; }
.about-custom-num{ flex: 0 0 auto; font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: rgba(74,45,33,.4); }
.about-custom-item h3{ font-size: 14.5px; font-weight: 700; color: #35231D; margin: 0 0 4px; }
.about-custom-item p{ font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--inner-body); margin: 0; }
@media (max-width: 900px){
  .about-custom-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---- İade ve Değişim: trust summary strip + info box ---- */
.trust-strip{
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
  margin-block: 28px;
}
.trust-strip-item{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center;
  padding: 20px 16px;
  border-right: 1px solid rgba(74,45,33,.10);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #35231D;
}
.trust-strip-item:last-child{ border-right: 0; }
.trust-strip-item em{
  font-style: normal; font-family: var(--font-serif); font-weight: 600;
  font-size: 20px; letter-spacing: 0; text-transform: none; color: #4A2D21;
}
@media (max-width: 640px){
  .trust-strip{ grid-template-columns: 1fr; }
  .trust-strip-item{ border-right: 0; border-bottom: 1px solid rgba(74,45,33,.10); }
  .trust-strip-item:last-child{ border-bottom: 0; }
}
.info-box{
  background: var(--inner-warn);
  border-left: 3px solid #4A2D21;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-top: 12px;
}
.info-box p{ margin-top: 0 !important; }

/* ---- Compare cards (İade ve Değişim: standart vs. kişiye özel) ---- */
.compare-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.compare-card{ background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px; padding: 26px 24px; }
.compare-card--accent{ background: var(--inner-alt); border-color: rgba(74,45,33,.18); }
.compare-card h3{ display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: #35231D; margin: 0 0 10px; }
.compare-card h3 svg{ color: #4A2D21; flex: 0 0 20px; }
.compare-card > p{ font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--inner-body); margin: 0 0 14px; }
.compare-card ul{ display: flex; flex-direction: column; gap: 8px; }
.compare-card li{ position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: #35231D; }
.compare-card li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #4A2D21; }

/* ---- Legal pages (Gizlilik, KVKK, Üyelik, Mesafeli Satış) — readability
   only, content untouched. Targets the exact `.container.content-copy`
   pattern these four pages share. Kargo/İade/Ödeme/Sipariş Takibi also use
   this markup pattern for their own plain-paragraph sections, but get
   their section coloring from .content-section/.section--alt as normal —
   see the .legal-flat-scoped rule further below for the legal-only part
   of this treatment. ---- */
.content-copy{ max-width: 980px; }
.container.content-copy{ margin-inline: auto; }
.content-copy h2{ font-family: var(--font-serif); font-weight: 600; font-size: 27px; color: #35231D; margin-bottom: 14px; }
.content-copy p{ margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--inner-body); max-width: 760px; }
.content-copy p strong{ color: #35231D; }
.legal-placeholder{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--inner-alt); color: #4A2D21;
  padding: 3px 10px; border-radius: 5px;
  font-weight: 700; font-style: normal;
  border: 1px solid rgba(74,45,33,.18);
}

/* ---- Legal pages (Gizlilik, KVKK, Üyelik, Mesafeli Satış) — single calm
   background, no alternating strips; sections are separated by a hairline
   instead, per the "legal pages stay sade/serious" rule. Scoped to
   .legal-flat (set on these four pages' <main>) specifically because
   Kargo/İade/Ödeme/Sipariş Takibi use this exact same `.container.content-
   copy` markup pattern for their own plain-paragraph sections too — but
   those pages need their .section--alt/.content-section--deep classes to
   actually show through as visible section separation, which an unscoped
   `background:transparent !important` here was silently cancelling. */
.legal-flat .content-section:has(> .container.content-copy){
  padding-block: 30px;
  background: transparent !important;
  border-bottom: 1px solid rgba(74,45,33,.10);
}
.legal-flat .content-section:has(> .container.content-copy):last-of-type{ border-bottom: 0; }

/* ---- End-of-page CTA strip (FAQ/Kargo/İade: "Aradığınız Yanıtı Bulamadınız
   mı?" etc.) — previously unstyled, so it rendered with no spacing of its
   own and read as glued to the footer. Now its own compact, transparent
   block with real breathing room on both sides. .page-cta--alt is for the
   one case (FAQ) where the section right above it is already the page's
   base tone, so the CTA needs its own tone to still read as a separate
   block instead of a continuation of that section. ---- */
.page-cta{ background: transparent; padding: 28px 0 40px; border-top: 1px solid rgba(74,45,33,.10); }
.page-cta--alt{ background: var(--inner-alt); }
.page-cta h2{
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(22px, 1.4vw + 16px, 24px);
  color: #35231D;
  margin-bottom: 20px;
}

/* Hairline seam for two content sections that sit back to back on the same
   base background (no .section--alt/--dark between them to mark the
   change) — added only on the specific sections that actually have this
   adjacency, not a blanket sibling rule that would also land on inner
   pages outside this pass. */
.section-seam{ border-top: 1px solid rgba(74,45,33,.10); }

/* ---- Cart page (Sepetim) ---- */
.container--cart{ max-width: 1280px; }
.cart-page-grid{ display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.cart-list{ display: flex; flex-direction: column; gap: 16px; }
.cart-line{
  position: relative;
  display: grid; grid-template-columns: 160px 1fr auto auto auto; align-items: center; gap: 20px;
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px;
  padding: 16px;
}
.cart-line-media{ display: block; width: 160px; height: 160px; border-radius: 8px; overflow: hidden; background: #F2E3D2; }
.cart-line-media .product-image{ width: 100%; height: 100%; aspect-ratio: auto; }
.cart-line-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line-name{ font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: #35231D; }
.cart-line-material{ font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cart-line-variation{ display: block; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.cart-line-price{ font-size: 16px; font-weight: 700; color: #4A2D21; margin-top: 2px; }
.cart-line-price.price-tba{ color: var(--text-secondary); font-weight: 500; }

/* Scoped to .cart-line so this never collides with the pre-existing
   product-detail-page .qty-control (urun.html) defined earlier in this
   file — same class name, deliberately different (smaller, pill) look
   only inside a cart row. */
.cart-line .qty-control{ display: flex; align-items: center; border: 1px solid rgba(74,45,33,.20); border-radius: 999px; overflow: hidden; }
.cart-line .qty-control button{
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #4A2D21; transition: background .2s var(--ease);
}
.cart-line .qty-control button:hover{ background: rgba(74,45,33,.08); }
.cart-line .qty-control input{
  width: 40px !important; height: 32px !important; border: 0 !important; text-align: center;
  padding: 0 !important; font-size: 14px; font-weight: 600;
}
.cart-line .qty-control input:focus{ box-shadow: none !important; }

.cart-line-total{ font-size: 16px; font-weight: 700; color: #35231D; white-space: nowrap; }
.cart-line-remove{
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text-secondary);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cart-line-remove:hover{ background: rgba(139,58,42,.1); color: #8B3A2A; }

@media (max-width: 1023px){
  .cart-page-grid{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .cart-line{
    grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto;
    gap: 10px 14px;
  }
  .cart-line-media{ width: 96px; height: 96px; grid-row: 1 / 3; }
  .cart-line-info{ grid-column: 2; grid-row: 1; }
  .cart-line-qty{ grid-column: 2; grid-row: 2; }
  .cart-line-total{ grid-column: 1 / -1; grid-row: 3; text-align: right; }
  .cart-line-remove{ position: absolute; top: 10px; right: 10px; }
}

/* ---- Checkout page (Ödeme) ----
 * Right column is ONE integrated .checkout-summary-card — Ürünler → Ara
 * Toplam → İndirim Kodu → Kargo → Kargo Yöntemi → Hediye Kartı → Toplam →
 * Mesafeli Satış Sözleşmesi → Siparişi Tamamla, all inside the same card
 * (real DOM nesting in odeme.html, not a CSS-only illusion). The real
 * PayTR card form is never inline on the page at all — it only ever
 * mounts inside the "Güvenli Kart ile Ödeme" modal (.paytr-modal-* below),
 * opened by the submit button. */
.checkout-layout{ display: grid; grid-template-columns: 1fr minmax(420px, 480px); gap: 40px; align-items: start; }
.checkout-main{ display: flex; flex-direction: column; gap: 24px; }
.checkout-section-title{ font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: #35231D; margin: 0 0 20px; }

/* İletişim Bilgileri / Teslimat Adresi fields — scoped bump over the
   site-wide 13px/14px .inner-main label/input defaults, checkout page only. */
.checkout-main label{ font-size: 16px; }
.checkout-main input:not([type="checkbox"]):not([type="radio"]),
.checkout-main select,
.checkout-main textarea{ font-size: 16px; }

.checkout-summary{ display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px){
  .checkout-summary{ position: sticky; top: 96px; }
}
.checkout-summary-card{
  background: var(--inner-card); border: 1px solid var(--inner-border);
  border-radius: 12px; padding: 26px 24px;
}

.checkout-line-list{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.checkout-line{ display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; }
.checkout-line-image{ width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #F2E3D2; flex-shrink: 0; }
.checkout-line-image .product-image{ width: 100%; height: 100%; aspect-ratio: auto; }
.checkout-line-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.checkout-line-name{ font-size: 16px; font-weight: 600; color: #35231D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-line-qty{ font-size: 14px; color: var(--text-secondary); }
.checkout-line-variation{ display: block; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.checkout-line-price{ font-size: 16px; font-weight: 700; color: #35231D; white-space: nowrap; }

/* Discount/gift-card widgets are shared with the cart page (.cart-summary)
   via plain .discount-code-* classes — the base .discount-code-* rules
   above are already at the site-wide readability scale, so no checkout-only
   override is needed here anymore; only this one extra note is unique to
   checkout. */
.checkout-summary .cart-unpriced-note{ font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* ---- Kargo Yöntemi — integrated INSIDE the Sipariş Özeti card itself
   (real DOM nesting, see odeme.html's .checkout-shipping-block), directly
   under the "Kargo" cost row, never a separate card of its own. ---- */
.checkout-subsection-label{
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: .03em; text-transform: uppercase; color: #6A4A3B;
  margin: 18px 0 10px;
}
.checkout-shipping-block{ padding-top: 4px; padding-bottom: 6px; }
.checkout-shipping-methods{ display: flex; flex-direction: column; gap: 10px; }
.checkout-shipping-option{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid rgba(74,45,33,.16); border-radius: 10px;
  font-size: 16px; color: #35231D; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.checkout-shipping-option:has(input:checked){ border-color: #4A2D21; background: var(--inner-alt); }
.checkout-shipping-option input[type="radio"]{ width: 18px; height: 18px; flex: 0 0 18px; accent-color: #4A2D21; cursor: pointer; }
.checkout-shipping-option strong{ margin-left: auto; font-weight: 700; }
.checkout-shipping-hint{ font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* ---- Güvenli Kart ile Ödeme — this icon+title+subtitle chunk is reused
   inside .paytr-modal-head (see the .paytr-modal-* rules further below)
   so the modal's heading shares the exact same typography as the rest of
   the checkout card system. */
.checkout-payment-panel-head{ display: flex; align-items: flex-start; gap: 12px; }
.checkout-payment-panel-head svg{ flex: 0 0 20px; color: #4A2D21; margin-top: 3px; }
.checkout-payment-panel-head h2{ font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: #35231D; margin: 0 0 4px; }
.checkout-payment-panel-head p{ font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
/* width:100% on both the mount point and the iframe itself is what
   actually gives PayTR's own secure card form enough room to lay out
   normally instead of wrapping into a tall, narrow internal scroll area;
   overflow:hidden here is just a safety net against a stray horizontal
   scrollbar, never something that clips real content (PayTR's own iframe
   is already scrolling="no", see js/paytr.js). */
.checkout-iframe-container{ width: 100%; overflow: hidden; border-radius: 8px; }
/* 480px is only an anti-flash baseline for the instant before PayTR's
   iframeResizer reports the real content height (js/paytr.js) — it is a
   floor, not a fixed box: iFrameResize sets the iframe's actual height
   inline once PayTR's page reports it, which always wins over this
   min-height whenever the real form is taller. */
.checkout-iframe-container iframe{ display: block; width: 100% !important; min-height: 480px; border: 0; }

.checkout-submit-btn{ width: 100%; font-size: 16px; font-weight: 600; margin-top: 20px; }

/* ---- Güvenli Kart ile Ödeme modal — same open/close pattern as
   .size-guide-overlay above (backdrop dims, panel scales/fades in,
   Escape/backdrop/× all close it, body scroll locked while open). 800px
   desktop width sits inside the requested ~700-850px range; min(800px,94vw)
   also IS the mobile rule (94vw naturally wins under ~851px viewports), so
   no separate mobile-only width override is needed. */
.paytr-modal-backdrop{
  position: absolute; inset: 0; background: rgba(53,35,29,.5);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease);
  border: 0; padding: 0;
}
.paytr-modal-overlay{
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.paytr-modal{
  /* Stacks above .paytr-modal-backdrop purely by DOM order — see the same
     note on .size-guide-modal above; do not give the backdrop a z-index. */
  position: relative;
  width: min(800px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--inner-card);
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 24px 64px rgba(53,35,29,.28);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.paytr-modal-overlay.is-open .paytr-modal-backdrop{ opacity: 1; pointer-events: auto; }
.paytr-modal-overlay.is-open .paytr-modal{ opacity: 1; transform: translateY(0) scale(1); }
body.paytr-modal-open{ overflow: hidden; }

.paytr-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.paytr-modal-close{
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.paytr-modal-close:hover{ background: var(--inner-alt); color: var(--text); }
/* Plain [hidden] toggling ONLY (js/catalog.js) — deliberately NOT the
   .product-status/.is-visible pattern used elsewhere on this page, since
   that pattern's .is-visible class forces display:block regardless of the
   hidden attribute, which would defeat hiding this element on success/error. */
.paytr-modal-status{ text-align: center; padding: 32px 12px; font-size: 15px; color: var(--text-secondary); }
.paytr-modal-error{ text-align: center; padding: 32px 12px; }
.paytr-modal-error p{ font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 18px; }
.paytr-modal-error .btn{ font-size: 15px; font-weight: 600; }

@media (max-width: 640px){
  .paytr-modal-overlay{ padding: 12px; }
  .paytr-modal{ width: 94vw; max-height: 92vh; padding: 22px 18px; }
  .paytr-modal-close{ width: 44px; height: 44px; }
}

@media (max-width: 1023px){
  .checkout-layout{ grid-template-columns: 1fr; gap: 28px; }
  .checkout-summary{ position: static; }
}
@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
  .form-card{ padding: 22px 18px; }
  .checkout-summary-card{ padding: 20px 18px; }
  .checkout-shipping-option{ padding: 13px 14px; }
  .benefits-panel{ padding: 24px 22px; }
}

/* ==========================================================================
   Kişiye Özel: "İsimli Kolye Tasarla" (kisiye-ozel-kolye.html)
   Preview column (left) + .form-card personalization panel (right, reusing
   the same card/label/input/qty-control components as every other form on
   the site — see js/personalized-necklace.js for the behaviour).
   ========================================================================== */
/* ---- 3-column configurator (kisiye-ozel-kolye.html): select | preview |
   panel. DOM order already matches this left-to-right reading order, so
   desktop needs no explicit grid-template-areas — only the two
   responsive tiers below (where the preview needs to come first) do. ---- */
/* Column widths are tuned against the REAL content width available
   inside .container, measured directly in a live browser (Chrome
   DevTools Protocol), not assumed from this rule's own max-width:
   .inner-main .container caps at 1220px (see rule further up this
   file), and .container's own padding-inline eats another ~110-130px
   off that — so the actual space .pn-layout--3col ever gets is close
   to a CONSTANT ~1075-1100px on every desktop viewport from ~1180px
   up to the widest screens (the 1220px container cap means going
   wider than that does not add any real room). An earlier version of
   these numbers was sized against a wrongly-assumed ~1220-1500px
   budget and quietly overflowed by ~25-35px. Select/panel grow up to
   their own max first, then whatever is left goes to the 1fr preview
   track, so preview stays the dominant column without ever starving
   the purchase panel — and never below its own 440px floor. */
.pn-layout--3col{
  display: grid;
  grid-template-columns: minmax(200px, 215px) minmax(440px, 1fr) minmax(330px, 350px);
  gap: 22px;
  align-items: start;
  max-width: 1220px;
  margin-inline: auto;
}
@media (max-width: 1180px){
  .pn-layout--3col{ grid-template-columns: minmax(180px, 195px) minmax(400px, 1fr) minmax(290px, 310px); gap: 16px; }
}
@media (max-width: 1024px){
  .pn-layout--3col{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "preview preview" "select panel";
    gap: 24px;
  }
  .pn-preview-col{ grid-area: preview; }
  .pn-select-col{ grid-area: select; }
  .pn-panel-col{ grid-area: panel; }
}
@media (max-width: 640px){
  .pn-layout--3col{
    grid-template-columns: 1fr;
    grid-template-areas: "preview" "select" "panel";
    gap: 20px;
  }
}

/* ---- Sol seçim paneli (Model + Zincir) ---- */
.pn-select-panel{
  background:#FFFDFC;
  border:1px solid rgba(74,45,33,.12);
  border-radius:20px;
  padding:20px;
  box-shadow:0 10px 28px rgba(74,45,33,.05);
}
.pn-select-group + .pn-select-group{ margin-top:24px; }
.pn-select-title{
  display:block; margin-bottom:12px;
  font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#6B5145;
}

/* Background layer: the plain, ring-free fabric photo
   (images/personalized/necklace-fabric-clean.webp, set as data-pn-photo's
   src directly in kisiye-ozel-kolye.html). The chain, pendant and their
   small integrated eyelets are all drawn on the transparent canvas
   stacked exactly on top — see js/personalized-necklace.js
   (CHAIN_SEGMENT_MAP / drawChainSegment / buildLetterPendant /
   buildNamePendant / buildInfinityPendant). The card is forced to a 1:1
   aspect ratio so object-fit:cover never has to crop the fabric
   unpredictably. */
.pn-preview-card{
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 760px;
  margin-inline: auto;
  background: #EEE1D5;
  border: 1px solid rgba(74,45,33,.12);
  border-radius: 26px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(74,45,33,.07), inset 0 1px 0 rgba(255,255,255,.55);
}
.pn-necklace-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pn-necklace-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.pn-preview-note{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  margin:0; padding:7px 12px; border-radius:999px;
  background:rgba(255,250,245,.84); border:1px solid rgba(74,45,33,.08);
  box-shadow:0 5px 18px rgba(74,45,33,.08);
  backdrop-filter:blur(8px);
  font-size:12px; letter-spacing:.01em; color:var(--text-secondary);
  text-align:center; white-space:nowrap;
}

.pn-panel label,
.pn-label{
  display: block;
  color: #24160F;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
  margin-bottom: 8px;
}
.pn-field-hint{ margin-top: 7px; font-size: 14px; color: #5E493F; line-height: 1.55; font-weight: 500; }
.pn-field-error{ margin-top: 6px; font-size: 14px; font-weight: 600; color: #8B3A2F; }

/* Panel-scoped overrides of the site's generic .inner-main form-field
   styling (left untouched globally — every other form on the site keeps
   the default sizing) so this page's inputs/select/labels read larger
   and higher-contrast without affecting auth/contact/checkout forms. One
   shared radius (12px) and one shared border tone (rgba(74,45,33,.15))
   run through every control in this panel — inputs, color cards, the
   Ölçü Rehberi row, the price/info blocks — so it all reads as one
   design system instead of a pile of separately-tuned components. */
.pn-panel .form-field{ margin-bottom: 22px; }
.pn-panel input:not([type="checkbox"]):not([type="radio"]),
.pn-panel select{
  min-height: 54px;
  height: 54px;
  padding: 0 15px;
  border: 1px solid rgba(74,45,33,.30);
  border-radius: 10px;
  background: #FFFDF9;
  color: #2A1B14;
  font-size: 16px;
  font-weight: 500;
}
.pn-panel input::placeholder{ color: rgba(53,35,29,.58); }
.pn-panel input:focus,
.pn-panel select:focus{
  border-color: #4A2D21;
  box-shadow: 0 0 0 3px rgba(74,45,33,.11);
}
/* Zincir Ölçüsü gets a bit more room than Adet in their shared row, and
   both fields' controls (including the qty +/- buttons) line up at the
   exact same height as the inputs/select above. */
.pn-panel .form-row{ grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
.pn-panel .form-row > *{ min-width: 0; }
.pn-panel .qty-control{ height: 54px; border-color: rgba(74,45,33,.15); border-radius: 12px; }
.pn-panel .qty-control button{ width: 34px; height: 54px; background: transparent; font-weight: 500; font-size: 15px; }
.pn-panel .qty-control input{ height: 54px; font-size: 15px; }

/* Color-card grid and price row: see the consolidated
   "COLOR + PRICE SINGLE SOURCE OF TRUTH" block further down this file --
   deliberately not duplicated here. */


/* A touch more premium than the generic .form-card: visibly lighter/
   cleaner than the page's own bej background (so the two don't blend
   together), a barely-there border, a soft-but-present lift shadow, and
   balanced desktop padding — plus a bigger, bolder submit button, since
   this page's form is the whole product purchase decision and earns
   more visual weight than a compact sidebar form elsewhere on the site. */
.pn-panel{
  width: 100%;
  box-sizing: border-box;
  background: #FFF9F4;
  border: 1px solid rgba(74,45,33,.24);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 52px rgba(74,45,33,.13), inset 0 1px 0 rgba(255,255,255,.72);
  overflow: visible;
}
.pn-submit{
  width: 100%;
  min-height: 56px;
  height: 56px;
  margin-top: 14px;
  border-radius: 13px;
  background: #4A2D21;
  color: #FFF8F2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  transition: background .18s ease, transform .18s ease;
}
.pn-submit:hover{ background: #382017; transform: translateY(-1px); }
.pn-prep-note{ margin-top: 12px; color: #60493D; font-size: 14px; line-height: 1.5; font-weight: 500; }

/* Scoped over the generic .info-box (used elsewhere on the site as-is)
   so only this page's warning box gets darker text, more breathing room,
   and a softer accent line — the base rule forces every <p> margin-top
   to 0 with !important, so the gap between lines is added as margin-
   BOTTOM on the first line instead of fighting that specificity. Kept
   visibly distinct from .pn-price-row's tint (fainter background) even
   though both are warm/mocha-toned. */
.pn-panel .info-box{
  margin-top: 0;
  padding: 18px 20px;
  background: #F7ECE4;
  border-left: 3px solid #4A2D21;
  border-radius: 0 10px 10px 0;
}
.pn-panel .info-box p{ color: #3A261D; font-size: 14px; line-height: 1.72; font-weight: 500; }
.pn-panel .info-box p:first-child{ margin-bottom: 6px; }

@media (max-width: 900px){
  .pn-panel{ padding: 28px 24px; }
}
@media (max-width: 640px){
  .pn-panel{ padding: 24px 18px; border-radius: 14px; }
  .pn-panel .form-field{ margin-bottom: 18px; }
  .pn-submit{ min-height: 54px; height: 54px; }
}

.pn-toast{
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: #4A2D21; color: #FFF8F0;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1000;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.pn-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

@media (max-width: 640px){
  .pn-preview-note{ bottom:12px; font-size:11px; padding:6px 10px; }
}

/* ---- Kişiye Özel landing page (kisiye-ozel.html): single full-bleed
   photo hero (images/personalized/kisiye-ozel-hero.png as a CSS
   background-image, not an <img>) with a left-to-right dark overlay so
   left-aligned light text stays readable over the photo, then the
   unmodified "collection coming soon" toolbar/empty-state below it — all
   scoped with pn- classes so the shared .category-toolbar/.sort-select/
   .empty-state rules used by every other category page (which DO have
   real products/sorting) stay untouched. No live preview/configurator
   here — the real personalization flow (real photo preview, real price,
   real add-to-cart) lives entirely on kisiye-ozel-kolye.html/
   js/personalized-necklace.js; this hero only hands the visitor off to
   it via a plain link. ---- */
.pn-hero--bg{
  position: relative; display: flex; align-items: center;
  min-height: 660px; overflow: hidden;
  background-image: url('../images/personalized/kisiye-ozel-hero-marble.png');
  background-size: cover;
  background-position: 72% center; /* keeps the necklace's "MERTGÜMÜŞ" nameplate in frame */
  background-repeat: no-repeat;
}
.pn-hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(45,28,21,.58) 0%, rgba(45,28,21,.38) 26%, rgba(45,28,21,.16) 42%, rgba(45,28,21,0) 58%);
}
/* .container normally centers itself (max-width + margin-inline:auto),
   which on wide viewports leaves large equal side-margins and pulls its
   content toward the middle of the screen regardless of its own
   padding — overridden here (max-width:none + margin-inline:0) so this
   hero's text block anchors to the real left edge of the viewport
   instead, at a fixed left inset. */
.pn-hero--bg > .container{
  position: relative; z-index: 1;
  max-width: none; margin-inline: 0;
  padding-left: clamp(32px, 6vw, 120px);
}
.pn-hero-text{ max-width: 520px; margin-left: 0; text-align: left; }
.pn-hero--bg .eyebrow{ font-size: 12px; letter-spacing: .16em; color: var(--champagne-soft); }
.pn-hero-title{
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(3.625rem, 1vw + 3.2rem, 4rem); line-height: 1.06;
  color: var(--ivory-warm); text-shadow: 0 2px 14px rgba(0,0,0,.28);
  margin-top: 16px;
}
.pn-hero-desc{ margin-top: 18px; max-width: 470px; font-size: 17.5px; font-weight: 500; line-height: 1.6; color: rgba(245,239,232,.92); }

.pn-main-cta-wrap{ display: flex; justify-content: flex-start; margin-top: 32px; }
.pn-main-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 330px; max-width: 100%; min-height: 56px;
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.pn-main-cta:hover{ transform: none; box-shadow: 0 14px 32px rgba(0,0,0,.3); }

.pn-trust-strip--mini{
  display: flex; justify-content: flex-start; align-items: center; gap: 0;
  flex-wrap: nowrap; margin-top: 26px;
}
/* Was double-spaced before (a 28px flex `gap` on the row PLUS a 28px
   `padding-left` per item) — that ~56px-per-gap total is what forced
   "Güvenli Ödeme" to wrap to its own line. Spacing now comes from
   padding-left alone. */
.pn-trust-strip--mini .pn-trust-item{
  position: relative; display: flex; align-items: center; gap: 8px;
  padding-left: 22px; white-space: nowrap;
}
.pn-trust-strip--mini .pn-trust-item:first-child{ padding-left: 0; }
.pn-trust-strip--mini .pn-trust-item:not(:first-child)::before{
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(245,239,232,.32);
}
.pn-trust-strip--mini .pn-trust-item svg{ flex: 0 0 auto; width: 19px; height: 19px; color: var(--champagne-soft); }
.pn-trust-strip--mini .pn-trust-item span{ font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; letter-spacing: .01em; color: var(--ivory-warm); white-space: nowrap; }

.pn-toolbar{ justify-content: space-between; padding-bottom: 16px; border-bottom-color: rgba(74,45,33,.08); }
.pn-toolbar .category-count{ font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.pn-toolbar-select{
  font-size: 14px; font-weight: 500; padding: 8px 12px;
  background: transparent; border-color: rgba(74,45,33,.16); color: var(--text-secondary);
}

/* Wide, low horizontal empty-state card — icon + copy on the left,
   actions on the right — instead of a tall centered block. */
.pn-empty-state--wide{
  display: flex; align-items: center; gap: 28px; text-align: left;
  max-width: 100%; padding: 34px 38px;
  background: var(--ivory-warm); border-color: rgba(74,45,33,.12); border-radius: 16px;
  box-shadow: 0 6px 20px rgba(74,45,33,.05);
}
.pn-empty-state--wide .pn-empty-icon-wrap{
  flex: 0 0 auto; width: 76px; height: 76px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(74,45,33,.06);
}
.pn-empty-state--wide .pn-empty-icon-wrap svg{ width: 34px; height: 34px; margin: 0; color: var(--cta); }
.pn-empty-state--wide .pn-empty-body{ flex: 1 1 auto; min-width: 0; }
.pn-empty-state--wide h3{ text-align: left; font-size: 22px; }
.pn-empty-state--wide p{ text-align: left; margin-inline: 0; margin-top: 8px; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.pn-empty-state--wide .pn-empty-actions{ flex: 0 0 auto; flex-direction: row; margin-top: 0; gap: 10px; }
.pn-empty-actions .btn{ padding: 15px 26px; font-weight: 700; }

/* Tablet/mobile: text centers over the photo, so the left-to-right
   overlay (built for left-aligned text) is replaced with a flatter,
   slightly stronger tint that reads well no matter where the text sits. */
@media (max-width: 900px){
  .pn-hero--bg{ min-height: 560px; }
  .pn-hero--bg > .container{ max-width: var(--container-max); margin-inline: auto; padding-left: var(--pad-inline); }
  .pn-hero-overlay{ background: rgba(55,35,27,.38); }
  .pn-hero-text{ max-width: 100%; margin-inline: auto; text-align: center; }
  .pn-hero-desc{ margin-inline: auto; }
  .pn-main-cta-wrap,
  .pn-trust-strip--mini{ justify-content: center; }
}
@media (max-width: 640px){
  .pn-hero--bg{ min-height: 480px; }
  .pn-hero-title{ font-size: clamp(2rem, 4vw + 1.4rem, 2.25rem); line-height: 1.1; }
  .pn-hero-desc{ font-size: 15px; }
  .pn-main-cta{ width: 100%; }
  .pn-trust-strip--mini{ flex-wrap: wrap; gap: 14px 22px; justify-content: center; }
  .pn-trust-strip--mini .pn-trust-item{ padding-left: 0 !important; white-space: nowrap; }
  .pn-trust-strip--mini .pn-trust-item::before{ display: none; }
  .pn-toolbar{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .pn-empty-state--wide{ flex-direction: column; text-align: center; padding: 28px 20px; border-radius: 14px; }
  .pn-empty-state--wide .pn-empty-icon-wrap{ margin: 0 auto; }
  .pn-empty-state--wide h3{ text-align: center; }
  .pn-empty-state--wide p{ text-align: center; margin-inline: auto; }
  .pn-empty-state--wide .pn-empty-actions{ flex-direction: column; width: 100%; }
  .pn-empty-actions .btn{ width: 100%; }
}

/* ==========================================================================
   Ölçü Rehberi — shared size-guide modal (js/size-guide.js injects the
   markup once; every page that wants it just includes the script and adds
   a [data-size-guide-trigger] button — see that file's header comment).
   Visual language: same overlay/backdrop pattern as .mobile-nav-backdrop,
   same segmented-pill tabs as .auth-tabs (built on the existing
   .filter-chip), same card surface as the rest of the inner pages.
   ========================================================================== */
.size-guide-trigger{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  color: var(--inner-mocha); letter-spacing: .01em;
  border-bottom: 1px solid rgba(74,45,33,.3);
  padding-bottom: 1px;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.size-guide-trigger svg{ color: var(--inner-mocha); flex-shrink: 0; }
.size-guide-trigger:hover{ color: var(--text); border-color: var(--text); }

/* Kişiye Özel Kolye panel only: the plain underlined-text trigger becomes
   a full premium interaction row (icon + label + trailing arrow) here —
   scoped to .pn-panel so the compact text-link version used in every
   category-page toolbar and on urun.html is completely untouched. */
.pn-panel .size-guide-trigger{
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%; box-sizing: border-box;
  min-height: 46px; margin-top: 12px;
  padding: 0 14px;
  background: #FFFDF9;
  border: 1px solid rgba(74,45,33,.20);
  border-radius: 10px;
  color: #3B261D;
  font-size: 13.5px;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
}
.pn-panel .size-guide-trigger-label{ white-space: nowrap; }
.pn-panel .size-guide-trigger-arrow{ color: var(--inner-mocha); transition: transform var(--dur-s) var(--ease); }
.pn-panel .size-guide-trigger:hover{
  background: rgba(74,45,33,.06); border-color: rgba(74,45,33,.22);
}
.pn-panel .size-guide-trigger:hover .size-guide-trigger-arrow{ transform: translateX(3px); }

.size-guide-backdrop{
  position: absolute; inset: 0; background: rgba(53,35,29,.4);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease);
  border: 0; padding: 0;
}
.size-guide-overlay{
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.size-guide-modal{
  /* Stacks above .size-guide-backdrop purely by DOM order (both are
     z-index:auto) — comes second in the markup, so it paints on top.
     Do NOT give the backdrop an explicit z-index: that would make IT
     paint above this modal regardless of DOM order and silently eat
     every click meant for the tabs/content underneath. */
  position: relative;
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--inner-card);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 24px 64px rgba(53,35,29,.28);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.size-guide-overlay.is-open .size-guide-backdrop{ opacity: 1; pointer-events: auto; }
.size-guide-overlay.is-open .size-guide-modal{ opacity: 1; transform: translateY(0) scale(1); }
body.size-guide-open{ overflow: hidden; }

.size-guide-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.size-guide-head h2{
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px);
  color: var(--text);
}
.size-guide-close{
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.size-guide-close:hover{ background: var(--inner-alt); color: var(--text); }

.size-guide-tabs{
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  background: var(--inner-alt); padding: 4px; border-radius: 999px;
  margin-bottom: 22px;
}
.size-guide-tabs .filter-chip{
  background: transparent; border-color: transparent; color: var(--text-secondary);
  padding: 8px 16px; font-size: 14px;
}
.size-guide-tabs .filter-chip.is-active,
.size-guide-tabs .filter-chip[aria-selected="true"]{
  background: #4A2D21; border-color: #4A2D21; color: #FFF8F0;
}

.size-guide-panel h3{
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.size-guide-panel p{ font-size: 15px; color: var(--inner-body); line-height: 1.65; margin: 0 0 14px; }
.size-guide-methods{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }

.size-guide-steps{
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 0; counter-reset: sg-step;
}
.size-guide-steps li{
  list-style: none; counter-increment: sg-step;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--inner-body); line-height: 1.55;
}
.size-guide-steps li::before{
  content: counter(sg-step);
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--inner-mocha); color: #FFF8F0;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.size-guide-example{
  background: var(--inner-warn); border-radius: 10px;
  padding: 12px 16px; font-size: 14.5px; line-height: 1.5; color: var(--text);
  margin-bottom: 16px;
}
.size-guide-example strong{ font-weight: 700; }

.size-guide-table{
  width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14.5px;
}
.size-guide-table th, .size-guide-table td{
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--inner-border);
}
.size-guide-table th{ font-weight: 700; color: var(--text); font-size: 13px; letter-spacing: .02em; }
.size-guide-table td{ color: var(--inner-body); }

.size-guide-note{
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
  padding-top: 4px; border-top: 1px dashed var(--inner-border);
}

.size-guide-necklace-list{ display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; }
.size-guide-necklace-list li{
  list-style: none; display: flex; align-items: baseline; gap: 14px;
  font-size: 15px; color: var(--inner-body); line-height: 1.5;
  padding-bottom: 10px; border-bottom: 1px solid var(--inner-border);
}
.size-guide-necklace-list li:last-child{ border-bottom: 0; padding-bottom: 0; }
.size-guide-cm{
  flex-shrink: 0; width: 52px;
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text);
}

@media (max-width: 640px){
  .size-guide-overlay{ padding: 12px; }
  .size-guide-modal{ width: 100%; max-height: 90vh; padding: 22px 18px; }
  .size-guide-tabs{ width: 100%; }
  .size-guide-tabs .filter-chip{ flex: 1; text-align: center; padding: 8px 10px; }
}

/* ========================================================================== 
   PN FINAL UI READABILITY OVERRIDE — 2026-08-25
   Intentionally last in the cascade. Preview/name rendering untouched.
   ========================================================================== */
.page-header--pn{
  padding: 42px 0 38px !important;
  background: #F5E5D8 !important;
  border-bottom: 1px solid rgba(74,45,33,.20) !important;
}
.page-header--pn .breadcrumb{
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #5A4438 !important;
}
.page-header--pn .breadcrumb a{ color:#5A4438 !important; }
.page-header--pn .breadcrumb span:last-child{ color:#2A1B14 !important; font-weight:600 !important; }
.page-header--pn .eyebrow{
  margin-top: 20px !important;
  color:#4A2D21 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}
.page-header--pn .page-title{
  margin-top: 10px !important;
  color:#24160F !important;
  font-size: clamp(38px,4vw,54px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
}
.page-header--pn .page-intro{
  margin-top: 14px !important;
  max-width: 760px !important;
  color:#4A3328 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* .pn-panel, .pn-label, .pn-field-hint and .pn-panel input/select are
   defined once, earlier in this file (the "Kişiye Özel" section) — not
   duplicated here. */





/* .pn-qty-control and .pn-panel .size-guide-trigger are defined once,
   earlier in this file — not duplicated here. */



/* .pn-panel .info-box, .pn-submit and .pn-prep-note are defined once,
   earlier in this file — not duplicated here. */

@media (max-width: 900px){
  .page-header--pn{ padding:30px 0 28px !important; }
  .page-header--pn .page-title{ font-size:clamp(32px,7.5vw,44px) !important; }
  .page-header--pn .page-intro{ font-size:15px !important; }
}
@media (max-width: 640px){
  .page-header--pn{ padding:24px 0 22px !important; }
  .page-header--pn .breadcrumb{ font-size:14px !important; }
  .page-header--pn .eyebrow{ font-size:13px !important; margin-top:14px !important; }
  .page-header--pn .page-title{ font-size:clamp(30px,9vw,38px) !important; line-height:1.08 !important; }
  .page-header--pn .page-intro{ font-size:15px !important; line-height:1.55 !important; }
}

/* ================================================================
   PERSONALIZED NECKLACE — COLOR + PRICE SINGLE SOURCE OF TRUTH
   Keep these selectors unique. Do not duplicate elsewhere.
   ================================================================ */
.pn-color-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.pn-color-option{
  /* This is a <label> (for the hidden radio inside it), and the site's
     global .inner-main label{display:block} rule outranks a single class
     selector on specificity (type+class beats class alone) — without
     !important here that global rule silently wins, collapsing this
     back to block flow. Everything else in this rule is safe from that
     global label rule.
     Vertical (swatch top, name below) on purpose — the old horizontal
     22px+1fr layout truncated "Rose Kaplama"/"Altın Kaplama" to ellipsis
     in this panel's real width; stacking removes the truncation
     entirely instead of just shrinking the font. */
  display:flex !important;
  flex-direction:column; align-items:center;
  position:relative;
  min-width:0;
  padding:14px 8px 12px;
  gap:8px;
  text-align:center;
  background:#FFFDFC;
  border:1px solid rgba(74,45,33,.14);
  border-radius:14px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pn-color-option input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.pn-color-option:hover{
  border-color:rgba(74,45,33,.28);
  background:#FFF9F5;
}
.pn-color-option:has(input:checked){
  border-color:#7A5542;
  background:#F7EEE8;
  box-shadow:0 4px 12px rgba(74,45,33,.06);
}
.pn-color-option:has(input:focus-visible){
  outline:2px solid rgba(74,45,33,.55);
  outline-offset:2px;
}
.pn-color-option::after{
  content:'✓';
  position:absolute;
  top:7px;
  right:7px;
  width:16px;
  height:16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#5A392B;
  color:#FFF9F4;
  font-size:9px;
  font-weight:700;
  opacity:0;
  transform:scale(.8);
  transition:.18s ease;
}
.pn-color-option:has(input:checked)::after{
  opacity:1;
  transform:scale(1);
}
.pn-color-swatch{
  display:block;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(74,45,33,.16);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 2px rgba(74,45,33,.12);
}
.pn-color-swatch::after{ content:none; }
.pn-color-swatch--beyaz{ background:linear-gradient(145deg,#fff 0%,#ece9e2 48%,#cfc8bd 100%); }
.pn-color-swatch--rose{ background:linear-gradient(145deg,#f8ddd4 0%,#e7b39f 52%,#c98c77 100%); }
.pn-color-swatch--sari{ background:linear-gradient(145deg,#f6e4b0 0%,#dfb765 52%,#b98b3e 100%); }
.pn-color-name{
  min-width:0;
  font-size:13px;
  line-height:1.3;
  font-weight:600;
  color:#2D201A;
  white-space:normal;
}

.pn-price-row{
  width:100%;
  box-sizing:border-box;
  min-width:0;
  margin:10px 0 18px;
  padding:16px 20px;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#F8F1EC;
  border:1px solid rgba(74,45,33,.10);
  border-radius:18px;
}
.pn-price-label{
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#6B5145;
  white-space:nowrap;
}
.pn-price-value{
  font-family:var(--font-sans);
  font-size:28px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums;
  color:#2A1B14;
  white-space:nowrap;
}

@media (max-width:640px){
  .pn-color-grid{ gap:8px; }
  .pn-color-option{ padding:12px 6px 10px; gap:6px; }
  .pn-color-swatch{ width:26px; height:26px; }
  .pn-color-name{ font-size:12px; }
  .pn-price-row{ padding:14px 16px; gap:12px; border-radius:16px; }
  .pn-price-label{ font-size:12px; }
  .pn-price-value{ font-size:25px; }
}

/* ---- Model kartları (İsim / Harf / Sonsuzluk) — sol panelde tek kolon,
   büyükçe kare thumbnail üstte + ad altta. Gizli radio + :has(:checked)
   aktif stil + küçük ✓ rozeti deseni .pn-color-option ile aynı. Gerçek
   thumbnail (images/personalized/model-*-thumb.webp) yüklenirse fallback
   ikonun/glyph'in ÜSTÜNÜ kaplar (ikisi de aynı kutuda üst üste); 404
   olursa <img>'in kendi onerror'ı onu gizler ve fallback görünür kalır
   — hiçbir zaman kırık resim ikonu göstermez. */
.pn-model-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pn-model-option{
  display:flex !important; /* aynı .inner-main label{display:block} override ihtiyacı */
  align-items:center;
  position:relative;
  min-width:0;
  padding:10px 12px;
  gap:10px;
  background:#FFFDFC;
  border:1px solid rgba(74,45,33,.14);
  border-radius:14px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pn-model-option input{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pn-model-option:hover{ border-color:rgba(74,45,33,.28); background:#FFF9F5; }
.pn-model-option:has(input:checked){
  border-color:#7A5542; background:#F7EEE8;
  box-shadow:0 4px 12px rgba(74,45,33,.06);
}
.pn-model-option:has(input:focus-visible){
  outline:2px solid rgba(74,45,33,.55); outline-offset:2px;
}
.pn-model-option::after{
  content:'✓'; position:absolute; top:10px; right:10px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  background:#5A392B; color:#FFF9F4; font-size:10px; font-weight:700;
  opacity:0; transform:scale(.8); transition:.18s ease;
}
.pn-model-option:has(input:checked)::after{ opacity:1; transform:scale(1); }
.pn-model-thumb{
  position:relative; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:11px;
  background:rgba(74,45,33,.06); color:#6B5145;
}
.pn-model-thumb-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.pn-model-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
.pn-model-glyph{
  font-family:var(--font-serif); font-size:26px; font-weight:600; line-height:1; color:#5A392B;
}
.pn-model-name{ font-size:13.5px; font-weight:600; color:#2D201A; white-space:nowrap; }

/* ---- Harf grid — 29 harflik Türkçe alfabe, js/personalized-necklace.js
   tarafından tek kaynaktan (TR_ALPHABET) üretiliyor; burada sadece
   sarmalayıcının/butonların görünümü var. ---- */
/* Fixed 6 columns (not auto-fill, which could give 7+ on a wider panel
   and an uneven last row) — 29 Turkish letters resolve to 5 rows instead
   of stretching the right panel far taller than the other fields. */
.pn-letter-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:7px;
}
.pn-letter-option{
  display:flex !important;
  align-items:center; justify-content:center;
  position:relative;
  height:44px;
  background:#FFFDFC;
  border:1px solid rgba(74,45,33,.14);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.pn-letter-option input{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pn-letter-option:hover{ border-color:rgba(74,45,33,.28); background:#FFF9F5; }
.pn-letter-option:has(input:checked){
  border-color:#7A5542; background:#5A392B;
}
.pn-letter-option:has(input:checked) .pn-letter-char{ color:#FFF9F4; }
.pn-letter-option:has(input:focus-visible){ outline:2px solid rgba(74,45,33,.55); outline-offset:2px; }
.pn-letter-char{ font-size:14.5px; font-weight:700; color:#2D201A; }

/* ---- Zincir kartları — sol panelde 3 küçük kart yan yana. Gerçek zincir
   fotoğrafı (images/personalized/chain-*-thumb.webp) varsa .pn-chain-
   thumb'ı kaplar; yoksa her tipin gerçek halka/boncuk boyutunu kabaca
   yansıtan saf-CSS 3 nokta (Top Zincir = büyük boncuk, İnce = küçük
   nokta) görünür kalır. Kırık resim asla gösterilmez. */
.pn-chain-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.pn-chain-option{
  display:flex !important;
  flex-direction:column; align-items:center;
  position:relative;
  min-width:0;
  padding:10px 3px;
  gap:6px;
  text-align:center;
  background:#FFFDFC;
  border:1px solid rgba(74,45,33,.14);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pn-chain-option input{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pn-chain-option:hover{ border-color:rgba(74,45,33,.28); background:#FFF9F5; }
.pn-chain-option:has(input:checked){
  border-color:#7A5542; background:#F7EEE8;
  box-shadow:0 4px 12px rgba(74,45,33,.06);
}
.pn-chain-option:has(input:focus-visible){ outline:2px solid rgba(74,45,33,.55); outline-offset:2px; }
.pn-chain-option::after{
  content:'✓'; position:absolute; top:6px; right:6px;
  width:15px; height:15px; border-radius:50%;
  display:grid; place-items:center;
  background:#5A392B; color:#FFF9F4; font-size:8px; font-weight:700;
  opacity:0; transform:scale(.8); transition:.18s ease;
}
.pn-chain-option:has(input:checked)::after{ opacity:1; transform:scale(1); }
.pn-chain-thumb{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:40px; border-radius:8px;
  background:rgba(74,45,33,.05);
}
.pn-chain-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
.pn-chain-thumb-fallback{ display:flex; align-items:center; justify-content:center; gap:3px; }
.pn-chain-thumb-fallback span{ display:block; border-radius:50%; background:rgba(74,45,33,.55); }
.pn-chain-thumb-fallback--klasik span{ width:7px; height:7px; }
.pn-chain-thumb-fallback--top span{ width:11px; height:11px; }
.pn-chain-thumb-fallback--ince span{ width:4px; height:4px; }
.pn-chain-name{ font-size:11.5px; font-weight:600; letter-spacing:-.01em; color:#2D201A; white-space:nowrap; }

@media (max-width:640px){
  .pn-select-panel{ padding:16px; border-radius:18px; }
  .pn-model-thumb{ width:56px; height:56px; }
  .pn-model-glyph{ font-size:22px; }
  .pn-model-name{ font-size:13.5px; }
  .pn-letter-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; }
  .pn-letter-option{ height:40px; }
  .pn-chain-thumb{ height:36px; }
  .pn-chain-name{ font-size:12px; }
}

/* ========================================================================
   MOBILE CONSOLIDATION PASS — 2026-08-25
   One authoritative late-source block for the issues verified on real iPhone
   screenshots: homepage product density, promo tab overlap, mobile footer,
   drawer density, and inner-page account/favorites compaction.
   ======================================================================== */
@media (max-width: 640px){
  html, body{ max-width:100%; }
  body{ overflow-x: clip; }
  .container, .container--narrow{ padding-inline:16px; }

  /* Header: keep the current visual language, just reduce density. */
  .header-inner{ height:56px; }
  .logo-script{ font-size:21px; }
  .logo-subtitle{ font-size:7.5px; letter-spacing:1.5px; }
  .header-actions{ gap:2px; }
  .header-actions .icon-btn{ width:36px; height:36px; }
  .header-actions .icon-btn svg{ width:20px; height:20px; }

  /* Mobile drawer: less whitespace, more useful content above the fold. */
  .mobile-nav{ width:min(350px, 88vw); padding:18px 20px max(24px, env(safe-area-inset-bottom)); }
  .mobile-nav-head{ margin-bottom:14px; }
  .mobile-nav-list a,
  .mobile-nav-toggle-item{ padding:13px 2px; font-size:1.18rem; line-height:1.2; }
  .mobile-submenu a{ padding:10px 2px 10px 14px; font-size:15px; }
  .mobile-submenu li:last-child a{ padding-bottom:12px; }
  .mobile-nav-foot{ margin-top:22px; padding-top:18px; gap:11px; }
  .mobile-nav-foot a{ min-height:42px; font-size:15px; }

  /* Homepage hero sizing/copy lives entirely in the dedicated hero-slide
     media queries above (now max-width:768px) — do not duplicate it here. */

  /* Homepage product grid (.home-bestsellers-grid): section padding only
     here — its own column/height/caption/placeholder rules all live in
     ONE place, right after its base declaration (~line 2299 above). Do
     not add a grid rule back into this block; it used to duplicate that
     one and silently win the cascade on source order alone. */
  body.home .home-bestsellers{ padding-block:24px; }

  /* Homepage editorial campaign cards: safer text inset and slightly tighter
     vertical rhythm on narrow screens. */
  body.home .home-campaigns .container--narrow{ padding-inline:8px; }
  body.home .home-campaign-band,
  body.home .home-campaign-band--flip{ min-height:0; }
  body.home .home-campaign-content,
  body.home .home-promo-text{ padding-inline:24px; }
  body.home .home-campaign-title,
  body.home .home-promo-title{ overflow-wrap:anywhere; }

  /* Moving benefit ribbon: clip only its own track, never the page. */
  body.home .home-ribbon-row{ overflow:hidden; }
  body.home .home-ribbon-track{ width:max-content; }

  /* Discount affordance: mobile chip instead of the tall vertical tab that
     obscured product copy/footer links in the screenshots. */
  .discount-tab{
    left:10px;
    top:auto;
    bottom:calc(18px + env(safe-area-inset-bottom));
    width:auto;
    height:36px;
    padding:0 13px;
    border-radius:999px;
    transform:none;
    box-shadow:0 7px 20px rgba(53,35,29,.18);
  }
  .discount-tab-label{
    writing-mode:horizontal-tb;
    transform:none;
    flex-direction:row;
    gap:7px;
  }
  .discount-tab-line{ font-size:10.5px; letter-spacing:.1em; }
  .discount-tab-percent{ font-size:15px; }
  /* Fires when .site-footer scrolls into view (js/main.js IntersectionObserver,
     mobile-only) so the fixed bottom-left chip never sits on top of footer
     content instead of fighting z-index. */
  .discount-tab.is-footer-near{
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
  }

  /* Every footer mobile rule — intro/.footer-top, the .footer-col
     accordion, and footer-lower (payment/monogram/security) — now lives
     in ONE place: the footer's own @media(max-width:640px) block, at
     roughly line 1165 above. This used to be split into a second,
     near-duplicate ruleset here that fought the one above on source
     order (two different .footer-top/.footer-col declarations, same
     media query, silently overriding each other by whichever was later
     in the file). Do not add any footer-top/footer-intro/footer-col/
     footer-lower rule back into this block — put it in the one above. */

  /* Account page: reduce dead space while retaining readable touch targets. */
  .auth-tabs{ margin-bottom:16px; }
  .auth-tabs .filter-chip{ padding:8px 16px; font-size:14px; }
  .auth-card{ max-width:none; }
  .form-card{ padding:18px 16px; }
  .form-field{ margin-bottom:14px; }
  .inner-main input:not([type="checkbox"]):not([type="radio"]),
  .inner-main select{ height:48px; }
  .form-gate-notice{ padding:14px; margin-bottom:16px; }
  .form-gate-notice-actions{ gap:7px; }
  .benefits-panel{ padding:22px 18px; }
  .benefits-panel h2{ font-size:21px; margin:6px 0 16px; }
  .benefits-list{ gap:13px; }
  .benefits-list li{ gap:11px; font-size:13px; }
  .benefits-list li svg{ flex-basis:19px; width:19px; height:19px; }

  /* Favorites / generic empty states: much less oversized on phones. */
  .empty-state{
    padding:34px 20px;
    border-radius:12px;
  }
  .empty-state svg{ width:44px; height:44px; margin-bottom:13px; }
  .empty-state h3{ font-size:20px; line-height:1.25; }
  .empty-state p{ margin-top:8px; font-size:13.5px; }
  .catalog-note{ margin-top:26px; }
}

/* ==========================================================================
   Cookie consent — first-visit banner (js/cookie-consent.js buildBanner())
   + full "Tercihleri Yönet" preferences modal (buildModal()). Same overlay/
   backdrop/dialog pattern as .size-guide-overlay/.size-guide-modal
   elsewhere in this file (opacity+transform transition, backdrop/Escape/×
   all close it, body scroll locked while the modal is open) — reused for
   visual and behavioral consistency, not reinvented.
   ========================================================================== */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  flex-wrap: wrap;
  padding: 18px clamp(16px, 4vw, 32px);
  background: #FCF8F2;
  border-top: 1px solid rgba(74,45,33,.15);
  box-shadow: 0 -10px 30px rgba(53,35,29,.12);
  font-family: var(--font-sans);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.cookie-banner.is-open{ opacity: 1; transform: translateY(0); }
body.cookie-banner-open{ overflow: hidden; }
.cookie-banner-text{
  flex: 1 1 340px; max-width: 640px;
  font-size: 14px; line-height: 1.55; color: #2E211B;
}
.cookie-banner-text a{
  color: #4A2D21; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
  margin-left: 4px; white-space: nowrap;
}
.cookie-banner-actions{ display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.cookie-banner-actions .btn{ padding: 12px 22px; font-size: 14px; }
.cookie-banner-manage{
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: #4A2D21; text-decoration: underline; text-underline-offset: 3px;
  padding: 12px 4px;
}

.cookie-modal-backdrop{
  position: absolute; inset: 0; background: rgba(53,35,29,.45);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease);
  border: 0; padding: 0;
}
.cookie-modal-overlay{
  position: fixed; inset: 0; z-index: 960;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cookie-modal{
  /* Stacks above .cookie-modal-backdrop purely by DOM order — see the same
     note on .size-guide-modal elsewhere in this file; never give the
     backdrop a z-index. */
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--inner-card);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 34px);
  box-shadow: 0 24px 64px rgba(53,35,29,.28);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.cookie-modal-overlay.is-open .cookie-modal-backdrop{ opacity: 1; pointer-events: auto; }
.cookie-modal-overlay.is-open .cookie-modal{ opacity: 1; transform: translateY(0) scale(1); }

.cookie-modal-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 8px;
}
.cookie-modal-head h2{
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 26px);
  color: var(--text); margin: 0;
}
.cookie-modal-close{
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.cookie-modal-close:hover{ background: var(--inner-alt); color: var(--text); }
.cookie-modal-intro{ font-size: 14.5px; line-height: 1.6; color: var(--inner-body); margin: 0 0 22px; }
.cookie-modal-intro a{ color: #4A2D21; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.cookie-category{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--inner-border);
}
.cookie-category:first-of-type{ border-top: 1px solid var(--inner-border); }
.cookie-category-text h3{ font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text); margin: 0 0 4px; }
.cookie-category-text p{ font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 380px; }
.cookie-category-locked{
  flex-shrink: 0; align-self: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #4A2D21; background: var(--inner-alt);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

/* Custom toggle switch — a real checkbox underneath (keyboard/screen-reader
   accessible), visually a pill track + sliding thumb. */
.cookie-toggle{ flex-shrink: 0; align-self: center; }
.cookie-toggle input{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cookie-toggle-track{
  display: block; width: 46px; height: 26px; border-radius: 999px;
  background: rgba(74,45,33,.22);
  position: relative;
  transition: background var(--dur-s) var(--ease);
  cursor: pointer;
}
.cookie-toggle-track::after{
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #FFF8F0;
  box-shadow: 0 2px 6px rgba(53,35,29,.25);
  transition: transform var(--dur-s) var(--ease);
}
.cookie-toggle input:checked + .cookie-toggle-track{ background: #4A2D21; }
.cookie-toggle input:checked + .cookie-toggle-track::after{ transform: translateX(20px); }
.cookie-toggle input:focus-visible + .cookie-toggle-track{ outline: 2px solid #4A2D21; outline-offset: 2px; }

.cookie-modal-actions{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--inner-border);
}
.cookie-modal-actions .btn{ flex: 1 1 auto; padding: 13px 18px; font-size: 14px; white-space: nowrap; }

@media (max-width: 640px){
  /* Compact mobile banner: tighter padding/gaps, and the 3 actions arrange
     as [Kabul Et][Reddet] on one row with "Tercihleri Yönet" as a slim
     text-link row below it (flex-basis:100% forces it to wrap onto its own
     line) instead of three equal-height pill buttons stacking one per row,
     which is what made the banner tall on 360-430px screens. */
  .cookie-banner{
    justify-content: stretch;
    gap: 10px;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  }
  .cookie-banner-text{ flex-basis: 100%; font-size: 13.5px; line-height: 1.42; }
  .cookie-banner-actions{ width: 100%; gap: 8px; }
  .cookie-banner-actions .btn{ flex: 1 1 calc(50% - 4px); padding: 11px 12px; font-size: 13.5px; text-align: center; }
  .cookie-banner-manage{ flex: 1 1 100%; text-align: center; padding: 2px 4px; font-size: 13px; }
  .cookie-modal-overlay{ padding: 12px; align-items: flex-end; }
  .cookie-modal{ width: 100%; max-height: 92vh; padding: 22px 18px; border-radius: 16px 16px 0 0; }
  .cookie-modal-actions{ flex-direction: column; }
  .cookie-modal-actions .btn{ width: 100%; }
}