/* APPWO portfoy sayfasi. Renk ve yazi belirtecleri design-v3/tokens.css ile ayni degerlerdir.
   Dis kaynak yok: yazi tipleri assets/fonts altinda, betik yok. Imza: "olculmus sayfa"
   (kesim isaretleri, cetvel, olcu cizgisi). Hareket yalniz prefers-reduced-motion: no-preference altinda. */

@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  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';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  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:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  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:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  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}

/* ---------- belirtecler: once acik, sonra koyu (iki yerde ayni govde) ---------- */
:root{
  --bg:#EEF1F5; --fg:#0E1726; --fg-2:#33425A; --fg-3:#586882; --rule:#B9C4D2;
  --accent:#2B5BD7; --on-accent:#FFFFFF; --ok:#0E7C52; --focus:#1E45AA;
  /* ters takim: hover satiri ve iletisim blogu bu degerleri --bg/--fg yerine alir */
  --inv-bg:#0E1726; --inv-fg:#F3F6FE; --inv-fg-2:#B4C0D3; --inv-fg-3:#8E9DB6; --inv-rule:#33425A;
  --inv-accent:#6E9BFF; --inv-on-accent:#0E1726; --inv-ok:#3FC795; --inv-focus:#A3BDFA;

  --f-display:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --gut:clamp(20px,4.4vw,56px);
  --max:1320px;
  --dur:200ms; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1726; --fg:#E8EDF5; --fg-2:#B4C0D3; --fg-3:#8E9DB6; --rule:#2B3850;
    --accent:#6E9BFF; --on-accent:#0E1726; --ok:#3FC795; --focus:#A3BDFA;
    --inv-bg:#E8EDF5; --inv-fg:#0E1726; --inv-fg-2:#33425A; --inv-fg-3:#586882; --inv-rule:#B9C4D2;
    --inv-accent:#2B5BD7; --inv-on-accent:#FFFFFF; --inv-ok:#0A6842; --inv-focus:#1E45AA;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1726; --fg:#E8EDF5; --fg-2:#B4C0D3; --fg-3:#8E9DB6; --rule:#2B3850;
  --accent:#6E9BFF; --on-accent:#0E1726; --ok:#3FC795; --focus:#A3BDFA;
  --inv-bg:#E8EDF5; --inv-fg:#0E1726; --inv-fg-2:#33425A; --inv-fg-3:#586882; --inv-rule:#B9C4D2;
  --inv-accent:#2B5BD7; --inv-on-accent:#FFFFFF; --inv-ok:#0A6842; --inv-focus:#1E45AA;
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

/* ---------- temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.55 var(--f-text);
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility}
a{color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3,p,dl,dd,ul,ol{margin:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-96px;z-index:50;background:var(--fg);color:var(--bg);padding:12px 18px;font:600 .9375rem/1.2 var(--f-text);text-decoration:none}
.skip:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{position:relative;width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}

.mk{display:block;height:var(--h,2rem);width:auto;max-width:100%;fill:currentColor;overflow:visible}
.ac{fill:var(--accent)}
.acs{stroke:var(--accent)}

/* ters takim: iletisim blogu, altlik ve uzerine gelinen/odaklanan proje satiri */
.inv,
.row.is-link:active,
.row.is-link:has(a:focus-visible){
  --bg:var(--inv-bg); --fg:var(--inv-fg); --fg-2:var(--inv-fg-2); --fg-3:var(--inv-fg-3); --rule:var(--inv-rule);
  --accent:var(--inv-accent); --on-accent:var(--inv-on-accent); --ok:var(--inv-ok); --focus:var(--inv-focus);
}
@media (hover:hover){
  .row.is-link:hover{
    --bg:var(--inv-bg); --fg:var(--inv-fg); --fg-2:var(--inv-fg-2); --fg-3:var(--inv-fg-3); --rule:var(--inv-rule);
    --accent:var(--inv-accent); --on-accent:var(--inv-on-accent); --ok:var(--inv-ok); --focus:var(--inv-focus);
  }
}

/* ---------- ortak imza: kesim isaretleri (kose L'leri) ---------- */
.marks::before{content:"";position:absolute;inset:0 var(--gut);pointer-events:none;
  --m:var(--mc,var(--fg-3)); --l:var(--ml,16px); --t:var(--mt,1px);
  background:
    linear-gradient(var(--m),var(--m)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 100%/var(--t) var(--l) no-repeat}

/* ---------- ortak imza: olcu cizgisi (iki ucu centikli, ortada etiket) ---------- */
.dim{display:flex;align-items:center;gap:10px;width:100%;color:var(--fg-3);
  font:600 .75rem/1 var(--f-text);letter-spacing:.09em;text-transform:uppercase}
.dim::before,.dim::after{content:"";flex:1 1 0;min-width:12px;height:11px;
  background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat}
.dim::before{border-inline-start:1px solid currentColor}
.dim::after{border-inline-end:1px solid currentColor}

.label{font:600 .75rem/1.2 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.h2{font:900 clamp(2.75rem,7.2vw,5.75rem)/.9 var(--f-display);font-stretch:62%;letter-spacing:-.012em;word-spacing:.14em}

/* ---------- ust cubuk ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand .mk{--h:2rem}
.brand .wm{--h:.95rem}
.nav{display:flex;align-items:center;gap:clamp(12px,2.6vw,32px);font:600 .8125rem/1 var(--f-text);letter-spacing:.09em;text-transform:uppercase}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.nav .lang{display:inline-flex;border:1.5px solid var(--fg);border-radius:2px}
.nav .lang a{min-height:36px;padding-inline:10px;justify-content:center}
.nav .lang a[aria-current="true"]{background:var(--fg);color:var(--bg)}
.nav .lang a:not([aria-current="true"]):hover{background:var(--rule);text-decoration:none}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(14px,2vw,22px) clamp(44px,7vw,96px)}
.hero .wrap{--mc:var(--accent);--ml:26px;--mt:2px;padding-block:clamp(26px,3.6vw,40px) clamp(34px,4vw,52px)}
.eyebrow{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:12px}
.ruler{position:relative;margin-bottom:clamp(26px,5vw,56px)}
.ruler-svg{display:block;width:100%;height:26px;overflow:visible}
.ruler-svg path{fill:none;vector-effect:non-scaling-stroke}
.ruler-svg .t1{stroke:var(--fg-3);stroke-width:1}
.ruler-svg .t2{stroke:var(--fg);stroke-width:1}
.ruler-svg .t3{stroke:var(--fg);stroke-width:2}
.ruler-svg .base{stroke:var(--fg);stroke-width:1}
.ruler-nums{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:7px;font:600 .75rem/1 var(--f-text);letter-spacing:.09em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ruler-nums span{padding-inline-start:6px}
.ruler-nums .end{position:absolute;right:0;top:0;padding:0}
@media (max-width:559px){.ruler-nums .unit{display:none}}
.hero h1{font:900 clamp(3.2rem,16.2vw,13.75rem)/.9 var(--f-display);font-stretch:62%;letter-spacing:-.012em;word-spacing:.14em}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.06em .22em;margin-block:-.06em -.22em}
.hero h1 .ln>span{display:inline-block}
.hero h1 .ln:nth-child(2){color:var(--accent)}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 56px;margin-top:clamp(30px,4.6vw,56px)}
.lead{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.45;color:var(--fg-2);max-width:34ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;border-radius:2px;background:var(--accent);color:var(--on-accent);
  font:700 .875rem/1 var(--f-text);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter;transition:transform var(--dur) var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn:hover svg{transform:translateY(3px)}
.textlink{font:600 .9375rem/1.2 var(--f-text);padding-block:14px}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,6vw,80px);border-top:1px solid var(--fg)}
.count>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px 16px 4px 0}
.count>div+div{padding-inline-start:16px;border-inline-start:1px solid var(--rule)}
.count dd{font:900 clamp(2.6rem,6.4vw,5rem)/.95 var(--f-display);font-stretch:62%;font-variant-numeric:tabular-nums}
.count dt{font:600 .75rem/1.25 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- projeler ---------- */
.projects{padding-block:clamp(40px,6vw,88px) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;padding-bottom:clamp(18px,2.4vw,28px)}
.key{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--fg-2);font-size:.9375rem;line-height:1.4}
.key span{display:inline-flex;align-items:center;gap:10px}
.rows{list-style:none;padding:0;margin:0;border-top:2px solid var(--fg)}
.row{position:relative;background:var(--bg);color:var(--fg);border-bottom:1px solid var(--rule);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.row:last-child{border-bottom:1px solid var(--fg)}
.row.is-link:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:-3px}
.row-in{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1.5fr) minmax(0,1fr) minmax(0,9.5rem);
  column-gap:clamp(16px,3vw,48px);padding-block:clamp(26px,3.6vw,48px)}
.num{font:900 clamp(3rem,8.4vw,7.25rem)/.8 var(--f-display);font-stretch:62%;font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1.5px var(--fg);transition:color var(--dur) var(--ease),-webkit-text-stroke-color var(--dur) var(--ease)}
@supports not (-webkit-text-stroke:1px #000){.num{color:var(--fg-3)}}
.row.is-link:active .num,.row.is-link:has(a:focus-visible) .num{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
@media (hover:hover){.row.is-link:hover .num{color:var(--accent);-webkit-text-stroke-color:var(--accent)}}
.main{min-width:0}
.main .mk{--h:var(--mh,2.5rem);margin-bottom:clamp(14px,1.8vw,22px)}
.plate{display:inline-block;max-width:100%}
.plate h3{font:800 clamp(2.9rem,7.2vw,6.9rem)/.92 var(--f-display);font-stretch:62%;letter-spacing:-.01em;word-spacing:.14em;padding-bottom:.08em}
.plate h3 a{text-decoration:none}
.plate h3 a:focus-visible{outline:0}
.nm-b{color:var(--accent)}
.nm-c{display:block;font-weight:300;font-stretch:100%;letter-spacing:-.02em;margin-top:.02em}
.nm-v{font-weight:300;font-stretch:125%;letter-spacing:-.025em}
.nm-logo{display:inline-block;height:.74em;width:auto;vertical-align:baseline;fill:currentColor;overflow:visible}
.nm-ic{display:inline-block;height:.7em;width:auto;vertical-align:-.01em;margin-inline-end:.2em;fill:currentColor;overflow:visible}
.nm-drop{height:.74em}
.plate h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.plate .dim{margin-top:12px}
.info{min-width:0;padding-top:.35rem}
.info .aka{font:600 .8125rem/1.35 var(--f-text);letter-spacing:.04em;margin-bottom:10px}
.info .desc{color:var(--fg-2);max-width:34ch}
.info .url{margin-top:18px;font:600 .8125rem/1.2 var(--f-text);letter-spacing:.06em;color:var(--fg-3)}
.side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:.35rem}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid currentColor;border-radius:2px;white-space:nowrap;
  font:700 .6875rem/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase}
.chip i{width:9px;height:9px;background:currentColor;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.chip--live{color:var(--ok)}
.chip--soon{color:var(--fg-2);border-style:dashed}
.chip--soon i{background:var(--fg-3)}
.go{display:grid;place-items:center;width:clamp(48px,5.2vw,68px);aspect-ratio:1;border:1.5px solid var(--fg);color:var(--fg);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.go svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;transition:transform var(--dur) var(--ease)}
.row.is-link:active .go,.row.is-link:has(a:focus-visible) .go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover){.row.is-link:hover .go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .row.is-link:hover .go svg{transform:translate(3px,-3px)}
  .row.is-link:hover .go--in svg{transform:translateX(4px)}}

/* ---------- hakkinda ---------- */
.about{padding-block:clamp(60px,9vw,136px)}
.about .wrap{--ml:16px}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px clamp(16px,3vw,48px);padding-block:clamp(28px,3.4vw,44px)}
.about .h2{grid-column:1 / span 4}
.about-body{grid-column:5 / -1;display:grid;gap:28px}
.statement{font:600 clamp(1.625rem,3.3vw,2.75rem)/1.14 var(--f-text);letter-spacing:-.025em;text-wrap:balance}
.about-body p.more{color:var(--fg-2);max-width:60ch}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--fg)}
.facts>div{padding:16px 16px 18px 0;border-bottom:1px solid var(--rule)}
.facts>div:not(.wide):nth-child(even){padding-inline-start:16px;border-inline-start:1px solid var(--rule)}
.facts dt{font:600 .75rem/1.2 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.facts dd{font-size:.9375rem;line-height:1.45}
.facts .wide{grid-column:1 / -1;padding-inline-end:0}
.facts .wide dd{overflow-wrap:anywhere}

/* ---------- iletisim + altlik (ters takim) ---------- */
.contact{background:var(--bg);color:var(--fg);padding-block:clamp(64px,10vw,150px) clamp(28px,4vw,48px)}
.contact .wrap,.foot .wrap{--ml:16px}
.contact-in{padding-block:clamp(30px,3.6vw,48px) clamp(34px,3.6vw,48px)}
.contact .h2{margin-bottom:clamp(22px,4vw,48px)}
.mail{display:block;width:fit-content;max-width:100%;font:900 clamp(2.15rem,15.4vw,11rem)/.98 var(--f-display);font-stretch:62%;letter-spacing:-.012em;
  color:var(--fg);text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.1em;overflow-wrap:anywhere;
  transition:color var(--dur) var(--ease)}
.mail:hover{color:var(--accent)}
.contact .dim{margin-top:14px;width:100%}
.contact-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 40px;margin-top:clamp(22px,3vw,36px);color:var(--fg-2);max-width:none}
.contact-meta p{max-width:44ch}
.foot{background:var(--bg);color:var(--fg);padding-block:0 clamp(26px,4vw,44px)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px clamp(16px,3vw,48px);border-top:1px solid var(--rule);padding-top:clamp(28px,3.4vw,44px)}
.foot h2{font:600 .75rem/1.2 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.foot ul{list-style:none;padding:0;margin:0}
.foot-grid p{font-size:.9375rem;line-height:1.6;color:var(--fg-2);max-width:34ch}
.foot-grid p a{color:var(--fg)}
.foot li a,.foot li span.na{display:inline-flex;align-items:center;min-height:36px;font-size:.9375rem;color:var(--fg)}
.foot li a{text-decoration:none}
.foot li a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.foot li span.na{color:var(--fg-2)}
.foot .soon{margin-inline-start:8px;font:600 .6875rem/1 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.legal{display:grid;gap:10px;margin-top:clamp(28px,4vw,48px);padding-top:20px;border-top:1px solid var(--rule);color:var(--fg-2);font-size:.8125rem;line-height:1.55}
.legal p{max-width:92ch}
.legal a{color:var(--fg)}
.ghost{display:block;width:100%;height:auto;margin-top:clamp(26px,5vw,64px);color:var(--rule)}

/* ---------- 404 ---------- */
.nf{padding-block:clamp(32px,6vw,80px) clamp(64px,10vw,140px)}
.nf .wrap{--mc:var(--accent);--ml:26px;--mt:2px;padding-block:clamp(28px,4vw,48px)}
.nf .nf-code{font:900 clamp(6rem,26vw,19rem)/.8 var(--f-display);font-stretch:62%;color:transparent;-webkit-text-stroke:2px var(--fg);letter-spacing:-.01em;max-width:none;margin:0}
@supports not (-webkit-text-stroke:1px #000){.nf .nf-code{color:var(--fg-3)}}
.nf h1{font:900 clamp(2.4rem,7vw,5.25rem)/.92 var(--f-display);font-stretch:62%;word-spacing:.14em;margin-top:clamp(20px,3vw,36px)}
.nf p{color:var(--fg-2);max-width:48ch;margin-top:14px}
.nf .cta{margin-top:clamp(22px,3vw,36px)}
.nf .btn+.btn{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.nf .btn+.btn:hover{background:var(--fg);color:var(--bg)}

/* ---------- hareket: yalniz tercih edilirse; son durum zaten gorunur ---------- */
@keyframes rise{from{transform:translateY(108%)}}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln>span{animation:rise .78s var(--ease) both}
  .hero h1 .ln:nth-child(2)>span{animation-delay:.1s}
  .ruler-svg{animation:draw 1s var(--ease) both}
}

/* ---------- genislikler ---------- */
@media (min-width:768px){.hero h1{font-size:clamp(3.4rem,17vw,13.75rem)}}
@media (min-width:1024px){.hero h1{font-size:clamp(3.4rem,15.4vw,13.75rem)}}
@media (max-width:1023px){
  .row-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num side" "main main" "info info";row-gap:20px}
  .num{grid-area:num}
  .main{grid-area:main}
  .info{grid-area:info;padding-top:0}
  .side{grid-area:side;flex-direction:row;align-items:center;justify-content:flex-end;padding-top:0;gap:12px}
  .go{width:48px}
  .info .desc{max-width:52ch}
  .about .h2{grid-column:1 / -1}
  .about-body{grid-column:1 / -1}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .hero-foot{grid-template-columns:minmax(0,1fr)}
  .count{grid-template-columns:repeat(2,minmax(0,1fr))}
  .count>div:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .count>div:nth-child(n+3){border-top:1px solid var(--rule);margin-top:12px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts>div:not(.wide):nth-child(even){padding-inline-start:0;border-inline-start:0}
  .nav .opt{display:none}
}
@media (max-width:420px){
  .brand .wm{display:none}
  .nav{gap:10px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}