/* =====================================================================
   Zyver.APP — tanıtım sitesi
   Palet: #1B6DEF · #AFE233 · #E6F0FF · #B2B2B2 · #000000 · #FFFFFF
   ===================================================================== */

/* ---------------------------------------------------------------- 0. Yazı tipleri
   Self-host: üçüncü taraf isteği yok.
   Satoshi — Indian Type Foundry (ITF Free Font License)
   JetBrains Mono — SIL Open Font License 1.1                                   */
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-500-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- 0b. Token */
:root{
  --blue:      #1B6DEF;
  --blue-deep: #1553BE;          /* yalnızca hover/aktif — #1B6DEF'in koyu tonu */
  --lime:      #AFE233;
  --surface:   #E6F0FF;
  --gray:      #B2B2B2;
  --black:     #000000;
  --white:     #FFFFFF;

  /* Türetilmiş: #B2B2B2 metin için yeterli kontrast vermediğinden
     ikincil metinde siyahın opaklığı kullanılır. */
  --ink:       #000000;
  --ink-2:     rgba(0,0,0,.64);
  --ink-3:     rgba(0,0,0,.46);
  --line:      rgba(0,0,0,.11);
  --line-2:    #B2B2B2;

  --r-card: 18px;
  --r-btn:  13px;
  --r-sm:   10px;

  --container: 1280px;
  --gutter: 24px;

  --font-display: 'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---------------------------------------------------------------- 1. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.6;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, hidden'ın aksine gövdeyi kaydırma konteynerine çevirmez —
     position:sticky ve ScrollTrigger bozulmadan kalır. */
  overflow-x:clip;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--black);color:var(--white);padding:10px 16px;border-radius:var(--r-btn);
}
.skip-link:focus{left:16px}

/* ---------------------------------------------------------------- 2. Layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,8.5vw,124px)}

/* ---------------------------------------------------------------- 3. Tipografi */
.h2{
  font-size:clamp(2.05rem,4.1vw,3.375rem);
  line-height:1.05;
  letter-spacing:-.028em;
  font-weight:700;
  max-width:16ch;
}
.h2--light{color:var(--white)}
.lead{
  font-size:clamp(1rem,1.15vw,1.125rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:52ch;
}
.lead--light{color:rgba(255,255,255,.72)}

.mono,.mono-xs{font-family:var(--font-mono);font-weight:500}
.mono-xs{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* Bölüm etiketi — QR "finder pattern" işareti sayfanın imza motifi */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:20px;
}
.eyebrow__mark{
  width:13px;height:13px;flex:none;
  border:2px solid var(--black);
  position:relative;
}
.eyebrow__mark::after{
  content:"";position:absolute;inset:2.5px;background:var(--lime);
}
.eyebrow--dark{color:rgba(255,255,255,.7)}
.eyebrow--dark .eyebrow__mark{border-color:var(--white)}

/* ---------------------------------------------------------------- 4. Buton */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:var(--r-btn);
  font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  white-space:nowrap;
}
.btn--lg{height:54px;padding:0 28px;font-size:1rem}
.btn--full{width:100%}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary:hover{background:var(--blue-deep)}
.btn--line{border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--black);background:var(--white)}
.btn--ghost{color:var(--ink-2);padding-inline:12px}
.btn--ghost:hover{color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* ---------------------------------------------------------------- 5. Logo */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo__mark{width:32px;height:32px;flex:none}
.logo__mark img{width:100%;height:100%;object-fit:contain}
.logo__text{font-size:1.1875rem;font-weight:700;letter-spacing:-.03em}
.logo__tld{color:var(--blue)}
.logo--light{color:var(--white)}
.logo__tld--light{color:var(--lime)}

/* ---------------------------------------------------------------- 6. Navbar */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:var(--white);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.nav__inner{
  display:flex;align-items:center;gap:24px;
  height:78px;
  transition:height .25s ease;
}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav.is-scrolled .nav__inner{height:62px}

.nav__links{display:flex;gap:30px;margin-inline:auto;font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.nav__links a{position:relative;padding-block:6px;transition:color .18s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__actions{display:flex;align-items:center;gap:8px}
.nav__burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--black);transition:transform .22s ease,opacity .22s ease}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.mobilemenu{
  border-top:1px solid var(--line);background:var(--white);
  padding:8px var(--gutter) 32px;
  min-height:calc(100dvh - 62px);overflow-y:auto;
}
body.menu-open{overflow:hidden}
.mobilemenu__links{display:flex;flex-direction:column}
.mobilemenu__links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1.0625rem;font-weight:600}
.mobilemenu__actions{display:grid;gap:10px;margin-top:20px}

/* ---------------------------------------------------------------- 7. Hero */
.hero{padding-top:126px;padding-bottom:clamp(80px,8.4vw,132px)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,53fr) minmax(0,47fr);
  gap:clamp(28px,3.6vw,52px);align-items:center;
}
.hero__title{
  font-size:clamp(2.625rem,5vw,4.375rem);
  line-height:1.02;
  letter-spacing:-.038em;
  font-weight:700;
  margin-bottom:26px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.04em}
.hero__title .line__i{display:block}
.mark-word{position:relative;z-index:0;display:inline-block;white-space:nowrap}
.mark-word__bar{
  position:absolute;left:0;right:.06em;bottom:.06em;height:.13em;
  background:var(--lime);z-index:-1;display:block;
  transform-origin:left center;
}
.hero__lead{font-size:clamp(1.0625rem,1.2vw,1.1875rem);color:var(--ink-2);max-width:46ch;line-height:1.6}
.hero__cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero__trust{margin-top:18px;font-size:.875rem;color:var(--ink-3)}
.hero__trust .dot{color:var(--gray);margin-inline:6px}

.hero__stage{position:relative;min-width:0}
.hero__stage .panel{width:100%}
.hero__stage .phone--hero{
  position:absolute;right:-16px;bottom:-96px;width:24%;min-width:140px;
}
.panel--hero .panel__body{grid-template-columns:12.6em 1fr}
.panel--hero .pcols{grid-template-columns:11em 1fr}

/* ---------------------------------------------------------------- 8. Panel mockup */
/* Tüm iç ölçüler em — panel akışkan biçimde ölçeklenir, taşma olmaz. */
.panel{
  font-size:clamp(7.4px,.86vw,11px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -30px rgba(0,0,0,.35);
}
.panel__bar{
  display:flex;align-items:center;gap:.9em;
  padding:.85em 1.2em;border-bottom:1px solid var(--line);background:#FBFCFE;
}
.panel__dot{width:.6em;height:.6em;border-radius:50%;background:var(--lime);flex:none}
.panel__url{font-family:var(--font-mono);font-size:.95em;color:var(--ink-3);letter-spacing:.02em}
.panel__tag{margin-left:auto}
.panel__body{display:grid;grid-template-columns:12.5em 1fr}

.pnav{border-right:1px solid var(--line);padding:1.2em 1em;background:#FCFDFF}
.pnav__ws{display:flex;align-items:center;gap:.65em;padding-bottom:1.1em;border-bottom:1px solid var(--line);margin-bottom:1.1em}
.pnav__ws-mark{width:1.5em;height:1.5em;border-radius:.4em;background:var(--black);position:relative;flex:none}
.pnav__ws-mark::after{content:"";position:absolute;inset:.42em;background:var(--lime);border-radius:.14em}
.pnav__ws-name{font-size:1.05em;font-weight:700;letter-spacing:-.01em}
.pnav__list li{
  display:flex;align-items:center;gap:.7em;
  padding:.62em .7em;border-radius:.6em;
  font-size:1em;color:var(--ink-2);font-weight:500;
}
.pnav__list li.is-active{background:var(--surface);color:var(--blue);font-weight:700}
.pnav__ico{width:1.15em;height:1.15em;flex:none}
.pnav__list li.is-active .pnav__ico{color:var(--blue)}

.pmain{padding:1.4em 1.5em;display:flex;flex-direction:column;gap:1.1em;min-width:0}
.pmain__head{display:flex;align-items:center;justify-content:space-between;gap:1em}
.pmain__title{font-size:1.45em;font-weight:700;letter-spacing:-.02em}

.demo-tag{
  font-family:var(--font-mono);font-size:.85em;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface);border:1px solid rgba(27,109,239,.18);
  padding:.3em .6em;border-radius:.45em;white-space:nowrap;
}
.demo-tag--sm{font-size:.8em}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.kpi{border:1px solid var(--line);border-radius:.8em;padding:.85em .9em;display:flex;flex-direction:column;gap:.15em}
.kpi__label{font-size:.92em;color:var(--ink-3)}
.kpi__value{font-size:1.65em;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.kpi__meta{font-family:var(--font-mono);font-size:.8em;color:var(--gray)}

.pcols{display:grid;grid-template-columns:1fr 11em;gap:.8em}
.pcard{border:1px solid var(--line);border-radius:.8em;padding:.9em;display:flex;flex-direction:column;gap:.7em}
.pcard--flat{gap:.55em}
.pcard__head{display:flex;align-items:baseline;justify-content:space-between;gap:.6em}
.pcard__title{font-size:1.02em;font-weight:600}
.pcard .mono-xs,.pmain__head .mono-xs{font-size:.82em}

.bars{display:flex;align-items:flex-end;gap:.4em;height:4.6em}
.bars--tall{height:6.4em}
.bars i{flex:1;background:var(--blue);border-radius:.18em .18em 0 0;min-height:.2em;transform-origin:bottom}
.bars i:last-child{background:var(--lime)}
.bars--tall i:last-child{background:var(--blue)}
.bars__x{display:flex;justify-content:space-between;font-size:.8em;color:var(--gray);letter-spacing:.05em}

.pcard--qr{align-items:center;justify-content:center;gap:.6em}
.qrbox{width:6.6em;height:6.6em}
.qrbox--lg{width:11.5em;height:11.5em}
.qrbox svg{width:100%;height:100%}
.qrbox__link{font-size:.8em;color:var(--ink-3);text-align:center;word-break:break-all;text-transform:none;letter-spacing:.01em}

.visits li{display:grid;grid-template-columns:3.6em 1fr auto;align-items:center;gap:.8em;
  padding:.42em 0;border-top:1px solid var(--line);font-size:.98em;color:var(--ink-2)}
.visits li:first-child{border-top:0}
.visits .mono-xs{font-size:.82em;color:var(--gray)}
.tag{font-family:var(--font-mono);font-size:.78em;letter-spacing:.06em;padding:.2em .5em;border:1px solid var(--line);border-radius:.35em;color:var(--ink-3)}
.tag--lime{background:var(--lime);border-color:var(--lime);color:var(--black)}

/* ---------------------------------------------------------------- 9. Telefon mockup */
.phone{font-size:clamp(6px,.62vw,8.4px);position:relative}
.phone__screen{
  border:.9em solid var(--black);
  border-radius:3.4em;
  background:var(--white);
  color:var(--ink);
  aspect-ratio:186/380;
  overflow:hidden;
  position:relative;
}
.phone__screen::before{
  content:"";position:absolute;top:.7em;left:50%;transform:translateX(-50%);
  width:6em;height:.9em;background:var(--black);border-radius:1em;z-index:3;
}
.phone__label{position:absolute;top:-2.6em;left:0;font-size:1.35em}

/* Standart şablon */
.menu-std{padding:3.2em 1.5em 1.5em;font-size:1.6em}
.menu-std__top{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin-bottom:1em}
.menu-std__brand{font-size:1.15em;font-weight:700;letter-spacing:-.02em}
.menu-std__tabs{display:flex;gap:.4em;margin-bottom:1.1em}
.menu-std__tabs span{font-size:.8em;padding:.35em .7em;border-radius:1em;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.menu-std__tabs .is-active{background:var(--blue);border-color:var(--blue);color:var(--white);font-weight:600}
.menu-std__list li{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;
  padding:.62em 0;border-bottom:1px solid var(--line);font-size:.9em}
.menu-std__list b{font-weight:700;white-space:nowrap}
.menu-std__list em{display:block;font-style:normal;font-size:.82em;color:var(--ink-3);margin-top:.15em}
.menu-std--full .menu-std__list li{padding:.7em 0}

/* Minimal şablon */
.menu-min{padding:3.4em 1.6em 1.5em;font-size:1.6em}
.menu-min__brand{display:block;font-size:.86em;font-weight:700;letter-spacing:.2em;margin-bottom:1.6em}
.menu-min__cat{display:block;font-size:.68em;color:var(--gray);margin:1.2em 0 .5em;letter-spacing:.18em}
.menu-min ul li{display:flex;justify-content:space-between;gap:1em;padding:.42em 0;font-size:.88em}
.menu-min ul li b{font-weight:500;color:var(--ink-2)}

/* Editorial şablon */
.menu-edi{padding:3.4em 1.6em 1.5em;font-size:1.6em}
.menu-edi__kicker{display:block;font-size:.62em;color:var(--gray);letter-spacing:.2em}
.menu-edi__brand{font-size:1.7em;font-weight:900;line-height:.95;letter-spacing:-.04em;margin:.35em 0 .5em}
.menu-edi__rule{height:2px;background:var(--black);margin-bottom:1.1em}
.menu-edi__cat{display:block;font-size:.85em;font-weight:700;margin-bottom:.6em}
.menu-edi ul li{display:flex;justify-content:space-between;gap:1em;align-items:baseline;
  padding:.5em 0;border-bottom:1px solid var(--line);font-size:.88em}
.menu-edi ul li b{font-family:var(--font-mono);font-weight:500;font-size:.92em}

/* ---------------------------------------------------------------- 10. Sosyal kanıt */
.proof{border-block:1px solid var(--line);padding-block:22px;overflow:hidden}
.proof__inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.proof__text{font-size:.9375rem;color:var(--ink-2);font-weight:500}
.proof__tags{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.proof__tags li{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--line-2);border-radius:99px;color:var(--ink-2);
}

/* ---------------------------------------------------------------- 11. Sorun / çözüm */
.problem__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.problem__lead .h2{margin-bottom:20px}
.problem__cards{display:grid;gap:14px}
.pcardx{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 28px;background:var(--white);
  display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;
  transition:transform .22s ease,border-color .22s ease;
}
.pcardx:hover{transform:translateY(-4px);border-color:var(--blue)}
.pcardx__ico{grid-row:span 2;width:22px;height:22px;color:var(--blue);margin-top:3px}
.pcardx h3{font-size:1.1875rem;font-weight:700;letter-spacing:-.015em}
.pcardx p{color:var(--ink-2);font-size:1rem;line-height:1.55}

/* ---------------------------------------------------------------- 12. Ürün tanıtımı */
.showcase{background:var(--white)}
.showcase__head{margin-bottom:clamp(36px,4vw,60px)}
.showcase__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,72px);align-items:start}
.showcase__sticky{position:sticky;top:104px}
.panel--show .pmain{min-height:29em}
.panel--show .panel__body{grid-template-columns:12.6em 1fr}
.pmain--stage{position:relative}
.screen{
  position:absolute;inset:0;padding:1.4em 1.5em;
  display:flex;flex-direction:column;gap:1.1em;
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s ease;
}
.screen.is-active{opacity:1;visibility:visible}

.btn-mini{font-size:.95em;font-weight:600;padding:.45em .8em;border:1px solid var(--line-2);border-radius:.5em;color:var(--ink-2)}
.btn-mini--solid{background:var(--blue);border-color:var(--blue);color:var(--white);text-align:center;padding:.65em .8em}

/* Ekran: menü yönetimi */
.mm{display:grid;grid-template-columns:9em 1fr;gap:1.1em;min-height:0}
.mm__cats li{display:flex;justify-content:space-between;gap:.6em;padding:.5em .6em;border-radius:.5em;font-size:.98em;color:var(--ink-2)}
.mm__cats li.is-active{background:var(--black);color:var(--white)}
.mm__cats li.is-active .mono-xs{color:var(--lime)}
.mm__cats .mono-xs{font-size:.82em}
.mm__table{font-size:.98em}
.mm__table th{
  text-align:left;font-family:var(--font-mono);font-size:.82em;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gray);
  padding-bottom:.6em;border-bottom:1px solid var(--line);
}
.mm__table td{padding:.62em 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.mm__table td:first-child{color:var(--ink);font-weight:500}
.mm__table .num{font-family:var(--font-mono);text-align:right;width:5em}
.mm__table th:last-child,.mm__table td:last-child{text-align:right;width:3.4em}
.sw{display:inline-block;width:2em;height:1.1em;border-radius:1em;background:var(--gray);position:relative;vertical-align:middle}
.sw::after{content:"";position:absolute;top:.15em;left:.15em;width:.8em;height:.8em;border-radius:50%;background:var(--white);transition:transform .2s ease}
.sw.is-on{background:var(--blue)}
.sw.is-on::after{transform:translateX(.9em)}

/* Ekran: QR */
.qrscreen{display:grid;grid-template-columns:auto 1fr;gap:1.6em;align-items:center;padding-top:.6em}
.qrscreen__code{border:1px solid var(--line);border-radius:.9em;padding:1.1em;background:var(--white)}
.qrscreen__side{display:flex;flex-direction:column;gap:.55em}
.qrscreen__side .mono-xs{font-size:.82em}
.field{border:1px solid var(--line);border-radius:.5em;padding:.6em .7em;font-family:var(--font-mono);font-size:.92em;color:var(--ink-2);background:#FBFCFE}
.chips{display:flex;gap:.4em}
.chips span{font-family:var(--font-mono);font-size:.85em;padding:.35em .7em;border:1px solid var(--line);border-radius:.4em;color:var(--ink-3)}
.chips .is-active{border-color:var(--black);color:var(--black);background:var(--lime);border-color:var(--lime)}
.qrscreen__note{font-size:.92em;color:var(--ink-3);line-height:1.5;margin-top:.2em}

/* Ekran: analitik */
.an{display:grid;grid-template-columns:1fr 12em;gap:.9em;align-items:start}
.rank li{display:grid;grid-template-columns:1.8em 1fr auto;gap:.6em;align-items:center;
  padding:.45em 0;border-top:1px solid var(--line);font-size:.96em;color:var(--ink-2)}
.rank li:first-child{border-top:0}
.rank .mono-xs{font-size:.8em;color:var(--gray)}
.rank b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}

/* Ekran: şablonlar */
.tpl{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em}
.tpl__item{display:flex;flex-direction:column;gap:.55em}
.tpl__thumb{
  border:1px solid var(--line);border-radius:.7em;height:10.5em;
  padding:1em .9em;display:flex;flex-direction:column;gap:.55em;
  background:var(--white);overflow:hidden;
}
.tpl__title{display:block;height:.85em;width:62%;background:var(--black);border-radius:.15em}
.tpl__chips{display:flex;gap:.3em}
.tpl__chips b{display:block;width:1.7em;height:.55em;border-radius:1em;background:var(--surface)}
.tpl__chips b:first-child{background:var(--blue)}
.tpl__thumb i{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.tpl__thumb i b{display:block;height:.5em;flex:1;max-width:64%;background:rgba(0,0,0,.16);border-radius:.15em}
.tpl__thumb i em{display:block;height:.5em;width:1.3em;background:var(--surface);border-radius:.15em}

.tpl__thumb--min{gap:.75em}
.tpl__thumb--min .tpl__title{width:44%;height:.55em;background:var(--gray)}
.tpl__thumb--min i{padding-bottom:.5em;border-bottom:1px solid var(--line)}
.tpl__thumb--min i b{background:rgba(0,0,0,.28);max-width:52%}
.tpl__thumb--min i em{background:rgba(0,0,0,.14)}

.tpl__thumb--edi .tpl__title{height:1.9em;width:78%}
.tpl__rule{display:block;height:2px;background:var(--black);margin:.15em 0 .35em}
.tpl__thumb--edi i{padding-bottom:.7em;border-bottom:1px solid var(--line)}
.tpl__thumb--edi i b{height:.65em;background:rgba(0,0,0,.22);max-width:58%}

.tpl__item.is-active .tpl__thumb{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.tpl__name{display:flex;align-items:center;gap:.45em;font-size:.98em;font-weight:500}
.tpl__check{width:.7em;height:.7em;background:var(--lime);flex:none}
.tpl__row{display:flex;align-items:center;gap:.75em;margin-top:.5em;flex-wrap:wrap}
.tpl__sep{width:1px;height:1.2em;background:var(--line);margin-inline:.3em}
.tpl__row .mono-xs{font-size:.82em}
.swatches{display:flex;gap:.4em}
.swatches span{width:1.4em;height:1.4em;border-radius:.35em;background:var(--s);border:1px solid var(--line)}
.swatches .is-active{box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--black)}

/* Adım listesi */
.showcase__steps{display:flex;flex-direction:column;padding-block:2vh 10vh}
.step{
  padding:34px 0 34px 28px;border-left:2px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .3s ease,opacity .3s ease;
  opacity:.42;
}
.step__no{font-size:.8125rem;letter-spacing:.14em;color:var(--gray);transition:color .3s ease}
.step h3{font-size:clamp(1.3rem,1.8vw,1.625rem);font-weight:700;letter-spacing:-.02em}
.step p{color:var(--ink-2);font-size:1rem;line-height:1.55;max-width:34ch}
.step.is-active{opacity:1;border-left-color:var(--blue)}
.step.is-active .step__no{color:var(--blue)}
.step.is-done{opacity:.62;border-left-color:var(--lime)}
.step.is-done .step__no{color:var(--ink-3)}
.pnav__list[data-show-nav] li.is-active{background:var(--surface);color:var(--blue);font-weight:700}

/* ---------------------------------------------------------------- 13. Nasıl çalışır */
.how{background:var(--surface)}
.how__head{margin-bottom:clamp(40px,4.5vw,64px)}
.how__steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);padding-top:44px}
.how__track{position:absolute;top:15px;left:0;right:0;height:2px;background:rgba(0,0,0,.1)}
.how__fill{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left center}
.hstep{position:relative;display:flex;flex-direction:column;gap:10px}
.hstep__dot{
  position:absolute;top:-37px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--surface);box-shadow:inset 0 0 0 2px var(--gray);transition:box-shadow .3s ease,background-color .3s ease;
}
.hstep.is-active .hstep__dot{background:var(--lime);box-shadow:inset 0 0 0 2px var(--black)}
.hstep__no{font-size:clamp(2.5rem,4vw,3.25rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--gray);transition:color .3s ease}
.hstep.is-active .hstep__no{color:var(--blue)}
.hstep h3{font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.02em;margin-top:6px}
.hstep p{color:var(--ink-2);font-size:1rem;line-height:1.55;max-width:32ch}

/* ---------------------------------------------------------------- 14. Özellikler */
.features__head{margin-bottom:clamp(36px,4vw,56px)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bcard{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px;display:flex;flex-direction:column;gap:8px;background:var(--white);
  transition:border-color .22s ease,transform .22s ease;
}
.bcard:hover{border-color:var(--blue);transform:translateY(-3px)}
.bcard h3{font-size:1.125rem;font-weight:700;letter-spacing:-.015em}
.bcard p{color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.bcard__ico{width:22px;height:22px;color:var(--blue);margin-bottom:10px}
.bcard--hero{grid-column:span 2;grid-row:span 2;background:var(--surface);border-color:transparent;justify-content:space-between;gap:26px;padding:32px}
.bcard--hero .bcard__txt h3{font-size:clamp(1.375rem,2vw,1.75rem);margin-bottom:8px}
.bcard--hero .bcard__txt p{font-size:1rem;max-width:38ch}
.bcard--hero:hover{border-color:transparent;transform:none}
.bcard--wide{grid-column:span 2}
.bcard--accent{border-color:var(--line)}
.bcard--accent .bcard__ico{color:var(--black)}
.bcard--accent h3::after{
  content:"";display:inline-block;width:8px;height:8px;background:var(--lime);
  margin-left:8px;vertical-align:middle;
}

/* Bento büyük kart görseli */
.bcard__art{margin:0 -8px -14px}
.minipanel{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:10px}
.minipanel__bar{display:flex;gap:.5em;padding:.9em 1.1em;border-bottom:1px solid var(--line)}
.minipanel__bar span{width:.55em;height:.55em;border-radius:50%;background:var(--gray)}
.minipanel__bar span:first-child{background:var(--lime)}
.minipanel__body{display:grid;grid-template-columns:4.5em 1fr 6.4em;gap:1.1em;padding:1.2em}
.minipanel__side{display:flex;flex-direction:column;gap:.6em}
.minipanel__side i{display:block;height:.75em;border-radius:.2em;background:var(--surface)}
.minipanel__side i.on{background:var(--blue)}
.minipanel__main{display:flex;flex-direction:column;gap:.75em}
.minipanel__row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-bottom:.7em;border-bottom:1px solid var(--line)}
.minipanel__row b{display:block;height:.65em;width:58%;background:rgba(0,0,0,.14);border-radius:.2em}
.minipanel__row em{display:block;height:.65em;width:2.2em;background:var(--surface);border-radius:.2em}
.minipanel__qr{width:6.4em;height:6.4em}
.minipanel__qr svg{width:100%;height:100%}

/* ---------------------------------------------------------------- 15. QR bölümü */
.qrsec{background:var(--black);color:var(--white);overflow:hidden}
.qrsec__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:center}
.qrsec__copy .h2{margin-bottom:22px;max-width:18ch}
.qrsec__list{display:flex;flex-direction:column;gap:10px;margin-top:32px;color:rgba(255,255,255,.6)}
.qrsec__list li{display:flex;align-items:center;gap:10px}
.qrsec__list li::before{content:"";width:6px;height:6px;background:var(--lime);flex:none}

.qrsec__phones{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,30px);padding-top:26px}
.qrsec__phones .phone{font-size:clamp(6.5px,.72vw,9.4px)}
.phone--side{width:34%}
.phone--front{width:40%;z-index:2}
.phone--front .phone__screen{border-color:#1A1A1A;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.phone--side .phone__screen{box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.phone__label{color:var(--gray)}
.phone--front .phone__label{color:var(--lime)}

/* ---------------------------------------------------------------- 16. Paketler */
.pricing__head{margin-bottom:clamp(36px,4vw,56px)}
.pricing__head .lead{margin-top:14px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px 28px;display:flex;flex-direction:column;gap:6px;background:var(--white);
}
.plan__name{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.plan__price{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.plan__price b{font-size:clamp(2.1rem,3vw,2.6rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.plan__price span{color:var(--ink-3);font-size:1rem}
.plan__note{margin-top:6px}
.plan__list{display:flex;flex-direction:column;gap:11px;margin:26px 0 30px;padding-top:24px;border-top:1px solid var(--line)}
.plan__list li{position:relative;padding-left:24px;font-size:.9375rem;color:var(--ink-2);line-height:1.5}
.plan__list li b{font-weight:600;color:var(--ink)}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--lime);
}
.plan .btn{margin-top:auto}
.plan--pro{
  border-color:var(--blue);border-width:1.5px;
  padding-block:48px;margin-block:-16px;position:relative;
}
.plan--pro .plan__list li::before{background:var(--blue)}
.plan__badge{
  position:absolute;top:-13px;left:28px;
  background:var(--blue);color:var(--white);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:7px;
}

/* ---------------------------------------------------------------- 17. SSS */
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq__head .h2{margin-bottom:18px}
.faq__head{position:sticky;top:112px}
.fitem{border-top:1px solid var(--line)}
.fitem:last-child{border-bottom:1px solid var(--line)}
.fitem h3{font-size:inherit;font-weight:inherit}
.fitem__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;text-align:left;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-.015em;
  transition:color .18s ease;
}
.fitem__q:hover{color:var(--blue)}
.fitem__ico{position:relative;width:16px;height:16px;flex:none}
.fitem__ico::before,.fitem__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--black);
  transform:translate(-50%,-50%);transition:transform .25s ease,background-color .25s ease;
}
.fitem__ico::before{width:16px;height:1.5px}
.fitem__ico::after{width:1.5px;height:16px}
.fitem.is-open .fitem__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fitem.is-open .fitem__ico::before{background:var(--blue)}
.fitem__a{overflow:hidden;height:0}
.fitem__inner{padding-bottom:26px;max-width:62ch}
.fitem__inner p{color:var(--ink-2);font-size:1.0625rem;line-height:1.62}

/* ---------------------------------------------------------------- 18. Final CTA */
.cta{position:relative;background:var(--surface);padding-block:clamp(72px,8vw,116px);overflow:hidden}
.cta__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
}
.cta__inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__title{max-width:20ch;margin-bottom:20px}
.cta__lead{max-width:56ch}
.cta__actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;justify-content:center}
.cta .btn--line{background:var(--white);border-color:rgba(0,0,0,.16)}
.cta__trust{margin-top:22px;text-transform:none;letter-spacing:.04em}

/* ---------------------------------------------------------------- 19. Footer */
.footer{background:var(--black);color:var(--white);padding-top:72px}
.footer__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:40px 24px;padding-bottom:56px}
.footer__desc{color:rgba(255,255,255,.56);font-size:.9375rem;margin-top:16px;max-width:30ch}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col h4{color:var(--gray);margin-bottom:4px}
.footer__col a{color:rgba(255,255,255,.72);font-size:.9375rem;transition:color .18s ease}
.footer__col a:hover{color:var(--lime)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:26px}
.footer__bottom p{color:rgba(255,255,255,.5);font-size:.8125rem}

/* ---------------------------------------------------------------- 19b. Yasal ve sistem sayfaları */
.utility-page{min-height:100dvh;background:#F7F9FC;display:flex;flex-direction:column}
.utility-nav{position:static;background:var(--white);border-bottom:1px solid var(--line)}
.utility-nav__inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.utility-nav__back{font-size:.9375rem;font-weight:600;color:var(--ink-2);transition:color .18s ease}
.utility-nav__back:hover{color:var(--blue)}
.utility-main{flex:1;padding-block:clamp(48px,7vw,96px)}
.legal-shell{
  max-width:880px;margin-inline:auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(28px,5vw,64px);
  box-shadow:0 24px 70px -58px rgba(0,0,0,.5)
}
.legal-shell h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.035em;margin:10px 0 18px}
.legal-shell h2{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.015em;margin:36px 0 12px}
.legal-shell p,.legal-shell li{color:var(--ink-2);font-size:1rem;line-height:1.72}
.legal-shell p+p{margin-top:12px}
.legal-shell ul{list-style:disc;padding-left:22px;display:grid;gap:8px}
.legal-shell a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal-meta{font-family:var(--font-mono);font-size:.75rem!important;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)!important}
.legal-notice{margin-top:28px;padding:18px 20px;border-left:3px solid var(--lime);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}
.legal-contact{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.utility-footer{padding-block:24px;border-top:1px solid var(--line);background:var(--white)}
.utility-footer__inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--ink-3);font-size:.8125rem}
.utility-footer a{color:var(--ink-2)}
.error-shell{max-width:720px;margin:auto;text-align:center;padding:clamp(32px,5vw,64px)}
.error-code{display:block;font-family:var(--font-mono);font-size:clamp(4rem,14vw,8rem);font-weight:500;line-height:1;color:var(--blue)}
.error-shell h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.035em;line-height:1.08;margin:18px 0 14px}
.error-shell p{color:var(--ink-2);max-width:48ch;margin:0 auto 28px}

/* ---------------------------------------------------------------- 20. İkonlar */
[data-ico]{
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:var(--ico);mask-image:var(--ico);
  background-color:currentColor;
  display:inline-block;
}
[data-ico="grid"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E")}
[data-ico="list"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4' cy='6' r='1.4'/%3E%3Ccircle cx='4' cy='12' r='1.4'/%3E%3Ccircle cx='4' cy='18' r='1.4'/%3E%3C/svg%3E")}
[data-ico="qr"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM18 18h3v3h-3z'/%3E%3C/svg%3E")}
[data-ico="chart"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
[data-ico="layout"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E")}
[data-ico="bolt"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
[data-ico="panel"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2'/%3E%3Cpath d='M9 4v16M2.5 9h6'/%3E%3C/svg%3E")}
[data-ico="devices"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='2' y='4' width='13' height='11' rx='1.5'/%3E%3Cpath d='M6 19h6'/%3E%3Crect x='16.5' y='9' width='5.5' height='11' rx='1.5'/%3E%3C/svg%3E")}
[data-ico="globe"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.7 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E")}
[data-ico="lock"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
[data-ico="life"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='m5.6 5.6 3.9 3.9M14.5 14.5l3.9 3.9M18.4 5.6l-3.9 3.9M9.5 14.5l-3.9 3.9'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------- 21. Animasyon başlangıç durumları */
.js-anim [data-hero],
.js-anim [data-problem-card],
.js-anim [data-feat],
.js-anim [data-plan],
.js-anim .fitem,
.js-anim .hstep,
.js-anim [data-problem-head],
.js-anim .showcase__head,
.js-anim .features__head,
.js-anim .how__head,
.js-anim .pricing__head,
.js-anim .faq__head,
.js-anim .cta__inner > *{opacity:0}
.js-anim .hero__title .line__i{transform:translateY(102%)}
.js-anim [data-hero-bar]{transform:scaleX(0)}
.js-anim [data-hero-panel]{opacity:0;transform:scale(.94)}
.js-anim [data-hero-phone]{opacity:0}
.js-anim .nav{opacity:0}

/* ---------------------------------------------------------------- 22. Responsive */
@media (min-width:1081px){
  .step{min-height:40vh;justify-content:center}
}

@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__stage{max-width:720px}
  .panel{font-size:clamp(8px,1.35vw,11px)}
  .hero__stage .phone--hero{position:static;width:200px;margin:26px auto 0;font-size:8px}
  .hero__lead,.hero__title{max-width:none}
  .problem__grid,.qrsec__grid{grid-template-columns:1fr;gap:40px}
  .qrsec__copy .h2{max-width:24ch}
  .showcase__grid{grid-template-columns:1fr;gap:36px}
  .showcase__sticky{position:static}
  .panel--show{max-width:760px}
  .showcase__steps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .step{
    opacity:1;padding:24px;border:1px solid var(--line);border-left:2px solid var(--line);
    border-radius:var(--r-card);
  }
  .faq__grid{grid-template-columns:1fr;gap:32px}
  .faq__head{position:static}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bcard--hero{grid-column:span 2;grid-row:auto}
  .bcard--wide{grid-column:span 2}
}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__login{display:none}
  .nav__burger{display:flex}
  .nav__actions{margin-left:auto}
  .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .plan--pro{padding-block:40px;margin-block:0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .footer__brand{grid-column:span 2}
  .how__steps{grid-template-columns:1fr;gap:34px;padding-top:0}
  .how__track{display:none}
  .hstep{padding-left:0;border-top:1px solid rgba(0,0,0,.12);padding-top:24px}
  .hstep__dot{position:static;margin-bottom:2px}
}

@media (max-width:760px){
  :root{--gutter:20px}
  body{font-size:16px}
  .hero{padding-top:104px}
  .hero__cta .btn{flex:1 1 auto;min-width:160px}
  .showcase__steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bcard--hero,.bcard--wide{grid-column:span 1}
  .proof__inner{gap:16px}
  .proof__tags{margin-left:0}

  /* Telefonlar yatay kaydırılabilir carousel */
  .qrsec__phones{
    display:grid;grid-auto-flow:column;grid-auto-columns:66%;
    gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:34px var(--gutter) 8px;margin-inline:calc(var(--gutter) * -1);
    scroll-padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .qrsec__phones::-webkit-scrollbar{display:none}
  .qrsec__phones .phone{width:100%;scroll-snap-align:start;font-size:9px;opacity:1}
  .phone--front{order:-1}
}

@media (max-width:480px){
  .panel--hero .panel__body,.panel--show .panel__body,.panel__body{grid-template-columns:1fr}
  .panel--hero .pcols,.pcols{grid-template-columns:1fr}
  .pnav{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .panel{font-size:9.2px}
  .mm{grid-template-columns:1fr}
  .mm__cats{display:flex;gap:.4em;overflow:hidden}
  .an,.qrscreen{grid-template-columns:1fr}
  .qrscreen__code{justify-self:start}
  .pmain__title{font-size:1.3em}
  .hero .eyebrow{font-size:.6875rem;letter-spacing:.1em}
}

/* ---------------------------------------------------------------- 23. Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .showcase__sticky{position:static}
  .step{opacity:1}
}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}