/* WebJoiner site v2 — sections and product mockups */

/* ---------- section rhythm ---------- */
.section{padding:var(--s24) 0}
.section--soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.section--tight{padding:0 0 var(--s16)}
.section--flush{padding-top:0}
.sec-head{max-width:720px;margin-bottom:var(--s12)}
.sec-head h2+.lede{margin-top:var(--s4)}
.narrow{max-width:880px}
.note{margin-top:var(--s6);font-size:var(--fs-14);color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
@media (max-width:720px){.section{padding:var(--s16) 0}.sec-head{margin-bottom:var(--s8)}}

/* ---------- hero ---------- */
.hero{position:relative;padding:var(--s16) 0 var(--s20);overflow:clip}
.hero__mesh{position:absolute;left:0;right:0;top:-30%;height:100%;transform:skewY(-7deg);transform-origin:0 100%;z-index:-1;
  background:
    radial-gradient(38% 55% at 12% 55%,rgba(0,228,159,.26),transparent 70%),
    radial-gradient(30% 50% at 48% 70%,rgba(110,160,255,.20),transparent 70%),
    radial-gradient(28% 45% at 88% 60%,rgba(245,165,36,.20),transparent 70%),
    radial-gradient(40% 60% at 75% 95%,rgba(0,228,159,.14),transparent 70%),
    linear-gradient(180deg,#F4FBF8 0%,#EDF8F3 100%);
  border-bottom:1px solid rgba(0,122,85,.10)}
.hero__in{display:grid;gap:var(--s12)}
.hero__text{max-width:860px}
.hero__kicker{margin-bottom:var(--s5)}
.hero__kicker .pill{font-size:var(--fs-13);padding:3px 12px;background:rgba(255,255,255,.7)}
.hero h1{max-width:18ch}
.hero__lede{margin-top:var(--s6);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--text)}
.hero .cta__btns{margin-top:var(--s8)}
.hero__micro{margin-top:var(--s5);font-size:var(--fs-14);color:var(--muted)}
.hero--sub{padding-bottom:var(--s16)}
.hero--sub h1{font-size:clamp(2rem,1.3rem + 2.8vw,3rem);max-width:20ch}
.hero--center{text-align:center}
.hero--center h1{margin-inline:auto}
.hero--center .lede{margin:var(--s5) auto 0}
.hero--center .hero__mesh{height:120%}
.cta__btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:480px){.hero .cta__btns .btn{flex:1 1 100%}}

/* ---------- browser frame ---------- */
.frame{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;font-size:var(--fs-13);color:var(--text);text-align:left}
.frame__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.frame__dots{display:flex;gap:6px}
.frame__dots i{width:10px;height:10px;border-radius:50%;background:#DCE3EA}
.frame__url{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:3px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted);font-size:var(--fs-12);max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.frame__url svg{width:11px;height:11px;flex:none;color:var(--ok)}

/* ---------- panel app shell (mockup) ---------- */
.app{display:grid;grid-template-columns:196px minmax(0,1fr);min-height:420px}
.app__side{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4) var(--s3);border-right:1px solid var(--line);background:#FBFCFD}
.app__brand{display:flex;align-items:center;gap:8px;padding:4px 6px;font-weight:600;color:var(--ink)}
.app__logo,.wl__logo{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--accent-fill);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.02em}
.app__nav{list-style:none;display:grid;gap:2px}
.app__nav li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);color:var(--muted)}
.app__nav li svg{width:15px;height:15px}
.app__nav li.is-on{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.app__user{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 6px;border-top:1px solid var(--line);color:var(--ink);font-weight:500}
.app__user small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#E6EEF4;color:var(--ink);font-size:11px;font-weight:600}
.app__main{padding:var(--s5) var(--s6) var(--s6);display:grid;gap:var(--s5);align-content:start;min-width:0}
.app__title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.app__title small{display:block;color:var(--muted);font-size:var(--fs-12)}
.app__title b{color:var(--ink);font-size:var(--fs-18);letter-spacing:-.015em}

/* wizard rail */
.rail{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:none}
.rail__step{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;color:var(--muted);font-size:var(--fs-12);font-weight:500}
.rail__step::before{content:"";position:absolute;top:13px;left:calc(-50% + 16px);right:calc(50% + 16px);height:2px;background:var(--line);border-radius:2px}
.rail__step:first-child::before{display:none}
.rail__step[data-state="done"]::before,.rail__step[data-state="active"]::before{background:var(--accent-fill)}
.rail__dot{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--line-strong);font-weight:600;color:var(--muted);font-size:12px}
.rail__dot svg{width:14px;height:14px}
.rail__step[data-state="done"] .rail__dot{background:var(--accent-fill);border-color:var(--accent);color:var(--ink)}
.rail__step[data-state="done"],.rail__step[data-state="active"]{color:var(--ink)}
.rail__step[data-state="active"] .rail__dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* mockup card internals */
.mk{display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;min-width:0}
.frame--step .mk{border:0;border-radius:0;padding:var(--s5)}
.mk__head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mk__head b{color:var(--ink);font-size:var(--fs-14)}
.mk__note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-12);padding-top:4px;border-top:1px dashed var(--line)}
.mk__note svg{width:14px;height:14px}
.mk__alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);background:var(--amber-soft);color:#6B4000;font-size:var(--fs-12);line-height:1.5}
.mk__alert b{color:#6B4000}
.mk__alert svg{width:16px;height:16px;flex:none;margin-top:1px}
.mk__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mk-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-sm);background:var(--accent-fill);color:var(--ink);font-size:var(--fs-12);font-weight:600;white-space:nowrap}
.mk-btn svg{width:13px;height:13px}
.mk-btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.mk-link{color:var(--accent);font-weight:500}
.field{display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:var(--fs-13);min-width:0}
.field em{margin-left:auto;font-style:normal;font-family:var(--font);font-size:11px;color:var(--accent-strong);background:var(--accent-soft);padding:0 6px;border-radius:4px;white-space:nowrap}
.field--search{padding-right:4px}
.field--search svg{width:15px;height:15px;color:var(--muted)}
.field__btn{margin-left:auto;padding:4px 12px;border-radius:5px;background:var(--ink);color:#fff;font-size:var(--fs-12);font-weight:600}
.rows{list-style:none;display:grid;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rows li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.rows li:first-child{border-top:0}
.rows__end{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-12)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.fl{display:grid;gap:4px;font-size:var(--fs-12);color:var(--muted)}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.modes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mode{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-12);color:var(--muted);line-height:1.4}
.mode b{color:var(--ink);font-size:var(--fs-13)}
.mode.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:linear-gradient(180deg,#F2FCF8,#fff)}
.scan{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-12);color:var(--muted)}
.scan svg{width:15px;height:15px;color:var(--ok)}
.scan b{color:var(--ok)}
.seg{display:inline-flex;padding:2px;border-radius:var(--r-sm);background:var(--bg-soft);border:1px solid var(--line);font-size:var(--fs-12)}
.seg span{padding:3px 10px;border-radius:4px;color:var(--muted)}
.seg .is-on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.wa{justify-self:start;max-width:92%;padding:10px 12px;border-radius:10px 10px 10px 2px;background:#E9F7EE;border:1px solid #CDEBD8;color:#15372A;font-size:var(--fs-13);line-height:1.5}
.wa p+p{margin-top:6px}
.wa__kv{font-family:var(--mono);font-size:11.5px}
.wa__kv span{display:inline-block;min-width:64px;font-family:var(--font);color:#3E6B55}
.check{display:flex;align-items:center;gap:8px;font-size:var(--fs-12);color:var(--ink)}
.box{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--accent-fill);color:var(--ink)}
.box svg{width:11px;height:11px}
.health{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.health__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.health__head b{color:var(--ink);font-size:var(--fs-13)}
.health ul{list-style:none;display:grid}
.health li{display:grid;grid-template-columns:18px 56px 1fr;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);font-size:var(--fs-12);color:var(--ink);font-weight:500}
.health li:first-child{border-top:0}
.health li .muted{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ok,.warn{display:grid;place-items:center;width:18px;height:18px;border-radius:50%}
.ok{background:var(--ok-soft);color:var(--ok)}
.warn{background:var(--amber-soft);color:var(--amber)}
.ok svg,.warn svg{width:11px;height:11px}

/* tables (mockup + content) */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.tbl th,.tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{font-size:var(--fs-12);font-weight:500;color:var(--muted);background:var(--bg-soft)}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl .tr{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame .tbl-wrap{overflow:hidden}
.frame .tbl{table-layout:fixed}
.frame .tbl td,.frame .tbl th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame .tbl th:nth-child(1){width:15%}.frame .tbl th:nth-child(2){width:15%}.frame .tbl th:nth-child(4){width:24%}

/* ---------- hero mockup composition ---------- */
.hero-mock{position:relative;margin-top:var(--s4)}
.frame--hero{position:relative;z-index:1}
.float{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);font-size:var(--fs-13)}
.hero-mock:not(.hero-mock--wiz){margin-bottom:var(--s8)}
.float--health{left:-12px;bottom:-40px;width:230px;overflow:hidden}
.health__mini{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);padding:12px;gap:6px}
.health__mini li{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);font-size:var(--fs-12)}
.float--wa{right:-12px;bottom:-40px;width:250px;padding:12px 14px}
@media (min-width:1101px){
  .hero-mock:not(.hero-mock--wiz){margin-bottom:64px}
  .hero-mock:not(.hero-mock--wiz) .frame--hero{margin-right:200px}
  .float--wa{right:0;bottom:auto;top:-44px;width:280px}
  .float--health{left:auto;right:24px;bottom:-64px;width:250px}

}
.float--wa p{margin-top:6px;color:var(--text);line-height:1.5}
.float__top{display:flex;align-items:center;gap:8px}
.float__top b{color:var(--ink)}
.float__top .muted{margin-left:auto}
.wa-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--wa);color:#fff}
.wa-ico svg{width:14px;height:14px}
.hero-mock--wiz .app{min-height:0}
.sum{display:grid}
.sum>div{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.sum>div:first-child{border-top:0}
.sum dt{color:var(--muted);font-size:var(--fs-12)}
.sum dd{margin:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the single orchestrated load moment: rail completes, then floating cards land */
@media (prefers-reduced-motion:no-preference){
  .rail--hero .rail__step[data-state="done"] .rail__dot{animation:wj-fill .45s var(--ease) both}
  .rail--hero .rail__step[data-state="done"]::before,.rail--hero .rail__step[data-state="active"]::before{transform-origin:0 50%;animation:wj-line .4s var(--ease) both}
  .rail--hero .rail__step:nth-child(1) .rail__dot{animation-delay:.35s}
  .rail--hero .rail__step:nth-child(2)::before{animation-delay:.6s}
  .rail--hero .rail__step:nth-child(2) .rail__dot{animation-delay:.85s}
  .rail--hero .rail__step:nth-child(3)::before{animation-delay:1.1s}
  .rail--hero .rail__step:nth-child(4)::before{animation-delay:1.35s}
  .rail--hero .rail__step:nth-child(4) .rail__dot{animation-delay:1.6s}
  .rail--hero .rail__step:nth-child(5)::before{animation-delay:1.85s}
  .rail--hero .rail__step:nth-child(5) .rail__dot{animation-delay:2.1s}
  .rail--hero .rail__step[data-state="active"] .rail__dot{animation:wj-ring 2.4s var(--ease) 1.4s infinite}
  .float--health{animation:wj-land .6s var(--ease) 1.5s both}
  .float--wa{animation:wj-land .6s var(--ease) 1.8s both}
}
@keyframes wj-fill{from{background:#fff;border-color:var(--line-strong);color:transparent}}
@keyframes wj-line{from{transform:scaleX(0)}}
@keyframes wj-ring{0%,100%{box-shadow:0 0 0 4px var(--accent-soft)}50%{box-shadow:0 0 0 7px rgba(227,250,241,.6)}}
@keyframes wj-land{from{opacity:0;transform:translateY(12px)}}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app__side{display:none}
}
@media (max-width:600px){
  .app__main{padding:var(--s4)}
  .float--wa{display:none}
  .float--health{position:relative;left:auto;bottom:auto;width:auto;margin:-16px 12px 0}
  .hero-mock:not(.hero-mock--wiz){margin-bottom:0}
  .frame .tbl th:nth-child(1){width:24%}.frame .tbl th:nth-child(2){width:18%}
  .rail__label{font-size:10.5px}
  .modes{grid-template-columns:1fr}
  .modes .mode:not(.is-on){display:none}
  .frame .tbl th:nth-child(4),.frame .tbl td:nth-child(4){display:none}
  .form2{grid-template-columns:1fr}
  .frame__url{max-width:100%}
}

/* ---------- infrastructure strip ---------- */
.infra{padding:var(--s8) 0 var(--s4)}
.infra__in{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap}
.infra__h{font-size:var(--fs-14);font-weight:500;color:var(--muted);letter-spacing:0;max-width:16ch;line-height:1.4}
.infra__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s4) var(--s10);flex:1}
.infra__list li{display:grid;gap:2px}
.infra__list b{font-size:var(--fs-18);font-weight:650;color:#3A4B5C;letter-spacing:-.02em}
.infra__list span{font-size:var(--fs-12);color:var(--muted)}
@media (max-width:720px){.infra__in{display:grid;gap:var(--s4)}.infra__h{max-width:none}.infra__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}.infra__list b{font-size:var(--fs-16)}}

/* ---------- compare ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.cmp__col{padding:var(--s8)}
.cmp__col h3{margin-bottom:var(--s5);font-size:var(--fs-18)}
.cmp__col ul{list-style:none;display:grid;gap:var(--s4)}
.cmp__col li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;line-height:1.5}
.cmp__col li svg{width:22px;height:22px;padding:4px;border-radius:50%;margin-top:1px}
.cmp__col--before{background:var(--bg-soft);color:var(--muted)}
.cmp__col--before h3{color:var(--muted)}
.cmp__col--before li svg{background:#EDF0F3;color:#7A8796}
.cmp__col--after{background:#fff;border-left:1px solid var(--line);position:relative}
.cmp__col--after::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent-fill)}
.cmp__col--after li{color:var(--ink)}
.cmp__col--after li svg{background:var(--accent-soft);color:var(--accent)}
@media (max-width:800px){.cmp{grid-template-columns:1fr}.cmp__col{padding:var(--s6)}.cmp__col--after{border-left:0;border-top:1px solid var(--line)}}

/* ---------- stepper (tabs) ---------- */
.stepper{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--s10);align-items:start}
.stepper__tabs{display:grid;gap:4px}
.stepper__tab{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:var(--r-md);background:none;text-align:left;font:inherit;color:var(--muted);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.stepper__tab:hover{background:rgba(255,255,255,.7)}
.stepper__tab b{display:block;color:var(--ink);font-size:var(--fs-16);font-weight:600}
.stepper__d{display:block;margin-top:4px;font-size:var(--fs-14);line-height:1.5}
.stepper__n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;font-weight:600;font-size:var(--fs-14);color:var(--muted)}
.stepper__tab[aria-selected="true"]{background:#fff;border-color:var(--line);box-shadow:var(--sh-2)}
.stepper__tab[aria-selected="true"] .stepper__n{background:var(--accent-fill);border-color:var(--accent);color:var(--ink)}
.stepper__tab[aria-selected="true"] .stepper__d{color:var(--text)}
.stepper__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stepper__panel:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--r-lg)}
.stepper__pd{display:none}
@media (min-width:901px){.stepper__panels{position:sticky;top:calc(var(--header-h) + 24px)}}
.js .stepper__panel:not([hidden]){animation:wj-panel .35s var(--ease)}
@keyframes wj-panel{from{opacity:0;transform:translateY(6px)}}
@media (max-width:900px){
  .stepper{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .stepper__tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:6px;padding:2px 2px 8px;scrollbar-width:thin}
  .stepper__tab{grid-template-columns:24px auto;gap:8px;align-items:center;padding:8px 14px 8px 8px;border-color:var(--line);background:#fff;border-radius:var(--r-pill)}
  .stepper__n{width:24px;height:24px;font-size:12px}
  .stepper__tab b{font-size:var(--fs-14)}
  .stepper__d{display:none}
  .stepper__pd{display:block;margin-bottom:var(--s4);color:var(--text)}
}

/* ---------- feature grid (hairline grid) ---------- */
.fgrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fgrid__cell{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s8);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.section--soft .fgrid__cell{background:transparent}
.fgrid__cell p{color:var(--muted);font-size:var(--fs-16);line-height:1.55}
.fgrid__cell .more,.fgrid__soon{margin-top:auto;padding-top:var(--s2);font-size:var(--fs-14)}
.fgrid__soon{color:var(--muted)}
.fgrid__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);margin-bottom:var(--s2)}
.fgrid__ico svg{width:20px;height:20px}
#ozellikler .fgrid__cell:first-child .fgrid__ico{background:var(--accent-fill);color:var(--ink)}
@media (max-width:960px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}.fgrid__cell{padding:var(--s6)}}

/* ---------- reseller ---------- */
.reseller{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s16);align-items:center}
.reseller__text .lede,.sec__text .lede{margin-top:var(--s4)}
.pillars{display:grid;gap:var(--s5);margin:var(--s8) 0}
.pillars>div{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line-strong)}
.pillars dt{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:var(--fs-18)}
.pillars dt svg{width:20px;height:20px;color:var(--accent)}
.pillars dd{margin:0;color:var(--text)}
.roles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.roles li{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:var(--fs-13);color:var(--muted);line-height:1.45}
.roles b{color:var(--ink);font-size:var(--fs-14)}
.wl{position:relative;min-height:540px}
.wl__card{position:absolute;display:grid;gap:6px;width:min(280px,48%);padding:var(--s6);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);font-size:var(--fs-13)}
.wl__card--a{--brand:var(--accent);left:0;top:40px;z-index:2}
.wl__card--b{--brand:#6A3FC4;right:0;top:0;transform:rotate(2deg);opacity:.96}
.wl__brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);color:var(--ink);font-size:var(--fs-16)}
.wl__card .wl__logo{background:var(--brand)}
.wl__label{font-size:var(--fs-12);color:var(--muted)}
.wl__field{display:block;padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--ink);min-height:32px}
.wl__btn{margin-top:var(--s3);padding:8px;border-radius:var(--r-sm);background:var(--brand);color:#fff;text-align:center;font-weight:600}
.wl__url{margin-top:var(--s2);color:var(--muted);font-size:var(--fs-12);text-align:center}
.wl__prices{position:absolute;left:22%;bottom:0;z-index:3;width:320px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden}
.wl__ph{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.wl__ph b{color:var(--ink);font-size:var(--fs-14)}
.wl__prices .tbl th:first-child,.wl__prices .tbl td:first-child{padding-left:14px}
.pos{color:var(--ok);font-weight:600}
@media (max-width:1000px){.reseller{grid-template-columns:1fr;gap:var(--s10)}}
@media (max-width:600px){
  .pillars>div{grid-template-columns:1fr;gap:4px}
  .roles{grid-template-columns:1fr}
  .wl{min-height:0;display:grid;gap:var(--s4)}
  .wl__card,.wl__prices{position:relative;inset:auto;width:auto;transform:none}
  .wl__card--b{display:none}
}

/* ---------- security (tinted panel, not a dark band) ---------- */
.sec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s12);padding:var(--s12);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--tint),#F3FBF7);border:1px solid #CDEDE0}
.sec__list{display:grid;gap:0;margin-top:var(--s8)}
.sec__item{display:grid;grid-template-columns:132px 1fr;gap:var(--s4);padding:14px 0;border-top:1px solid #CFE3E8}
.sec__item dt{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.sec__item dt svg{width:18px;height:18px;color:var(--accent)}
.sec__item dd{margin:0;color:var(--text);font-size:var(--fs-16)}
.sec__log{align-self:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.sec__loghead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.sec__loghead b{color:var(--ink)}
.sec__log .tbl-wrap{border:0;border-radius:0}
.tbl--log td{white-space:nowrap;font-size:var(--fs-12)}
@media (max-width:1000px){.sec{grid-template-columns:1fr;padding:var(--s8)}}
@media (max-width:600px){.sec{padding:var(--s6) var(--s4)}.sec__item{grid-template-columns:1fr;gap:4px}.tbl--log th:nth-child(2),.tbl--log td:nth-child(2){display:none}}

/* ---------- roadmap ---------- */
.roadmap{display:grid;grid-template-columns:200px 1fr;gap:var(--s6);align-items:start;padding-top:var(--s8);border-top:1px solid var(--line)}
.roadmap h3{font-size:var(--fs-16)}
.roadmap ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.roadmap li{display:grid;gap:6px;justify-items:start;align-content:start}
.roadmap b{color:var(--ink);font-size:var(--fs-14)}
@media (max-width:900px){.roadmap{grid-template-columns:1fr}.roadmap ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- pricing ---------- */
.pteaser{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s10);align-items:center;padding:var(--s12);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);background:#fff}
.pteaser .lede{margin-top:var(--s4)}
.pteaser .cta__btns{margin-top:var(--s8)}
.pteaser__price{display:grid;justify-items:center;gap:6px;padding:var(--s8);border-radius:var(--r-md);background:var(--bg-soft);border:1px solid var(--line)}
.price{display:flex;align-items:baseline;gap:2px;color:var(--ink);font-size:clamp(3rem,2.2rem + 3vw,4.5rem);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.price__cur{font-size:.5em;align-self:flex-start;margin-top:.2em;letter-spacing:0}
.price__per{font-size:var(--fs-18);font-weight:500;color:var(--muted);letter-spacing:-.01em;margin-left:6px}
.price__from{align-self:center;font-size:var(--fs-14);font-weight:500;color:var(--muted);letter-spacing:0;margin-right:8px}
@media (max-width:860px){.pteaser{grid-template-columns:1fr;padding:var(--s8) var(--s6)}}

.plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s10);align-items:start}
.plan__card{position:relative;padding:var(--s10);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden}
.plan__card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.plan__head h2{font-size:var(--fs-32)}
.plan__head p{margin-top:var(--s2)}
.price--lg{margin-top:var(--s8)}
.plan__vat{margin-top:var(--s3);color:var(--muted);font-size:var(--fs-14)}
.plan__btn{width:100%;margin-top:var(--s3)}
.plan__vat+.plan__btn{margin-top:var(--s8)}
.plan__inc-h{margin-top:var(--s10);font-size:var(--fs-14);color:var(--muted);font-weight:500}
.plan__inc{list-style:none;display:grid;gap:10px;margin-top:var(--s3)}
.plan__inc li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.plan__inc svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:3px}
.plan__side{display:grid;gap:var(--s3)}
.note-card{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.note-card>svg{width:40px;height:40px;padding:10px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent)}
.note-card h3{font-size:var(--fs-16)}
.note-card p{margin-top:4px;color:var(--muted);font-size:var(--fs-14)}
@media (max-width:900px){.plan{grid-template-columns:1fr}.plan__card{padding:var(--s8) var(--s6)}}

.ctbl .tbl{font-size:var(--fs-14)}
.ctbl .tbl th,.ctbl .tbl td{padding:12px 16px}
.ctbl tbody th{font-weight:400;color:var(--ink)}
.ctbl td{width:160px}
.ctbl__group th{background:var(--bg-soft);font-weight:600!important;color:var(--ink);font-size:var(--fs-13)}
.st{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:500;font-size:var(--fs-13)}
.st svg{width:16px;height:16px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s12);align-items:start}
.sec-head--side{position:sticky;top:calc(var(--header-h) + 32px);margin:0}
.sec-head--side .lede+p,.sec-head--side h2+p+p{margin-top:var(--s5)}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5) 0;cursor:pointer;list-style:none;color:var(--ink);font-weight:600;font-size:var(--fs-18);letter-spacing:-.01em;border-radius:4px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__item summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);transition:transform var(--t) var(--ease),background var(--t-fast)}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq__item summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--t) var(--ease)}
.faq__item[open] summary i{background:var(--accent-soft);border-color:var(--accent-line)}
.faq__item[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 var(--s12) var(--s6) 0;color:var(--text);max-width:68ch}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:var(--s6)}.sec-head--side{position:static}.faq__a{padding-right:0}.faq__item summary{font-size:var(--fs-16)}}

/* ---------- CTA band + application ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s8);padding:var(--s12);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2)}
.cta h2{font-size:var(--fs-32)}
.cta .lede{margin-top:var(--s3)}
.section--cta{padding-top:0}
@media (max-width:600px){.cta{padding:var(--s8) var(--s6)}.cta__btns .btn{flex:1 1 100%}}
.section--apply{background:var(--bg-soft);border-top:1px solid var(--line)}
.apply{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s16);align-items:start}
.apply .lede{margin-top:var(--s4)}
.apply .cta__btns{margin-top:var(--s8)}
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6);margin-top:var(--s10);padding-top:var(--s8);border-top:1px solid var(--line-strong)}
.contact dt{font-size:var(--fs-13);color:var(--muted)}
.contact dd{margin:4px 0 0;color:var(--ink);font-weight:500}
.proc{list-style:none;display:grid;padding:var(--s8);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.proc li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:var(--s4);padding-bottom:var(--s6)}
.proc li:last-child{padding-bottom:0}
.proc li:not(:last-child)::after{content:"";position:absolute;left:17px;top:38px;bottom:4px;width:2px;background:var(--line)}
.proc__n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.proc h3{font-size:var(--fs-16);margin-top:6px}
.proc p{margin-top:4px;color:var(--muted);font-size:var(--fs-14)}
@media (max-width:900px){.apply{grid-template-columns:1fr;gap:var(--s10)}}
/* İletişim formu (JS only: without JS the channels above are the way in) */
html:not(.js) .lform__wrap{display:none}
.lform__alt{margin-top:var(--s4)}
.js .lform__alt{display:none}
.js .lform__alt.is-shown{display:block}
.lform__social{margin-top:var(--s8)}
.lform__social .social{margin-top:var(--s3)}
.lform{padding:var(--s8);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.lform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
.field{display:grid;gap:6px;align-content:start;min-width:0}
.field--mesaj,.field--konu{grid-column:1/-1}
.field label{font-size:var(--fs-14);font-weight:500;color:var(--ink)}
.field__req{color:var(--err)}
.field__opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);font:400 var(--fs-16)/1.4 var(--font);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field textarea{resize:vertical;min-height:140px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--faint)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field [aria-invalid="true"]{border-color:var(--err)}
.field [aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px var(--err-soft)}
.field__err{font-size:var(--fs-13);color:var(--err)}
.field--check{grid-template-columns:auto 1fr;column-gap:var(--s3);margin-top:var(--s6);align-items:start}
.field--check input{width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--accent)}
.field--check label{font-weight:400;color:var(--text)}
.field--check .field__err{grid-column:2}
.lform__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lform__ts:not(:empty){margin-top:var(--s5)}
.lform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.lform__foot .btn[disabled]{opacity:.6;cursor:progress}
.lform__status{font-size:var(--fs-14);color:var(--muted)}
.lform__done{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);padding:var(--s8);background:#fff;border:1px solid var(--accent-line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.lform__done[hidden]{display:none}
.lform__done>svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.lform__done p{margin-top:4px;color:var(--muted)}
@media (max-width:600px){.lform{padding:var(--s6) var(--s5)}.lform__grid{grid-template-columns:1fr}.lform__foot .btn{flex:1 1 100%}}
@media (max-width:480px){.contact{grid-template-columns:1fr}.proc{padding:var(--s6) var(--s5)}}

/* ---------- product page ---------- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-14);color:var(--muted);margin-bottom:var(--s5)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--faint)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.steptoc{position:sticky;top:var(--header-h);z-index:5;margin:0 calc(var(--gutter) * -1) var(--s4);padding:10px var(--gutter);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.steptoc ol{list-style:none;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.steptoc a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink);font-size:var(--fs-14);font-weight:500;white-space:nowrap;background:#fff}
.steptoc a span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg-soft);font-size:12px;color:var(--muted)}
.steptoc a:hover{text-decoration:none;border-color:var(--line-strong)}
.steptoc a[aria-current="true"]{border-color:var(--accent);color:var(--accent-strong)}
.steptoc a[aria-current="true"] span{background:var(--accent-fill);color:var(--ink)}
.dsteps{list-style:none}
.dstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s16);align-items:center;padding:var(--s16) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 72px)}
.dstep:last-child{border-bottom:0}
.dstep--flip .dstep__text{order:2}
.dstep__n{display:flex;align-items:center;gap:10px;color:var(--accent-strong);font-size:var(--fs-14);font-weight:500;margin-bottom:var(--s3)}
.dstep__n span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-fill);color:var(--ink);font-weight:600}
.dstep h3{font-size:var(--fs-32);letter-spacing:-.03em}
.dstep .lede{margin-top:var(--s3)}
.dstep__cols{display:grid;gap:var(--s5);margin-top:var(--s8)}
.dstep__cols h4{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--fs-14)}
.dstep__cols h4 svg{width:16px;height:16px;color:var(--accent)}
.dstep__cols ul{padding-left:24px;display:grid;gap:4px;color:var(--text);font-size:var(--fs-16)}
.dstep__cols li::marker{color:var(--faint)}
@media (max-width:960px){.dstep{grid-template-columns:1fr;gap:var(--s8);padding:var(--s12) 0}.dstep--flip .dstep__text{order:0}}
.detect{margin-top:var(--s12)}
.detect__h{margin-bottom:var(--s4)}
.detect .tbl{font-size:var(--fs-14);min-width:560px}
.detect .tbl td{padding:12px 16px}

/* reveal only for mockups; content never hidden without JS */
.frame--step{box-shadow:var(--sh-2)}

/* ================= v2.1 components (full site) ================= */
.h2{font-size:var(--fs-40);line-height:1.12;letter-spacing:-.03em}
.pill--xs{padding:0 7px;font-size:11px;line-height:18px;vertical-align:1px;margin:0 2px}
.sec__more{margin-top:var(--s6)}
.hero--sub .hero__in:not(:has(.hero-mock)){gap:0}
.cta__btns--center{justify-content:center;margin-top:var(--s8)}
.inline-ico{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:6px}

/* feature rows without numbering */
.dstep--plain h3{font-size:var(--fs-32)}
.ticks{list-style:none;display:grid;gap:10px;margin-top:var(--s6)}
.ticks li{position:relative;padding-left:28px;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* grid variants */
.fgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid--4 .fgrid__cell{padding:var(--s6)}
@media (max-width:1100px){.fgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fgrid--4,.fgrid--2{grid-template-columns:1fr}}
.secgroup+.secgroup{margin-top:var(--s12)}
.secgroup__h{margin-bottom:var(--s4);font-size:var(--fs-18)}

/* checklist inside a card */
.card-list{padding:var(--s8);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.card-list .plan__inc{margin:0;gap:14px}
.plan__inc--sm{margin-top:var(--s5);gap:6px;font-size:var(--fs-14);justify-self:stretch}
.pteaser__price .price{justify-content:center}
.contact--card{margin:0;padding:var(--s8);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.prose p{max-width:68ch;font-size:var(--fs-18);line-height:1.65;color:var(--text)}
.prose p+p{margin-top:var(--s5)}

/* mockup extras */
.actions{display:flex;flex-wrap:wrap;gap:6px}
.fix{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.fix__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink)}
.fix__old{text-decoration:line-through;color:var(--err)}
.fix__new{color:var(--ok);font-weight:600}
.fix__arrow{width:14px;height:14px;color:var(--muted)}
.fix__spf{font-size:12px;color:var(--ink);background:var(--bg-soft);padding:6px 8px;border-radius:var(--r-sm);overflow-wrap:anywhere}
.tpl{padding:12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12px;line-height:1.7;color:var(--ink);background:#fff}
.vars{display:flex;flex-wrap:wrap;gap:6px}
.vars span{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:4px;background:var(--accent-soft);color:var(--accent-strong)}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.otp span{display:grid;place-items:center;height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:600 18px/1 var(--mono);color:var(--ink)}
.otp .is-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sec-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s6);align-items:center}
@media (max-width:900px){.sec-hero{grid-template-columns:1fr}}

/* document layout (legal, FAQ page) */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s12);align-items:start;padding-top:var(--s8)}
.doc__toc{position:sticky;top:calc(var(--header-h) + 24px);font-size:var(--fs-14)}
.doc__toc>p{color:var(--muted);margin-bottom:var(--s3)}
.doc__toc ol{list-style:none;display:grid;gap:2px}
.doc__toc ol a{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-left:2px solid var(--line);color:var(--ink)}
.doc__toc ol a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.doc__help{margin-top:var(--s6)}
.doc__body{max-width:760px}
.doc__body>section{padding-bottom:var(--s8);scroll-margin-top:calc(var(--header-h) + 24px)}
.doc__body>section+section{padding-top:var(--s8);border-top:1px solid var(--line)}
.doc__body h2{font-size:var(--fs-24);margin-bottom:var(--s3)}
.doc__body p,.doc__body li{color:var(--text);max-width:68ch}
.doc__body ul{padding-left:22px;display:grid;gap:6px;margin-top:var(--s3)}
.doc__body p+ul,.doc__body ul+p{margin-top:var(--s3)}
.draft{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--s10);padding:var(--s4) var(--s5);border:1px solid #F4DDB3;border-radius:var(--r-lg);background:var(--amber-soft);color:#6B4000}
.draft b{color:#6B4000}
.draft svg{width:20px;height:20px;flex:none;margin-top:2px}
.faqgroup h2{font-size:var(--fs-24);margin-bottom:var(--s4)}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:var(--s6);padding-top:0}.doc__toc{position:static}.doc__toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* changelog */
.clog{padding-top:var(--s8)}
.clog__month{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s12);padding-bottom:var(--s12)}
.clog__when{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.clog__when h2{font-size:var(--fs-24)}
.clog__list{list-style:none;border-left:2px solid var(--line);padding-left:var(--s8);display:grid;gap:var(--s6)}
.clog__item{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s4);align-items:start}
.clog__item::before{content:"";position:absolute;left:calc(var(--s8) * -1 - 7px);top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.clog__item .pill{justify-self:start}
.clog__item h3{font-size:var(--fs-18)}
.clog__item p{margin-top:4px;color:var(--muted)}
.roadmap__grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.roadmap__grid li{display:grid;gap:6px;justify-items:start;align-content:start;padding:var(--s5);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.roadmap__grid b{color:var(--ink)}
@media (max-width:800px){.clog__month{grid-template-columns:1fr;gap:var(--s4)}.clog__when{position:static}.clog__item{grid-template-columns:1fr;gap:6px}.clog__list{padding-left:var(--s6)}.clog__item::before{left:calc(var(--s6) * -1 - 7px)}}

/* contact channels */
.channels{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.channel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s8) var(--s6);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.channel>svg{width:40px;height:40px;padding:10px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);margin-bottom:var(--s2)}
.channel p{color:var(--muted);font-size:var(--fs-14)}
.channel .channel__v{color:var(--ink);font-size:var(--fs-18);font-weight:500;margin:var(--s2) 0}
.channel .btn{margin-top:auto}
@media (max-width:900px){.channels{grid-template-columns:1fr}}

/* 404 */
.nf__code{font-size:clamp(4rem,3rem + 5vw,7rem);font-weight:650;letter-spacing:-.05em;line-height:1;color:var(--accent);opacity:.9;margin-bottom:var(--s4)}
.sec-head+.dsteps .dstep:first-child{padding-top:var(--s4)}
.frame .tbl--host th:nth-child(1){width:34%}.frame .tbl--host th:nth-child(2){width:22%}.frame .tbl--host th:nth-child(4){width:22%}
@media (max-width:600px){.frame .tbl--host th:nth-child(3),.frame .tbl--host td:nth-child(3){display:none}.frame .tbl--host th:nth-child(4),.frame .tbl--host td:nth-child(4){display:table-cell}.frame .tbl--host th:nth-child(1){width:46%}}

/* ================= v2.2 mockups: operations modules ================= */
.frame .tbl--auto th:nth-child(n){width:auto}
.frame .tbl--auto th:first-child{width:38%}
.frame .tbl--mon th:first-child{width:18%}
.frame .tbl--mon th:nth-child(2){width:34%}
.seg svg{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.sum--wide>div{grid-template-columns:112px minmax(0,1fr) auto}
.scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scores--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.score{display:grid;gap:4px;align-content:start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;min-width:0}
.score small{color:var(--muted);font-size:var(--fs-12)}
.score b{color:var(--ink);font-size:22px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{display:block;height:6px;border-radius:var(--r-pill);background:var(--bg-soft);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--accent-fill)}
.bar--warn i{background:var(--amber)}
.path{display:inline-flex;flex-wrap:wrap;gap:4px;font-size:11px}
.path span{padding:2px 8px;border-radius:var(--r-pill);background:var(--bg-soft);color:var(--muted)}
.path .is-on{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.msg{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-12)}
.msg--note{background:var(--amber-soft);border-color:#F2DEB8}
.msg__meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.msg__meta b{color:var(--ink)}
.msg p{color:var(--text);line-height:1.5}
.msg__att{display:inline-flex;align-items:center;gap:6px;color:var(--accent)!important}
.msg__att svg{width:13px;height:13px}
.bal{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-soft)}
.bal small{display:block;font-size:var(--fs-12)}
.bal b{color:var(--ink);font-size:22px;letter-spacing:-.02em}
.group-links{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--fs-14)}
@media (max-width:600px){.scores--4{grid-template-columns:repeat(2,minmax(0,1fr))}.score b{font-size:18px}}
.ctbl--wide td{width:50%}
.ctbl--gap{margin-top:var(--s6)}

/* sözleşme sayfaları (md → doc) ve CTA yanındaki sözleşme bağlantısı */
.doc__body h3{font-size:var(--fs-18);margin-top:var(--s8);margin-bottom:var(--s2);scroll-margin-top:calc(var(--header-h) + 24px)}
.doc__body h2+h3{margin-top:var(--s4)}
.doc__body ul+ul,.doc__body .tbl-wrap+p,.doc__body .tbl-wrap+ul,.doc__body p+.tbl-wrap,.doc__body ul+.tbl-wrap{margin-top:var(--s3)}
.doc__body .doc__alpha{list-style:none;padding-left:var(--s4)}
.doc__body .tbl td,.doc__body .tbl th{vertical-align:top}
.cta__legal{margin-top:var(--s3);color:var(--muted)}