/* ============================================================================
   HET VISION — ortak stil (index.html + detay.html)
   ----------------------------------------------------------------------------
   Dil kuralı: internetle işi olmayan bir toptancı okuyacak.
   Kalıp: rol seçimi + öne çıkan güven sinyalleri (ui-ux-pro-max)
   Renk : slate + pozitif yeşil · Tipografi: Plus Jakarta Sans
   ============================================================================ */

:root{
  --zemin:#f8fafc; --yuzey:#ffffff; --yuzey2:#f1f5f9;
  --metin:#0f172a; --metin2:#475569; --metin3:#64748b;
  --cizgi:#cbd5e1; --cizgi2:#e2e8f0;
  --vurgu:#15803d; --vurgu-us:#ffffff; --vurgu-yum:#dcfce7; --vurgu-metin:#15803d;
  --uyari:#b45309; --hata:#b91c1c;
  --golge:0 1px 2px rgba(15,23,42,.05), 0 12px 32px -16px rgba(15,23,42,.22);
  --golge-yuk:0 2px 4px rgba(15,23,42,.06), 0 22px 50px -20px rgba(15,23,42,.30);
  --olcu:1200px; --ped:clamp(20px,5vw,56px);
  --a1:8px; --a2:16px; --a3:24px; --a4:32px; --a5:48px; --a6:64px;
  --yay:cubic-bezier(.34,1.56,.64,1);
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}
:root[data-tema="koyu"]{
  --zemin:#020617; --yuzey:#0f172a; --yuzey2:#1a1e2f;
  --metin:#f8fafc; --metin2:#94a3b8; --metin3:#64748b;
  --cizgi:#334155; --cizgi2:#1e293b;
  --vurgu:#22c55e; --vurgu-us:#022c16; --vurgu-yum:rgba(34,197,94,.12); --vurgu-metin:#4ade80;
  --uyari:#fbbf24; --hata:#f87171;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.9);
  --golge-yuk:0 2px 6px rgba(0,0,0,.5), 0 26px 56px -22px rgba(0,0,0,.95);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--zemin);color:var(--metin);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;
  overflow-x:hidden;transition:background .3s ease,color .3s ease}
img{max-width:100%;height:auto;display:block}
a{color:var(--vurgu-metin);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:4px}
.kap{max-width:var(--olcu);margin-inline:auto;padding-inline:var(--ped)}
.dar{max-width:920px}
svg{flex:none}
.ikon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ikon-s{width:18px;height:18px}
.et{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--metin3);font-weight:600}

h2{margin:var(--a2) 0 0;font-size:clamp(26px,3.4vw,42px);line-height:1.14;letter-spacing:-.03em;
  font-weight:800;text-wrap:balance;max-width:21ch}
.ozet{margin:var(--a3) 0 0;max-width:58ch;color:var(--metin2);font-size:17.5px}
.ozet b{color:var(--metin);font-weight:700}

/* ---------- ÜST ÇUBUK ---------- */
.ust{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--zemin) 86%,transparent);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s}
.ust.kydi{border-bottom-color:var(--cizgi2)}
.ust .kap{display:flex;align-items:center;justify-content:space-between;gap:var(--a2);min-height:68px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--metin)}
/* Logo dosyası beyaz zeminli (şeffaf değil). Görsel düzenlemeden çözüm:
   açık temada multiply → beyaz zemin kaybolur; koyu temada invert + screen. */
.logo .im{width:34px;height:34px;flex:none;object-fit:contain;mix-blend-mode:multiply}
:root[data-tema="koyu"] .logo .im{filter:invert(1);mix-blend-mode:screen}
.logo b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.logo b span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--metin3);margin-top:1px}
.ust nav{display:flex;align-items:center;gap:var(--a3)}
.ust nav a.bg{color:var(--metin2);text-decoration:none;font-size:15px;font-weight:500;transition:color .18s ease}
.ust nav a.bg:hover{color:var(--metin)}
@media(max-width:900px){.ust nav .gz{display:none}}
.tema{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;background:transparent;
  border:1px solid var(--cizgi);border-radius:10px;color:var(--metin2);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.tema:hover{background:var(--yuzey2);color:var(--metin)}
.tema .ay{display:none}
:root[data-tema="koyu"] .tema .gunes{display:none}
:root[data-tema="koyu"] .tema .ay{display:block}

/* ---------- DÜĞMELER ---------- */
.dg{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;min-height:44px;
  padding:12px 22px;border-radius:10px;text-decoration:none;font-family:inherit;font-size:15px;font-weight:700;
  letter-spacing:-.005em;white-space:nowrap;background:var(--vurgu);color:var(--vurgu-us);border:1px solid var(--vurgu);
  transition:transform .2s var(--yay),box-shadow .2s ease}
.dg:hover{color:var(--vurgu-us);transform:translateY(-2px);box-shadow:var(--golge)}
.dg:active{transform:translateY(0)}
.dg.ikinci{background:transparent;color:var(--metin);border-color:var(--cizgi)}
.dg.ikinci:hover{background:var(--yuzey2);color:var(--metin)}
.dg.ufak{min-height:40px;padding:9px 16px;font-size:14px}

/* ---------- HERO ---------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(28px,4vw,48px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% -8%,var(--vurgu-yum),transparent 70%)}
.hero .kap{position:relative}
.rozet{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--yuzey);
  border:1px solid var(--cizgi2);font-size:13.5px;font-weight:600;color:var(--metin2)}
.rozet .nk{width:7px;height:7px;border-radius:50%;background:var(--vurgu);flex:none}
.hero h1{margin:var(--a3) 0 0;max-width:17ch;font-size:clamp(34px,5.2vw,58px);line-height:1.07;
  letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.hero h1 span{color:var(--vurgu-metin)}
.hero .anlat{margin:var(--a3) 0 0;max-width:54ch;font-size:clamp(17px,1.55vw,19.5px);color:var(--metin2)}
.hero .anlat b{color:var(--metin);font-weight:700}
.hero .eylem{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--a4)}
.guv{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:var(--a4);padding-top:var(--a3);border-top:1px solid var(--cizgi2)}
.guv div{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--metin2);font-weight:500}
.guv svg{color:var(--vurgu-metin)}

/* ---------- ROL SEÇİMİ ---------- */
.yol{padding:clamp(44px,6vw,76px) 0;border-top:1px solid var(--cizgi2)}
.yol-grid{display:grid;gap:var(--a2);margin-top:var(--a4);grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.yol-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rol{display:flex;flex-direction:column;align-items:flex-start;gap:10px;cursor:pointer;text-align:left;
  padding:var(--a3);border-radius:14px;background:var(--yuzey);border:1px solid var(--cizgi2);
  font-family:inherit;color:var(--metin);
  transition:transform .25s var(--yay),border-color .2s ease,box-shadow .2s ease}
.rol:hover{transform:translateY(-4px);box-shadow:var(--golge);border-color:var(--cizgi)}
.rol[aria-selected="true"]{border-color:var(--vurgu);box-shadow:var(--golge-yuk)}
.rol .kutu{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--vurgu-yum);color:var(--vurgu-metin)}
.rol h3{margin:0;font-size:18.5px;font-weight:700;letter-spacing:-.015em}
.rol p{margin:0;font-size:15px;color:var(--metin2);line-height:1.5}
.rol .bak{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:14px;font-weight:700;color:var(--vurgu-metin)}
.rol .bak svg{transition:transform .2s ease}
.rol:hover .bak svg{transform:translateX(3px)}

.rol-detay{margin-top:var(--a4);display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.rol-detay{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.ekran{margin:0}
.ekran .cerceve{border:1px solid var(--cizgi);border-radius:14px;overflow:hidden;background:var(--yuzey2);
  box-shadow:var(--golge-yuk)}
.ekran .cerceve img{width:100%;height:auto;display:block}
.ekran[data-bos] .cerceve{aspect-ratio:16/10;border-style:dashed;box-shadow:none;display:grid;place-items:center}
.ekran[data-bos] .cerceve::after{content:attr(data-d);font-family:var(--mono);font-size:12px;
  color:var(--metin3);text-align:center;padding:0 20px;line-height:1.7}
.ekran[data-bos] img{display:none}
.rol-metin h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.rol-metin .gorev{display:inline-block;margin-top:10px;padding:5px 11px;border-radius:7px;
  background:var(--vurgu-yum);color:var(--vurgu-metin);font-size:13px;font-weight:700}
.rol-metin ul{list-style:none;margin:var(--a3) 0 0;padding:0}
.rol-metin li{display:flex;gap:11px;margin-bottom:13px;color:var(--metin2);font-size:15.5px;line-height:1.5}
.rol-metin li svg{color:var(--vurgu-metin);margin-top:3px}
.rol-metin li b{color:var(--metin);font-weight:700}

/* ---------- RAPOR KARTI ---------- */
.rapor{margin-top:var(--a4);border:1px solid var(--cizgi2);border-radius:14px;overflow:hidden;
  background:var(--yuzey);box-shadow:var(--golge)}
.rapor .bas{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,2.4vw,24px);border-bottom:1px solid var(--cizgi2)}
.rapor .bas .sol{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px}
.rapor .bas .sol svg{color:var(--vurgu-metin)}
.rapor .gov{padding:clamp(18px,2.6vw,26px) clamp(16px,2.4vw,24px)}
.rapor h4{margin:0 0 11px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--vurgu-metin)}
.rapor h4.sr{margin-top:24px}
.rapor h4.uy{color:var(--uyari)}
.rapor ul{list-style:none;margin:0;padding:0}
.rapor li{display:flex;gap:11px;margin-bottom:11px;color:var(--metin2);font-size:15.5px;line-height:1.55}
.rapor li svg{margin-top:4px;color:var(--metin3)}
.rapor li b{color:var(--metin);font-weight:700}
.rapor .sy{font-family:var(--mono);color:var(--vurgu-metin);font-size:.95em;font-weight:600}
.rapor .kt{font-family:var(--mono);color:var(--hata);font-size:.95em;font-weight:600}
.rapor li.tm svg{color:var(--vurgu-metin)}
.rapor li.ac svg{color:var(--uyari)}
.rapor .dip{padding:13px clamp(16px,2.4vw,24px);border-top:1px solid var(--cizgi2);color:var(--metin3);font-size:13px}

/* ---------- SAYILAR ---------- */
.kanit{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--cizgi2)}
.kanit ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--a2);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kanit li{padding:var(--a3);border-radius:12px;background:var(--yuzey);border:1px solid var(--cizgi2)}
.kanit .sayi{font-size:clamp(28px,3.2vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--vurgu-metin);font-family:var(--mono)}
.kanit .sayi small{font-size:.45em;color:var(--metin2);margin-left:6px;font-weight:600}
.kanit .ad{margin-top:9px;font-size:14.5px;color:var(--metin2);line-height:1.45}
.kanit .dipnot{margin:var(--a3) 0 0;font-size:14px;color:var(--metin3);text-align:center}
.kanit .kayip{display:flex;gap:14px;align-items:flex-start;margin:var(--a4) 0 0;padding:var(--a3);
  border-radius:12px;background:var(--yuzey);border:1px solid var(--cizgi2);border-left:3px solid var(--uyari)}
.kanit .kayip svg{color:var(--uyari);margin-top:2px}
.kanit .kayip p{margin:0;color:var(--metin2);font-size:16px;max-width:76ch}
.kanit .kayip b{color:var(--metin);font-weight:700}

/* ---------- SORULAR ---------- */
.itiraz{padding:clamp(44px,6vw,76px) 0;border-top:1px solid var(--cizgi2);background:var(--yuzey2)}
.itiraz-grid{display:grid;gap:var(--a2);margin-top:var(--a4);grid-template-columns:minmax(0,1fr)}
@media(min-width:780px){.itiraz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.itiraz .kart{padding:var(--a3);border-radius:12px;background:var(--yuzey);border:1px solid var(--cizgi2);
  transition:transform .25s var(--yay),box-shadow .2s ease}
.itiraz .kart:hover{transform:translateY(-3px);box-shadow:var(--golge)}
.itiraz .kart .ustluk{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.itiraz .kart .ustluk svg{color:var(--vurgu-metin)}
.itiraz .kart h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.itiraz .kart p{margin:0;color:var(--metin2);font-size:15.5px}
.itiraz .kart p+p{margin-top:10px}
.itiraz .kart b{color:var(--metin);font-weight:700}
.alinti{margin-top:13px;padding:13px 15px;border-radius:9px;background:var(--yuzey2);
  border-left:3px solid var(--vurgu);font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--metin2)}
.itiraz .son{margin:var(--a4) 0 0;text-align:center;font-size:15px;color:var(--metin2)}
.itiraz .son b{color:var(--metin)}

/* ---------- KAPANIŞ ---------- */
.kapanis{padding:clamp(48px,6vw,80px) 0;text-align:center;border-top:1px solid var(--cizgi2);
  background:radial-gradient(60% 100% at 50% 0%,var(--vurgu-yum),transparent 62%)}
.kapanis .kap{max-width:760px}
.kapanis-logo{width:52px;height:52px;margin:0 auto var(--a2);object-fit:contain;mix-blend-mode:multiply}
:root[data-tema="koyu"] .kapanis-logo{filter:invert(1);mix-blend-mode:screen}
.kapanis h2{margin:var(--a2) auto 0;max-width:19ch}
.kapanis p{margin:var(--a3) auto 0;max-width:50ch;color:var(--metin2);font-size:17.5px}
.kapanis .eylem{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--a4)}
.kapanis .mini{margin-top:var(--a3);font-size:14px;color:var(--metin3)}

footer{border-top:1px solid var(--cizgi2);padding:var(--a3) 0 var(--a5)}
footer .kap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
footer p{margin:0;font-size:13.5px;color:var(--metin3)}
.alt-marka{display:flex;align-items:center;gap:9px}
.alt-marka img{width:26px;height:26px;object-fit:contain;mix-blend-mode:multiply;opacity:.75}
:root[data-tema="koyu"] .alt-marka img{filter:invert(1);mix-blend-mode:screen}

/* ---------- KISA ANA SAYFAYA ÖZEL ---------- */
/* Tek satırlık cevaplar — uzun paragraf yerine taranabilir liste */
.hizli{list-style:none;margin:var(--a4) 0 0;padding:0;display:grid;gap:var(--a1);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.hizli{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a1) var(--a3)}}
.hizli li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:11px;
  background:var(--yuzey);border:1px solid var(--cizgi2)}
.hizli svg{color:var(--vurgu-metin);margin-top:2px}
.hizli b{display:block;font-size:15.5px;color:var(--metin);font-weight:700}
.hizli span{display:block;margin-top:3px;font-size:14.5px;color:var(--metin2);line-height:1.5}

/* Vurgulu tek cümle — "vay be" anını taşıyan blok */
.carpici{padding:clamp(44px,6vw,80px) 0;border-top:1px solid var(--cizgi2);text-align:center;
  background:var(--yuzey2)}
.carpici .kap{max-width:820px}
.carpici p.buyuk{margin:var(--a2) 0 0;font-size:clamp(23px,3vw,34px);line-height:1.25;
  letter-spacing:-.025em;font-weight:700;text-wrap:balance;color:var(--metin)}
.carpici p.buyuk span{color:var(--vurgu-metin)}
.carpici p.kucuk{margin:var(--a3) auto 0;max-width:56ch;color:var(--metin2);font-size:16.5px}

/* ============================================================================
   CANLANDIRMA — ürünün vektör temsili
   ----------------------------------------------------------------------------
   Gerçek ekran görüntüsü sitede 600px'e sığınca yazıları okunmuyordu; göz
   "kalabalık" görüp geçiyordu. Burada panel yeniden ÇİZİLİYOR: her boyutta
   okunur, açık/koyu temaya uyar, kaydırınca canlanır. Gerçek görüntüler
   kanıt olarak detay sayfasında duruyor.
   ============================================================================ */
.mock{border:1px solid var(--cizgi);border-radius:14px;overflow:hidden;background:var(--yuzey);
  box-shadow:var(--golge-yuk)}
.mock-cubuk{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--cizgi2);
  background:var(--yuzey2)}
.mock-cubuk i{width:9px;height:9px;border-radius:50%;background:var(--cizgi);display:block}
.mock-cubuk span{margin-left:10px;font-family:var(--mono);font-size:10.5px;color:var(--metin3);letter-spacing:.08em}
/* Rol değişince kutunun boyu zıplamasın: üç rolün en uzunu kadar yer ayrılır. */
.mock-govde{display:flex;min-height:380px}
@media(max-width:600px){.mock-govde{min-height:0}}
.mock-menu{width:78px;flex:none;padding:14px 10px;border-right:1px solid var(--cizgi2);background:var(--yuzey2);
  display:flex;flex-direction:column;gap:11px}
.mock-menu b{display:block;height:7px;border-radius:4px;background:var(--cizgi);opacity:.75}
.mock-menu b:nth-child(1){width:80%;background:var(--vurgu);opacity:.85}
.mock-menu b:nth-child(2){width:64%}.mock-menu b:nth-child(3){width:74%}
.mock-menu b:nth-child(4){width:56%}.mock-menu b:nth-child(5){width:70%}
.mock-menu b:nth-child(6){width:60%}.mock-menu b:nth-child(7){width:48%}
.mock-ic{flex:1;padding:16px;min-width:0}
/* Dar ekranda menü şeridi içeriğin dörtte birini yiyordu */
@media(max-width:600px){.mock-menu{width:44px;padding:12px 7px}.mock-ic{padding:12px}}

.mock-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
@media(max-width:600px){.mock-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mock-kt{border:1px solid var(--cizgi2);border-radius:9px;padding:10px 11px;background:var(--zemin);
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s var(--yay)}
.mock.ac .mock-kt{opacity:1;transform:none}
.mock.ac .mock-kt:nth-child(2){transition-delay:.08s}
.mock.ac .mock-kt:nth-child(3){transition-delay:.16s}
.mock.ac .mock-kt:nth-child(4){transition-delay:.24s}
.mock-kt small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--metin3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-kt b{display:block;margin-top:5px;font-size:clamp(15px,1.7vw,20px);font-weight:800;
  letter-spacing:-.03em;color:var(--metin);font-family:var(--mono)}
.mock-kt i{display:block;margin-top:3px;font-style:normal;font-size:10px;font-weight:700;color:var(--vurgu-metin)}
.mock-kt.kilit{position:relative}
.mock-kt.kilit b{filter:blur(6px);opacity:.5;user-select:none}
.mock-kt.kilit::after{content:"";position:absolute;right:10px;bottom:10px;width:15px;height:15px;
  background:var(--metin3);opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat}

.mock-grafik{margin-top:12px;border:1px solid var(--cizgi2);border-radius:9px;background:var(--zemin);padding:12px}
.mock-grafik .ust{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mock-grafik .ust em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--metin3)}
.mock-grafik .ust s{text-decoration:none;font-family:var(--mono);font-size:9px;color:var(--vurgu-metin);font-weight:700}
/* color'u burada veriyoruz: gradyan durakları currentColor'u BURADAN alır,
   yoksa dolgu metin rengine düşer ve alan gri görünür. */
/* preserveAspectRatio="none" yüzden dar ekranda yükseklik de eziliyordu; taban veriyoruz */
.mock-grafik svg{display:block;width:100%;height:auto;min-height:96px;color:var(--vurgu-metin)}
.mock-grafik .kilavuz{stroke:var(--cizgi2);stroke-width:1}
.mock-grafik .yol{fill:none;stroke:var(--vurgu-metin);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900}
.mock.ac .mock-grafik .yol{animation:mockCiz 1.7s cubic-bezier(.4,0,.2,1) .35s forwards}
@keyframes mockCiz{to{stroke-dashoffset:0}}
.mock-grafik .alan{fill:url(#mockDolgu);opacity:0}
.mock.ac .mock-grafik .alan{animation:mockBelir .8s ease 1.1s forwards}
@keyframes mockBelir{to{opacity:1}}
.mock-grafik .nokta{fill:var(--yuzey);stroke:var(--vurgu-metin);stroke-width:2;opacity:0}
.mock.ac .mock-grafik .nokta{animation:mockBelir .4s ease forwards}

/* Yapay zekânın sesi — sitenin asıl iddiası, rakamların altında duruyor */
.mock-ai{display:flex;gap:9px;margin-top:10px;padding:11px 12px;border-radius:9px;
  background:var(--vurgu-yum);border:1px solid var(--vurgu);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s var(--yay)}
.mock.ac .mock-ai{opacity:1;transform:none;transition-delay:.5s}
.mock-ai .im{flex:none;width:20px;height:20px;border-radius:6px;background:var(--vurgu);color:var(--vurgu-us);
  display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:0}
.mock-ai p{margin:0;font-size:10.5px;line-height:1.5;color:var(--metin2)}
.mock-ai p b{color:var(--metin);font-weight:700}
.mock-ai .nabiz{flex:none;width:6px;height:6px;border-radius:50%;background:var(--vurgu);align-self:center}
.mock.ac .mock-ai .nabiz{animation:mockNabiz 1.9s ease-in-out infinite}
@keyframes mockNabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* Telefon çerçevesi — satışçı ekranı */
/* Çerçeve rengi temaya BAĞLANMAZ: --metin koyu temada beyaza döner ve
   telefon beyaz kasalı gibi görünürdü. Gerçek telefon gibi hep koyu kalsın. */
.mock-tel{max-width:250px;margin:0 auto;border:9px solid #111827;border-radius:30px;overflow:hidden;
  background:var(--zemin);box-shadow:var(--golge-yuk)}
:root[data-tema="koyu"] .mock-tel{border-color:#475569}
.mock-tel .ic{padding:12px 10px}
.mock-rozet{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:9px;
  background:var(--vurgu-yum);border:1px solid var(--vurgu);font-size:10.5px;font-weight:700;color:var(--vurgu-metin);
  opacity:0;transform:scale(.94);transition:opacity .4s ease,transform .4s var(--yay)}
.mock.ac .mock-rozet{opacity:1;transform:none}
.mock-rozet u{text-decoration:none;background:var(--vurgu);color:var(--vurgu-us);padding:3px 7px;border-radius:6px;
  font-size:9px;white-space:nowrap}
.mock-kart{margin-top:8px;border:1px solid var(--cizgi2);border-radius:10px;padding:9px 10px;background:var(--yuzey);
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--yay)}
.mock.ac .mock-kart{opacity:1;transform:none}
.mock.ac .mock-kart:nth-of-type(2){transition-delay:.12s}
.mock.ac .mock-kart:nth-of-type(3){transition-delay:.24s}
.mock-kart strong{display:block;font-size:11px;color:var(--metin);letter-spacing:-.01em}
.mock-kart p{margin:5px 0 0;font-size:10px;color:var(--metin2);line-height:1.45}
.mock-kart p b{color:var(--metin);font-weight:700}
/* İki çip tek satırda kalsın — alt alta düşünce kaza gibi görünüyor */
.mock-kart .cip{display:inline-block;margin-top:7px;margin-right:4px;padding:2px 6px;border-radius:6px;
  font-family:var(--mono);font-size:8.5px;font-weight:700;white-space:nowrap}
.mock-kart .cip.s{background:rgba(180,83,9,.12);color:var(--uyari)}
.mock-kart .cip.t{background:var(--vurgu-yum);color:var(--vurgu-metin)}

@media (prefers-reduced-motion: reduce){
  .mock-kt,.mock-rozet,.mock-kart,.mock-ai{opacity:1;transform:none}
  .mock-grafik .yol{stroke-dashoffset:0;animation:none}
  .mock-grafik .alan,.mock-grafik .nokta{opacity:1;animation:none}
  .mock.ac .mock-ai .nabiz{animation:none}
}

/* ---------- KAPSAM: tüm özellikler, kısa kısa ---------- */
/* Amaç: uzun paragraf okumadan "neler var" sorusunun cevabı 10 saniyede görülsün. */
.kapsam{padding:clamp(44px,6vw,76px) 0;border-top:1px solid var(--cizgi2)}
.kapsam-grid{display:grid;gap:var(--a3) var(--a4);margin-top:var(--a4);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.kapsam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){.kapsam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kapsam-grup h3{margin:0 0 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--vurgu-metin);font-weight:700}
.kapsam-grup ul{list-style:none;margin:0;padding:0}
.kapsam-grup li{position:relative;padding-left:19px;margin-bottom:8px;font-size:15px;
  color:var(--metin2);line-height:1.45}
.kapsam-grup li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--cizgi)}
.kapsam-grup li b{color:var(--metin);font-weight:700}

/* Öne çıkan tek özellik bloğu (stok önerisi gibi) */
.one-cikan{display:grid;gap:var(--a3);margin-top:var(--a4);padding:var(--a4);border-radius:14px;
  background:var(--yuzey);border:1px solid var(--cizgi2);grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.one-cikan{grid-template-columns:44px minmax(0,1fr);gap:var(--a3) var(--a4);align-items:start}}
.one-cikan .kutu{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--vurgu-yum);color:var(--vurgu-metin)}
.one-cikan h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.one-cikan p{margin:11px 0 0;color:var(--metin2);font-size:16px;max-width:64ch}
.one-cikan p b{color:var(--metin);font-weight:700}
.one-cikan .hesap{margin-top:14px;padding:13px 15px;border-radius:9px;background:var(--yuzey2);
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--metin2)}
.one-cikan .hesap b{color:var(--vurgu-metin)}

/* Detay sayfasına götüren bağlantı */
.devam{display:inline-flex;align-items:center;gap:8px;margin-top:var(--a3);
  font-size:15px;font-weight:700;color:var(--vurgu-metin);text-decoration:none}
.devam:hover{text-decoration:underline}
.devam svg{transition:transform .2s ease}
.devam:hover svg{transform:translateX(3px)}

/* ============================================================================
   TEKLİF FORMU — sunucusuz. Gönderince WhatsApp mesajı hazır açılır.
   Kapanış bölümü koyu zeminli olduğu için alanlar da koyu zemine göre kurulur.
   ============================================================================ */
.teklif{max-width:560px;margin:var(--a4) auto 0;display:grid;gap:14px;text-align:left;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){
  .teklif{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teklif .alan:nth-child(1),.teklif button,.teklif .teklif-not{grid-column:1 / -1}
}
.teklif .alan{display:flex;flex-direction:column;gap:6px;min-width:0}
.teklif label{font-size:13px;font-weight:600;color:var(--metin2);letter-spacing:.01em}
.teklif input,.teklif select{
  width:100%;padding:12px 13px;border-radius:10px;font:inherit;font-size:15.5px;
  color:var(--metin);background:var(--yuzey);border:1px solid var(--cizgi);
  transition:border-color .18s ease,box-shadow .18s ease}
.teklif select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.teklif input:focus,.teklif select:focus{outline:none;border-color:var(--vurgu);
  box-shadow:0 0 0 3px var(--vurgu-yum)}
.teklif input.eksik{border-color:var(--uyari)}
.teklif button{justify-self:stretch;margin-top:4px;border:0;cursor:pointer;font:inherit}
.teklif-not{margin:0;font-size:13px;color:var(--metin3);text-align:center;line-height:1.5}
.teklif-not.uyari{color:var(--uyari);font-weight:600}
.teklif-not.tamam{color:var(--vurgu-metin);font-weight:600}
/* Bot tuzağı — ekranda yok ama display:none DEĞİL (bazı botlar onu atlıyor) */
.teklif .tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- DETAY SAYFASI ---------- */
.detay-bas{padding:clamp(40px,5vw,72px) 0 var(--a4);border-bottom:1px solid var(--cizgi2)}
.detay-bas h1{margin:var(--a2) 0 0;font-size:clamp(30px,4.2vw,48px);line-height:1.1;
  letter-spacing:-.035em;font-weight:800;max-width:20ch;text-wrap:balance}
.detay-bas p{margin:var(--a3) 0 0;max-width:58ch;color:var(--metin2);font-size:17.5px}
.geri{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  color:var(--metin2);text-decoration:none}
.geri:hover{color:var(--metin)}
.icindekiler{list-style:none;margin:var(--a4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.icindekiler a{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--yuzey);
  border:1px solid var(--cizgi2);font-size:14px;font-weight:600;color:var(--metin2);text-decoration:none;
  transition:border-color .2s,color .2s}
.icindekiler a:hover{border-color:var(--vurgu);color:var(--vurgu-metin)}
.bolum{padding:clamp(44px,6vw,76px) 0;border-bottom:1px solid var(--cizgi2)}
.bolum:nth-child(even){background:var(--yuzey2)}
.bolum ul.madde{list-style:none;margin:var(--a3) 0 0;padding:0}
.bolum ul.madde li{display:flex;gap:12px;margin-bottom:14px;color:var(--metin2);font-size:16px;line-height:1.55;max-width:70ch}
.bolum ul.madde svg{color:var(--vurgu-metin);margin-top:3px}
.bolum ul.madde b{color:var(--metin);font-weight:700}
.tablo{width:100%;border-collapse:collapse;margin-top:var(--a3);font-size:15px}
.tablo th,.tablo td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--cizgi2);vertical-align:top}
.tablo th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--metin3)}
.tablo td{color:var(--metin2)}
.tablo td b{color:var(--metin)}
.tablo-sar{width:100%;overflow-x:auto}

/* ---------- BELİRME ---------- */
/* Yalnızca JS çalışıyorsa gizler; aksi hâlde sayfa bomboş görünürdü. */
html.js .sg{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .4s ease,transform .4s var(--yay)}
html.js .sg.ac{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js .sg{opacity:1;transform:none}
}