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

/* ── Carpenza ─────────────────────────────────────────────────────────────
   Koyu tema KİLİTLİ. Marka koyu doğdu: ikonun zemini #241C17, uygulamanın
   darkBg'si #181511. Açık varyant markayı kaybettirirdi, o yüzden yok.
   Renkler uydurulmadı — lib/config/theme.dart'tan bire bir alındı.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ink:#181511; --ink-2:#1F1B16; --surface:#27221C;
  --line:#393228; --line-soft:#2A241E;
  --amber:#EC9213; --amber-hi:#FFD149;
  --text:#F8F7F6; --text-2:#B0A095; --text-3:#82766B;
  --r:4px;                       /* tek yarıçap. alet gibi, yastık gibi değil */
  --gut:clamp(20px,5vw,40px);
  --disp:'Archivo Expanded',ui-sans-serif,system-ui,sans-serif;
  --body:'Barlow',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::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(--ink); color:var(--text);
  font:400 1.0625rem/1.65 var(--body);
  /* Çizim kâğıdı. Süs değil, zemin — %2.5 opaklıkta, 32px kareli. */
  background-image:
    repeating-linear-gradient(0deg,rgba(248,247,246,.025) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(248,247,246,.025) 0 1px,transparent 1px 32px);
  background-attachment:fixed;
}
::selection{background:var(--amber);color:#1A1206}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gut)}

/* ── üst çubuk ── tek satır, 64px ── */
.top{border-bottom:1px solid var(--line-soft)}
.top .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand b{font:700 1.0625rem/1 var(--disp);letter-spacing:.02em}
.langs{display:flex;gap:4px}
.langs button{
  font:400 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);background:none;border:1px solid transparent;
  border-radius:var(--r);padding:6px 9px;cursor:pointer;transition:color .18s,border-color .18s;
}
.langs button:hover{color:var(--text-2)}
.langs button[aria-pressed=true]{color:var(--amber);border-color:var(--line)}
.langs button:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px}

/* ── kahraman ── asimetrik: sol metin / sağ marka ── */
.hero{padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(32px,5vw,56px)}
.hero .wrap{display:grid;gap:clamp(28px,5vw,64px);align-items:center;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
h1{
  margin:0 0 18px;font:700 clamp(2.125rem,4.9vw,3.5rem)/1.04 var(--disp);
  letter-spacing:-.022em;text-wrap:balance;
}
.lede{margin:0 0 30px;max-width:34ch;color:var(--text-2);font-size:1.125rem;line-height:1.55}
.cta{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--amber);color:#1A1206;text-decoration:none;
  font:500 .9375rem/1 var(--body);letter-spacing:.01em;
  padding:14px 22px;border-radius:var(--r);border:1px solid var(--amber);
  transition:background .18s,transform .12s;
}
.cta:hover{background:var(--amber-hi);border-color:var(--amber-hi)}
.cta:active{transform:translateY(1px)}
.cta svg{width:14px;height:14px;flex:none}
.mark{margin:0;justify-self:center;width:100%;max-width:340px}
.mark img{width:100%;height:auto;display:block;border-radius:clamp(18px,4vw,30px)}

/* ── İMZA: ölçü çizgisi ── gerçek yayın aşamasını gösterir ── */
.stage{border-block:1px solid var(--line-soft);padding:clamp(30px,5vw,44px) 0;background:var(--ink-2)}
.dim{width:100%;height:78px;display:block;overflow:visible}
.dim .ln{stroke:var(--line);stroke-width:1}
.dim .done{stroke:var(--amber)}
.dim .todo{stroke:var(--line);stroke-dasharray:5 5}
.dim .tick{stroke:var(--text-3);stroke-width:1}
.dim .node{fill:var(--ink-2);stroke:var(--text-3);stroke-width:1.5}
.dim .node.on{fill:var(--amber);stroke:var(--amber)}
.dim text{font:400 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;fill:var(--text-3)}
.dim text.on{fill:var(--amber)}
@media (prefers-reduced-motion:no-preference){
  /* Çizim kendini çiziyor. Tek koreografi anı; konu zaten teknik çizim. */
  .dim .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
    animation:draw .9s cubic-bezier(.16,1,.3,1) .15s forwards}
  .dim .fade{opacity:0;animation:fade .5s ease-out .75s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ── ne yapıyor ── kart yok, kutu yok; boşlukla gruplanır ── */
.does{padding:clamp(48px,7vw,88px) 0}
h2{margin:0 0 clamp(26px,4vw,40px);font:700 clamp(1.375rem,2.6vw,1.75rem)/1.15 var(--disp);letter-spacing:-.012em}
.grid{display:grid;gap:clamp(26px,4vw,44px) clamp(28px,5vw,72px);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid h3{margin:0 0 7px;font:500 1.0625rem/1.3 var(--body);letter-spacing:.005em;color:var(--text)}
.grid p{margin:0;color:var(--text-2);font-size:.9688rem;line-height:1.6;max-width:44ch}

/* ── alt bilgi ── */
.foot{border-top:1px solid var(--line-soft);padding:clamp(32px,5vw,48px) 0 clamp(40px,6vw,64px);
  color:var(--text-3);font-size:.9375rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.foot a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.foot .who{font:400 .8125rem/1.5 var(--mono);letter-spacing:.05em}

/* ── uzun metin (yasal sayfalar) ── */
.doc{padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px)}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(1.875rem,4.2vw,2.75rem);margin-bottom:10px}
.doc .meta{margin:0 0 34px;color:var(--text-3);font:400 .8125rem/1.6 var(--mono);letter-spacing:.04em}
.doc h2{margin:44px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);font-size:1.25rem}
.doc h3{margin:30px 0 8px;font:500 1.0625rem/1.35 var(--body);color:var(--text)}
.doc p,.doc li{color:var(--text-2)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin:7px 0}
.doc a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(236,146,19,.35)}
.doc a:hover{border-bottom-color:var(--amber)}
.doc strong{color:var(--text);font-weight:500}
.note{background:var(--surface);border-left:2px solid var(--amber);border-radius:0 var(--r) var(--r) 0;
  padding:16px 18px;margin:22px 0}
.note p:last-child{margin-bottom:0}
.tbl{overflow-x:auto;margin:18px 0;border:1px solid var(--line-soft);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.9375rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--text-2)}
th{background:var(--ink-2);color:var(--text);font:500 .8125rem/1.3 var(--mono);
  letter-spacing:.06em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
code{background:var(--surface);border-radius:3px;padding:2px 6px;font:400 .8438rem/1 var(--mono);color:var(--amber-hi)}

/* ── dil ── */
[data-lang]{display:none}
[data-lang].on{display:block}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .mark{order:-1;max-width:210px;justify-self:start}
  .grid{grid-template-columns:1fr}
  .foot .wrap{flex-direction:column;align-items:flex-start}
}

/* ── İMZA ÖĞESİ: ölçü çizgisi ──────────────────────────────────────────────
   Teknik çizimin dimension line'ı. Süs değil: uygulamanın GERÇEK yayın
   aşamasını gösteriyor. Uçlardaki dikey çizgiler çizimdeki "extent tick",
   düğümler istasyon. Kat edilen kısım amber ve sürekli, kalan kısım kesikli.
   SVG değil çünkü SVG içindeki metin mobilde 4px'e inip okunmaz oluyordu.
   ───────────────────────────────────────────────────────────────────────── */
.dim{list-style:none;margin:0;padding:26px 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.dim::before,.dim::after{content:"";position:absolute;top:0;width:1px;height:22px;background:var(--text-3)}
.dim::before{left:0} .dim::after{right:0}
.rail{position:absolute;top:21px;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px)}
.rail i{position:absolute;inset:0 auto 0 0;width:16.667%;background:var(--amber);
  transform-origin:left center;display:block}
@media (prefers-reduced-motion:no-preference){
  .rail i{transform:scaleX(0);animation:grow .8s cubic-bezier(.16,1,.3,1) .2s forwards}
}
@keyframes grow{to{transform:scaleX(1)}}
.st{position:relative;padding-top:0;text-align:center}
.st .dot{position:absolute;top:-9px;left:50%;translate:-50% 0;width:9px;height:9px;
  border-radius:50%;background:var(--ink-2);border:1.5px solid var(--text-3);box-sizing:border-box}
.st.on .dot{background:var(--amber);border-color:var(--amber)}
.st .lbl{display:block;margin-top:9px;font:400 .75rem/1.3 var(--mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.st.on .lbl{color:var(--amber)}
.stage .cap{margin:22px 0 0;color:var(--text-2);font-size:.9688rem;max-width:52ch}
@media (max-width:520px){
  .st .lbl{font-size:.6875rem;letter-spacing:.05em}
}