@font-face { font-family:'Archivo'; src:url(/assets/Archivo.ttf) format('truetype'); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
:root { --bg:#0B0B0D; --card:#151519; --line:rgba(255,255,255,.08); --txt:#F4F2EE; --mute:#9A978F; --accent:#E8572A; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { min-height:100vh; display:flex; color:var(--txt); font-family:'Archivo', system-ui, sans-serif;
  background:radial-gradient(900px 600px at 80% -10%, rgba(232,87,42,.16), transparent 60%), var(--bg); }
main { width:100%; max-width:960px; margin:0 auto; padding:72px 24px 40px; display:flex; flex-direction:column; gap:64px; }
.mark { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-weight:900; font-stretch:125%; font-size:30px; background:var(--accent); color:#fff; }
h1 { margin-top:28px; font-weight:900; font-stretch:125%; font-size:clamp(44px, 9vw, 96px); line-height:.95; letter-spacing:-.01em; }
.tag { margin-top:20px; font-size:clamp(18px, 2.4vw, 24px); line-height:1.4; color:var(--mute); }
.apps { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.app { display:flex; gap:20px; align-items:center; padding:24px; border-radius:24px; background:var(--card); border:1px solid var(--line); }
.app img { flex:0 0 88px; border-radius:20px; }
.app h2 { font-size:24px; font-weight:800; }
.app p { margin-top:6px; color:var(--mute); line-height:1.4; }
.soon { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; letter-spacing:.04em; padding:6px 12px; border-radius:99px; border:1px solid var(--line); }
.ac .soon { color:#37E1FF; }
.sm .soon { color:#E8A07F; }
footer { margin-top:auto; font-size:14px; color:var(--mute); }

/* hareket */
body::before { content:''; position:fixed; width:720px; height:720px; left:50%; top:-260px; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(232,87,42,.22), transparent); filter:blur(40px); animation:drift 14s ease-in-out infinite alternate; }
.mark { animation:breathe 3.2s ease-in-out infinite; box-shadow:0 10px 30px rgba(232,87,42,.35); }
h1 span { background:linear-gradient(100deg, #F4F2EE 20%, var(--accent) 50%, #F4F2EE 80%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s ease-in-out infinite; }
a.app { color:inherit; text-decoration:none; }
.app { transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
.app:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.4); }
.ac:hover { border-color:rgba(55,225,255,.4); }
.sm:hover { border-color:rgba(232,160,127,.4); }
.app img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.app:hover img { transform:rotate(-6deg) scale(1.06); }
footer a { color:inherit; }
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; transition-delay:var(--d, 0s); }
[data-reveal].in { opacity:1; transform:none; }
.app[data-reveal].in:hover { transform:translateY(-6px); transition-delay:0s; }
@keyframes drift { from { transform:translate(-80%, 0); } to { transform:translate(-10%, 120px); } }
@keyframes breathe { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.06) rotate(-4deg); } }
@keyframes shine { 0%,100% { background-position:100% 0; } 50% { background-position:0% 0; } }

/* JS çalışmazsa içerik yine görünsün */
[data-reveal]:not(.in) { animation:reveal-fallback .6s ease 2s forwards; }
@keyframes reveal-fallback { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  [data-reveal] { opacity:1; transform:none; }
}

/* diğer uygulamalar */
.fs .soon { color:#E8BF7C; } .fs:hover { border-color:rgba(232,191,124,.45); }
.lw .soon { color:#E0896B; } .lw:hover { border-color:rgba(224,137,107,.45); }
.km .soon { color:#D9B45A; } .km:hover { border-color:rgba(217,180,90,.45); }
.soon.live { border-color:currentColor; }
.app h2 small { font-size:12px; font-weight:800; vertical-align:middle; padding:3px 7px; border-radius:6px; border:1px solid var(--line); color:var(--mute); }