/* Repmight ürün sitesi. tokens.css üzerine kurulu (önce o yüklenir). Dış font/görsel yok.
   Site değişkenleri --s-* önekiyle burada; ortak belirteçler (panel de kullanır) tokens.css'te.
   Bölümler: temel · tipografi · düğmeler · üst menü · bölümler/arka planlar · kartlar · maketler
   · akış (scroll story) · bento · fiyat · tablo · SSS · form · yazı · alt bilgi · hareket. */

:root{
  --s-wrap:1200px;
  --s-bg:var(--bg);
  --s-card:rgba(255,255,255,.72);
  --s-card-solid:#fff;
  --s-glass:rgba(255,255,255,.72);
  --s-line:rgba(14,17,32,.08);
  --s-line-2:rgba(14,17,32,.14);
  --s-grid:rgba(14,17,32,.055);
  --s-head:rgba(250,250,252,.72);
  --s-glow-a:rgba(124,92,255,.20);
  --s-glow-b:rgba(34,211,238,.16);
  --s-text-grad:linear-gradient(100deg,#5B3DF5 0%,#2F6BFF 45%,#0A8FB0 100%);
  --s-btn:linear-gradient(135deg,#7353FF 0%,#5B55FF 48%,#3D66F5 100%);
  --s-btn-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 24px -8px rgba(91,85,255,.6);
  --s-ink-inv:#0E1120;
  --s-noise-o:.025;
  --s-shot-shadow:0 30px 80px -20px rgba(30,30,80,.35),0 0 0 1px rgba(14,17,32,.06);
  --s-hl:#5B3DF5;
  --s-ok:#15803D;
  --s-code:#0E1120;
  --s-warn:#B45309;
}
:root[data-theme="dark"]{
  --s-card:rgba(22,25,34,.6);--s-card-solid:#12151C;--s-glass:rgba(18,21,28,.6);
  --s-line:rgba(255,255,255,.07);--s-line-2:rgba(255,255,255,.13);--s-grid:rgba(255,255,255,.045);
  --s-head:rgba(11,13,18,.62);--s-glow-a:rgba(124,92,255,.28);--s-glow-b:rgba(34,211,238,.16);
  --s-text-grad:linear-gradient(100deg,#B4A4FF 0%,#7AA8FF 45%,#3BDBF2 100%);
  --s-noise-o:.045;--s-shot-shadow:0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
  --s-hl:#A693FF;--s-ok:#4ADE80;--s-code:#080A0F;--s-warn:#FBBF24;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --s-card:rgba(22,25,34,.6);--s-card-solid:#12151C;--s-glass:rgba(18,21,28,.6);
  --s-line:rgba(255,255,255,.07);--s-line-2:rgba(255,255,255,.13);--s-grid:rgba(255,255,255,.045);
  --s-head:rgba(11,13,18,.62);--s-glow-a:rgba(124,92,255,.28);--s-glow-b:rgba(34,211,238,.16);
  --s-text-grad:linear-gradient(100deg,#B4A4FF 0%,#7AA8FF 45%,#3BDBF2 100%);
  --s-noise-o:.045;--s-shot-shadow:0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
  --s-hl:#A693FF;--s-ok:#4ADE80;--s-code:#080A0F;--s-warn:#FBBF24;
}}

/* --- temel ------------------------------------------------------------------------------ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font:16.5px/1.65 var(--font);color:var(--text);background:var(--s-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01","ss03";overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:var(--s-noise-o);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--s-hl);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
img,svg,video{max-width:100%;height:auto}
img{display:block}
::selection{background:rgba(124,92,255,.32)}
:focus-visible{outline:2px solid var(--s-hl);outline-offset:3px;border-radius:6px}
.wrap{--gut:24px;max-width:var(--s-wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:780px}
.wrap.narrow{max-width:828px}
.center{text-align:center}
.muted{color:var(--muted)}.small{font-size:14px}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--surface);color:var(--text);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}
.skip:focus{left:12px}
hr{border:0;border-top:1px solid var(--s-line);margin:18px 0}
code,pre,kbd{font-family:var(--mono);font-size:.9em}
svg.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}

/* --- tipografi ------------------------------------------------------------------------- */
h1,h2,h3,h4{color:var(--text);margin:0 0 .5em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:720}
h2{font-size:clamp(30px,3.8vw,50px);line-height:1.06;letter-spacing:-.038em}
h3{font-size:19px;line-height:1.3;letter-spacing:-.015em;font-weight:650}
h2.h3{font-size:19px;line-height:1.3;letter-spacing:-.015em}
p{margin:0 0 1em}
.lead{font-size:clamp(17.5px,1.6vw,20.5px);line-height:1.6;color:var(--text-2);letter-spacing:-.006em}
.grad{background:var(--s-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--text-2);padding:5px 12px 5px 10px;border-radius:99px;border:1px solid var(--s-line-2);
  background:var(--s-glass);backdrop-filter:blur(8px);margin-bottom:20px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px var(--brand-2)}
.kicker{display:block;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--s-hl);margin-bottom:12px}
.fh{color:var(--text);font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}

/* --- düğmeler -------------------------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  border-radius:12px;background:var(--s-btn);color:#fff!important;font:600 15.5px/1.2 var(--font);letter-spacing:-.005em;
  border:0;cursor:pointer;box-shadow:var(--s-btn-shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s;
  text-decoration:none!important;white-space:nowrap;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .25s;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 10px 36px -6px rgba(124,92,255,.75)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .2s var(--ease)}.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:var(--s-glass);color:var(--text)!important;box-shadow:0 0 0 1px var(--s-line-2) inset;backdrop-filter:blur(8px)}
.btn.ghost::after{box-shadow:0 0 0 1px var(--s-line-2) inset}
.btn.ghost:hover{filter:none;background:var(--surface-2)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:10px}
.btn.lg{padding:15px 26px;font-size:16.5px;border-radius:14px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.link-arrow{font-weight:600;display:inline-flex;gap:6px;align-items:center}

/* --- üst menü -------------------------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:50;background:var(--s-head);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.site.scrolled{border-bottom-color:var(--s-line)}
header.site .wrap{display:flex;align-items:center;gap:8px;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--text)!important;letter-spacing:-.035em;text-decoration:none!important;margin-right:18px}
.logo svg{width:28px;height:28px;flex:none;filter:drop-shadow(0 4px 12px rgba(124,92,255,.35))}
nav.main{display:flex;align-items:center;gap:2px;flex:1}
nav.main>a,.dd>button{color:var(--text-2);font:500 14.5px/1 var(--font);padding:9px 12px;border-radius:9px;background:none;border:0;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .15s,background .15s}
nav.main>a:hover,.dd>button:hover,.dd.open>button,nav.main>a[aria-current]{color:var(--text);background:var(--s-line)}
.dd{position:relative}
.dd>button svg{width:10px;height:10px;transition:transform .2s;opacity:.7}
.dd.open>button svg,.dd:hover>button svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 8px);left:-8px;min-width:340px;padding:8px;border-radius:16px;background:var(--s-card-solid);
  border:1px solid var(--s-line-2);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);
  transform-origin:top left;transition:opacity .18s,transform .18s var(--ease),visibility .18s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-panel a{display:flex;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none!important;align-items:flex-start}
.dd-panel a:hover{background:var(--surface-2)}
.dd-panel a b{display:block;font-weight:600;font-size:14.5px}
.dd-panel a small{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.dd-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--s-line);color:var(--s-hl)}
.dd-ico svg{width:17px;height:17px}
.hdr-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--text-2)!important;background:none;border:1px solid transparent;cursor:pointer;text-decoration:none!important}
.icon-btn:hover{background:var(--s-line);color:var(--text)!important}
.icon-btn svg{width:18px;height:18px}
.theme-ico .sun{display:none}
:root[data-theme="dark"] .theme-ico .sun{display:block}:root[data-theme="dark"] .theme-ico .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-ico .sun{display:block}:root:not([data-theme="light"]) .theme-ico .moon{display:none}}
details.lang{position:relative}
details.lang summary{list-style:none;cursor:pointer;font:600 13px/1 var(--font);color:var(--text-2);padding:10px;border-radius:10px;display:flex;gap:6px;align-items:center}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary:hover{background:var(--s-line);color:var(--text)}
details.lang summary svg{width:16px;height:16px}
details.lang .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--s-card-solid);border:1px solid var(--s-line-2);border-radius:12px;padding:6px;min-width:150px;box-shadow:var(--shadow-lg);z-index:60}
details.lang .menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--text);font-size:14px;text-decoration:none}
details.lang .menu a:hover{background:var(--surface-2)}
details.lang .menu a.on{font-weight:650;color:var(--s-hl)}
.hdr-login{color:var(--text-2)!important;font-size:14.5px;font-weight:500;padding:9px 10px;border-radius:9px}
.hdr-login:hover{color:var(--text)!important;background:var(--s-line);text-decoration:none}
.menu-toggle{display:none}
.mnav{display:none}
@media (max-width:980px){
  nav.main,.hdr-login,.hide-sm{display:none!important}
  .menu-toggle{display:inline-grid}
  .mnav{display:block;position:fixed;inset:64px 0 0;z-index:49;background:var(--bg);overflow-y:auto;padding:12px 20px 40px;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
  .mnav.open{opacity:1;visibility:visible;transform:none}
  .mnav p{margin:20px 0 6px}
  .mnav a{display:block;padding:11px 4px;border-bottom:1px solid var(--s-line);color:var(--text);font-size:17px;font-weight:500;text-decoration:none}
  .mnav .btn{margin-top:20px;width:100%;border:0;font-size:16px;padding:14px}
  body.menu-open{overflow:hidden}
}
.menu-toggle .x{display:none}.menu-toggle[aria-expanded="true"] .x{display:block}.menu-toggle[aria-expanded="true"] .bars{display:none}

/* --- bölümler ve arka planlar --------------------------------------------------------- */
section{padding:96px 0;position:relative}
section.tight{padding:72px 0}
section.flush-top{padding-top:0}
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head .lead{margin-top:14px}
.soft{background:linear-gradient(180deg,transparent,var(--bg-2) 18%,var(--bg-2) 82%,transparent)}
.bg-grid{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(var(--s-grid) 1px,transparent 1px),linear-gradient(90deg,var(--s-grid) 1px,transparent 1px);
  background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%)}
.glow{position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(80px)}
.glow.a{width:620px;height:420px;left:-120px;top:-160px;background:var(--s-glow-a)}
.glow.b{width:560px;height:420px;right:-160px;top:40px;background:var(--s-glow-b)}
.glow.c{width:820px;height:360px;left:50%;bottom:-200px;margin-left:-410px;background:var(--s-glow-a)}
.page-hero{padding:88px 0 56px;position:relative;isolation:isolate;overflow-x:clip}
.page-hero .lead{max-width:720px}
.page-hero.center .lead{margin-left:auto;margin-right:auto}
.page-hero h1{font-size:clamp(38px,5.2vw,64px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--s-line-2),transparent);border:0;margin:0}

/* grid yardımcıları */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split.top{align-items:start}
.demo-split{grid-template-columns:.9fr 1.1fr;gap:28px}.roi-split{grid-template-columns:1.1fr 1fr;gap:24px}
@media (max-width:980px){.grid2,.split{grid-template-columns:1fr;gap:36px}.grid3{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid3,.grid4{grid-template-columns:1fr}section{padding:76px 0}section.tight{padding:52px 0}.wrap{--gut:20px}}

/* --- kartlar -------------------------------------------------------------------------- */
.card{position:relative;background:var(--s-card);border:1px solid var(--s-line-2);border-radius:var(--r-lg);padding:26px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
a.card{color:inherit;text-decoration:none;display:block}
a.card:hover{border-color:rgba(124,92,255,.45);transform:translateY(-2px);box-shadow:var(--glow)}
.card h3,.card .h3{margin-top:4px}
.card p:last-child{margin-bottom:0}
.spot{--mx:50%;--my:0%}
.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(124,92,255,.13),transparent 45%)}
.spot:hover::before{opacity:1}
.gborder{border:1px solid transparent!important;background:linear-gradient(var(--s-card-solid),var(--s-card-solid)) padding-box,var(--grad) border-box!important}
.ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--grad-soft);border:1px solid var(--s-line-2);color:var(--s-hl);margin-bottom:16px}
.ico svg{width:20px;height:20px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:var(--grad-soft);color:var(--s-hl);font-size:12.5px;font-weight:600;border:1px solid var(--s-line)}
.pill.good{background:var(--ok-bg);color:var(--s-ok)}.pill.warn{background:var(--warn-bg);color:var(--s-warn)}
.pill.ghost{background:transparent;color:var(--muted)}
.card-link{margin-top:14px;font-weight:600;font-size:14px;color:var(--s-hl);display:inline-flex;gap:6px}
a.card:hover .card-link .arr{transform:translateX(3px)}
.arr{display:inline-block;transition:transform .2s var(--ease)}

/* --- kahraman (ana sayfa) ------------------------------------------------------------- */
.hero{padding:96px 0 40px;position:relative;isolation:isolate;overflow-x:clip;text-align:center}
.hero h1{max-width:980px;margin:0 auto 22px}
.hero h1 .grad{display:block}
.hero .lead{max-width:720px;margin:0 auto}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:34px 0 22px}
.trust{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--muted)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:16px;height:16px;color:var(--s-ok);flex:none}
.hero-shot{position:relative;margin:64px auto 0;max-width:1120px;perspective:1600px}
.hero-shot .frame{transform:rotateX(var(--tilt,14deg)) scale(var(--tscale,.96));transform-origin:50% 0;transition:transform .1s linear;will-change:transform}
.hero-shot::before{content:"";position:absolute;left:12%;right:12%;top:4%;bottom:45%;z-index:-1;background:var(--grad);filter:blur(90px);opacity:.38;border-radius:40%}

.hero .note{margin-top:-28px;position:relative}
.shot-mask{padding:0 0 40px;perspective:1600px;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 45%,transparent 92%)}
.note{font-size:12.5px;color:var(--muted);margin-top:14px;display:flex;justify-content:center;gap:6px;align-items:center}
.note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}
.chip-float{position:absolute;z-index:4;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--s-card-solid);
  border:1px solid var(--s-line-2);box-shadow:var(--shadow-lg);font-size:13.5px;text-align:left;max-width:300px;line-height:1.4;color:var(--text)}
.chip-float b{display:block;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.chip-float .dot{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--s-btn)}
.chip-float .dot svg{width:16px;height:16px}
.chip-float.c1{left:-28px;top:22%}
.chip-float.c2{right:-30px;top:44%}
.chip-float.c3{left:6%;bottom:16%}
@media (max-width:1180px){.chip-float.c1{left:8px}.chip-float.c2{right:8px}}
@media (max-width:760px){.chip-float{display:none}.hero{padding-top:64px}.hero-shot{margin-top:44px}.hero-shot .frame{transform:none}}

/* tarayıcı çerçevesi + ekran görüntüsü */
.frame{position:relative;border-radius:16px;background:var(--s-card-solid);box-shadow:var(--s-shot-shadow);overflow:hidden;border:1px solid var(--s-line-2)}
.frame-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--s-line);background:var(--surface-2)}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:var(--s-line-2)}
.frame-bar i:nth-child(1){background:#FF5F57}.frame-bar i:nth-child(2){background:#FEBC2E}.frame-bar i:nth-child(3){background:#28C840}
.frame-bar span{margin:0 auto;font-size:12px;color:var(--muted);padding:4px 14px;border-radius:7px;background:var(--s-line);min-width:220px;text-align:center;transform:translateX(-24px)}
.shot img{width:100%;height:auto;background:var(--surface-2)}
.frame .shot img{border-radius:0}
.shot-card{border-radius:14px;overflow:hidden;border:1px solid var(--s-line-2);box-shadow:var(--s-shot-shadow)}

/* --- maketler (HTML/CSS, örnek veri) --------------------------------------------------- */
.mock{background:var(--s-card-solid);border:1px solid var(--s-line-2);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;font-size:14px;text-align:left}
.mock .bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--s-line);background:var(--surface-2);align-items:center}
.mock .bar b{width:10px;height:10px;border-radius:50%;background:var(--s-line-2)}
.mock .bar em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted);border:1px solid var(--s-line-2);border-radius:99px;padding:1px 8px}
.mock .body{padding:18px}
.mock .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.mock .obs{background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius:12px;padding:10px 12px;margin:10px 0;color:var(--text)}
.mock .obs strong{color:var(--s-ok)}
.mock .mail{border:1px solid var(--s-line-2);border-radius:12px;padding:12px;white-space:pre-line;color:var(--text-2);background:var(--surface-2)}
.mock .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mock .actions span{padding:7px 12px;border-radius:9px;border:1px solid var(--s-line-2);font-weight:600;font-size:13px}
.mock .actions .ok{background:var(--s-btn);color:#fff;border-color:transparent}
.score{font-weight:750;color:var(--s-ok);font-size:22px}
.ring{--v:86;position:relative;width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:750;font-size:17px;
  background:conic-gradient(var(--brand-2) calc(var(--v)*1%),var(--s-line-2) 0)}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--s-card-solid)}
.ring span{position:relative}
.m-tag{font-size:11.5px;color:var(--muted);border:1px solid var(--s-line-2);border-radius:99px;padding:1px 8px;display:inline-block}
.m-search{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--s-line-2);background:var(--surface-2);font-weight:550}
.m-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.m-caret{display:inline-block;width:2px;height:1.1em;background:var(--s-hl);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
.m-list{margin-top:12px;display:grid;gap:8px}
.m-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--s-line);background:var(--s-card)}
.m-pin{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--grad-soft);color:var(--s-hl)}
.m-pin svg{width:15px;height:15px}
.m-item div{flex:1;min-width:0}
.m-item b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-item small{color:var(--muted);font-size:12px}
.m-site{border:1px solid var(--s-line-2);border-radius:12px;overflow:hidden}
.m-site .url{font-size:11.5px;color:var(--muted);padding:7px 12px;border-bottom:1px solid var(--s-line);background:var(--surface-2)}
.m-site .pg{padding:14px 14px 16px;font-size:13px;color:var(--text-2);line-height:1.6}
.m-line{height:7px;border-radius:4px;background:var(--s-line-2);margin:7px 0}
mark.m-hl{background:linear-gradient(90deg,rgba(74,222,128,.28),rgba(34,211,238,.22));color:var(--text);padding:1px 3px;border-radius:4px;
  background-size:0 100%;background-repeat:no-repeat;transition:background-size 1s var(--ease) .4s}
.is-on mark.m-hl,.static mark.m-hl{background-size:100% 100%}
.m-arrow{display:flex;justify-content:center;color:var(--muted);margin:8px 0}
.m-arrow svg{width:18px;height:18px}
.m-mail .subj{font-weight:650;color:var(--text);margin-bottom:6px}
.m-type span{opacity:0;transition:opacity .3s}
.is-on .m-type span,.static .m-type span{opacity:1}
.m-type span:nth-child(2){transition-delay:.25s}.m-type span:nth-child(3){transition-delay:.5s}.m-type span:nth-child(4){transition-delay:.75s}
.m-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.m-steps{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.m-steps span{padding:5px 10px;border-radius:99px;border:1px solid var(--s-line-2);background:var(--s-card)}
.m-steps i{width:16px;height:1px;background:var(--s-line-2)}
.m-thread{display:grid;gap:10px}
.m-msg{padding:12px 14px;border-radius:14px;border:1px solid var(--s-line-2);background:var(--s-card)}
.m-msg.in{border-left:3px solid var(--brand-2)}
.m-msg.out{background:var(--grad-soft)}
.m-msg header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.m-slots{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.m-slots span{font-size:12px;font-weight:600;padding:5px 9px;border-radius:8px;border:1px solid var(--s-line-2);background:var(--s-card-solid)}
.m-slots span.on{border-color:transparent;background:var(--s-btn);color:#fff}
.pop{transform:scale(.6);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1) .5s,opacity .3s .5s}
.is-on .pop,.static .pop{transform:none;opacity:1}
.pulse{animation:pulse 2.4s var(--ease) infinite}
.m-gates{display:grid;gap:8px}
.m-gate{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--s-line);background:var(--s-card);font-size:13.5px}
.m-gate svg{width:18px;height:18px;flex:none;color:var(--s-ok)}
.m-gate em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.m-gate.final{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-bg);font-weight:650}
.wave{display:flex;align-items:center;gap:3px;height:38px}
.wave i{width:3px;border-radius:2px;background:var(--grad);height:30%;animation:wave 1.2s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:-.3s}.wave i:nth-child(3n+1){animation-delay:-.6s}.wave i:nth-child(4n){animation-delay:-.9s}
.call{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--s-line-2);background:var(--s-card)}
.call .av{width:40px;height:40px;border-radius:50%;background:var(--s-btn);display:grid;place-items:center;color:#fff;flex:none}
.call .av svg{width:18px;height:18px}
.tx{font-size:13.5px;display:grid;gap:8px;margin-top:12px}
.tx p{margin:0;padding:9px 12px;border-radius:12px;background:var(--surface-2);max-width:88%}
.tx p.me{margin-left:auto;background:var(--grad-soft)}
.tx b{font-size:11.5px;color:var(--muted);display:block;font-weight:600}
.wa{border-radius:16px;padding:14px;background:color-mix(in srgb,#25D366 10%,var(--s-card-solid));border:1px solid color-mix(in srgb,#25D366 30%,transparent)}
.wa .bubble{background:var(--s-card-solid);border-radius:4px 14px 14px 14px;padding:10px 12px;font-size:13.5px;box-shadow:var(--shadow-sm);max-width:92%}
.wa .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px;gap:8px}

/* --- akış: kaydırmaya bağlı adımlar ---------------------------------------------------- */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.story-steps{position:relative;padding-left:28px}
.story-steps::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:2px;background:var(--s-line-2);border-radius:2px}
.story-steps::after{content:"";position:absolute;left:5px;top:12px;width:2px;height:calc((100% - 24px) * var(--prog,0));background:var(--grad);border-radius:2px;
  box-shadow:0 0 12px var(--brand);transition:height .3s linear}
.step{position:relative;padding:28px 0 44px;min-height:46vh;display:flex;flex-direction:column;justify-content:center;opacity:.38;transition:opacity .4s}
.step.is-active{opacity:1}
.step::before{content:"";position:absolute;left:-28px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--s-line-2);transition:all .3s;z-index:1}
.step.is-active::before{border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 5px rgba(124,92,255,.18),0 0 18px var(--brand)}
.step .num{font:600 13px/1 var(--mono);color:var(--s-hl);letter-spacing:.06em;margin-bottom:12px}
.step h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin-bottom:10px}
.step p{color:var(--text-2);font-size:17px;max-width:460px}
.step ul{margin:6px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--muted);display:grid;gap:6px}
.step li{display:flex;gap:8px}.step li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--brand-2)}
.step .visual-inline{display:none}
.stage{position:sticky;top:calc(50vh - 270px);height:540px}
.stage-in{position:relative;height:100%;border-radius:22px;border:1px solid var(--s-line-2);background:var(--s-glass);backdrop-filter:blur(12px);overflow:hidden;box-shadow:var(--shadow-lg)}
.stage-in::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 80% 0%,var(--s-glow-a),transparent 70%),radial-gradient(400px 300px at 0% 100%,var(--s-glow-b),transparent 70%);opacity:.8}
.visual{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.visual.is-on{opacity:1;transform:none;pointer-events:auto}
.visual .shot-card img{max-height:420px;width:100%;object-fit:cover;object-position:top left}
.visual .lbl{position:absolute;top:16px;left:18px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.visual .lbl b{font:600 11px/1 var(--mono);padding:4px 7px;border-radius:6px;background:var(--grad-soft);color:var(--s-hl)}
@media (max-width:980px){
  .story{grid-template-columns:1fr;gap:0}
  .stage{display:none}
  .story-steps{padding-left:0}.story-steps::before,.story-steps::after,.step::before{display:none}
  .step{min-height:0;opacity:1;padding:20px 0 44px}
  .step .visual-inline{display:block;margin-top:22px;position:relative;border-radius:20px;border:1px solid var(--s-line-2);background:var(--s-glass);padding:18px;overflow:hidden}
}

/* --- bento ---------------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .card{padding:26px;overflow:hidden;display:flex;flex-direction:column}
.bento .card p{color:var(--muted);font-size:15px}
.b2{grid-column:span 2}.b3{grid-column:span 3}.b4{grid-column:span 4}.b6{grid-column:span 6}
.bento .viz{margin-top:auto;padding-top:18px}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.b2,.b3,.b4{grid-column:span 1}.b4.wide,.b6{grid-column:span 2}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.b2,.b3,.b4,.b4.wide,.b6{grid-column:auto}}
.bars{display:flex;align-items:flex-end;gap:5px;height:84px}
.bars i{flex:1;border-radius:4px 4px 2px 2px;background:var(--grad);opacity:.85;height:calc(var(--h)*1%);transform-origin:bottom;transform:scaleY(.08);transition:transform .9s var(--ease)}
.is-in .bars i,.static .bars i{transform:none}
.bars i:nth-child(n){transition-delay:calc(var(--d,0)*50ms)}
.bars-legend{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px}
.mapdots{position:relative;height:110px;border-radius:12px;border:1px solid var(--s-line);overflow:hidden;
  background-image:radial-gradient(var(--s-line-2) 1px,transparent 1px);background-size:14px 14px}
.mapdots i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.2);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.is-in .mapdots i,.static .mapdots i{transform:scale(1)}
.mapdots i:nth-child(2){background:var(--brand-2);box-shadow:0 0 0 4px rgba(34,211,238,.2);transition-delay:.15s}
.mapdots i:nth-child(3){transition-delay:.3s}.mapdots i:nth-child(4){background:var(--brand-2);transition-delay:.45s}.mapdots i:nth-child(5){transition-delay:.6s}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font-size:12.5px;font-weight:550;padding:5px 10px;border-radius:8px;border:1px solid var(--s-line-2);background:var(--surface-2);color:var(--text-2)}
.code{position:relative;border-radius:12px;background:var(--s-code);border:1px solid var(--s-line-2);color:#C9D1E4;font:12.5px/1.6 var(--mono);padding:14px 16px;overflow-x:auto;white-space:pre;margin:0}
.code .k{color:#B4A4FF}.code .s{color:#5EEAD4}.code .c{color:#6B7489}
.copy{position:absolute;top:8px;right:8px;font:600 12px/1 var(--font);padding:6px 9px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#E8EAF0;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.copy:hover{background:rgba(255,255,255,.12)}
.copy.done{color:#4ADE80;border-color:rgba(74,222,128,.4)}
.copy svg{width:13px;height:13px}
.toggle-demo{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:550}
.sw{width:38px;height:22px;border-radius:99px;background:var(--s-btn);position:relative;flex:none}
.sw::after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}

/* fark: jenerik ve araştırılmış mail karşılaştırması */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.vs{grid-template-columns:1fr}}
.vs .mock{box-shadow:none}
.vs .bad-mail{opacity:.86}
.vs .bad-mail .mail{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 55%,transparent);text-decoration-thickness:1.5px}
.vs h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0}
.notes{display:grid;gap:8px;margin-top:14px;font-size:13.5px}
.notes span{display:flex;gap:8px;align-items:flex-start;color:var(--text-2)}
.notes svg{width:16px;height:16px;flex:none;margin-top:3px}
.notes .no svg{color:var(--bad)}.notes .yes svg{color:var(--s-ok)}

/* yatay kaydırmalı şerit */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--gut,24px) 20px;margin:0 calc(-1 * var(--gut,24px));scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.strip>*{scroll-snap-align:start}
.strip .card{height:100%}
.strip-ctl{display:flex;gap:8px}
.strip-ctl button{width:38px;height:38px;border-radius:50%;border:1px solid var(--s-line-2);background:var(--s-glass);color:var(--text);cursor:pointer;display:grid;place-items:center}
.strip-ctl button:hover{background:var(--surface-2)}
.strip-ctl svg{width:16px;height:16px}

/* bant (uyum, son çağrı) */
.band{position:relative;border-radius:28px;overflow:hidden;isolation:isolate;border:1px solid var(--s-line-2);padding:64px;background:var(--s-card-solid)}
.band .bg-grid{-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 20%,transparent 80%)}
@media (max-width:640px){.band{padding:36px 22px;border-radius:22px}}
.cta-band{position:relative;border-radius:28px;padding:80px 40px;text-align:center;overflow:hidden;isolation:isolate;border:1px solid var(--s-line-2);background:var(--s-card-solid)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 50% 120%,rgba(124,92,255,.45),transparent 70%),radial-gradient(400px 200px at 85% -10%,rgba(34,211,238,.25),transparent 70%)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--s-grid) 1px,transparent 1px),linear-gradient(90deg,var(--s-grid) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.cta-band h2{max-width:720px;margin:0 auto 14px}
.cta-band .lead{max-width:600px;margin:0 auto 28px}
.cta-band .mark{width:56px;height:56px;margin:0 auto 22px;filter:drop-shadow(0 10px 30px rgba(124,92,255,.55))}
.cta-band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:640px){.cta-band{padding:56px 22px}}

/* sekmeler (panel turu) */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--s-line-2);background:var(--s-glass);flex-wrap:wrap;justify-content:center}
.tabs button{border:0;background:none;color:var(--text-2);font:550 14px/1 var(--font);padding:10px 14px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.tabs button[aria-selected="true"]{background:var(--s-card-solid);color:var(--text);box-shadow:var(--shadow-sm),0 0 0 1px var(--s-line-2)}
.tabpanel{animation:fadeup .5s var(--ease)}
.tabpanel[hidden]{display:none}
.tabpanel figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:16px}

/* --- fiyat ---------------------------------------------------------------------------- */
.toggle{position:relative;display:inline-flex;border:1px solid var(--s-line-2);border-radius:13px;padding:4px;background:var(--s-glass);backdrop-filter:blur(8px)}
.toggle button{position:relative;z-index:1;border:0;background:none;padding:9px 16px;border-radius:9px;font:600 14px/1 var(--font);cursor:pointer;color:var(--text-2);transition:color .25s}
.toggle button.on{color:#fff}
.toggle .knob{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:9px;background:var(--s-btn);box-shadow:var(--s-btn-shadow);transition:transform .35s var(--ease),width .35s var(--ease)}
.toggle:not(.ready) button.on{background:var(--s-btn)}
.save{display:inline-block;margin-left:6px;font-size:11.5px;padding:2px 7px;border-radius:99px;background:var(--ok-bg);color:var(--s-ok)}
.toggle button.on .save{background:rgba(255,255,255,.2);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{display:flex;flex-direction:column;padding:30px}
.plan h3{font-size:20px;margin:0}
.plan .tag{color:var(--muted);font-size:14.5px;margin:6px 0 20px;min-height:44px}
.plan.hl{background:linear-gradient(var(--s-card-solid),var(--s-card-solid)) padding-box,var(--grad) border-box;border:1px solid transparent;box-shadow:0 30px 80px -30px rgba(124,92,255,.55)}
.plan.hl::after{content:attr(data-badge);position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--s-btn);color:#fff;font-size:12px;font-weight:650;padding:5px 12px;border-radius:99px;white-space:nowrap;box-shadow:var(--s-btn-shadow)}
.price{font-size:46px;font-weight:720;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.price small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.price s{font-size:20px;color:var(--muted);font-weight:500;margin-right:6px;letter-spacing:-.02em}
.price[hidden]{display:none}
.price.swap{animation:fadeup .35s var(--ease)}
.vat{font-size:13px;color:var(--muted);margin:4px 0 18px}
ul.check{list-style:none;padding:0;margin:14px 0}
ul.check li{padding-left:28px;position:relative;margin:9px 0;color:var(--text-2)}
ul.check li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2322C55E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat}
ul.check.cross li::before{background:var(--s-line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B93A5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E") center/12px no-repeat}
.plan ul.check{font-size:15px;margin:0 0 26px}
.plan ul.check strong{color:var(--text)}
.plan .cta{margin-top:auto}
.founder{position:relative;display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:22px 26px;border-radius:20px;text-align:left;overflow:hidden;isolation:isolate;
  border:1px solid transparent;background:linear-gradient(var(--s-card-solid),var(--s-card-solid)) padding-box,var(--grad) border-box}
.founder::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-soft)}
.founder strong{font-size:18px;display:block;margin-bottom:2px}
.founder .seats{margin-left:auto;text-align:center}
.founder .seats b{display:block;font-size:34px;font-weight:750;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.founder .seats small{font-size:12.5px;color:var(--muted)}
.meter{height:6px;border-radius:99px;background:var(--s-line-2);overflow:hidden;margin-top:10px;width:180px}
.meter i{display:block;height:100%;background:var(--grad);border-radius:inherit;width:calc(var(--w)*1%)}
.scale-card{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:20px}
.scale-card>div{flex:1;min-width:260px}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.pay{grid-template-columns:1fr}}
.pay .card{padding:22px}
.pay h3{font-size:16px;display:flex;gap:10px;align-items:center}
.pay .ico{margin:0;width:34px;height:34px}
.mini-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;text-align:left}
@media (max-width:860px){.mini-plans{grid-template-columns:1fr}}
.mini-plans .card{padding:22px}
.mini-plans .price{font-size:34px}

/* --- tablo ---------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--s-line-2);background:var(--s-card);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.cmp th,table.cmp td{padding:14px 18px;border-bottom:1px solid var(--s-line);text-align:left;vertical-align:top}
table.cmp thead th{font-size:13px;font-weight:650;color:var(--muted);letter-spacing:.02em;background:var(--surface-2);position:sticky;top:0}
table.cmp tbody th{font-weight:600;color:var(--text)}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:0}
table.cmp td{color:var(--text-2)}
table.cmp td.us,table.cmp th.us{background:color-mix(in srgb,var(--brand) 7%,transparent);color:var(--text);font-weight:600}
table.cmp thead th.us{color:var(--s-hl)}
table.cmp tbody tr{transition:background .15s}
table.cmp tbody tr:hover{background:var(--s-line)}
table.cmp caption{text-align:left;font-weight:650;padding:14px 18px;color:var(--text)}
table.facts{min-width:0}
table.facts th{width:36%;color:var(--muted);font-weight:600;font-size:14px}
table.facts td{color:var(--text)}
.table-note{font-size:13.5px;color:var(--muted);margin-top:12px}

/* --- SSS ------------------------------------------------------------------------------ */
details.faq{border:1px solid var(--s-line-2);border-radius:14px;background:var(--s-card);margin:10px 0;transition:border-color .2s,background .2s}
details.faq[open]{border-color:rgba(124,92,255,.35);background:var(--s-card-solid)}
details.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;padding:18px 56px 18px 22px;position:relative;letter-spacing:-.01em;border-radius:14px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1px solid var(--s-line-2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B93A5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 6v8M6 10h8'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin:0;padding:0 22px 20px;color:var(--text-2)}
.faq-wrap h2{margin-bottom:26px}

/* --- form ----------------------------------------------------------------------------- */
label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px;color:var(--text)}
label input,label textarea,label select{margin-top:6px;font-weight:400}
input[type=text],input[type=url],input[type=email],input[type=number],select,textarea{width:100%;padding:12px 14px;border:1px solid var(--s-line-2);border-radius:12px;
  font:inherit;font-size:16px;background:var(--surface-2);color:var(--text);transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:var(--ring)}
.result{font-size:44px;font-weight:750;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.notice{border-radius:12px;padding:12px 16px;background:var(--bad-bg);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);font-size:15px}
.kpi{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--s-line-2);color:var(--muted);font-size:15px}
.kpi strong{color:var(--text);font-size:18px;font-variant-numeric:tabular-nums}
.range-row{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center}

/* canlı demo ilerleme */
.progress{display:none;margin-top:18px}
.is-running .progress{display:block}
.is-running .demo-idle{display:none}
.prog-bar{height:4px;border-radius:99px;background:var(--s-line-2);overflow:hidden}
.prog-bar i{display:block;height:100%;width:30%;background:var(--grad);border-radius:inherit;animation:indet 1.4s var(--ease) infinite}
.prog-steps{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.prog-steps li{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:15px;transition:color .3s}
.prog-steps li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--s-line-2);transition:all .3s}
.prog-steps li.now{color:var(--text)}
.prog-steps li.now::before{border-color:var(--brand);border-right-color:transparent;animation:spin .8s linear infinite}
.prog-steps li.done{color:var(--text-2)}
.prog-steps li.done::before{border-color:var(--s-ok);background:var(--s-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat}
.skeleton{display:grid;gap:10px;margin-top:18px}
.skeleton i{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--s-line),var(--s-line-2),var(--s-line));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.reveal-result{animation:fadeup .7s var(--ease)}

/* --- içerik sayfaları: kısa cevap, breadcrumb, ilgili, sözlük, içindekiler ------------- */
.breadcrumb{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--text)}
.breadcrumb li+li::before{content:"/";margin-right:6px;opacity:.5}
.center .breadcrumb ol{justify-content:center}
.tldr{position:relative;background:var(--s-card);border:1px solid var(--s-line-2);border-radius:14px;padding:16px 20px 16px 22px;margin:24px 0 0;font-size:16px;color:var(--text-2);text-align:left;overflow:hidden}
.tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.tldr strong{color:var(--text)}
.related{margin-top:48px;border-top:1px solid var(--s-line);padding-top:28px}
.related h2{font-size:22px;letter-spacing:-.02em}
.related ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.related ul{grid-template-columns:1fr}}
.related li a{display:block;padding:12px 16px;border-radius:12px;border:1px solid var(--s-line-2);background:var(--s-card);color:var(--text);font-weight:550;font-size:15px;text-decoration:none;transition:border-color .2s}
.related li a:hover{border-color:rgba(124,92,255,.45)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.toc a{font-size:13.5px;padding:6px 12px;border:1px solid var(--s-line-2);border-radius:99px;background:var(--s-glass);color:var(--text-2);text-decoration:none;transition:all .2s}
.toc a:hover,.toc a.on{color:var(--text);border-color:rgba(124,92,255,.5)}
.subnav{position:sticky;top:64px;z-index:20;background:var(--s-head);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--s-line)}
.subnav .toc{margin:0;padding:10px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.subnav .toc a{white-space:nowrap}
.glossary .term{padding:28px 0;border-bottom:1px solid var(--s-line);scroll-margin-top:90px}
.glossary dfn{font-style:normal;font-weight:650;color:var(--text)}
.glossary .term:target h2{color:var(--s-hl)}
.letters{display:flex;flex-wrap:wrap;gap:6px}
section[id]{scroll-margin-top:110px}
pre.example,.card pre{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--s-line-2);border-radius:12px;padding:16px;font-size:15px;font-family:inherit;color:var(--text-2)}

/* yazı (blog) */
.post-head{padding:72px 0 32px;position:relative;isolation:isolate;overflow-x:clip}
.post-head h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.04em}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--muted);margin:6px 0 18px}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.post-meta svg{width:15px;height:15px}
.post-layout{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:64px;justify-content:center}
@media (max-width:1100px){.post-layout{grid-template-columns:minmax(0,720px)}.post-aside{display:none}}
.post-aside{position:sticky;top:96px;align-self:start;font-size:14px}
.post-aside p{margin-bottom:10px}
.post-aside a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--s-line-2);color:var(--muted);text-decoration:none;line-height:1.45;transition:color .2s,border-color .2s}
.post-aside a:hover{color:var(--text)}
.post-aside a.on{color:var(--text);border-left-color:var(--brand)}
article.post{font-size:18px;line-height:1.75;color:var(--text-2)}
article.post h2{font-size:clamp(24px,2.4vw,30px);margin:2em 0 .6em;letter-spacing:-.03em;scroll-margin-top:96px}
article.post p,article.post li{color:var(--text-2)}
article.post ul,article.post ol{padding-left:1.3em}
article.post li{margin:.45em 0}
article.post li::marker{color:var(--s-hl)}
article.post .table-scroll{margin:1.4em 0}
article.post table.cmp{font-size:15px}
article.post details.faq summary{font-size:16.5px}
.post-toc-m{display:none;margin:0 0 28px}
@media (max-width:1100px){.post-toc-m{display:flex}}
.readbar{position:fixed;left:0;top:0;height:2px;z-index:60;background:var(--grad);width:100%;transform-origin:0 50%;transform:scaleX(var(--read,0))}
.post-card{display:flex;flex-direction:column;height:100%}
.post-card .meta{font-size:13px;color:var(--muted);display:flex;gap:8px}
.post-card h2{font-size:20px;margin:12px 0 10px;letter-spacing:-.02em;line-height:1.3}
.post-card p{color:var(--muted);font-size:15px}
.post-card .card-link{margin-top:auto}
a.card.feature-post,.feature-post{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:36px}
@media (max-width:860px){.feature-post{grid-template-columns:1fr;padding:26px}}
.feature-post h2{font-size:clamp(24px,2.6vw,34px)}
.post-art{aspect-ratio:16/10;border-radius:16px;position:relative;overflow:hidden;border:1px solid var(--s-line-2);background:var(--grad-soft)}
.post-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--s-grid) 1px,transparent 1px),linear-gradient(90deg,var(--s-grid) 1px,transparent 1px);background-size:28px 28px}
.post-art svg{position:absolute;width:40%;left:30%;top:20%;opacity:.95;filter:drop-shadow(0 20px 40px rgba(124,92,255,.4))}

/* yasal metin */
.legal{max-width:820px;margin:0 auto;padding:56px 24px 80px}
.legal h1{font-size:clamp(32px,4vw,46px);letter-spacing:-.035em}
.legal h2{font-size:22px;letter-spacing:-.02em;margin-top:2em}
.legal h3{font-size:18px;margin-top:1.6em}
.legal p,.legal li{color:var(--text-2);line-height:1.75}
.legal table{border-collapse:collapse;width:100%;font-size:14.5px;margin:1em 0;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--s-line-2);padding:8px 10px;text-align:left;vertical-align:top}
.legal .draft{border-radius:14px;padding:16px 20px;margin:0 0 28px;background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);color:var(--text)}
.legal .docs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 28px}
.legal .docs a{font-size:13.5px;padding:5px 11px;border:1px solid var(--s-line-2);border-radius:99px;color:var(--text-2);text-decoration:none}
.legal .docs a:hover{border-color:rgba(124,92,255,.5);color:var(--text)}

/* bot sayfası, 404 */
.big404{font-size:clamp(120px,22vw,220px);font-weight:800;letter-spacing:-.08em;line-height:.9;background:var(--s-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;margin-bottom:10px}

/* --- alt bilgi ------------------------------------------------------------------------ */
footer.site{position:relative;border-top:1px solid var(--s-line);padding:72px 0 40px;font-size:14.5px;color:var(--muted);margin-top:40px;overflow:hidden;isolation:isolate}
footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
footer.site a{color:var(--muted);display:block;margin:8px 0;text-decoration:none;transition:color .15s}
footer.site a:hover{color:var(--text)}
footer.site .logo{display:inline-flex;margin:0}
footer.site .about{max-width:300px;margin-top:16px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-top:56px;padding-top:24px;border-top:1px solid var(--s-line);font-size:13px}
.seg{display:inline-flex;padding:3px;border-radius:11px;border:1px solid var(--s-line-2);background:var(--s-glass);gap:2px}
.seg a{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap;margin:0!important;padding:6px 10px;border-radius:8px;font-size:13px;color:var(--muted)}
.seg a svg{width:15px;height:15px}
.seg a[aria-current="true"]{background:var(--s-card-solid);color:var(--text);box-shadow:var(--shadow-sm),0 0 0 1px var(--s-line-2)}
.foot-langs{display:flex;gap:4px;flex-wrap:wrap}
.foot-langs a{display:inline-block!important;margin:0!important;padding:4px 10px;border-radius:8px}
.foot-langs a.on{color:var(--text);background:var(--s-line)}
.foot-word{position:absolute;left:50%;bottom:-0.28em;transform:translateX(-50%);font-size:clamp(90px,17vw,240px);font-weight:800;letter-spacing:-.06em;line-height:1;z-index:-1;
  background:linear-gradient(180deg,var(--s-line),transparent 70%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;pointer-events:none;user-select:none}
@media (max-width:900px){footer.site .cols{grid-template-columns:1fr 1fr}footer.site .cols>div:first-child{grid-column:1/-1}}

/* --- tablet ve dokunmatik -------------------------------------------------------------- */
/* 641-980 (dikey tablet): üst çubukta dil ve deneme düğmesi de görünür (menü düğmesiyle birlikte) */
@media (min-width:641px) and (max-width:980px){
  header.site details.lang.hide-sm{display:block!important}
  header.site .btn.hide-sm{display:inline-flex!important}
  header.site .logo{margin-right:auto}
}
.mnav a.btn{display:flex}
/* eğik kahraman görseli dar ekranda kenarlardan taşmasın */
@media (max-width:1180px){.hero-shot{padding:0 16px}.story{gap:44px}}
/* fiyat kartları: dikey tablette 2'li ızgara, tek kalan kart tam satır */
.price{white-space:nowrap}
@media (min-width:981px) and (max-width:1180px){.price{font-size:38px}.plan{padding:26px}}
@media (min-width:641px) and (max-width:980px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .plans>.plan:last-child:nth-child(odd){grid-column:1/-1}
  .plans>.plan:last-child:nth-child(odd) ul.check{columns:2;column-gap:28px}
  .plans>.plan:last-child:nth-child(odd) ul.check li{break-inside:avoid;margin-top:0}
  .plan{padding:26px}
  .price{font-size:38px}
  .plan .tag{min-height:0}
}
/* yazı: yatay tablette içindekiler yanda kalır; dikeyde yazı başlıkla aynı hizada başlar */
@media (min-width:981px) and (max-width:1100px){
  .post-layout{grid-template-columns:minmax(0,1fr) 210px;gap:40px}
  .post-aside{display:block}
  .post-toc-m{display:none}
}
@media (max-width:980px){.post-layout{justify-content:start}}
/* alt bilgi: dikey tablette dört sütun */
@media (min-width:641px) and (max-width:900px){footer.site .cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
/* dokunmatik: açılır menüler yalnızca dokunuşla açılır/kapanır (yapışkan :hover/:focus-within yok) */
@media (hover:none){
  .dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98)}
  .dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
  .dd:hover>button svg{transform:none}
  .dd.open>button svg{transform:rotate(180deg)}
  .spot:hover::before{opacity:0}
}
/* dokunmatik: denetimler en az 44px (görünür düzen değişmeden, iç boşlukla) */
@media (pointer:coarse){
  .icon-btn{width:44px;height:44px}
  details.lang summary,nav.main>a,.dd>button,.hdr-login,.btn,.tabs button,.toggle button{min-height:44px}
  details.lang .menu a{padding:12px 12px}
  .dd-panel a{min-height:44px}
  .toc a{min-height:44px;display:inline-flex;align-items:center}
  .breadcrumb a{display:inline-block;padding:14px 0;margin:-14px 0}
  footer.site .cols>div:not(:first-child) a{padding:11px 0;margin:-5px 0}
  .seg a,.foot-langs a{min-height:44px;display:inline-flex!important;align-items:center}
  .post-aside a{padding-top:12px;padding-bottom:12px}
}

/* --- hareket -------------------------------------------------------------------------- */
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.5)}60%{box-shadow:0 0 0 10px rgba(124,92,255,0)}}
@keyframes wave{0%,100%{height:22%}50%{height:100%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,24px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes show{to{opacity:1;transform:none}}
.in{opacity:0;animation:fadeup .8s var(--ease) forwards;animation-delay:calc(var(--d,0) * 90ms + 60ms)}
.chip-float{opacity:0;animation:fadeup .7s var(--ease) forwards,float 6s ease-in-out infinite;animation-delay:calc(var(--d,0)*150ms + 900ms),calc(var(--d,0)*150ms + 1600ms)}
.glow.a,.glow.b{animation:drift 18s ease-in-out infinite}.glow.b{animation-duration:22s;animation-direction:reverse}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  [data-reveal]:not(.is-in){opacity:0;transform:translateY(22px);animation:show 0s 2.5s forwards}
  [data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
}
@media (prefers-reduced-motion:reduce){
  .in,.chip-float{opacity:1!important;animation:none!important}
  .hero-shot .frame{transform:none!important}
  .visual,.step{transition:none}
  .bars i,.mapdots i{transform:none!important}
  .pop{transform:none;opacity:1}
  mark.m-hl{background-size:100% 100%}
  .m-type span{opacity:1}
}
@media print{header.site,footer.site,.mnav,.readbar,body::before{display:none}}