/* =========================================================
   GOLD YALAMA KOVASI — Assay-Vault Design System
   Cream + Ink + Gold/Oxblood — aligned with goldpremix.com
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,ital,wght@6..96,0,400;6..96,0,500;6..96,0,600;6..96,0,700;6..96,0,800;6..96,0,900;6..96,1,400&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Color tokens: cream page, ink text, gold + oxblood accents ---- */
  --color-bg: #EFE7D6;       /* cream */
  --color-bg-alt: #E4D9C2;   /* cream-2 */
  --color-surface: #FFFFFF;
  --color-surface-2: #F2E6C8;
  --color-border: #D6C9AB;   /* line */
  --color-text: #17130C;     /* ink */
  --color-text-muted: #4A4030;
  --color-text-dim: #5C5140;

  --color-ink-900: #17130C;
  --color-ink-800: #201A12;
  --color-ink-700: #2A2218;

  --color-on-dark: #F3EAD3;
  --color-on-dark-muted: rgba(243,234,211,.74);

  --color-gold: #C9A24B;
  --color-gold-bright: #E9CE86;
  --color-gold-deep: #8A6B23;
  --color-oxblood: #7A2E24;
  --color-oxblood-hi: #9C4034;

  --gradient-gold: linear-gradient(180deg, #D8BD77 0%, #C9A24B 55%, #9C7A24 100%);
  --gradient-gold-text: linear-gradient(90deg, #8F6F20, #8A6B23 55%, #6B5219);
  --gradient-gold-text-bright: linear-gradient(90deg, #E9CE86, #C9A24B 55%, #8A6B23);

  --color-on-gold: #17130C;
  --color-success: #4C8B5C;
  --color-danger: #7A2E24;

  --shadow-soft: 0 10px 30px -14px rgba(23,19,12,.32);
  --shadow-gold: 0 8px 24px -10px rgba(154,116,36,.45);

  --font-display: 'Bodoni Moda', 'Georgia', serif;
  --font-body: 'Instrument Sans', system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --space-1: .5rem;
  --space-2: .875rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --container: 1240px;
  --transition: .28s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input,textarea,select{ font-family: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display); font-weight:900; line-height:1.1; margin:0 0 var(--space-2); letter-spacing:-.005em; color: var(--color-text);
  font-optical-sizing: none; font-variation-settings: 'opsz' 12;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.15rem; }
p{ margin:0 0 var(--space-2); color: var(--color-text-muted); }
:focus-visible{ outline: 2px solid var(--color-gold-deep); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.section{ padding: var(--space-6) 0; }
.section-tight{ padding: var(--space-5) 0; }
.grid{ display:grid; gap: var(--space-3); }
.grid > *{ min-width:0; }
.text-center{ text-align:center; }
.hidden{ display:none !important; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em; flex-wrap:wrap; max-width:100%;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-gold-deep); font-weight:500; margin-bottom: var(--space-2);
}
.eyebrow span{ min-width:0; }
.eyebrow::before{ content:""; width:26px; height:2px; background: var(--color-gold); display:inline-block; }

.section-head{ max-width: 680px; margin: 0 auto var(--space-4); text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.75rem); color: var(--color-text); }
.section-head p{ font-size: 1.05rem; }
.gold-text{
  background: var(--gradient-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1em 1.7em; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap; min-height: 48px;
}
.btn:active{ transform: translateY(1px); }
.btn-gold{ background: var(--gradient-gold); color: var(--color-on-gold); box-shadow: var(--shadow-gold); }
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(154,116,36,.55); }
.btn-outline{ border-color: var(--color-gold-deep); color: var(--color-gold-deep); background: transparent; }
.btn-outline:hover{ background: rgba(154,116,36,.08); transform: translateY(-2px); }
.btn-ghost{ color: var(--color-text); background: rgba(23,19,12,.06); }
.btn-ghost:hover{ background: rgba(23,19,12,.1); }
.btn-block{ width:100%; }
.btn-sm{ padding:.7em 1.2em; font-size:.68rem; min-height:38px; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }

/* buttons on dark surfaces (header/footer/photo banners) */
.on-dark .btn-outline{ border-color: rgba(243,234,211,.5); color: var(--color-on-dark); }
.on-dark .btn-outline:hover{ background: rgba(243,234,211,.1); }

/* ---------- Header ----------
   Note: the blur/tint live on ::before (not on .site-header itself) because
   backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants — that broke the fixed, full-screen mobile
   nav panel (it was clipped to the header's own height instead of the
   viewport). Keeping .site-header filter-free avoids that. */
.site-header{
  position: sticky; top:0; z-index: 200;
  border-bottom: 1px solid rgba(233,206,134,.18);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(32,26,18,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height: 84px; }

.brand{ display:flex; align-items:center; gap:.8rem; }
.brand-mark{ width:72px; height:72px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.brand-word{ font-family: var(--font-display); line-height:1; display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; }
.brand-word .g1{ font-size:1.32rem; font-weight:700; letter-spacing:.03em; background: var(--gradient-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
/* .g2/.g3 (YALAMA / KOVASI) get their letter-spacing computed in JS (see
   justifyBrandWord in main.js) so each line's rendered width matches .g1
   exactly — the .28em here is only the pre-JS fallback. */
.brand-word .g2, .brand-word .g3{ font-family: var(--font-mono); font-size:.6rem; letter-spacing:.28em; color: var(--color-on-dark-muted); text-transform:uppercase; display:block; white-space:nowrap; }
.brand-word .g2{ margin-top:.3em; }
.brand-word .g3{ margin-top:.15em; }

.main-nav{ display:flex; align-items:center; gap: var(--space-4); }
.nav-links{ display:flex; align-items:center; gap: 2rem; }
.nav-links a{
  font-size:.9rem; font-weight:500; color: var(--color-on-dark-muted); position:relative; padding:.3rem 0;
  transition: color var(--transition);
}
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--gradient-gold); transform: scaleX(0); transform-origin:left; transition: transform var(--transition); }
.nav-links a:hover, .nav-links a.active{ color: var(--color-gold-bright); }
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap: .9rem; }
.lang-switch{ display:flex; border:1px solid rgba(233,206,134,.3); border-radius: var(--radius-full); overflow:hidden; }
.lang-switch button, .lang-switch a, .lang-switch span{
  background:transparent; border:none; color: var(--color-on-dark-muted); font-family: var(--font-mono); font-size: .72rem; font-weight:600;
  padding:.5rem .75rem; letter-spacing:.05em; transition: all var(--transition); text-decoration:none; display:inline-block; cursor:pointer;
}
.lang-switch .active{ background: var(--gradient-gold); color: var(--color-on-gold); cursor:default; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(233,206,134,.3);
  background: transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background: var(--color-gold-bright); display:block; transition: all var(--transition); }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.lang-switch-header{ display:none; }
@media (max-width: 960px){
  .nav-toggle{ display:flex; order:3; }
  .lang-switch-header{ display:flex; order:2; margin-left:auto; }
  .header-actions .lang-switch{ display:none; }
  .main-nav{
    position: fixed; top: 84px; right: var(--space-3); left:auto; bottom:auto;
    width:auto; max-width: min(320px, calc(100vw - var(--space-3) * 2)); max-height: calc(100vh - 84px - var(--space-3));
    min-width:0; box-sizing:border-box; overflow-x:hidden;
    background: rgba(20,16,10,.4);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(233,206,134,.18); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
    flex-direction:column; align-items:flex-end;
    padding: var(--space-3); gap: var(--space-3); overflow-y:auto;
    opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .main-nav.open{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0); }
  .nav-links{ flex-direction:column; align-items:flex-end; gap: 1.1rem; width:auto; min-width:0; max-width:100%; text-align:right; }
  .nav-links a{ font-size:1.1rem; max-width:100%; }
  .header-actions{ width:auto; min-width:0; max-width:100%; justify-content:flex-end; align-items:center; }
}
/* Browsers without backdrop-filter support get a more solid fallback so the
   menu stays legible even without the blur (no see-through bleed-through). */
@media (max-width: 960px){
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .main-nav{ background: rgba(20,16,10,.94); }
  }
}

/* ---------- Photo banners (hero + page-hero share the same technique) ---------- */
.hero, .page-hero, .farm-photo{
  position: relative; isolation:isolate; overflow:hidden; color: var(--color-on-dark);
}
.hero::before, .page-hero::before, .farm-photo::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--hero-img); background-size:cover; background-position:center;
  background-color: var(--color-ink-800);
}
.hero::after, .page-hero::after, .farm-photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, rgba(23,19,12,.88), rgba(42,34,24,.62));
}
.hero p, .page-hero p, .farm-photo p{ color: var(--color-on-dark-muted); }
.hero h1, .page-hero h1, .page-hero h2, .farm-photo h2{ color: #fff; }
.hero .eyebrow, .page-hero .eyebrow, .farm-photo .eyebrow{ color: var(--color-gold-bright); }
.hero .eyebrow::before, .page-hero .eyebrow::before, .farm-photo .eyebrow::before{ background: var(--color-gold-bright); }
.hero .gold-text, .page-hero .gold-text, .farm-photo .gold-text{ background: var(--gradient-gold-text-bright); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* On narrow/portrait screens "cover" crops the wide banner photos hard on
   the left/right (the container is much taller relative to its width than
   the photo is), so switch to "contain" — the whole photo shrinks to fit
   instead of being cropped, with the dark ink + gradient filling the rest. */
@media (max-width: 640px){
  .hero::before, .page-hero::before, .farm-photo::before{ background-size: contain; background-position: center top; background-repeat: no-repeat; }
}

/* ---------- Hero (homepage) ---------- */
.hero{ padding: clamp(140px,18vw,220px) 0 clamp(64px,9vw,110px); }
.hero-video{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; background: var(--color-ink-800); }
@media (max-width: 640px){
  /* Mobile: skip the ~12MB video download entirely, show the static poster image instead (bandwidth + Core Web Vitals). */
  .hero-video{ display:none; }
}
.hero-copy h1{ font-size: clamp(2.4rem, 5vw, 3.9rem); margin-bottom: var(--space-3); }
.hero-copy p.lead{ font-size: 1.15rem; max-width: 560px; margin-bottom: var(--space-4); }
.hero-cta{ display:flex; gap: 1rem; flex-wrap:wrap; margin-bottom: var(--space-4); }
.hero-stats{ display:flex; gap: var(--space-4); flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family: var(--font-display); font-size:1.8rem; color: var(--color-gold-bright); }
.hero-stats div span{ font-family: var(--font-mono); font-size:.72rem; color: var(--color-on-dark-muted); text-transform:uppercase; letter-spacing:.1em; }

.float-badge{
  position:absolute; bottom: 8%; right: 6%; background: rgba(23,19,12,.72); border:1px solid rgba(233,206,134,.3);
  border-radius: var(--radius-md); padding: .9rem 1.1rem; display:flex; gap:.7rem; align-items:center; box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}
.float-badge svg{ width:26px; height:26px; color: var(--color-gold-bright); flex-shrink:0; }
.float-badge strong{ display:block; font-size:.85rem; color:#fff; }
.float-badge span{ font-size:.72rem; color: var(--color-on-dark-muted); }
@media (max-width: 640px){ .float-badge{ display:none; } }

/* ---------- Marquee / trust strip ---------- */
.trust-strip{ border-bottom:1px solid var(--color-border); background: var(--color-bg-alt); padding: var(--space-2) 0; }
.trust-strip .container{ display:flex; flex-wrap:wrap; gap: var(--space-4); justify-content:space-between; align-items:center; }
.trust-item{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color: var(--color-text-muted); }
.trust-item svg{ width:20px; height:20px; color: var(--color-gold-deep); flex-shrink:0; }

/* ---------- Cards ---------- */
.card{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.card:hover{ transform: translateY(-6px); border-color: var(--color-gold); }

.icon-badge{ width:52px; height:52px; border-radius: var(--radius-md); background: var(--color-surface-2); border:1px solid rgba(154,116,36,.25); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-2); }
.icon-badge svg{ width:26px; height:26px; color: var(--color-gold-deep); }

.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

/* ---------- Product cards ---------- */
.product-card{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition); }
.product-card:hover{ transform: translateY(-6px); border-color: var(--color-gold); }
.product-card .thumb{ aspect-ratio: 4/3.2; background: linear-gradient(160deg, var(--color-surface-2), var(--color-bg-alt)); position:relative; overflow:hidden; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.product-card:hover .thumb img{ transform: scale(1.05); }
.product-card .thumb .tag{ position:absolute; top:14px; left:14px; background: var(--gradient-gold); color: var(--color-on-gold); font-family: var(--font-mono); font-size:.64rem; font-weight:600; padding:.4em .8em; border-radius: var(--radius-full); text-transform:uppercase; letter-spacing:.06em; z-index:2; }
.product-card .body{ padding: var(--space-3); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.product-card .body .cat{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color: var(--color-gold-deep); font-weight:600; }
.product-card .body h3{ font-size:1.25rem; margin:0; }
.product-card .body p{ font-size:.9rem; margin:0; flex:1; }
.product-card .body .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; padding-top: .8rem; border-top:1px solid var(--color-border); }
.product-card .sizes{ font-family: var(--font-mono); font-size:.72rem; color: var(--color-text-dim); }

/* ---------- Full-bleed photo banner (mid-page) ---------- */
.farm-photo{ height:clamp(320px, 46vw, 560px); }
.farm-photo img{ display:none; } /* image now supplied via --hero-img background */
.farm-photo-overlay{ position:relative; z-index:1; height:100%; display:flex; align-items:flex-end; padding-bottom: var(--space-4); }
.farm-photo-overlay h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); max-width:620px; }
.farm-photo-overlay p{ max-width:520px; }

/* ---------- Sections: cream-2 alt / gold band / dark band ---------- */
.section-alt{ background: var(--color-bg-alt); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.gold-band{ background: var(--gradient-gold); color: var(--color-on-gold); }
.gold-band h2, .gold-band p{ color: var(--color-on-gold); }
.gold-band .btn-outline{ border-color: var(--color-on-gold); color: var(--color-on-gold); }
.gold-band .btn-outline:hover{ background: rgba(0,0,0,.08); }

.ink-band{
  background: radial-gradient(120% 140% at 80% 0%, rgba(233,206,134,.14), transparent 55%), var(--color-ink-800);
  color: var(--color-on-dark);
}
.ink-band h2, .ink-band h3{ color:#fff; }
.ink-band p{ color: var(--color-on-dark-muted); }
.ink-band .eyebrow{ color: var(--color-gold-bright); }

/* ---------- Steps / process ---------- */
.steps{ counter-reset: step; grid-template-columns: repeat(4,1fr); }
.step{ position:relative; padding-top: var(--space-3); }
.step::before{ counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size:1.6rem; color: var(--color-gold-deep); opacity:.7; display:block; margin-bottom:.4rem; }
@media (max-width: 960px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .steps{ grid-template-columns: 1fr; } }

/* ---------- Stats band ---------- */
.stats-band{ grid-template-columns: repeat(4,1fr); text-align:center; }
.stats-band strong{ display:block; font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.6rem); color: var(--color-gold-bright); }
.stats-band span{ font-family: var(--font-mono); font-size:.7rem; color: var(--color-on-dark-muted); text-transform:uppercase; letter-spacing:.1em; }
@media (max-width: 640px){ .stats-band{ grid-template-columns: repeat(2,1fr); gap: var(--space-4); } }
@media (max-width: 480px){ .eyebrow{ letter-spacing:.14em; font-size:.72rem; } }
@media (max-width: 640px){ .btn{ white-space:normal; text-align:center; } }

/* ---------- Mobile: center all text & images ---------- */
@media (max-width: 640px){
  .section, .section-alt, .section-tight, .gold-band,
  .hero-copy, .footer-about, .footer-links,
  .farm-photo-overlay, .contact-grid > div, .pd-info { text-align:center; }

  .hero-copy p.lead, .footer-about p { margin-left:auto; margin-right:auto; }

  .hero-cta, .hero-stats, .trust-strip .container,
  .footer-contact, .footer-bottom, .footer-grid a.brand,
  .pd-badges { justify-content:center; }
  .footer-contact li { justify-content:center; }

  img{ margin-left:auto; margin-right:auto; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-ink-900); color: var(--color-on-dark-muted); border-top:1px solid rgba(233,206,134,.15); padding: var(--space-6) 0 var(--space-3); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.footer-grid h4{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color: #fff; margin-bottom: var(--space-2); font-weight:600;}
.footer-grid a{ color: var(--color-on-dark-muted); font-size:.92rem; display:block; margin-bottom:.6rem; transition: color var(--transition); }
.footer-grid a.brand{ display:flex; }
.footer-grid a:hover{ color: var(--color-gold-bright); }
.footer-about p{ font-size:.9rem; max-width:320px; color: var(--color-on-dark-muted); }
.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.8rem; font-size:.9rem; color: var(--color-on-dark-muted); }
.footer-contact svg{ width:18px; height:18px; color: var(--color-gold-bright); flex-shrink:0; margin-top:2px; }
.social-row{ display:flex; gap:.7rem; margin-top: var(--space-2); }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(233,206,134,.25); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ border-color: var(--color-gold-bright); }
.social-row svg{ width:17px; height:17px; }
.footer-bottom{ border-top:1px solid rgba(233,206,134,.15); padding-top: var(--space-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family: var(--font-mono); font-size:.76rem; color: var(--color-on-dark-muted); }
.zen-credit{ display:flex; justify-content:center; margin-top: var(--space-3); }
.zen-credit a{ display:inline-flex; flex-direction:column; align-items:center; gap:.4rem; opacity:.7; transition: opacity var(--transition); }
.zen-credit a:hover{ opacity:1; }
.zen-credit img{ width:110px; height:auto; display:block; }
.zen-credit span{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-on-dark-muted); }
.footer-bottom a{ color: var(--color-on-dark-muted); }
.footer-bottom a:hover{ color: var(--color-gold-bright); }
@media (max-width: 960px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 300;
  width:60px; height:60px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.65); transition: transform var(--transition);
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:30px; height:30px; color:#fff; }
.wa-float .ping{ position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping{ 0%{ transform: scale(1); opacity:.7; } 100%{ transform: scale(1.6); opacity:0; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:none; }
.breadcrumb ol{ display:flex; gap:.5rem; align-items:center; font-family: var(--font-mono); font-size:.76rem; color: var(--color-text-dim); flex-wrap:wrap; }
.breadcrumb a{ color: var(--color-text-dim); }
.breadcrumb a:hover{ color: var(--color-gold-deep); }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.5rem; color: var(--color-border); }

/* ---------- Page header banner (inner pages) ---------- */
.page-hero{ padding: clamp(140px,18vw,220px) 0 clamp(64px,9vw,110px); text-align:center; min-height: clamp(420px, 55vw, 800px); display:flex; align-items:center; justify-content:center; }
.page-hero h1{ font-size: clamp(2.1rem,4vw,3.2rem); }
.page-hero p{ max-width:620px; margin:0 auto; }

/* ---------- Filters (products page) ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom: var(--space-4); }
.filter-btn{ padding:.6em 1.2em; border-radius: var(--radius-full); border:1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-mono); color: var(--color-text-muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; transition: all var(--transition); }
.filter-btn:hover{ border-color: var(--color-gold); color: var(--color-text); }
.filter-btn.active{ background: var(--gradient-gold); color: var(--color-on-gold); border-color: transparent; }

/* ---------- Product detail ---------- */
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items:flex-start; }
.pd-gallery{ position:sticky; top: 110px; }
.pd-gallery .main-thumb{ aspect-ratio: 1/1; background: linear-gradient(160deg, var(--color-surface-2), var(--color-bg-alt)); border-radius: var(--radius-lg); border:1px solid var(--color-border); overflow:hidden; box-shadow: var(--shadow-soft); }
.pd-gallery .main-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-info .cat{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color: var(--color-gold-deep); font-weight:600; }
.pd-info h1{ font-size: clamp(1.9rem,3vw,2.6rem); margin: .3rem 0 var(--space-2); }
.pd-badges{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: var(--space-3); }
.pd-badge{ display:flex; align-items:center; gap:.4rem; font-family: var(--font-mono); font-size:.72rem; background: var(--color-surface); border:1px solid var(--color-border); padding:.4em .8em; border-radius: var(--radius-full); color: var(--color-text-muted); }
.pd-badge svg{ width:15px; height:15px; color: var(--color-gold-deep); }
.pd-sizes{ display:flex; gap:.7rem; flex-wrap:wrap; margin: var(--space-3) 0; }
.size-chip{ border:1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); padding:.7em 1.1em; text-align:center; font-size:.85rem; }
.size-chip strong{ display:block; color: var(--color-gold-deep); font-family: var(--font-display); font-size:1.05rem; }
.pd-cta{ display:flex; gap:1rem; margin: var(--space-3) 0; flex-wrap:wrap; }
.pd-benefits li{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.7rem; font-size:.95rem; color: var(--color-text-muted); }
.pd-benefits svg{ width:20px; height:20px; color: var(--color-gold-deep); flex-shrink:0; margin-top:1px; }
.pd-tabs{ display:flex; gap: var(--space-4); border-bottom:1px solid var(--color-border); margin: var(--space-5) 0 var(--space-3); }
.pd-tab-btn{ background:none; border:none; padding: .8em 0; font-family: var(--font-mono); color: var(--color-text-dim); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; position:relative; }
.pd-tab-btn.active{ color: var(--color-gold-deep); }
.pd-tab-btn.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--gradient-gold); }
.pd-tab-panel{ display:none; }
.pd-tab-panel.active{ display:block; }
@media (max-width: 900px){ .product-detail{ grid-template-columns:1fr; } .pd-gallery{ position:static; } }

/* ---------- Table ---------- */
.spec-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.spec-table tr{ border-bottom:1px solid var(--color-border); }
.spec-table td{ padding:.9em .4em; color: var(--color-text-muted); }
.spec-table td:first-child{ color: var(--color-text); font-weight:600; width:38%; }

/* ---------- Blog ---------- */
.blog-card .thumb{ aspect-ratio: 16/10; }
.blog-card .meta{ font-family: var(--font-mono); font-size:.72rem; color: var(--color-text-dim); display:flex; gap:.8rem; }
.blog-post-body h2{ font-size:1.5rem; margin-top: var(--space-4); }
.blog-post-body p{ font-size:1.02rem; color: var(--color-text-muted); }
.blog-post-body ul{ margin: 0 0 var(--space-2); }
.blog-post-body li{ list-style: disc; margin-left:1.3rem; color: var(--color-text-muted); margin-bottom:.5rem; }
.blog-hero-img{ aspect-ratio: 21/9; border-radius: var(--radius-lg); border:1px solid var(--color-border); background: linear-gradient(160deg, var(--color-surface-2), var(--color-bg-alt)); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-4); overflow:hidden; }

/* ---------- Contact page ---------- */
.contact-grid{ grid-template-columns: 1fr 1fr; align-items:start; }
.contact-card{ display:flex; gap:1rem; align-items:flex-start; }
.contact-card .icon-badge{ margin-bottom:0; flex-shrink:0; }
.map-wrap{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); }
.map-wrap iframe{ width:100%; height:420px; border:0; filter: sepia(.15) saturate(.85) contrast(.95); }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ (details/summary) ---------- */
.faq-item{ border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.4rem; margin-bottom:.8rem; background: var(--color-surface); }
.faq-item summary{ cursor:pointer; font-weight:600; font-family: var(--font-display); font-size:1.05rem; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color: var(--color-gold-deep); font-family: var(--font-mono); font-size:1.2rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ margin:.8rem 0 0; }

/* ---------- Dealer / bayilik page ---------- */
.perk-list li{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; }
.perk-list svg{ width:22px; height:22px; color: var(--color-gold-deep); flex-shrink:0; }

/* ---------- Utility fade-in ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Placeholder note (dev-only banner) ---------- */
.dev-note{ background:#3a2c0d; color:#f1cd6b; font-size:.78rem; text-align:center; padding:.5rem 1rem; border-bottom:1px solid #5a4517; }
.dev-note a{ text-decoration:underline; }