/* Mücahit Şimşek, apps. "Night and light": a daybreak palette for light mode and a lantern-lit
   night for dark mode. One accent (lamp amber); each app brings its own tint only as a soft glow. */
@font-face{font-family:"Figtree";src:url("/fonts/Figtree.ttf") format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"Young Serif";src:url("/fonts/YoungSerif-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  /* palette: daybreak */
  --bg:#F2F4F7;--sky:#E6EBF3;--card:#FFFFFF;--line:#D5DCE6;--text:#121827;--muted:#4A5568;
  --lamp:#FFB547;--lamp-ink:#2A1A04;--lamp-text:#9A5A00;--wire:#9AA6B8;
  --btn:#FFB547;--btn-text:#2A1A04;--badge:#121827;--badge-text:#FFFFFF;--badge-line:#121827;--glow-a:.30;--tint-a:.10;--star-a:0;
  --shadow:0 1px 2px rgba(18,24,39,.06),0 12px 32px -12px rgba(18,24,39,.18);
  --ok:#1F9D5B;--wait:#C77A00;--soon:#6B7A99;--dev:#D0611B;
  /* space, 4/8 grid */
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;
  /* type: five sizes */
  --t-small:.875rem;--t-body:1.0625rem;--t-title:1.5rem;--t-h2:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);--t-display:clamp(2.625rem,1.2rem + 5.2vw,4.875rem);
  --r-card:28px;--r-pill:999px;--max:1160px;--gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    /* palette: lantern night */
    --bg:#0B101C;--sky:#0F1729;--card:#131B2D;--line:#24304A;--text:#EEF1F6;--muted:#A4AEC2;
    --lamp-text:#FFC56B;--wire:#4B587A;
    --badge:#000000;--badge-text:#FFFFFF;--badge-line:#A4AEC2;--glow-a:.22;--tint-a:.16;--star-a:.75;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -16px rgba(0,0,0,.6);
    --ok:#3FD08A;--wait:#FFB547;--soon:#A4AEC2;--dev:#FF8A3D;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.6 "Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--lamp-text);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3{font-family:"Young Serif",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:var(--s3);top:-100px;z-index:10;background:var(--card);color:var(--text);padding:var(--s2) var(--s3);border-radius:var(--s2)}
.skip:focus{top:var(--s3)}

/* header */
.site-header{background:var(--sky)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3)}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;color:var(--text);text-decoration:none;font:var(--t-title)/1 "Young Serif",Georgia,serif}
.mark-icon{width:30px;height:30px;flex:none;color:var(--text)}
.mark-icon .flame{fill:var(--lamp)}
.site-header nav{display:flex;align-items:center;gap:var(--s1)}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s3);border-radius:var(--r-pill);color:var(--muted);text-decoration:none;font-size:var(--t-small);font-weight:600}
.site-header nav a:hover{color:var(--text)}
.site-header nav .lang{color:var(--text);border:1px solid var(--line)}
.site-header nav .lang:hover{border-color:var(--wire)}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(60% 70% at 50% 0%,rgba(255,181,71,var(--glow-a)),transparent 70%),
  linear-gradient(var(--sky),var(--bg))}
.hero::before{content:"";position:absolute;inset:0;opacity:var(--star-a);pointer-events:none;background-image:
  radial-gradient(1.5px 1.5px at 8% 22%,#F3E6CC 50%,transparent 51%),radial-gradient(1px 1px at 18% 62%,#F3E6CC 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 31% 12%,#F3E6CC 50%,transparent 51%),radial-gradient(1px 1px at 46% 78%,#F3E6CC 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 63% 18%,#F3E6CC 50%,transparent 51%),radial-gradient(1px 1px at 74% 70%,#F3E6CC 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 86% 30%,#F3E6CC 50%,transparent 51%),radial-gradient(1px 1px at 94% 82%,#F3E6CC 50%,transparent 51%)}
.hero .wrap{position:relative;padding-block:var(--s5) var(--s6)}
.lantern-nav{margin-bottom:var(--s6)}
.lanterns{position:relative;display:flex;justify-content:space-between;padding-inline:var(--s3)}
.lanterns::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--wire) 8%,var(--wire) 92%,transparent)}
.lanterns li{position:relative;padding-top:calc(var(--drop) + var(--s3))}
.lanterns li::before{content:"";position:absolute;left:50%;top:0;width:1px;height:calc(var(--drop) + var(--s3));background:var(--wire)}
.lanterns a{display:block;border-radius:24%;transition:transform .3s var(--ease)}
.lanterns a:hover{transform:translateY(4px) rotate(-2deg)}
.lanterns img{width:clamp(52px,6vw,76px);aspect-ratio:1;border-radius:23%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 10px 30px -6px var(--tint),0 0 48px -8px var(--tint)}
.hero-copy{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5) var(--s6);align-items:end}
.hero h1{font-size:var(--t-display);line-height:1.04;max-width:14ch}
.hero h1:lang(tr){max-width:16ch}
.hero h1 em{font-style:normal;color:var(--lamp-text)}
.lead{font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:40ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:var(--s2) var(--s4);border-radius:var(--r-pill);font-weight:700;font-size:var(--t-body);text-decoration:none;transition:transform .2s var(--ease),background-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--btn);color:var(--btn-text)}
.btn-store{background:var(--badge);color:var(--badge-text);border:1px solid var(--badge-line)}
.btn-primary:hover,.btn-store:hover{transform:translateY(-2px)}
.btn-quiet{color:var(--text);border:1px solid var(--line);background:transparent}
.btn-quiet:hover{border-color:var(--wire)}

/* sections */
.section{padding-block:var(--s8) 0}
.section h2,.values h2,.contact h2{font-size:var(--t-h2);line-height:1.15}
.section-lead{color:var(--muted);margin-top:var(--s2);max-width:56ch}
.app-list{display:grid;gap:var(--s5);margin-top:var(--s6)}

/* app card */
.app{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s6);align-items:center;padding:var(--s6);background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);scroll-margin-top:var(--s4)}
.app::before{content:"";position:absolute;inset:auto -10% -40% 35%;height:120%;background:radial-gradient(closest-side,var(--tint),transparent);opacity:var(--tint-a);pointer-events:none}
.app-flip::before{inset:auto 35% -40% -10%}
.app-flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.app-flip .app-info{order:2}
.app-info{position:relative;display:grid;gap:var(--s4);align-content:start}
.app-head{display:flex;align-items:center;gap:var(--s3)}
.app-icon{width:80px;height:80px;flex:none;border-radius:22.5%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 8px 24px -10px var(--tint)}
.app-name{font-size:var(--t-title);line-height:1.15}
.subtitle{color:var(--muted);margin-top:var(--s1)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font-size:var(--t-small)}
.status{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3) var(--s1) 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-weight:700;color:var(--text);background:var(--bg)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.status-live .dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.status-review .dot{background:var(--wait)}
.status-soon .dot{background:transparent;border:2px solid var(--soon)}
.status-dev .dot{background:var(--dev)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);color:var(--muted)}
.facts li+li::before{content:"·";margin-right:var(--s3);color:var(--wire)}
.note{color:var(--muted);font-style:italic}
.pitch{max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* phone screenshots */
.shots{position:relative;display:flex;justify-content:center;gap:var(--s3);padding-block:var(--s4)}
.shots{min-width:0}
.shots img{flex:1 1 0;min-width:0;max-width:172px;aspect-ratio:386/840;object-fit:cover;border-radius:clamp(16px,1.7vw,24px);border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(0,0,0,.45);transition:transform .4s var(--ease)}
.shots img:nth-child(2){transform:translateY(calc(var(--s5) * -1))}
.app:hover .shots img:nth-child(1){transform:translateY(-4px) rotate(-1deg)}
.app:hover .shots img:nth-child(3){transform:translateY(-4px) rotate(1deg)}
.shots:focus-visible{outline-offset:-3px}

/* workbench */
.bench-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s4);margin-top:var(--s6)}
.bench-card{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);scroll-margin-top:var(--s4)}
.bench-visual{position:relative;height:260px;overflow:hidden;background:radial-gradient(80% 90% at 50% 100%,color-mix(in srgb,var(--tint) 30%,#0A0D16),#0A0D16)}
.bench-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 100%,var(--tint),transparent);opacity:.18;pointer-events:none}
.visual-pair{display:flex;justify-content:center;gap:var(--s3);padding-top:var(--s4)}
.visual-pair img{width:auto;height:340px;aspect-ratio:386/840;border-radius:18px;border:1px solid #24304A}
.visual-layers img{position:absolute;width:82%;border-radius:12px;box-shadow:0 20px 40px -12px rgba(0,0,0,.7)}
.visual-layers img:nth-child(1){left:5%;top:24px}
.visual-layers img:nth-child(2){right:5%;bottom:24px}
.visual-campfire img{width:100%;height:100%;object-fit:cover}
.bench-body{display:grid;gap:var(--s3);padding:var(--s4)}
.bench-body .app-icon{width:56px;height:56px}
.bench-body .app-name{font-size:var(--t-title)}

/* values */
.values{margin-top:var(--s8);padding-block:var(--s7);background:var(--sky);border-block:1px solid var(--line)}
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s5)}
.value-grid li{position:relative;padding-top:var(--s4);border-top:1px solid var(--wire)}
.value-grid li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--lamp);box-shadow:0 0 16px 4px rgba(255,181,71,.55)}
.value-icon{display:block;color:var(--lamp-text)}
.value-icon svg{width:32px;height:32px}
.value-grid h3{font-size:var(--t-title);margin-top:var(--s3)}
.value-grid p{color:var(--muted);margin-top:var(--s2)}

/* contact and footer */
.contact{padding-block:var(--s8) var(--s7)}
.contact p{font-size:var(--t-title);color:var(--muted);margin-top:var(--s3);max-width:40ch}
.mail{display:inline-block;padding-block:var(--s2);font-weight:700;color:var(--lamp-text);overflow-wrap:anywhere}
.site-footer{border-top:1px solid var(--line);padding-block:var(--s5) calc(var(--s5) + env(safe-area-inset-bottom))}
.site-footer .wrap{display:grid;gap:var(--s2)}
.footer-brand{display:flex;align-items:center;gap:var(--s2)}
.footer-brand .mark-icon{width:24px;height:24px}
.footer-small{font-size:var(--t-small);color:var(--muted)}
.footer-small a{display:inline-flex;align-items:center;min-height:44px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 var(--s4)}

/* motion: lanterns light up one by one on load */
@media (prefers-reduced-motion:no-preference){
  .lanterns li{animation:lantern-in .7s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
  .lanterns li a{transform-origin:50% calc(var(--drop) * -1 - 16px);animation:sway 5s ease-in-out calc(1s + var(--i) * 70ms) 1}
  .hero h1,.lead,.hero-actions{animation:rise .8s var(--ease) both}
  .lead{animation-delay:.08s}.hero-actions{animation-delay:.16s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@keyframes lantern-in{from{transform:translateY(-14px)}to{transform:none}}
@keyframes sway{0%,100%{transform:rotate(0)}30%{transform:rotate(2.5deg)}65%{transform:rotate(-1.5deg)}}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}

/* tablet */
@media (max-width:960px){
  .app,.app-flip{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5)}
  .app-flip .app-info{order:0}
  .app::before,.app-flip::before{inset:30% -20% -30% -20%}
  .shots{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--s5) * -1);padding-inline:var(--s5);padding-block:var(--s2) var(--s3);scrollbar-width:thin}
  .shots img{flex:none;width:min(52vw,220px);scroll-snap-align:center}
  .shots img:nth-child(2){transform:none}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .hero-copy{grid-template-columns:1fr;gap:var(--s4)}
}

/* phone */
@media (max-width:640px){
  .nav-extra{display:none!important}
  .lantern-nav{margin-bottom:var(--s5)}
  .lanterns{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;gap:var(--s4) var(--s2);padding-inline:0}
  .lanterns::before,.lanterns li::before{display:none}
  .lanterns li{padding-top:0}
  .lanterns img{width:60px}
  .hero .wrap{padding-block:var(--s5) var(--s6)}
  .section{padding-block:var(--s7) 0}
  .app{padding:var(--s4);border-radius:22px}
  .shots{margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4)}
  .app-icon{width:64px;height:64px}
  .value-grid{grid-template-columns:1fr;gap:var(--s4)}
  .values{margin-top:var(--s7);padding-block:var(--s6)}
  .contact{padding-block:var(--s7) var(--s6)}
  .contact p{font-size:var(--t-body)}
  .btn{width:100%;justify-content:center;padding-inline:var(--s3)}
  .app-head{flex-direction:column;align-items:flex-start;gap:var(--s3)}
}

/* narrow phones: the hero button and footer carry the in-page links */
@media (max-width:420px){
  .site-header nav a:not(.lang){display:none}
}