/* ==========================================================================
   omerfarukbagci.com — tasarım sistemi
   ========================================================================== */

:root{
  --bg:#0a0a0f; --bg2:#07070c; --bg3:#101017;
  --card:rgba(255,255,255,.030); --card-hi:rgba(255,255,255,.058);
  --line:rgba(255,255,255,.075); --line-hi:rgba(126,110,255,.34);
  --ink:#f2f2f8; --ink2:#a6a6c0; --dim:#7b7b96;

  --p:#7e6eff; --p-lo:#a196ff; --v:#a78bfa; --t:#22d3aa;
  --grad:linear-gradient(115deg,#7e6eff 0%,#a78bfa 46%,#22d3aa 100%);
  --grad-soft:linear-gradient(140deg,rgba(126,110,255,.10),rgba(34,211,170,.045));
  --glow:0 0 48px rgba(126,110,255,.15);
  --glow-hi:0 0 84px rgba(126,110,255,.26);
  --sh:0 24px 60px -28px rgba(0,0,0,.85);

  --r-s:12px; --r:18px; --r-l:28px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Instrument Sans","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --w:1200px; --pad:44px;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#fafafd; --bg2:#f1f1f7; --bg3:#ffffff;
    --card:rgba(255,255,255,.9); --card-hi:#fff;
    --line:rgba(22,22,50,.085); --line-hi:rgba(92,78,222,.34);
    --ink:#0e0e1c; --ink2:#4b4b68; --dim:#6b6b84;
    --p:#5c4ede; --p-lo:#6353c6; --v:#8b5cf6; --t:#07775f;
    --grad:linear-gradient(115deg,#5c4ede 0%,#8b5cf6 46%,#0a9c80 100%);
    --grad-soft:linear-gradient(140deg,rgba(92,78,222,.065),rgba(10,156,128,.035));
    --glow:0 0 40px rgba(92,78,222,.12); --glow-hi:0 0 70px rgba(92,78,222,.18);
    --sh:0 22px 50px -30px rgba(20,20,60,.3); }
}
:root[data-theme="light"]{ --bg:#fafafd; --bg2:#f1f1f7; --bg3:#ffffff;
  --card:rgba(255,255,255,.9); --card-hi:#fff;
  --line:rgba(22,22,50,.085); --line-hi:rgba(92,78,222,.34);
  --ink:#0e0e1c; --ink2:#4b4b68; --dim:#6b6b84;
  --p:#5c4ede; --p-lo:#6353c6; --v:#8b5cf6; --t:#07775f;
  --grad:linear-gradient(115deg,#5c4ede 0%,#8b5cf6 46%,#0a9c80 100%);
  --grad-soft:linear-gradient(140deg,rgba(92,78,222,.065),rgba(10,156,128,.035));
  --glow:0 0 40px rgba(92,78,222,.12); --glow-hi:0 0 70px rgba(92,78,222,.18);
  --sh:0 22px 50px -30px rgba(20,20,60,.3); }
:root[data-theme="dark"]{ --bg:#0a0a0f; --bg2:#07070c; --bg3:#101017;
  --card:rgba(255,255,255,.030); --card-hi:rgba(255,255,255,.058);
  --line:rgba(255,255,255,.075); --line-hi:rgba(126,110,255,.34);
  --ink:#f2f2f8; --ink2:#a6a6c0; --dim:#7b7b96;
  --p:#7e6eff; --p-lo:#a196ff; --v:#a78bfa; --t:#22d3aa;
  --grad:linear-gradient(115deg,#7e6eff 0%,#a78bfa 46%,#22d3aa 100%);
  --grad-soft:linear-gradient(140deg,rgba(126,110,255,.10),rgba(34,211,170,.045));
  --glow:0 0 48px rgba(126,110,255,.15); --glow-hi:0 0 84px rgba(126,110,255,.26);
  --sh:0 24px 60px -28px rgba(0,0,0,.85); }

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: sabit baslik 72px — anchor hedefi arkasinda kalmasin
   (robomed icindekiler menusundeki 12 bag ve index'ten gelen #omnidoc) */
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-24% -12% auto -12%;height:760px;
  pointer-events:none;z-index:0;
  background:radial-gradient(44% 50% at 20% 26%,rgba(126,110,255,.19),transparent 64%),
             radial-gradient(38% 44% at 80% 14%,rgba(34,211,170,.11),transparent 66%);
  filter:blur(22px)}
body > *{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
::selection{background:var(--p);color:#fff}
:focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:5px}
.skip{position:absolute;left:-9999px;background:var(--p);color:#fff;padding:11px 18px;z-index:300}
.skip:focus{left:0;top:0}
/* ekran okuyucuya gorunur, gozle gorunmez — baslik hiyerarsisini tamamlamak icin */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.container{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

/* ─────────── header ─────────── */
.site-header{position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* sayfa kayinca baslik netlesir — altindan gecen icerik okunakligi bozmasin */
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 93%,transparent);
  border-bottom-color:var(--line-hi);box-shadow:0 10px 30px -22px rgba(10,10,30,.6)}
.header-in{max-width:var(--w);margin:0 auto;padding:0 var(--pad);height:72px;
  display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15.5px;letter-spacing:-.022em}
.brand .glyph{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;
  flex:none;box-shadow:var(--glow)}
.site-nav{display:flex;gap:3px;margin-left:auto}
.site-nav a{position:relative;font-size:14px;font-weight:500;color:var(--ink2);
  padding:9px 15px;border-radius:10px;transition:color .2s,background .2s}
.site-nav a:hover{color:var(--ink);background:var(--card-hi)}
/* bulundugun sayfa: dolu kutu yerine gradyan alt cizgi — daha sakin */
.site-nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  border-radius:2px;background:var(--grad);opacity:0;transform:scaleX(.3);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]::after{opacity:1;transform:none}
.switches{display:flex;gap:6px}
.switches button{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink2);
  cursor:pointer;padding:9px 12px;line-height:1;transition:.2s}
.switches button:hover{color:var(--ink);border-color:var(--line-hi)}
.menu-btn{display:none;background:var(--card);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);cursor:pointer;padding:10px 13px;line-height:1;font-size:15px}

/* ─────────── tipografi ─────────── */
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.036em;text-wrap:balance;font-weight:700}
h1{font-size:clamp(44px,7vw,80px);letter-spacing:-.048em;line-height:1;font-weight:800}
h2{font-size:clamp(28px,4.2vw,48px);font-weight:800;letter-spacing:-.042em}
h3{font-size:clamp(21px,2.6vw,29px);letter-spacing:-.032em}
h4{font-size:17.5px;letter-spacing:-.02em}
/* Kart/adim/parca basliklari h4 idi -> h2'den h4'e atlama oluyordu (erisilebilirlik).
   h3 yapildi; gorunum degismesin diye boyut burada kucultuluyor.
   .project h3 ve .f-cta h3 buyuk kalir - onlar bu listede yok. */
.card h3,.part h3,.step h3,.tli h3,.flow3 h3,.note h3{font-size:17.5px;letter-spacing:-.02em}
p{margin:0 0 18px}p:last-child{margin-bottom:0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.lead{font-size:clamp(17.5px,2.1vw,21px);line-height:1.58;color:var(--ink2);letter-spacing:-.012em}
.muted{color:var(--ink2)} .small{font-size:14.5px}
/* olcum: 1ch = 11px, gercek ortalama karakter 7.34px -> ch degeri hedeften
   %50 genis cozuluyor. 60ch ~ 90 karakterdi; 48ch ~ 72 karakter (ideal bant). */
.measure{max-width:48ch}
strong,b{font-weight:650;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--p-lo);
  background:var(--grad-soft);border:1px solid var(--line);border-radius:100px;padding:7px 15px}
/* pill icindeki bag rozetin tamamini kaplasin — dokunma hedefi kucuk kalmasin */
.pill > a{display:inline-flex;align-items:center;gap:9px;margin:-7px -15px;padding:7px 15px}

/* ─────────── bölüm ─────────── */
.section{padding:100px 0}
.section.tinted{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:48px}
.shead .txt{flex:1;min-width:280px}
.shead .pill{margin-bottom:18px}
.shead p{margin:16px 0 0;color:var(--ink2);max-width:58ch}
/* tek sütunlu, ortalanmış blok — yan sütunu olmayan bölümler için */
.narrow-center{max-width:64ch;margin:0 auto;text-align:center}
/* baslik 64ch'te kalsin (tek satira sigiyor), sadece paragraf daralsin */
.narrow-center p{max-width:48ch;margin-left:auto;margin-right:auto}
.narrow-center .btn-row{justify-content:center}

/* ─────────── buton ─────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;
  padding:14px 24px;border-radius:100px;border:1px solid var(--line);color:var(--ink);
  background:var(--card);cursor:pointer;transition:all .3s var(--ease)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover{border-color:var(--line-hi);background:var(--card-hi);transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{box-shadow:var(--glow-hi);color:#fff;filter:brightness(1.06)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ─────────── hero ─────────── */
.hero{padding:110px 0 100px;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:70px;align-items:center}
.hero.solo{grid-template-columns:1fr;padding:96px 0 72px}
.hero h1{margin-bottom:26px}
.hero .lead{margin-bottom:22px;max-width:33ch}
.portrait-wrap{position:relative}
.portrait-wrap::after{content:"";position:absolute;inset:-16%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(126,110,255,.3),transparent 68%);filter:blur(30px)}
/* height:auto sart — <img height="..."> ozniteligi sunum ipucu olarak
   height'i sabitliyor ve aspect-ratio'yu eziyor. */
.portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-l);
  border:1px solid var(--line);box-shadow:var(--sh)}

/* eksik veri yer tutucu */
.slot{border:1px dashed var(--line-hi);background:var(--grad-soft);border-radius:var(--r);
  display:grid;place-items:center;text-align:center;padding:26px;gap:8px;
  font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--dim);letter-spacing:.09em}
.slot b{display:block;color:var(--p-lo);font-weight:500;font-size:11px;letter-spacing:.14em}
.slot.portrait-slot{aspect-ratio:4/5;border-radius:var(--r-l)}
.slot.wide{aspect-ratio:16/9}

/* ─────────── kartlar ─────────── */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;
  display:flex;flex-direction:column;gap:14px;transition:all .35s var(--ease);
  position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .35s}
.card > *{position:relative}
.card:hover{border-color:var(--line-hi);transform:translateY(-4px);box-shadow:var(--glow)}
.card:hover::before{opacity:1}
/* ikon — tek boyut kaynagi */
svg.i,.ic svg,.btn svg,.golink svg,.honor svg,.mail-lg svg,.chan .go{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
svg.i{width:20px;height:20px;flex:none}
.ic{width:50px;height:50px;border-radius:15px;background:var(--grad-soft);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--p-lo);flex:none;
  transition:all .35s var(--ease)}
.ic svg{width:23px;height:23px}
.card:hover .ic{border-color:var(--line-hi);color:var(--p);transform:scale(1.06)}

/* hero yan paneli — fotograf yerine */
.hero-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:10px;position:relative;overflow:hidden}
.hero-panel::before{content:"";position:absolute;inset:0;background:var(--grad-soft);pointer-events:none}
.hp-item{display:flex;gap:15px;align-items:flex-start;padding:19px 18px;border-radius:var(--r);
  position:relative;transition:background .3s var(--ease)}
.hp-item:hover{background:var(--card-hi)}
.hp-item + .hp-item{border-top:1px solid var(--line)}
.hp-ic{width:38px;height:38px;border-radius:11px;background:var(--card-hi);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--p-lo);flex:none}
.hp-ic svg{width:18px;height:18px}
.hp-t{min-width:0}
.hp-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.hp-v{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.4}
.hp-s{display:block;font-size:13px;color:var(--ink2);line-height:1.5;margin-top:2px}
.card h3{margin:0}
.card p{margin:0;font-size:14.6px;color:var(--ink2);line-height:1.62}
/* kanal karti — etiket yok. Platform adi zaten ne oldugunu soyluyor;
   kosedeki isaret de kartin bir baglanti oldugunu soyluyor. */
.chan{position:relative}
.chan .go{position:absolute;top:26px;right:26px;width:17px;height:17px;
  color:var(--dim);opacity:.65;transition:all .3s var(--ease)}
.chan:hover .go{opacity:1;color:var(--p-lo);transform:translate(2px,-2px)}

/* adres satiri — kartin tek icerigi, basligin hemen altina yaslanir */
.card .handle{display:block;font-family:var(--mono);font-size:12.5px;color:var(--p-lo);
  letter-spacing:-.005em;margin:-4px 0 0;word-break:break-word;line-height:1.5}
.tag{display:inline-flex;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--p-lo);background:var(--grad-soft);border:1px solid var(--line);
  border-radius:100px;padding:5px 12px;align-self:flex-start}

/* ─────────── proje ─────────── */
.project{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;transition:all .4s var(--ease);position:relative}
.project::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;
  transition:opacity .4s;pointer-events:none}
.project:hover{border-color:var(--line-hi);transform:translateY(-4px);box-shadow:var(--glow-hi)}
.project:hover::before{opacity:1}
.project .body{padding:38px 40px;display:flex;flex-direction:column;gap:17px;min-width:0;position:relative}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;border:1px solid var(--line);color:var(--dim);background:var(--card)}
.badge.live{color:var(--t);border-color:color-mix(in srgb,var(--t) 40%,transparent);
  background:color-mix(in srgb,var(--t) 9%,transparent)}
.badge.live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--t);margin-right:7px;vertical-align:1px;box-shadow:0 0 8px var(--t)}
.project p{margin:0;color:var(--ink2);max-width:56ch}
/* proje adi baskin olsun — vaka sayfasinda basligi kart tasiyor */
.project .pname{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.045em;
  line-height:1.02;margin:4px 0 0}
.project .plead{font-size:clamp(17px,1.9vw,20.5px);line-height:1.45;color:var(--ink);
  font-weight:500;letter-spacing:-.018em;max-width:40ch;margin:0}
.project .caseno{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.project .caseno b{color:var(--p-lo);font-weight:500}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:100px;
  background:var(--card-hi);border:1px solid var(--line);color:var(--ink2)}
/* uygulama kimligi — proje kartinda basligin yaninda simge */
.apphead{display:flex;align-items:center;gap:16px}
.apphead img{width:58px;height:58px;border-radius:15px;border:1px solid var(--line);
  flex:none;transition:all .35s var(--ease)}
.project:hover .apphead img{border-color:var(--line-hi);transform:scale(1.04)}
.apphead h2,.apphead h3{margin:0}

.golink{display:inline-flex;align-items:center;gap:9px;margin-top:4px;font-size:14.5px;
  font-weight:600;color:var(--p-lo)}
.golink svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.project:hover .golink svg{transform:translateX(5px)}
.project .side{border-left:1px solid var(--line);background:var(--grad-soft);padding:34px 32px;
  display:flex;flex-direction:column;justify-content:center;gap:22px;position:relative}
.kv{display:flex;flex-direction:column;gap:3px}
.kv b{font-size:28px;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kv span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ─────────── satır ─────────── */
.rows{display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;align-items:baseline;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;
  transition:all .3s var(--ease)}
.row:hover{border-color:var(--line-hi);background:var(--card-hi)}
.row .k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--p-lo)}
.row .v{color:var(--ink2)}

/* ─────────── başarı (yalnız hakkımda) ─────────── */
.awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.award{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:34px 30px;
  position:relative;overflow:hidden;transition:all .35s var(--ease)}
.award::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .35s}
.award:hover{border-color:var(--line-hi);transform:translateY(-4px);box-shadow:var(--glow)}
.award:hover::before{opacity:1}
.award > *{position:relative}
.award b{display:block;font-size:clamp(38px,5.2vw,58px);font-weight:800;letter-spacing:-.05em;
  line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.award .t{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.award .s{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);line-height:1.6}

/* ─────────── zaman çizelgesi ─────────── */
.tl{display:flex;flex-direction:column;gap:14px}
.tli{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 32px;
  transition:all .3s var(--ease)}
.tli:hover{border-color:var(--line-hi)}
.tli .when{font-family:var(--mono);font-size:12px;color:var(--p-lo);letter-spacing:.03em}
.tli h3{margin:0 0 6px}
.tli .org{font-size:14px;color:var(--dim);margin:0 0 13px}
.tli ul{margin:0;padding-left:19px;color:var(--ink2);font-size:14.8px;max-width:48ch}
.tli li{padding:3px 0}
.honor{display:inline-flex;align-items:center;gap:9px;margin-top:15px;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--t);
  background:color-mix(in srgb,var(--t) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--t) 34%,transparent);border-radius:100px;padding:7px 14px}
.honor svg{width:13px;height:13px}

/* ─────────── adım listesi ─────────── */
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;padding:24px 0;
  border-bottom:1px solid var(--line);align-items:start}
.step:first-child{border-top:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:13px;font-weight:500;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.step h3{margin:0 0 5px}
/* 64px+gap disindaki tum genislik metne kaliyordu (114 karakter) */
.step p{margin:0;color:var(--ink2);font-size:15px;max-width:48ch}

/* ─────────── vurgu kutusu ─────────── */
.note{border-left:2px solid var(--p);padding:6px 0 6px 24px;margin:28px 0}
/* max-width sart: not satiri 130+ karaktere cikiyordu.
   DIKKAT: 1ch = 11px ama gercek ortalama karakter 7.34px — ch degeri
   hedeflenenden %50 genis cozuluyor. 48ch ~ 72 gercek karakter. */
.note p{color:var(--ink2);max-width:48ch}

/* ─────────── gorseller ─────────── */
.cover{margin:0 0 44px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  position:relative;box-shadow:var(--sh)}
.cover img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,15,.55));
  box-shadow:inset 0 0 90px rgba(10,10,15,.5)}
.cover figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink2)}

/* tum galeri gorselleri 3:2 uretiliyor — CSS kirpmasi yok */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shot{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--card);position:relative;transition:all .35s var(--ease)}
.shot:hover{border-color:var(--line-hi);transform:translateY(-3px);box-shadow:var(--glow)}
.shot img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(8,8,14,.9));
  font-size:12.5px;line-height:1.45;color:#e8e8f2}

/* once / sonra */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.ba figure{margin:0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--card);position:relative;transition:all .35s var(--ease);cursor:zoom-in}
.ba figure:hover{border-color:var(--line-hi);box-shadow:var(--glow)}
.ba img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.ba .lab{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;padding:7px 13px;border-radius:100px;
  background:rgba(8,8,14,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#fff}
.ba .lab.after{background:var(--grad);border-color:transparent}
.ba figcaption{padding:18px 20px 20px;font-size:13.6px;color:var(--ink2);line-height:1.55}
.ba figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:5px;letter-spacing:-.015em}

.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:all .35s var(--ease)}
.step-card:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.step-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.step-card .cap{padding:16px 18px 18px}
.step-card .d{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--p-lo);display:block;margin-bottom:7px}
.step-card p{margin:0;font-size:13.4px;color:var(--ink2);line-height:1.5}

@media (max-width:900px){
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){ .ba{grid-template-columns:1fr} }
@media (max-width:560px){
  .shots,.strip{grid-template-columns:1fr}
}

/* ─────────── donanim listesi ─────────── */
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.part{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  transition:all .3s var(--ease)}
.part:hover{border-color:var(--line-hi);background:var(--card-hi)}
.part .n{font-family:var(--mono);font-size:11px;color:var(--p-lo);letter-spacing:.08em;padding-top:3px}
.part h3{margin:0 0 4px}
.part .spec{margin:0 0 8px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.part p{margin:0;font-size:14px;color:var(--ink2);line-height:1.55}
.qty{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--t);background:color-mix(in srgb,var(--t) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--t) 32%,transparent);border-radius:100px;
  padding:2px 9px;margin-left:8px;vertical-align:2px}

/* ─────────── buyutulebilir galeri ─────────── */
.shot{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:5vh 4vw;
  background:rgba(5,5,9,.94);backdrop-filter:blur(10px)}
.lb.on{display:grid}
/* lightbox her iki temada da koyu zeminde açılıyor — sabit açık çerçeve */
.lb img{max-width:100%;max-height:80vh;width:auto;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -30px #000}
.lb .cap{margin-top:18px;text-align:center;font-size:14.5px;color:var(--ink2);max-width:62ch}
.lb .cap b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-lo);margin-bottom:7px}
.lb .x,.lb .nav{position:absolute;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:100px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.lb .x{top:22px;right:22px;width:44px;height:44px;font-size:19px;line-height:1}
.lb .nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.lb .nav.prev{left:18px} .lb .nav.next{right:18px}
.lb .x:hover,.lb .nav:hover{background:var(--p);border-color:var(--p)}
.lb .nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lb .no{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}

/* ─────────── tek bakista ─────────── */
.glance{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:44px 46px;position:relative;overflow:hidden}
.glance::before{content:"";position:absolute;inset:-40% 30% auto 30%;height:280px;
  background:radial-gradient(circle,rgba(126,110,255,.16),transparent 68%);filter:blur(30px)}
.glance > *{position:relative}
.glance .big{font-size:clamp(19px,2.4vw,24px);line-height:1.5;color:var(--ink);
  letter-spacing:-.018em;max-width:52ch;margin:0 0 18px;font-weight:500}
.glance .big b{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700}
.glance p{color:var(--ink2);max-width:48ch}

.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;
  border-top:1px solid var(--line);padding-top:34px;position:relative}
.flow3 > div{padding:0 26px;position:relative}
.flow3 > div:first-child{padding-left:0}
.flow3 > div:last-child{padding-right:0}
.flow3 > div + div{border-left:1px solid var(--line)}
.flow3 .s{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.flow3 .s i{width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;
  font-style:normal;flex:none}
.flow3 .s span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.flow3 h3{margin:0 0 7px}
.flow3 p{margin:0;font-size:14px;color:var(--ink2);line-height:1.55}

/* ─────────── içindekiler ─────────── */
.toc{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.toc a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);
  background:var(--card);border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  transition:all .25s var(--ease)}
.toc a:hover{color:var(--ink);border-color:var(--line-hi);background:var(--card-hi);transform:translateY(-1px)}
.toc a b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--p-lo);font-weight:500}

@media (max-width:800px){
  .glance{padding:32px 26px}
  .flow3{grid-template-columns:1fr;gap:26px;padding-top:26px}
  .flow3 > div{padding:0}
  .flow3 > div + div{border-left:none;border-top:1px solid var(--line);padding-top:24px}
}

/* ─────────── bildirimler ─────────── */
.notif{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.notif figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 26px 22px;transition:all .35s var(--ease);cursor:zoom-in;text-align:center}
.notif figure:hover{border-color:var(--line-hi);box-shadow:var(--glow);transform:translateY(-3px)}
.notif img{width:auto;max-width:100%;max-height:520px;margin:0 auto;border-radius:var(--r-s);
  border:1px solid var(--line);display:block}
.notif figcaption{margin-top:20px;text-align:left;font-size:13.8px;color:var(--ink2);line-height:1.55}
.notif figcaption b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:6px;letter-spacing:-.015em}
.notif .kanal{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-lo);background:var(--grad-soft);
  border:1px solid var(--line);border-radius:100px;padding:6px 13px;margin-bottom:16px}
@media (max-width:800px){ .notif{grid-template-columns:1fr} }

/* ─────────── ekran galerisi ─────────── */
/* Arayüz görselleri kırpılmaz: contain + koyu zemin. Buradaki ekranların
   oranı 0.82 ile 1.90 arasında değişiyor; cover kullanınca dikey olanların
   yarısı kayboluyordu. */
.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.screen{margin:0;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);
  background:var(--bg3);cursor:zoom-in;transition:all .3s var(--ease);position:relative}
.screen:hover{border-color:var(--line-hi);transform:translateY(-3px);box-shadow:var(--glow)}
.screen img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;object-position:center;
  display:block;background:var(--bg2);padding:10px}

/* ─────────── tiklanabilir kapak gorseli ─────────── */
/* Projenin kendisini gosterir ve vaka sayfasina goturur — metin yok, kanit var. */
.shotlink{display:block;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh);transition:all .4s var(--ease);position:relative}
.shotlink img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.shotlink:hover{border-color:var(--line-hi);box-shadow:var(--glow-hi)}
.shotlink:hover img{transform:scale(1.025)}

/* ─────────── uygulama vitrini ─────────── */
/* Telefon gorsellerini bir panele oturtur — sirali dizilmis dosya gibi degil,
   sunulmus gibi dursun. */
.showcase{border:1px solid var(--line);border-radius:var(--r-l);background:var(--grad-soft);
  padding:52px 44px 46px;position:relative;overflow:hidden}
.showcase::before{content:"";position:absolute;inset:-34% 22% auto 22%;height:320px;
  background:radial-gradient(circle,rgba(126,110,255,.17),transparent 68%);filter:blur(32px)}
.showcase > *{position:relative}
@media (max-width:700px){ .showcase{padding:34px 22px 30px} }

/* ─────────── telefon ekranları ─────────── */
/* Dikey uygulama görselleri kendi oranıyla durur — kırpma yok. */
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  max-width:1000px;margin:0 auto}
.phones figure{margin:0;cursor:zoom-in}
.phones img{width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid var(--line);background:var(--bg3);transition:all .35s var(--ease)}
.phones figure:hover img{border-color:var(--line-hi);transform:translateY(-5px);box-shadow:var(--glow)}
.phones figcaption{margin-top:15px;font-size:12.8px;line-height:1.5;color:var(--ink2)}
.phones figcaption b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-lo);margin-bottom:5px}
@media (max-width:900px){ .phones{grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px} }
@media (max-width:520px){ .phones{grid-template-columns:1fr;max-width:300px} }
.screen figcaption{padding:12px 14px 14px;font-size:12.5px;color:var(--ink2);line-height:1.45}
.screen figcaption b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-lo);margin-bottom:5px}

@media (max-width:1000px){ .parts{grid-template-columns:1fr} .screens{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .screens{grid-template-columns:1fr} .lb .nav{width:40px;height:40px} }

/* ─────────── diyagram ─────────── */
/* Dar ekranda diyagram (min-width 660px) kendi kutusu icinde yatay kayar.
   Kenar golgesi bunu gorunur kilar; uca gelince kendiliginden kaybolur:
   kapak katmanlari "local" (icerikle kayar), golgeler "scroll" (kutuya sabit).
   Arka plan yari saydam --card yerine opak --bg3; kapaklar tam ortsun diye. */
.diagram{border:1px solid var(--line);border-radius:var(--r-l);
  padding:34px;overflow-x:auto;
  background-color:var(--bg3);
  background-image:
    linear-gradient(to right,var(--bg3),rgba(0,0,0,0)),
    linear-gradient(to left ,var(--bg3),rgba(0,0,0,0)),
    linear-gradient(to right,var(--line-hi),rgba(0,0,0,0)),
    linear-gradient(to left ,var(--line-hi),rgba(0,0,0,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:30px 100%,30px 100%,20px 100%,20px 100%;
  background-attachment:local,local,scroll,scroll}
.diagram svg{min-width:660px;width:100%}
/* Mimari diyagram 734x450 oraninda (eskisi 900x300 idi). Genislik
   sinirlanmazsa genis ekranda ~640px yuksege aciliyor; 780'de ~478px. */
.diagram--arch svg{max-width:780px;margin-inline:auto;display:block}

/* ─────────── kapanış ─────────── */
.cta{margin:0 0 92px;padding:62px 52px;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--grad-soft);position:relative;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;inset:-52% 18% auto 18%;height:340px;
  background:radial-gradient(circle,rgba(126,110,255,.24),transparent 66%);filter:blur(28px)}
.cta > *{position:relative}
.cta h2{margin:0 auto 18px;max-width:18ch}
.cta p{color:var(--ink2);max-width:46ch;margin:0 auto 34px}
.mail-lg{display:inline-flex;align-items:center;gap:12px;font-size:clamp(16px,2.2vw,22px);
  font-weight:700;letter-spacing:-.03em;padding:17px 32px;border-radius:100px;
  background:var(--grad);color:#fff;box-shadow:var(--glow);transition:all .3s var(--ease)}
.mail-lg:hover{box-shadow:var(--glow-hi);transform:translateY(-3px);color:#fff}
.mail-lg svg{width:20px;height:20px}

/* ─────────── footer ─────────── */
.site-footer{border-top:1px solid var(--line);background:var(--bg2);
  position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:-40% 46% auto -14%;height:420px;
  background:radial-gradient(circle,rgba(126,110,255,.15),transparent 66%);filter:blur(40px)}
.site-footer::after{content:"";position:absolute;inset:auto -10% -46% 52%;height:360px;
  background:radial-gradient(circle,rgba(34,211,170,.09),transparent 68%);filter:blur(40px)}
.site-footer > *{position:relative;z-index:1}

/* üst şerit: son davet */
.f-cta{display:flex;align-items:center;justify-content:space-between;gap:36px;
  flex-wrap:wrap;padding:56px 0 44px}
.f-cta .l{min-width:min(100%,300px)}
.f-cta .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--p-lo);margin-bottom:12px}
.f-cta h3{margin:0;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.036em;
  line-height:1.12;max-width:16ch;font-weight:700}
.f-mail{display:inline-flex;align-items:center;gap:12px;font-size:clamp(14.5px,1.7vw,17px);
  font-weight:600;letter-spacing:-.018em;padding:16px 26px;border-radius:100px;
  background:var(--grad);color:#fff;box-shadow:var(--glow);transition:all .3s var(--ease);
  white-space:nowrap}
.f-mail:hover{box-shadow:var(--glow-hi);transform:translateY(-2px);color:#fff}
.f-mail svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.f-mail:hover svg{transform:translateX(3px)}

/* dizin */
.f-grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:56px;
  padding:44px 0;border-top:1px solid var(--line)}
/* imza bloğu — sadece işaret ve bağlantılar */
.f-brand{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.f-sign{position:relative;display:grid;place-items:center;width:58px;height:58px;
  border-radius:17px;background:var(--grad);color:#fff;font-family:var(--mono);
  font-size:18px;font-weight:700;letter-spacing:-.02em;flex:none;
  box-shadow:var(--glow);transition:all .35s var(--ease)}
.f-sign::after{content:"";position:absolute;inset:-7px;border-radius:23px;
  border:1px solid var(--line-hi);opacity:0;transition:all .35s var(--ease)}
.f-sign:hover{transform:translateY(-2px) rotate(-3deg);box-shadow:var(--glow-hi);color:#fff}
.f-sign:hover::after{opacity:1;inset:-10px;border-radius:26px}

.f-soc{display:flex;gap:10px;flex-wrap:wrap}
.f-soc a{position:relative;width:44px;height:44px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);
  transition:all .3s var(--ease);overflow:hidden}
.f-soc a::before{content:"";position:absolute;inset:0;background:var(--grad);
  opacity:0;transition:opacity .3s var(--ease)}
.f-soc a svg{position:relative;width:19px;height:19px}
.f-soc a:hover{color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:var(--glow)}
.f-soc a:hover::before{opacity:1}

.f-col h5{margin:0 0 16px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:500}
.f-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.f-col a{font-size:14.5px;color:var(--ink2);transition:color .2s;display:inline-flex;
  align-items:center;gap:7px}
.f-col a:hover{color:var(--p-lo)}
.f-col a::before{content:"";width:0;height:1px;background:var(--p-lo);transition:width .25s var(--ease)}
.f-col a:hover::before{width:12px}

.footer-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:24px 0 44px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--dim)}
.footer-bar .sep{opacity:.35}
.footer-bar .r{margin-left:auto}

@media (max-width:900px){
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
  .f-brand{grid-column:1 / -1;flex-direction:row;align-items:center;
    justify-content:space-between;width:100%;
    padding-bottom:30px;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .f-cta{padding:44px 0 34px;gap:24px}
  .f-mail{width:100%;justify-content:center}
  .f-grid{grid-template-columns:1fr;gap:30px;padding:34px 0}
  .footer-bar{padding-bottom:34px}
  .footer-bar .r{margin-left:0;flex-basis:100%}
}

/* ─────────── dil / animasyon ─────────── */
/* Öznitelik iki kez yazıldı: özgüllüğü kasten yükseltiyor.
   Aksi hâlde `.slot b` gibi sınıf+etiket kuralları (0-1-1) bunu ezip
   iki dilin metnini aynı anda gösteriyor. */
[data-en][data-en]{display:none}
html[lang="en"] [data-tr][data-tr]{display:none}
html[lang="en"] [data-en][data-en]{display:revert}
.rise{opacity:0;transform:translateY(24px)}
.rise.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

/* ─────────── duyarlı ─────────── */
@media (max-width:1060px){
  :root{--pad:32px}
  .hero{grid-template-columns:minmax(0,1fr) 290px;gap:48px}
  .awards{grid-template-columns:1fr;gap:14px}
  .project{grid-template-columns:minmax(0,1fr) 240px}
}
@media (max-width:840px){
  .site-nav{position:fixed;inset:72px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:12px 28px 24px;display:none}
  .site-nav.open{display:flex}
  .site-nav a{padding:15px 0;border-radius:0;border-bottom:1px solid var(--line);font-size:16px;
    min-height:48px;display:flex;align-items:center}
  .site-nav a:hover,.site-nav a[aria-current="page"]{background:none}
  .site-nav a::after{left:0;right:auto;width:24px;bottom:10px}
  /* dokunma hedefleri en az 44px — parmakla isabet edilebilsin */
  .menu-btn{display:block;margin-left:auto;order:1;min-width:44px;min-height:44px}
  .switches{order:2}
  .switches button{min-width:44px;min-height:44px;padding:10px 12px}
  a.golink{padding:10px 0;min-height:44px}
  .brand{min-height:44px}
  .toc a{min-height:44px;padding:11px 16px}
  .pill > a{min-height:44px}
  /* footer bag listesi: 24px WCAG 2.5.8'i gecer ama parmakla rahat degil.
     Yuksekligi buyutup bosluğu kisiyoruz — footer boyu ayni kaliyor. */
  .f-col ul{gap:4px}
  .f-col a{min-height:38px;align-items:center}
  .hero,.hero.solo{grid-template-columns:1fr;gap:40px;padding:64px 0 56px}
  .portrait-wrap{max-width:250px}
  .section{padding:66px 0}
  .g2,.g3{grid-template-columns:1fr}
  .project{grid-template-columns:1fr}
  .project .side{border-left:none;border-top:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;gap:28px;padding:26px 32px}
  .project .body{padding:30px}
  .row,.tli{grid-template-columns:1fr;gap:8px}
  .step{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .cta{padding:54px 28px;margin-bottom:66px}
}
@media (max-width:520px){ :root{--pad:22px} }

/* ─────────── dokunmatik cihazlar ─────────── */
/* Genislik degil, GIRDI TURU belirleyici: yatay tablet de parmakla kullaniliyor.
   Apple/Google kilavuzu: en az 44px. */
@media (pointer:coarse){
  .pill > a{min-height:44px}
  a.golink{min-height:44px;padding:10px 0}
  .toc a{min-height:44px}
  .brand{min-height:44px}
  .switches button{min-width:44px;min-height:44px}
  .menu-btn{min-width:44px;min-height:44px}
  .f-col a{min-height:36px}
  .site-nav a{min-height:44px;display:flex;align-items:center}
}