:root{--bg:#f9fafb;--card:#ffffff;--line:#e5e7eb;--text:#111827;--muted:#6b7280;--accent:#ef4444}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit}img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.topbar{background:#fff;border-bottom:1px solid var(--line);font-size:14px}.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:8px 16px}
header .header-wrap{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:44px;height:44px;border-radius:10px;border:1px solid var(--line)}
h1{font-size:20px;margin:0}
.nav{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:10px 0}
.nav a{padding:8px 12px;border-radius:10px;text-decoration:none;background:#fff;border:1px solid var(--line)}
.main{display:grid;grid-template-columns:1fr 320px;gap:16px;margin:12px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pad{padding:16px}
.section{margin:10px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.main{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.hero .badge{background:var(--accent);color:#fff;padding:2px 8px;border-radius:999px;font-size:12px}
.meta{color:var(--muted);font-size:13px}
.article .thumb{height:160px;background:#f3f4f6}
.article .thumb img{width:100%;height:100%;object-fit:cover}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid var(--line);text-decoration:none;color:inherit}
/* Full width ad (black bar) */
.ad-full{width:100%;height:120px;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:10px 0;background:#fff}
.ad-full-black{background:#111827;color:#fff;border-color:#111827}
/* Side ads (left/right), JS aligns top between sections */
.side-ad{position:fixed;width:300px;height:250px;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;z-index:50}
.side-ad.left{left:20px}.side-ad.right{right:20px}
@media (max-width:1400px){.side-ad{display:none}}
footer{margin:20px 0}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}
.btn{background:var(--accent);color:#fff;border:0;padding:8px 14px;border-radius:10px;cursor:pointer}
.btn.secondary{background:#111827}

/* === HentbolKolik Kırmızı Gradyan Header/Nav === */
header .header-wrap{padding:18px 0}
.nav-gradient{background:linear-gradient(90deg,#c40000 0%, #ef4444 50%, #ff6b6b 100%);border-radius:14px;padding:10px 12px;border:1px solid rgba(255,255,255,0.18);box-shadow:0 8px 20px rgba(0,0,0,0.08);margin-top:4px}
.nav-gradient .nav a{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:#fff}
.nav-gradient .nav a:hover{background:rgba(255,255,255,0.22)}
/* Mobile visible side-ads */
@media (max-width:1200px){
  .side-ad{position:static !important; width:90vw; max-width:360px; aspect-ratio:6/5; height:auto; margin:8px 0}
  .side-ads-mobile{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0 16px}
}
@media (max-width:600px){.side-ads-mobile{flex-direction:column; align-items:center}}
/* Köşe Yazıları revamp */
.widget h4{margin:12px 16px 6px}
.columns-list{list-style:none;margin:0;padding:8px 12px}
.columns-item{display:flex;gap:10px;align-items:center;padding:8px 8px;border-radius:12px;transition:.2s border-color,.2s background;border:1px solid var(--line)}
.columns-item:hover{background:#fafafa}
.columns-item .avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.columns-item .meta-wrap{display:flex;flex-direction:column;gap:2px}
.columns-item .title{font-size:14px;font-weight:700;line-height:1.25;margin:0;text-decoration:none;color:inherit}
.columns-item .author{font-size:12px;color:var(--muted)}

/* Article body layout */
.article-media iframe, .article-media img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.article-content p{line-height:1.65}
.article-content img{max-width:100%;border-radius:12px;border:1px solid var(--line)}

/* Tables for fixtures/standings */
.tbl{width:100%;border-collapse:separate;border-spacing:0 6px}
.tbl th{font-size:13px;color:var(--muted);text-align:left;padding:6px 8px}
.tbl td{background:#fff;border:1px solid var(--line);padding:8px;border-left:none;border-right:none}
.tbl tr td:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px}
.tbl tr td:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0}
.badge-league{display:inline-block;padding:2px 8px;border-radius:999px;background:#f3f4f6;border:1px solid var(--line);font-size:12px;margin-left:6px}

/* Dropdown for Alt Ligler */
.nav .dropdown{position:relative}
.nav .dropdown > a:after{content:'▾'; margin-left:6px; font-size:12px}
.nav .dropdown-menu{display:none; position:absolute; left:0; top:100%; min-width:180px; background:#ffffff; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:8px; z-index:60}
.nav .dropdown-menu a{display:block; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); margin:4px 0}
.nav .dropdown-menu a:hover{background:#f9fafb}
.nav .dropdown:hover .dropdown-menu{display:block}
/* Ensure dropdown is visible over gradient container */
.nav-gradient{position:relative; overflow:visible}

/* Touch-friendly dropdown */
.nav .dropdown:focus-within .dropdown-menu{display:block}
.nav .dropdown > a{position:relative; padding-right:22px}
.nav .dropdown > a .caret{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px}
@media (max-width:900px){
  .nav{gap:8px}
  .nav .dropdown-menu{position:absolute; left:0; top:100%; width:max-content; min-width:200px}
}


/* --- Nav alignment fix for Alt Ligler dropdown --- */
.nav{display:flex;align-items:center}
.nav a{display:inline-flex;align-items:center;line-height:1;padding:8px 12px;border-radius:10px}
.nav .dropdown{position:relative;display:inline-flex;align-items:center;height:auto;vertical-align:middle}
.nav .dropdown > a{display:inline-flex;align-items:center;gap:6px;height:36px}
.nav .dropdown > a .caret{position:static;transform:none;margin-left:2px;font-size:12px;line-height:1}
.nav .dropdown-menu{top:110%;margin-top:6px;box-shadow:0 10px 24px rgba(0,0,0,.08)}
.nav .dropdown.open > a,
.nav .dropdown > a:hover{background:rgba(255,255,255,0.22)}
/* ensure nav container shows dropdown outside bounds */
.nav-gradient{position:relative;overflow:visible}

/* Social icons (header & footer) */
.social{display:flex;gap:10px;align-items:center}
.social .soc{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;color:#111827}
.nav-gradient .social .soc{border-color:rgba(255,255,255,0.35);background:rgba(255,255,255,0.12);color:#fff}
.nav-gradient .social .soc:hover{background:rgba(255,255,255,0.22)}
.footer-grid .social .soc{background:#fff;color:#111827}

/* Click-open state for dropdown */
.nav .dropdown.open .dropdown-menu{display:block}

/* Rich text content styles */
.article-content table{width:100%;border-collapse:collapse;margin:12px 0;border:1px solid var(--line)}
.article-content th,.article-content td{border:1px solid var(--line);padding:8px}
.article-content blockquote{border-left:4px solid #e5e7eb;padding:8px 12px;background:#f9fafb;border-radius:8px;color:#374151;margin:10px 0}
.article-content pre{background:#0b1020;color:#e5e7eb;padding:12px;border-radius:10px;overflow:auto;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.article-content code{background:#f3f4f6;padding:2px 5px;border-radius:6px}