@font-face{font-family:"Baloo 2";src:url(/fonts/Baloo2.ttf) format("truetype");font-weight:400 800;font-display:swap}
:root{
  --night:#140d09;--night2:#1f140e;--wood:#2b1b12;--line:#3d2a1d;
  --ink:#fbf2e6;--muted:#c4ad95;
  --gold:#f7b928;--gold2:#ffd85c;--rose:#ec5aa0;--rose2:#ff8cc4;--orange:#f0782a;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.caps{text-transform:uppercase;letter-spacing:.02em}

/* üst şerit */
.top{position:absolute;inset:0 0 auto;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.top .brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;font-size:18px}
.top .brand img{width:36px;height:36px;border-radius:9px}
.lang{font-weight:700;font-size:15px;text-decoration:none;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;background:rgba(0,0,0,.3)}
.lang:hover{border-color:var(--gold)}

/* hero */
.hero{--cw:clamp(150px,40vw,230px);position:relative;padding:96px 0 calc(var(--cw) + 56px);
  background:radial-gradient(60% 55% at 50% 38%,#4a2a14 0%,#24160d 55%,var(--night) 100%);overflow:hidden;isolation:isolate}
.hero .stars{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent),radial-gradient(1.5px 1.5px at 78% 12%,#fff7 50%,transparent),radial-gradient(1px 1px at 42% 8%,#fff6 50%,transparent),radial-gradient(1px 1px at 88% 30%,#fff5 50%,transparent),radial-gradient(1.5px 1.5px at 25% 34%,#fff4 50%,transparent),radial-gradient(1px 1px at 63% 26%,#fff5 50%,transparent)}
.hero .city{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:-1;pointer-events:none}
.hero .city div{position:absolute;left:0;right:0;background-repeat:repeat-x;background-position:bottom center}
.hero .far{bottom:110px;height:170px;background-image:url(/img/bg_mahalle_far.webp);background-size:auto 100%;opacity:.38;filter:sepia(.6) brightness(.7)}
.hero .near{bottom:62px;height:200px;background-image:url(/img/bg_mahalle_near.webp);background-size:auto 100%;filter:brightness(.62)}
.hero .ground{bottom:0;height:80px;background-image:url(/img/ground_mahalle.webp);background-size:auto 100%;filter:brightness(.75)}
.hero .city::after{content:"";position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,var(--night))}
.hero-in{position:relative;z-index:2;text-align:center}
.hero .logo{width:min(560px,100%);margin:0 auto -6px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.hook{font-size:clamp(20px,3.4vw,34px);font-weight:800;line-height:1.15;margin:6px 0 10px}
.hook .a{color:var(--gold)}.hook .d{color:var(--rose)}
.lead{color:var(--muted);font-size:clamp(16px,2vw,20px);max-width:470px;margin:0 auto 24px}
/* karakterler her genişlikte kaldırıma basar */
.stage{position:absolute;left:0;right:0;bottom:38px;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,6vw,60px);pointer-events:none}
.stage .char{width:var(--cw);height:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.6));transform-origin:50% 100%;animation:bob 3.2s ease-in-out infinite}
.stage .char.r{width:calc(var(--cw) * .92);animation-delay:-1.6s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.stage .char{animation:none}}
/* geniş ekranda karakterler yazının iki yanına */
@media (min-width:1000px){
  .hero{--cw:clamp(220px,22vw,300px);padding:120px 0 150px;min-height:min(820px,100svh);display:flex;align-items:center}
  .hero>.wrap{width:100%}
  .stage{justify-content:space-between;max-width:1240px;margin-inline:auto;padding-inline:20px}
}

/* mağaza düğmeleri */
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.btn-store{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;text-decoration:none;border:1.5px solid #a6a6a6;border-radius:14px;padding:9px 22px 9px 16px;min-height:60px;transition:transform .15s,border-color .15s}
.btn-store:hover{transform:translateY(-2px);border-color:#fff}
.btn-store svg{width:30px;height:30px;flex:none}
.btn-store small{display:block;font-size:12px;line-height:1.1;opacity:.85;font-family:system-ui,sans-serif}
.btn-store b{display:block;font-size:24px;line-height:1.05;font-family:system-ui,-apple-system,sans-serif;font-weight:600;letter-spacing:-.01em}
.soon{font-size:14px;color:var(--muted);border:1.5px dashed var(--line);border-radius:14px;padding:10px 16px;min-height:60px;display:inline-flex;align-items:center}
.rating{margin-top:16px;font-size:15px;color:var(--muted)}
.rating b{color:var(--gold2)}

/* bölümler */
section{padding:96px 0}
.kicker{display:inline-block;font-weight:800;font-size:14px;color:var(--gold);letter-spacing:.08em;margin-bottom:8px}
h2{font-size:clamp(32px,5vw,52px);line-height:1.02;margin:0 0 14px;font-weight:800}
.sub{color:var(--muted);max-width:620px;margin:0 0 40px}
.center{text-align:center}.center .sub{margin-inline:auto}

/* taraf seçimi */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.side{position:relative;border-radius:28px;padding:30px 28px 26px;overflow:hidden;border:2px solid;isolation:isolate}
.side.aga{background:linear-gradient(160deg,#4a3410,#20160b 70%);border-color:#8a6a1f}
.side.diva{background:linear-gradient(160deg,#4d1a35,#200d17 70%);border-color:#8f3664}
.side-head{display:flex;gap:16px;align-items:center}
.side-head img{width:150px;flex:none;margin:-10px -6px -14px -10px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.side h3{font-size:44px;line-height:1;margin:0;font-weight:800}
.side.aga h3{color:var(--gold)}.side.diva h3{color:var(--rose)}
.side .motto{font-size:22px;font-weight:800;margin:2px 0 8px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:13px;font-weight:800;padding:2px 10px;border-radius:8px;background:rgba(255,255,255,.08)}
.side p{color:var(--muted);margin:18px 0 14px}
.foes-label{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.foes{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px 6px;padding-top:10px}
.foe{text-align:center;font-size:12px;font-weight:700;color:var(--ink);line-height:1.1}
.foe img{width:100%;max-width:84px;height:88px;object-fit:contain;object-position:bottom;margin:0 auto 4px}
.foe.boss{color:var(--gold2)}
.side.diva .foe.boss{color:var(--rose2)}
.rule{margin:26px auto 0;text-align:center;font-weight:700;color:var(--muted);font-size:16px}
.rule b{color:var(--ink)}

/* nasıl oynanır */
.how{background:linear-gradient(var(--night),var(--night2) 30%,var(--night2) 70%,var(--night))}
.steps{display:grid;gap:56px}
.step{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.step:nth-child(even){grid-template-columns:1fr 1.25fr}
.step:nth-child(even) .shot{order:2}
.shot{border-radius:var(--r);overflow:hidden;border:3px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.55);background:#000;aspect-ratio:2796/1290}
.shot img{width:100%;height:100%;object-fit:cover}
.num{font-size:15px;font-weight:800;color:var(--night);background:var(--gold);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px}
.step h3{font-size:clamp(28px,3.6vw,38px);line-height:1.05;margin:0 0 10px}
.step p{color:var(--muted);margin:0 0 14px}
.keys{display:flex;flex-wrap:wrap;gap:8px}
.key{font-size:14px;font-weight:800;padding:4px 12px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.04)}
.key.new{border-color:var(--rose);color:var(--rose2)}

/* özellikler */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--wood);border:1.5px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
.card .ic{font-size:30px;line-height:1;margin-bottom:10px}
.card h4{margin:0 0 4px;font-size:21px;line-height:1.15}
.card p{margin:0;color:var(--muted);font-size:16px}

/* galeri */
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin-inline:-20px;scrollbar-width:thin}
.gallery .shot{flex:none;width:min(640px,86vw);scroll-snap-align:center}

/* kapanış */
.final{text-align:center;padding:110px 0 120px;background:radial-gradient(55% 60% at 50% 60%,#3d2311,var(--night))}
.final .duo{display:flex;justify-content:center;align-items:flex-end;gap:0;margin-bottom:6px}
.final .duo img{width:min(220px,40vw);filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
.final .duo img:last-child{transform:scaleX(-1)}

footer{border-top:1.5px solid var(--line);padding:34px 0 calc(40px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}

@media (max-width:900px){
  .sides{grid-template-columns:1fr}
  .step,.step:nth-child(even){grid-template-columns:1fr;gap:20px}
  .step:nth-child(even) .shot{order:0}
  .grid{grid-template-columns:1fr 1fr}
  section{padding:72px 0}
}
@media (max-width:560px){
  body{font-size:17px}
  .hero{padding-top:80px}
  .stores{flex-direction:column;gap:8px}
  .soon{min-height:0;padding:6px 14px;border:0}
  .side-head img{width:110px}
  .side h3{font-size:36px}
  .grid{grid-template-columns:1fr}
}
.sides>*,.step>*,.grid>*{min-width:0}