/* Self-hosted OFL fonts. Generated from the Google Fonts API.
/* ZillaSlab latin-ext 400 */
@font-face { font-family:'ZillaSlab'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ZillaSlab-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ZillaSlab latin 400 */
@font-face { font-family:'ZillaSlab'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ZillaSlab-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ZillaSlab latin-ext 600 */
@font-face { font-family:'ZillaSlab'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ZillaSlab-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ZillaSlab latin 600 */
@font-face { font-family:'ZillaSlab'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ZillaSlab-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Figtree latin-ext 300_900 */
@font-face { font-family:'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/Figtree-latin-ext-300_900.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Figtree latin 300_900 */
@font-face { font-family:'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/Figtree-latin-300_900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* JetBrainsMono latin-ext 400_600 */
@font-face { font-family:'JetBrainsMono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/JetBrainsMono-latin-ext-400_600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* JetBrainsMono latin 400_600 */
@font-face { font-family:'JetBrainsMono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/JetBrainsMono-latin-400_600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Osman Can Çınar — personal site
   Direction: parity ledger. Bone ground, ink type, deep pine accent.
   Type (all OFL, self-hosted — the originals were macOS-only):
     display  Zilla Slab       (was Superclarendon)
     body     Figtree          (was Avenir Next)
     label    JetBrains Mono   (was Menlo)
   Motion: expo-out cubic-bezier(.16,1,.3,1); 40ms stagger; exit ~65% of enter. */


:root{
  --ground:#E7E9E3;
  --surface:#F1F2EE;
  --sunk:#DEE1D9;
  --ink:#161A16;
  --ink-2:#3E453D;
  --muted:#5C635B;
  --rule:#C6CAC0;
  --rule-2:#D6D9D1;
  --accent:#0E5F52;
  --accent-2:#0A473E;
  --accent-tint:rgba(14,95,82,.07);
  --max:1180px;
  --display:"ZillaSlab",Rockwell,Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
  --mono:"JetBrainsMono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.42s;
  --dur-out:.27s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.02vw,17.5px); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent-2)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);margin:0;letter-spacing:-.018em;text-wrap:balance}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(22px,5vw,56px)}
.label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin:0 0 16px;font-variant-numeric:tabular-nums;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--surface);padding:10px 16px;border-radius:4px;font-weight:700;z-index:100}
.skip:focus{left:16px;top:16px}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(231,233,227,.82);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--rule)}
.nav__in{display:flex;align-items:center;height:62px;gap:clamp(14px,2.4vw,32px)}
.nav__brand{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.nav__brand:hover{color:var(--ink)}
.nav__l{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;align-items:center}
.nav__l a{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:relative}
.nav__l a:hover{color:var(--ink)}
.nav__l a:not(.lang)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__l a:not(.lang):hover::after{transform:scaleX(1)}
.lang{border:1px solid var(--rule);border-radius:4px;padding:6px 9px}
.lang:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:660px){.nav__l{gap:14px}.nav__l a:not(.lang){font-size:9.5px;letter-spacing:.08em}}

/* ---------- hero ---------- */
.hero{padding:clamp(64px,10vw,140px) 0 clamp(52px,7.5vw,96px);border-bottom:1px solid var(--rule)}
.hero__t{
  font-size:clamp(42px,8vw,94px);line-height:1.0;letter-spacing:-.03em;
  font-weight:600;max-width:14ch;
}
.hero__t .g{color:var(--accent)}
.hero__lead{max-width:60ch;color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);margin:30px 0 0;line-height:1.58}

/* ---------- sections ---------- */
.s{padding:clamp(52px,7.5vw,96px) 0;border-bottom:1px solid var(--rule)}
.s--alt{background:var(--surface)}
.s__t{font-size:clamp(26px,3.6vw,42px);font-weight:600}
.lead{color:var(--ink-2);max-width:68ch;margin:18px 0 0}

/* ---------- parity ledger ---------- */
.ledger{display:grid;grid-template-columns:1fr 1px 1fr;margin-top:42px;border-top:1px solid var(--ink)}
.ledger__sp{background:linear-gradient(180deg,transparent,var(--accent) 14%,var(--accent) 86%,transparent);opacity:.5}
.ledger__c{padding:30px 0}
.ledger__c:first-child{padding-right:clamp(20px,3.2vw,48px)}
.ledger__c:last-child{padding-left:clamp(20px,3.2vw,48px)}
.ledger__c h3{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.ledger__c ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.ledger__c li{display:flex;gap:15px;font-size:15.5px;color:var(--ink)}
.ledger__c li i{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--muted);padding-top:5px;min-width:22px;font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .ledger{grid-template-columns:1fr}
  .ledger__sp{height:1px;background:var(--accent)}
  .ledger__c:first-child,.ledger__c:last-child{padding-inline:0}
}

/* ---------- cycle ---------- */
.cycle{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:38px}
.cycle__s{background:var(--ground);padding:24px 20px;transition:background var(--dur-out) var(--ease)}
.s--alt .cycle__s{background:var(--surface)}
.cycle__s:hover{background:var(--accent-tint)}
.cycle__s b{display:block;font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:7px}
.cycle__s p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---------- work ---------- */
.work{margin-top:40px;border-top:1px solid var(--ink)}
.work__r{
  display:grid;grid-template-columns:82px 1fr 132px;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--rule);
  transition:padding-left var(--dur) var(--ease),background var(--dur) var(--ease);
}
article.work__r:hover{padding-left:14px;background:var(--accent-tint)}
a.work__r:hover,a.work__r:focus-visible{padding-left:18px;background:var(--accent-tint)}
.work__y{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.work__t{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.3vw,27px);color:var(--ink);letter-spacing:-.02em;display:block}
.work__d{display:block;font-family:var(--body);font-size:14.5px;color:var(--ink-2);margin-top:9px;line-height:1.6;max-width:62ch}
.work__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-align:right}
@media(max-width:640px){.work__r{grid-template-columns:1fr;gap:7px}.work__k{text-align:left}}

/* ---------- stack ---------- */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(234px,1fr));gap:28px 42px;margin-top:38px}
.stack h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.stack p{margin:0;font-size:15px;color:var(--ink);line-height:1.8}

/* ---------- footer ---------- */
.foot{background:var(--sunk);padding:clamp(56px,7.5vw,96px) 0 56px;border-top:1px solid var(--rule)}
.foot__t{font-size:clamp(25px,3.8vw,44px);font-weight:600;max-width:20ch}
.foot__l{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px}
.foot__l a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;border-bottom:1px solid var(--rule);padding-bottom:5px;transition:border-color .25s var(--ease)}
.foot__l a:hover{border-color:var(--accent)}
.foot__m{margin-top:46px;padding-top:22px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10px;color:var(--muted);line-height:2}

/* ---------- buttons ---------- */
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border-radius:3px;border:1px solid var(--accent);
  background:var(--accent);color:var(--surface);
  transition:background var(--dur-out) var(--ease),color var(--dur-out) var(--ease),transform var(--dur-out) var(--ease);
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--surface)}
.btn:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn--ghost:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}

/* ---------- services chain (numbered = real sequence) ---------- */
.chain{
  list-style:none;margin:42px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:0 clamp(28px,4vw,56px);border-top:1px solid var(--ink);
}
.chain__i{
  display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.chain__n{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--accent);padding-top:5px;font-variant-numeric:tabular-nums;
}
.chain__i b{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;color:var(--ink);letter-spacing:-.012em}
.chain__i em{display:block;font-style:normal;font-size:14px;color:var(--muted);line-height:1.58;margin-top:6px;max-width:52ch}

/* ---------- screens: CSS-drawn device frames ---------- */
.screens{margin-top:42px;display:flex;flex-direction:column;gap:clamp(38px,5vw,60px)}
.screens__g{border-top:1px solid var(--rule);padding-top:22px}
.screens__h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.screens__t{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,23px);color:var(--ink);letter-spacing:-.018em}
.screens__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.rail{
  display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}
.rail::-webkit-scrollbar-track{background:transparent}

/* phone */
.dev{flex:0 0 auto;scroll-snap-align:start;position:relative}
.dev__f{
  width:clamp(146px,17vw,202px);aspect-ratio:9/19.5;
  background:var(--ink);border-radius:clamp(18px,2.4vw,26px);
  padding:clamp(5px,.65vw,7px);
  box-shadow:0 1px 2px rgba(22,26,22,.18),0 12px 28px -10px rgba(22,26,22,.32);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.dev:hover .dev__f{transform:translateY(-5px);box-shadow:0 2px 4px rgba(22,26,22,.2),0 20px 40px -12px rgba(22,26,22,.38)}
.dev__s{
  width:100%;height:100%;border-radius:clamp(13px,1.8vw,20px);
  background:var(--sunk);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.dev__s img{width:100%;height:100%;object-fit:cover;display:block}
.dev__f::after{ /* notch */
  content:"";position:absolute;top:clamp(9px,1.1vw,12px);left:50%;transform:translateX(-50%);
  width:26%;height:clamp(11px,1.3vw,15px);background:var(--ink);border-radius:99px;z-index:2;
}
.dev__c{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:11px;text-align:center;
}
/* empty-slot hint, disappears the moment an <img> is present */
.dev__s:empty::before{
  content:"drop screenshot";
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);opacity:.5;text-align:center;padding:0 10px;
}

/* wide frame: CarPlay, Android Auto, web, tablet */
.dev--wide .dev__f{width:clamp(300px,38vw,470px);aspect-ratio:16/10;border-radius:clamp(9px,1.1vw,13px);padding:clamp(6px,.7vw,9px)}
.dev--wide .dev__s{border-radius:clamp(5px,.7vw,8px)}
.dev--wide .dev__f::after{display:none}
@media(prefers-reduced-motion:reduce){.dev:hover .dev__f{transform:none}}

/* ---------- contact form (Netlify Forms, no client-side keys) ---------- */
.cf{margin-top:30px;max-width:600px;display:flex;flex-direction:column;gap:16px}
.cf__hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf__f{display:flex;flex-direction:column;gap:7px}
.cf__f span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cf input,.cf textarea{font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:11px 13px;width:100%}
.cf textarea{resize:vertical;line-height:1.55}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.cf .btn{align-self:flex-start}
@media(max-width:640px){.cf__row{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.e404{padding:clamp(70px,11vw,150px) 0 clamp(60px,9vw,120px)}
.e404__t{font-size:clamp(30px,4.6vw,52px);font-weight:600;letter-spacing:-.02em;margin:10px 0 0;max-width:16ch}
.e404 .hero__cta{margin-top:34px}
.e404__l{margin-top:52px;padding-top:26px;border-top:1px solid var(--rule)}