/* =========================================================
   OLD IRON — Tanıtım Sitesi
   Palet: derin siyah · kan kırmızısı · kemik · altın (çok az)
   Tip: Anton (display), Barlow Condensed (ui), JetBrains Mono (data), Inter (body)
   ========================================================= */

:root{
  --bg:        #0a0a0a;
  --bg-2:      #111111;
  --bg-3:      #161616;
  --panel:     #141414;
  --line:      #262626;
  --line-soft: #1d1d1d;
  --ink:       #e8e3d8;     /* kemik */
  --ink-2:     #b7b0a2;
  --ink-3:     #7a7366;
  --red:       #c2161c;     /* kan */
  --red-2:     #8b0000;
  --red-3:     #ff2a2e;
  --gold:      #c9a961;
  --green:     #61d67a;     /* sadece durum */
  --pass:      #3bd16f;

  --f-display: 'Anton', 'Archivo Black', Impact, sans-serif;
  --f-ui:      'Barlow Condensed', 'Barlow', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --f-body:    'Inter', system-ui, sans-serif;

  --maxw: 1480px;
  --pad:  clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{background:none; border:0; color:inherit; cursor:pointer; font:inherit}

::selection{background:var(--red); color:#fff}

/* Selective global noise overlay (subtle concrete grain) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:80;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity:.55;
}

/* =========================================================
   TOP STRIP (running marquee)
   ========================================================= */
.strip{
  position:sticky; top:0; z-index:60;
  background:var(--red);
  color:#fff;
  border-bottom:1px solid #000;
  overflow:hidden;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.12em; font-size:12px;
  text-transform:uppercase;
}
.strip-track{
  display:inline-flex; gap:28px; align-items:center;
  padding:8px 0;
  white-space:nowrap;
  animation: marquee 45s linear infinite;
}
.strip .dot{opacity:.75; font-size:8px}
@keyframes marquee{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:30px; z-index:55;
  display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:24px;
  padding: 18px var(--pad);
  background:rgba(10,10,10,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:40px; height:40px; display:grid; place-items:center;
  background:#000; color:var(--red);
  border:1px solid var(--line);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--f-display); font-weight:400; letter-spacing:.04em; font-size:22px; color:var(--ink)}
.brand-text em{font-family:var(--f-mono); font-style:normal; letter-spacing:.1em; font-size:9.5px; color:var(--ink-3); margin-top:3px}
.brand.big .brand-text b{font-size:40px}

.nav-links{display:flex; gap:28px; justify-content:center; font-family:var(--f-ui); font-weight:600; letter-spacing:.12em; font-size:13px}
.nav-links a{color:var(--ink-2); transition: color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  display:inline-flex; gap:10px; align-items:center;
  padding:12px 18px;
  background:var(--red); color:#fff;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.12em; font-size:12.5px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .15s, transform .15s;
}
.nav-cta:hover{background:#e11920; transform:translate(-1px,-1px)}
.nav-cta .arr{font-family:var(--f-mono)}
.nav-burger{display:none; flex-direction:column; gap:4px; padding:8px}
.nav-burger span{display:block; width:22px; height:2px; background:var(--ink)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding: clamp(40px, 6vw, 96px) var(--pad) clamp(40px, 4vw, 64px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 80px,
    radial-gradient(circle at 78% 40%, rgba(194,22,28,.22), transparent 55%),
    linear-gradient(180deg, #0a0a0a, #0b0606);
}
.hero-noise{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-meta{
  position:absolute; top:18px; z-index:3;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-family:var(--f-mono); letter-spacing:.08em; font-size:10.5px;
  color:var(--ink-3);
}
.hero-meta.top-left{left:var(--pad)}
.hero-meta.top-right{right:var(--pad)}
.hero-meta .kbd{
  padding:4px 8px; border:1px solid var(--line); color:var(--ink-2);
  background:rgba(255,255,255,.02);
}
.hero-meta .tag{letter-spacing:.14em}

.hero-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.15fr 1fr; gap:48px;
  align-items:center;
  padding-top: 56px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em; font-size:12px;
  color:var(--ink-2); margin-bottom:18px;
}
.hero-eyebrow .hx{
  display:inline-block; width:10px; height:10px;
  background:var(--red); transform:rotate(45deg);
}
.hx.green{background:var(--green)}

.hero-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(70px, 13vw, 220px);
  line-height:.85; letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero-title .line{display:block; color:var(--ink)}
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke: 2px var(--ink);
  letter-spacing:.01em;
}

.hero-lede{
  max-width:52ch; margin-top:24px;
  color:var(--ink-2); font-size:17px; line-height:1.55;
}
.hero-lede b{color:var(--ink)}

.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn{
  display:inline-flex; gap:12px; align-items:center;
  padding:16px 22px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.14em; font-size:13.5px;
  text-transform:uppercase;
  transition: background .15s, transform .15s, color .15s, border-color .15s;
  border:1px solid transparent;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:#e11920; transform:translate(-1px,-1px) }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(255,255,255,.03) }
.btn-arrow{font-family:var(--f-mono); transition: transform .2s}
.btn:hover .btn-arrow{transform:translateX(4px)}

.hero-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  margin-top:44px; max-width:640px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{
  padding:18px 14px 18px 0;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.stat:last-child{border-right:0}
.stat:not(:first-child){padding-left:14px}
.stat-n{font-family:var(--f-display); font-size:44px; line-height:1; color:var(--ink)}
.stat-l{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); line-height:1.3}

/* Hero right: product stage */
.hero-right{
  position:relative; aspect-ratio: 1/1.15;
  display:flex; align-items:center; justify-content:center;
}
.hero-stage{
  position:relative; width:100%; height:100%;
  display:grid; place-items:center;
}
.stage-glow{
  position:absolute; inset:10%;
  background: radial-gradient(circle, rgba(194,22,28,.45), transparent 65%);
  filter: blur(30px);
}
.stage-rings{
  position:absolute; inset:0;
  display:grid; place-items:center; pointer-events:none;
}
.stage-rings span{
  position:absolute;
  border:1px dashed var(--line);
  border-radius:50%;
  animation: spin 40s linear infinite;
}
.stage-rings span:nth-child(1){ width:92%; height:92%; border-color:#2a2a2a }
.stage-rings span:nth-child(2){ width:70%; height:70%; border-color:#1f1f1f; animation-duration:60s; animation-direction:reverse }
.stage-rings span:nth-child(3){ width:50%; height:50%; border-color:#2a2a2a; animation-duration:80s }
@keyframes spin{ to{ transform:rotate(360deg) } }

.hero-bottle{
  position:relative; z-index:2;
  max-height:90%; max-width:84%; width:auto; height:auto;
  object-fit:contain; object-position:center;
  filter: drop-shadow(0 40px 80px rgba(194,22,28,.45)) drop-shadow(0 12px 24px rgba(0,0,0,.75));
}

.stage-tick{
  position:absolute; z-index:3;
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink-3); line-height:1;
  padding:6px 8px;
  border:1px solid var(--line);
  background:rgba(10,10,10,.6); backdrop-filter: blur(4px);
}
.stage-tick span:first-child{color:var(--ink); font-family:var(--f-display); font-size:18px}
.stage-tick.tl{ top:8%; left:0 }
.stage-tick.tr{ top:14%; right:0 }
.stage-tick.bl{ bottom:14%; left:4% }
.stage-tick.br{ bottom:8%; right:2% }

.hero-chip{
  position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  background:#000; border:1px solid var(--red-2);
  padding:12px 20px;
  display:flex; gap:18px; align-items:center; white-space:nowrap;
  z-index:5;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chip-num{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--red-3) }
.chip-name{ font-family:var(--f-display); font-size:22px; letter-spacing:.02em }
.chip-sub{ font-family:var(--f-mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em }

.hero-footer{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:72px auto 0;
  display:grid; grid-template-columns: auto 1fr auto;
  gap:24px; align-items:center;
  padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3);
}
.hero-footer > div:first-child{display:flex; gap:8px; align-items:center}
.hero-footer-center{
  overflow:hidden; white-space:nowrap;
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

/* =========================================================
   SECTION HEADS
   ========================================================= */
section{ padding: clamp(80px, 9vw, 140px) var(--pad); position:relative }
.sec-head{ max-width:var(--maxw); margin:0 auto 56px; position:relative }
.sec-num{
  display:inline-block; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.2em; color:var(--red-3); margin-bottom:14px;
}
.sec-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(56px, 9vw, 160px); line-height:.9;
  letter-spacing:-.01em; text-transform:uppercase;
}
.sec-desc{
  max-width: 54ch; margin-top:20px;
  color:var(--ink-2); font-size:16.5px; line-height:1.55;
}
.sec-desc em{ font-style:italic; color:var(--ink-3) }

/* =========================================================
   SCIENCE / FORMUL
   ========================================================= */
.science{ background:var(--bg); border-bottom:1px solid var(--line) }
.science-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr);
  border:1px solid var(--line); background:var(--panel);
}
.sci-card{
  padding:28px 26px 24px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  position:relative; background:var(--panel);
  transition: background .2s;
}
.sci-card:last-child{border-right:0}
.sci-card:hover{ background:#181818 }
.sci-card .sci-ix{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--red-3);
}
.sci-card h3{
  font-family:var(--f-display); font-weight:400;
  font-size: 30px; letter-spacing:.005em; line-height:1;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.sci-card p{ color:var(--ink-2); font-size:14.5px; line-height:1.55 }
.sci-meta{
  margin-top:auto; display:flex; justify-content:space-between; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-3);
  padding-top:12px; border-top:1px solid var(--line);
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{ background:var(--bg) }
.product-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.prod{
  background:var(--bg);
  display:flex; flex-direction:column;
  position:relative;
  transition: background .2s;
  min-height: 500px;
}
.prod:hover{ background:#0e0e0e }
.prod.featured{
  outline: 1px solid var(--red-2);
  outline-offset: -1px;
}
.prod.featured .prod-tag{ background:var(--red); color:#fff; border-color:var(--red) }

.prod-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  border-bottom:1px solid var(--line);
}
.prod-ix{ color:var(--ink-3) }
.prod-tag{
  color:var(--red-3);
  padding:3px 7px; border:1px solid var(--red-2);
  background:rgba(194,22,28,.08);
}
.prod-img{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
  display:grid; place-items:center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 60%, rgba(194,22,28,.22), transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 12px),
    #0a0a0a;
  border-bottom:1px solid var(--line);
}
.prod-img img{
  max-height: 100%; max-width: 100%;
  width:auto; height:auto;
  object-fit:contain; object-position:center;
  filter: drop-shadow(0 24px 44px rgba(194,22,28,.35)) drop-shadow(0 8px 16px rgba(0,0,0,.7));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.prod:hover .prod-img img{ transform: scale(1.05) translateY(-3px) }

.prod-body{ padding:18px; display:flex; flex-direction:column; gap:10px }
.prod-body h3{
  font-family:var(--f-display); font-weight:400;
  font-size: 28px; line-height:.95; letter-spacing:.005em;
  text-transform:uppercase;
}
.prod-sub{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em;
  color:var(--ink-3); line-height:1.5;
}
.prod-foot{
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.prod-dose{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3) }
.prod-price{ font-family:var(--f-display); font-size:22px; color:var(--ink) }

/* =========================================================
   BIG MARQUEE
   ========================================================= */
.big-marquee{
  overflow:hidden; background:#0a0a0a;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 28px 0;
}
.bm-track{
  display:inline-flex; gap:38px; align-items:center;
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(52px, 9vw, 140px); line-height:1;
  white-space:nowrap; color:var(--ink);
  animation: marquee 38s linear infinite;
  letter-spacing:.01em;
}
.bm-dot{color:var(--red)}

/* =========================================================
   LAB
   ========================================================= */
.lab{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.lab-board{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.5fr 1fr; gap:24px;
}
.lab-sheet{
  background:#ede6d6; color:#1a1a1a;
  padding:28px; border:1px solid #2a2a2a;
  font-family:var(--f-mono);
  position:relative;
  box-shadow: 10px 10px 0 #000;
}
.lab-sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(0,0,0,.04) 26px 27px);
}
.sheet-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:14px; border-bottom:2px solid #1a1a1a;
  margin-bottom:14px;
}
.sh-l{ font-weight:700; font-size:13px; letter-spacing:.12em }
.sh-s{ font-size:10.5px; letter-spacing:.12em; color:#4a4a4a; margin-top:4px }
.sh-stamp{
  border:2px solid #8b0000; color:#8b0000;
  padding:6px 14px; transform: rotate(-4deg); text-align:center;
  font-weight:700;
}
.sh-stamp > div:first-child{ font-size:18px; letter-spacing:.18em }
.sh-stamp-s{ font-size:9.5px; letter-spacing:.14em }

.sheet-table{
  width:100%; border-collapse:collapse;
  font-size:12.5px;
}
.sheet-table th, .sheet-table td{
  text-align:left; padding:8px 6px;
  border-bottom:1px dashed rgba(0,0,0,.25);
  vertical-align: middle;
}
.sheet-table th{
  font-size:10.5px; letter-spacing:.14em;
  border-bottom:1px solid #1a1a1a;
  color:#4a4a4a;
}
.sheet-table td.ok{ color:#2a7c3d; font-weight:700; letter-spacing:.12em }
.sheet-foot{
  display:flex; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:2px solid #1a1a1a;
  font-size:10.5px; letter-spacing:.12em; color:#4a4a4a;
}

.lab-side{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-content:start;
}
.lab-badge{
  border:1px solid var(--line); background:var(--panel);
  padding:22px 18px;
  display:flex; flex-direction:column; gap:8px;
  aspect-ratio:1/1;
  transition: border-color .2s, background .2s;
}
.lab-badge:hover{ border-color: var(--red-2); background:#1a0f0f }
.lb-num{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; color:var(--red-3) }
.lb-l{ font-family:var(--f-display); font-weight:400; font-size:34px; line-height:1; letter-spacing:.01em; margin-top:auto }
.lb-s{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); line-height:1.5 }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testis{ background:var(--bg) }
.testi-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.testi{
  background:var(--bg); padding:28px;
  display:flex; flex-direction:column; gap:16px;
  min-height:320px;
}
.testi-rate{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
}
.testi-rate > span:first-child{ color:var(--red); letter-spacing:.15em; font-size:15px }
.testi-date{ color:var(--ink-3) }
.testi blockquote{
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  color:var(--ink); font-weight:300;
  flex:1;
}
.testi figcaption{
  display:flex; gap:14px; align-items:center;
  padding-top:14px; border-top:1px solid var(--line);
}
.t-ix{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-2);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em;
  flex-shrink:0;
}
.testi figcaption b{ font-family:var(--f-ui); font-weight:700; letter-spacing:.06em; font-size:14.5px; display:block }
.testi figcaption em{ font-family:var(--f-mono); font-style:normal; font-size:11px; letter-spacing:.08em; color:var(--ink-3); display:block; margin-top:2px }

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  background: var(--bg-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.about-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap:64px;
  align-items:flex-start;
}
.about-left .sec-num{ color:var(--red-3) }
.about-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(56px, 8vw, 140px); line-height:.88;
  letter-spacing:-.005em; text-transform:uppercase;
  margin-top:14px;
}
.about-right p{
  color:var(--ink-2); font-size:16px; line-height:1.7;
  margin-bottom:16px;
}
.about-right p.about-lede{
  color:var(--ink); font-size:19px; line-height:1.55; font-weight:300;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.about-right b{ color:var(--ink); font-weight:600 }

.about-facts{
  margin-top:28px; display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border:1px solid var(--line);
}
.fact{
  padding:18px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.fact:last-child{ border-right:0 }
.fact-n{ font-family:var(--f-display); font-size:32px; line-height:1; letter-spacing:.01em }
.fact-l{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); line-height:1.3 }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background:
    radial-gradient(circle at 20% 60%, rgba(194,22,28,.35), transparent 50%),
    #0a0a0a;
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 12px);
}
.cta-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:56px;
  align-items:flex-start;
}
.cta-eyebrow{
  display:inline-flex; gap:10px; align-items:center;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em; font-size:12px;
  color:var(--ink-2); margin-bottom:14px;
}
.cta-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(64px, 10vw, 180px); line-height:.85;
  text-transform:uppercase; letter-spacing:-.005em;
}
.cta-title .outline{
  color:transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.cta-left p{ margin-top:22px; color:var(--ink-2); max-width:48ch; font-size:16px; line-height:1.6 }

.cta-right{ display:flex; flex-direction:column; gap:12px }
.cta-card{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap:20px;
  padding:22px 24px;
  border:1px solid var(--line); background:rgba(10,10,10,.7);
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.cta-card:hover{ background:#141414; border-color:var(--red-2); transform: translate(-2px, -2px) }
.ccard-l{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3) }
.ccard-v{ font-family:var(--f-display); font-size:26px; letter-spacing:.005em }
.ccard-arr{ font-family:var(--f-mono); color:var(--ink-2) }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background:#050505;
  padding: 80px var(--pad) 28px;
  border-top:1px solid var(--line);
}
.foot-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:32px; border-bottom:1px solid var(--line);
}
.foot-brand p{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-top:16px }
.foot-col h4{
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em; font-size:12px;
  color:var(--ink-3); margin-bottom:14px;
}
.foot-col a, .foot-col p{
  display:block; color:var(--ink-2); font-size:14px; line-height:1.8;
}
.foot-col a:hover{ color:var(--ink) }
.foot-bottom{
  max-width:var(--maxw); margin:18px auto 0;
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3);
}
.foot-mono{ color:var(--ink-3) }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .nav-links{ display:none }
  .nav{ grid-template-columns: auto 1fr auto; gap:14px }
  .nav-burger{ display:flex }

  .hero-inner{ grid-template-columns: 1fr; gap:40px; padding-top:40px }
  .hero-right{ max-width:480px; margin:0 auto; width:100%; aspect-ratio:4/5 }
  .hero-meta.top-right{ display:none }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); max-width:none }
  .stat{ padding:16px 0 }
  .stat:nth-child(2){ border-right:0 }
  .stat:nth-child(3){ padding-left:0; border-top:1px solid var(--line) }
  .stat:nth-child(4){ border-top:1px solid var(--line); padding-left:14px }

  .science-grid{ grid-template-columns: repeat(2, 1fr) }
  .sci-card:nth-child(2){ border-right:0 }
  .sci-card:nth-child(1), .sci-card:nth-child(2){ border-bottom:1px solid var(--line) }

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

  .lab-board{ grid-template-columns: 1fr }
  .testi-grid{ grid-template-columns: 1fr }
  .about-grid{ grid-template-columns: 1fr; gap:32px }
  .cta-inner{ grid-template-columns: 1fr; gap:36px }
  .foot-grid{ grid-template-columns: 1fr 1fr; gap:24px }
}

@media (max-width: 680px){
  .strip{ font-size:10.5px }
  .nav-cta span:first-child{ display:none }
  .nav-cta{ padding:10px 14px }
  .hero{ padding-top:28px }
  .hero-meta.top-left{ position:relative; left:auto; top:auto; margin-bottom:20px }
  .hero-eyebrow{ font-size:10.5px }
  .hero-lede{ font-size:15.5px }
  .hero-chip{ padding:10px 14px; gap:10px; flex-wrap:wrap; max-width:90%; white-space:normal; justify-content:center }
  .chip-name{ font-size:16px }
  .chip-sub{ font-size:9px }

  .science-grid{ grid-template-columns: 1fr }
  .sci-card{ border-right:0; border-bottom:1px solid var(--line) }
  .sci-card:last-child{ border-bottom:0 }

  .product-grid{ grid-template-columns: 1fr }
  .prod{ min-height:420px }

  .testi{ min-height:auto; padding:22px }
  .about-right p.about-lede{ font-size:16.5px }
  .about-facts{ grid-template-columns: 1fr }
  .fact{ border-right:0; border-bottom:1px solid var(--line) }
  .fact:last-child{ border-bottom:0 }

  .foot-grid{ grid-template-columns: 1fr; gap:28px }
  .foot-bottom{ flex-direction:column; gap:8px }

  .sheet-table{ font-size:11px }
  .sheet-table th:nth-child(2), .sheet-table td:nth-child(2){ display:none }
}

/* =========================================================
   E-COMMERCE — LAUNCH BADGE / DUAL PRICE / ADD-TO-CART
   ========================================================= */
.launch-badge{
  position:absolute; top:10px; left:10px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  background:var(--red); color:#fff;
  font-family:var(--f-ui); font-weight:800; letter-spacing:.16em; font-size:10.5px;
  text-transform:uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 6px 18px rgba(194,22,28,.35);
}
.launch-badge::before{
  content:""; width:6px; height:6px; background:#fff; transform:rotate(45deg);
}
.launch-badge .pct{ font-family:var(--f-mono); letter-spacing:.06em }

.price-stack{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; line-height:1 }
.price-stack .price-old{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px;
}
.price-stack .price-now{
  font-family:var(--f-display); font-size:24px; color:var(--red-3);
  letter-spacing:.005em;
}
.price-stack .price-tag{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; color:var(--ink-3);
  margin-top:2px;
}
.prod-lg .price-stack .price-now{ font-size:32px }

.prod-foot{ flex-wrap:wrap; row-gap:10px }
.prod-actions{
  width:100%; padding-top:12px; border-top:1px solid var(--line);
  display:flex; gap:8px;
}
.btn-add, .btn-detail{
  flex:1;
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  padding:12px 14px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.14em; font-size:11.5px;
  text-transform:uppercase;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  border:1px solid transparent;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor:pointer;
}
.btn-add{ background:var(--red); color:#fff }
.btn-add:hover{ background:#e11920; transform:translate(-1px,-1px) }
.btn-add.added{ background:var(--pass); color:#000 }
.btn-detail{ background:transparent; color:var(--ink-2); border-color:var(--line) }
.btn-detail:hover{ color:var(--ink); border-color:var(--ink-2); background:rgba(255,255,255,.03) }
.btn-add .btn-arrow, .btn-detail .btn-arrow{ font-family:var(--f-mono); transition:transform .2s }
.btn-add:hover .btn-arrow, .btn-detail:hover .btn-arrow{ transform:translateX(3px) }

/* Flavor selector chips */
.flavor-pick{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:6px;
}
.flavor-chip{
  padding:5px 10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-3); border:1px solid var(--line);
  background:transparent; cursor:pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.flavor-chip:hover{ color:var(--ink); border-color:var(--ink-3) }
.flavor-chip.active{
  color:#fff; background:var(--red-2); border-color:var(--red);
}

/* =========================================================
   NAV — cart badge
   ========================================================= */
.nav{ grid-template-columns: auto 1fr auto auto auto }
.nav-cart{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px;
  border:1px solid var(--line);
  font-family:var(--f-ui); font-weight:700; letter-spacing:.14em; font-size:12px;
  color:var(--ink-2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color .15s, border-color .15s, background .15s;
}
.nav-cart:hover{ color:var(--ink); border-color:var(--ink-3); background:rgba(255,255,255,.03) }
.nav-cart .cart-count{
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding:0 6px;
  background:var(--red); color:#fff;
  font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.04em;
}
.nav-cart.has-items{ color:var(--ink); border-color:var(--red-2) }

/* =========================================================
   TOAST
   ========================================================= */
.toast-host{
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.toast{
  display:flex; gap:14px; align-items:center;
  padding:14px 18px;
  background:#0e0e0e; border:1px solid var(--red-2);
  color:var(--ink);
  font-family:var(--f-ui); font-weight:600; letter-spacing:.08em; font-size:13px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(194,22,28,.15);
  transform: translateX(20px); opacity:0;
  animation: toast-in .25s cubic-bezier(.2,.8,.2,1) forwards, toast-out .35s ease 2.6s forwards;
  pointer-events:auto;
}
.toast .tx-mark{
  width:10px; height:10px; background:var(--pass); transform:rotate(45deg);
  flex-shrink:0;
}
.toast .tx-sub{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); margin-left:4px }
@keyframes toast-in { to{ transform: translateX(0); opacity:1 } }
@keyframes toast-out { to{ transform: translateX(20px); opacity:0 } }

/* =========================================================
   PRODUCT DETAIL PAGE — /urun/<slug>.html
   ========================================================= */
.detail{
  position:relative;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(40px, 5vw, 64px);
  border-bottom:1px solid var(--line);
}
.detail-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.05fr 1fr; gap:48px;
  align-items:center;
}

.detail-stage{
  position:relative; aspect-ratio: 1/1;
  background:
    radial-gradient(circle at 50% 50%, rgba(194,22,28,.22), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px),
    #0a0a0a;
  border:1px solid var(--line);
  display:grid; place-items:center;
  overflow:hidden;
}
.detail-stage{ padding: clamp(20px, 4vw, 56px) }
.detail-stage img{
  max-height:100%; max-width:100%; width:auto; height:auto;
  object-fit:contain; object-position:center;
  filter: drop-shadow(0 30px 60px rgba(194,22,28,.4)) drop-shadow(0 12px 24px rgba(0,0,0,.7));
  transition: opacity .25s;
  position:relative; z-index:2;
}
.detail-stage .stage-rings{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.detail-stage .stage-rings span:nth-child(1){ width:88%; height:88% }
.detail-stage .stage-rings span:nth-child(2){ width:64%; height:64% }
.detail-stage .stage-rings span:nth-child(3){ width:42%; height:42% }
.detail-tick{
  position:absolute; padding:6px 10px;
  border:1px solid var(--line); background:rgba(10,10,10,.7); backdrop-filter:blur(4px);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3);
}
.detail-tick.tl{ top:14px; left:14px }
.detail-tick.tr{ top:14px; right:14px }
.detail-tick.bl{ bottom:14px; left:14px }
.detail-tick.br{ bottom:14px; right:14px }

.detail-side .detail-eyebrow{
  display:flex; gap:14px; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--ink-3);
  margin-bottom:18px;
}
.detail-side .detail-eyebrow .num{ color:var(--red-3) }
.detail-side h1{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(48px, 7vw, 96px); line-height:.92;
  letter-spacing:.005em; text-transform:uppercase;
}
.detail-tagline{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.08em;
  color:var(--ink-2); margin-top:14px; line-height:1.6;
}

.detail-pricerow{
  margin-top:26px; padding:18px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.detail-pricerow .price-stack{ align-items:flex-start }
.detail-pricerow .price-stack .price-now{ font-size:42px }
.detail-pricerow .launch-static{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  background:var(--red); color:#fff;
  font-family:var(--f-ui); font-weight:800; letter-spacing:.18em; font-size:11.5px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.detail-buy{ margin-top:22px; display:flex; gap:12px; align-items:stretch; flex-wrap:wrap }
.qty{
  display:inline-flex; align-items:stretch; border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.qty button{
  width:42px; font-family:var(--f-display); font-size:22px; color:var(--ink);
  cursor:pointer; transition: background .15s;
}
.qty button:hover{ background:rgba(255,255,255,.04) }
.qty input{
  width:54px; text-align:center; background:transparent; color:var(--ink);
  border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-family:var(--f-display); font-size:22px;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.detail-buy .btn-buy{
  flex:1; min-width:240px;
  display:inline-flex; gap:12px; align-items:center; justify-content:center;
  padding:14px 22px;
  background:var(--red); color:#fff;
  font-family:var(--f-ui); font-weight:800; letter-spacing:.16em; font-size:13.5px;
  text-transform:uppercase;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background .15s, transform .15s;
  cursor:pointer;
}
.detail-buy .btn-buy:hover{ background:#e11920; transform: translate(-1px,-1px) }
.detail-buy .btn-buy.added{ background:var(--pass); color:#000 }

.detail-flavor{ margin-top:18px }
.detail-flavor .lbl{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3); margin-bottom:8px;
}

.detail-meta{
  margin-top:24px; display:grid; grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--line);
}
.detail-meta .dm{
  padding:14px 0 0; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px; padding-right:14px;
}
.detail-meta .dm:not(:first-child){ padding-left:14px }
.detail-meta .dm:last-child{ border-right:0 }
.dm-l{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--ink-3) }
.dm-v{ font-family:var(--f-display); font-size:22px; color:var(--ink); line-height:1 }

/* Detail content blocks */
.detail-blocks{
  max-width:var(--maxw); margin:0 auto;
  padding: clamp(60px, 7vw, 100px) var(--pad);
  display:grid; grid-template-columns: 1fr 1fr; gap:64px;
  border-bottom:1px solid var(--line);
}
.detail-block{ display:flex; flex-direction:column; gap:14px }
.detail-block h2{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(32px, 4vw, 56px); line-height:.95;
  text-transform:uppercase; letter-spacing:.005em;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.detail-block h2 .num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  color:var(--red-3); margin-right:14px; vertical-align:middle;
}
.detail-block p{ color:var(--ink-2); font-size:16px; line-height:1.7 }
.detail-block p + p{ margin-top:10px }
.detail-block b{ color:var(--ink); font-weight:600 }
.detail-block ul{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:6px }
.detail-block ul li{
  display:flex; gap:12px; align-items:flex-start;
  color:var(--ink-2); font-size:15px; line-height:1.55;
}
.detail-block ul li::before{
  content:""; width:8px; height:8px; margin-top:8px;
  background:var(--red); transform:rotate(45deg); flex-shrink:0;
}

/* Ingredient table */
.ingredients{
  max-width:var(--maxw); margin:0 auto;
  padding: clamp(60px, 7vw, 100px) var(--pad);
  border-bottom:1px solid var(--line);
}
.ingredients .sec-head{ margin-bottom:32px }
.ing-table{
  width:100%; border-collapse:collapse;
  background:var(--panel); border:1px solid var(--line);
  font-family:var(--f-mono); font-size:13px;
}
.ing-table thead th{
  text-align:left; padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.18em; color:var(--red-3);
  text-transform:uppercase;
}
.ing-table tbody td{
  padding:14px 18px;
  border-bottom:1px dashed var(--line);
  color:var(--ink-2);
}
.ing-table tbody tr:last-child td{ border-bottom:0 }
.ing-table tbody td:first-child{ color:var(--ink); font-weight:500 }
.ing-table tbody td:nth-child(2),
.ing-table tbody td:nth-child(3){ text-align:right; white-space:nowrap }
.ing-foot{
  margin-top:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  color:var(--ink-3);
}

/* Mini lab strip on detail */
.mini-lab{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border:1px solid var(--line); background:var(--panel);
  margin-bottom: clamp(60px, 6vw, 80px);
}
.mini-lab .ml{
  padding:18px 22px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.mini-lab .ml:last-child{ border-right:0 }
.ml-l{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--red-3) }
.ml-v{ font-family:var(--f-display); font-size:22px; color:var(--ink); line-height:1 }
.ml-s{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); line-height:1.5 }

/* Related products */
.related{
  max-width:var(--maxw); margin:0 auto;
  padding: clamp(40px, 5vw, 80px) var(--pad) clamp(80px, 8vw, 120px);
}
.related .sec-head{ margin-bottom:32px }
.related-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.related-grid .prod{ min-height:380px }

/* =========================================================
   CART PAGE — /sepet.html
   ========================================================= */
.cart-page{
  max-width:var(--maxw); margin:0 auto;
  padding: clamp(60px, 7vw, 96px) var(--pad);
}
.cart-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.cart-head h1{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(56px, 8vw, 120px); line-height:.9;
  text-transform:uppercase;
}
.cart-head .cart-meta{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; color:var(--ink-3);
}

.cart-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:32px;
  align-items:flex-start;
}
.cart-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line) }
.cart-row{
  background:var(--bg);
  display:grid; grid-template-columns: 110px 1fr auto auto auto;
  gap:18px; align-items:center;
  padding:16px;
}
.cart-row .ci-img{
  width:110px; aspect-ratio:1/1;
  background:
    radial-gradient(circle at 50% 50%, rgba(194,22,28,.18), transparent 65%),
    #0a0a0a;
  border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden;
}
.cart-row .ci-img img{ max-width:80%; max-height:84%; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)) }
.cart-row .ci-info h3{
  font-family:var(--f-display); font-weight:400; font-size:24px;
  text-transform:uppercase; letter-spacing:.005em; line-height:1;
}
.cart-row .ci-info .ci-sub{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-3);
  margin-top:6px;
}
.cart-row .ci-info .ci-link{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--ink-2); margin-top:8px; display:inline-block;
}
.cart-row .ci-info .ci-link:hover{ color:var(--ink) }
.cart-row .ci-price{
  font-family:var(--f-display); font-size:22px; color:var(--red-3); white-space:nowrap;
}
.cart-row .ci-price .ci-old{
  display:block; font-family:var(--f-mono); font-size:11px;
  color:var(--ink-3); text-decoration:line-through;
}
.cart-row .ci-rm{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-3);
  font-family:var(--f-mono); font-size:14px;
  cursor:pointer; transition: color .15s, border-color .15s;
}
.cart-row .ci-rm:hover{ color:var(--red-3); border-color:var(--red-2) }

.cart-summary{
  background:var(--panel); border:1px solid var(--line);
  padding:24px;
  position:sticky; top:120px;
}
.cart-summary h2{
  font-family:var(--f-display); font-weight:400; font-size:34px;
  text-transform:uppercase; letter-spacing:.005em;
  padding-bottom:14px; border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.cart-summary .summary-title{ margin-top:22px }
.checkout-form{
  display:flex; flex-direction:column; gap:12px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.checkout-form .form-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.checkout-form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-3); text-transform:uppercase;
}
.checkout-form input,
.checkout-form textarea{
  width:100%; border:1px solid var(--line); background:#0b0b0b; color:var(--ink);
  padding:12px 13px; font-family:var(--f-ui); font-size:14px; letter-spacing:0;
  outline:none; border-radius:0; resize:vertical;
}
.checkout-form input:focus,
.checkout-form textarea:focus{ border-color:var(--red-2); box-shadow:0 0 0 1px rgba(194,22,28,.25) }
.checkout-form .field-error{ border-color:var(--red-3); background:rgba(194,22,28,.08) }
.cs-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0; font-family:var(--f-mono); font-size:13px; letter-spacing:.06em;
  color:var(--ink-2);
}
.cs-row .cs-l{ color:var(--ink-3); font-size:11px; letter-spacing:.16em; text-transform:uppercase }
.cs-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:18px }
.cs-row.total .cs-l{ color:var(--ink); font-size:13px; font-weight:700 }
.cs-row.total .cs-v{ font-family:var(--f-display); font-size:30px; color:var(--ink) }
.cs-saving{
  margin-top:8px; padding:10px 12px;
  background:rgba(194,22,28,.1); border:1px dashed var(--red-2);
  color:var(--red-3); font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-align:center;
}
.cs-checkout{
  margin-top:18px; width:100%;
  display:inline-flex; justify-content:center; align-items:center; gap:10px;
  padding:16px 22px;
  background:#1a1a1a; color:var(--ink-3); border:1px solid var(--line);
  font-family:var(--f-ui); font-weight:800; letter-spacing:.16em; font-size:13px;
  text-transform:uppercase;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  cursor:not-allowed;
  pointer-events:none;
  position:relative;
}
.cs-checkout:not(:disabled){
  background:var(--red); color:#fff; border-color:var(--red-2);
  cursor:pointer; pointer-events:auto;
}
.cs-checkout:not(:disabled):hover{ background:#e11920 }
.cs-note{
  margin-top:14px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--ink-3); line-height:1.6;
}

.cart-empty{
  padding:60px 20px; text-align:center;
  border:1px dashed var(--line);
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.cart-empty h2{
  font-family:var(--f-display); font-weight:400; font-size:48px;
  text-transform:uppercase;
}
.cart-empty p{ color:var(--ink-2); max-width:42ch }
.cart-empty .btn{ margin-top:8px }

/* =========================================================
   ADMIN
   ========================================================= */
.admin-page{
  max-width:var(--maxw); margin:0 auto;
  padding: clamp(60px, 7vw, 96px) var(--pad);
}
.admin-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:32px;
}
.admin-head h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(56px, 8vw, 120px); line-height:.9;
}
.admin-head p{ color:var(--ink-2); max-width:48ch }
.admin-login,
.admin-panel{
  background:var(--panel); border:1px solid var(--line); padding:24px;
}
.admin-login{ max-width:420px }
.admin-login h2,
.admin-panel h2{
  font-family:var(--f-display); font-weight:400; font-size:34px;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.admin-login form,
.admin-panel{
  display:flex; flex-direction:column; gap:14px;
}
.admin-login label,
.admin-panel label{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-3); text-transform:uppercase;
}
.admin-login input,
.admin-panel input,
.admin-panel select{
  width:100%; border:1px solid var(--line); background:#0b0b0b; color:var(--ink);
  padding:12px 13px; font-family:var(--f-ui); font-size:14px; letter-spacing:0;
}
.admin-shell{ display:flex; flex-direction:column; gap:24px }
.admin-tabs{ display:flex; gap:8px; flex-wrap:wrap }
.admin-tab{
  border:1px solid var(--line); color:var(--ink-2); background:#0b0b0b;
  padding:12px 16px; font-family:var(--f-ui); font-weight:800; letter-spacing:.12em;
  cursor:pointer;
}
.admin-tab.active{ background:var(--red); border-color:var(--red-2); color:#fff }
.admin-toolbar{ display:flex; gap:12px; flex-wrap:wrap }
.admin-toolbar .cs-checkout{ width:auto; margin-top:0; pointer-events:auto; cursor:pointer; background:var(--red); color:#fff }
.admin-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:24px; align-items:start }
.admin-save{ width:100%; pointer-events:auto; cursor:pointer; background:var(--red); color:#fff }
.checkline{ flex-direction:row !important; align-items:center; gap:10px !important; text-transform:none !important; letter-spacing:.04em !important }
.checkline input{ width:auto }
.product-admin-row{
  display:grid; gap:12px; align-items:center;
  border-bottom:1px solid var(--line); padding:14px 0;
}
.product-admin-row{ grid-template-columns:1.3fr .55fr .55fr .4fr }
.product-admin-row:last-child{ border-bottom:0 }
.product-admin-row strong,
.order-card strong{ display:block; color:var(--ink); font-family:var(--f-display); font-weight:400; font-size:24px; text-transform:uppercase }
.product-admin-row span,
.order-card span,
.order-card small,
.admin-muted{ color:var(--ink-3); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; line-height:1.5 }
.orders-list{ display:flex; flex-direction:column; gap:16px }
.order-card{ border:1px solid var(--line); background:#0b0b0b; padding:18px; display:flex; flex-direction:column; gap:16px }
.order-card-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:14px }
.order-card a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); text-underline-offset:3px }
.copy-btn{
  border:1px solid var(--line); background:#111; color:var(--ink-2);
  padding:9px 10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  cursor:pointer; white-space:nowrap;
}
.copy-btn:hover{ color:var(--ink); border-color:var(--red-2) }
.status-stack{ display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.status-stack b{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; padding:6px 8px; border:1px solid var(--line); color:var(--ink-2) }
.status-stack .ok{ color:#0b0b0b; background:var(--pass); border-color:var(--pass) }
.status-stack .bad{ color:#fff; background:var(--red); border-color:var(--red-2) }
.status-stack .wait{ color:var(--gold); border-color:rgba(201,169,97,.45) }
.order-detail-grid{ display:grid; grid-template-columns:.8fr 1.15fr 1fr; gap:16px }
.order-detail-grid section{ border:1px solid var(--line); padding:14px; background:rgba(255,255,255,.015) }
.order-detail-grid h3{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--red-3); margin-bottom:8px }
.order-detail-grid p{ color:var(--ink-2); font-size:13px; line-height:1.55; margin-top:4px }
.order-detail-grid .big{ color:var(--ink); font-size:15px; font-weight:700 }
.address-box{ border-color:rgba(194,22,28,.45) !important }
.cargo-form{ display:grid; grid-template-columns:.8fr .9fr .9fr 1fr auto; gap:10px; align-items:end }
.cargo-form label{ display:flex; flex-direction:column; gap:6px; font-family:var(--f-mono); color:var(--ink-3); font-size:10px; letter-spacing:.12em; text-transform:uppercase }
.cargo-form input,
.cargo-form select{ border:1px solid var(--line); background:#080808; color:var(--ink); padding:11px 12px; font-family:var(--f-ui); font-size:14px }
.mini-save{ border:1px solid var(--red-2); background:var(--red); color:#fff; padding:12px 14px; font-family:var(--f-ui); font-weight:800; letter-spacing:.1em; cursor:pointer; white-space:nowrap }

/* =========================================================
   RESPONSIVE — e-commerce additions
   ========================================================= */
@media (max-width: 1100px){
  .nav{ grid-template-columns: auto 1fr auto auto }
  .nav-cart .cart-label{ display:none }
  .nav-cart{ padding:10px 12px }

  .detail-grid{ grid-template-columns: 1fr; gap:32px }
  .detail-blocks{ grid-template-columns: 1fr; gap:36px }
  .related-grid{ grid-template-columns: repeat(2, 1fr) }
  .mini-lab{ grid-template-columns: repeat(2, 1fr) }
  .mini-lab .ml:nth-child(2){ border-right:0 }
  .mini-lab .ml:nth-child(1), .mini-lab .ml:nth-child(2){ border-bottom:1px solid var(--line) }

  .cart-grid{ grid-template-columns: 1fr; gap:24px }
  .cart-summary{ position:static }
}

@media (max-width: 680px){
  .nav-cart{ padding:8px 10px }
  .nav-cart .cart-count{ min-width:20px; height:20px; font-size:10.5px }

  .prod-actions{ flex-direction:column }
  .prod-actions .btn-add, .prod-actions .btn-detail{ width:100% }
  .price-stack .price-now{ font-size:21px }
  .prod{ min-height:auto }
  .prod-img{ padding:14px }
  .prod-body{ padding:16px }
  .prod-body h3{ font-size:24px }

  .related-grid{ grid-template-columns: 1fr }
  .mini-lab{ grid-template-columns: 1fr }
  .mini-lab .ml{ border-right:0; border-bottom:1px solid var(--line) }
  .mini-lab .ml:last-child{ border-bottom:0 }

  /* Detail page mobile */
  .detail-pricerow{ flex-direction:column; align-items:flex-start; gap:14px }
  .detail-pricerow .price-stack .price-now{ font-size:36px }
  .detail-buy{ flex-direction:column; gap:10px }
  .detail-buy .btn-buy{ min-width:0; width:100% }
  .qty{ width:fit-content }
  .detail-meta{ grid-template-columns: 1fr; border-top:0 }
  .detail-meta .dm{
    border-right:0; border-top:1px solid var(--line);
    padding:10px 0; flex-direction:row; align-items:center; justify-content:space-between;
  }
  .detail-meta .dm:not(:first-child){ padding-left:0 }
  .dm-l{ font-size:11px }
  .dm-v{ font-size:18px }
  .detail-block h2{ font-size:30px }
  .ing-table{ font-size:11px }
  .ing-table thead th, .ing-table tbody td{ padding:10px 12px }

  /* Cart page mobile — areas grid */
  .cart-row{
    grid-template-columns: 76px 1fr auto;
    grid-template-areas:
      "img  info  rm"
      "img  price price";
    gap:10px 14px;
    padding:14px;
  }
  .cart-row .ci-img{ grid-area:img; width:76px }
  .cart-row .ci-info{ grid-area:info; min-width:0 }
  .cart-row .ci-info h3{ font-size:18px; word-break:break-word }
  .cart-row .ci-price{ grid-area:price; text-align:right; font-size:20px }
  .cart-row .ci-rm{ grid-area:rm; width:32px; height:32px; align-self:flex-start }
  .qty button{ width:34px; font-size:18px }
  .qty input{ width:40px; font-size:18px }

  .cart-summary{ padding:18px }
  .cart-summary h2{ font-size:28px }
  .cart-head h1{ font-size:64px }
  .checkout-form .form-pair{ grid-template-columns:1fr }
  .admin-grid,
  .product-admin-row,
  .order-detail-grid,
  .cargo-form{ grid-template-columns:1fr }
  .admin-login,
  .admin-panel{ padding:18px }
  .admin-toolbar .cs-checkout{ width:100% }
  .admin-tabs{ position:sticky; top:74px; z-index:20; background:var(--bg); padding:8px 0 }
  .admin-tab{ flex:1; min-width:150px; font-size:12px }
  .order-card{ padding:14px; gap:14px }
  .order-card-head{ flex-direction:column }
  .status-stack{ align-items:flex-start }
  .copy-btn,
  .mini-save{ width:100%; white-space:normal }

  .toast-host{ left:12px; right:12px; bottom:12px }
  .toast{ font-size:12px }

  /* Hero mobile */
  .hero-right{ aspect-ratio:1/1.05; max-width:380px }
  .hero-stage{ padding:12px }
  .stage-tick{ font-size:9px; padding:5px 7px }
  .stage-tick span:first-child{ font-size:14px }
  .hero-meta.top-left{ font-size:9.5px }
  .hero-meta.top-left .kbd{ display:none }
  .hero-chip{ bottom:-22px }

  /* Section title sizes */
  .sec-title{ font-size:48px; line-height:.95 }
  .about-title{ font-size:48px }

  /* CTA */
  .cta-title{ font-size:64px }
}