/* Mubiplay v2: gece vitrini teması.
   site.css ve site-pro.css'ten sonra yüklenir; renkleri, yazıları ve bileşenleri üstüne yazar. */
:root{
  --night:#150f35;
  --velvet:#201750;
  --velvet-2:#2a1f63;
  --bg:var(--night);
  --paper:var(--velvet);
  --ink:#f5f1ff;
  --ink-2:#b9b0e0;
  --line:#3a2e7c;
  --grape:#8c63ff;
  --grape-edge:#4b2bb8;
  --sun:#ffd23f;
  --sun-edge:#c89400;
  --display:"Unbounded","Baloo 2",system-ui,sans-serif;
  --body:"Onest","Nunito",system-ui,sans-serif;
  color-scheme:dark;
}
body{
  background:
    radial-gradient(900px 520px at 85% -120px,rgba(140,99,255,.28),transparent 70%),
    radial-gradient(700px 480px at -10% 30%,rgba(47,125,225,.14),transparent 70%),
    var(--night);
  background-repeat:no-repeat;
  font:400 17px/1.6 var(--body);
}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.08}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
::selection{background:var(--sun);color:var(--night)}

/* header */
.top{background:rgba(21,15,53,.78);border-bottom:1px solid rgba(255,255,255,.06)}
.logo b{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;color:#fff}
.search input{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);font:500 16px var(--body)}
.search input::placeholder,.search svg{color:#8d83bd}
.search input:focus{border-color:var(--grape);background:rgba(255,255,255,.09)}
.lang{background:rgba(255,255,255,.06);border:1px solid var(--line)}
.lang button{font:700 14px var(--body);color:var(--ink-2)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--night)}

/* düğmeler: oyna = güneş sarısı */
.btn{--c:var(--sun);--e:var(--sun-edge);color:#1d1440;font:700 18px/1 var(--display);padding:16px 24px 15px;letter-spacing:-.01em}
.btn svg{margin-top:-1px}
.btn.big{font-size:20px;padding:19px 30px 18px}
.btn.small{font-size:15px;padding:12px 16px 11px}
.btn.ghost{--c:rgba(255,255,255,.08);--e:rgba(0,0,0,.35);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 0 var(--e)}
.btn.ghost:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 1px 0 var(--e)}
.btn.grape{--c:var(--grape);--e:var(--grape-edge);color:#fff}

/* ---------- hero: oyun vitrini ---------- */
.hero{position:relative;padding:56px 0 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;min-height:min(640px,78vh)}
.hero h1{font-size:clamp(38px,4.7vw,68px);line-height:1.04;letter-spacing:-.035em;max-width:12ch}
.hero .lede{margin-top:22px;font-size:20px;line-height:1.55;color:var(--ink-2);max-width:42ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero .dice svg{width:22px;height:22px}
.hero .btn.is-rolling svg{animation:roll .5s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}
.cast{display:flex;gap:10px;margin:34px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.cast a{display:block;width:52px;height:52px;border-radius:15px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.12);transition:transform .15s ease,box-shadow .15s ease}
.cast a:hover,.cast a:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 2px var(--sun)}
.cast img{width:100%;height:100%;object-fit:cover}

.wall{position:relative;height:min(640px,78vh);display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transform:rotate(-7deg) translateX(4%);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.wall .col{display:flex;flex-direction:column;gap:16px;will-change:transform}
.wall .col:nth-child(1){animation:drift-up 70s linear infinite}
.wall .col:nth-child(2){animation:drift-down 80s linear infinite;margin-top:-120px}
.wall .col:nth-child(3){animation:drift-up 90s linear infinite;margin-top:-40px}
.wall:hover .col{animation-play-state:paused}
@keyframes drift-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes drift-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall a{display:block;border-radius:18px;overflow:hidden;background:var(--velvet);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(5,2,25,.55);flex:none}
.wall img{width:100%;height:auto;display:block}
.wall a.tall img{aspect-ratio:430/700;object-fit:cover;object-position:top}
@media (prefers-reduced-motion:reduce){.wall .col{animation:none!important}}

/* ---------- öne çıkanlar ---------- */
.intro{padding:56px 0 20px}
.intro>h2{font-size:clamp(28px,3.4vw,40px)}
.intro>p{margin-top:8px;color:var(--ink-2);font-size:18px;max-width:52ch}
.spots{margin-top:56px}
.spot{
  --grape:#8c63ff;
  background:
    radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--grape) 62%,transparent),transparent 62%),
    radial-gradient(60% 80% at 0% 100%,color-mix(in srgb,var(--grape) 22%,transparent),transparent 70%),
    var(--velvet);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px rgba(5,2,25,.45);
}
.spot::before{background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 2px);background-size:24px 24px}
.spot h2{font-size:clamp(40px,5vw,66px);letter-spacing:-.035em}
.spot p{font-size:18px;color:#ddd6fb;max-width:46ch}
.spot .icon{border-radius:20px;box-shadow:0 0 0 2px rgba(255,255,255,.15),0 10px 24px rgba(0,0,0,.35)}
.facts li{background:rgba(255,255,255,.1);font-weight:600;font-size:14px;padding:6px 13px}
.screen{background:#0d0827;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 50px rgba(5,2,25,.6)}
.spot-tabs button{background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:none;font:600 15px/1 var(--display);color:var(--ink-2);padding:7px 16px 7px 7px}
.spot-tabs button span{padding-top:1px}
.spot-tabs button:hover{color:var(--ink);border-color:#5a4aa8}
.spot-tabs button[aria-selected="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:var(--ink);box-shadow:none}
.spot-tabs i{background:var(--sun);height:3px}

/* ---------- katalog ---------- */
.catalog{padding:80px 0 30px}
.catalog-head h2{font-size:clamp(30px,3.6vw,44px)}
.chips button{font:600 15px var(--body);background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-2);padding:9px 17px}
.chips button:hover{color:var(--ink);border-color:#5a4aa8}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--night)}
.grid{gap:40px 26px}
.tile{background:var(--velvet);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform .2s ease,box-shadow .2s ease}
.tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent),0 24px 50px color-mix(in srgb,var(--c) 25%,transparent)}
.tile .plate{background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 45%,#0d0827))}
.tile h3{font-size:24px;letter-spacing:-.025em}
.tile p{font-size:16px}
.tags li{background:rgba(255,255,255,.08);color:#d9d2fb;font-weight:600;font-size:13px}
.tags li.on{background:rgba(34,176,125,.18);color:#7ff0c4}
.tile .more{color:#c9b8ff;font-weight:600}
.tile.soon .plate{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px),linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 45%,#0d0827))}
.sticker{font:700 14px/1 var(--display);padding:9px 12px 8px;color:var(--night)}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}

/* ---------- adımlar ve neden ---------- */
.how h2,.parents h2{font-size:clamp(28px,3.4vw,40px)}
.steps li{background:transparent;box-shadow:none;border-top:1px solid var(--line);border-radius:0;padding:24px 4px 0}
.steps li::before{width:auto;height:auto;background:none;color:var(--sun);font:700 44px/1 var(--display);padding:0;margin-bottom:16px;place-items:start}
.steps h3{font-size:20px}
.steps p{font-size:16px}
.parents{background:linear-gradient(135deg,#2b1d6e,#1a1246);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.promise li{background:rgba(255,255,255,.06)}
.promise b{font:700 17px/1.25 var(--display)}
.promise li>span{font-size:15px}
.parents a{color:var(--sun)}

/* ---------- alt bilgi ---------- */
.foot{border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}
.foot a{font-weight:600}

/* ---------- oyun sayfaları ---------- */
.crumb a,.links a{color:#c9b8ff;font-weight:600}
.section h2{font-size:clamp(28px,3.4vw,40px)}
.shots figure{background:#0d0827;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.shots figcaption{font-weight:600;font-size:14px;color:var(--ink-2)}
.feat li,.pals li,.controls>div{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.feat b{font:700 18px/1.25 var(--display)}
.feat li>span{font-size:16px}
.pals b{font:700 15px/1.2 var(--display)}
.pals small{color:var(--ink-2);font-weight:600}
.controls h3{font-size:20px}
.controls dt{font-weight:700}
kbd{background:rgba(255,255,255,.08);border:1px solid #5a4aa8;border-bottom-width:3px;color:var(--ink);font:700 13px/1 var(--body)}
.cta-band{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px rgba(5,2,25,.45)}
.cta-band .btn{--c:var(--sun);--e:var(--sun-edge);color:#1d1440!important}
.guide-body{background:var(--velvet);border-color:var(--line)}
.guide .lead,.guide ol,.guide ul{color:var(--ink-2)}
.guide h3{color:var(--ink)}
.guide li::marker{color:var(--sun)}

/* hukuki sayfalar */
.doc a{color:#c9b8ff}
.doc .t{background:var(--velvet)}
.doc .t th{background:var(--velvet-2)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px}
  .hero h1{max-width:13ch}
  .wall{height:auto;grid-template-columns:1fr;gap:12px;transform:rotate(-4deg);margin:24px -40px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .wall{min-width:0}
  .wall .col{flex-direction:row;gap:12px;margin-top:0!important;width:max-content}
  .wall .col:nth-child(1){animation-name:drift-left}
  .wall .col:nth-child(2){animation-name:drift-right}
  .wall .col:nth-child(3){display:none}
  .wall a{width:220px}
  .wall a.tall{width:120px}
  .wall a.tall img{aspect-ratio:auto;height:174px}
  .wall a:not(.tall) img{height:174px;width:220px;object-fit:cover}
  @keyframes drift-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes drift-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
@media (max-width:620px){
  .hero{padding:28px 0 24px}
  .hero .lede{font-size:18px}
  .hero .actions .btn{flex:1 1 100%}
  .cast a{width:46px;height:46px;border-radius:13px}
  .steps li{padding-top:18px}
}

/* ---------- yan reklam alanları (160x600) ---------- */
@media (min-width:1360px) and (min-height:740px){
  body.has-rails .wrap{width:min(var(--wrap),100% - 408px)}
  body.has-rails .ad-rail{display:block;position:fixed;top:100px;z-index:5;width:160px}
  body.has-rails .ad-left{left:max(16px,calc(50% - var(--wrap)/2 - 188px));right:auto}
  body.has-rails .ad-right{right:max(16px,calc(50% - var(--wrap)/2 - 188px));left:auto}
  body.has-rails .ad-tall{width:160px;height:600px}
}
.ad-slot.house{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#0d0827),var(--velvet) 46%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.house .h-art{display:grid;place-items:end center;height:230px;padding:18px 12px 0;
  background:radial-gradient(80% 70% at 50% 40%,rgba(255,255,255,.22),transparent 70%)}
.house .h-art img{max-height:200px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.house .h-body{display:flex;flex-direction:column;gap:10px;padding:16px 14px 16px;flex:1}
.house .h-icon{width:48px;height:48px;border-radius:13px;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.house b{font:700 19px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.house p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.house .btn{margin-top:auto;align-self:stretch}
@media (min-width:1360px) and (min-height:740px){
  body.has-rails .wall{transform:rotate(-7deg)}
  body.has-rails .hero .wrap{gap:28px}
}