/* mehmetunal.dev — shared styles.
   Layout: one column of full-width bands; each band centres a 1120px wrap. Pages pick a world with body.w-home / .w-doner / .w-dahi. */
:root{
  --night:#17142E; --night-2:#221E43; --ink:#F4F1FF; --ink-soft:#B9B3DA; --line:rgba(244,241,255,.14);
  --flame:#FF6B2C; --sun:#FFC94A; --mint:#4FD6A5; --sky:#5CC8F2; --rose:#FF7EA6;
  --display:"Bagel Fat One","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Onest","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-lg:28px; --r-md:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
img,svg,canvas{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* language switching: html[data-lang] shows only matching [data-l] */
html[data-lang="tr"] [data-l]:not([data-l="tr"]),
html[data-lang="en"] [data-l]:not([data-l="en"]),
html[data-lang="de"] [data-l]:not([data-l="de"]){display:none!important}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .3s,backdrop-filter .3s}
.top.solid{background:color-mix(in srgb,var(--night) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.01em}
.brand .mono{width:36px;height:36px;border-radius:12px;background:var(--flame);display:grid;place-items:center;font-family:var(--display);font-size:20px;color:var(--night);transform:rotate(-8deg);transition:transform .4s cubic-bezier(.2,1.8,.4,1)}
.brand:hover .mono{transform:rotate(8deg) scale(1.08)}
.brand .dot{color:var(--flame)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px;color:var(--ink-soft)}
.nav a:hover{color:var(--ink);background:var(--line)}
.langs{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;margin-left:6px}
.langs button{border:0;background:none;color:var(--ink-soft);font:700 12px/1 var(--body);letter-spacing:.06em;padding:7px 9px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--night)}
@media (max-width:720px){.nav a.hide-sm{display:none}}

/* hero */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-block:120px 80px}
.hero canvas.field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;touch-action:pan-y}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);background:color-mix(in srgb,var(--night) 70%,transparent);padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 30%,transparent);animation:ping 2s infinite}
.big{font-family:var(--display);font-weight:400;font-size:clamp(64px,13vw,184px);line-height:.88;letter-spacing:-.01em;margin:18px 0 10px;text-wrap:balance;user-select:none;-webkit-user-select:none}
.big .ch{display:inline-block;will-change:transform;transition:transform .55s cubic-bezier(.2,1.7,.35,1),color .3s}
.big .ch.sp{width:.28em}
.big .word{display:inline-block;white-space:nowrap}
.big .ch:nth-child(3n+1){color:var(--ink)}
.big .ch:nth-child(3n+2){color:var(--sun)}
.big .ch:nth-child(3n){color:var(--flame)}
.lead{font-size:clamp(18px,2.2vw,22px);max-width:34ch;color:var(--ink-soft);margin:0 0 26px;background:color-mix(in srgb,var(--night) 55%,transparent);border-radius:12px}
.lead b{color:var(--ink)}
.hint{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:26px;font-size:14px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.hint span{display:inline-block;animation:wiggle 1.6s ease-in-out infinite}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;padding:14px 22px;border-radius:999px;background:var(--flame);color:var(--night);box-shadow:0 6px 0 #B9441A;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #B9441A}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #B9441A}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)}

/* sections */
.band{padding-block:clamp(72px,10vw,120px)}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--flame);margin:0 0 10px}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:.95;margin:0 0 18px;text-wrap:balance}
.sub{color:var(--ink-soft);max-width:60ch;margin:0}

/* app cards (home) */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
@media (max-width:860px){.apps{grid-template-columns:1fr}}
.app{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;text-decoration:none;isolation:isolate;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.app .stage{position:absolute;inset:0;z-index:-1}
.app h3{font-family:var(--display);font-weight:400;font-size:clamp(44px,5vw,60px);line-height:.95;margin:0 0 8px}
.app p{margin:0 0 16px;max-width:36ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{font-size:13px;font-weight:700;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.app .links{display:flex;gap:10px;flex-wrap:wrap}
.app .links a{font-weight:800;font-size:15px;text-decoration:none;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:#1B1838}
.app .links a.lite{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.soon{position:absolute;top:22px;left:22px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.28);color:#fff}

.app.doner{background:radial-gradient(120% 90% at 70% 10%,#7A1E12 0%,#3A0F0B 60%,#220807 100%);color:#FFEDE0}
.app.dahi{background:linear-gradient(160deg,#BFE8FF 0%,#E9F6FF 55%,#FFF3D6 100%);color:#262150}
.app.dahi .chip{background:rgba(38,33,80,.08)}
.app.dahi .links a{background:#262150;color:#fff}
.app.dahi .soon{background:rgba(38,33,80,.12);color:#262150}

/* mini döner spit (pure CSS) */
.spit{position:absolute;right:12%;top:12%;width:150px;height:300px}
.spit .rod{position:absolute;left:50%;top:-20px;bottom:-30px;width:8px;margin-left:-4px;border-radius:4px;background:linear-gradient(90deg,#999,#eee,#888)}
.spit .meat{position:absolute;inset:10px 6px 20px;clip-path:polygon(8% 0,92% 0,70% 100%,30% 100%);
  background:repeating-linear-gradient(180deg,#B5541E 0 9px,#8E3A12 9px 13px,#D2753A 13px 20px),linear-gradient(90deg,rgba(0,0,0,.35),transparent 35%,rgba(255,220,180,.25) 55%,rgba(0,0,0,.4));
  background-blend-mode:multiply;background-size:100% 40px,100% 100%;animation:roast 2.4s linear infinite}
.spit .glow{position:absolute;right:-40px;top:0;bottom:0;width:40px;border-radius:12px;background:repeating-linear-gradient(180deg,#FF6B2C 0 10px,#FFB13B 10px 18px);filter:blur(1px);box-shadow:0 0 40px 10px rgba(255,107,44,.55);animation:flick 1.2s ease-in-out infinite alternate}
@keyframes roast{to{background-position:0 40px,0 0}}
@keyframes flick{to{box-shadow:0 0 60px 18px rgba(255,140,44,.7)}}

/* mini kid world */
.kid-sun{position:absolute;left:46%;top:26px;width:70px;height:70px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 14px rgba(255,201,74,.25);animation:pulse 3s ease-in-out infinite}
.kid-road{position:absolute;left:0;right:0;top:34%;height:64px;background:#555970}
.kid-road::after{content:"";position:absolute;left:0;right:0;top:29px;height:5px;background:repeating-linear-gradient(90deg,#fff 0 24px,transparent 24px 48px);opacity:.8}
.kid-car{position:absolute;top:calc(34% - 34px);font-size:58px;line-height:1;animation:drive 6s linear infinite}
.kid-car span{display:inline-block;transform:scaleX(-1)}
.kid-school{position:absolute;right:9%;top:calc(34% - 92px);font-size:84px;line-height:1}
.kid-play{position:absolute;left:8%;top:17%;width:80px;height:80px;border-radius:50%;background:#F7943B;box-shadow:0 7px 0 #C46A1C;display:grid;place-items:center;animation:bob 2.2s ease-in-out infinite}
.kid-play::before{content:"";border-left:32px solid #fff;border-top:21px solid transparent;border-bottom:21px solid transparent;margin-left:8px}
@keyframes drive{from{left:-80px}to{left:calc(100% + 20px)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes pulse{50%{transform:scale(1.07)}}

/* promise row */
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
@media (max-width:860px){.promise{grid-template-columns:1fr}}
.pr{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:var(--night-2)}
.pr .ic{font-size:34px;line-height:1;display:inline-block;margin-bottom:12px;transition:transform .5s cubic-bezier(.2,1.8,.4,1)}
.pr:hover .ic{transform:rotate(-14deg) scale(1.2)}
.pr h4{margin:0 0 6px;font-size:19px}
.pr p{margin:0;color:var(--ink-soft);font-size:15px}

/* contact */
.contact{position:relative;border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);background:var(--flame);color:var(--night);overflow:hidden}
.contact .h2{color:var(--night)}
.mail{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.mail code{font:800 clamp(18px,3vw,28px)/1.2 var(--body);background:var(--night);color:var(--ink);padding:10px 16px;border-radius:14px;user-select:all;-webkit-user-select:all;word-break:break-all}
.mail button{border:0;font:800 15px var(--body);padding:12px 16px;border-radius:999px;background:#fff;color:var(--night);cursor:pointer}
.contact .rocket{position:absolute;right:6%;bottom:-20px;font-size:120px;line-height:1;animation:launch 4s ease-in-out infinite}
@media (max-width:720px){.contact .rocket{font-size:70px;opacity:.5}}
@keyframes launch{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-10px,-26px) rotate(-6deg)}}

footer{padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));color:var(--ink-soft);font-size:14px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* feature grid (app pages) */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.feats{grid-template-columns:1fr}}
.feat{border-radius:var(--r-md);padding:22px;background:var(--card,var(--night-2));border:1px solid var(--line)}
.feat .ic{font-size:36px;line-height:1;margin-bottom:12px}
.feat h3{margin:0 0 6px;font-size:20px;line-height:1.2}
.feat p{margin:0;font-size:15px;color:var(--ink-soft)}

/* doc pages (privacy) */
.doc{max-width:760px;margin:0 auto;padding-block:120px 80px}
.doc h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,64px);line-height:1;margin:10px 0 8px}
.doc .meta{color:var(--ink-soft);font-size:15px;margin:0 0 30px}
.doc h2{font-size:22px;margin:34px 0 8px}
.doc p,.doc li{color:color-mix(in srgb,var(--ink) 88%,var(--ink-soft))}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.doc .box{border:1px solid var(--line);background:var(--night-2);border-radius:var(--r-md);padding:18px 20px;margin:20px 0}
.doc .box b{color:var(--mint)}
.back{display:inline-flex;gap:6px;align-items:center;text-decoration:none;font-weight:700;color:var(--ink-soft)}
.back:hover{color:var(--ink)}

/* reveal on scroll: visible by default, animated only once JS marks it */
.js .rv{opacity:0;transform:translateY(30px) scale(.98);transition:opacity .7s ease,transform .8s cubic-bezier(.2,1.2,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* sparkle burst */
.spark{position:fixed;pointer-events:none;z-index:50;font-size:22px;animation:fly .9s ease-out forwards}
@keyframes fly{from{transform:translate(0,0) scale(.5);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(var(--rot));opacity:0}}
@keyframes ping{50%{box-shadow:0 0 0 8px transparent}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}