/* ═══════════════════════════════════════════════════════════════════════════
   Kendo NX — temel katman
   Yaklaşım: İsviçre modernizmi + editoryal ızgara.
   Katı 12 kolon, asimetrik denge, tek vurgu rengi, süs yok, kılcal çizgiler.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* — zemin: soğuk beyaz değil, sıcak kağıt — */
  --paper:      #f4f2ed;
  --paper-2:    #eae6de;
  --paper-3:    #e2ddd3;
  --card:       #fbfaf7;

  /* — mürekkep: siyah değil, koyu petrol — */
  --ink:        #14282f;
  --ink-2:      #3b545c;
  --ink-3:      #6a838b;
  --ink-4:      #94a8ae;

  /* — tek sinyal rengi — */
  --signal:     #c8340f;
  --signal-2:   #a52a0c;
  --signal-ink: #fff;

  /* — kılcal çizgiler: kutu değil, çizgi — */
  --rule:       rgba(20,40,47,.16);
  --rule-soft:  rgba(20,40,47,.09);
  --rule-dark:  rgba(244,242,237,.17);

  /* — koyu bölümler: petrol, siyah değil — */
  --night:      #143039;
  --night-2:    #1b3f4a;
  --night-ink:  #f4f2ed;
  --night-ink2: #9db4bb;

  /* — ölçek: 8px ritmi — */
  --u: 8px;
  --gut: clamp(20px, 4.2vw, 64px);
  --max: 1320px;

  /* — hareket — */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 160ms;
  --med:  260ms;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-feature-settings:"tnum" 1,"ss01" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* Kağıt dokusu — çok düşük yoğunlukta, ekranda his olarak kalır */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:2}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}
input,textarea,button,select{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--signal);color:var(--signal-ink)}

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

/* ─── tipografi ───────────────────────────────────────────────────────────
   Display: Archivo — endüstriyel grotesk, kare terminaller, sıkı tracking.
   Metin: Inter Tight. Veri ve etiketler: IBM Plex Mono.
   ───────────────────────────────────────────────────────────────────────── */

h1,h2,h3,h4{
  margin:0;
  font-family:'Archivo','Inter Tight',sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.02;
  text-wrap:balance;
}

.mono{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-feature-settings:"tnum" 1;
}

/* Kenar boşluğuna asılan bölüm etiketi — ortalanmış "eyebrow" yerine */
.tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.tag::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--signal);
  flex:none;
}

.lede{
  font-size:clamp(18px,1.9vw,21px);
  line-height:1.5;
  color:var(--ink-2);
  letter-spacing:-.012em;
  text-wrap:pretty;
}

/* ─── ızgara ──────────────────────────────────────────────────────────────── */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

.sec{padding-block:clamp(72px,9.5vw,140px)}
.sec--tight{padding-block:clamp(48px,6vw,84px)}

/* 12 kolon — asimetri buradan kurulur */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2.4vw,34px)}

/* Editoryal bölüm başlığı: etiket solda kenarda asılı, başlık geniş kolonda */
.shead{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.4vw,34px);
       align-items:baseline;margin-bottom:clamp(40px,5.5vw,72px)}
.shead__tag{grid-column:1/3;padding-top:.6em}
.shead__h{grid-column:3/9}
.shead__h h2{font-size:clamp(30px,4.4vw,58px)}
.shead__note{grid-column:9/13;font-size:15.5px;line-height:1.6;color:var(--ink-3);
             padding-top:.7em;border-top:1px solid var(--rule);align-self:start}

/* ─── butonlar: kutu değil, niyet ─────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter Tight',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:-.011em;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn--primary{background:var(--signal);color:var(--signal-ink)}
.btn--primary:hover{background:var(--signal-2)}
.btn--ghost{border-color:var(--rule);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(20,40,47,.05)}
.btn--ghost-dark{border-color:var(--rule-dark);color:var(--night-ink)}
.btn--ghost-dark:hover{border-color:var(--night-ink);background:rgba(244,242,237,.07)}
.btn--dark{background:var(--ink);color:var(--paper);padding:11px 20px;font-size:14.5px}
.btn--dark:hover{background:var(--signal)}
.btn:active{transform:translateY(1px)}

/* Metin bağlantısı: altı çizgi büyür */
.lnk{
  position:relative;font-weight:600;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--med) var(--ease);
  padding-bottom:2px;
}
.lnk:hover{background-size:100% 1px;color:var(--signal)}

/* ─── üst menü ────────────────────────────────────────────────────────────
   Kaydırılmadan önce zeminle bütünleşik ve ferah; kaydırıldığında sıkışıp
   kılcal çizgisini gösteriyor. Bulunulan bölüm menüde işaretleniyor.
   ───────────────────────────────────────────────────────────────────────── */

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
      padding:12px 20px;font-size:14px;font-weight:600}
.skip:focus{left:var(--gut);top:12px}

.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--gut);
  height:84px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:height var(--med) var(--ease),background var(--med) var(--ease),
             border-color var(--med) var(--ease);
}
.nav[data-scrolled="true"]{
  height:64px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(170%) blur(18px);
  -webkit-backdrop-filter:saturate(170%) blur(18px);
  border-bottom-color:var(--rule);
}

.nav__brand{display:flex;align-items:center;flex:none}
.nav__logo{height:36px;width:auto;transition:height var(--med) var(--ease)}
.nav[data-scrolled="true"] .nav__logo{height:30px}

.nav__links{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);
            font-size:14.5px;font-weight:500;letter-spacing:-.008em}
.nav__links a:not(.btn){
  color:var(--ink-2);position:relative;padding-block:8px;
  transition:color var(--fast) var(--ease);
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--signal);transition:right var(--med) var(--ease);
}
.nav__links a:not(.btn):hover{color:var(--ink)}
.nav__links a:not(.btn):hover::after{right:0}
/* bulunulan bölüm */
.nav__links a[aria-current]{color:var(--ink);font-weight:600}
.nav__links a[aria-current]::after{right:0}

.nav__cta{margin-left:6px}
.nav__cta span{transition:transform var(--med) var(--ease);display:inline-block}
.nav__cta:hover span{transform:translateX(3px)}

.nav__panelfoot{display:none}

.nav__toggle{
  display:none;background:none;border:0;padding:12px 0 12px 12px;cursor:pointer;flex:none;
}
.nav__toggle span{display:block;width:24px;height:1.5px;background:var(--ink);
                  transition:transform var(--med) var(--ease),opacity var(--fast) var(--ease)}
.nav__toggle span+span{margin-top:7px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span+span{transform:translateY(-4.25px) rotate(-45deg)}

/* ─── alt bilgi ───────────────────────────────────────────────────────────
   Açık zemin: logo hiçbir şekilde renklendirilmeden, orijinal haliyle okunuyor.
   Ayrım koyu zeminle değil, derin kağıt tonu ve kalın üst çizgiyle kuruluyor.
   ───────────────────────────────────────────────────────────────────────── */

.foot{background:var(--paper-3);border-top:2px solid var(--ink);margin-top:auto}
.foot__grid{
  display:flex;align-items:flex-start;gap:clamp(32px,5vw,80px);flex-wrap:wrap;
  padding-block:clamp(52px,6.5vw,88px) clamp(36px,4.5vw,56px);
}
.foot__brand{flex:0 1 280px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.foot__cols{
  flex:1 1 520px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(24px,3vw,40px);
}
.foot__brand img{height:36px;width:auto}
.foot__pitch{font-size:14.5px;line-height:1.6;color:var(--ink-3);max-width:32ch}
.foot__mail{font-size:14.5px;color:var(--ink);font-weight:500;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;transition:color var(--fast) var(--ease)}
.foot__mail:hover{color:var(--signal)}

.foot__ct{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.18em;
          text-transform:uppercase;color:var(--ink-4);
          margin-bottom:18px;min-height:1.4em;white-space:nowrap}
.foot__col ul{display:flex;flex-direction:column;gap:11px}
.foot__col a{font-size:14.5px;color:var(--ink-2);line-height:1.4;
             transition:color var(--fast) var(--ease)}
.foot__col a:hover{color:var(--signal)}

.foot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-block:22px clamp(26px,3vw,34px);
}
.foot__tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.foot__c{font-size:11.5px;color:var(--ink-4)}

/* ─── hareket: az, anlamlı, iptal edilebilir ──────────────────────────────── */

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Gizleme yalnızca JS çalışıyorken. JS yoksa içerik olduğu gibi görünür. */
.js [data-reveal]:not(.in){opacity:0;transform:translateY(14px)}
.js [data-reveal].in{opacity:1;transform:none;
  transition:opacity 560ms var(--ease),transform 560ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}

/* ─── duyarlı ─────────────────────────────────────────────────────────────── */

@media (max-width:1080px){
  .shead{grid-template-columns:1fr;gap:18px}
  .shead__tag,.shead__h,.shead__note{grid-column:1/-1}
  .shead__note{border-top:1px solid var(--rule);padding-top:16px;max-width:60ch}

  .foot__grid{gap:40px}
  .foot__brand{flex:1 1 100%}
}

@media (max-width:860px){
  html{scroll-padding-top:76px}
  body{font-size:16.5px}
  .nav{height:64px}
  .nav[data-scrolled="true"]{height:60px}

  /* Açılır panel: tam ekran, iri tipografi, altta marka satırı */
  .nav__links{
    position:fixed;inset:64px 0 0;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;background:var(--paper);padding:8px var(--gut) calc(var(--gut) + 8px);
    overflow-y:auto;border-top:1px solid var(--rule);
  }
  .nav__links[data-open="false"]{display:none}
  .nav__links a:not(.btn){
    padding:20px 0;border-bottom:1px solid var(--rule-soft);
    font-family:'Archivo',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.03em;
    color:var(--ink);
  }
  .nav__links a:not(.btn)::after{display:none}
  .nav__links a[aria-current]{color:var(--signal)}
  .nav__cta{margin:26px 0 0;justify-content:center;padding:17px 22px;font-size:16px}
  .nav__panelfoot{
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    margin-top:auto;padding-top:28px;
    font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
  }
  .nav__toggle{display:block}

  .foot__cols{grid-template-columns:repeat(2,1fr);gap:30px 24px}
}

@media (max-width:520px){
  .foot__cols{grid-template-columns:1fr}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blok stilleri.
   Kural: eşit kart ızgarası yok. Kutu yerine kılcal çizgi, gölge yerine kontrast,
   ortalanmış blok yerine asılı kenar etiketi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── hero ────────────────────────────────────────────────────────────────── */

/* Sade hero: etiket, çok büyük başlık, tek paragraf, butonlar. Başka bir şey yok. */
.hero{padding:clamp(128px,15vw,196px) 0 clamp(96px,11vw,150px)}
.hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px)}

/* Satır 1: etiket tam genişlikte asılı — kesilmez.
   Satır 2: başlık 10 kolon, gerçekten büyük.
   Satır 3: serif vurgu solda, teknik açıklama sağda — asimetri buradan. */
.hero__meta{grid-column:1/13;margin-bottom:clamp(22px,3vw,38px)}

.hero__lead{grid-column:1/12}
.hero h1{
  font-size:clamp(44px,7.8vw,116px);
  line-height:.92;
  letter-spacing:-.05em;
  margin-bottom:clamp(30px,3.6vw,46px);
}
.hero h1 em{font-style:normal;color:var(--signal)}

/* Tek paragraf: başlığın hemen altında, okunur ölçüde */
.hero__sub{
  grid-column:1/8;
  font-size:clamp(18px,2vw,22px);
  line-height:1.55;letter-spacing:-.014em;
  color:var(--ink-2);
  margin-bottom:0;
}
.hero__body{grid-column:1/8;font-size:16px;line-height:1.7;color:var(--ink-3);margin-top:18px}
.hero__body strong{color:var(--ink);font-weight:600}

.hero__cta{grid-column:1/13;display:flex;gap:12px;flex-wrap:wrap;
           margin-top:clamp(34px,4vw,52px)}

.hero__foot{grid-column:1/13;margin-top:clamp(44px,5vw,68px);
            border-top:1px solid var(--ink);padding-top:16px;
            display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.hero__foot p{font-size:14px;color:var(--ink-3);letter-spacing:-.005em}
.hero__foot strong{color:var(--ink);font-weight:600}

/* modül rozetleri */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
      letter-spacing:.08em;color:var(--paper);background:var(--mod,#6b7280);
      padding:4px 7px;line-height:1;border-radius:2px}

/* ─── modül panosu: kart değil, teknik dizin ──────────────────────────────── */

.board{
  grid-column:1/13;margin-top:clamp(34px,4vw,54px);
  background:var(--night);color:var(--night-ink);
  padding:clamp(22px,2.8vw,34px);
  border-radius:3px;
}
.board__bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
            flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--rule-dark);
            font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;
            text-transform:uppercase;color:var(--night-ink2)}
.board__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tile{
  padding:18px 18px 18px 0;border-bottom:1px solid var(--rule-dark);
  display:flex;align-items:baseline;gap:12px;
  transition:background var(--fast) var(--ease);
}
.tile:hover{background:rgba(244,242,237,.05)}
.tile__code{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
            letter-spacing:.09em;color:var(--paper);background:var(--mod);
            padding:3px 6px;border-radius:2px;line-height:1;flex:none}
.tile__name{font-size:14px;font-weight:500;color:var(--night-ink);letter-spacing:-.012em;
            line-height:1.25;min-width:0}
.tile__n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--night-ink2);
         margin-left:auto;flex:none;padding-left:8px}
.board__foot{padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
             font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
             color:var(--night-ink2)}
.board__foot b{color:var(--night-ink);font-weight:600}

/* ─── sayı şeridi: kart yok, kılcal ayraç ─────────────────────────────────── */

.stats{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px);
       border-top:2px solid var(--ink);padding-top:clamp(24px,3vw,36px)}
.stats > div{grid-column:span 3;padding-right:20px}
.stats > div + div{border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,28px)}
.stats h3{
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(23px,2.5vw,32px);letter-spacing:-.045em;line-height:1.15;
  font-feature-settings:"tnum" 1;text-wrap:balance;
  /* iki satıra taşan başlıklarda gövde metinleri hizada kalsın */
  min-height:2.3em;
}
.stats p{font-size:14.5px;color:var(--ink-3);margin-top:16px;line-height:1.6;max-width:34ch}

/* ─── adımlar: yatay zaman çizgisi ────────────────────────────────────────── */

.dark{background:var(--night);color:var(--night-ink)}
.dark .tag{color:var(--night-ink2)}
.dark .shead__note{color:var(--night-ink2);border-top-color:var(--rule-dark)}
.dark .lede{color:var(--night-ink2)}

.steps{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px)}
.step{grid-column:span 4;padding-top:22px;border-top:1px solid var(--rule-dark);position:relative}
.step__n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
         letter-spacing:.16em;color:var(--signal);margin-bottom:16px}
.step h3{font-size:21px;font-weight:600;letter-spacing:-.028em;margin-bottom:12px;
         color:var(--night-ink);line-height:1.18}
.step p{font-size:15px;line-height:1.66;color:var(--night-ink2);max-width:34ch}

.note{
  margin-top:clamp(44px,5vw,68px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px);
  border-top:1px solid var(--rule-dark);padding-top:26px;
}
.note__k{grid-column:1/3;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
         letter-spacing:.18em;color:var(--signal);text-transform:uppercase}
.note p{grid-column:3/11;font-size:clamp(17px,1.8vw,21px);line-height:1.6;
        color:var(--night-ink);letter-spacing:-.014em;max-width:64ch}

/* ─── özellikler: kart değil, numaralı editoryal liste ────────────────────── */

.feats{border-top:1px solid var(--ink)}
.feat{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2.4vw,34px);
  padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--rule);
  align-items:baseline;transition:background var(--fast) var(--ease);
}
.feat:hover{background:rgba(20,40,47,.03)}
.feat__no{
  grid-column:1/2;
  font-family:'IBM Plex Mono',monospace;font-size:clamp(20px,2.4vw,30px);font-weight:400;
  letter-spacing:-.04em;color:var(--signal);line-height:1;
}
.feat__tag{grid-column:2/3;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
           letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);padding-top:.5em}
.feat h3{grid-column:3/7;font-size:clamp(19px,2.1vw,26px);font-weight:600;
         letter-spacing:-.03em;line-height:1.16}
.feat p{grid-column:7/13;font-size:15.5px;line-height:1.66;color:var(--ink-3);max-width:52ch}

/* ─── modüller: teknik dizin tablosu ──────────────────────────────────────── */

.alt{background:var(--paper-2)}

.mods{border-top:1px solid var(--ink)}
.mod{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2.4vw,34px);
  align-items:baseline;padding:clamp(16px,1.9vw,24px) 0;
  border-bottom:1px solid var(--rule);
  transition:background var(--fast) var(--ease);
}
.mod:hover{background:rgba(20,40,47,.04)}
.mod__badge{
  grid-column:1/2;justify-self:start;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  color:var(--paper);background:var(--mod);padding:5px 8px;border-radius:2px;line-height:1;
}
.mod__t{grid-column:2/6;display:flex;align-items:baseline;gap:12px}
.mod__t b{font-size:17.5px;font-weight:600;letter-spacing:-.024em}
.mod__t span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-4);
             margin-left:auto;padding-left:10px;white-space:nowrap}
.mod__d{grid-column:6/13;font-size:15px;color:var(--ink-3);line-height:1.55}

/* ─── yetenek sayıları: büyük mono rakamlar ───────────────────────────────── */

.deep{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2.4vw,34px);
      border-top:1px solid var(--ink)}
.deep__i{grid-column:span 4;padding:clamp(26px,3vw,38px) clamp(18px,2vw,28px)
         clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--rule)}
.deep__i:not(:nth-child(3n+1)){border-left:1px solid var(--rule);
                               padding-left:clamp(18px,2vw,28px)}
.deep__v{font-family:'IBM Plex Mono',monospace;font-weight:500;
         font-size:clamp(28px,3.4vw,44px);letter-spacing:-.05em;line-height:1;
         font-feature-settings:"tnum" 1}
.deep__k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
         text-transform:uppercase;color:var(--signal);margin:16px 0 10px}
.deep__t{font-size:14.5px;line-height:1.6;color:var(--ink-3);max-width:36ch}

/* ─── modül haritası ──────────────────────────────────────────────────────── */

.mm{border-top:1px solid var(--ink)}
.mm-card{border-bottom:1px solid var(--rule);padding:clamp(22px,2.6vw,32px) 0}
.mm-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap;
         list-style:none;cursor:default}
.mm-card>summary::-webkit-details-marker{display:none}
.mm-badge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
          letter-spacing:.09em;color:var(--paper);background:var(--mod);
          padding:5px 8px;border-radius:2px;line-height:1}
.mm-title{font-size:19px;font-weight:600;letter-spacing:-.026em}
.mm-count{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-4)}
.mm-chev{display:none;color:var(--ink-4);flex:none;transition:transform var(--med) var(--ease)}
.mm-cols{column-count:var(--cols,3);column-gap:clamp(20px,2.6vw,34px)}
.mm-col{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:20px;
        display:inline-block;width:100%}
.mm-col--long{break-inside:auto;-webkit-column-break-inside:auto;display:block}
.mm-col--long .mm-col-t{break-after:avoid}
.mm-col-t{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
          letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.mm-col-t--none{color:var(--paper-3)}
.mm-list li{font-size:14px;color:var(--ink-2);line-height:1.5;padding:2.5px 0}

/* ─── blog vitrini ────────────────────────────────────────────────────────── */

.posts{border-top:1px solid var(--ink)}
.post-c{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2.4vw,34px);
  align-items:baseline;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--rule);
  transition:background var(--fast) var(--ease);
}
.post-c:hover{background:rgba(20,40,47,.04)}
.post-c:hover h3{color:var(--signal)}
.post-c__k{grid-column:1/3;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
           letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.post-c h3{grid-column:3/8;font-size:clamp(18px,2vw,24px);font-weight:600;
           letter-spacing:-.028em;line-height:1.18;transition:color var(--fast) var(--ease)}
.post-c p{grid-column:8/12;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:44ch}
.post-c__m{grid-column:12/13;font-family:'IBM Plex Mono',monospace;font-size:11px;
           color:var(--ink-4);text-align:right;white-space:nowrap}

/* ─── demo formu ──────────────────────────────────────────────────────────── */

.demo{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3.4vw,54px);
      align-items:start}
.demo > div:first-child{grid-column:1/6}
.demo h2{font-size:clamp(30px,4vw,52px);margin-bottom:22px}
.points{border-top:1px solid var(--ink);max-width:42ch;margin-top:32px}
.points li{padding:15px 0;border-bottom:1px solid var(--rule);font-size:15.5px;
           color:var(--ink-2);line-height:1.5;display:flex;gap:12px}
.points li::before{content:"—";color:var(--signal);flex:none}

.form{grid-column:7/13;background:var(--card);border:1px solid var(--rule);
      padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:13px;border-radius:3px}
.form__t{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;
         text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:12px 2px;font-size:16px;border-radius:0;
  transition:border-color var(--fast) var(--ease);
}
.form textarea{resize:vertical;line-height:1.6;min-height:84px;font-family:inherit}
.form input:focus,.form textarea:focus{border-bottom-color:var(--signal);outline:none}
.form ::placeholder{color:var(--ink-4)}
.form__note{font-size:12.5px;color:var(--ink-4);text-align:center;line-height:1.5}
.form__ok{padding:52px 8px;text-align:center}
.form__ok .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
             color:var(--signal)}
.form__ok .t{font-family:'Archivo',sans-serif;font-weight:600;font-size:25px;
             margin:14px 0 10px;letter-spacing:-.03em}
.form__ok .d{font-size:15.5px;color:var(--ink-3);line-height:1.6}
.form__err{font-size:13.5px;color:var(--signal-2);text-align:center;line-height:1.5}

/* ─── çağrı bandı ─────────────────────────────────────────────────────────── */

.band{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px);
      align-items:end}
.band__h{grid-column:1/8}
.band__h h2{font-size:clamp(30px,4.4vw,58px)}
.band__h p{margin-top:18px;font-size:clamp(17px,1.8vw,20px);color:var(--night-ink2);
           line-height:1.6;max-width:46ch}
.band__a{grid-column:9/13;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* ─── SSS ────────────────────────────────────────────────────────────────── */

.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
             font-size:clamp(17px,1.8vw,20px);font-weight:600;letter-spacing:-.024em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1px;
                    background:var(--ink);transition:transform var(--med) var(--ease)}
.faq summary::before{content:"";position:absolute;right:11px;top:50%;width:1px;height:11px;
                     margin-top:-5px;background:var(--ink);
                     transition:transform var(--med) var(--ease),opacity var(--med) var(--ease)}
.faq details[open] summary::before{opacity:0;transform:rotate(90deg)}
.faq details>div{padding:0 0 22px;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:68ch}

/* ─── serbest metin bloğu ─────────────────────────────────────────────────── */

.sec > .wrap > .prose{max-width:70ch}

/* ─── duyarlı ─────────────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .hero__lead,.hero__sub,.hero__cta{grid-column:1/-1}
  .hero__body{grid-column:1/-1;max-width:62ch;margin-top:22px}
  .board__grid{grid-template-columns:repeat(2,1fr)}
  .stats > div{grid-column:span 6}
  .stats > div:nth-child(odd){border-left:0;padding-left:0}
  .stats > div:nth-child(n+3){margin-top:26px;padding-top:26px;border-top:1px solid var(--rule)}
  .step{grid-column:span 6}
  .feat h3{grid-column:3/13}
  .feat p{grid-column:3/13;margin-top:10px;max-width:60ch}
  .mod__t{grid-column:2/13}
  .mod__d{grid-column:2/13;margin-top:6px}
  .deep__i{grid-column:span 6}
  .deep__i:not(:nth-child(3n+1)){border-left:0;padding-left:0}
  .deep__i:nth-child(even){border-left:1px solid var(--rule);padding-left:clamp(18px,2vw,28px)}
  .demo > div:first-child,.form{grid-column:1/-1}
  .post-c h3{grid-column:3/13}
  .post-c p{grid-column:3/13;margin-top:8px;max-width:60ch}
  .post-c__m{grid-column:3/13;text-align:left;margin-top:10px}
  .band__h,.band__a{grid-column:1/-1}
  .band__a{justify-content:flex-start;margin-top:26px}
  .mm-cols{column-count:2}
}

@media (max-width:760px){
  .hero h1{font-size:clamp(36px,10vw,52px);line-height:.98}
  .board__grid{grid-template-columns:1fr}
  .tile{padding-right:0}
  .stats > div{grid-column:1/-1;border-left:0;padding-left:0}
  .stats > div + div{margin-top:22px;padding-top:22px;border-top:1px solid var(--rule)}
  .step{grid-column:1/-1}
  .note__k{grid-column:1/-1;margin-bottom:12px}
  .note p{grid-column:1/-1}
  .feat__no{grid-column:1/3}
  .feat__tag{grid-column:3/13;padding-top:0}
  .feat h3,.feat p{grid-column:1/-1}
  .mod__badge{grid-column:1/3}
  .mod__t,.mod__d{grid-column:1/-1}
  .mod__t{margin-top:10px}
  .deep__i{grid-column:1/-1;border-left:0!important;padding-left:0!important}
  .form__row{grid-template-columns:1fr}
  .post-c__k{grid-column:1/-1}
  .post-c h3,.post-c p,.post-c__m{grid-column:1/-1}
  .mm-cols{column-count:1}
  .mm-card>summary{cursor:pointer;margin-bottom:0}
  .mm-card[open]>summary{margin-bottom:20px}
  .mm-chev{display:block}
  .mm-card[open] .mm-chev{transform:rotate(180deg)}
  .mm-title{font-size:17px;flex:1 1 auto;min-width:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blog — editoryal düzen. Yazı sayfası bir dergi sayfası gibi kurulur:
   kenar boşluğunda künye, dar ölçüde metin, serif giriş cümlesi.
   ═══════════════════════════════════════════════════════════════════════════ */

.bwrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.bhead{padding-top:clamp(104px,12vw,144px)}

.crumb{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:26px;
}
.crumb a:hover{color:var(--signal)}
.crumb span{color:var(--paper-3)}

/* ─── liste ───────────────────────────────────────────────────────────────── */

.blist-hero{padding-top:clamp(104px,12vw,144px);padding-bottom:clamp(36px,4.5vw,56px)}
.blist-hero h1{
  font-size:clamp(38px,6.4vw,86px);line-height:.96;letter-spacing:-.045em;
  margin-bottom:24px;max-width:16ch;
}
.blist-hero p{
  font-size:clamp(17px,1.9vw,21px);line-height:1.6;letter-spacing:-.014em;
  color:var(--ink-2);max-width:58ch;
}

.bcats{display:flex;gap:0;flex-wrap:wrap;margin:clamp(36px,4.5vw,56px) 0 0;
       border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.bcat{
  border:0;background:none;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  padding:16px 22px 16px 0;position:relative;
  transition:color var(--fast) var(--ease);
}
.bcat + .bcat{padding-left:22px;border-left:1px solid var(--rule)}
.bcat::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;
             background:var(--signal);transition:right var(--med) var(--ease)}
.bcat:hover{color:var(--ink)}
.bcat[aria-pressed="true"]{color:var(--ink)}
.bcat[aria-pressed="true"]::after{right:22px}

.bgrid{padding-bottom:clamp(72px,9vw,120px)}

/* Yazı satırı — kart değil, dizin girdisi */
.bcard{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2.4vw,34px);
  align-items:baseline;padding:clamp(22px,2.8vw,34px) 0;
  border-bottom:1px solid var(--rule);
  transition:background var(--fast) var(--ease);
}
.bcard:hover{background:rgba(20,40,47,.04)}
.bcard:hover h2{color:var(--signal)}
.bcard__k{grid-column:1/3;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
          letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.bcard h2{grid-column:3/8;font-size:clamp(19px,2.2vw,27px);line-height:1.14;
          letter-spacing:-.032em;transition:color var(--fast) var(--ease)}
.bcard p{grid-column:8/12;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:46ch}
.bcard__m{grid-column:12/13;font-family:'IBM Plex Mono',monospace;font-size:11px;
          color:var(--ink-4);text-align:right;display:flex;flex-direction:column;gap:3px}

/* Öne çıkan yazı — koyu zemine oturur, ölçek büyür */
.bcard--lead{background:var(--night);color:var(--night-ink);border-bottom:0;
             padding:clamp(30px,4vw,52px) clamp(22px,2.6vw,34px);margin-bottom:2px}
.bcard--lead:hover{background:var(--night-2)}
.bcard--lead .bcard__k{color:var(--signal)}
.bcard--lead h2{grid-column:3/9;font-size:clamp(24px,3.4vw,44px);line-height:1.05;
                color:var(--night-ink)}
.bcard--lead:hover h2{color:var(--night-ink)}
.bcard--lead p{grid-column:9/13;color:var(--night-ink2);font-size:16px}
.bcard--lead .bcard__m{grid-column:3/13;color:var(--night-ink2);text-align:left;
                       flex-direction:row;gap:20px;margin-top:22px;
                       padding-top:16px;border-top:1px solid var(--rule-dark)}

/* ─── yazı sayfası ────────────────────────────────────────────────────────── */

.post{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2.4vw,34px);
      align-items:start;padding-bottom:clamp(72px,9vw,120px)}

.post__h{padding-bottom:clamp(30px,4vw,48px);border-bottom:1px solid var(--ink);
         margin-bottom:clamp(30px,4vw,48px)}
.post__h h1{font-size:clamp(32px,5.2vw,68px);line-height:.98;letter-spacing:-.042em;
            margin-bottom:24px;max-width:20ch}
.post__lead{
  font-size:clamp(17px,1.9vw,21px);line-height:1.6;letter-spacing:-.014em;
  color:var(--ink-2);max-width:58ch;
}
.post__m{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;
         font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
         color:var(--ink-4)}

.post > article{grid-column:1/9;min-width:0}
.aside{grid-column:10/13;position:sticky;top:100px}

/* ─── metin ───────────────────────────────────────────────────────────────── */

.prose{font-size:17.5px;line-height:1.72;color:var(--ink-2);max-width:66ch;min-width:0}
.prose h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.034em;line-height:1.1;
          margin:clamp(48px,5.5vw,72px) 0 20px;scroll-margin-top:100px;color:var(--ink)}
.prose h3{font-size:clamp(19px,2vw,22px);letter-spacing:-.026em;line-height:1.2;
          margin:40px 0 14px;font-weight:600;scroll-margin-top:100px;color:var(--ink)}
.prose h4{font-size:17px;letter-spacing:-.02em;margin:28px 0 10px;font-weight:600;
          scroll-margin-top:100px;color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 22px}
.prose ul,.prose ol{margin:0 0 24px;padding-left:0;list-style:none}
.prose ol{counter-reset:li}
.prose li{margin-bottom:11px;padding-left:26px;position:relative}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.72em;width:9px;height:1px;
                     background:var(--signal)}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li);position:absolute;left:0;top:0;
                     font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--signal)}
.prose li>ul,.prose li>ol{margin:11px 0 0}
.prose a{color:var(--ink);
  background-image:linear-gradient(var(--signal),var(--signal));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:color var(--fast) var(--ease)}
.prose a:hover{color:var(--signal)}
.prose strong{font-weight:600;color:var(--ink)}
.prose code{font-family:'IBM Plex Mono',monospace;font-size:.87em;
            background:var(--paper-2);padding:2px 6px;border-radius:2px}
.prose pre{background:var(--night);color:var(--night-ink);padding:22px 24px;
           overflow-x:auto;margin:0 0 26px;font-size:13.5px;line-height:1.7;
           border-radius:3px;max-width:100%;-webkit-overflow-scrolling:touch}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit;white-space:pre}
.prose hr{border:0;border-top:1px solid var(--rule);margin:clamp(44px,5vw,64px) 0}

/* Alıntı — dergi pull-quote'u */
.prose blockquote{margin:clamp(32px,4vw,44px) 0;padding:0 0 0 clamp(20px,2.4vw,32px);
                  border-left:2px solid var(--signal)}
.prose blockquote p{font-family:'Archivo',sans-serif;font-weight:500;
                    font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink);
                    letter-spacing:-.026em;margin:0}
.prose blockquote p+p{margin-top:14px}

.tbl{overflow-x:auto;margin:0 0 28px;max-width:100%;border-top:1px solid var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.prose th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
          letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
          padding:13px 18px 13px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.prose td{padding:13px 18px 13px 0;border-bottom:1px solid var(--rule-soft);
          vertical-align:top;line-height:1.6}
.prose tbody tr:last-child td{border-bottom:0}

/* ─── yan sütun ───────────────────────────────────────────────────────────── */

.toc{border-top:1px solid var(--ink);padding-top:16px;margin-bottom:34px}
.toc__t{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.16em;
        text-transform:uppercase;color:var(--ink-4);margin-bottom:14px;list-style:none;cursor:default}
.toc>summary::-webkit-details-marker{display:none}
.toc a{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-3);padding:6px 0;
       border-bottom:1px solid var(--rule-soft);transition:color var(--fast) var(--ease)}
.toc a:hover{color:var(--signal)}
.toc a[data-l="3"]{padding-left:14px;font-size:13px;color:var(--ink-4)}

.cta-box{background:var(--night);color:var(--night-ink);padding:26px;border-radius:3px}
.cta-box h3{font-size:17px;letter-spacing:-.026em;margin-bottom:10px;color:var(--night-ink)}
.cta-box p{font-size:14px;line-height:1.6;color:var(--night-ink2);margin-bottom:20px}
.cta-box .btn{width:100%;justify-content:center;padding:13px 18px;font-size:14px}

/* ─── yazı sonu ───────────────────────────────────────────────────────────── */

.post__end{border-top:1px solid var(--ink);margin-top:clamp(52px,6vw,76px);
           padding-top:clamp(28px,3.4vw,40px)}
.post__end h2{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
              letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.rel a{display:block;padding:20px 0;border-bottom:1px solid var(--rule);
       transition:background var(--fast) var(--ease)}
.rel a:hover{background:rgba(20,40,47,.04)}
.rel a:hover b{color:var(--signal)}
.rel b{display:block;font-family:'Archivo',sans-serif;font-size:18px;font-weight:600;
       letter-spacing:-.026em;line-height:1.2;margin-bottom:7px;
       transition:color var(--fast) var(--ease)}
.rel span{font-size:14.5px;color:var(--ink-3);line-height:1.5}

/* ─── SSS (yazı içi) ──────────────────────────────────────────────────────── */

.faq{border-top:1px solid var(--ink)}
.post__end .faq{border-top:0;margin-top:14px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
             font-family:'Archivo',sans-serif;
             font-size:clamp(17px,1.8vw,20px);font-weight:600;letter-spacing:-.026em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1px;
                    background:var(--ink)}
.faq summary::before{content:"";position:absolute;right:11px;top:50%;width:1px;height:11px;
                     margin-top:-5px;background:var(--ink);
                     transition:transform var(--med) var(--ease),opacity var(--med) var(--ease)}
.faq details[open] summary::before{opacity:0;transform:rotate(90deg)}
.faq details>div{padding:0 0 22px;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:68ch}

/* ─── duyarlı ─────────────────────────────────────────────────────────────── */

@media (max-width:1040px){
  .post{grid-template-columns:1fr}
  .post > article{grid-column:1/-1}
  .aside{grid-column:1/-1;position:static;order:-1;margin-bottom:36px}
  .cta-box{display:none}
  .prose{max-width:none}
  .bcard h2{grid-column:3/13}
  .bcard p{grid-column:3/13;margin-top:10px;max-width:60ch}
  .bcard__m{grid-column:3/13;text-align:left;flex-direction:row;gap:14px;margin-top:12px}
  .bcard--lead h2,.bcard--lead p{grid-column:1/-1}
  .bcard--lead p{margin-top:14px}
  .bcard--lead .bcard__m{grid-column:1/-1;margin-top:18px}
  .bcard--lead .bcard__k{grid-column:1/-1;margin-bottom:14px}
}

@media (max-width:760px){
  .bhead,.blist-hero{padding-top:92px}
  .prose{font-size:17px}
  .prose h2{margin-top:44px}
  .bcard__k{grid-column:1/-1;margin-bottom:10px}
  .bcard h2,.bcard p,.bcard__m{grid-column:1/-1}
  .bcats{border-bottom:0}
  .bcat{padding:13px 16px 13px 0;font-size:10.5px}
  .bcat + .bcat{padding-left:16px}
  .toc>summary{cursor:pointer;position:relative;padding-right:28px}
  .toc>summary::after{content:"+";position:absolute;right:2px;top:-2px;font-size:16px;color:var(--ink-4)}
  .toc[open]>summary::after{content:"–"}
}