/* Beral Games sitesi: koyu oyun portalı. Renkler ve ölçüler yalnız :root'ta. */
:root{
  --bg:#0e1020; --panel:#171a2e; --panel-2:#21253d; --panel-3:#2b3050;
  --text:#f4f5fa; --soft:#d6d8e6; --muted:#a3a8c3; --accent:#ffb52e; --accent-2:#ffcb5c; --accent-ink:#1d1300;
  --teal:#2ee6c5; --pink:#ff5d8f; --blue:#5b8cff; --green:#7ee36b; --violet:#a98bff; --orange:#ff8a3d;
  --r:16px; --r-s:12px; --rail:76px; --top:68px; --gut:28px;
  --font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:600 16px/1.5 var(--font)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
svg.i{width:24px;height:24px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* üst çubuk */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:30;background:var(--bg);display:flex;align-items:center;gap:16px;padding:0 20px 0 14px}
.burger{width:48px;height:48px;border:0;background:none;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none}
.burger:hover{background:var(--panel)}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;line-height:.95;white-space:nowrap}
.logo img{width:40px;height:40px}
.logo small{display:block;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.02em;margin-top:3px}
.search{flex:1;max-width:560px;margin:0 auto;position:relative}
.search input{width:100%;height:46px;border:0;border-radius:999px;background:var(--panel-2);color:var(--text);font:700 16px var(--font);padding:0 52px 0 22px;outline:none;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted)}
.search input:focus{box-shadow:0 0 0 2px var(--accent)}
.search input::-webkit-search-cancel-button{display:none}
.search>svg{position:absolute;right:16px;top:11px;color:var(--muted);pointer-events:none}
.search .sbtn{display:none;width:46px;height:46px;border-radius:999px;border:0;background:var(--panel-2);place-items:center;cursor:pointer}
.results{position:absolute;left:0;right:0;top:54px;background:var(--panel-2);border-radius:var(--r);padding:8px;display:none;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.results.on{display:block}
.results a,.results .row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px}
.results a:hover,.results a:focus-visible{background:var(--panel-3)}
.results img,.results svg{width:72px;height:auto;aspect-ratio:16/9;border-radius:8px;object-fit:cover;flex:none}
.results b{display:block}
.results span{color:var(--muted);font-size:14px}
.results .none{padding:10px;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:900;font-size:16px;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background-color .15s ease}
.cta:hover{background:var(--accent-2);transform:translateY(-1px)}
.cta:active{transform:scale(.97)}
.cta.ghost{background:var(--panel-2);color:var(--text)}
.cta.ghost:hover{background:var(--panel-3)}

/* sol kenar menüsü */
.rail{position:fixed;top:var(--top);left:0;bottom:0;width:var(--rail);z-index:25;background:var(--bg);padding:8px 10px 20px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;transition:width .2s ease}
.rail a{display:flex;align-items:center;gap:14px;height:48px;padding:0 16px;border-radius:12px;color:var(--muted);font-weight:800;white-space:nowrap;overflow:hidden}
.rail a:hover{background:var(--panel);color:var(--text)}
.rail a[aria-current]{background:var(--panel-2);color:var(--text)}
.rail a span{opacity:0;transition:opacity .15s ease}
.rail .sep{height:2px;background:var(--panel);margin:10px 8px;border-radius:2px}
body.open .rail{width:248px;box-shadow:12px 0 40px rgba(0,0,0,.4)}
body.open .rail a span{opacity:1}
.ic-home{color:var(--text)} .ic-all{color:var(--accent)} .ic-5-dakikalik{color:var(--orange)} .ic-hayatta-kalma{color:var(--pink)}
.ic-bulmaca{color:var(--violet)} .ic-rahatlatici{color:var(--teal)} .ic-telefonda{color:var(--green)} .ic-info{color:var(--blue)}

main{margin-left:var(--rail);padding:calc(var(--top) + 12px) var(--gut) 0 20px;min-height:100vh}
.sec{margin-top:44px}
.sec>h2{font-size:28px;margin-bottom:16px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.sec>h2 small{font-size:15px;color:var(--muted);font-weight:800}
.hello{font-size:22px;margin:4px 0 16px}
.hello span{display:block;font-size:16px;font-weight:700;color:var(--muted);margin-top:2px}

/* oyun kutusu */
.tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--panel);isolation:isolate;transition:transform .18s ease,box-shadow .18s ease}
.tile>img,.tile>svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
a.tile:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--accent),0 14px 30px rgba(0,0,0,.4)}
a.tile:hover>img,a.tile:hover>svg{transform:scale(1.04)}
.tile .name{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-weight:900;font-size:18px;background:linear-gradient(transparent,rgba(8,9,20,.9));opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.tile:hover .name,.tile:focus-visible .name{opacity:1;transform:none}
.tile .name small{display:block;font-size:14px;font-weight:700;color:var(--soft)}
.tag{position:absolute;top:10px;left:10px;z-index:2;font-size:13px;font-weight:900;padding:5px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.tag.soon{background:rgba(14,16,32,.88);color:var(--text)}
.tag.new{background:var(--teal);color:#062a24}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.grid .tile{aspect-ratio:16/9}
.next{aspect-ratio:16/9;border-radius:var(--r);border:2px dashed var(--panel-3);display:grid;place-content:center;text-align:center;color:var(--muted);padding:16px;gap:4px}
.next b{color:var(--text);font-size:18px}

/* kategori kutuları */
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cat{position:relative;height:124px;border-radius:var(--r);padding:16px;display:flex;align-items:flex-end;overflow:hidden;font-weight:900;font-size:19px;line-height:1.15;
  background:linear-gradient(135deg,var(--c1),var(--c2));transition:transform .18s ease,box-shadow .18s ease}
.cat svg{position:absolute;right:12px;top:12px;width:58px;height:58px;color:var(--fg);transform:rotate(-8deg);transition:transform .25s ease}
.cat span{color:var(--fg);max-width:70%}
.cat:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--fg)}
.cat:hover svg{transform:rotate(4deg) scale(1.08)}
.cat[aria-current]{box-shadow:0 0 0 2px var(--fg)}
.k-5-dakikalik{--c1:#3a2410;--c2:#20172a;--fg:#ff9a4d}.k-hayatta-kalma{--c1:#3d1426;--c2:#1d1730;--fg:#ff6f9c}
.k-bulmaca{--c1:#2a1f4d;--c2:#191a33;--fg:#b59cff}.k-rahatlatici{--c1:#0f3a3a;--c2:#151d33;--fg:#3ff0cf}
.k-telefonda{--c1:#1d3a1a;--c2:#17202e;--fg:#8ff27c}

/* ana sayfa: öne çıkanlar */
.feat{display:grid;grid-template-columns:2fr 1fr 1.05fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:min(31vw,520px);min-height:380px}
.feat .big{grid-row:1/3}
.feat .big>img{object-position:0 50%}
.feat .big .name{opacity:1;transform:none;background:none;left:auto;padding:18px;display:flex;align-items:center;gap:12px}
.feat .big .name small{font-size:15px;font-weight:800;color:var(--text);background:rgba(14,16,32,.88);border-radius:999px;padding:8px 14px}
.why{grid-column:3;grid-row:1/3;background:var(--panel);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.why h2{font-size:24px}
.why ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.why li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.why li b{display:block;color:var(--text)}
.why li svg{width:34px;height:34px;padding:6px;border-radius:10px;background:var(--panel-2);color:var(--accent)}
.why .cta{margin-top:auto;align-self:flex-start}
.strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--panel-3) transparent}
.strip img{flex:0 0 auto;width:min(420px,78vw);min-width:0;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);scroll-snap-align:start}

/* oyun sayfası */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.player{background:var(--panel);border-radius:var(--r);overflow:hidden}
.frame{position:relative;aspect-ratio:16/9;max-height:calc(100vh - var(--top) - 110px);width:100%;background:#000}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame:fullscreen{max-height:none}
.pbar{display:flex;align-items:center;gap:14px;padding:12px 14px}
.pbar img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.pbar h1{font-size:22px}
.pbar p{color:var(--muted);font-size:14px}
.pbar .sp{flex:1}
.pbar .alone{color:var(--muted);font-size:14px;font-weight:800}
.pbar .alone:hover{color:var(--text)}
.iconbtn{width:44px;height:44px;border-radius:12px;border:0;background:var(--panel-2);display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease;flex:none}
.iconbtn:hover{background:var(--panel-3)}
.side h2{font-size:20px;margin:2px 0 12px}
.side .list{display:grid;gap:12px}
.side .tile{aspect-ratio:16/9}
.info{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin-top:20px}
.box{background:var(--panel);border-radius:var(--r);padding:24px}
.box h2{font-size:24px;margin-bottom:12px}
.box p{color:var(--soft);max-width:62ch}
.box p+p{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips a,.chips span{background:var(--panel-2);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:800;color:var(--muted)}
.chips a:hover{color:var(--text);background:var(--panel-3)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;margin:0}
.keys dt{font-weight:900;background:var(--panel-2);border-radius:10px;padding:6px 12px;justify-self:start;min-width:64px;text-align:center}
.keys dd{margin:0;color:var(--soft)}
.feats{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feats li{background:var(--panel-2);border-radius:var(--r-s);padding:14px}
.feats b{display:block;font-size:17px}
.feats span{color:var(--muted);font-size:15px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.shots img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-s);width:100%}
.note{color:var(--muted);font-size:14px;margin-top:14px}

/* ipuçları ve sık sorulanlar */
.tips{margin:0;padding-left:1.3em;display:grid;gap:10px;color:var(--soft)}
.tips li::marker{color:var(--accent);font-weight:900}
.faq{display:grid;gap:8px}
.faq details{background:var(--panel-2);border-radius:var(--r-s);padding:0 16px}
.faq summary{cursor:pointer;font-weight:800;padding:13px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:900;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 14px}
.sec.box{max-width:none}
.sec.box p{max-width:80ch}
.sec.box a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* kategori ve yazı sayfaları */
.phead{padding:20px 0 4px}
.phead h1{font-size:clamp(30px,3.4vw,44px)}
.phead p{color:var(--muted);font-size:17px;margin-top:6px;max-width:62ch}
.text{max-width:760px;background:var(--panel);border-radius:var(--r);padding:clamp(22px,3vw,36px);margin-top:20px}
.text h1{font-size:clamp(30px,3.4vw,40px);margin-bottom:14px}
.text h2{font-size:21px;margin:24px 0 6px}
.text p{color:var(--soft)}
.text p+p{margin-top:10px}
.text a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.nf{text-align:center;padding:12vh 0 4vh}
.nf h1{font-size:clamp(34px,4vw,52px)}
.nf p{color:var(--muted);margin:10px 0 22px}

/* reklam yerleri: içerikten net ayrı */
.ad{background:var(--panel);border-radius:var(--r);padding:8px;min-height:100px}
.ad.wide{margin-top:44px}
.ad.side{margin-top:16px;min-height:250px}

/* alt bilgi */
.foot{margin:72px 0 0 var(--rail);padding:40px var(--gut) 36px 20px;background:var(--panel);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;color:var(--muted);font-size:15px}
.foot b{display:block;color:var(--text);font-weight:900;margin-bottom:8px}
.foot a{display:block;padding:3px 0}
.foot a:hover{color:var(--text)}
.foot .about p{max-width:42ch;margin-top:10px}
.foot .legal{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;border-top:2px solid var(--panel-2);padding-top:18px}

@media (max-width:1100px){
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feat{grid-template-columns:2fr 1fr;grid-template-rows:none;height:auto;min-height:0}
  .feat>a:not(.big){aspect-ratio:16/9}
  .why{grid-column:1/-1;grid-row:auto}
  .layout{grid-template-columns:1fr}
  .side .list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .info{grid-template-columns:1fr}
}
@media (max-width:900px){
  .rail{width:0;padding-left:0;padding-right:0}
  body.open .rail{width:248px;padding:8px 10px 20px}
  main{margin-left:0;padding:calc(var(--top) + 8px) 16px 0}
  .foot{margin-left:0;grid-template-columns:1fr 1fr;padding:32px 16px}
  .foot .about{grid-column:1/-1}
  .top{gap:10px;padding:0 12px 0 6px}
  .logo small{display:none}
  .top .cta .long{display:none}
  .top .cta{padding:0 16px}
}
@media (max-width:640px){
  .search{flex:0;margin-left:auto;position:static}
  .search input,.search>svg{display:none}
  .search.on{position:absolute;left:8px;right:8px;top:11px;max-width:none;z-index:2}
  .search.on input{display:block}
  .search.on .sbtn{display:none}
  .search .sbtn{display:grid}
  .results{top:56px}
  .logo{font-size:18px}
  .cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
  .cat{flex:0 0 42%;height:104px;font-size:17px;scroll-snap-align:start}
  .cat svg{width:44px;height:44px}
  .feat{grid-template-columns:1fr}
  .feat .big{grid-row:auto;aspect-ratio:16/9}
  .feat .big .name{display:none}
  .sec>h2{font-size:23px}
  .frame{aspect-ratio:auto;height:calc(100svh - var(--top) - 150px);max-height:none}
  .pbar img,.pbar .alone{display:none}
  .feats{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}