@font-face{font-family:"Baloo 2";src:url(Baloo2-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(Baloo2-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--bg1:#3566d8;--bg2:#2147b4;--deep:#0a0f34;--ink:#14286e;--muted:#c9d6ff;--gold:#ffcf3a;--green:#3fcf6a;--card:rgba(10,25,90,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;color:#fff;background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 55%,#1a3a9c 100%);min-height:100vh;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* üst çubuk */
.top{position:sticky;top:0;z-index:10;background:rgba(20,40,130,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:22px}
.brand img{width:40px;height:40px;border-radius:12px}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a{text-decoration:none;padding:8px 14px;border-radius:999px;font-size:15px}
.top nav a:hover{background:var(--card)}
/* giriş */
.hero{position:relative;padding:70px 0 70px;background:#2a8fe8 center right/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,60,170,.92) 0%,rgba(25,60,170,.75) 38%,rgba(25,60,170,0) 62%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(53,102,216,0),var(--bg1))}
.hero .wrap{position:relative;z-index:1}
.heroart{position:relative;height:520px}
.heroart .phone{right:2%;top:10px;width:230px;transform:rotate(6deg)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.tag{display:inline-block;background:var(--gold);color:#3a2400;font-weight:800;font-size:14px;padding:4px 12px;border-radius:999px}
h1{font-weight:800;font-size:clamp(46px,8vw,86px);line-height:.95;margin:14px 0 10px;letter-spacing:.5px}
h1 .r{color:#ff5a6e}h1 .i{color:#ffcf3a}h1 .n{color:#3fdc7c}h1 .g{color:#4fb6ff}
h1 .smash{display:block;background:linear-gradient(90deg,#ff6b81,#ffcf3a 30%,#3fdc7c 55%,#4fb6ff 80%,#b67bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(10,20,80,.35))}
.lead{font-size:20px;line-height:1.45;color:#eaf0ff;max-width:520px;font-weight:700}
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.store{display:flex;align-items:center;gap:10px;background:#0b1240;border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 18px;text-decoration:none;min-width:190px;box-shadow:0 5px 0 rgba(5,10,40,.5)}
.store small{display:block;font-size:12px;opacity:.75;font-weight:700}
.store b{display:block;font-size:20px;font-weight:800;line-height:1}
.store .ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3fdc7c,#4fb6ff);display:grid;place-items:center;font-size:16px}
.soonnote{margin-top:10px;font-size:14px;color:var(--muted)}
/* telefonlar */
.phones{position:relative;height:560px}
.phone{position:absolute;width:250px;border-radius:38px;padding:10px;background:#0b1240;box-shadow:0 24px 50px rgba(5,10,40,.55),inset 0 0 0 2px rgba(255,255,255,.12)}
.phone img{display:block;width:100%;border-radius:30px}
.phone.a{left:6%;top:40px;transform:rotate(-8deg)}
.phone.b{right:4%;top:0;transform:rotate(6deg);z-index:2}
.float{position:absolute;filter:drop-shadow(0 10px 14px rgba(5,10,40,.45));animation:bob 4s ease-in-out infinite}
.float.f1{left:-10px;bottom:30px;width:150px;animation-delay:-1s}
.float.f2{right:-20px;bottom:-10px;width:170px;animation-delay:-2.5s;z-index:3}
@keyframes bob{50%{transform:translateY(-12px) rotate(3deg)}}
/* bölümler */
section{padding:56px 0}
.h2{line-height:1.1;font-weight:800;font-size:clamp(30px,4.6vw,44px);margin:0 0 10px;text-align:center}
.sub{color:var(--muted);text-align:center;font-size:18px;margin:0 auto 30px;max-width:640px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--card);border-radius:24px;padding:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.feat .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:12px}
.feat .ico img{width:28px;height:28px}
.feat h3{margin:0 0 6px;font-size:21px;font-weight:800}
.feat p{margin:0;color:#dfe8ff;font-size:16px;line-height:1.45}
.c1{background:#ff5a6e}.c2{background:#ffb01c}.c3{background:#3fcf6a}.c4{background:#35a2ff}.c5{background:#b67bff}.c6{background:#ff4aa6}
/* ekran görüntüleri */
.shots{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 22px;scroll-snap-type:x mandatory}
.shots figure{margin:0;flex:0 0 250px;scroll-snap-align:center}
.shots img{width:250px;height:auto;border-radius:22px;display:block;box-shadow:0 14px 30px rgba(5,10,40,.45)}
.shots figcaption{text-align:center;margin-top:8px;color:var(--muted);font-size:15px}
/* temalar */
.themes{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.theme{border-radius:20px;padding:14px 8px 10px;text-align:center;box-shadow:0 6px 0 rgba(5,10,40,.35);transition:transform .2s}
.theme:hover{transform:translateY(-4px) rotate(-2deg)}
.theme img{width:100%;height:58px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.theme span{display:block;font-size:14px;font-weight:800;margin-top:6px}
/* diller */
.langs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:900px;margin:0 auto}
.langs span{background:var(--card);padding:6px 12px;border-radius:999px;font-size:15px}
.big{font-size:clamp(64px,10vw,110px);font-weight:800;text-align:center;line-height:1;color:var(--gold);text-shadow:0 6px 0 rgba(10,20,80,.35)}
/* stüdyo */
.studio{background:var(--deep);border-radius:36px;padding:40px;display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center;box-shadow:0 20px 50px rgba(5,10,40,.45)}
.studio img{width:100%;border-radius:28px}
.studio p{color:#dfe8ff;font-size:17px;line-height:1.55}
/* takip */
.social{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.social a{display:block;text-align:center;text-decoration:none;padding:22px 10px;border-radius:22px;font-weight:800;font-size:20px;box-shadow:0 6px 0 rgba(5,10,40,.35)}
.social small{display:block;font-size:13px;opacity:.85;font-weight:700}
.s1{background:linear-gradient(135deg,#ff6b81,#b67bff)}.s2{background:linear-gradient(135deg,#0b1240,#ff4aa6)}.s3{background:linear-gradient(135deg,#ff5a26,#ff2f4f)}.s4{background:linear-gradient(135deg,#1b2c78,#35a2ff)}
.contact{background:#fff;color:var(--ink);border-radius:28px;padding:30px;text-align:center;box-shadow:0 8px 0 #183b96}
.contact a{color:#2147b4}
footer{padding:30px 0 40px;text-align:center;color:var(--muted);font-size:15px}
footer a{color:#fff}
/* belge sayfası */
.doc{background:#fff;color:var(--ink);border-radius:28px;padding:30px 30px 20px;margin:30px auto 40px;max-width:820px;box-shadow:0 8px 0 #183b96}
.doc h1{font-size:44px;color:var(--ink);margin:0 0 4px}
.doc h2{font-size:24px;margin:26px 0 8px}
.doc p,.doc li{color:#33406b;line-height:1.6;font-size:17px;font-weight:700}
.doc a{color:#2147b4}
@media (max-width:860px){
 .hero .wrap{grid-template-columns:1fr}.phones{height:470px;margin-top:10px}.hero{background-size:230% auto;background-position:62% 100%;padding:40px 0 0}.hero:before{background:linear-gradient(180deg,#2a55c8 0%,#2a55c8 55%,rgba(42,85,200,0) 75%)}.heroart{height:330px}.phone{width:200px}
 .features{grid-template-columns:1fr 1fr}.themes{grid-template-columns:repeat(4,1fr)}.studio{grid-template-columns:1fr;text-align:center;padding:28px}.studio img{max-width:240px;margin:0 auto}
 .social{grid-template-columns:1fr 1fr}.top nav a.hide-s{display:none}
}
@media (max-width:520px){.top nav a{padding:6px 8px;font-size:13px}.top nav a.hide-xs{display:none}.brand{font-size:19px}.brand img{width:34px;height:34px}.features{grid-template-columns:1fr}.themes{grid-template-columns:repeat(3,1fr)}.phone{width:170px}.phones{height:400px}.float{display:none}}