:root{
  --bg:#0b1020;
  --card:#111834;
  --text:#e9ecf8;
  --muted:#9aa3c7;
  --accent:#7aa2ff;
  --chip:#1a2244;
  --chip-border:#2a3564;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.container{max-width:1680px;margin:0 auto;padding:16px}
.header{
  display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 16px;
}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:36px;height:36px;border-radius:8px}
.brand h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.input{ background:var(--card); border:1px solid #1f274a; color:var(--text); padding:10px 12px; border-radius:10px; min-width:260px; outline:none; }outline:none;
}
.select{appearance:none}
.button{
  background:var(--accent);border:none;color:#0a1020;padding:10px 14px;border-radius:10px;
  font-weight:700;cursor:pointer;transition:transform .05s;
}
.button:active{transform:scale(.98)}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:12px}




.card{
  background:var(--card);border:1px solid #1f274a;border-radius:14px;overflow:hidden;display:flex;flex-direction:column
}
.thumb{aspect-ratio:1/1;width:100%;object-fit:cover;background:#0e1530}
.card-body{padding:10px;display:flex;gap:8px;flex-direction:column}
.title{font-size:14px;line-height:1.2;margin:0;font-weight:700}
.meta{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-size:11px;padding:4px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-border);color:var(--muted)
}
.play{margin-top:auto}
.small{font-size:12px;color:var(--muted)}
.footer{opacity:.7;text-align:center;padding:24px 8px}
/* Game page */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.player{
  position:relative;background:#000;border-radius:16px;border:1px solid #1f274a;overflow:hidden
}
.player iframe{width:100%;height:68vh;border:0;display:block;background:#000}
.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:linear-gradient(180deg, rgba(10,16,32,.8), rgba(10,16,32,.9))
}
.bigbtn{
  background:var(--accent);color:#0a1020;border:0;border-radius:14px;padding:14px 18px;font-weight:900;font-size:18px;cursor:pointer
}
.ad-slot{width:100%;max-width:970px;margin:0 auto}
.ad-placeholder{border:1px dashed #2b396b;border-radius:12px;height:250px;align-items:center;justify-content:center;color:var(--muted);background:#0f1736}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.breadcrumbs{color:var(--muted);font-size:13px}
.link{color:var(--accent);text-decoration:none}

.btn-row{display:flex;gap:8px;align-items:center}
.btn-ghost{background:transparent;border:1px solid #2a3564;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.btn-ghost:active{transform:scale(.98)}
    
#intro{margin:6px 0 4px;color:var(--muted)}

.title{color:var(--accent);text-decoration:none;cursor:pointer;display:block;font-weight:700}
.title:hover{text-decoration:underline}

@media (max-width: 1600px){ .grid{grid-template-columns:repeat(9,1fr)} }
@media (max-width: 1440px){ .grid{grid-template-columns:repeat(8,1fr)} }
@media (max-width: 1200px){ .grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width: 992px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns:repeat(2,1fr)} }

.catbar{display:flex;gap:8px;align-items:center;overflow:auto;padding:8px 0 6px;margin-bottom:8px}
.catbtn{white-space:nowrap;background:var(--chip);border:1px solid var(--chip-border);color:var(--text);
  padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700}
.catbtn:hover{opacity:.9}
.catbtn.active{background:var(--accent);color:#0a1020;border-color:transparent}
.controls-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.controls-bottom{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.hide{display:none!important}

.section-title{margin:10px 0 8px;font-size:16px;opacity:.9}

.top-nav{display:flex;gap:16px;justify-content:center;padding:8px 0;flex-wrap:wrap}
.top-nav a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.top-nav a:hover{text-decoration:underline}




.divider{height:1px;background:#1f274a;border:0;margin:6px 0}
/* spacing between header nav and category bar */
.header-stack{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}


.main-nav a { color: #ffffff; text-decoration:none; font-weight:800; font-size: 20px;
  padding: 12px 18px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.main-nav a:hover {
  background: #1e2c58;
  text-decoration: none;
}

/* Make main nav span full container width, aligned with grid */

.header-stack{width:100%}

.controls-bottom{margin-top:10px}

.header .main-nav{
  display:flex;
  justify-content:center !important;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  float:none !important;       /* sağa yaslayan eski kuralı susturur */
  margin:0 auto !important;
  width:100%;
}
.main-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  padding: 12px 18px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.main-nav a:hover {
  background: #1e2c58;
  text-decoration: none;
}


/* === IFRAME-native fullscreen: cover entire screen === */
#gameframe:fullscreen,
#gameframe:-webkit-full-screen,
#gameframe:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Retro-Bowl-36 premium brand layer */
:root{--io-cyan:#22d3ee;--io-blue:#2563eb;--io-purple:#7c3aed;--io-dark:#070b18;}
body{background:radial-gradient(circle at top left,rgba(34,211,238,.16),transparent 34%),radial-gradient(circle at top right,rgba(124,58,237,.14),transparent 32%),#070b18;}
.main-nav a:hover,.footer a:hover{color:var(--io-cyan)!important}.section-title{letter-spacing:.02em}.grid a,.card{transition:transform .2s ease,box-shadow .2s ease}.grid a:hover,.card:hover{transform:translateY(-3px)}
.seo-article a{color:#67e8f9;font-weight:700}.seo-article h1,.seo-article h2{color:#f8fafc}.seo-article h3{color:#bae6fd}.bigbtn,.button{background:linear-gradient(135deg,#0891b2,#2563eb,#7c3aed)!important;color:#fff!important;border:0!important}

/* Retro-Bowl-36 theme v2: gridiron green + gold */
:root{
  --bg:#07140d;--card:#0f2418;--text:#f4f7ee;--muted:#9fb8a4;
  --accent:#f5b82e;--chip:#143222;--chip-border:#245a3a;
  --io-cyan:#f5b82e;--io-blue:#d97706;--io-purple:#16a34a;--io-dark:#07140d;
}
body{
  background:
    radial-gradient(circle at top left,rgba(245,184,46,.14),transparent 34%),
    radial-gradient(circle at top right,rgba(34,197,94,.14),transparent 32%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 60px,transparent 60px 120px),
    #07140d !important;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
.container{max-width:1500px}
.header{background:linear-gradient(135deg,#0f2f1d,#123d26);border:1px solid #245a3a;border-radius:18px;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.brand h1{color:#f5b82e;text-transform:uppercase;letter-spacing:1.5px}
.brand img{border-radius:50%;border:2px solid #f5b82e}
.main-nav a{font-size:16px;color:#f4f7ee}
.main-nav a:hover{background:#f5b82e!important;color:#07140d!important}
.input{background:#0b1d12;border:1px solid #245a3a;border-radius:999px}
.input:focus{border-color:#f5b82e;box-shadow:0 0 0 3px rgba(245,184,46,.2)}
.button,.bigbtn{background:linear-gradient(135deg,#f5b82e,#d97706)!important;color:#1a1204!important;border-radius:999px;box-shadow:0 3px 10px rgba(217,119,6,.35)}
.catbtn{background:#0f2f1d;border-color:#245a3a;color:#e9f3e4}
.catbtn:hover{border-color:#f5b82e}
.catbtn.active{background:#f5b82e;color:#07140d}
.card{background:#0f2418;border:1px solid #245a3a;border-radius:16px}
.card:hover,.grid a:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 1px #f5b82e}
.title{color:#f5b82e}
.section-title{color:#f5b82e;font-size:20px;text-transform:uppercase;letter-spacing:1px;border-left:4px solid #f5b82e;padding-left:10px}
.player,#gameframe{border-color:#245a3a!important}
.overlay,#overlay{background:rgba(7,20,13,.88)!important}
.seo-article{background:rgba(15,36,24,.7)!important;border-color:#245a3a!important}
.seo-article a{color:#f5b82e}.seo-article h3{color:#9fe0b0}
.footer{border-top:1px solid #245a3a;margin-top:24px}
.divider{background:#245a3a}
.brand img,.hero img,header img[alt*="logo"]{border-radius:50%}

/* Hero */
.hero{display:flex;align-items:center;gap:28px;padding:32px 36px;margin:8px 0 14px;border-radius:22px;border:1px solid #245a3a;
  background:linear-gradient(120deg,rgba(245,184,46,.18),rgba(22,163,74,.22) 55%,rgba(15,47,29,.9));box-shadow:0 10px 30px rgba(0,0,0,.4);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(245,184,46,.25),transparent 70%)}
.hero-logo{width:110px;height:110px;border-radius:50%;border:3px solid #f5b82e;box-shadow:0 0 0 6px rgba(245,184,46,.15),0 8px 20px rgba(0,0,0,.5);flex:none;object-fit:cover}
.hero-text{position:relative;z-index:1}
.hero-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#07140d;background:#f5b82e;padding:4px 12px;border-radius:999px}
.hero h1{margin:10px 0 6px;font-size:44px;line-height:1.05;font-weight:900;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#f5b82e);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0 0 14px;color:#cfe3d3;max-width:620px;font-size:16px}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap}
.hero-badges span{font-size:12px;font-weight:700;color:#e9f3e4;border:1px solid #2f7a4c;background:rgba(7,20,13,.5);padding:5px 12px;border-radius:999px}
.controls-bottom{background:#0f2418;border:1px solid #245a3a;border-radius:16px;padding:12px;margin:0 0 12px}
.controls-bottom .input{flex:1;min-width:200px}
@media (max-width:640px){.hero{flex-direction:column;text-align:center;padding:24px 18px}.hero h1{font-size:32px}.hero p{margin-left:auto;margin-right:auto}.hero-badges{justify-content:center}}