/* ==========================================================================
   Suveri — Su Ürünleri İş Sistemi
   Tasarım sistemi · AÇIK TEMA
   Tipografi: Newsreader (başlık) · Archivo (metin) · IBM Plex Mono (veri)
   ========================================================================== */

:root{
  /* Zemin katmanları — hepsi açık */
  --paper:#F7F9F8;
  --paper-2:#EDF2F0;
  --paper-3:#E3EAE7;
  --white:#FFFFFF;
  --tint:#E6F1EE;          /* hafif turkuaz yıkama */
  --tint-2:#F1F7F5;
  --sand:#F5F1EA;          /* sıcak nötr, ölçülü kullanılır */

  /* Mürekkep */
  --ink:#0A1817;
  --ink-2:#39504D;
  --ink-3:#5A6D6A;
  --ink-4:#7C8F8C;

  /* Vurgu */
  --accent:#0B6055;        /* metin ve çizgi */
  --accent-2:#0E8A78;      /* dolgu */
  --accent-3:#3FBFA8;      /* açık vurgu */
  --accent-wash:#DCEEE9;
  --warn:#8A4E14;
  --warn-wash:#F6E9D9;
  --good:#2C6B3E;
  --good-wash:#DFEDE2;
  --depth:#2F5A72;
  /* Cizginin alti — uretim tarafi.
     Not: --deep / --abyss adlari eski uyum katmaninda kullanildigi icin
     bu register --dip onekiyle adlandirildi. */
  --dip:#0A2029;
  --dip-2:#0F2E3A;
  --dip-line:rgba(230,241,238,.17);
  --on-dip:#E6F1EE;
  --on-dip-2:#A3BDBC;
  --lume:#4FD6BB;
  --depth-wash:#E2EAEF;

  /* Çizgi */
  --line:#DBE3E0;
  --line-soft:#E9EFED;
  --line-strong:#C3CFCB;

  /* Gölge — çok ölçülü */
  --sh-1:0 1px 2px rgba(10,24,23,.05);
  --sh-2:0 4px 16px -6px rgba(10,24,23,.12);
  --sh-3:0 18px 48px -22px rgba(10,24,23,.28);


  /* Punto olcegi — 1.12 orani, tek kaynak */
  --t-3xs:0.72rem;
  --t-2xs:0.77rem;
  --t-xs:0.86rem;
  --t-s:0.95rem;
  --t-m:1.06rem;
  --t-l:1.19rem;
  --t-xl:1.33rem;
  --t-2xl:1.49rem;
  --t-3xl:1.67rem;
  --t-4xl:1.87rem;

  /* Ölçü */
  /* Bosluk olcegi — tek kaynak, elle deger secilmez */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:34px;
  --sp-6:clamp(34px,4vw,52px);
  --sp-7:clamp(46px,5.6vw,76px);

  --maxw:1240px;
  --gut:clamp(20px,4vw,40px);
  --sec:clamp(76px,9vw,136px);
  --r-s:3px;   /* rozet, etiket, ince cubuk */
  --r:6px;      /* kart, panel, girdi, dugme */
  --r-lg:10px;  /* fotograf, buyuk panel */

  /* Tip */
  --ff-display:"Newsreader",Georgia,"Times New Roman",serif;
  --ff-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Hareket */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --d1:400ms; --d2:700ms; --d3:1000ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--t-m); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:var(--r-s)}

/* ---------- Yerleşim ---------- */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:840px}
.sec{padding-block:var(--sec); position:relative}
.sec--tight{padding-block:calc(var(--sec)*.6)}
.sec > .wrap{position:relative; z-index:1}
.sec--white{background:var(--white)}
.sec--paper2{background:var(--paper-2)}
.sec--tint{background:var(--tint)}
.sec--tint2{background:var(--tint-2)}
.sec--sand{background:var(--sand)}

.split{display:grid; gap:clamp(32px,5vw,72px)}
@media (min-width:900px){
  .split{grid-template-columns:7fr 5fr; align-items:start}
  .split--45{grid-template-columns:4fr 5fr}
  .split--54{grid-template-columns:5fr 4fr}
  .split--even{grid-template-columns:1fr 1fr}
  .split--center{align-items:center}
}

/* ---------- Tipografi ---------- */
.label{
  font-family:var(--ff-mono); font-size:var(--t-2xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.label::before{content:""; width:22px; height:1px; background:var(--accent-3); flex:none}

h1,h2,h3,h4{margin:0; text-wrap:balance}
.d1{font-family:var(--ff-display); font-weight:500; font-size:clamp(2.4rem,5.8vw,4.2rem); line-height:1.04; letter-spacing:-.024em}
.d2{font-family:var(--ff-display); font-weight:500; font-size:clamp(1.9rem,3.8vw,2.95rem); line-height:1.11; letter-spacing:-.02em}
.d3{font-family:var(--ff-display); font-weight:500; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.014em}
.h4{font-family:var(--ff-body); font-weight:600; font-size:var(--t-m); line-height:1.42; letter-spacing:-.004em}

p{margin:0 0 16px; max-width:66ch}
.lead{font-size:clamp(1.06rem,1.7vw,1.24rem); line-height:1.58; color:var(--ink-2); max-width:56ch}
.muted{color:var(--ink-3)}
.small{font-size:var(--t-xs); line-height:1.55}
.tiny{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.05em; color:var(--ink-3); line-height:1.6}
strong{font-weight:600}
em{font-style:italic}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums}
.mb0{margin-bottom:0}

ul.ticks{list-style:none; padding:0; margin:0 0 18px}
ul.ticks li{position:relative; padding-left:26px; margin-bottom:12px; max-width:60ch}
ul.ticks li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:2px; background:var(--accent-2)}

/* ---------- Düğmeler ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; position:relative; overflow:hidden;
  font-family:var(--ff-body); font-size:var(--t-s); font-weight:600;
  padding:13px 24px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background var(--d1) var(--ease-soft), color var(--d1) var(--ease-soft),
             border-color var(--d1) var(--ease-soft), transform 200ms var(--ease),
             box-shadow var(--d2) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:#fff; box-shadow:0 0 0 0 rgba(11,96,85,.25)}
.btn--primary:hover{background:var(--accent-2); box-shadow:0 10px 26px -12px rgba(11,96,85,.6)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent); background:var(--white)}
.btn--sm{padding:9px 17px; font-size:var(--t-xs)}
.btnrow{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

.arrowlink{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:600; font-size:var(--t-s); color:var(--accent);
  padding-bottom:3px; background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--d2) var(--ease);
}
.arrowlink:hover{background-size:100% 1px}
.arrowlink .a{display:inline-block; transition:transform var(--d1) var(--ease)}
.arrowlink:hover .a{transform:translateX(5px)}

/* ---------- Üst çubuk ---------- */
.topbar{
  position:sticky; top:0; z-index:60; background:rgba(247,249,248,.72);
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  transition:background var(--d1) var(--ease-soft), border-color var(--d1) var(--ease-soft),
             box-shadow var(--d1) var(--ease-soft);
}
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--paper)}}
.topbar.is-scrolled{background:rgba(247,249,248,.94); border-bottom-color:var(--line); box-shadow:var(--sh-1)}
.topbar__in{
  display:flex; align-items:center; gap:24px; min-height:72px;
  transition:min-height var(--d2) var(--ease-soft);
}
/* Kaydirinca baslik incelir — hem gorunum alani kazanilir hem sayfa tepki verir */
.topbar.is-scrolled .topbar__in{min-height:58px}
@media (prefers-reduced-motion:reduce){.topbar__in{transition:none}}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--ink); flex:none}
.brand__mark{font-family:var(--ff-display); font-weight:600; font-size:var(--t-2xl); letter-spacing:-.022em}

.nav{display:none}
@media (min-width:1024px){.nav{display:flex; align-items:center; gap:26px; margin-left:auto}}
.nav a{
  position:relative; white-space:nowrap; text-decoration:none; font-size:var(--t-s); font-weight:500; color:var(--ink-2); padding:6px 0;
  transition:color var(--d1) var(--ease-soft);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--accent-2);
  transition:width var(--d2) var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--ink)}

.topbar__cta{display:flex; align-items:center; gap:14px; margin-left:auto}
.topbar__cta .btn{display:none}
@media (min-width:1024px){
  .topbar__cta{margin-left:24px}
  .topbar__cta .btn{display:inline-flex}
}
.phone{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--ff-mono); font-size:var(--t-xs); color:var(--ink); white-space:nowrap;
  transition:color var(--d1) var(--ease-soft);
}
.phone:hover{color:var(--accent)}

.burger{
  margin-left:0; display:inline-flex; align-items:center; gap:9px; background:none;
  border:1px solid var(--line-strong); color:var(--ink); font-family:var(--ff-mono);
  font-size:var(--t-2xs); letter-spacing:.12em; text-transform:uppercase; padding:9px 14px;
  border-radius:var(--r); cursor:pointer;
}
@media (min-width:1024px){.burger{display:none}}
.mobnav{display:none; border-top:1px solid var(--line); background:var(--white); padding:14px 0 24px}
.mobnav.is-open{display:block}
@media (min-width:1024px){.mobnav{display:none !important}}
.mobnav a{display:block; text-decoration:none; color:var(--ink-2); font-size:var(--t-m); padding:12px 0; border-bottom:1px solid var(--line-soft)}
.mobnav a:hover{color:var(--accent)}
.mobnav .btn{margin-top:18px; width:100%; justify-content:center}

/* ---------- Açılış ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(178deg,var(--tint-2) 0%,var(--paper) 46%,var(--paper) 100%);
}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 42%,transparent 78%);
  mask-image:linear-gradient(to right,#000 0%,#000 42%,transparent 78%)}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 70% at 82% 8%, rgba(63,191,168,.16) 0%, rgba(247,249,248,0) 62%);
}
.hero__in{position:relative; z-index:1; padding-block:clamp(22px,2.4vw,40px) clamp(42px,4.6vw,66px)}
.hero__grid{display:grid; gap:clamp(38px,5vw,60px)}
@media (min-width:980px){.hero__grid{grid-template-columns:1fr 1fr; align-items:center}}
.hero h1{max-width:14ch; margin-bottom:22px}
.hero .lead{margin-bottom:30px}
.hero__note{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.05em; color:var(--ink-3); margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}

/* ---------- Sayı şeridi ---------- */
/* ---------- Hero iddia satırı ----------
   .stats sayısal veri içindir (hakkimizda, sektorler); buradakiler sayı değil,
   bu yüzden ayrı bileşen. ---------- */
.claims{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px 28px}
.claims > div{position:relative; padding-top:15px}
.claims > div::before{content:""; position:absolute; top:0; left:0; width:26px; height:2px; background:var(--accent-3)}
.claims .v{font-size:var(--t-m); font-weight:600; color:var(--ink); line-height:1.32; letter-spacing:-.012em}
.claims .k{font-size:var(--t-xs); color:var(--ink-3); margin-top:5px; line-height:1.45}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border-top:1px solid var(--line)}
.stats > div{padding:22px 24px 22px 0; border-right:1px solid var(--line)}
.stats > div:last-child{border-right:none; padding-right:0}
.stats .v{font-family:var(--ff-mono); font-size:var(--t-2xl); font-weight:500; letter-spacing:-.028em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1}
.stats .k{font-size:var(--t-xs); color:var(--ink-2); margin-top:7px; line-height:1.44}

/* ---------- Ürün arayüz paneli (açık) ---------- */
.ui{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-3);
}
.ui__bar{display:flex; align-items:center; gap:10px; padding:11px 15px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.ui__dots{display:flex; gap:6px}
.ui__dots i{width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block}
.ui__title{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.ui__body{padding:18px}
.ui__head{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.ui__h{font-weight:600; font-size:var(--t-s); color:var(--ink)}
.ui__tag{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-s); background:var(--accent-wash); color:var(--accent)}
.ui__tag--warn{background:var(--warn-wash); color:var(--warn)}
.uitable{width:100%; border-collapse:collapse; font-size:var(--t-xs)}
.uitable th{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500; text-align:left; padding:0 10px 9px 0; border-bottom:1px solid var(--line)}
.uitable td{padding:10px 10px 10px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2)}
.uitable tr:last-child td{border-bottom:none}
.uitable td:first-child{color:var(--ink); font-weight:500}
.uitable .n{font-family:var(--ff-mono); font-variant-numeric:tabular-nums; text-align:right; padding-right:0}
.uitable .up{color:var(--accent)}
.uitable .down{color:var(--warn)}
.bar{height:5px; background:var(--paper-3); border-radius:var(--r-s); overflow:hidden; min-width:56px; display:inline-block; vertical-align:middle}
.bar i{display:block; height:100%; background:var(--accent-2); border-radius:var(--r-s); transform-origin:left; transform:scaleX(0)}
.js .is-in .bar i,.js .bar.is-in i{transform:scaleX(1); transition:transform 900ms var(--ease)}
.bar i.warn{background:var(--warn)}
.ui__foot{display:flex; gap:20px; flex-wrap:wrap; padding:14px 18px; background:var(--paper-2); border-top:1px solid var(--line)}
.ui__foot div{font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3)}
.ui__foot b{color:var(--ink); font-weight:500}
.ui-note{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.05em; color:var(--ink-3); margin-top:14px; display:flex; gap:8px; align-items:flex-start}

/* Telefon çerçevesi — saha arayüzü */
.phone-frame{
  width:min(280px,100%); margin-inline:auto; border:9px solid #10201E; border-radius:30px;
  background:var(--white); box-shadow:var(--sh-3); overflow:hidden; position:relative;
}
.phone-frame::before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:74px; height:5px; border-radius:var(--r-s); background:rgba(255,255,255,.35); z-index:2}
.phone-frame .ui{border:none; border-radius:0; box-shadow:none}

/* ---------- Kartlar ---------- */
.cards{display:grid; gap:0; border:1px solid var(--line); background:var(--white); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:640px){.cards--2,.cards--3,.cards--5{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.cards--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.cards--5{grid-template-columns:repeat(5,1fr)}}
.card{
  padding:28px 24px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; text-decoration:none; color:inherit; position:relative;
  transition:background var(--d1) var(--ease-soft), transform var(--d1) var(--ease);
}
.card::after{content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--accent-2); transition:width var(--d2) var(--ease)}
.card:hover,.card:focus-visible{background:var(--tint-2); transform:translateY(-3px)}
.card:hover::after,.card:focus-visible::after{width:100%}
.card__n{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.14em; color:var(--accent); margin-bottom:14px}
.card__t{font-weight:600; font-size:var(--t-m); margin-bottom:8px; letter-spacing:-.006em}
.card__b{font-size:var(--t-s); line-height:1.56; color:var(--ink-2); margin:0 0 16px; max-width:none}
.card__go{margin-top:auto; font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); transition:transform var(--d1) var(--ease)}
.card:hover .card__go{transform:translateX(4px)}

/* ---------- Acı listesi ---------- */
.pains{border-top:1px solid var(--line)}
.pain{display:grid; gap:8px 40px; padding:28px 0; border-bottom:1px solid var(--line); transition:background var(--d1) var(--ease-soft)}
@media (min-width:860px){.pain{grid-template-columns:5fr 6fr; align-items:baseline}}
.pain:hover{background:var(--white)}
.pain__q{font-family:var(--ff-display); font-weight:400; font-style:italic; font-size:clamp(1.14rem,1.9vw,1.44rem); line-height:1.34; color:var(--ink); letter-spacing:-.01em; margin:0}
.pain__a{font-size:var(--t-s); color:var(--ink-2); margin:0}
.pain__a a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.pain__a a:hover{border-bottom-color:var(--accent)}

/* ---------- Tablolar ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); background:var(--white); border-radius:var(--r-lg)}
table.cmp{border-collapse:collapse; width:100%; min-width:620px; font-size:var(--t-xs)}
table.cmp th,table.cmp td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line)}
table.cmp thead th{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:500; background:var(--paper-2)}
table.cmp thead th.is-us{color:var(--accent); background:var(--accent-wash)}
table.cmp tbody th{font-weight:500; color:var(--ink); font-size:var(--t-xs)}
table.cmp td.is-us{background:var(--accent-wash); font-weight:600; color:var(--accent)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp tbody tr{transition:background var(--d1) var(--ease-soft)}
table.cmp tbody tr:hover{background:var(--tint-2)}
.yes::before{content:"✓ "; color:var(--accent-2); font-weight:700}
.no{color:var(--ink-3)}
.no::before{content:"— "}

/* ---------- Zaman çizelgesi ---------- */
.timeline{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:760px){.timeline{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.timeline{grid-template-columns:repeat(6,1fr)}}
.tl{padding:26px 20px 28px 0; border-bottom:1px solid var(--line); position:relative; transition:background var(--d1) var(--ease-soft)}
.tl:hover{background:var(--white)}
.tl__w{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:12px}
.tl__t{font-weight:600; font-size:var(--t-s); margin-bottom:7px}
.tl__b{font-size:var(--t-xs); color:var(--ink-2); line-height:1.52; margin:0}

/* ---------- Güven / özellik ızgarası ---------- */
.trust{display:grid; gap:30px 40px}
@media (min-width:720px){.trust{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust > div{position:relative; padding:15px 0 0}
.trust__t{font-weight:600; font-size:var(--t-m); color:var(--ink); margin-bottom:7px; letter-spacing:-.006em}
.trust__b{font-size:var(--t-xs); color:var(--ink-2); line-height:1.55; margin:0}
.trust__b a{color:var(--accent)}

/* ---------- Döngü ---------- */
.loop{display:grid; gap:0; border-top:1px solid var(--line); counter-reset:lp}
@media (min-width:720px){.loop{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.loop{grid-template-columns:repeat(5,1fr)}}
.loop > div{padding:24px 22px 28px 0; border-bottom:1px solid var(--line); counter-increment:lp}
.loop__n{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; color:var(--accent); margin-bottom:11px}
.loop__n::before{content:counter(lp) " · "}
.loop__t{font-weight:600; font-size:var(--t-s); margin-bottom:6px}
.loop__b{font-size:var(--t-xs); color:var(--ink-2); line-height:1.52; margin:0}

/* ---------- SSS ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative; font-weight:600; font-size:var(--t-m); color:var(--ink); transition:color var(--d1) var(--ease-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:13px; height:1.5px; background:var(--accent); transition:transform var(--d1) var(--ease)}
.faq summary::before{content:""; position:absolute; right:10px; top:50%; width:13px; height:1.5px; background:var(--accent); transform:rotate(90deg); transition:transform var(--d1) var(--ease), opacity var(--d1) var(--ease)}
.faq details[open] summary::before{transform:rotate(0deg); opacity:0}
.faq details > p{padding:0 0 24px; margin:0; color:var(--ink-2); max-width:70ch}
.js .faq details[open] > p{animation:faqIn var(--d2) var(--ease)}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* ---------- CTA bandı ---------- */
.ctaband{background:var(--tint); border-top:1px solid var(--line)}
.ctaband__in{display:grid; gap:34px; padding-block:clamp(56px,6.5vw,92px); align-items:center}
@media (min-width:900px){.ctaband__in{grid-template-columns:7fr 5fr}}
.contactline{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line-strong); font-family:var(--ff-mono); font-size:var(--t-xs); color:var(--ink-2)}
.contactline a{color:var(--accent); text-decoration:none}
.contactline a:hover{text-decoration:underline}

/* ---------- Form ---------- */
.form{display:grid; gap:16px; background:var(--white); border:1px solid var(--line); padding:28px 26px 30px; border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.form label{display:block; font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%; background:var(--paper); border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--t-s); padding:12px 13px; border-radius:var(--r);
  transition:border-color var(--d1) var(--ease-soft), background var(--d1) var(--ease-soft);
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent-2); background:var(--white); outline:none}
.form .consent{display:flex; gap:11px; align-items:flex-start; font-size:var(--t-xs); color:var(--ink-2); line-height:1.5; font-family:var(--ff-body); letter-spacing:0; text-transform:none}
.form .consent input{width:auto; margin-top:3px; flex:none}
.form .consent a{color:var(--accent)}
.form .btn{justify-content:center; width:100%}

/* ---------- Altbilgi ---------- */
.foot{background:var(--white); color:var(--ink-2); border-top:1px solid var(--line)}
.foot__grid{display:grid; gap:36px; padding-block:60px 36px}
@media (min-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}}
.foot h3{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; font-weight:500}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:10px}
.foot a{text-decoration:none; font-size:var(--t-xs); color:var(--ink-2); transition:color var(--d1) var(--ease-soft)}
.foot a:hover{color:var(--accent)}
.foot__bottom{border-top:1px solid var(--line); padding-block:22px 32px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3)}
.foot__legal{max-width:44ch; font-size:var(--t-xs); line-height:1.6; font-family:var(--ff-body)}

/* ---------- Sayfa başlığı ---------- */
.phead{
  position:relative; overflow:hidden;
  background:linear-gradient(178deg,var(--tint-2) 0%,var(--paper) 70%);
  padding-block:clamp(52px,6vw,88px) clamp(44px,5vw,68px); border-bottom:1px solid var(--line);
}
.phead h1{max-width:18ch; margin-bottom:20px}
.crumbs{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs span{margin:0 8px; color:var(--line-strong)}

/* ---------- Not kutuları ---------- */
.note{border:1px solid var(--line); border-left:3px solid var(--accent-2); background:var(--white); padding:22px 24px; margin:0 0 22px; border-radius:0 var(--r) var(--r) 0}
.note > *:last-child{margin-bottom:0}
.note--warn{border-left-color:var(--warn); background:var(--warn-wash)}
.note--tint{border-left-color:var(--accent-3); background:var(--tint-2)}

/* ---------- Görseller ---------- */
.figure{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--tint-2); border:1px solid var(--line); box-shadow:var(--sh-2)}
.figure img{width:100%; height:auto; display:block}
.figure--wide{aspect-ratio:2/1}
.figure--wide img{height:100%; object-fit:cover}
.figcap{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.06em; color:var(--ink-3); margin-top:12px; display:flex; gap:9px; align-items:flex-start}
.figcap::before{content:"▸"; color:var(--accent-3); flex:none}
.bleed{margin-inline:calc(var(--gut)*-1)}
@media (min-width:1320px){.bleed{margin-inline:calc((100vw - var(--maxw))/-2 - var(--gut))}}

/* Görsel maske açılışı */
.reveal-ready .reveal-img{clip-path:inset(0 0 100% 0); transition:clip-path 1100ms var(--ease)}
.reveal-ready .reveal-img.is-in{clip-path:inset(0 0 0 0)}

/* ---------- Grafik ---------- */
.chart{width:100%; height:auto; display:block}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .axis{stroke:var(--line-strong); stroke-width:1}
.chart .plan{stroke:var(--ink-4); stroke-width:1.5; stroke-dasharray:4 4; fill:none}
.chart .real{stroke:var(--accent-2); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.chart .warnline{stroke:var(--warn); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.chart .area{fill:url(#areaGrad)}
.chart .dot{fill:var(--accent-2)}
.chart .lbl{fill:var(--ink-3); font-family:var(--ff-mono); font-size:13px; letter-spacing:.08em}
.reveal-ready .chart [data-draw]{stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600)}
.reveal-ready .chart.is-in [data-draw]{transition:stroke-dashoffset 1600ms var(--ease-soft); stroke-dashoffset:0}
.reveal-ready .chart.is-in [data-draw].d2{transition-delay:280ms}
.reveal-ready .chart .area{opacity:0; transition:opacity 900ms var(--ease) 500ms}
.reveal-ready .chart.is-in .area{opacity:1}
.reveal-ready .chart .dot{opacity:0; transition:opacity 500ms var(--ease) 1300ms}
.reveal-ready .chart.is-in .dot{opacity:1}

/* ---------- İkonlar ---------- */
.ico{width:26px; height:26px; stroke:var(--accent); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; margin-bottom:16px; transition:stroke var(--d1) var(--ease-soft), transform var(--d2) var(--ease)}
.card:hover .ico{stroke:var(--accent-2); transform:translateY(-2px)}
.spark{width:56px; height:16px; overflow:visible; display:inline-block; vertical-align:middle}
.spark path{fill:none; stroke:var(--accent-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.spark path.warn{stroke:var(--warn)}

/* ---------- Ağ dokusu zemin ---------- */
.mesh{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.6;
  background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 0%,#000 0%,transparent 74%);
  mask-image:radial-gradient(72% 62% at 50% 0%,#000 0%,transparent 74%);
}

/* ---------- Kayan terim şeridi ---------- */
.ticker{overflow:hidden; border-block:1px solid var(--line); background:var(--white); padding:14px 0; position:relative}
.ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none}
.ticker::before{left:0; background:linear-gradient(to right,var(--white),transparent)}
.ticker::after{right:0; background:linear-gradient(to left,var(--white),transparent)}
.ticker__track{display:flex; gap:0; width:max-content; animation:tick 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding:0 26px; white-space:nowrap; display:inline-flex; align-items:center; gap:26px;
}
.ticker span::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent-3)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   HAREKET
   ========================================================================== */
.reveal-ready [data-reveal]{
  opacity:0; transition:opacity var(--d2) var(--ease), transform var(--d2) var(--ease), clip-path var(--d3) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal-ready [data-reveal="up"],.reveal-ready [data-reveal=""],.reveal-ready [data-reveal]:not([data-reveal="fade"]):not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]){transform:translateY(14px)}
.reveal-ready [data-reveal="fade"]{transform:none}
.reveal-ready [data-reveal="left"]{transform:translateX(-26px)}
.reveal-ready [data-reveal="right"]{transform:translateX(26px)}
.reveal-ready [data-reveal="scale"]{transform:scale(.965)}
.reveal-ready [data-reveal].is-in{opacity:1; transform:none}
.reveal-ready .rise{opacity:0; transform:translateY(12px); transition:opacity var(--d2) var(--ease), transform var(--d2) var(--ease)}
.reveal-ready .rise.is-in{opacity:1; transform:none}

.reveal-ready .hero [data-seq]{opacity:0; transform:translateY(22px); animation:seqIn var(--d3) var(--ease) forwards; animation-delay:calc(140ms + var(--s,0) * 110ms)}
@keyframes seqIn{to{opacity:1; transform:none}}
.reveal-ready .hero .ui,.reveal-ready .hero .phone-frame{opacity:0; transform:translateY(30px) scale(.982); animation:panelIn 1100ms var(--ease) forwards; animation-delay:460ms}
@keyframes panelIn{to{opacity:1; transform:none}}

/* Paralaks */
.js [data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .rise,.js .hero [data-seq],.js .hero .ui,.js .hero .phone-frame,
  .js .reveal-img,.js .chart [data-draw],.js .chart .area,.js .chart .dot,.js .bar i{
    opacity:1 !important; transform:none !important; animation:none !important;
    transition:none !important; clip-path:none !important; stroke-dashoffset:0 !important;
  }
  .ticker__track{animation:none}
  .js [data-parallax]{transform:none !important}
}

/* ==========================================================================
   GERİYE DÖNÜK EŞLEME
   Koyu tema döneminden kalan sınıf ve belirteçler açık temaya bağlandı.
   Yeni sayfalarda kullanılmaz; mevcut sayfalar bozulmasın diye durur.
   ========================================================================== */
:root{
  --on-dark:var(--ink); --on-dark-2:var(--ink-2); --on-dark-3:var(--ink-3);
  --line-d:var(--line); --line-d-soft:var(--line-soft);
  --abyss:var(--paper); --deep:var(--paper-2); --deep-2:var(--paper-3);
  --surface:var(--white); --surface-2:var(--paper-2);
  --accent-deep:var(--accent); --accent-soft:var(--accent-wash);
  --rule:var(--line); --rule-strong:var(--line-strong);
  --sh:var(--sh-1);
}
.sec--dark{background:var(--tint)}
.sec--deep{background:var(--paper-2)}
.sec--dark .label,.sec--deep .label{color:var(--accent)}
.sec--dark .lead,.sec--deep .lead{color:var(--ink-2)}
.sec--dark h2,.sec--deep h2,.sec--dark h3,.sec--deep h3{color:var(--ink)}
.sec--dark .arrowlink,.sec--deep .arrowlink{color:var(--accent)}
.sec--dark ul.ticks li::before,.sec--deep ul.ticks li::before{background:var(--accent-2)}
.sec--dark .btn--ghost,.sec--deep .btn--ghost{color:var(--ink); border-color:var(--line-strong)}
.btn--dark{background:var(--accent); color:#fff}
.btn--dark:hover{background:var(--accent-2)}

/* ---------- Yardımcılar ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 var(--r) 0}
.skip:focus{left:0; top:0}
.center-narrow{max-width:780px}


/* ==========================================================================
   SON KORUMA — icerik asla gizli kalamaz
   JS calismazsa, gozlemci tetiklenmezse ya da sekme arka planda kalirsa
   bu kural her seyi gorunur yapar. Gorsellik hicbir kosulda kaybolmaz.
   ========================================================================== */
html.reveal-failsafe [data-reveal],
html.reveal-failsafe .rise,
html.reveal-failsafe .reveal-img,
html.reveal-failsafe .hero [data-seq],
html.reveal-failsafe .hero .ui,
html.reveal-failsafe .hero .phone-frame{
  opacity:1 !important; transform:none !important; clip-path:none !important;
  animation:none !important; transition:none !important;
}
html.reveal-failsafe .chart [data-draw]{stroke-dashoffset:0 !important}
html.reveal-failsafe .chart .area,html.reveal-failsafe .chart .dot{opacity:1 !important}
html.reveal-failsafe .bar i{transform:scaleX(1) !important}

/* ==========================================================================
   AÇILIŞ KOMPOZİSYONU — gerçek fotoğraf + üstüne binen ürün kartı
   ========================================================================== */
.hero-media{position:relative; padding-bottom:clamp(0px,4.4vw,54px)}
.hero-media__photo{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3);
  border:1px solid var(--line); background:var(--tint-2); aspect-ratio:3/2;
}
.hero-media__photo img{width:100%; height:100%; object-fit:cover; display:block}
.hero-media__card{margin-top:-28px; margin-inline:auto; width:94%}
@media (min-width:1040px){
  .hero-media__card{
    position:absolute; left:-9%; bottom:0; width:76%; margin:0; z-index:2;
  }
}
.hero-media__tag{
  position:absolute; top:16px; right:16px; z-index:3;
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--accent); padding:6px 11px; border-radius:var(--r-s);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* Uyum şeridi — müşteri logosu yerine dürüst güven sinyali */
.badges{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:var(--white);
}
.badges > div{
  flex:1 1 160px; padding:18px 20px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px;
}
.badges > div:last-child{border-right:none}
.badges .bt{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--accent)}
.badges .bb{font-size:var(--t-xs); color:var(--ink-2); line-height:1.45}

/* Görsel + metin yan yana blok */
.mediarow{display:grid; gap:clamp(26px,4vw,54px); align-items:center}
@media (min-width:900px){
  .mediarow{grid-template-columns:1fr 1fr}
  .mediarow--flip > *:first-child{order:2}
}

/* ==========================================================================
   UI/UX DÜZELTMELERİ · 21 Ağustos 2026
   Ölçüme dayalı denetim sonrası. Ayrıntı: uiux-duzeltme-plani
   ========================================================================== */

/* B1 — Yapışkan başlık 73px. Çapa hedefleri altına gömülmesin. */
[id]{scroll-margin-top:96px}
@media (max-width:1023px){[id]{scroll-margin-top:84px}}

/* B5 — Dokunma hedefleri. Görsel boyut değişmiyor, tıklama alanı büyüyor. */
.arrowlink{min-height:44px}
.phone{min-height:44px; padding-inline:2px}
.burger{min-height:44px}
.nav a{min-height:44px; display:inline-flex; align-items:center}
.mobnav a{min-height:48px; display:flex; align-items:center; padding:13px 0}
.foot a{display:inline-flex; align-items:center; min-height:32px}
.foot li{margin-bottom:4px}
.card__go{min-height:24px; display:inline-flex; align-items:center}
.contactline a{min-height:32px; display:inline-flex; align-items:center}
.faq summary{min-height:56px; display:flex; align-items:center}
.form .consent{min-height:44px}
.form .consent input{width:20px; height:20px}
.crumbs a{min-height:32px; display:inline-flex; align-items:center}

/* B8 — Yana kayan tablolarda görsel ipucu. */
.tablewrap{position:relative}
.tablewrap::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:52px; pointer-events:none;
  background:linear-gradient(to left, var(--white) 10%, rgba(255,255,255,0));
  opacity:0; transition:opacity var(--d1) var(--ease-soft);
}
.tablewrap.is-scrollable::after{opacity:1}
.tablewrap.is-scrolled-end::after{opacity:0}
.scrollhint{
  display:none; font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.06em;
  color:var(--ink-3); margin-top:10px; align-items:center; gap:8px;
}
.tablewrap.is-scrollable + .scrollhint{display:flex}
.scrollhint::before{content:"↔"; color:var(--accent-2); font-size:var(--t-s)}

/* B7 — Ana sayfada modül şeridi: tarama yapılabilir, yer kaplamayan liste. */
.modstrip{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.modstrip a{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:18px 4px; border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit;
  min-height:64px; transition:background var(--d1) var(--ease-soft), padding-left var(--d1) var(--ease);
}
.modstrip a:last-child{border-bottom:none}
.modstrip a:hover,.modstrip a:focus-visible{background:var(--tint-2); padding-left:12px}
.modstrip .ms-ico{width:24px; height:24px; stroke:var(--accent); stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; margin:0; flex:none}
.modstrip .ms-n{
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.12em; color:var(--accent);
  width:26px; flex:none;
}
.modstrip .ms-t{font-weight:600; font-size:var(--t-m); letter-spacing:-.005em}
.modstrip .ms-d{color:var(--ink-2); font-size:var(--t-s)}
.modstrip .ms-go{font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--accent); transition:transform var(--d1) var(--ease)}
.modstrip a:hover .ms-go{transform:translateX(4px)}
@media (max-width:640px){
  .modstrip a{grid-template-columns:auto 1fr; gap:12px; padding:16px 4px}
  .modstrip .ms-go{display:none}
  .modstrip .ms-d{font-size:var(--t-xs)}
}
.ms-main{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}

/* B5 · ikinci tur — kalan dokunma hedefleri */
.contactline a{min-height:44px}
.form input,.form select,.form textarea{min-height:46px}
.brand{min-height:44px; align-items:center}
.foot a{min-height:36px}
.ui__tag{padding:4px 9px}

/* ==========================================================================
   KRİTİK DÜZELTME
   .mobnav a{color:var(--ink-2)} kuralı, özgüllüğü (0,1,1) .btn--primary'den
   (0,1,0) yüksek olduğu için mobil menüdeki ana çağrı düğmesinin yazısını
   koyu zemin üzerinde koyu yapıyordu — kontrast 1,16:1, yani okunmuyordu.
   Mobilde en önemli düğme buydu.
   ========================================================================== */
.mobnav .btn{color:#fff}
.mobnav .btn--primary{background:var(--accent); color:#fff}
.mobnav .btn--primary:hover{background:var(--accent-2); color:#fff}
.mobnav .btn--ghost{color:var(--ink)}
.mobnav .phone{color:var(--ink)}

/* Aynı tuzağın diğer yerlerde tekrarlamaması için */
.foot .btn{color:#fff}
.contactline .btn{color:#fff}

/* Kalan dokunma hedefi */
.brand{min-height:44px}
.foot a{min-height:40px}

/* ==========================================================================
   ARAÇLAR — hesaplayıcılar ve test
   ========================================================================== */
.tool{display:grid; gap:clamp(28px,4vw,48px)}
@media (min-width:940px){.tool{grid-template-columns:5fr 4fr; align-items:start}}

.toolform{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px 28px; box-shadow:var(--sh-2)}
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field > label{
  display:block; font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.field__hint{font-size:var(--t-xs); color:var(--ink-3); margin:7px 0 0; line-height:1.5}
.inputrow{display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--paper); overflow:hidden; transition:border-color var(--d1) var(--ease-soft), background var(--d1) var(--ease-soft)}
.inputrow:focus-within{border-color:var(--accent-2); background:var(--white)}
.inputrow input{
  flex:1; min-width:0; border:none; background:transparent; color:var(--ink);
  font-family:var(--ff-mono); font-size:var(--t-m); font-variant-numeric:tabular-nums;
  padding:13px 14px; min-height:48px;
}
.inputrow input:focus{outline:none}
.inputrow .unit{
  display:flex; align-items:center; padding:0 14px; background:var(--paper-2);
  border-left:1px solid var(--line); font-family:var(--ff-mono); font-size:var(--t-xs); color:var(--ink-2); white-space:nowrap;
}

.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg input{position:absolute; opacity:0; width:1px; height:1px}
.seg label{
  flex:1 1 auto; min-width:78px; text-align:center; cursor:pointer; min-height:46px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line-strong); border-radius:var(--r); padding:10px 14px;
  font-size:var(--t-s); font-weight:500; color:var(--ink-2); background:var(--paper);
  transition:all var(--d1) var(--ease-soft);
}
.seg label:hover{border-color:var(--accent-2); color:var(--ink)}
.seg input:checked + label{background:var(--accent); border-color:var(--accent); color:#fff}
.seg input:focus-visible + label{outline:2px solid var(--accent-2); outline-offset:2px}

.toolout{
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px 28px; position:sticky; top:96px;
}
@media (max-width:939px){.toolout{position:static}}
.toolout__lbl{font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.bignum{
  font-family:var(--ff-mono); font-weight:500; font-size:clamp(2rem,5vw,2.9rem);
  line-height:1.05; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.bignum small{font-size:.42em; letter-spacing:0; color:var(--ink-2); font-weight:400}
.bigcap{font-size:var(--t-s); color:var(--ink-2); margin-top:10px; line-height:1.5}
.outrows{margin-top:22px; border-top:1px solid var(--line-strong)}
.outrow{display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--t-s)}
.outrow:last-child{border-bottom:none}
.outrow span:first-child{color:var(--ink-2)}
.outrow span:last-child{font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap}
.outrow.is-strong span:last-child{color:var(--accent)}

/* Test */
.quiz{max-width:760px}
.qprog{height:4px; background:var(--paper-3); border-radius:var(--r-s); overflow:hidden; margin-bottom:12px}
.qprog i{display:block; height:100%; background:var(--accent-2); width:0; transition:width var(--d2) var(--ease)}
.qmeta{display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3); margin-bottom:26px}
.qcard{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px 30px; box-shadow:var(--sh-2)}
.qtext{font-family:var(--ff-display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.72rem); line-height:1.22; letter-spacing:-.014em; margin-bottom:22px}
.qopts{display:grid; gap:10px}
.qopt{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer; text-align:left;
  border:1px solid var(--line-strong); border-radius:var(--r); padding:15px 17px; background:var(--paper);
  font-size:var(--t-s); color:var(--ink); min-height:56px; width:100%;
  transition:all var(--d1) var(--ease-soft); font-family:inherit; line-height:1.45;
}
.qopt:hover{border-color:var(--accent-2); background:var(--white); transform:translateX(3px)}
.qopt .mark{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-strong); flex:none; margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:var(--t-3xs); color:var(--ink-3);
}
.qopt:hover .mark{border-color:var(--accent-2); color:var(--accent)}
.qnav{display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:14px}
.qback{background:none; border:none; cursor:pointer; font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3); min-height:44px; padding:0}
.qback:hover{color:var(--accent)}
.qback[hidden]{display:none}

/* Sonuç */
.score{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:26px}
.scoredial{position:relative; width:132px; height:132px; flex:none}
.scoredial svg{transform:rotate(-90deg)}
.scoredial .track{stroke:var(--paper-3); stroke-width:11; fill:none}
.scoredial .val{stroke:var(--accent-2); stroke-width:11; fill:none; stroke-linecap:round;
  stroke-dasharray:352; stroke-dashoffset:352; transition:stroke-dashoffset 1.2s var(--ease)}
.scoredial .txt{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-variant-numeric:tabular-nums;
}
.scoredial .txt b{font-size:var(--t-4xl); font-weight:500; letter-spacing:-.03em; color:var(--ink)}
.scoredial .txt span{font-size:var(--t-3xs); color:var(--ink-3); letter-spacing:.1em}
.levelbox{flex:1 1 240px}
.levelname{font-family:var(--ff-display); font-weight:500; font-size:var(--t-3xl); letter-spacing:-.018em; margin-bottom:8px}
.gaps{border-top:1px solid var(--line-strong); margin-top:8px}
.gap{display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:15px 0; border-bottom:1px solid var(--line); align-items:center}
.gap__t{font-weight:600; font-size:var(--t-s)}
.gap__d{grid-column:1/-1; font-size:var(--t-xs); color:var(--ink-2); margin:0}
.gap__s{font-family:var(--ff-mono); font-size:var(--t-2xs); padding:3px 9px; border-radius:var(--r-s); white-space:nowrap}
.s-low{background:var(--warn-wash); color:var(--warn)}
.s-mid{background:var(--depth-wash); color:var(--depth)}
.s-high{background:var(--good-wash); color:var(--good)}

.toolnote{font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3); line-height:1.65; margin-top:18px}
[hidden]{display:none !important}

/* ==========================================================================
   SÖZLÜK
   ========================================================================== */
.sozluk-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.sozluk-nav__a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; min-height:44px;
  border:1px solid var(--line-strong); border-radius:var(--r); padding:9px 15px;
  font-size:var(--t-xs); color:var(--ink-2); background:var(--white);
  transition:all var(--d1) var(--ease-soft);
}
.sozluk-nav__a:hover{border-color:var(--accent-2); color:var(--accent); transform:translateY(-1px)}
.sozluk-nav__a span{
  font-family:var(--ff-mono); font-size:var(--t-3xs); color:var(--accent);
  background:var(--accent-wash); padding:2px 7px; border-radius:var(--r-s);
}
.sozluk-ara{position:sticky; top:73px; z-index:40; background:var(--paper); border-bottom:1px solid var(--line); padding:18px 0}
.terimler{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:760px){.terimler{grid-template-columns:1fr 1fr}}
@media (min-width:1120px){.terimler{grid-template-columns:repeat(3,1fr)}}
.terim{
  padding:22px 26px 24px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  scroll-margin-top:170px; transition:background var(--d1) var(--ease-soft);
}
.terim:hover{background:var(--white)}
.terim:target{background:var(--accent-wash)}
.terim__ad{font-family:var(--ff-body); font-weight:600; font-size:var(--t-m); margin:0 0 8px; letter-spacing:-.005em}
.terim__tanim{font-size:var(--t-s); line-height:1.6; color:var(--ink-2); margin:0 0 12px; max-width:none}
.terim__bag{
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.06em; color:var(--accent);
  text-decoration:none; display:inline-flex; align-items:center; min-height:24px;
}
.terim__bag:hover{text-decoration:underline}

/* ==========================================================================
   BLOG
   ========================================================================== */
.yazilar{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:820px){.yazilar{grid-template-columns:1fr 1fr}}
.yazikart{
  display:flex; flex-direction:column; text-decoration:none; color:inherit; position:relative;
  padding:30px 30px 32px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  transition:background var(--d1) var(--ease-soft), padding-left var(--d1) var(--ease);
}
.yazikart:hover{background:var(--white); padding-left:14px}
.yazikart__kat{
  font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.yazikart__baslik{
  font-family:var(--ff-display); font-weight:500; font-size:clamp(1.3rem,2.3vw,1.62rem);
  line-height:1.2; letter-spacing:-.015em; margin:0 0 12px; text-wrap:balance;
}
.yazikart__ozet{font-size:var(--t-s); line-height:1.6; color:var(--ink-2); margin:0 0 18px; max-width:none}
.yazikart__meta{margin-top:auto; font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3)}

.yazimeta{display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--ff-mono); font-size:var(--t-2xs);
  color:var(--ink-3); margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}
.yazimeta span:first-child{color:var(--accent)}

/* Yazı gövdesi */
.yazi h2{font-family:var(--ff-display); font-weight:500; font-size:clamp(1.5rem,2.8vw,2rem);
  line-height:1.18; letter-spacing:-.018em; margin:44px 0 16px; scroll-margin-top:96px}
.yazi h2:first-child{margin-top:0}
.yazi h3{font-family:var(--ff-body); font-weight:600; font-size:var(--t-m); margin:30px 0 10px}
.yazi p{font-size:var(--t-m); line-height:1.72; margin-bottom:18px}
.yazi ul,.yazi ol{margin-bottom:20px}
.yazi li{margin-bottom:9px; line-height:1.65}
.yazi ol{counter-reset:none}
.yazi a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.yazi a:hover{border-bottom-color:var(--accent)}
.yazi .note a{border-bottom:none; text-decoration:underline}
.yazi .tablewrap{margin-block:24px}

.terimler-serit{margin-top:44px; padding-top:26px; border-top:1px solid var(--line)}
.terimrozet{
  display:inline-flex; align-items:center; min-height:36px; margin:0 8px 8px 0;
  font-family:var(--ff-mono); font-size:var(--t-2xs); text-decoration:none; color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:6px 13px; background:var(--white);
  transition:all var(--d1) var(--ease-soft);
}
.terimrozet:hover{border-color:var(--accent-2); color:var(--accent)}

.planlilar{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:760px){.planlilar{grid-template-columns:1fr 1fr}}
.planli{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;
  padding:15px 24px 15px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  color:var(--ink-2); font-size:var(--t-s)}
.planli__kat{font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; min-width:96px}

/* ==========================================================================
   UYGULAMA VİTRİNİ — sayfanın kanıt bölümü
   Sitenin kendisi portföy: burada gösterilen arayüz, yapılabilecek işin örneği.
   ========================================================================== */
.showcase{position:relative}
.app{
  display:grid; grid-template-columns:1fr; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 32px 70px -34px rgba(10,24,23,.38), 0 2px 6px rgba(10,24,23,.05);
}
@media (min-width:760px){.app{grid-template-columns:186px 1fr}}

.app__side{display:none; background:var(--paper-2); border-right:1px solid var(--line); padding:16px 0}
@media (min-width:760px){.app__side{display:block}}
.app__brand{
  display:flex; align-items:center; gap:9px; padding:4px 16px 18px;
  font-family:var(--ff-display); font-weight:600; font-size:var(--t-m); color:var(--ink);
}
.app__brand i{width:9px; height:9px; border-radius:var(--r-s); background:var(--accent-2); display:block; flex:none}
.app__nav{display:flex; flex-direction:column; gap:1px}
.app__nav span{
  display:flex; align-items:center; gap:10px; padding:9px 16px;
  font-size:var(--t-xs); color:var(--ink-2); border-left:2px solid transparent;
}
.app__nav span.on{background:var(--white); color:var(--accent); border-left-color:var(--accent-2); font-weight:600}
.app__nav i{width:14px; height:14px; border:1.3px solid currentColor; border-radius:var(--r-s); opacity:.5; flex:none}
.app__nav span.on i{opacity:1; background:var(--accent-wash)}

.app__main{min-width:0}
.app__bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line); background:var(--white);
}
.app__crumb{font-family:var(--ff-mono); font-size:var(--t-3xs); color:var(--ink-3); letter-spacing:.05em}
.app__crumb b{color:var(--ink); font-weight:500}
.app__pill{
  margin-left:auto; font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px;
  background:var(--warn-wash); color:var(--warn); white-space:nowrap;
}
.app__body{padding:18px}

.app__kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:18px}
@media (min-width:620px){.app__kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--white); padding:13px 15px}
.kpi__k{font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.kpi__v{font-family:var(--ff-mono); font-size:var(--t-l); font-weight:500; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.kpi__d{font-family:var(--ff-mono); font-size:var(--t-3xs); margin-top:4px}
.kpi__d.up{color:var(--accent)}
.kpi__d.down{color:var(--warn)}

.app__split{display:grid; gap:18px}
@media (min-width:900px){.app__split{grid-template-columns:1.35fr 1fr}}
.app__panel{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.app__panelhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:var(--paper-2); border-bottom:1px solid var(--line);
}
.app__panelhead b{font-size:var(--t-xs); font-weight:600}
.app__panelhead span{font-family:var(--ff-mono); font-size:var(--t-3xs); color:var(--ink-3)}
.app__panelbody{padding:14px}

/* açıklama baloncukları */
.callout{
  position:absolute; z-index:5; max-width:236px;
  background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:11px 13px; box-shadow:var(--sh-2);
  font-size:var(--t-xs); line-height:1.5; color:var(--ink-2);
}
.callout b{display:block; color:var(--ink); font-size:var(--t-xs); margin-bottom:3px}
.callout::before{
  content:""; position:absolute; width:9px; height:9px; background:var(--white);
  border-left:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
}
.callout--l::before{left:-5px; top:20px; transform:rotate(45deg)}
.callout--r::before{right:-5px; top:20px; transform:rotate(-135deg)}
.callout__n{
  position:absolute; top:-9px; left:-9px; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:var(--t-3xs); font-weight:500;
}
@media (max-width:1080px){
  .callout{position:static; max-width:none; margin-top:10px; box-shadow:none}
  .callout::before{display:none}
  .callout__n{position:static; margin-bottom:6px}
  .calloutlar{display:grid; gap:10px; margin-top:18px}
  @media (min-width:620px){.calloutlar{grid-template-columns:repeat(3,1fr)}}
}
@media (min-width:1081px){
  .calloutlar{position:absolute; inset:0; pointer-events:none}
  .calloutlar .callout{pointer-events:auto}
}

/* ==========================================================================
   KAPSAM ŞERİDİ — hero altı, uyumlu kayıt düzenleri
   Not: hero'daki iddia satırı (.claims) ile bilerek farklı bir yapı kullanır;
   iki ince-çizgili sütun şeridini üst üste koymak sayfayı tablo gibi gösteriyordu.
   ========================================================================== */
.cover{border-block:1px solid var(--line); background:var(--white)}
.cover__in{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding-block:17px}
.cover__lab{
  font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin:0; flex:none;
}
.cover__list{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0}
.cover__list a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--white);
  font-size:var(--t-xs); color:var(--ink-2); text-decoration:none;
  transition:border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease);
}
.cover__list a:hover{border-color:var(--accent); color:var(--accent); background:var(--tint)}
@media (max-width:760px){
  .cover__lab{width:100%}
  .cover__in{gap:10px}
}

/* 5'li ızgarada tek kalan kartı önle */
@media (min-width:640px) and (max-width:1079px){
  .cards--5 > :nth-child(5){grid-column:1 / -1}
}

/* dokunma hedefi tabani */
.btn{min-height:44px}

/* ==========================================================================
   İŞARETLİ FOTOĞRAF — sahayı sistemin gördüğü gibi
   ========================================================================== */
.annot{position:relative}
.annot__pin{position:absolute; transform:translate(-50%,-50%); z-index:3; line-height:0}
.annot__dot{
  position:relative; width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:var(--t-3xs); line-height:1;
  box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 6px 14px rgba(10,24,23,.34);
}
.annot__dot::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(255,255,255,.85); opacity:0;
}
.reveal-ready .annot.is-in .annot__dot::after{animation:pin 3.6s var(--ease) infinite}
.annot__pin:nth-of-type(2) .annot__dot::after{animation-delay:1.2s}
.annot__pin:nth-of-type(3) .annot__dot::after{animation-delay:2.4s}
@keyframes pin{0%{transform:scale(.72); opacity:.9} 65%{transform:scale(1.75); opacity:0} 100%{opacity:0}}

.annot__lab{
  position:absolute; top:50%; transform:translateY(-50%); white-space:nowrap;
  background:rgba(255,255,255,.95); border:1px solid var(--line);
  border-radius:var(--r); padding:7px 12px; font-size:var(--t-2xs); line-height:1.35;
  color:var(--ink); box-shadow:0 8px 22px -10px rgba(10,24,23,.45);
}
.annot__lab b{font-family:var(--ff-mono); font-weight:500; color:var(--accent)}
.annot__lab::before{content:""; position:absolute; top:50%; width:14px; border-top:1px solid var(--line-strong)}
.annot__pin--r .annot__lab{left:32px}
.annot__pin--r .annot__lab::before{left:-15px}
.annot__pin--l .annot__lab{right:32px}
.annot__pin--l .annot__lab::before{right:-15px}

/* dar ekranda etiket yerine altta anahtar listesi */
@media (max-width:1079px){
  .annot__lab{display:none}
  .annot__dot{width:22px; height:22px; font-size:var(--t-3xs)}
}
.annot__key{display:none}
@media (max-width:1079px){
  .annot__key{display:grid; gap:9px; margin-top:16px}
  .annot__key li{display:flex; gap:10px; align-items:flex-start; font-size:var(--t-xs); color:var(--ink-2); line-height:1.45}
  .annot__key i{
    flex:none; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--ff-mono); font-style:normal; font-size:var(--t-3xs); margin-top:1px;
  }
  .annot__key b{font-family:var(--ff-mono); font-weight:500; color:var(--accent); font-style:normal}
}
@media (min-width:620px) and (max-width:1079px){.annot__key{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.annot__dot::after{animation:none !important}}


/* ==========================================================================
   RITIM — bolum acilis blogu ve bosluk yardimcilari
   Satir ici margin degerleri buraya tasindi; sayfada elle punto ya da
   bosluk secilmez, hepsi olcekten gelir.
   ========================================================================== */
.sechead{max-width:52ch; margin-bottom:var(--sp-6)}
.sechead > *:first-child:not(h2) + h2{margin-top:var(--sp-2)}
.sechead > p:not(.label){margin-top:var(--sp-3); margin-bottom:0}

.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}
.mb-3{margin-bottom:var(--sp-3)}
.mb-5{margin-bottom:var(--sp-5)}
.mb-6{margin-bottom:var(--sp-6)}

/* sema cercevesi — beyaz zeminli cizim kutusu */
.figure--diagram{background:var(--white); padding:clamp(16px,3vw,32px)}
/* kucuk mono bilgi satiri */
.metaline{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2);
  font-family:var(--ff-mono); font-size:var(--t-3xs); color:var(--ink-3);
}

/* ==========================================================================
   HAREKET DAGARCIGI — hareket icerigin turune baglidir
   ========================================================================== */
/* Bolum acilisi: etiket, baslik ve giris sirayla yukselir.
   Mesafe kisa tutulur — birbirine yakin metinler uzun yol katetmez. */
.reveal-ready .sechead > [data-reveal]{transform:translateY(10px)}
.reveal-ready .sechead > [data-reveal].is-in{transform:none}

/* Kapsam seridi cipleri — soldan saga akar */
.reveal-ready .cover__list > [data-reveal]{transform:translateY(8px)}
.reveal-ready .cover__list > [data-reveal].is-in{transform:none}

/* Zaman cizelgesi ve dongu: yatay okunur, yatay acilir */
.reveal-ready .timeline > [data-reveal],
.reveal-ready .loop > [data-reveal]{transform:translateX(-14px)}
.reveal-ready .timeline > [data-reveal].is-in,
.reveal-ready .loop > [data-reveal].is-in{transform:none}

/* Sayi dizisi acilisi — yalnizca sira gercekten anlam tasidigi bolumde
   (kurulum takvimi). Kategori adi degil, surecin siniri gosterilir. */
.stepcount{
  display:flex; align-items:center; gap:12px; margin:0;
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.14em;
  color:var(--accent);
}
.stepcount b{font-weight:500}
.stepcount i{display:block; flex:0 1 76px; height:1px; background:var(--line-strong)}

/* ==========================================================================
   SAYFALAR ARASI GECIS
   Desteklemeyen tarayicida hicbir sey degismez; gecis olmaz, o kadar.
   ========================================================================== */
@view-transition{ navigation:auto }

/* Sabit ogeler yerinde kalir, yalnizca icerik degisir */
.topbar{view-transition-name:baslik}
.foot{view-transition-name:altbilgi}

::view-transition-old(root){animation:sayfaCik 240ms var(--ease-soft) both}
::view-transition-new(root){animation:sayfaGir 380ms var(--ease-soft) both}
@keyframes sayfaCik{to{opacity:0; transform:translateY(-6px)}}
@keyframes sayfaGir{from{opacity:0; transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* ==========================================================================
   SU CIZGISI — cizginin altindaki register
   Kural (NOTLAR bkz.): en cok uc bolumde kullanilir; form, mevzuat ve
   fiyat iceren hicbir bolumde kullanilmaz.
   ========================================================================== */
.sec--dip{
  position:relative; overflow:hidden;
  background:var(--dip); color:var(--on-dip);
}
.sec--dip > .wrap{position:relative; z-index:2}
.sec--dip h2,.sec--dip h3,.sec--dip .d2,.sec--dip .d3{color:var(--on-dip)}
.sec--dip .muted,.sec--dip .lead{color:var(--on-dip-2)}
.sec--dip .figcap{color:var(--on-dip-2)}
.sec--dip .figcap::before{color:var(--lume)}
.sec--dip .figure{border-color:var(--dip-line); background:var(--dip-2); box-shadow:none}
.sec--dip .arrowlink{color:var(--lume); background-image:linear-gradient(var(--lume),var(--lume))}
.sec--dip .arrowlink:hover{color:#7FE6D0}
.sec--dip .annot__key li{color:var(--on-dip-2)}
.sec--dip .annot__key i{background:var(--lume); color:#06171F}
.sec--dip .annot__key b{color:var(--lume)}

/* Imlec isigi — taban egrileri yalnizca imlecin yakininda gorunur.
   Dokunmatikte ve indirgenmis harekette hic devreye girmez. */
.lume{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity 520ms var(--ease-soft);
  background:
    repeating-radial-gradient(circle at 20% 26%, transparent 0 30px, rgba(79,214,187,.5) 30px 31px),
    repeating-radial-gradient(circle at 76% 64%, transparent 0 38px, rgba(79,214,187,.34) 38px 39px),
    repeating-radial-gradient(circle at 48% 92%, transparent 0 46px, rgba(79,214,187,.24) 46px 47px);
  -webkit-mask-image:radial-gradient(280px 280px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.6) 44%, transparent 76%);
  mask-image:radial-gradient(280px 280px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.6) 44%, transparent 76%);
}
.sec--dip.is-lit .lume{opacity:1}
.lume__glow{
  position:absolute; z-index:1; width:420px; height:420px; border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity 520ms var(--ease-soft);
  left:var(--mx,50%); top:var(--my,50%); translate:-50% -50%;
  background:radial-gradient(circle, rgba(79,214,187,.13) 0%, rgba(79,214,187,.05) 40%, transparent 70%);
}
.sec--dip.is-lit .lume__glow{opacity:1}
@media (prefers-reduced-motion:reduce){
  .lume,.lume__glow{display:none}
}

/* Su cizgisi kenari — duz kesme degil */
.waterline{position:relative; line-height:0; overflow:hidden}
.waterline svg{display:block; width:100%; height:clamp(38px,5vw,72px)}
.waterline--in{background:var(--paper)}
.waterline--out{background:var(--dip)}

/* Sarmalayicisiz bolum baslliklari da .sechead ile ayni olcuyu alir.
   Yalnizca dogrudan .wrap cocugu olanlar hedeflenir; sutun icindeki
   basliklar zaten sutun genisligiyle sinirlidir. */
.sec > .wrap > .d2,
.sec > .wrap > h2{max-width:22ch}

/* ==========================================================================
   MARKA İŞARETİ — su yüzeyinde kırılan halka
   Üst yarı yerinde, alt yarı kaymış: yüzeyin altındaki, göründüğü yerde değil.
   Kaynak dosyalar: assets/img/logo.svg · logo-mono.svg · favicon.svg
   ========================================================================== */
.brand__logo{width:26px; height:26px; flex:none; align-self:center; display:block}
.brand__logo path{fill:var(--accent)}
.brand__logo path.b{fill:var(--accent-3)}
.topbar.is-scrolled .brand__logo{width:23px; height:23px; transition:width var(--d2) var(--ease-soft), height var(--d2) var(--ease-soft)}
.foot .brand__logo{width:23px; height:23px}
.sec--dip .brand__logo path{fill:var(--on-dip)}
.sec--dip .brand__logo path.b{fill:var(--lume)}

/* ==========================================================================
   HUKUK METINLERI
   Sikici olabilir ama ozensiz gorunmemeli: KVKK sayfasinin kotu gorunmesi,
   veri guvenligine verilen onem hakkinda istenmeyen bir sey soyler.
   Maddeler numaralidir — atif yapilabilsin diye ("madde 4").
   ========================================================================== */
.legal > h2{
  display:flex; gap:14px; align-items:baseline;
  margin:var(--sp-6) 0 var(--sp-3);
}
.legal > h2:first-of-type{margin-top:0}
.legal__n{
  font-family:var(--ff-mono); font-size:var(--t-2xs); font-weight:500;
  letter-spacing:.12em; color:var(--accent); flex:none;
  font-variant-numeric:tabular-nums;
}
.legal > p,.legal > ul{max-width:68ch}
.legal > p + h2{margin-top:var(--sp-6)}

.legal__toc{
  border:1px solid var(--line); background:var(--white);
  padding:18px 20px 20px; margin-bottom:var(--sp-6); border-radius:var(--r);
}
.legal__toc > p{
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.legal__toc ol{margin:0; padding:0; list-style:none; display:grid; gap:6px}
@media (min-width:620px){.legal__toc ol{grid-template-columns:1fr 1fr; gap:6px 26px}}
.legal__toc a{
  display:flex; gap:11px; text-decoration:none; color:var(--ink-2);
  font-size:var(--t-xs); line-height:1.5; min-height:30px; align-items:center;
  transition:color var(--d1) var(--ease-soft);
}
.legal__toc a:hover{color:var(--accent)}
.legal__toc b{
  font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--accent);
  font-weight:500; flex:none; font-variant-numeric:tabular-nums;
}
.legal__son{
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.08em;
  color:var(--ink-3); margin-top:var(--sp-6); padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}

/* ==========================================================================
   BLOG YAZISI — okuma ilerlemesi ve icindekiler
   Uzun yazilarda okuyucunun nerede oldugunu bilmesi, sayfada kalma suresini
   dogrudan etkiler. Ikisi de icerigin gorunmesinin kosulu degildir.
   ========================================================================== */
.readbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:70;
  background:var(--accent-3); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

.yazi__toc{
  border:1px solid var(--line); background:var(--white);
  padding:18px 20px 20px; margin:0 0 var(--sp-6); border-radius:var(--r);
}
.yazi__toc > p{
  font-family:var(--ff-mono); font-size:var(--t-2xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.yazi__toc ol{margin:0; padding:0; list-style:none; display:grid; gap:6px; counter-reset:tc}
@media (min-width:620px){.yazi__toc ol{grid-template-columns:1fr 1fr; gap:6px 26px}}
.yazi__toc li{counter-increment:tc}
.yazi__toc a{
  display:flex; gap:11px; text-decoration:none; color:var(--ink-2);
  font-size:var(--t-xs); line-height:1.5; min-height:30px; align-items:center;
  transition:color var(--d1) var(--ease-soft);
}
.yazi__toc a::before{
  content:counter(tc,decimal-leading-zero);
  font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--accent); flex:none;
  font-variant-numeric:tabular-nums;
}
.yazi__toc a:hover{color:var(--accent)}

/* ==========================================================================
   FORM — gonderim, durum ve bot tuzagi
   ========================================================================== */
/* Bot tuzagi: ekranda gorunmez ama ekran okuyucudan da gizlenir.
   display:none kullanilmaz — bazi botlar onu atlar. */
.hp{position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

.form__t{font-family:var(--ff-display); font-size:var(--t-l); color:var(--ink); margin:0 0 6px}
.form__b{font-size:var(--t-xs); color:var(--ink-2); margin:0 0 8px}
.form__note{font-family:var(--ff-mono); font-size:var(--t-2xs); color:var(--ink-3); margin:0; line-height:1.5}

.formstat{
  margin:0; padding:11px 13px; font-size:var(--t-xs); line-height:1.5;
  border-left:2px solid var(--line-strong); background:var(--paper); color:var(--ink-2);
  display:none;
}
.formstat.is-on{display:block}
.formstat.is-ok{border-left-color:var(--good); background:var(--good-wash); color:#1F5230}
.formstat.is-err{border-left-color:var(--warn); background:var(--warn-wash); color:var(--warn)}
.formstat.is-busy{border-left-color:var(--accent-2)}
.form.is-busy button[type="submit"]{opacity:.6; pointer-events:none}

/* Arac sayfalarinda sonuc yakalama formu — sitenin en guclu talep noktasi */
.form--mini{
  gap:12px; padding:20px 20px 22px; margin-top:var(--sp-4);
  box-shadow:none; border-color:var(--line-strong);
}
.form--mini .form__t{font-size:var(--t-m); margin-bottom:4px}
.form--mini label{margin-bottom:5px}
.form--mini input{padding:10px 12px}
.form--mini .btn{width:100%; justify-content:center}
.form--mini .consent{font-size:var(--t-2xs)}

/* Blog listesi — konu filtresi ve one cikan yazi */
.filtre{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--sp-5); align-items:center}
.filtre__lbl{
  font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 8px 0 0;
}
.filtre button{
  font-family:var(--ff-body); font-size:var(--t-xs); color:var(--ink-2);
  background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:0 13px; min-height:38px; cursor:pointer;
  transition:border-color var(--d1) var(--ease-soft), color var(--d1) var(--ease-soft),
             background-color var(--d1) var(--ease-soft);
}
.filtre button:hover{border-color:var(--accent); color:var(--accent)}
.filtre button[aria-pressed="true"]{border-color:var(--accent); background:var(--tint); color:var(--accent); font-weight:600}
.filtre b{font-family:var(--ff-mono); font-weight:500; color:var(--ink-3); margin-left:7px; font-variant-numeric:tabular-nums}
.filtre button[aria-pressed="true"] b{color:var(--accent)}

.yazikart.is-gizli{display:none}
@media (min-width:820px){
  .yazikart--one{grid-column:1 / -1; border-right:none}
  .yazikart--one .yazikart__baslik{font-size:clamp(1.6rem,3vw,2.2rem); max-width:22ch}
  .yazikart--one .yazikart__ozet{font-size:var(--t-m); max-width:62ch}
}
.yazikart--one::before{
  content:"Öne çıkan"; position:absolute; top:30px; right:0;
  font-family:var(--ff-mono); font-size:var(--t-3xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-3);
}

/* ==========================================================================
   SIRALI BILESENLER — adimin sira oldugunu gostermek
   Once ikisi de bordurlu kutu izgarasiydi: sirayi yalnizca metin soyluyordu.
   Simdi ortak bir omurga uzerinde dugumler var; zaman cizelgesi yon okuyla
   biter, dongu ise basa doner — cunku o gercekten bir dongu.
   ========================================================================== */
.timeline,.loop{position:relative; border-top:1px solid var(--line-strong)}
.tl,.loop > div{position:relative}

/* Omurga uzerindeki dugum */
.tl::before,
.loop > div::before{
  content:""; position:absolute; left:0; top:-4px; z-index:1;
  width:7px; height:7px; border-radius:50%; background:var(--accent-2);
  transition:transform var(--d1) var(--ease), box-shadow var(--d1) var(--ease-soft);
}
.tl:hover::before,
.loop > div:hover::before{transform:scale(1.6)}

/* Baslangic dugumu halkali — dizinin nerede basladigi belli olsun */
.tl:first-child::before,
.loop > div:first-child::before{box-shadow:0 0 0 3px var(--accent-wash)}

/* Masaustu: zaman cizelgesinin sonunda yon oku */
@media (min-width:1080px){
  .timeline::after{
    content:""; position:absolute; right:0; top:-4px;
    width:7px; height:7px; border-top:1.5px solid var(--accent-2);
    border-right:1.5px solid var(--accent-2); transform:rotate(45deg);
  }
}
@media (min-width:760px){
  /* Dongu: son adimdan ilkine donus yolu */
  .loop{padding-bottom:26px}
  .loop::after{
    content:""; position:absolute; left:4px; right:4px; bottom:10px; height:14px;
    border:1px solid var(--line-strong); border-top:none; border-radius:0 0 9px 9px;
  }
  .loop > div:first-child::after{
    content:""; position:absolute; left:1px; bottom:-26px;
    width:7px; height:7px; border-top:1.5px solid var(--accent-3);
    border-left:1.5px solid var(--accent-3); transform:rotate(45deg);
  }
}

/* Dar ekran: omurga dikey olur */
@media (max-width:759px){
  .timeline,.loop{padding-left:24px; border-top:none}
  .timeline::before,.loop::before{
    content:""; position:absolute; left:3px; top:6px; bottom:6px;
    width:1px; background:var(--line-strong);
  }
  .tl::before,.loop > div::before{left:-24px; top:28px}
  .tl,.loop > div{border-right:none}
}

/* Dikey zaman cizelgesi — adim sayisi az oldugunda (destek surecinde dort adim).
   Medya sorgularindan sonra tanimlanir ki sutun sayisini gecersiz kilabilsin. */
.timeline--dikey{grid-template-columns:1fr}
.timeline--dikey .tl{border-right:none}

/* ==========================================================================
   PARALEL MADDELER — izgara degil, ritim
   .trust once tam bordurlu hucrelerdi: alti bagimsiz madde tablo gibi
   gorunuyordu. Bunlar birbiriyle iliskili degil, yan yana duran maddeler;
   kafes yerine hero'daki vurgu cizgisi duzeni kullanilir.
   ========================================================================== */
.trust > div::before{
  content:""; position:absolute; left:0; top:0;
  width:26px; height:2px; background:var(--accent-3);
}
@media (min-width:1080px){.trust{grid-template-columns:repeat(3,1fr)}}

/* Dar masaustunde yedi menu ogesi sigsin — 1024'te tasma yapiyordu.
   Menu 1024 altinda zaten hamburger'a donuyor. */
@media (min-width:1024px) and (max-width:1219px){
  .nav{gap:16px}
  .topbar__in{gap:16px}
  .topbar__cta{gap:10px; margin-left:16px}
}