/* Layout: tek sütunlu stüdyo vitrini. Büyük başlık + elle çizilmiş alt çizgi; ardından her uygulamaya kendi renk dünyası olan büyük vitrin kartları (sahne + bilgi), sade footer. */
:root{
  --bg:#0F1220; --bg2:#151A2C; --card:#181D31; --line:#272E48; --fg:#F3F4FA; --muted:#9AA1BD; --hl:#FFD24D; --link:#9DB4FF;
  --display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --body:'Figtree','Avenir Next','Segoe UI',system-ui,sans-serif;
  --hand:'Caveat','Bradley Hand','Comic Sans MS',cursive;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F5F6FA; --bg2:#ECEEF5; --card:#FFFFFF; --line:#E0E3EE; --fg:#12162A; --muted:#5F6683; --hl:#F5B800; --link:#3E5BD8; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F5F6FA; --bg2:#ECEEF5; --card:#FFFFFF; --line:#E0E3EE; --fg:#12162A; --muted:#5F6683; --hl:#F5B800; --link:#3E5BD8; color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px);padding-inline:1.25rem;background:var(--bg);color:var(--fg);font:400 1.02rem/1.6 var(--body)}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--hl);outline-offset:3px;border-radius:8px}
.wrap{max-width:70rem;margin-inline:auto}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.02}

header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.6rem}
.brand{font:800 1.2rem var(--display);letter-spacing:-.02em;text-decoration:none;position:relative}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;height:.22rem;border-radius:2px;background:var(--hl)}
.lang{display:flex;gap:.15rem;padding:.25rem;border:1px solid var(--line);border-radius:999px;background:var(--bg2)}
.lang a{text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--muted);padding:.35rem .7rem;border-radius:999px}
.lang a:hover{color:var(--fg)}
.lang a[aria-current]{background:var(--fg);color:var(--bg)}

.hero{padding-block:4.5rem 4rem;display:grid;gap:1.6rem}
.hero h1{font-size:clamp(2.4rem,9.5vw,7.2rem);font-weight:800;letter-spacing:-.045em;max-width:12ch}
.uline{position:relative;white-space:nowrap}
.uline svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.uline path{fill:none;stroke:var(--hl);stroke-width:7;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;animation:draw .9s .3s cubic-bezier(.65,0,.25,1) both}
@keyframes draw{from{stroke-dashoffset:420}}
.hero p{margin:0;max-width:36rem;font-size:1.2rem;color:var(--muted)}
.hero p b{color:var(--fg);font-weight:600}
.icons{display:flex;align-items:center;gap:.6rem;margin-top:.6rem}
.icons img{width:3.2rem;height:3.2rem;border-radius:.85rem;display:block;box-shadow:0 10px 20px -12px rgba(0,0,0,.6);transition:transform .3s}
.icons img:nth-child(1){transform:rotate(-6deg)}
.icons img:nth-child(3){transform:rotate(6deg)}
.icons:hover img{transform:none}

.label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1.5rem}
.label h2{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.label span{font:700 1.4rem var(--hand);color:var(--muted)}

.apps{display:grid;gap:1.25rem;padding-bottom:4rem}
.app{display:grid;grid-template-columns:1.05fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:2rem;overflow:hidden;text-decoration:none;transition:transform .35s,box-shadow .35s}
.app:hover{transform:translateY(-4px);box-shadow:0 30px 60px -35px rgba(0,0,0,.6)}
.app:nth-child(even){grid-template-columns:1fr 1.05fr}
.app:nth-child(even) .scene{order:2}
.app>*{min-width:0}
.info{padding:clamp(1.6rem,4vw,3rem);display:grid;gap:1rem;align-content:center}
.info img{width:4.4rem;height:4.4rem;border-radius:1.1rem;display:block;box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.info h3{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em}
.info p{margin:0;color:var(--muted);font-size:1.08rem;max-width:30rem}
.go{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--link);margin-top:.3rem}
.go svg{width:1rem;height:1rem;transition:transform .25s}
.app:hover .go svg{transform:translateX(4px)}

/* Sahneler: her uygulamanın kendi dünyası (uygulama renkleri sabit, tema bağımsız) */
.scene{position:relative;min-height:20rem;display:grid;place-items:center;padding:2rem;overflow:hidden}
.s-odev{background:radial-gradient(120% 90% at 20% 10%,#6D5CFF 0%,#4F46E5 45%,#2A1F8F 100%)}
.s-sudoku{background:#F4C430;background-image:radial-gradient(rgba(0,0,0,.07) 1.2px,transparent 1.3px);background-size:18px 18px}
.s-plane{background:linear-gradient(180deg,#5AB8FF 0%,#2F8BF0 100%)}

.goal{width:min(17rem,100%);border-radius:1.5rem;padding:1.2rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;display:grid;gap:1rem;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Figtree',sans-serif;transform:rotate(-3deg)}
.goal .t{font-size:.62rem;font-weight:700;letter-spacing:.16em;opacity:.85}
.goal .r{display:flex;align-items:center;gap:1rem}
.ring{width:4.4rem;height:4.4rem;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .b{stroke:rgba(255,255,255,.25)}
.ring .f{stroke:#fff;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:54;animation:fill 1.4s .4s cubic-bezier(.4,0,.2,1) both}
@keyframes fill{from{stroke-dashoffset:163.4}}
.bars{display:grid;gap:.45rem;flex:1}
.bars i{display:block;height:.5rem;border-radius:999px;background:rgba(255,255,255,.35)}
.bars i:nth-child(1){width:90%;background:#fff}
.bars i:nth-child(2){width:65%}
.bars i:nth-child(3){width:78%}
.locks{display:flex;gap:.5rem}
.locks b{width:2.4rem;height:2.4rem;border-radius:.7rem;background:rgba(255,255,255,.16);display:grid;place-items:center}
.locks svg{width:1.1rem;height:1.1rem;stroke:#fff}

.paper{width:min(16rem,100%);aspect-ratio:1;background:#FFFDF6;border-radius:.6rem;box-shadow:0 20px 40px -20px rgba(80,50,0,.55);display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #2B2B2B;transform:rotate(3deg);padding:0}
.paper span{display:grid;place-items:center;border:1px solid #CFC8B6;font:600 2.1rem var(--display);color:#2B2B2B}
.paper span.p{font:700 2.4rem var(--hand);color:#3E5BD8}
.paper span.n{font:600 .9rem var(--hand);color:#8B8473;display:grid;grid-template-columns:repeat(3,1fr);padding:.3rem;place-items:center}
.paper span.sel{background:#E6EDFF}

.chat{width:min(17rem,100%);display:grid;gap:.6rem;position:relative}
.chat .plane{position:absolute;top:-2.4rem;right:.5rem;width:2.4rem;height:2.4rem;color:#fff;transform:rotate(45deg);animation:fly 6s ease-in-out infinite}
@keyframes fly{50%{transform:rotate(45deg) translate(6px,-6px)}}
.bub{height:2.5rem;border-radius:1.2rem;background:#fff;box-shadow:0 8px 16px -10px rgba(0,40,100,.5);display:flex;align-items:center;gap:.4rem;padding:0 1rem}
.bub i{display:block;height:.45rem;border-radius:999px;background:#C9DDF5}
.bub.me{justify-self:end;background:#0B5ED7;border-bottom-right-radius:.35rem}
.bub.me i{background:rgba(255,255,255,.55)}
.bub.you{border-bottom-left-radius:.35rem}
.wave{justify-self:center;margin-top:.6rem;display:flex;gap:.3rem;align-items:center;color:rgba(255,255,255,.9)}
.wave span{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;animation:pulse 1.4s infinite}
.wave span:nth-child(2){animation-delay:.2s}.wave span:nth-child(3){animation-delay:.4s}
@keyframes pulse{50%{opacity:.3}}
.cloud{position:absolute;background:rgba(255,255,255,.35);border-radius:999px;height:1.4rem}

footer{border-top:1px solid var(--line);padding-block:2rem 2.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;color:var(--muted);font-size:.92rem}
footer a{color:var(--fg);text-decoration-color:var(--hl);text-decoration-thickness:2px;text-underline-offset:3px}

@media (max-width:820px){
  .app,.app:nth-child(even){grid-template-columns:1fr}
  .app:nth-child(even) .scene{order:0}
  .scene{min-height:15rem}
  .hero{padding-block:3rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
img{max-width:100%}