/* Acvoria Site — ortak stil (TASK-WEB-001 · architecture/65 · 71)
 * Bütün sektör aileleri bu dosyayı paylaşır; aile kimliği yalnız CSS değişkenleri ve
 * families/<anahtar>.css içindeki küçük bileşen farklarıyla verilir.
 * ⛔ Yalnız transform/opacity canlandırılır; döngüler ekran dışında ve "hareketi azalt"ta durur. */

/* ── 0. Değişken sözleşmesi (aileler hepsini tanımlar) ───────────────────────────── */
:root{
  --bg:#0B1020; --surface:#121A2E; --surface-2:#18223A; --surface-solid:#121A2E;
  --text:#EEF2FF; --text-muted:#A9B4CF; --accent:#7C8CFF; --accent-text:#9AA6FF;
  --btn-1:#6366F1; --btn-2:#8B5CF6; --on-btn:#FFFFFF;
  --g1:#6366F1; --g2:#06B6D4; --g3:#A855F7;
  --gt1:#A5B4FC; --gt2:#67E8F9; --gt3:#E9D5FF;
  --line:color-mix(in oklab, var(--text) 10%, transparent);
  --grid-line:rgb(255 255 255 / .06); --grid-major:rgb(255 255 255 / .12);
  --shadow:#000;
  --r-card:20px; --r-media:14px; --r-btn:12px;
  --font-display:system-ui, sans-serif; --font-body:system-ui, sans-serif; --font-mono:ui-monospace, monospace;
  --display-weight:700; --display-tracking:-0.03em; --display-transform:none; --display-stretch:100%;
  --ease-std:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:150ms; --t-frame:350ms; --t-max:400ms;
  --container:1200px; --gutter:clamp(16px, 4vw, 32px);
  --section-y:clamp(72px, 10vw, 136px);
  --grain:.05;
  color-scheme: dark;
}

/* ── 1. Temel ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 clamp(16px, .25vw + 15px, 18px)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking); line-height:1.05; text-transform:var(--display-transform);
  font-stretch:var(--display-stretch); text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
.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; }
.skip{ position:absolute; left:16px; top:-80px; z-index:100; padding:10px 16px; border-radius:10px;
  background:var(--btn-1); color:var(--on-btn); font-weight:600; transition:top var(--t-fast); }
.skip:focus{ top:12px; }
.container{ width:min(100% - 2*var(--gutter), var(--container)); margin-inline:auto; }
.section{ position:relative; padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px, 6vw, 88px); }
.surface-band{ background:var(--surface); }

/* Tipografi ölçeği */
.eyebrow{ display:inline-flex; align-items:center; gap:.6em; font:600 .78rem/1 var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.8; }
.display-xl{ font-size:clamp(2.6rem, 6.4vw, 5.6rem); }
.display-l{ font-size:clamp(2.1rem, 4.4vw, 3.8rem); }
.display-m{ font-size:clamp(1.6rem, 2.6vw, 2.4rem); }
.lead{ font-size:clamp(1.05rem, .6vw + .9rem, 1.3rem); color:var(--text-muted); max-width:62ch; }
.muted{ color:var(--text-muted); }
.section-head{ display:grid; gap:18px; max-width:760px; margin-bottom:clamp(36px, 5vw, 64px); }
.section-head--center{ margin-inline:auto; text-align:center; justify-items:center; }
.section-head--split{ max-width:none; grid-template-columns:1.1fr .9fr; align-items:end; gap:32px; }
@media (max-width:860px){ .section-head--split{ grid-template-columns:1fr; } }

/* ── 2. Düğmeler ────────────────────────────────────────────────────────────────── */
.btn{ --pad-y:14px; --pad-x:22px; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:var(--pad-y) var(--pad-x); border-radius:var(--r-btn); font:600 1rem/1 var(--font-body);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-frame) var(--ease-out), background-color var(--t-fast); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn--primary{ color:var(--on-btn); background:linear-gradient(135deg, var(--btn-1), var(--btn-2));
  box-shadow:0 10px 30px -10px color-mix(in oklab, var(--btn-1) 70%, transparent),
             inset 0 1px 0 color-mix(in oklab, #fff 28%, transparent); }
.btn--primary:hover{ transform:translateY(-2px);
  box-shadow:0 18px 40px -12px color-mix(in oklab, var(--btn-1) 80%, transparent),
             inset 0 1px 0 color-mix(in oklab, #fff 32%, transparent); }
.btn--ghost{ color:var(--text); background:color-mix(in oklab, var(--text) 6%, transparent); border-color:var(--line); }
.btn--ghost:hover{ background:color-mix(in oklab, var(--text) 10%, transparent); transform:translateY(-1px); }
.btn--sm{ --pad-y:10px; --pad-x:16px; font-size:.92rem; }
.btn .arrow{ transition:transform var(--t-fast) var(--ease-out); }
.btn:hover .arrow{ transform:translateX(3px); }

/* ── 3. Gezinme (kaydırınca daralan cam şerit) ──────────────────────────────────── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; padding-block:14px; transition:padding var(--t-frame) var(--ease-std); }
main{ padding-top:84px; }
main > .hero:first-child{ margin-top:-84px; padding-top:calc(84px + clamp(40px, 7vw, 96px)); }
.nav__inner{ display:flex; align-items:center; gap:24px; padding:10px 12px 10px 18px; border-radius:calc(var(--r-card) + 4px);
  border:1px solid transparent; transition:background-color var(--t-frame), border-color var(--t-frame), box-shadow var(--t-frame); }
.nav.is-stuck .nav__inner{ background:color-mix(in oklab, var(--bg) 72%, transparent); border-color:var(--line);
  box-shadow:0 12px 32px -18px color-mix(in oklab, var(--shadow) 70%, transparent); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .nav.is-stuck .nav__inner{ -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); }
}
.brand{ display:flex; align-items:center; gap:12px; font:700 1.08rem/1.1 var(--font-display); letter-spacing:-.01em; text-transform:none; }
.brand__logo{ width:38px; height:38px; border-radius:10px; object-fit:contain; background:color-mix(in oklab, var(--text) 6%, transparent); }
.brand__mark{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; font:800 .95rem/1 var(--font-display);
  color:var(--on-btn); background:linear-gradient(135deg, var(--btn-1), var(--btn-2)); }
.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{ padding:9px 14px; border-radius:10px; color:var(--text-muted); font-weight:500; font-size:.96rem; transition:color var(--t-fast), background-color var(--t-fast); }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--text); background:color-mix(in oklab, var(--text) 7%, transparent); }
.nav__cta{ margin-left:8px; }
.nav__toggle{ display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer; }
.nav__toggle svg{ width:22px; height:22px; margin:auto; }
@media (max-width:900px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:grid; place-items:center; }
  .nav.is-open .nav__links{ display:flex; position:absolute; left:var(--gutter); right:var(--gutter); top:calc(100% - 4px);
    flex-direction:column; padding:10px; border-radius:var(--r-card); background:var(--surface-solid); border:1px solid var(--line);
    box-shadow:0 30px 60px -30px var(--shadow); }
  .nav.is-open .nav__links a{ padding:14px 16px; font-size:1.05rem; }
}

/* ── 4. Efekt kütüphanesi ───────────────────────────────────────────────────────── */
[data-inview="false"] .fx-loop, .fx-paused .fx-loop, .fx-paused .fx-marquee__track{ animation-play-state:paused !important; }

/* E1 Aurora — bulanıklık filtresi YOK; radyal gradyanlar transform ile süzülür */
.fx-aurora{ position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.fx-aurora span{ position:absolute; width:62vmax; height:62vmax; border-radius:50%; opacity:var(--aurora-opacity,.5);
  will-change:transform; mix-blend-mode:var(--aurora-blend, screen); animation:aurora-drift 30s var(--ease-std) infinite alternate; }
.fx-aurora span:nth-child(1){ background:radial-gradient(closest-side, var(--g1), transparent); top:-28vmax; left:-18vmax; }
.fx-aurora span:nth-child(2){ background:radial-gradient(closest-side, var(--g2), transparent); top:-18vmax; right:-22vmax; animation-duration:37s; animation-delay:-9s; }
.fx-aurora span:nth-child(3){ background:radial-gradient(closest-side, var(--g3), transparent); top:18vmax; left:22vmax; width:48vmax; height:48vmax; animation-duration:44s; animation-delay:-17s; }
.fx-aurora::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 10%, transparent) 0%, color-mix(in oklab, var(--bg) 35%, transparent) 55%, var(--bg) 100%); }
@keyframes aurora-drift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(6vmax,4vmax,0) scale(1.12); } 100%{ transform:translate3d(-4vmax,7vmax,0) scale(.94); } }

/* E2 Film grain — statik, gradyan bantlaşmasını giderir */
.fx-grain{ position:relative; isolation:isolate; }
.fx-grain::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* E3 Izgara / nokta alanı */
.fx-grid{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-size,56px) var(--grid-size,56px);
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 28%, #000 25%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 62% at 50% 28%, #000 25%, transparent 78%); }
.fx-grid--blueprint{ background-image:
  linear-gradient(to right, var(--grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
  linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:280px 280px, 280px 280px, 56px 56px, 56px 56px; }
.fx-dots{ position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(var(--grid-line) 1.3px, transparent 1.5px); background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%); }

/* E4 Cam kart */
.fx-glass{ background:color-mix(in oklab, var(--surface) 62%, transparent); border:1px solid color-mix(in oklab, var(--text) 11%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab, #fff 12%, transparent), 0 24px 48px -28px color-mix(in oklab, var(--shadow) 70%, transparent); border-radius:var(--r-card); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .fx-glass{ -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }
}
@media (prefers-reduced-transparency: reduce){ .fx-glass{ backdrop-filter:none !important; background:var(--surface-solid) !important; } }

/* E5 Dönen gradyan kenarlık */
@property --angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.fx-ring{ border:1.5px solid transparent !important;
  background:linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
             conic-gradient(from var(--angle), var(--g1), var(--g2), var(--g3), var(--g1)) border-box !important; }
.fx-ring:hover, .fx-ring:focus-within, .fx-ring--live[data-inview="true"]{ animation:ring-spin 6s linear infinite; }
@keyframes ring-spin{ to{ --angle:360deg; } }

/* E6 İmleç ışığı (yalnız fare/kalem) */
@media (hover:hover) and (pointer:fine){
  .fx-spot{ position:relative; isolation:isolate; }
  .fx-spot::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; opacity:0; pointer-events:none;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--accent) 20%, transparent), transparent 62%);
    transition:opacity var(--t-frame) var(--ease-out); }
  .fx-spot:hover::after{ opacity:1; }
}

/* E7 Gradyan başlık metni (önce düz renk, destek varsa gradyan) */
.fx-gradtext{ color:var(--accent-text); }
@supports (background-clip:text) or (-webkit-background-clip:text){
  .fx-gradtext{ background:linear-gradient(100deg, var(--gt1), var(--gt2) 50%, var(--gt3)); -webkit-background-clip:text; background-clip:text; color:transparent;
    padding-bottom:.08em; padding-right:.12em; margin-right:-.12em; }
}

/* E8 Bölüm belirişi (bir kez; JS yoksa içerik zaten görünür) */
.js .fx-reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--t-max) var(--ease-out), transform var(--t-max) var(--ease-out); transition-delay:calc(var(--i, 0) * 70ms); }
.js .fx-reveal.is-in{ opacity:1; transform:none; }

/* E9 Sonsuz kayan şerit */
.fx-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee__track{ display:flex; gap:14px; width:max-content; animation:marquee 46s linear infinite; }
.fx-marquee:hover .fx-marquee__track, .fx-marquee:focus-within .fx-marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* E10 Süzülen nesne */
.fx-float{ animation:float 9s var(--ease-std) infinite alternate; will-change:transform; }
.fx-float--slow{ animation-duration:13s; animation-delay:-4s; }
.fx-float--alt{ animation-name:float-alt; animation-duration:11s; animation-delay:-2s; }
@keyframes float{ from{ transform:translate3d(0,-6px,0) rotate(-.4deg); } to{ transform:translate3d(0,8px,0) rotate(.4deg); } }
@keyframes float-alt{ from{ transform:translate3d(-4px,6px,0); } to{ transform:translate3d(6px,-8px,0); } }

/* E12 Parlayan CTA hâlesi */
.fx-glow{ position:relative; }
.fx-glow::before{ content:""; position:absolute; inset:-14px; z-index:-1; border-radius:inherit; opacity:.55;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--btn-1) 60%, transparent), transparent); animation:pulse 3.6s var(--ease-std) infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(.92); opacity:.35; } 50%{ transform:scale(1.04); opacity:.6; } }

/* E14 Bölüm geçişleri */
.divider-angle{ position:absolute; left:0; right:0; height:clamp(40px, 6vw, 96px); background:var(--surface); pointer-events:none; }
.divider-angle--top{ top:-1px; clip-path:polygon(0 0, 100% 0, 100% 0, 0 100%); background:var(--bg); }

/* Işık süpürmesi (sanayi kıvılcımı vb.) */
.fx-sweep{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.fx-sweep::after{ content:""; position:absolute; top:-20%; bottom:-20%; width:2px; left:0;
  background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--g1) 90%, #fff), transparent);
  box-shadow:0 0 24px 6px color-mix(in oklab, var(--g1) 45%, transparent); transform:translateX(-10vw) rotate(18deg);
  animation:sweep 9s var(--ease-std) infinite; }
@keyframes sweep{ 0%,55%{ transform:translateX(-10vw) rotate(18deg); opacity:0; } 60%{ opacity:1; } 100%{ transform:translateX(110vw) rotate(18deg); opacity:0; } }

/* ── 5. Kahraman alanı ──────────────────────────────────────────────────────────── */
.hero{ position:relative; isolation:isolate; padding-top:clamp(40px, 7vw, 96px); padding-bottom:clamp(64px, 9vw, 128px); overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 72px); align-items:center; }
.hero__copy{ display:grid; gap:26px; align-content:start; }
.hero__title{ font-size:clamp(2.7rem, 6.2vw, 5.4rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:10px; color:var(--text-muted); font-size:.92rem; }
.hero__trust li{ display:flex; align-items:center; gap:8px; }
.hero__trust svg{ width:18px; height:18px; color:var(--accent-text); }
.hero__visual{ position:relative; min-height:clamp(360px, 42vw, 560px); }
.hero__visual > .stage{ position:relative; inset:auto; width:100%; height:100%; min-height:inherit; text-align:left; }
.hero--center .hero__grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.hero--center .hero__copy{ justify-items:center; max-width:980px; }
.hero--center .hero__actions, .hero--center .hero__trust{ justify-content:center; }
.hero--center .hero__visual{ width:100%; min-height:clamp(330px, 30vw, 420px); margin-top:clamp(28px, 4vw, 56px); }
.hero--center{ padding-bottom:clamp(40px, 5vw, 72px); }
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ min-height:clamp(300px, 80vw, 440px); }
}
.chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px; font-size:.86rem; font-weight:500;
  color:var(--text); background:color-mix(in oklab, var(--text) 6%, transparent); border:1px solid var(--line); width:max-content; }
.chip__dot{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--on-btn);
  background:linear-gradient(135deg, var(--btn-1), var(--btn-2)); }
.chip__dot svg{ width:13px; height:13px; }
.chip--live .chip__dot{ position:relative; }
.chip--live .chip__dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--btn-1); animation:ping 2.4s var(--ease-out) infinite; }
@keyframes ping{ from{ transform:scale(.7); opacity:.9; } to{ transform:scale(1.6); opacity:0; } }

/* Kahraman sahnesi: yüzen kartlar */
.stage{ position:absolute; inset:0; }
.stage__card{ position:absolute; padding:16px 18px; display:grid; gap:6px; min-width:180px; }
.stage__card strong{ font:700 1.5rem/1.1 var(--font-display); letter-spacing:-.02em; text-transform:none; }
.stage__card small{ color:var(--text-muted); font-size:.82rem; }
.stage__media{ position:absolute; overflow:hidden; border-radius:calc(var(--r-card) + 6px); }
.stage__media img, .stage__media svg{ width:100%; height:100%; object-fit:cover; }
.stage__icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--on-btn); background:linear-gradient(135deg, var(--btn-1), var(--btn-2)); }
.stage__icon svg{ width:22px; height:22px; }
.spark{ height:42px; width:150px; }

/* ── 6. Kategori şeridi ─────────────────────────────────────────────────────────── */
.pill{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; white-space:nowrap;
  background:color-mix(in oklab, var(--text) 5%, transparent); border:1px solid var(--line); color:var(--text); font-weight:500; }
.pill svg{ width:18px; height:18px; color:var(--accent-text); }
.pill-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
a.pill{ transition:border-color var(--t-fast), background-color var(--t-fast); }
a.pill:hover{ border-color:color-mix(in oklab, var(--accent) 50%, transparent); background:color-mix(in oklab, var(--accent) 10%, transparent); }

/* ── 7. Özellik ızgarası (bento) ────────────────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.bento > *{ grid-column:span 2; }
.bento > .is-wide{ grid-column:span 3; }
.bento > .is-hero{ grid-column:span 4; grid-row:span 2; }
@media (max-width:980px){ .bento{ grid-template-columns:repeat(2, 1fr); } .bento > *, .bento > .is-wide{ grid-column:span 1; } .bento > .is-hero{ grid-column:span 2; grid-row:auto; } }
@media (max-width:620px){ .bento{ grid-template-columns:1fr; } .bento > *, .bento > .is-wide, .bento > .is-hero{ grid-column:auto; } }
.card{ position:relative; display:grid; gap:14px; align-content:start; padding:clamp(22px, 2.4vw, 30px); border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.card__icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:var(--accent-text);
  background:color-mix(in oklab, var(--accent) 14%, transparent); border:1px solid color-mix(in oklab, var(--accent) 26%, transparent); }
.card__icon svg{ width:24px; height:24px; }
.card h3{ font-size:1.32rem; letter-spacing:-.015em; text-transform:none; font-stretch:100%; }
.card p{ color:var(--text-muted); }
.card--feature{ transition:transform var(--t-frame) var(--ease-out), border-color var(--t-frame); }
.card--feature:hover{ transform:translateY(-3px); border-color:color-mix(in oklab, var(--accent) 34%, transparent); }

/* ── 8. Ürünler ─────────────────────────────────────────────────────────────────── */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:28px; }
.toolbar .pill[aria-pressed="true"]{ background:color-mix(in oklab, var(--accent) 18%, transparent); border-color:color-mix(in oklab, var(--accent) 50%, transparent); }
.search{ margin-left:auto; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--text) 4%, transparent); min-width:min(320px, 100%); }
.search svg{ width:18px; height:18px; color:var(--text-muted); }
.search input{ flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
.products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(44%, 260px), 1fr)); gap:clamp(10px, 1.6vw, 18px); }
@media (max-width:520px){ .product__body{ padding:12px 12px 14px; } .product__name{ font-size:.98rem; } .product__price{ font-size:1.05rem; } .product__sku{ display:none; } }
.product{ position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line);
  overflow:hidden; transition:transform var(--t-frame) var(--ease-out), border-color var(--t-frame), box-shadow var(--t-frame); }
.product:hover{ transform:translateY(-4px); border-color:color-mix(in oklab, var(--accent) 36%, transparent);
  box-shadow:0 30px 60px -36px color-mix(in oklab, var(--shadow) 80%, transparent); }
.product__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); }
.product__media img, .product__media svg{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-frame) var(--ease-out); }
.product:hover .product__media img, .product:hover .product__media svg{ transform:scale(1.04); }
.product__badge{ position:absolute; left:12px; top:12px; z-index:1; padding:6px 10px; border-radius:999px; font-size:.76rem; font-weight:600;
  color:var(--text); background:color-mix(in oklab, var(--bg) 72%, transparent); border:1px solid var(--line); }
.product__body{ display:grid; gap:8px; padding:18px 18px 20px; align-content:start; }
.product__cat{ font:600 .74rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); }
.product__name{ font:650 1.12rem/1.3 var(--font-body); letter-spacing:-.01em; }
.product__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:6px; color:var(--text-muted); font-size:.9rem; }
.product__price{ font:700 1.22rem/1 var(--font-display); color:var(--text); letter-spacing:-.01em; text-transform:none; font-stretch:100%; }
.product__sku{ font:500 .8rem/1 var(--font-mono); color:var(--text-muted); }
.product__link::after{ content:""; position:absolute; inset:0; }
.empty{ padding:48px; text-align:center; color:var(--text-muted); border:1px dashed var(--line); border-radius:var(--r-card); }

/* ── 9. Hakkımızda / istatistik ─────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 88px); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.points{ display:grid; gap:14px; margin-top:26px; }
.points li{ display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; }
.points svg{ width:22px; height:22px; color:var(--accent-text); margin-top:3px; }
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2, 1fr); } }
.stat{ padding:26px 22px; border-radius:var(--r-card); border:1px solid var(--line); background:color-mix(in oklab, var(--surface) 70%, transparent); }
.stat strong{ display:block; font:800 clamp(2rem, 3.4vw, 3rem)/1 var(--font-display); letter-spacing:-.03em; text-transform:none; }
.stat span{ display:block; margin-top:10px; color:var(--text-muted); font-size:.95rem; }

/* ── 10. Çağrı bandı ────────────────────────────────────────────────────────────── */
.cta-band{ position:relative; isolation:isolate; overflow:hidden; border-radius:calc(var(--r-card) + 10px); padding:clamp(40px, 6vw, 80px);
  border:1px solid var(--line); background:var(--surface); display:grid; gap:22px; justify-items:start; }
.cta-band h2{ max-width:18ch; }
.cta-band .fx-aurora{ z-index:-1; }
.cta-band .fx-aurora::after{ background:linear-gradient(120deg, color-mix(in oklab, var(--surface) 30%, transparent), color-mix(in oklab, var(--surface) 80%, transparent)); }

/* ── 11. İletişim ───────────────────────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px; }
.contact-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
.contact-wrap .contact{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; } }
.hours-card{ display:grid; gap:16px; }
.hours-card header{ display:flex; align-items:center; gap:12px; font-weight:600; }
.contact .card{ grid-template-columns:48px 1fr; align-items:center; }
.contact .card strong{ display:block; font-weight:600; }
.contact .card span{ color:var(--text-muted); font-size:.95rem; word-break:break-word; }
.hours{ display:grid; gap:6px; font-size:.95rem; }
.hours div{ display:flex; justify-content:space-between; gap:16px; color:var(--text-muted); }
.hours div.is-today{ color:var(--text); font-weight:600; }
.open-badge{ justify-self:start; display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; padding:6px 12px; border-radius:999px; }
.open-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.open-badge.is-open{ color:#22C55E; background:rgb(34 197 94 / .12); }
.open-badge.is-closed{ color:var(--text-muted); background:color-mix(in oklab, var(--text) 6%, transparent); }

/* ── 12. Ürün ayrıntısı ─────────────────────────────────────────────────────────── */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; color:var(--text-muted); font-size:.92rem; margin-bottom:28px; }
.crumbs a:hover{ color:var(--text); }
.pdp{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px, 5vw, 64px); align-items:start; }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; } }
.pdp__media{ border-radius:calc(var(--r-card) + 6px); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); aspect-ratio:1/1; }
.pdp__media img, .pdp__media svg{ width:100%; height:100%; object-fit:cover; }
.pdp__thumbs{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-top:12px; }
.pdp__thumbs img{ aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-media); border:1px solid var(--line); }
.pdp__info{ display:grid; gap:20px; position:sticky; top:110px; }
.pdp__price{ font:800 2.2rem/1 var(--font-display); letter-spacing:-.02em; text-transform:none; }
.specs{ display:grid; border-top:1px solid var(--line); }
.specs div{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.specs dt{ color:var(--text-muted); } .specs dd{ margin:0; font-weight:600; text-align:right; }
.note{ font-size:.86rem; color:var(--text-muted); }

/* ── 13. Yasal sayfa ────────────────────────────────────────────────────────────── */
.prose{ max-width:760px; }
.prose h1{ font-size:clamp(2rem, 4vw, 3rem); margin-bottom:24px; }
.prose h2{ font-size:1.4rem; margin:36px 0 12px; letter-spacing:-.01em; text-transform:none; font-stretch:100%; }
.prose p, .prose li{ color:var(--text-muted); margin-bottom:12px; }
.prose ul{ list-style:disc; padding-left:22px; }
/* DZ-H12-1025 (D-401 · T-390) — hizmet bölgesi sayfasındaki tek bağlantılı liste satırları (hizmetler · WhatsApp · yol tarifi) ve
   künyedeki tek başına telefon/e-posta bağlantısı telefonda ≥ 44 px dokunma hedefi (cümle içi bağlantı WCAG 2.5.8 gereği hariç). */
@media (max-width:768px){
  .prose li > a:only-child, dd > a:only-child{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
}
.prose dl{ display:grid; grid-template-columns:max-content 1fr; gap:10px 24px; }
.prose dt{ color:var(--text-muted); } .prose dd{ margin:0; }

/* ── 14. Altbilgi ───────────────────────────────────────────────────────────────── */
.footer{ position:relative; padding:64px 0 36px; border-top:1px solid var(--line); background:color-mix(in oklab, var(--surface) 55%, var(--bg)); }
.footer__grid{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font:600 .82rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; font-stretch:100%; }
.footer li + li{ margin-top:10px; }
.footer a{ color:var(--text-muted); transition:color var(--t-fast); } .footer a:hover{ color:var(--text); }
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--text-muted); font-size:.84rem; }
.footer__legal button{ background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.made-with{ display:inline-flex; align-items:center; gap:6px; }

/* ── 15. Hareket koruması ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0s !important; animation-iteration-count:1 !important; transition-duration:0s !important; scroll-behavior:auto !important; }
  .js .fx-reveal{ opacity:1 !important; transform:none !important; }
}
@media print{ .nav, .fx-aurora, .fx-grid, .fx-dots, .fx-sweep, .footer__legal button{ display:none !important; } body{ background:#fff; color:#000; } }

/* ── 16. Hakkımızda görseli (marka karosu + ürün mozaiği) ───────────────────────── */
.about-visual{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:14px; min-height:420px; }
.about-visual__tile{ position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; border-radius:calc(var(--r-card) + 6px);
  background:linear-gradient(140deg, var(--g1), var(--g2) 60%, var(--g3)); border:1px solid var(--line); min-height:420px; }
.about-visual__tile > span{ font:800 clamp(5rem, 12vw, 9rem)/1 var(--font-display); letter-spacing:-.06em; color:rgb(255 255 255 / .92); text-transform:none; mix-blend-mode:soft-light; }
.about-visual__tile > img, .about-visual__tile > picture > img{ width:46%; height:auto; filter:drop-shadow(0 20px 40px rgb(0 0 0 / .35)); }
.about-visual__tile .fx-aurora{ z-index:-1; } html .about-visual .about-visual__tile .fx-aurora::after{ background:none; }
.about-visual__tile .fx-aurora span{ mix-blend-mode:soft-light; opacity:.9; }
.about-visual__mosaic{ display:grid; gap:14px; }
.about-visual__thumb{ display:block; overflow:hidden; border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface-2); }
.about-visual__thumb svg, .about-visual__thumb img{ width:100%; height:100%; object-fit:cover; }
.about-visual__stat{ position:absolute; left:-18px; bottom:28px; padding:16px 20px; border-radius:18px; display:grid; gap:4px; }
.about-visual__stat strong{ font:800 2rem/1 var(--font-display); letter-spacing:-.03em; text-transform:none; }
.about-visual__stat small{ color:var(--text-muted); font-size:.85rem; }
@media (max-width:620px){ .about-visual{ grid-template-columns:1fr; } .about-visual__mosaic{ grid-template-columns:repeat(3, 1fr); } .about-visual__tile{ min-height:300px; } .about-visual__stat{ left:12px; } }

/* ── 17. Eğik panel + teknik kartlar (sanayi, yapı) ─────────────────────────────── */
.panel-angled{ position:absolute; inset:2% 0 6% 8%; overflow:hidden; clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 100%); border-radius:4px;
  background:var(--surface-2); box-shadow:0 40px 80px -40px color-mix(in oklab, var(--shadow) 70%, transparent); }
.panel-angled > svg, .panel-angled > img, .panel-angled > picture > img{ width:100%; height:100%; object-fit:cover; }
.panel-angled::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--bg) 70%, transparent)); pointer-events:none; }
.spec-card{ position:absolute; z-index:2; display:grid; gap:4px; padding:14px 18px; border-radius:8px; background:color-mix(in oklab, var(--surface-solid) 94%, transparent); border:1px solid var(--line);
  box-shadow:0 20px 40px -24px color-mix(in oklab, var(--shadow) 80%, transparent); border-left:3px solid var(--accent); }
.spec-card__k{ font:600 .72rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.spec-card__v{ font:800 2rem/1 var(--font-display); font-stretch:var(--display-stretch); color:var(--text); }
.spec-card__name{ font:700 1.05rem/1.25 var(--font-body); max-width:22ch; }
.spec-card__sku{ font:500 .8rem/1 var(--font-mono); color:var(--accent-text); }
.spec-card--a{ left:0; top:12%; } .spec-card--b{ left:4%; top:38%; } .spec-card--c{ right:4%; bottom:10%; }
@media (max-width:900px){ .panel-angled{ inset:0 0 10% 0; } .spec-card--b{ display:none; } }

/* ── 18. CSP uyumu: satır içi stil yok (style-src 'self') ──────────────────────── */
[data-i="1"]{ --i:1; } [data-i="2"]{ --i:2; } [data-i="3"]{ --i:3; } [data-i="4"]{ --i:4; } [data-i="0"]{ --i:0; }
.stack{ display:grid; gap:16px; } .stack--l{ gap:18px; } .stack--start{ justify-items:start; }
.footer__tagline{ margin-top:16px; max-width:36ch; }
.section--page{ padding-top:clamp(28px, 4vw, 56px); }

/* ── 19. Mobil erişilebilirlik tabanı (TASK-WEB-1009 — duyarlı kapı) ───────────────
 * Her tasarımda ve klasik ailede: uzun sözcük taşmaz, dokunma hedefi ≥ 44 px, mobil gövde metni ≥ 14 px.
 * ⚠️ `!important` BİLİNÇLİDİR: aile/tasarım CSS'i küçük yazı tanımlasa da telefonda erişilebilirlik tabanı kazanır. */
h1, h2, h3, h4, .hero__title{ overflow-wrap:break-word; }
.nav__toggle{ flex:none; }
.brand{ min-height:44px; }
@media (max-width:768px){
  .footer li a, .footer__legal a, .crumbs a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
  .footer li + li{ margin-top:0; }
  .footer__legal{ font-size:.875rem !important; }
  .footer__legal button{ display:inline-flex; align-items:center; min-height:44px; font-size:.875rem !important; }
  .btn, .pill{ min-height:44px; font-size:max(.875rem, 1em) !important; }
  small{ font-size:max(.875rem, .85em) !important; }
  .note{ font-size:.875rem !important; }
  .search{ min-height:44px; padding-block:0; } .search input{ font-size:1rem; min-height:44px; }
  .nav__links a{ min-height:44px; display:flex; align-items:center; }
}
/* Kahraman alt metni dokulu/ışımalı zeminlerde de AA kalsın (duyarlı kapı · piksel ölçümü). */
.hero .lead{ color:color-mix(in oklab, var(--text-muted) 55%, var(--text)); }
/* Hareket azaltılmışsa hız çizgileri DURAN bir çizgi olarak metnin üstünden geçmesin (görsel kontrol bulgusu). */
@media (prefers-reduced-motion: reduce){ .speed, .fx-beams{ display:none; } }
/* Izgara öğeleri en uzun sözcüğe göre GENİŞLEMESİN (grid min-content taşması — duyarlı kapı bulgusu). */
.hero__grid > *, .split > *, .section-head--split > *, .contact-wrap > *, .pdp > *, .faq-wrap > *, .form-wrap > *, .hours-band > *, .map-card > *{ min-width:0; }
/* Dar ekranda uzun düğme/telefon metni kartı ya da bandı GENİŞLETMESİN (320 px kapı bulgusu). */
.card > *, .cta-band > *, .cform > *, .map-card__info > *{ min-width:0; max-width:100%; }
@media (max-width:480px){ .btn{ white-space:normal; text-align:center; } }
.cta-band{ grid-template-columns:minmax(0, 1fr); }
@media (max-width:480px){ h1, h2, h3, .hero__title, .display-l{ overflow-wrap:anywhere; } }
.hero__copy{ grid-template-columns:minmax(0, 1fr); }
.chip{ max-width:100%; }
/* Tek sütunda kahraman görseli (yörünge halkası, tabak, damla) üstündeki güven satırının üzerine taşmasın. */
@media (max-width:900px){ .hero__visual{ margin-top:clamp(40px, 9vw, 72px); } }

/* TASK-WEB-SEO-1013 (S-7) — sol altta yüzen WhatsApp / ara düğmesi + "şu an açık" rozeti. Yalnız arama motoru kipindeki
   sitelerde çizilir (`.acv-fab`); ara düğmesi yalnız dar ekranda (telefon). Beyaz yazı / yeşil zemin kontrastı ≥ 4.5. */
.acv-fab{ position:fixed; left:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none; }
.acv-fab > *{ pointer-events:auto; }
.acv-fab__row{ display:flex; gap:10px; }
.acv-fab__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; min-width:52px; padding:0 18px; border-radius:999px;
  font-weight:700; font-size:.95rem; line-height:1; color:#fff; text-decoration:none; box-shadow:0 10px 28px rgb(0 0 0 / .28); transition:transform var(--t-fast, .15s); }
.acv-fab__btn:hover{ transform:translateY(-2px); }
.acv-fab__btn svg{ width:24px; height:24px; flex:none; }
.acv-fab__btn--wa{ background:#15803D; }
.acv-fab__btn--call{ background:#1E3A8A; }
.acv-fab__badge{ font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:999px; background:#111827; color:#F9FAFB;
  border:1px solid rgb(255 255 255 / .14); box-shadow:0 6px 18px rgb(0 0 0 / .25); }
.acv-fab__badge.is-open{ color:#BBF7D0; background:#111827; }
.acv-fab__badge.is-closed{ color:#FECACA; background:#111827; }
@media (min-width:900px){ .acv-fab__btn--call{ display:none; } }
@media (max-width:599px){
  .acv-fab{ left:12px; bottom:12px; }
  .acv-fab__btn{ width:56px; height:56px; padding:0; }
  .acv-fab__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
body:has(.acv-fab) .footer__legal{ padding-bottom:84px; }
.footer__sub{ margin-top:22px; }
@media print{ .acv-fab{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .acv-fab__btn{ transition:none; } }

/* ── 20. TASK-SEO-1013b: WebP <picture> sarmalayıcı + OpenStreetMap gömme ───────────
   `picture` kutu üretmez (img ızgara/esnek öğesi olarak kalır); `X > picture > img` seçicileri bloklarda.
   Harita yalnız konum girilmişse çizilir; CSP'de tek ek kök `frame-src https://www.openstreetmap.org`. */
picture{ display:contents; }
.osm-map{ margin:24px 0 0; display:grid; gap:16px; }
.osm-map__title{ font:700 1.1rem/1.3 var(--font-body); text-transform:none; letter-spacing:0; }
.osm-map__frame{ position:relative; overflow:hidden; border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface-2); aspect-ratio:16 / 7; min-height:280px; }
.osm-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.osm-map figcaption{ display:flex; flex-wrap:wrap; gap:16px; }
@media (max-width:620px){ .osm-map__frame{ aspect-ratio:4 / 3; min-height:240px; } }
@media print{ .osm-map__frame, .map-card__art .osm-frame{ display:none; } }
/* T-500 · sahip kararı K-200 (2026-10-19): harita TIKLA-YÜKLE. Sayfada iframe YOKTUR; ziyaretçi "Haritayı göster"e basınca
   site.js `data-osm-src`ten çerçeveyi kurar — o ana kadar harita sağlayıcısına hiçbir istek gitmez (IP yurt dışına çıkmaz).
   Betik kapalıysa düğme gizli kalır; "Büyük haritada aç" bağlantısı her zaman vardır. */
.osm-gate{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:20px; text-align:center; background:var(--surface-2); }
.osm-gate__lead{ max-width:46ch; margin:0; font-size:.95rem; line-height:1.5; color:var(--text-muted); }
html:not(.js) .osm-gate__btn{ display:none; }

/* ── 21. TASK-WEB-PWA-1014 (T-316): "<Uygulama> uygulamasını yükle" çağrısı ──────────────
   Yalnız `<html data-pwa="1">` (yayındaki site) çizilir; site.js Android'de `beforeinstallprompt` ile, iOS'ta
   "Paylaş › Ana Ekrana Ekle" yönergesiyle açar. Kapatılınca 14 gün sorulmaz (yalnız bu cihazda). */
.acv-install{ position:fixed; z-index:70; right:16px; bottom:16px; width:min(420px, calc(100vw - 32px)); display:grid; grid-template-columns:48px minmax(0, 1fr);
  gap:12px 16px; align-items:center; padding:16px; border-radius:var(--r-card, 16px); background:var(--surface-solid, #fff); color:var(--text, #111827);
  border:1px solid var(--line, rgb(0 0 0 / .1)); box-shadow:0 18px 48px rgb(0 0 0 / .28); }
.acv-install[hidden]{ display:none; }
.acv-install__icon{ width:48px; height:48px; border-radius:12px; }
.acv-install__text{ display:grid; gap:4px; min-width:0; }
.acv-install__text strong{ font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.acv-install__text span{ font-size:.9rem; line-height:1.45; color:var(--text-muted, #4B5563); }
.acv-install__text span[hidden], .acv-install__go[hidden]{ display:none; }
.acv-install__actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.acv-install__close{ min-width:44px; min-height:44px; border:0; background:none; color:inherit; font-size:1.5rem; line-height:1; cursor:pointer; border-radius:999px; }
.acv-install__close:focus-visible{ outline:2px solid var(--accent, #2563EB); outline-offset:2px; }
@media (max-width:599px){ .acv-install{ left:12px; right:12px; bottom:12px; width:auto; } }
body:has(.acv-install:not([hidden])) .acv-fab{ display:none; }
@media print{ .acv-install{ display:none !important; } }
/* TASK-SITE-PWA-1015 (T-381): iOS yönergesinde Paylaş simgesi · kurulu uygulamanın çevrimdışı sayfası (offline.html). */
.acv-install__share{ display:inline-block; width:18px; height:18px; vertical-align:-3px; margin-right:6px; color:var(--accent-text, var(--accent, #2563EB)); }
.acv-offline{ display:grid; justify-items:start; gap:8px; padding:32px 0 48px; }
.acv-offline__icon{ width:56px; height:56px; padding:12px; border-radius:16px; color:var(--accent-text, var(--accent, #2563EB)); background:var(--surface-2, rgb(0 0 0 / .05)); }
.acv-offline__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* ── 22. TASK-WEBPUSH-1014c (T-316): "Kampanyalardan haberdar ol" — tarayıcı bildirimi izni ─────────
   Yalnız firma bildirimi açtıysa ve tarayıcı destekliyorsa görünür (bildirim.js). Tarayıcının izin penceresi YALNIZ
   ziyaretçi "İzin ver"e dokununca açılır; sayfa açılışında asla sorulmaz. Pencere kurulum çağrısıyla aynı görünümdedir. */
.acv-push-cta{ margin-top:16px; }
.acv-push-cta[hidden]{ display:none; }
.acv-push-cta__btn{ min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:.95rem; cursor:pointer; }
.acv-push-cta__btn:focus-visible{ outline:2px solid var(--accent, #2563EB); outline-offset:2px; }
.acv-push-cta__btn svg{ width:18px; height:18px; flex:none; }
.acv-push .acv-install__text a{ color:inherit; text-decoration:underline; }
.acv-push__off{ min-height:44px; }
.acv-push__off[hidden], .acv-push [data-push-go][hidden]{ display:none; }

/* ── 23. TASK-SITE-PREMIUM-1017: premium ayrıntılar (klasik + bütün tasarımlar) ─────────────────────
   Boşluk ritmi, istatistik ızgarası, odak halkası, ürün kartı ve ürün sayfası, yasal sayfa, altbilgi çizgisi,
   uygulama (PWA) görünümü. Yalnız token kullanılır; hareket §15 ile söner. */
html{ -webkit-tap-highlight-color:transparent; }
body{ font-feature-settings:"kern" 1, "liga" 1; }
::selection{ background:color-mix(in oklab, var(--accent) 30%, transparent); color:var(--text); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-text); outline-offset:3px; box-shadow:0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent); }
/* Aynı zeminli ardışık bölümler arasında çift boşluk olmasın (bant değişince tam boşluk kalır). */
.section:not(.surface-band) + .section:not(.surface-band), .section--tight + .section:not(.surface-band){ padding-top:calc(var(--section-y) * .62); }
.section:not(.surface-band) + .section--tight{ padding-top:0; }
.section-head .lead{ max-width:58ch; }
/* İstatistikler: sayısı ne olursa olsun satırı doldurur (3 istatistikte boş dördüncü sütun / telefonda yetim kart yok). */
.stats{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.stat span{ overflow-wrap:anywhere; }
@media (max-width:400px){ .stat{ padding:20px 14px; } .stat strong{ font-size:min(2rem, 8.4vw) !important; } }   /* 320 px: "12.000 m²" gibi uzun rakamlar kartı taşırmasın (tasarım ölçüsünü bilinçli ezer) */
/* Düğme: basınca hafif çökme; kart: dokunmatikte üstüne gelme yerine basma geri bildirimi. */
.btn:active{ transform:translateY(1px) scale(.985); }
@media (hover:none){ .product:active, .card--feature:active{ transform:scale(.985); } }
/* Ürün kartı: daha net hiyerarşi, fiyat rakamları hizalı, görselde ince alt gölge. */
.product__body{ gap:6px; }
.product__name{ text-wrap:balance; }
.product__price, .pdp__price{ font-variant-numeric:tabular-nums lining-nums; }
.product__media::before{ content:""; position:absolute; inset:auto 0 0; height:28%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--shadow) 14%, transparent)); opacity:0; transition:opacity var(--t-frame); }
.product:hover .product__media::before{ opacity:1; }
/* Ürün sayfası: bilgi sütunu panel, fiyat bloğu ayrık, eylemler tam genişlik (telefonda). */
@media (min-width:901px){
  .pdp__info{ padding:clamp(24px, 3vw, 40px); border-radius:calc(var(--r-card) + 6px); border:1px solid var(--line);
    background:color-mix(in oklab, var(--surface-solid) 70%, transparent); box-shadow:0 40px 80px -60px color-mix(in oklab, var(--shadow) 60%, transparent); }
}
.pdp__info .display-m{ font-size:clamp(1.8rem, 3vw, 2.8rem); line-height:1.08; }
.pdp__price{ font-size:clamp(1.9rem, 3vw, 2.5rem); color:var(--accent-text); }
.pdp__media{ box-shadow:0 50px 90px -60px color-mix(in oklab, var(--shadow) 70%, transparent); }
@media (max-width:600px){ .pdp__info .hero__actions .btn{ flex:1 1 100%; } }
.section--page:not(.surface-band) + .surface-band{ margin-top:clamp(24px, 4vw, 56px); }
/* Yasal sayfa: künye satırları kart içinde, okunur genişlik, başlık altı ince çizgi. */
.prose > h1{ padding-bottom:18px; border-bottom:1px solid var(--line); }
.prose > h1 + .lead{ margin-top:4px; }
.prose dl{ grid-template-columns:minmax(120px, max-content) minmax(0, 1fr); gap:0; margin:28px 0 20px; padding:6px 22px; border-radius:var(--r-card);
  border:1px solid var(--line); background:color-mix(in oklab, var(--surface-solid) 70%, transparent); }
.prose dt, .prose dd{ padding:14px 0; border-bottom:1px solid var(--line); }
.prose dt{ padding-right:24px; font-size:.92rem; } .prose dd{ overflow-wrap:anywhere; font-weight:500; }
.prose dl > :nth-last-child(-n+2){ border-bottom:0; }
@media (max-width:560px){ .prose dl{ grid-template-columns:1fr; padding:4px 18px; } .prose dt{ padding:14px 0 2px; border-bottom:0; } .prose dd{ padding:0 0 14px; } .prose dl > dt:last-of-type{ border-bottom:0; } }
.prose h2{ padding-top:6px; }
.prose a:not(.btn){ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
/* Altbilgi: üstte vurgu renginde ince ışık çizgisi. */
.footer::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 70%, transparent), transparent); }
/* Uygulama (PWA, ana ekrandan açılınca): çentik/gösterge güvenli alanları, kurulum bağlantısı gizli, sekme geri çekilmesi yok. */
@media (display-mode: standalone){
  html, body{ overscroll-behavior-y:none; }
  .nav{ padding-top:max(14px, env(safe-area-inset-top)); }
  .nav .nav__inner, .nav.is-stuck .nav__inner{ background:color-mix(in oklab, var(--bg) 88%, transparent); border-color:var(--line); }
  .footer{ padding-bottom:calc(36px + env(safe-area-inset-bottom)); }
  .acv-fab{ bottom:calc(16px + env(safe-area-inset-bottom)); }
  [data-install-open-wrap]{ display:none !important; }
}
/* Hareket azaltılmışsa tuval parçacıkları zaten çizilmez; kaydırma ilerleme çizgisi ve imleç ışığı da yok. */
@media (prefers-reduced-motion: reduce){ .nav::after{ display:none; } .fx-lumen{ background-position:center; } }
@media print{ .fx-flow, .fx-particles, .fx-ribbons, .fx-bokeh, .fx-horizon, .fx-layers, .fx-stars, .fx-halo, .fx-shapes, .fx-lumen, .fx-mesh, .fx-orbs, .fx-beams, .fx-rays{ display:none !important; } }
/* Kahraman: sıkı harf aralıklı başlıklarda sözcükler birbirine yapışmasın; film greni bölüm sınırında ek yeri bırakmasın. */
.hero__title{ word-spacing:.06em; }
.hero.fx-grain::before{ -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent); mask-image:linear-gradient(180deg, #000 55%, transparent); }