/*
Theme Name: Pungo Theme
Theme URI: https://acehpungo.com
Author: Aceh Pungo
Author URI: https://acehpungo.com
Description: Tema portal berita & video bergaya editorial, terinspirasi dari layout media digital anak muda. Fitur: hero video besar, daftar berita pinned, grid berita terkini, section pilihan redaksi bertema gelap, dan footer lengkap dengan sosial media.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pungo-theme
*/

:root{
  --ink:#121212;
  --ink-soft:#1B1B1B;
  --paper:#F7F6F2;
  --paper-card:#FFFFFF;
  --ember:#E8442C;
  --ember-dark:#B8331F;
  --steel:#8C8C86;
  --steel-dark:#56585C;
  --line-dark:rgba(255,255,255,0.12);
  --line-light:#E7E4DA;
  --radius:10px;
  --font-head:'Archivo', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; height:auto;}
ul{list-style:none; margin:0; padding:0;}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ===== NAV ===== */
header.topbar{background:var(--ink); color:#fff; position:sticky; top:0; z-index:50;}
.topbar-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{font-family:var(--font-head); font-weight:800; font-size:20px; display:flex; align-items:center; gap:8px; letter-spacing:-0.02em; color:#fff;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--ember); display:inline-block;}
.logo img{max-height:36px; width:auto; display:block;}
.custom-logo-link{display:flex; align-items:center;}
nav.primary-nav ul{display:flex; gap:28px;}
nav.primary-nav a{font-size:14px; font-weight:500; color:rgba(255,255,255,0.72); padding:8px 0; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; display:inline-block;}
nav.primary-nav a:hover, nav.primary-nav .current-menu-item a{color:#fff; border-color:var(--ember);}
.nav-actions{display:flex; align-items:center; gap:16px;}
.btn-login{font-size:13px; font-weight:600; padding:8px 18px; border:1px solid rgba(255,255,255,0.35); border-radius:999px; color:#fff;}
.btn-login:hover{background:rgba(255,255,255,0.08);}
.hamburger{display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none;}
.hamburger span{width:22px; height:2px; background:#fff; display:block;}

/* ===== HERO ===== */
.hero-wrap{max-width:1180px; margin:0 auto; padding:28px 24px 8px;}
.hero-grid{display:grid; grid-template-columns:1.65fr 1fr; gap:20px;}
.hero-main{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink); min-height:420px; display:flex; align-items:flex-end;}
.hero-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.75;}
.hero-main::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,0) 30%, rgba(18,18,18,0.92) 100%);}
.hero-content{position:relative; z-index:2; padding:28px; color:#fff;}
.play-badge{width:52px; height:52px; border-radius:50%; background:var(--ember); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.play-badge::after{content:""; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px;}
.hero-tag{display:inline-block; font-size:12px; font-weight:600; color:var(--ember); background:rgba(232,68,44,0.15); padding:4px 10px; border-radius:5px; margin-bottom:10px;}
.hero-content h1{font-family:var(--font-head); font-size:30px; font-weight:700; line-height:1.2; max-width:560px; margin:0 0 10px;}
.hero-content p{font-size:14px; color:rgba(255,255,255,0.75); max-width:520px; margin:0;}

.hero-side{display:flex; flex-direction:column; gap:14px;}
.side-card{display:flex; gap:12px; background:var(--paper-card); border:1px solid var(--line-light); border-radius:var(--radius); padding:10px; transition:border-color .15s ease;}
.side-card:hover{border-color:var(--ember);}
.side-thumb{position:relative; width:110px; height:74px; flex-shrink:0; border-radius:6px; overflow:hidden; background:#ddd;}
.side-thumb img{width:100%; height:100%; object-fit:cover;}
.side-thumb .duration{position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.75); color:#fff; font-size:10px; padding:1px 5px; border-radius:3px;}
.side-text .kicker{font-size:11px; font-weight:600; color:var(--ember); margin-bottom:3px;}
.side-text h3{font-family:var(--font-head); font-size:14px; font-weight:600; line-height:1.35; margin:0;}

/* ===== SECTIONS / GRID ===== */
.section{max-width:1180px; margin:0 auto; padding:36px 24px;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.section-head h2{font-family:var(--font-head); font-size:20px; font-weight:700; border-left:4px solid var(--ember); padding-left:10px; margin:0;}
.section-head a{font-size:13px; font-weight:600; color:var(--ember);}

.news-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
.news-card{background:var(--paper-card); border:1px solid var(--line-light); border-radius:var(--radius); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;}
.news-card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(18,18,18,0.08);}
.news-thumb{width:100%; height:130px; background:#ddd; overflow:hidden;}
.news-thumb img{width:100%; height:100%; object-fit:cover;}
.news-body{padding:14px;}
.news-cat{font-size:11px; font-weight:600; color:var(--ember); margin-bottom:6px;}
.news-card h3{font-family:var(--font-head); font-size:15px; font-weight:600; line-height:1.35; margin:0 0 8px;}
.news-meta{font-size:12px; color:var(--steel);}

.cat-strip{background:var(--ink-soft); color:#fff;}
.cat-strip .section{padding:32px 24px;}
.cat-strip .section-head h2{color:#fff; border-color:var(--ember);}
.cat-strip .news-card{background:#232323; border-color:rgba(255,255,255,0.08);}
.cat-strip .news-card h3{color:#fff;}
.cat-strip .news-meta{color:rgba(255,255,255,0.5);}

/* ===== SINGLE / PAGE CONTENT ===== */
.entry-wrap{max-width:800px; margin:0 auto; padding:40px 24px;}
.entry-header .news-cat{margin-bottom:10px;}
.entry-header h1{font-family:var(--font-head); font-size:32px; line-height:1.25; margin:0 0 12px;}
.entry-meta{font-size:13px; color:var(--steel-dark); margin-bottom:24px;}
.entry-thumb{border-radius:var(--radius); overflow:hidden; margin-bottom:28px;}
.entry-content{font-size:16px; line-height:1.8;}
.entry-content p{margin:0 0 1.2em;}
.entry-content h2, .entry-content h3{font-family:var(--font-head); margin:1.6em 0 0.6em;}
.entry-content img{border-radius:var(--radius); margin:1.2em 0;}
.pagination{display:flex; gap:12px; margin-top:32px; font-size:14px;}
.pagination a{color:var(--ember); font-weight:600;}

/* ===== FOOTER ===== */
footer.site-footer{background:var(--ink); color:rgba(255,255,255,0.65); padding:44px 24px 24px;}
.footer-inner{max-width:1180px; margin:0 auto;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid var(--line-dark);}
.footer-links{display:flex; gap:20px; flex-wrap:wrap; font-size:13px;}
.footer-social{display:flex; gap:14px;}
.footer-social a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:12px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:12px; flex-wrap:wrap; gap:12px;}

/* ===== BREAKING NEWS TICKER ===== */
.breaking-ticker{background:var(--ember); color:#fff; overflow:hidden;}
.ticker-inner{display:flex; align-items:center; gap:14px; padding:9px 24px;}
.ticker-label{font-size:12px; font-weight:700; background:rgba(0,0,0,0.2); padding:3px 10px; border-radius:999px; flex-shrink:0;}
.ticker-viewport{overflow:hidden; flex:1;}
.ticker-track{display:flex; gap:48px; width:max-content; animation:ticker-scroll 30s linear infinite;}
.ticker-item{font-size:13px; font-weight:500; white-space:nowrap;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none; overflow-x:auto;}
}

/* ===== AD SLOT ===== */
.ad-header-wrap{padding:14px 24px 0; display:flex; justify-content:center;}
.ad-slot{width:100%; text-align:center; font-size:12px; color:var(--steel);}

/* ===== MOBILE NAV (JS-controlled) ===== */
.hamburger.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.is-active span:nth-child(2){opacity:0;}
.hamburger.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.hamburger span{transition:transform .15s ease, opacity .15s ease;}

/* ===== SIDEBAR (single post) ===== */
.entry-layout{display:grid; grid-template-columns:1fr 280px; gap:36px; max-width:1040px; margin:0 auto; padding:40px 24px;}
.entry-layout .entry-wrap{padding:0; max-width:none;}
.entry-sidebar .sidebar-widget{background:var(--paper-card); border:1px solid var(--line-light); border-radius:var(--radius); padding:16px; margin-bottom:16px;}
.entry-sidebar .widget-title{font-family:var(--font-head); font-size:15px; margin:0 0 10px; border-left:3px solid var(--ember); padding-left:8px;}

/* ===== READING TIME ===== */
.reading-time{display:inline-flex; align-items:center; gap:6px;}
.reading-time::before{content:"•";}

/* ===== RELATED POSTS ===== */
.related-posts{max-width:1040px; margin:0 auto; padding:0 24px 40px;}
.related-posts h2{font-family:var(--font-head); font-size:18px; font-weight:700; border-left:4px solid var(--ember); padding-left:10px; margin-bottom:16px;}

/* ===== COMMENTS ===== */
.comments-area{max-width:1040px; margin:0 auto; padding:0 24px 48px;}
.comments-title{font-family:var(--font-head); font-size:18px; margin-bottom:16px;}
.comment-list{list-style:none; margin:0; padding:0;}
.comment-body{border-bottom:1px solid var(--line-light); padding:16px 0;}
.comment-author{font-weight:600; font-size:14px;}
.comment-metadata{font-size:12px; color:var(--steel); margin-bottom:8px;}
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea{
  width:100%; padding:10px; border:1px solid var(--line-light); border-radius:6px; font-family:var(--font-body); margin-bottom:12px;
}
.comment-form .form-submit input{
  background:var(--ember); color:#fff; border:none; padding:10px 22px; border-radius:999px; font-weight:600; cursor:pointer;
}

/* ===== 404 ===== */
.error-404{max-width:640px; margin:0 auto; padding:80px 24px; text-align:center;}
.error-404 h1{font-family:var(--font-head); font-size:64px; color:var(--ember); margin-bottom:8px;}
.error-404 p{color:var(--steel-dark); margin-bottom:24px;}

@media (max-width:900px){
  nav.primary-nav{
    display:none; position:absolute; top:64px; left:0; right:0; background:var(--ink);
    flex-direction:column; padding:12px 24px; gap:0; box-shadow:0 8px 16px rgba(0,0,0,0.2);
  }
  nav.primary-nav.is-open{display:flex;}
  nav.primary-nav ul{flex-direction:column; gap:0;}
  nav.primary-nav a{display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08);}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:repeat(2, 1fr);}
  .entry-layout{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .news-grid{grid-template-columns:1fr;}
}