:root { --bg:#0b0d12; --panel:#141820; --card:#1a1f2a; --border:#262d3c; --text:#eef1f6; --muted:#9aa4b8; --red:#d6343a; --red2:#ff4d52; --gold:#e8b957; --ok:#3ccf7e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI", system-ui, sans-serif; line-height:1.55; }
a { color:#8fb8ff; text-decoration:none; }
a:hover { color:var(--red2); }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }

/* üst menü */
header { position:sticky; top:0; z-index:20; background:#0f1218; border-bottom:2px solid var(--red); }
.topbar { display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.12em; font-size:15px; color:var(--text); }
.brand img { width:34px; height:34px; }
nav.menu { display:flex; flex-wrap:wrap; gap:4px; }
nav.menu a { padding:8px 11px; border-radius:6px; font-size:13px; color:var(--muted); }
nav.menu a:hover, nav.menu a.on { background:var(--card); color:var(--text); }
nav.menu a.hl { background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff; }

/* hero */
.hero { height:300px; display:flex; align-items:center; justify-content:center; text-align:center;
  background: linear-gradient(180deg, rgba(11,13,18,.25) 0%, rgba(11,13,18,.88) 100%), url("../img/hero.jpg") center / cover no-repeat; border-bottom:1px solid var(--border); }
.hero img { width:92px; height:92px; filter: drop-shadow(0 0 22px rgba(214,52,58,.55)); }
.hero h1 { margin:10px 0 2px; font-size:clamp(32px,6vw,54px); letter-spacing:.16em; font-weight:800;
  background:linear-gradient(180deg,#fff 0%, var(--gold) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { margin:0; color:#c9d1e0; font-size:13px; letter-spacing:.18em; text-transform:uppercase; }

/* düzen */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; padding:26px 0 40px; }
.box { background:linear-gradient(180deg,var(--card),var(--panel)); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:18px; }
.box h2 { margin:0 0 12px; font-size:14px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:8px; }
.box h1.pagetitle { margin:0 0 8px; font-size:24px; letter-spacing:.06em; }
.box p.lead { margin:0; color:var(--muted); }
.muted { color:var(--muted); font-size:14px; }
.pill { display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px; background:rgba(214,52,58,.14); color:#ffb3b5; border:1px solid rgba(214,52,58,.35); }

/* kartlar ve listeler */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.card { background:#11151d; border:1px solid var(--border); border-radius:10px; padding:14px; }
.card h3 { margin:0 0 6px; font-size:16px; }
.card p { margin:0; color:var(--muted); font-size:14px; }
.card img { width:100%; height:auto; border-radius:8px; margin-bottom:8px; }
.price { color:var(--gold); font-weight:700; margin-top:8px; }
.item { padding:12px 0; border-bottom:1px solid var(--border); }
.item:last-child { border-bottom:none; }
.item time { color:var(--gold); font-size:12px; }
.item h3 { margin:4px 0 2px; font-size:16px; }
.item p { margin:0; color:var(--muted); font-size:14px; }

/* butonlar */
.btn { display:inline-block; padding:10px 16px; border-radius:8px; font-weight:700; font-size:13px; border:1px solid var(--border); background:#11151d; color:var(--text); cursor:pointer; }
.btn:hover { background:#1c2330; color:var(--text); }
.btn.primary { background:linear-gradient(135deg,var(--red),var(--red2)); border-color:transparent; color:#fff; }
.btn.danger { background:#2a1416; border-color:var(--red); color:#ffc4c7; }

/* formlar */
label { display:block; margin:10px 0 4px; font-size:13px; color:var(--muted); }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], textarea, select {
  width:100%; padding:10px 12px; background:#0f131a; color:var(--text); border:1px solid var(--border); border-radius:8px; font:inherit; }
textarea { min-height:120px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(214,52,58,.25); }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:14px; background:#13261c; color:#b7f0cf; border:1px solid #2e6a48; }
.error { padding:10px 14px; border-radius:8px; margin-bottom:14px; background:#2a1416; color:#ffc4c7; border:1px solid var(--red); }

/* tablo (yönetim) */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:9px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
td.actions { white-space:nowrap; }
td.actions a { margin-right:10px; }

/* yönetim paneli yerleşimi */
.admin { display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; padding:26px 0 40px; }
.admin aside a { display:block; padding:9px 12px; border-radius:6px; color:var(--muted); font-size:14px; }
.admin aside a:hover, .admin aside a.on { background:var(--card); color:var(--text); }
.admin aside .sect { margin:14px 0 4px 12px; font-size:11px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; }

footer { border-top:1px solid var(--border); background:#0f1218; padding:22px 0; color:var(--muted); font-size:13px; text-align:center; margin-top:20px; }

@media (max-width:900px) {
  .layout, .admin { grid-template-columns:1fr; }
  .hero { height:220px; }
}

/* ---- koyu oyun sitesi üst menüsü (açılır kategoriler) ---- */
header.gm-top { position:sticky; top:0; z-index:30; background:linear-gradient(180deg,#0c0f15,#10141c); border-bottom:2px solid var(--red); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.gm-bar { display:flex; align-items:center; justify-content:space-between; height:62px; gap:14px; }
.gm-brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.14em; font-size:15px; color:var(--text); }
.gm-brand img { width:34px; height:34px; }
.gm-burger { display:none; background:none; border:0; color:var(--text); font-size:20px; cursor:pointer; }
.gm-nav { display:flex; align-items:center; gap:4px; }
.gm-nav > a, .gm-drop-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; color:#c7cfdd; font-size:13px; text-transform:uppercase; letter-spacing:.06em; border-radius:6px; background:none; border:0; cursor:pointer; font-family:inherit; }
.gm-nav > a:hover, .gm-drop-btn:hover, .gm-nav > a.on, .gm-drop.on > .gm-drop-btn { color:#fff; background:#1a2030; text-decoration:none; }
.gm-nav > a.gm-hl { background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff; }
.gm-drop { position:relative; }
.gm-drop-menu { display:none; position:absolute; top:100%; left:0; min-width:220px; background:#141a25; border:1px solid var(--border); border-radius:8px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.gm-drop:hover .gm-drop-menu, .gm-drop.open .gm-drop-menu { display:block; }
.gm-drop-menu a { display:flex; align-items:center; gap:9px; padding:9px 12px; color:#c7cfdd; font-size:13.5px; border-radius:6px; }
.gm-drop-menu a:hover { background:#1f2738; color:#fff; text-decoration:none; }
.gm-drop-menu a i { color:var(--gold); width:16px; text-align:center; }

/* slider (ana sayfa) */
.slider { position:relative; height:420px; overflow:hidden; border-bottom:1px solid var(--border); }
.slider .slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s; display:flex; align-items:flex-end; }
.slider .slide.on { opacity:1; }
.slider .slide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,13,18,.1),rgba(11,13,18,.92)); }
.slider .cap { position:relative; z-index:2; padding:0 22px 40px; max-width:1180px; margin:0 auto; width:100%; }
.slider .cap h1 { margin:0 0 6px; font-size:clamp(28px,4.5vw,46px); letter-spacing:.08em; }
.slider .cap p { margin:0; color:#d4dbe8; }

/* etkinlik saatleri */
.ev-next { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.ev-next-item { background:#11151d; border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:3px; }
.ev-next-item.first { border-color:var(--red); box-shadow:0 0 0 1px rgba(214,52,58,.35) inset; }
.ev-next-item b { font-size:15px; }
.ev-time { color:var(--gold); font-size:13px; }
.ev-cd { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.ev-table td { padding:7px 8px; }
.ev-table td.ev-hm { width:70px; color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.ev-hours { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; }
.ev-hours span { background:#0f131a; border:1px solid var(--border); border-radius:6px; padding:2px 8px; font-size:13px; color:var(--gold); font-variant-numeric:tabular-nums; }
.card p.ev-days, p.ev-days { margin:0 0 6px; font-size:13px; color:var(--muted); }
.ev-side { display:flex; flex-direction:column; padding:8px 0; border-bottom:1px solid var(--border); }
.ev-side:last-of-type { border-bottom:none; }
.ev-side span { font-size:13px; color:var(--gold); }
.ev-side .ev-cd { color:var(--muted); }

/* rehber */
.steps { margin:0; padding-left:22px; }
.steps li { margin:6px 0; color:#d4dbe8; }
.guide-toc { display:flex; flex-wrap:wrap; gap:8px; }
.guide-toc a { padding:6px 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; color:#c7cfdd; background:#11151d; }
.guide-toc a:hover { border-color:var(--red); color:#fff; }
.guide-sec { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; align-items:center; scroll-margin-top:80px; }
.guide-sec.alt .guide-img { order:2; }
.guide-sec h3 { margin:0 0 8px; font-size:20px; color:var(--gold); }
.guide-sec p { margin:0; color:#d4dbe8; }
.guide-img img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--border); }
a.card { display:block; color:var(--text); }
a.card:hover { border-color:var(--red); color:var(--text); }
.dl-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.dl-btn { font-size:16px; padding:14px 26px; }

/* üst menü: giriş / kayıt */
.gm-auth { display:inline-flex; align-items:center; gap:6px; margin-left:10px; padding-left:12px; border-left:1px solid var(--border); }
.gm-auth a { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; border-radius:6px; color:#c7cfdd; }
.gm-auth a.gm-login { border:1px solid var(--border); }
.gm-auth a.gm-login:hover, .gm-auth a.gm-acc:hover, .gm-auth a.on { color:#fff; background:#1a2030; }
.gm-auth a.gm-hl { background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff; }
.gm-auth a.gm-hl:hover { filter:brightness(1.1); color:#fff; }
.gm-auth a.gm-acc { color:var(--gold); border:1px solid rgba(232,185,87,.35); }
/* kayıt / giriş formu */
.auth-wrap { max-width:560px; padding:30px 20px 40px; }
.auth-box h1.pagetitle { margin-bottom:12px; }
.auth-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:900px) {
  .gm-auth { margin:8px 0 0; padding:8px 0 0; border-left:0; border-top:1px solid var(--border); flex-wrap:wrap; }
  .auth-row { grid-template-columns:1fr; }
}

/* ana sayfa: indir butonu + sıralama */
.hero-cta { position:absolute; z-index:3; right:max(22px, calc((100% - 1180px) / 2 + 22px)); bottom:40px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hero-cta .dl-btn { font-size:18px; padding:16px 32px; box-shadow:0 8px 24px rgba(214,52,58,.45); letter-spacing:.04em; }
.hero-cta .dl-btn:hover { color:#fff; filter:brightness(1.1); }
.hero-cta-sub { font-size:13px; color:#d4dbe8; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.rank-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.rank-title { margin:0 0 8px; font-size:15px; color:var(--text); }
.rank-title i { color:var(--gold); margin-right:4px; }
.rank-table td, .rank-table th { padding:7px 6px; }
.rank-table td { font-variant-numeric:tabular-nums; }
.rank-no { width:28px; color:var(--muted); font-weight:700; }
.rank-no.r1 { color:var(--gold); } .rank-no.r2 { color:#cfd6e2; } .rank-no.r3 { color:#d08b55; }
.rank-sub { display:block; font-size:12px; color:var(--muted); font-weight:400; }
.nat { font-size:12px; padding:1px 8px; border-radius:999px; white-space:nowrap; border:1px solid var(--border); }
.nat.n1 { color:#ffb3b5; border-color:rgba(214,52,58,.45); background:rgba(214,52,58,.12); }
.nat.n2 { color:#a9c8ff; border-color:rgba(90,140,230,.45); background:rgba(90,140,230,.12); }
@media (max-width:900px) {
  .rank-grid { grid-template-columns:1fr; }
  .hero-cta { left:22px; right:22px; bottom:auto; top:22px; align-items:flex-start; }
}

@media (max-width:900px) {
  .guide-sec { grid-template-columns:1fr; }
  .guide-sec.alt .guide-img { order:0; }
  .gm-burger { display:block; }
  .gm-nav { display:none; position:absolute; left:0; right:0; top:62px; flex-direction:column; align-items:stretch; background:#0f131b; padding:8px 14px 16px; border-bottom:1px solid var(--border); }
  .gm-nav.open { display:flex; }
  .gm-drop-menu { position:static; box-shadow:none; border:0; background:transparent; }
  .gm-drop:hover .gm-drop-menu { display:none; }
  .gm-drop.open .gm-drop-menu { display:block; }
  .slider { height:300px; }
}