:root{--bg:#eef2f9;--ink:#1d2e54;--muted:#5d6c8f;--panel:#fff;--accent:#f59e1b;--accent-d:#c96f00;--line:#1d2e5416;--soft:#f1f4fa;--r:14px}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;color:var(--ink);font:16px/1.6 Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
background-color:var(--bg);background-image:url(/assets/pattern.svg),linear-gradient(180deg,#eaf0fa 0%,#f3f1fb 60%,#f6f3f0 100%);
background-size:900px auto,cover;background-repeat:repeat,no-repeat;background-attachment:scroll,fixed}
a{color:var(--accent-d)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* üst bar */
.top{position:sticky;top:0;z-index:20;height:62px;display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;align-items:center;gap:16px;padding:0 18px;background:#ffffffe8;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;justify-self:start;font-weight:900;font-size:26px;color:var(--ink);text-decoration:none}
.logo img{height:44px;width:auto;display:block}
.search{position:relative;width:100%}
.search input{width:100%;padding:11px 18px;border-radius:999px;border:1px solid #d6dfef;background:#f5f8fd;color:var(--ink);font:inherit}
.search input::placeholder{color:#8a97b5}
.search input:focus{border-color:var(--accent);background:#fff;outline:0}
#res{position:absolute;left:0;right:0;top:48px;background:#fff;border-radius:14px;box-shadow:0 12px 36px #1d2e5430;overflow:hidden;z-index:30}
#res a{display:flex;gap:10px;align-items:center;padding:8px 12px;color:var(--ink);text-decoration:none}
#res a:hover{background:#eef3fb}#res img{border-radius:8px;object-fit:cover}#res p{margin:0;padding:10px 12px}
.lang{display:flex;gap:8px;justify-self:end}
.lang a{display:block;width:36px;height:24px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px var(--line);opacity:.55;transition:opacity .15s}
.lang a:hover{opacity:.9}.lang a.on{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.lang svg{display:block;width:100%;height:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* yerleşim */
.shell{display:flex;align-items:flex-start}
.side{position:sticky;top:62px;flex:0 0 190px;height:calc(100vh - 62px);overflow:auto;padding:16px 12px;background:#ffffffc8;backdrop-filter:blur(6px);border-right:1px solid var(--line)}
.side a{display:flex;align-items:center;gap:12px;padding:9px 12px;margin-bottom:2px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.side a:hover{background:#e8eef9}
.side b,.tiles b{display:grid;place-items:center;width:22px;color:var(--muted)}
.side a:hover b,.tiles a:hover b{color:var(--accent)}
.content{flex:1;min-width:0;padding:0 22px}
main{padding:14px 0 30px;max-width:1280px}
/* kategori kutuları */
.tiles{display:flex;gap:8px;overflow-x:auto;padding:16px 4px 6px;margin:0 -4px;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tiles a{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.tiles a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
h1{font-size:clamp(26px,4vw,36px);line-height:1.15;margin:.3em 0;letter-spacing:-.01em}
h2{font-size:21px;margin:1.4em 0 .6em;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:4px;height:22px;border-radius:2px;background:var(--accent)}
.about h2::before{display:none}
.lead{color:var(--muted);max-width:70ch}
.sec{display:flex;justify-content:space-between;align-items:center}
.more{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.more{white-space:nowrap}
.more span{color:var(--accent);font-size:16px;line-height:1}
.more:hover{background:var(--accent);color:var(--ink)}.more:hover span{color:var(--ink)}
/* oyun kartları */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;grid-auto-flow:dense}
.card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:#dfe7f5;color:#fff;text-decoration:none;box-shadow:0 2px 10px #1d2e5420}
.card.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .t{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;font-weight:700;font-size:14px;line-height:1.25;text-shadow:0 1px 3px #000a;background:linear-gradient(transparent,#0e1733d0)}
.card.big .t{font-size:20px;padding:40px 16px 14px}
.card .pl{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:12px;opacity:0;transform:scale(.8)}
@media (prefers-reduced-motion:no-preference){.card,.card img,.card .pl,.tiles a,.more,.rb,.fav,.side a{transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #1d2e5440}.card:hover img{transform:scale(1.05)}}
.card:hover .pl,.card:focus-visible .pl{opacity:1;transform:scale(1)}
/* tek sıralı şerit */
.rail{position:relative}
.row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4px;scrollbar-width:none;padding:8px 4px 16px;margin:-8px -4px -16px}
.row::-webkit-scrollbar{display:none}
.row .card{flex:0 0 var(--cw,190px);scroll-snap-align:start}
.rb{position:absolute;top:calc(50% - 21px);z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px #1d2e5440}
.rb[hidden]{display:none}.rb:hover{background:var(--accent)}
.rb.prev{left:-14px}.rb.next{right:-14px}
/* oyun sayfası */
.crumb{font-size:14px;color:var(--muted)}.crumb a{color:var(--muted)}
.stage{width:100%;margin:0 auto}
.gh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px}
.gh h1{font-size:clamp(20px,3vw,27px);margin:0}
.fav{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.fav:hover{color:#e0457b;border-color:#e0457b}.fav.on{background:#e0457b;border-color:#e0457b;color:#fff}.fav.on svg path{fill:currentColor}
.player{position:relative;width:100%;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #1d2e5438}
.player img{width:100%;height:100%;object-fit:cover;opacity:.55;display:block}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;margin:auto;width:150px;height:52px;border:0;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:800;font-size:19px;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px #0006}
.play:hover{background:#ffb13d}
.player .fs{position:absolute;right:10px;bottom:10px;z-index:4;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:#0009;color:#fff;cursor:pointer}
.player .fs:hover{background:var(--accent);color:var(--ink)}
.player:fullscreen{width:100%;height:100%;max-width:none;aspect-ratio:auto!important;border-radius:0}
.player.pfs{position:fixed;inset:0;z-index:100;max-width:none;aspect-ratio:auto!important;border-radius:0}
.pager{display:flex;gap:10px;justify-content:center;margin:24px 0}
.pager a{background:#fff;color:var(--ink);border-radius:999px;padding:8px 20px;font-weight:600;text-decoration:none;border:1px solid var(--line)}.pager a:hover{background:var(--ink);color:#fff}
.about{overflow-wrap:anywhere;max-width:960px;margin:22px auto 0;background:#fff;border-radius:16px;padding:6px 24px 18px;box-shadow:0 2px 12px #1d2e5412}
.about .chips a{display:inline-block;margin:0 6px 6px 0;padding:4px 14px;border-radius:999px;background:var(--soft);text-decoration:none;font-size:14px;font-weight:600;color:var(--ink)}
.about .chips a:hover{background:var(--ink);color:#fff}
.list{columns:2;padding-left:18px}
/* alt bilgi */
.foot{position:relative;margin-top:96px;padding:30px 26px 34px;background:#fff;border-radius:22px 22px 0 0;color:var(--muted);font-size:14px;box-shadow:0 -6px 24px #1d2e5410}
.foot::before{content:"";position:absolute;left:0;right:0;top:-79px;height:80px;background:url(/assets/hills.svg) repeat-x center bottom/auto 100%;pointer-events:none}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:28px}
.foot h3{margin:0 0 10px;font-size:15px;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:5px 0}
.foot a{color:var(--muted);text-decoration:none}.foot a:hover{color:var(--accent-d);text-decoration:underline}
.fbrand img{height:42px;width:auto;display:block;margin-bottom:10px}.fbrand p{margin:0 0 8px}
.faq{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.faq h3{grid-column:1/-1;margin:0}
.faq details{background:var(--soft);border-radius:12px;padding:10px 14px}
.faq summary{cursor:pointer;color:var(--ink);font-weight:700}.faq p{margin:8px 0 0}
.copy{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
@media(max-width:900px){.side{display:none}.content{padding:0 12px}}
@media(max-width:800px){.fcols{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:560px){.top{padding:0 12px;grid-template-columns:auto 1fr;gap:10px}.top>span{display:none}.logo img{height:36px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.list{columns:1}
.rb{display:none}.card.big{grid-column:auto;grid-row:auto;aspect-ratio:4/3}.card.big .t{font-size:14px;padding:26px 10px 9px}}

/* sağ kenar: favoriler (tek sütun, 4 oyun, dikey kaydırma) */
.favside{position:sticky;top:78px;flex:0 0 220px;width:220px;align-self:flex-start;margin:14px 20px 0 0;padding:14px;background:#fff;border-radius:16px;box-shadow:0 2px 12px #1d2e5412}
.fh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.favside h2{margin:0;font-size:16px}.favside h2::before{height:16px}
.favside .more{padding:5px 12px;font-size:12px}
.vrow{display:flex;flex-direction:column;gap:10px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.vrow::-webkit-scrollbar{display:none}
.vrow .card{flex:0 0 auto;aspect-ratio:16/9;scroll-snap-align:start}
.vrow .card .t{font-size:12px;padding:18px 8px 6px}
.vb{display:grid;place-items:center;width:100%;height:28px;margin:0;border:0;border-radius:8px;background:var(--soft);color:var(--ink);cursor:pointer}
.vb[hidden]{display:none}.vb:hover{background:var(--accent)}.vb.up{margin-bottom:8px}.vb.down{margin-top:8px}
.fempty{margin:0;color:var(--muted);font-size:13px}
.favside:not(.empty) .fempty,.favside.empty .vrow,.favside.empty .vb{display:none}
@media(max-width:1279px){.favside{display:none}}
@media(max-width:560px){.top{grid-template-columns:auto 1fr auto}.lang a{width:30px;height:20px}}