/*
Theme Name: Esports.or.id News
Theme URI: https://www.esports.or.id/
Author: Esports.or.id
Description: WordPress theme based on the Esports.or.id Blogger design, with SEO-friendly WordPress structure.
Version: 1.0.0
Text Domain: esports-or-id
*/
:root{
  --dark:#111214;
  --dark-soft:#2c2c2a;
  --accent:#0f6e56;      /* warna aksen utama (teal) - ganti sesuai selera */
  --accent-light:#e1f5ee;
  --accent-dark:#04342c;
  --coral:#d85a30;       /* aksen sekunder untuk badge/kategori */
  --coral-light:#faece7;
  --bg:#ffffff;
  --bg-soft:#f7f7f5;
  --border:#e7e6e0;
  --text:#16171a;
  --text-secondary:#5f5e5a;
  --text-muted:#8a897f;
  --radius:8px;
  --maxw:1180px;
  --font-head:'Poppins', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.65;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; margin:0 0 .5em; line-height:1.25;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* ============== TOP BAR (breaking news style) ============== */
.topbar{background:var(--dark); color:#fff; font-size:12.5px;}
.topbar .container{display:flex; align-items:center; gap:10px; padding:6px 20px; overflow:hidden;}
.topbar .tag{background:var(--coral); color:#fff; font-weight:600; padding:2px 8px; border-radius:3px; flex-shrink:0; text-transform:uppercase; font-size:11px;}
.topbar .ticker{position:relative; flex:1; min-width:0; overflow:hidden; color:#d9d9d6;}
.topbar .ticker-track{display:inline-flex; align-items:center; width:max-content; white-space:nowrap; animation:breakingTicker 180s linear infinite;}
.topbar .ticker:hover .ticker-track{animation-play-state:paused;}
.topbar .ticker-item{display:inline-block; color:#d9d9d6; margin-right:52px;}
.topbar .ticker-item:hover{color:#fff; text-decoration:underline;}
@keyframes breakingTicker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============== HEADER ============== */
.site-header{border-bottom:2px solid var(--dark); background:var(--bg);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; max-width:var(--maxw); margin:0 auto; flex-wrap:wrap; gap:12px;}
.site-branding{display:flex; align-items:center; gap:12px;}
.site-title{font-family:var(--font-head); font-size:30px; font-weight:800; letter-spacing:-.5px; margin:0;}
.site-title a{color:var(--text);}
.site-title .accent-dot{color:var(--accent);}
.site-desc{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.header-search{display:flex; align-items:center; border:1.5px solid var(--dark); border-radius:30px; overflow:hidden; background:#fff;}
.header-search input{border:none; outline:none; padding:9px 14px; font-size:13px; width:190px; font-family:var(--font-body);}
.header-search button{background:var(--dark); color:#fff; border:none; padding:9px 16px; cursor:pointer; font-size:13px;}

/* ============== NAVBAR ============== */
.navbar{background:var(--dark);}
.navbar .container{display:flex; align-items:center; justify-content:space-between;}
.navbar ul{display:flex; flex-wrap:wrap; align-items:center;}
.navbar li a{display:block; padding:13px 14px; color:#e9e9e6; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.25px; transition:background .15s; white-space:nowrap;}
.navbar li a:hover{background:var(--accent); color:#fff;}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:22px; padding:12px 20px; cursor:pointer;}

/* ============== LAYOUT ============== */
.page-wrap{max-width:var(--maxw); margin:0 auto; padding:30px 20px; display:grid; grid-template-columns:2.2fr 1fr; gap:34px; align-items:flex-start;}
.section-heading{display:flex; align-items:center; gap:10px; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--dark);}
.section-heading h2{font-size:19px; margin:0; text-transform:uppercase; letter-spacing:.3px;}
.section-heading .bar{width:5px; height:20px; background:var(--accent); display:inline-block;}

/* ============== FEATURED / HERO POST ============== */
.hero{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-bottom:34px;}
.hero-main{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--dark-soft); min-height:340px; display:flex; align-items:flex-end;}
.hero-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero-main::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%);}
.hero-main .hero-content{position:relative; z-index:1; padding:24px; color:#fff;}
.hero-main .badge{background:var(--accent); color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:3px; display:inline-block; margin-bottom:10px;}
.hero-main h3{font-size:24px; color:#fff; margin-bottom:6px;}
.hero-main .meta{color:#d9d9d6; font-size:12.5px;}
.hero-side{display:flex; flex-direction:column; gap:16px;}
.hero-side-item{display:flex; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.hero-side-item:last-child{border-bottom:none; padding-bottom:0;}
.hero-side-item .thumb{width:96px; height:70px; flex-shrink:0; border-radius:6px; overflow:hidden; background:var(--bg-soft);}
.hero-side-item .thumb img{width:100%; height:100%; object-fit:cover;}
.hero-side-item h4{font-size:14px; margin:0 0 4px;}
.hero-side-item .meta{font-size:11.5px; color:var(--text-muted);}

/* ============== POST LIST (Blog1 widget) ============== */
.post-list{display:flex; flex-direction:column; gap:22px;}
.post-card{display:grid; grid-template-columns:220px 1fr; gap:18px; padding-bottom:22px; border-bottom:1px solid var(--border);}
.post-card .thumb{border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); aspect-ratio:4/3;}
.post-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.post-card:hover .thumb img{transform:scale(1.05);}
.post-card .cat-badge{display:inline-block; background:var(--coral-light); color:var(--coral); font-size:10.5px; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-bottom:8px; letter-spacing:.3px;}
.post-card h3{font-size:19px; margin-bottom:8px;}
.post-card h3 a:hover{color:var(--accent);}
.post-card .snippet{color:var(--text-secondary); font-size:14px; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.post-card .meta{font-size:12px; color:var(--text-muted); display:flex; gap:14px; flex-wrap:wrap;}
.post-card .meta span{display:inline-flex; align-items:center; gap:4px;}
.latest-loading{padding:22px 0; color:var(--text-muted); font-size:14px;}
.latest-empty{padding:22px 0; color:var(--text-muted); font-size:14px;}


/* ============== HOMEPAGE SEO INTRO ============== */
.homepage-seo{margin:30px 0 10px; padding:22px 0 4px; border-top:1px solid var(--border);}
.homepage-seo h2{font-size:21px; margin:0 0 8px;}
.homepage-seo p{font-size:14px; color:var(--text-secondary); margin:0;}
.homepage-seo a{color:var(--accent); text-decoration:underline; font-weight:600;}

/* ============== PAGINATION ============== */
.blog-pager{display:flex; justify-content:center; gap:10px; margin-top:28px;}
.blog-pager a, .blog-pager span{padding:9px 18px; border:1.5px solid var(--dark); border-radius:30px; font-weight:600; font-size:13px;}
.blog-pager a:hover{background:var(--dark); color:#fff;}

/* ============== SIDEBAR ============== */
.widget-box{background:var(--bg-soft); border-radius:var(--radius); padding:18px; margin-bottom:24px; border:1px solid var(--border);}
.widget-box h2.title{font-size:14px; text-transform:uppercase; letter-spacing:.4px; margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--dark);}
.popular-post{display:block; margin-bottom:14px;}
.popular-post:last-child{margin-bottom:0;}
.popular-link{display:flex; gap:10px; align-items:flex-start; width:100%; color:inherit; text-decoration:none; cursor:pointer;}
.popular-link .num{font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--accent); width:24px; flex:0 0 24px;}
.popular-link .thumb{display:block; width:60px; height:50px; border-radius:5px; overflow:hidden; flex:0 0 60px; background:#eee;}
.popular-link .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .2s ease;}
.popular-link .popular-title{display:block; font-family:var(--font-head); font-size:13px; font-weight:700; line-height:1.35; flex:1; min-width:0;}
.popular-link:hover .popular-title{color:var(--accent);}
.popular-link:hover .thumb img{transform:scale(1.05);}
.label-cloud a{display:inline-block; background:#fff; border:1px solid var(--border); color:var(--text-secondary); font-size:12px; padding:6px 12px; border-radius:20px; margin:0 6px 6px 0;}
.label-cloud a:hover{background:var(--dark); color:#fff; border-color:var(--dark);}
.about-widget p{font-size:13px; color:var(--text-secondary); margin-bottom:12px;}
.social-row{display:flex; gap:8px; flex-wrap:wrap;}
.social-row a{background:var(--dark); color:#fff; font-size:12px; font-weight:600; padding:8px 12px; border-radius:6px; flex:1; text-align:center;}
.social-row a:hover{background:var(--accent);}
.newsletter-box{background:var(--dark); color:#fff; border-radius:var(--radius); padding:20px;}
.newsletter-box h3{color:#fff; font-size:16px;}
.newsletter-box p{font-size:12.5px; color:#bdbdb8; margin-bottom:12px;}
.newsletter-box input{width:100%; padding:10px; border:none; border-radius:5px; margin-bottom:8px; font-size:13px;}
.newsletter-box button{width:100%; padding:10px; border:none; border-radius:5px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer;}

/* ============== SINGLE POST PAGE ============== */
.breadcrumbs{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--text-muted); margin:0 0 14px;}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs .sep{color:var(--text-muted);}
.post-single .post-title{font-size:30px; margin-bottom:10px;}
.post-single .post-meta-top{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.post-single .post-thumb{border-radius:var(--radius); overflow:hidden; margin-bottom:20px; aspect-ratio:16/9; background:var(--bg-soft);}
.post-single .post-thumb img{width:100%; height:100%; object-fit:cover;}
.post-body{font-size:16px; line-height:1.8; color:var(--text);}
.post-body img{border-radius:var(--radius); margin:14px 0; max-width:100%; height:auto;}
.post-body iframe,.post-body video{max-width:100%;}
.post-body h2{font-size:22px; margin-top:1.4em;}
.post-body h3{font-size:19px; margin-top:1.2em;}
.post-body blockquote{border-left:4px solid var(--accent); background:var(--accent-light); margin:16px 0; padding:12px 18px; font-style:italic; color:var(--accent-dark);}
.post-body a{color:var(--accent); text-decoration:underline;}
.post-tags{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0;}
.post-tags a{background:var(--bg-soft); border:1px solid var(--border); font-size:12px; padding:6px 12px; border-radius:20px; color:var(--text-secondary);}
.author-box{display:flex; gap:14px; background:var(--bg-soft); border-radius:var(--radius); padding:18px; margin:26px 0; border:1px solid var(--border);}
.author-box img{width:56px; height:56px; border-radius:50%; flex-shrink:0;}
.author-box h4{margin:0 0 4px; font-size:15px;}
.author-box p{margin:0; font-size:13px; color:var(--text-secondary);}
.related-posts{margin-top:30px;}
.related-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.related-grid .thumb{border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:var(--bg-soft); margin-bottom:8px;}
.related-grid .thumb img{width:100%; height:100%; object-fit:cover;}
.related-grid h4{font-size:13.5px; margin:0;}

/* ============== COMMENTS ============== */
#comments{margin-top:30px; border-top:2px solid var(--dark); padding-top:20px;}
#comments h3{font-size:18px; text-transform:uppercase;}

/* ============== FOOTER ============== */
.site-footer{background:var(--dark); color:#d9d9d6; margin-top:40px;}
.footer-grid{max-width:var(--maxw); margin:0 auto; padding:44px 20px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.footer-grid h3{color:#fff; font-size:15px; text-transform:uppercase; margin-bottom:16px;}
.footer-grid p{font-size:13px; color:#a9a9a3; line-height:1.7;}
.footer-grid ul li{margin-bottom:8px;}
.footer-grid ul li a{font-size:13px; color:#c7c7c1;}
.footer-grid ul li a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid #2c2c2c; text-align:center; padding:16px 20px; font-size:12.5px; color:#8a8a85;}
.footer-bottom a{color:var(--accent);}

/* ============== RESPONSIVE ============== */
@media (max-width:980px){
  .page-wrap{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .header-inner{flex-direction:column; align-items:flex-start;}
  .header-search input{width:130px;}
  .navbar ul{display:none; flex-direction:column; width:100%;}
  .navbar.open ul{display:flex;}
  .nav-toggle{display:block; margin-left:auto;}
  .navbar .container{flex-wrap:wrap;}
  .post-card{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .topbar .ticker-track{animation:none !important; transform:none !important;}
  .post-card .thumb img,
  .popular-link .thumb img,
  .esports-name-item,
  .esports-name-arrow{transition:none !important;}
}

/* Print-safe */
noscript{display:none;}/* WordPress integration */
.navbar .menu, .navbar ul{margin:0;padding:0;list-style:none;}
.navbar .menu > li{display:inline-block;position:relative;}
.navbar .sub-menu{display:none;position:absolute;left:0;top:100%;background:var(--dark);min-width:190px;z-index:20;padding:0;}
.navbar li:hover > .sub-menu{display:block;}
.navbar .sub-menu li{display:block;width:100%;}
.navbar .sub-menu a{display:block;white-space:normal;}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0;}
.post-tags a{border:1px solid var(--border);padding:6px 11px;border-radius:20px;font-size:12px;color:var(--text-secondary);}
.post-navigation{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;margin:25px 0;}
.post-navigation div{max-width:48%;font-size:13px;font-weight:600;}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.related-grid .thumb{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--bg-soft);}
.related-grid .thumb img{width:100%;height:100%;object-fit:cover;}
.related-grid h3{font-size:15px;margin-top:8px;}
.blog-pager .nav-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.blog-pager .page-numbers{padding:9px 18px;border:1.5px solid var(--dark);border-radius:30px;font-weight:600;font-size:13px;}
.blog-pager .current{background:var(--dark);color:#fff;}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.aligncenter{margin-left:auto;margin-right:auto;}
.wp-caption{max-width:100%;}
@media(max-width:760px){.navbar .menu > li{display:block;width:100%;}.navbar .sub-menu{position:static;display:block;min-width:0;padding-left:15px;}.related-grid{grid-template-columns:1fr;}.post-navigation{flex-direction:column;}.post-navigation div{max-width:100%;}}

/* ============== FINAL POLISH / WORDPRESS ============== */
.custom-logo-wrap{display:flex;align-items:center;min-height:42px;}
.custom-logo-wrap .custom-logo{max-height:58px;width:auto;max-width:320px;}
.thumb-placeholder{width:100%;height:100%;min-height:100px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f2f2ef,#e7e6e0);color:#8a897f;font-family:var(--font-head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.hero-main .thumb-placeholder{position:absolute;inset:0;min-height:0;background:linear-gradient(135deg,#242527,#111214);color:#d9d9d6;}
.popular-link .thumb .thumb-placeholder{min-height:50px;font-size:8px;}
.hero-side-item .thumb .thumb-placeholder{min-height:70px;font-size:8px;}
.post-card .thumb .thumb-placeholder{min-height:100%;font-size:10px;}
.nav-toggle[aria-expanded="true"]{background:var(--accent);}
@media(max-width:700px){
  .custom-logo-wrap .custom-logo{max-width:240px;max-height:50px;}
  .site-title{font-size:26px;}
}