/*
Theme Name: Berita Pasti Clone
Theme URI: https://example.com/
Author: lily + guru
Author URI: https://example.com/
Description: Tema WordPress dengan tampilan desktop identik (scale) dan layout mobile-native seperti IDNGaming: appbar, tab kategori gradien, featured hero, list card.
Version: 1.1.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: berita-pasti-clone
*/
:root{
  --design-width: 1366;
  --scale: 1;
  --red:#b80f12;
  --dark:#1f1f1f;
  --light:#ffffff;
  --muted:#f4f4f4;
  --text:#222;
}

html,body{height:100%}
body{
  margin:0; background:#fff; color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.5;
}

.scale-viewport{width:100vw; min-height:100svh; overflow-x:hidden; display:flex; justify-content:center; background:#fff;}
.scale-stage{width: calc(var(--design-width) * 1px); transform: scale(var(--scale)); transform-origin: top center; position:relative;}
.scale-stage-height{height:auto;}

.wrapper{width: calc(var(--design-width) * 1px); margin:0 auto;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
.muted{color:#777;}

.topbar{background:#2c2c2c; color:#ddd; font-size:14px;}
.topbar .wrapper{display:flex; align-items:center; justify-content:space-between; padding:8px 16px;}

.hero{position:relative; color:#fff; min-height:260px; display:flex; align-items:center; overflow:hidden; background: var(--hero-bg, #222) center/cover no-repeat;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25));}
.hero-inner{position:relative; z-index:1; padding:48px 16px; text-align:center;}
.brand{font-size:72px; font-weight:800; letter-spacing:.5px;}
.tagline{margin-top:8px; opacity:.9;}
.cta{margin-top:20px; display:inline-block; background:#e20; color:#fff; padding:12px 18px; border-radius:6px; font-weight:600;}

.nav{background:var(--red); color:#fff;}
.nav .wrapper{display:flex; align-items:center;}
.menu{display:flex; gap:24px; padding:0; margin:0; list-style:none;}
.menu a{display:block; padding:14px 10px; font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.3px;}
.search-slot{margin-left:auto; padding:0 12px; height:48px; display:flex; align-items:center;}

.ticker{background:#efefef; border-block:1px solid #e5e5e5;}
.ticker .wrapper{display:flex; align-items:center; gap:12px; padding:10px 16px;}
.ticker-badge{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#c00;}
.ticker-track{overflow:hidden; flex:1; white-space:nowrap;}
.ticker-items{display:inline-block; animation: ticker 24s linear infinite;}
.ticker-items a{margin-right:42px; color:#444;}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.section{padding:28px 16px;}
.section-title{display:flex; align-items:baseline; gap:8px;}
.section-title .top{font-size:56px; font-weight:800; color:#c41d1d; line-height:1;}
.section-title .picks{font-size:56px; font-weight:300; color:#222; line-height:1;}

.cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-top:18px;}
.card{border:1px solid #e9e9e9; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.04);}
.card .thumb{aspect-ratio: 16/9; background:#ddd;}
.card .body{padding:12px;}
.card h3{font-size:18px; line-height:1.3; margin:0 0 6px;}
.meta{font-size:12px; color:#888; display:flex; align-items:center; gap:8px;}

.main{padding:10px 16px 40px;}
.grid{display:grid; grid-template-columns: 4fr 2fr; gap:32px; align-items:start;}

.post{border:1px solid #ddd; border-radius:10px; overflow:hidden; background:#fff; margin-bottom:24px;}
.post .cover{aspect-ratio: 16/9; background:#ccc;}
.post .content{padding:18px 22px;}
.post .kicker{font-size:12px; color:#c41d1d; font-weight:800; letter-spacing:.5px;}
.post .title{font-size:42px; line-height:1.12; margin:.35em 0 .25em;}
.post .excerpt{color:#555;}

.sidebar{position:sticky; top:24px;}
.side-title{font-weight:800; margin:0 0 12px;}
.list{display:flex; flex-direction:column; gap:18px;}
.list-item{display:grid; grid-template-columns: 24px 1fr 84px; gap:12px; align-items:center; padding:0 0 14px; border-bottom:1px solid #eee;}
.list-item .rank{width:24px; height:24px; border-radius:6px; background:#f03939; color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px;}
.list-item .mini h4{margin:0 0 6px; font-size:14px;}
.list-item .mini .cat{font-size:10px; font-weight:800; color:#c41d1d; letter-spacing:.4px; text-transform:uppercase;}
.list-item .mini .date{font-size:11px; color:#888;}
.thumb-sm{aspect-ratio: 16/10; background:#ddd; border-radius:6px; overflow:hidden;}

.footer{padding:28px 16px; background:#fafafa; color:#666; border-top:1px solid #eee; font-size:14px;}

/* ====== MOBILE NATIVE LAYOUT (<=768px) ====== */
.m-featured-block, .m-list, .m-appbar { display:none; }

@media (max-width: 768px) {
  /* Disable scale mode on mobile: use native responsive */
  .scale-stage{ width:100vw; transform:none; }
  .scale-stage-height{ height:auto; }
  .wrapper{ width:100%; padding:0 16px; box-sizing:border-box; }

  /* AppBar */
  .m-appbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
  .m-appbar .logo{ display:flex; align-items:center; gap:8px; font-weight:800; }
  .m-appbar .icons{ display:flex; gap:14px; font-size:22px; }
  .m-appbar .icon{ width:26px; height:26px; display:grid; place-items:center; }

  /* Hide desktop hero/topbar; simplify nav */
  .topbar{ display:none; }
  .hero{ display:none; }
  .nav{ background: linear-gradient(90deg,#ff3b3b,#7a2cff); color:#fff; }
  .menu{ display:flex; gap:20px; padding:12px 16px; margin:0; list-style:none; white-space:nowrap; overflow:auto; }
  .menu li{ list-style:none; }
  .menu a{ padding:0; color:#fff; font-weight:700; }
  .search-slot{ display:none; }

  /* Hide desktop Top Picks + grid/sidebar */
  .section{ display:none; }
  .main .grid{ display:block; }
  .sidebar{ display:none; }

  /* Mobile Featured card with overlay */
  .m-featured-block{ display:block; margin-top:8px; }
  .m-featured{ position:relative; border-radius:12px; overflow:hidden; }
  .m-featured img{ width:100%; height:auto; display:block; }
  .m-featured .overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); }
  .m-featured .text{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff; }
  .m-featured .badge{ display:inline-block; background:#e31837; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:700; }
  .m-featured .title{ font-size:28px; font-weight:800; line-height:1.15; margin:8px 0 4px; }
  .m-featured .meta{ font-size:13px; opacity:.9; }

  /* Mobile list items */
  .m-list{ display:flex; flex-direction:column; gap:18px; margin:18px 0 60px; }
  .m-item{ display:grid; grid-template-columns: 120px 1fr; gap:12px; align-items:center; }
  .m-item .thumb{ width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; }
  .m-item h3{ margin:0 0 4px; font-size:16.5px; line-height:1.25; }
  .m-item .meta{ font-size:12px; color:#666; display:flex; align-items:center; gap:8px; }
  .badge{ display:inline-block; background:#e31837; color:#fff; padding:4px 8px; border-radius:8px; font-size:11px; font-weight:700; }
}