:root{ /* Sky base */ --bg: #eaf6ff; /* biru langit sangat muda */ --bg-soft: #d7efff; /* biru muda untuk layer */ --card: rgba(255,255,255,.88); --card-soft: rgba(255,255,255,.78); /* Text */ --text: #0b1220; --muted: #4b647d; --line: rgba(15,23,42,.14); /* Accent (senja) tetap */ --accent: #ff8a3c; --accent-soft: rgba(255,138,60,.18); --accent2: #f97316; --danger: #ef4444; --radius-lg: 18px; --radius-md: 14px; --radius-sm: 999px; --shadow: 0 18px 70px rgba(2,8,23,.16); --max-width: 1180px; /* Header surfaces */ --header: rgba(255,255,255,.72); --header-strong: rgba(255,255,255,.92); } * { box-sizing: border-box; } html, body{ margin:0; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background: radial-gradient(1200px 700px at 10% 0%, rgba(14,165,233,.22), transparent 55%), radial-gradient(1200px 700px at 90% 0%, rgba(56,189,248,.18), transparent 55%), radial-gradient(900px 600px at 50% 110%, rgba(255,138,60,.14), transparent 60%), var(--bg); color: var(--text); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; margin: 0; padding: 0; } .wrapper { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; } /* Top bar */ .top-bar { background: linear-gradient(to right, rgba(15,23,42,.95), rgba(15,23,42,.9)); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); } .top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; } .top-bar-left { display: flex; align-items: center; gap: 10px; } .label-live { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, var(--danger), var(--accent2)); color: #fff; } .top-bar-ticker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .top-bar-right { display: flex; align-items: center; gap: 12px; } .top-meta { display: flex; gap: 8px; align-items: center; } .top-meta span { padding: 2px 8px; border-radius: 999px; background: rgba(15,23,42,.7); border: 1px solid var(--line); } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px); background: rgba(15,23,42,.9); border-bottom: 1px solid var(--line); } .header-main { padding: 10px 0; } .header-main-inner { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; } .logo-area { display: flex; align-items: center; gap: 10px; } 
.logo-mark { width: 64px; height: 64px; border-radius: 14px; background: radial-gradient(circle at 0 0, #f97316, #db2777); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; box-shadow: var(--shadow); } .logo-mark span { transform: translateY(1px); } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-title { font-size: 20px; font-weight: 700; letter-spacing: .03em; } .logo-title span { color: var(--accent); } .logo-tagline { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; } .header-ad { min-height: 60px; border-radius: var(--radius-md); background: radial-gradient(circle at 0 0, rgba(248,250,252,.08), transparent), radial-gradient(circle at 100% 100%, rgba(248,250,252,.06), transparent), #020617; border: 1px dashed rgba(148,163,184,.55); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; } /* NAV */ .nav-bar { border-top: 1px solid rgba(148,163,184,.2); background: rgba(15,23,42,.98); } .nav-inner { display: flex; align-items: center; gap: 16px; padding: 6px 0; } .nav-menu { display: flex; gap: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .11em; flex: 1; overflow-x: auto; scrollbar-width: none; } .nav-menu::-webkit-scrollbar { display: none; } .nav-menu a { padding: 6px 10px; border-radius: 999px; color: var(--muted); transition: all .18s ease; border: 1px solid transparent; white-space: nowrap; } .nav-menu a:hover, .nav-menu a.is-active { color: #fff; border-color: rgba(248,250,252,.18); background: radial-gradient(circle at 0 0, var(--accent-soft), transparent); } .nav-right { display: flex; align-items: center; gap: 8px; } .nav-search { position: relative; } .nav-search input { background: rgba(15,23,42,.8); border: 1px solid var(--line); border-radius: 999px; padding: 6px 28px 6px 12px; font-size: 12px; color: var(--text); outline: none; min-width: 140px; } .nav-search input::placeholder { color: rgba(148,163,184,.7); } .nav-search-icon { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); } .nav-toggle { display: none; border: 1px solid var(--line); background: rgba(15,23,42,.7); color: var(--text); border-radius: var(--radius-sm); padding: 6px 9px; font-size: 16px; cursor: pointer; } /* MAIN */ main { padding: 18px 0 40px; } .main-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px; align-items: flex-start; } /* Hero / headline grid */ .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
  margin-bottom: 18px;
} .hero-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #020617, #0f172a); box-shadow: var(--shadow); } 
.hero-main-img { position: relative; min-height: 350px; background-image: radial-gradient(circle at 0 0, rgba(248,113,113,.35), transparent), radial-gradient(circle at 100% 100%, rgba(234,179,8,.25), transparent), url("https://via.placeholder.com/900x500?text=Gambar+Headline+Utama"); background-size: cover; background-position: center; filter: saturate(1.08); } .hero-main-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.9), transparent 55%); } 
.hero-main-content { position: absolute; inset: auto 18px 18px 18px; } .badge-category { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 11px; background: rgba(15,23,42,.9); border: 1px solid rgba(148,163,184,.5); color: var(--muted); margin-bottom: 8px; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .hero-main-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; } .hero-main-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; } .hero-main-meta span { display: flex; align-items: center; gap: 6px; } .hero-main-meta-dot { width: 2px; height: 2px; border-radius: 999px; background: var(--muted); } /* Secondary hero list */ .hero-secondary { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; } .hero-secondary-card { display: grid; grid-template-columns: 1.2fr 2fr; gap: 10px; border-radius: var(--radius-md); background: rgba(15,23,42,.95); border: 1px solid var(--line); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .hero-secondary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(248,250,252,.25); } .hero-secondary-thumb { background-image: url("https://via.placeholder.com/260x170?text=Berita"); background-size: cover; background-position: center; } .hero-secondary-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .hero-secondary-kategori { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; } .hero-secondary-title { font-size: 13px; font-weight: 600; line-height: 1.3; } .hero-secondary-meta { margin-top: auto; font-size: 11px; color: var(--muted); } /* Ad row in content */ .ad-row { margin: 10px 0 18px; } .ad-row-inner { border-radius: var(--radius-md); border: 1px dashed rgba(148,163,184,.6); background: radial-gradient(circle at 0 0, rgba(248,250,252,.08), transparent), radial-gradient(circle at 100% 100%, rgba(248,250,252,.05), transparent), #020617; padding: 14px; text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; } /* Category section */ .section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; } .section-title-left { display: flex; align-items: center; gap: 8px; } .section-pill { width: 7px; height: 26px; border-radius: 999px; background: linear-gradient(to bottom, var(--accent), var(--accent2)); } .section-heading { font-size: 14px; text-transform: uppercase; letter-spacing: .16em; } .section-sub { font-size: 11px; color: var(--muted); } .section-link-all { font-size: 12px; color: var(--accent); } .posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; } .post-card { background: linear-gradient(145deg, rgba(15,23,42,1), rgba(15,23,42,.96)); border-radius: var(--radius-md); border: 1px solid rgba(30,64,175,.6); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(191,219,254,.9); } .post-thumb-wrap { position: relative; overflow: hidden; border-bottom: 1px solid rgba(30,64,175,.8); } .post-thumb { aspect-ratio: 16/9; background-image: url("https://via.placeholder.com/400x250?text=Thumbnail"); background-size: cover; background-position: center; transition: transform .25s ease; } .post-card:hover .post-thumb { transform: scale(1.05); } .post-label { position: absolute; bottom: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; background: rgba(15,23,42,.9); border: 1px solid rgba(248,250,252,.15); font-size: 11px; color: var(--muted); } .post-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 5px; } .post-meta { font-size: 11px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; } .post-title { font-size: 13px; font-weight: 600; line-height: 1.35; } .post-excerpt { font-size: 11px; color: var(--muted); margin-top: 2px; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 14px; } .widget { background: rgba(15,23,42,.96); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 12px 13px; } .widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .widget-title { font-size: 13px; text-transform: uppercase; letter-spacing: .16em; } .widget-sub { font-size: 11px; color: var(--muted); } .widget-ad { min-height: 220px; border-radius: var(--radius-md); border: 1px dashed rgba(148,163,184,.6); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; background: radial-gradient(circle at 0 0, rgba(248,250,252,.06), transparent), #020617; } .popular-list { display: flex; flex-direction: column; gap: 10px; font-size: 12px; } .popular-item { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; padding-bottom: 7px; border-bottom: 1px solid rgba(30,64,175,.6); } .popular-item:last-child { border-bottom: none; padding-bottom: 0; } .popular-number { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(15,23,42,1); border: 1px solid rgba(30,64,175,.9); color: var(--accent); } .popular-body { display: flex; flex-direction: column; gap: 3px; } .popular-title { font-size: 12px; font-weight: 500; } .popular-meta { font-size: 11px; color: var(--muted); } .newsletter { display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .newsletter p { margin: 0; color: var(--muted); } .newsletter-form { display: flex; flex-direction: column; gap: 6px; } .newsletter-form input { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: rgba(15,23,42,.85); padding: 7px 10px; font-size: 12px; color: var(--text); outline: none; } .newsletter-form input::placeholder { color: rgba(148,163,184,.7); } .btn-primary { border-radius: 10px; border: none; padding: 7px 10px; font-size: 12px; font-weight: 500; cursor: pointer; background: linear-gradient(to right, var(--accent), var(--accent2)); color: #0b1020; box-shadow: var(--shadow); } /* Footer */ footer { border-top: 1px solid rgba(148,163,184,.3); background: radial-gradient(circle at 0 0, rgba(248,113,113,.12), transparent), #020617; padding: 18px 0 20px; margin-top: 10px; font-size: 12px; color: var(--muted); } .footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 10px; } .footer-logo { display: flex; flex-direction: column; gap: 6px; } .footer-logo-title { font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .footer-links h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 6px; color: #e5e7eb; } .footer-links ul { display: flex; flex-direction: column; gap: 4px; } .footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; } .footer-bottom a { color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px) { .header-main-inner { grid-template-columns: 1fr; } .header-ad { min-height: 50px; } .main-layout { grid-template-columns: minmax(0, 1fr); } .sidebar { order: -1; } .hero-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 780px) { .top-bar-inner { flex-direction: column; align-items: flex-start; } .header-main-inner { align-items: flex-start; } .nav-inner { align-items: center; } .nav-toggle { display: inline-flex; } .nav-menu { position: absolute; left: 0; right: 0; top: 100%; background: rgba(15,23,42,.98); border-bottom: 1px solid var(--line); padding: 8px 16px 10px; display: none; flex-direction: column; gap: 6px; } .nav-menu.is-open { display: flex; } .nav-inner { position: relative; } .nav-right { margin-left: auto; } .nav-search input { min-width: 120px; } .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .posts-grid { grid-template-columns: minmax(0, 1fr); } .hero-main-img { min-height: 200px; } .footer-grid { grid-template-columns: minmax(0, 1fr); } .header-ad { font-size: 10px; letter-spacing: .12em; } } /* Sky overrides */ .top-bar{ background: var(--header-strong); } .site-header{ background: var(--header); border-bottom: 1px solid var(--line); } .nav-bar{ background: var(--header-strong); } .header-ad, .ad-row-inner, .widget-ad{ background: var(--card-soft); border: 1px dashed rgba(15,23,42,.22); color: var(--muted); } .hero-main{ background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(215,239,255,.92)); } .hero-main-overlay{ background: linear-gradient(to top, rgba(255,255,255,.92), transparent 60%); } 
    .hero-secondary-card, .widget, .post-card{ background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(2,8,23,.10); } .post-thumb-wrap{ border-bottom: 1px solid var(--line); } footer{ background: linear-gradient(to bottom, rgba(215,239,255,.7), rgba(234,246,255,.9)); border-top: 1px solid var(--line); } .footer-links h4{ color: var(--text); } /* Label kategori (pill) biar tidak hitam */ .post-label{ background: rgba(255,255,255,.88); /* putih transparan */ color: #f97316; /* oranye senja */ border: 1px solid rgba(249,115,22,.45); /* border senja */ box-shadow: 0 10px 24px rgba(2,8,23,.10); backdrop-filter: blur(8px); } .badge-category{ background: rgba(255,255,255,.85); color: #0b1220; border: 1px solid rgba(15,23,42,.14); } /* === FIX SKY THEME: badge tanggal + search + form newsletter === */ /* Badge tanggal di topbar (yang kanan) */ .top-meta span{ background: rgba(255,255,255,.85) !important; color: var(--muted) !important; border: 1px solid var(--line) !important; } /* Input pencarian di navbar */ .nav-search input{ background: rgba(255,255,255,.90) !important; color: var(--text) !important; border: 1px solid var(--line) !important; } .nav-search input::placeholder{ color: rgba(75,100,125,.75) !important; } .nav-search-icon{ color: rgba(75,100,125,.85) !important; } /* Input newsletter: nama lengkap & email */ .newsletter-form input{ background: rgba(255,255,255,.92) !important; color: var(--text) !important; border: 1px solid var(--line) !important; } .newsletter-form input::placeholder{ color: rgba(75,100,125,.75) !important; } /* Efek focus biar enak dilihat */ .nav-search input:focus, .newsletter-form input:focus{ outline: none !important; border-color: rgba(2,132,199,.55) !important; /* sky blue */ box-shadow: 0 0 0 4px rgba(2,132,199,.12) !important; } /* Hilangkan border/box-shadow/warna merah di wadah logo */ .logo-mark{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Kalau kamu pakai <img> untuk logo */ .logo-mark img{ display: block; width: 44px; /* sesuaikan */ height: 44px; border: 0 !important; outline: none !important; box-shadow: none !important; border-radius: 14px; /* biar tetap rounded */ }
    .post-topics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0 0 10px;
}
.topic-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.14);
  color: #0b1220;
  font-size: 12px;
  font-weight: 600;
}

.post-tags{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.12);
}
.post-tags-label{
  font-size: 12px;
  color: rgba(75,100,125,.9);
  margin-bottom: 8px;
}
.post-tags-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,138,60,.14);
  border: 1px solid rgba(249,115,22,.35);
  color: #b45309;
  font-size: 12px;
  font-weight: 600;
}
/* menu 2 baris ala detik */
.nav-inner{ align-items:flex-start; }

.nav-menu-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: visible;     /* jangan disabled */
}

.nav-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav-row::-webkit-scrollbar{ display:none; }

/* mobile: tetap mengikuti toggle menu lama */
@media (max-width:780px){
  .nav-menu-wrap{
    position:absolute;
    left:0; right:0; top:100%;
    background: rgba(15,23,42,.98);
    border-bottom: 1px solid var(--line);
    padding: 8px 16px 10px;
    display:none;        /* nanti muncul saat is-open */
  }
  .nav-menu-wrap.is-open{ display:flex; }
  .nav-row{ flex-direction:column; overflow:visible; }
}
/* Hover & Active menu jadi orange */
.nav-menu a:hover,
.nav-menu a.is-active{
  color: var(--accent) !important;
  border-color: rgba(249,115,22,.55) !important;
  background: rgba(255,138,60,.16) !important;
}

/* Kalau pakai versi 2 baris (nav-row), tetap sama */
.nav-row a:hover,
.nav-row a.is-active{
  color: var(--accent) !important;
  border-color: rgba(249,115,22,.55) !important;
  background: rgba(255,138,60,.16) !important;
}
/* === Brand header: background hitam + teks Catatan merah, Senja putih === */
.logo-area{
  background:#000;
  padding: 12px 16px;
  border-radius: 18px;
  width: fit-content;
}


/* ukuran logo (lebih besar dari teks judul) */
.logo-mark img{
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

/* judul lebih kecil dari logo */
.brand-title{
  font-size: 18px;                /* kecilkan dari sebelumnya */
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.05;
}

/* warna teks */
.brand-catatan{ color: #ef4444; } /* merah */
.brand-senja{ color: #ffffff; }   /* putih */
.brand-news{ color: #3B82F6; }   /* biru */


/* tagline ikut cocok di background hitam */
.logo-tagline{
  color: rgba(255,255,255,.70) !important;
}
/* Reset supaya .logo-area tidak jadi kotak besar */
.logo-area{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Chip hitam hanya membungkus logo + teks */
.brand-chip{
  background:#000;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:18px;
  width: fit-content;
}

/* Logo */
.logo-mark{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.logo-mark img{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display:block;
}

/* Judul lebih kecil dari logo + warna sesuai request */
.brand-title{
  font-size: 20px; /* lebih kecil dari logo */
  font-weight: 800;
  line-height: 1.05;
}
.brand-title .brand-catatan{ color:#ef4444 !important; } /* merah */
.brand-title .brand-senja{ color:#ffffff !important; }   /* putih */
.brand-title .brand-news{ color:#3B82F6 !important; }   /* putih */

/* Tagline biar kebaca di hitam */
.logo-tagline{
  color: rgba(255,255,255,.70) !important;
  font-size: 10px;
}
/* ===== MOBILE HEADER ala detik (HP) ===== */
.m-topbar, .m-search-row { display:none; }

@media (max-width: 780px){
  /* sembunyikan header desktop (logo+iklan) di HP */
  .site-header .header-main{ display:none; }

  /* topbar hitam */
  .m-topbar{
    display:grid;
    grid-template-columns: 56px 1fr 56px;
    align-items:center;
    background:#000;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .m-btn{
    width:56px; height:56px;
    border:0; background:transparent;
    color:#fff; font-size:28px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }

  /* brand tengah (logo gede + huruf gede) */
  .m-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    text-decoration:none;
  }
  .m-brand img{
    height: 40px; width:auto;
    display:block;
  }
  .m-brand-text{
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
  }
  .m-catatan{ color:#ef4444; }
  .m-senja{ color:#fff; }
  .m-news{ color:#3B82F6; }
  .m-com{ color: rgba(255,255,255,.8); }

  /* search row dropdown */
  .m-search-row{
    display:none;
    background:#000;
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .m-search-row.is-open{ display:block; }
  .m-search-form{
    display:flex; gap:10px;
  }
  .m-search-form input{
    flex:1;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color:#fff;
    padding: 12px 12px;
    font-size: 16px;
    outline:none;
  }
  .m-search-form button{
    border-radius: 12px;
    border: 0;
    padding: 12px 14px;
    font-weight: 700;
    cursor:pointer;
    background: #ef4444;
    color:#0b1220;
  }

  /* bar kategori besar-besar */
  .nav-bar{
    background:#fff;
    border-top: 0;
  }
  .nav-inner{
    padding: 0;
  }
  .nav-right{ display:none; } /* search desktop disembunyikan di HP */

  .nav-menu.nav-cats{
    position: static !important;
    display:flex !important;
    flex-direction: row !important;
    gap: 26px;
    padding: 12px 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-menu.nav-cats::-webkit-scrollbar{ display:none; }

  .nav-menu.nav-cats a{
    padding: 10px 0;
    border-radius: 0;
    border: 0 !important;
    background: transparent !important;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    color:#111827;
    white-space: nowrap;
  }

  /* underline merah untuk active/hover */
  .nav-menu.nav-cats a.is-active,
  .nav-menu.nav-cats a:hover{
    box-shadow: inset 0 -4px 0 #ef4444;
  }
}


  /* Link kategori di desktop */
  .nav-row a,
  .nav-menu a{
    color: rgba(255,255,255,.85) !important;
  }
  .nav-row a:hover, .nav-row a.is-active,
  .nav-menu a:hover, .nav-menu a.is-active{
    color: var(--accent) !important;
    border-color: rgba(249,115,22,.55) !important;
    background: rgba(255,138,60,.14) !important;
  }

  /* Search desktop biar cocok di hitam */
  .nav-search input{
    background: rgba(255,255,255,.10) !important;
    color:#fff !important;
    border-color: rgba(255,255,255,.16) !important;
  }
  .nav-search input::placeholder{ color: rgba(255,255,255,.55) !important; }

  /* Kalau icon search kamu bentuk button (punya class nav-search-icon) */
  .nav-search-icon{
    background: transparent !important;
    border: 0 !important;
    color: rgba(255,255,255,.80) !important;
    cursor: pointer;
  }
}
/* ===== DESKTOP: Judul tengah besar + logo besar ===== */
@media (min-width: 781px){

  /* kalau masih 2 kolom (logo-area + header-ad), jadikan 1 kolom biar lega */
  .header-main-inner{
    grid-template-columns: 1fr !important;
  }
  /* opsional: kalau iklan header bikin sempit, sembunyikan dulu di desktop
     (hapus ini kalau kamu tetap mau slot iklan tampil) */
  .header-ad{ display:none !important; }

  /* logo-area full lebar */
  .logo-area{
    width: 100%;
  }

 

  /* logo BESAR */
  .logo-mark img{
    width: 102px !important;
    height: 102px !important;
    border-radius: 18px !important;
  }

  /* teks judul di tengah */
  .logo-text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 70%;
  }

  .brand-title{
    font-size: 72px !important;   /* BESAR */
    font-weight: 900 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;          /* biar 1 baris */
  }
}
/* ===== DESKTOP: Logo lebih BESAR lagi ===== */
@media (min-width: 781px){
  .brand-chip{
    min-height: 150px !important;   /* naikin tinggi bar biar muat */
    padding: 22px 26px !important;
  }

  .logo-mark img{
    width: 130px !important;        /* BESARKAN */
    height: 130px !important;
    border-radius: 22px !important;
  }

  /* optional: kasih jarak kiri sedikit */
  .logo-mark{ margin-left: 6px; }
}
/* ===== DESKTOP: bikin logo terlihat LEBAR (buang efek ruang transparan) ===== */
@media (min-width: 781px){
  /* wadah logo dibuat persegi PANJANG (bukan kotak) */
  .logo-mark{
    width: 200px !important;     /* atur lebar */
    height: 160px !important;    /* atur tinggi */
    overflow: hidden !important; /* penting: biar bisa “crop” */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* gambar dipaksa mengisi wadah */
  .logo-mark img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;      /* cover = isi penuh (lebih “lebar”) */
    object-position: center center;    /* bisa coba: left center */
    transform: scale(1.05);            /* opsional: sedikit zoom */
  }
}
@media (min-width: 781px){
  .logo-mark img{
    object-position: center 80% !important; /* geser fokus ke bawah */
    transform: scale(1.02) !important;      /* kecilin zoom sedikit */
  }
}
@media (min-width: 781px){
  .logo-mark img{
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.12) !important; /* naikin/turunin sesuai selera */
  }
}
/* ===== DESKTOP: kategori tidak kepotong (auto 2 baris) ===== */
@media (min-width: 781px){
  .nav-inner{
    align-items: center;
    gap: 16px;
  }

  /* menu kategori */
  .nav-menu.nav-cats{
    flex: 1;
    display: flex;
    flex-wrap: wrap;          /* KUNCI: jadi 2 baris kalau kepanjangan */
    column-gap: 18px;
    row-gap: 10px;
    overflow: visible;        /* jangan di-clip */
    padding: 10px 0;
  }

  /* item menu jangan mengecil supaya teks tidak kepotong */
  .nav-menu.nav-cats a{
    flex: 0 0 auto;           /* jangan shrink */
    white-space: nowrap;
  }

  /* search tetap di kanan */
  .nav-right{
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* batasi lebar search biar nggak makan tempat */
  .nav-search input{
    width: 240px;
    max-width: 26vw;
  }
}
/* ===== FIX: Mobile header melebar saat logo/teks dibesarin ===== */
@media (max-width: 780px){
  html, body{
    width: 100%;
    overflow-x: hidden; /* pengaman biar gak bisa geser horizontal */
  }

  .m-topbar{
    width: 100%;
    max-width: 100vw;
    grid-template-columns: 56px minmax(0, 1fr) 56px; /* tengah boleh mengecil */
  }

  .m-brand{
    min-width: 0;          /* KUNCI: biar kolom tengah bisa shrink */
    overflow: hidden;
    gap: 10px;
  }

  .m-brand img{
    height: clamp(34px, 10vw, 52px); /* logo ikut besar tapi aman */
    width: auto;
    max-width: 80px;
  }

  .m-brand-text{
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(18px, 6vw, 28px); /* teks auto menyesuaikan layar */
    letter-spacing: .02em;
    line-height: 1;
  }

  .m-btn{
    width: 56px;
    height: 56px;
    line-height: 1;
    font-size: 28px;
  }
}
@media (max-width:780px){
  .m-topbar{
    /* 3 kolom: tombol kiri | brand (fleksibel) | tombol kanan */
    grid-template-columns: 56px minmax(0,1fr) 56px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    width:100%;
    max-width:100vw;
  }

  .m-brand{ min-width:0; overflow:visible; gap:10px; }

  .m-brand img{
    height: clamp(50px, 8.5vw, 48px);
    width:auto;
  }

  .m-brand-text{
    min-width:0;
    /* HAPUS ellipsis & biarkan skala otomatis */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(20px, 6.2vw, 28px);
    letter-spacing:.02em;
    line-height:1;
  }
}
/* ===============================
   FIX: Search bar desktop rapi
   (karena icon sekarang <button>)
================================ */
@media (min-width: 781px){
  /* biar search nempel sejajar baris kategori atas */
  .nav-inner{ align-items:flex-start !important; }

  .nav-right{
    margin-left:auto;
    align-self:flex-start;
    padding-top: 6px; /* naik-turun kalau perlu: 4px/6px/8px */
  }

  .nav-search{
    position:relative;
    display:flex;
    align-items:center;
  }

  .nav-search input{
    width: clamp(220px, 22vw, 340px);
    height: 36px;
    line-height: 36px;
    padding: 0 44px 0 14px;
    border-radius: 999px;
  }

  /* tombol icon */
  .nav-search-icon{
    position:absolute;
    right:6px;
    top:50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;

    border: 0;
    padding: 0;
    background: rgba(255,255,255,.10);
    cursor: pointer;

    display:flex;
    align-items:center;
    justify-content:center;
  }
  .nav-search-icon:hover{
    background: rgba(255,255,255,.16);
  }
}
/* search ikut di bar menu (setelah kategori terakhir) */
.nav-menu.nav-cats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* bikin <a> di dalam .nav-row dianggap anak langsung .nav-menu (biar wrap natural) */
.nav-menu.nav-cats .nav-row{ display:contents; }

/* form search jadi item terakhir */
.nav-search-inline{
  position:relative;
  margin-left: 12px;     /* dekat dengan kategori terakhir */
  flex: 0 0 auto;
}

/* rapihin input */
.nav-search-inline input{
  min-width: 240px;
  max-width: 28vw;
}

/* di mobile: sembunyikan karena kamu sudah punya search versi m-topbar */
@media (max-width:780px){
  .nav-search-inline{ display:none !important; }
}
@media (max-width:780px){
  .hero-main-content { position: static !important; inset: auto !important; padding: 12px 0 0 !important; }
  .hero-main-meta { margin-top: 8px; }
}
/* ===== Desktop: ringkas tinggi header hitam tanpa mengecilkan logo & judul ===== */
@media (min-width: 781px){

  .site-header{
    background:#000 !important;
    backdrop-filter: none !important;
  }

  /* ini sumber “ruang kosong” paling besar */
  .site-header .header-main{
    padding: 8px 0 !important;        /* sebelumnya kebesaran */
  }

  .site-header .header-main-inner{
    align-items: center !important;
    gap: 18px !important;             /* jarak antar item */
    min-height: 0 !important;
  }

  /* pastikan pembungkus brand tidak nambah tinggi */
  .site-header .logo-area{
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header .brand-chip{
    padding: 0 !important;            /* kunci: hilangkan padding chip */
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* rapikan teks judul agar tidak bikin tinggi extra */
  .site-header .brand-title{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;        /* lebih rapat, tapi ukuran font tetap */
  }

  /* nav bar: ringkas sedikit tapi jangan kepotong */
  .site-header .nav-inner{
    padding: 10px 0 12px !important;
    align-items: center !important;
  }
  .site-header .nav-row a{
    line-height: 1 !important;        /* biar pill tidak “kepotong” */
  }
}
/* ===== MOBILE: header selalu di atas (fixed) ===== */
@media (max-width:780px){

  /* opsional: top-bar desktop jangan ikut ganggu di HP */
  .top-bar{ display:none; }

  /* atur tinggi (silakan tweak kalau kurang pas) */
  :root{
    --mTopH: 76px; /* tinggi bar hitam (m-topbar) */
    --mNavH: 58px; /* tinggi bar kategori (nav-bar) */
  }

  /* bar hitam (burger + logo + judul) */
  .m-topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10000;
  }

  /* bar kategori di bawahnya (kalau ingin ikut nempel juga) */
  .nav-bar{
    position: fixed;
    top: var(--mTopH);
    left: 0; right: 0;
    z-index: 9999;
  }

  /* kalau kamu masih pakai m-search-row dropdown */
  .m-search-row{
    position: fixed;
    top: calc(var(--mTopH) + var(--mNavH));
    left: 0; right: 0;
    z-index: 9998;
  }

  /* dorong konten biar nggak ketutup header fixed */
  main{
    padding-top: calc(var(--mTopH) + var(--mNavH) + 16px) !important;
  }


  /* pastikan elemen di dalam header gak ikut “fixed” lagi */
  .m-topbar{ position: relative !important; }
  .nav-bar{ position: relative !important; top: auto !important; }

  /* dropdown search (kalau dipakai) muncul di bawah header */
  .m-search-row{
    position: absolute !important;
    left: 0; right: 0;
    top: 100%;
    z-index: 10001;
  }

 

  /* HILANGKAN padding body yang bikin kosong */
  body{ padding-top: 0 !important; }

  /* dorong konten secukupnya sesuai tinggi header */
  main{
    padding-top: 92px !important;  /* coba 82-110px sampai pas */
  }

  /* kalau top-bar masih muncul di HP, mending dimatiin */
  .top-bar{ display:none !important; }
}
/* ===== Footer Pro ===== */
.site-footer{
  margin-top: 28px;
  background: #050505;
  color: rgba(255,255,255,.82);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-top{
  padding: 26px 0 18px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 18px;
}
.footer-brand-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footer-logo-img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.footer-title{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.05;
}
.ft-catatan{ color:#ef4444; }
.ft-senja{ color:#fff; }
.ft-news{ color:#3B82F6; }

.footer-tagline{
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.footer-desc{
  margin: 12px 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.70);
}
.footer-contact-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.footer-wa{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.footer-wa:hover{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

.site-footer h4{
  margin: 6px 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}
.site-footer ul{ display:flex; flex-direction:column; gap: 7px; }
.site-footer a{ color: rgba(255,255,255,.78); }
.site-footer a:hover{ color:#fff; }

.footer-note{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}
.footer-newsletter{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.footer-newsletter input{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color:#fff;
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
}
.footer-newsletter input::placeholder{ color: rgba(255,255,255,.45); }
.footer-newsletter button{
  border-radius: 12px;
  border: 0;
  padding: 12px 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor:pointer;
  background: linear-gradient(90deg,#ef4444,#f97316);
  color:#0b1220;
}
.footer-mini{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.footer-mini a{ color: rgba(255,255,255,.78); }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}
.footer-bottom-right a{
  color: rgba(255,255,255,.80);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.footer-bottom-right a:hover{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

@media (max-width: 980px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
  .footer-logo-img{ width: 52px; height: 52px; }
}
.page-card{ background: rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.12); border-radius:18px; padding:18px; }
.page-title{ margin:0 0 12px; }
.page-content h2{ margin:18px 0 8px; }
.page-content ul{ padding-left:18px; list-style: disc; }
.m-brand-text {
  display: inline-block;
  text-align: center;
  line-height: 1.1;
}

.m-news {
  display: block;
  font-size: 24px;
  margin-top: -2px;
  margin-left: 60px; /* geser ke kanan */
}

@media(max-width:768px) {
  .sidebar {
    order: 2 !important;
  }

  .main-layout > section {
    order: 1 !important;
  }
}
/* ===== FIX OVERLAY HP YANG NUTUPIN HERO ===== */
@media(max-width:780px){

  /* TUTUP backdrop drawer supaya tidak nutup seluruh layar */
  .m-drawer-backdrop,
  .m-drawer.is-open .m-drawer-backdrop {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      position: static !important;
      z-index: -1 !important;
  }

  /* pastikan hero bisa diklik */
  .hero-main,
  .hero-grid,
  .hero-secondary {
      position: relative !important;
      z-index: 1 !important;
      pointer-events: auto !important;
  }
}



@media(max-width:780px){
  .site-header ~ * {
    z-index: 1 !important;
  }

  /* hancurkan SEMUA overlay */
  [class*="overlay"],
  [class*="backdrop"],
  .m-drawer-backdrop,
  .m-drawer.is-open .m-drawer-backdrop {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* pastikan hero menang */
  .hero-main,
  .hero-grid,
  .hero-secondary,
  main {
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
  }

  /* drawer dimatikan total */
  #mDrawer {
    pointer-events: none !important;
  }
}
.share-icons {
  display: flex;
  gap: 10px;
  margin: 10px 0 18px 0;
}

.sicon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.1);
  transition: 0.2s;
}

.sicon:hover {
  transform: translateY(-3px);
  background: var(--primary);
  color: #fff;
}

.sicon i {
  color: var(--text-color);
}

.hero-main-meta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.post-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.post-share-label {
  opacity: 0.8;
  margin-right: 4px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.85rem;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.share-btn i {
  font-size: 0.9rem;
}

/* Warna sesuai brand */
.share-wa {
  background: #25D366;
  color: #fff;
}

.share-fb {
  background: #1877F2;
  color: #fff;
}

.share-x {
  background: #000;
  color: #fff;
}

.share-tg {
  background: #0088CC;
  color: #fff;
}

.share-li {
  background: #0A66C2;
  color: #fff;
}

.share-copy {
  background: var(--card-muted, #444);
  color: #fff;
  position: relative;
}

/* Hover efek */
.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  opacity: .94;
}

/* Feedback "Tersalin" */
.share-copy.is-copied::after {
  content: attr(data-label);
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Responsive: rapatkan di layar kecil */
@media (max-width: 640px) {
  .hero-main-meta-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-widget {
  background: var(--card);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.widget-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-list-item + .sidebar-list-item {
  margin-top: 8px;
}

.sidebar-post-title {
  display: block;
  font-size: 0.9rem;
}

.sidebar-post-meta {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

.sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sidebar-text {
  font-size: 0.85rem;
  opacity: .85;
}

.sidebar-social {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sidebar-social-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 0.9rem;
}

.sidebar-social-btn.wa { background:#25D366; }
.sidebar-social-btn.fb { background:#1877F2; }
.sidebar-social-btn.ig { background:#E1306C; }
.sidebar-social-btn.yt { background:#FF0000; }

.sidebar-ad {
  text-align: center;
}

.sidebar-ad-label {
  font-size: 0.8rem;
  opacity: .7;
}

.sidebar-ad-box {
  margin-top: 6px;
  border-radius: 12px;
  border: 2px dashed rgba(0,0,0,0.15);
  padding: 20px 10px;
  font-size: 0.85rem;
  opacity: .8;
}
.sidebar-list-item.is-popular{
  display:grid;
  grid-template-columns: 26px 1fr;
  gap:8px;
}

.popular-rank{
  width:26px;
  height:26px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
/* Override hero: letakkan teks di atas, gambar di bawah */
.hero-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent; /* kalau mau card, bisa set var(--card) */
  box-shadow: var(--shadow);
}

/* sembunyikan overlay lama supaya tidak menutupi teks */
.hero-main .hero-main-overlay { display: none !important; }

/* Konten judul & meta: aliran dokumen biasa (bukan absolute) */
.hero-main .hero-main-content {
  position: relative;
  padding: 18px;
  background: var(--card); /* supaya teks terlihat, bisa disesuaikan */
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Judul besar */
.hero-main-title {
  font-size: clamp(20px, 5.2vw, 28px);
  font-weight: 800;
  margin: 6px 0 10px;
  line-height: 1.12;
  color: var(--text);
}

/* meta + actions: sejajar di baris yang sama (desktop), kolom di mobile */
.hero-main-meta-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: nowrap;
}

/* meta kiri */
.hero-main-meta {
  font-size: 13px;
  color: var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* area aksi (share/copy) */
.hero-main-meta-actions {
  display:flex;
  gap:8px;
  align-items:center;
}

/* Gaya tombol share kecil */
.hero-main .share-btn {
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  border: 1px solid rgba(15,23,42,.06);
  background: var(--card);
  cursor:pointer;
  transition: transform .12s ease;
}
.hero-main .share-btn:hover { transform: translateY(-3px); }

/* Wrap gambar (di bawah) */
.hero-main-img-wrap {
  width:100%;
  display:block;
  background: #eceff2;
  max-height: 560px;
  overflow: hidden;
}

/* Gambar responsif, crop rapi */
.hero-main-img {
  width:100%;
  height: auto;
  display:block;
  object-fit: cover;
  /* Jika ingin memaksa fixed height, uncomment: */
  /* height: 420px; */
}

/* Feedback tersalin (menggunakan style yang sudah Anda punya) */
.share-copy.is-copied::after {
  content: attr(data-label);
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
}

/* Responsive tweaks */
@media (max-width:640px) {
  .hero-main-meta-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hero-main .share-btn { width:36px; height:36px; font-size:14px; }
  .hero-main-title { font-size: 20px; }
}
/* ===== HERO CLEAN ===== */
.hero-clean {
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

/* TEKS */
.hero-text {
  padding: 18px 18px 14px;
}

.hero-title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--text);
}

/* META ROW */
.hero-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-meta {
  font-size: 13px;
  color: var(--muted);
}

.hero-meta .dot {
  margin: 0 6px;
}

/* SHARE ICON MODERN */
.share-btn-modern {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37,99,235,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.share-btn-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(37,99,235,.45);
}

/* GAMBAR */
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background: #eef2f7;
}

/* MOBILE */
@media (max-width: 640px) {
  .hero-title {
    font-size: 20px;
  }

  .share-btn-modern {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}
.share-menu{
  display: none;
  margin-top: 10px;
}

.share-menu.show{
  display: flex;
  gap: 12px;
}
/* ===== SHARE DETIK / KOMPAS ===== */

.share-wrap{
  position: relative;
}

.share-trigger{
  border: none;
  background: transparent;
  font-size: 16px;
  color: #334155;
  cursor: pointer;
  padding: 6px;
}

.share-popover{
  position: absolute;
  right: 0;
  top: 34px;
  display: flex;
  gap: 10px;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: all .2s ease;
  z-index: 20;
}

.share-popover.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.share-popover a,
.share-popover button{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* warna ala detik */
.share-popover .fa-whatsapp{background:#25D366;}
.share-popover .fa-facebook-f{background:#1877F2;}
.share-popover .fa-x-twitter{background:#000;}
.share-popover .fa-telegram{background:#229ED9;}
.copy-link{background:#64748b;}

.copy-link.copied{
  background:#16a34a;
}
/* Header: background putih saja */
.site-header,
.site-header .header-main,
.site-header .header-main-inner,
.site-header .logo-area,
.site-header .brand-chip,
.site-header .header-ad {
  background: #fff;
}
.site-header.is-sticky,
.site-header.is-sticky .header-main {
  background: #fff;
}
/* NAV BAR (yang tadinya hitam) jadi putih */
.nav-bar,
.nav-bar .nav-inner,
.nav-bar .nav-menu,
.nav-bar .nav-row {
  background: #fff !important;
}

/* rapikan biar tetap ada pemisah */
.nav-bar {
  border-bottom: 1px solid #e5e7eb;
}
.nav-bar {
  box-shadow: none !important;
}

.nav-bar::before,
.nav-bar::after {
  background: transparent !important;
}
/* TEKS MENU biar kelihatan di background putih */
.nav-bar a,
.nav-bar .nav-row a {
  color: #111 !important;
}

/* Hover */
.nav-bar a:hover {
  color: #e11d48 !important; /* boleh ganti sesuai warna brand */
}

/* Active menu (yang punya class is-active) */
.nav-bar a.is-active {
  color: #e11d48 !important;
  font-weight: 700;
}

/* Search input & tombol cari */
.nav-bar .nav-search input {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d1d5db;
}

.nav-bar .nav-search button {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d1d5db;
}
/* Hilangkan hitam di luar container (kiri-kanan) */
html, body {
  background: #fff !important;
}
/* =========================
   BREAKING NEWS BAR
========================= */
.breaking-bar{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}
.breaking-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}
.breaking-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1;
}

.breaking-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#e11d48;
  color:#fff;
  font-weight:800;
  letter-spacing:.4px;
  font-size:12px;
  user-select:none;
  white-space:nowrap;
}
.breaking-badge .dot{
  width:8px;height:8px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.9);
  animation:pulseDot 1.2s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.9); }
  70%{ box-shadow:0 0 0 8px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* Track */
.breaking-track{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  min-width:0;
  flex:1;
}
.breaking-marquee{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:8px 12px;
  white-space:nowrap;
  will-change:transform;
  animation:marquee 100s linear infinite;
}
.breaking-track:hover .breaking-marquee{
  animation-play-state:paused; /* hover untuk pause */
}

@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.breaking-item{
  color:#111;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  opacity:.95;
}
.breaking-item:hover{
  color:#e11d48;
  text-decoration:underline;
}

/* Clock */
.breaking-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  white-space:nowrap;
}
.clock{
  font-size:12px;
  color:#111;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:7px 10px;
  font-weight:700;
}

/* Mobile: rapikan */
@media (max-width: 768px){
  .breaking-inner{ gap:10px; }
  .breaking-badge{ padding:6px 9px; font-size:11px; }
  .clock{ font-size:11px; padding:6px 9px; }
  .breaking-item{ font-size:12px; }
}
/* =========================
   MOBILE FIX: Breaking bar rapi
   (badge + jam di atas, ticker full lebar di bawah)
========================= */
@media (max-width: 768px){
  .breaking-inner{
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  /* baris atas: badge kiri, jam kanan */
  .breaking-left{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .breaking-right{
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* ticker jadi baris bawah full width */
  .breaking-track{
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 3 !important;
  }

  /* kecilkan sedikit elemen agar pas */
  .breaking-badge{ font-size: 10px; padding: 5px 8px; }
  .clock{ font-size: 10px; padding: 6px 8px; }
  .breaking-item{ font-size: 11px; }
  .breaking-marquee{ animation-duration: 100s; }
}
/* =========================
   MOBILE HEADER TOPBAR: hitam -> putih
========================= */
@media (max-width: 768px){
  .m-topbar{
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb;
  }

  .m-btn{
    color: #111 !important;
  }

  .m-brand-text,
  .m-brand-text *{
    color: #111 !important;
  }
}
/* =========================
   MOBILE HEADER LAYOUT (sesuai request)
========================= */
@media (max-width: 768px){

  /* 1) Topbar putih, layout jadi kolom */
  .m-topbar{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px 12px;
  }

  /* tombol menu tetap pojok kiri */
  .m-btn{
    align-self:flex-start;
    color:#111 !important;
  }

  /* 2) Brand: logo memanjang full lebar */
  .m-brand{
    display:block;
    width:100%;
  }
  .m-brand img{
    width:100%;
    height:auto;
    max-height:64px;     /* bisa naikkan ke 72 jika perlu */
    object-fit:contain;
    display:block;
  }

  /* 3) Buang tulisan NUSANTARA UPDATE di HP */
  .m-brand-text{
    display:none !important;
  }

  /* 4) Tanggal/jam di bawah logo */
  .m-date{
    font-size:12px;
    font-weight:700;
    color:#111;
    padding:6px 10px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    text-align:center;
  }

  /* 5) Breaking bar tetap ada tapi badge hanya dot */
  .breaking-badge{
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:999px;
    min-width:0;
  }

  /* sembunyikan teks BREAKING (kita tidak butuh) */
  .breaking-badge{ font-size:0 !important; letter-spacing:0 !important; }

  /* dot dibuat lebih jelas */
  .breaking-badge .dot{
    width:10px;height:10px;
    background:#e11d48;
    box-shadow:0 0 0 0 rgba(225,29,72,.55);
    animation:pulseDotRed 1.2s infinite;
  }
  @keyframes pulseDotRed{
    0%{ box-shadow:0 0 0 0 rgba(225,29,72,.55); }
    70%{ box-shadow:0 0 0 9px rgba(225,29,72,0); }
    100%{ box-shadow:0 0 0 0 rgba(225,29,72,0); }
  }

  /* 6) Jam di breaking bar disembunyikan (karena pindah ke bawah logo) */
  .breaking-right{ display:none !important; }
}
/* =========================
   MOBILE: tampilkan header versi HP saja
   PC tetap normal
========================= */
@media (max-width: 768px){

  /* sembunyikan header desktop */
  .header-main{ display:none !important; }
  .nav-bar{ display:none !important; }

  /* m-topbar jadi layout rapi */
  .m-topbar{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb;
    padding:10px 12px;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  /* tombol menu posisi kiri atas */
  .m-btn{
    align-self:flex-start;
    color:#111 !important;
    font-size:22px;
    line-height:1;
    background:transparent;
    border:0;
    padding:6px 4px;
  }

  /* logo memanjang full lebar */
  .m-brand{
    width:100%;
    display:block;
    text-decoration:none;
  }
  .m-brand img{
    width:100%;
    height:auto;
    max-height:64px;     /* atur 56-80 sesuai logo Anda */
    object-fit:contain;
    display:block;
  }

  /* buang tulisan NUSANTARA UPDATE di HP */
  .m-brand-text{ display:none !important; }

  /* tanggal/jam di bawah logo */
  .m-date{
    width:100%;
    text-align:center;
    font-size:12px;
    font-weight:800;
    color:#111;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:8px 10px;
  }

  /* BREAKING BAR di HP: minimalis & tidak makan tempat */
  .breaking-bar{
    background:#fff;
    border-bottom:1px solid #e5e7eb;
  }

  .breaking-inner{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
  }

  /* badge jadi hanya dot */
  .breaking-badge{
    font-size:0 !important;      /* hilang teks BREAKING */
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }
  .breaking-badge .dot{
    width:10px;height:10px;border-radius:50%;
    background:#e11d48;
    box-shadow:0 0 0 0 rgba(225,29,72,.55);
    animation:pulseDotRed 1.2s infinite;
  }
  @keyframes pulseDotRed{
    0%{ box-shadow:0 0 0 0 rgba(225,29,72,.55); }
    70%{ box-shadow:0 0 0 9px rgba(225,29,72,0); }
    100%{ box-shadow:0 0 0 0 rgba(225,29,72,0); }
  }

  /* ticker full lebar */
  .breaking-left{ min-width:0; flex:1; }
  .breaking-track{
    min-width:0;
    flex:1;
    border-radius:999px;
  }

  /* jam di breaking bar jangan tampil di HP (karena sudah ada m-date) */
  .breaking-right{ display:none !important; }

  /* rapikan item */
  .breaking-item{ font-size:11px; font-weight:700; }
  .breaking-marquee{ animation-duration: 120s; }
}
@media (max-width: 768px){
  .m-brand img{
    width: 100% !important;
    max-width: 100% !important;
    height: 88px !important;      /* naikkan: 80–110 sesuai selera */
    max-height: none !important;
    object-fit: contain !important; /* tetap aman, tidak gepeng */
  }
}
@media (max-width: 768px){

  /* TOPBAR jadi 2 baris: row atas (menu+logo), row bawah (tanggal) */
  .m-topbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:10px 12px !important;
  }

  /* tombol menu */
  .m-btn{
    order:1 !important;
    align-self:center !important;
    margin:0 !important;
  }

  /* brand/ logo sejajar dengan tombol */
  .m-brand{
    order:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  /* logo lebih naik & rata tengah baris */
  .m-brand img{
    width:100% !important;
    height:44px !important;      /* tinggi baris logo */
    max-height:44px !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* tanggal pindah ke baris bawah full */
  .m-date{
    order:3 !important;
    flex:0 0 100% !important;
    width:100% !important;
    margin-top:6px !important;
  }
}
/* =========================
   RESET MOBILE HEADER (FINAL)
   - Hanya m-topbar + breaking bar
   - Tidak fixed (biar berita tidak ketutup)
========================= */
@media (max-width:780px){

  /* matikan semua fixed yang bikin konten ketutup */
  .site-header,
  .m-topbar,
  .nav-bar,
  .m-search-row{
    position: static !important;
    top:auto !important; left:auto !important; right:auto !important;
  }

  body{ padding-top: 0 !important; }
  main{ padding-top: 0 !important; }

  /* sembunyikan versi desktop */
  .header-main{ display:none !important; }
  .nav-bar{ display:none !important; }

  /* pastikan drawer tidak mengunci page (biar konten bisa scroll) */
  #mDrawer{ pointer-events:auto !important; }
}
@media (max-width:780px){

  /* topbar putih */
  .m-topbar{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb !important;
    padding:10px 12px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  /* tombol burger */
  .m-btn{
    order:1 !important;
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:24px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#111 !important;
  }

  /* brand sejajar burger dan mengisi sisa */
  .m-brand{
    order:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-decoration:none !important;
  }

  /* teks brand dimatikan sesuai request */
  .m-brand-text{ display:none !important; }

  /* LOGO: BESAR tapi tetap satu baris dengan burger */
  .m-brand img{
    height:52px !important;     /* kunci: jangan 44px lagi */
    width:auto !important;
    max-width:100% !important;
    display:block !important;
    object-fit:contain !important;
  }

  /* tanggal full width di bawah logo */
  .m-date{
    order:3 !important;
    flex:0 0 100% !important;
    width:100% !important;

    margin:6px 0 0 !important;
    text-align:center !important;
    font-size:12px !important;
    font-weight:800 !important;
    color:#111 !important;

    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    padding:9px 10px !important;
  }
}
@media (max-width:780px){

  .breaking-bar{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb !important;
  }

  .breaking-inner{
    padding:8px 12px !important;
    gap:10px !important;
    display:flex !important;
    align-items:center !important;
  }

  /* badge hanya dot */
  .breaking-badge{
    font-size:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }
  .breaking-badge .dot{
    width:10px !important;
    height:10px !important;
    border-radius:50% !important;
    background:#e11d48 !important;
  }

  /* ticker harus dapat ruang */
  .breaking-left{ flex:1 !important; min-width:0 !important; }
  .breaking-track{
    flex:1 !important;
    min-width:0 !important;
    border-radius:999px !important;
    overflow:hidden !important;
  }

  .breaking-item{
    font-size:11px !important;
    font-weight:700 !important;
    color:#111 !important;
  }

  /* jam di breaking bar hilang (jam ada di m-date) */
  .breaking-right{ display:none !important; }
}
@media (max-width:780px){

  /* BARIS ATAS: toggle + logo (tingginya sesuai kotakan Anda) */
  .m-topbar{
    /* ini mengatur tinggi area kotak */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* jadikan baris pertama punya tinggi tetap */
  .m-btn{
    height: 56px !important;   /* tinggi tombol ikut baris */
    width: 56px !important;
  }

  /* logo area ikut tinggi baris */
  .m-brand{
    height: 86px !important;     /* INI KUNCI: naikkan ke 90/96 jika perlu */
    display:flex !important;
    align-items:center !important;
  }

  /* logo mengisi tinggi baris */
  .m-brand img{
    height: 100% !important;     /* isi penuh area kotak */
    width: 100% !important;      /* biar terasa besar */
    max-width: 100% !important;
    object-fit: contain !important; /* tidak gepeng */
    display:block !important;
  }
}
@media (max-width:780px){
  .m-brand{ height: 86px !important; }
  .m-brand img{
    height:100% !important;
    width:auto !important;       /* lebar mengikuti rasio */
    max-width:100% !important;
    object-fit:contain !important;
  }
}
/* ===== FORCE LOGO HP BESAR (OVERRIDE FINAL) ===== */
@media (max-width:780px){

  /* paksa layout baris atas: burger + logo */
  header.site-header .m-topbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:10px 12px !important;
  }

  header.site-header .m-btn{
    width:52px !important;
    height:52px !important;
    padding:0 !important;
    margin:0 !important;
    font-size:24px !important;
  }

  /* INI KUNCI: tinggi area logo */
  header.site-header .m-brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:96px !important;          /* naikkan 90–120 sesuai kotakan */
    display:flex !important;
    align-items:center !important;
  }

  /* INI KUNCI: jangan biarkan rule lama mengunci max-height */
  header.site-header .m-brand img{
    height:96px !important;          /* sama dengan m-brand */
    width:100% !important;
    max-height:none !important;
    max-width:100% !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* tanggal full width bawah logo */
  header.site-header .m-date{
    flex:0 0 100% !important;
    width:100% !important;
    order:3 !important;
    margin-top:6px !important;
  }
}
.m-header {
    display: flex;
    align-items: center;      /* sejajar vertikal */
    justify-content: space-between; /* kiri - kanan */
    gap: 10px;                /* jarak antar elemen */
}
/* =========================
   MOBILE HEADER RESET (HP)
========================= */
@media (max-width:780px){

  /* sembunyikan versi desktop di HP */
  .header-main,
  .nav-bar{
    display:none !important;
  }

  /* TOPBAR: logo kiri kecil, toggle kanan */
  .m-topbar{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb !important;
    padding:10px 12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .m-brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    text-decoration:none !important;
  }
  .m-brand img{
    height:34px !important;       /* kecil tapi jelas */
    width:auto !important;
    max-width:72vw !important;    /* biar tidak nabrak tombol */
    object-fit:contain !important;
    display:block !important;
  }

  .m-btn{
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#111 !important;
    font-size:24px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* KATEGORI: geser kiri-kanan */
  .m-cats{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb !important;
    padding:8px 10px !important;

    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap !important;
    scrollbar-width:none;
  }
  .m-cats::-webkit-scrollbar{ display:none; }

  .m-cats a{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    border:1px solid #e5e7eb !important;
    background:#fff !important;
    color:#111 !important;
    text-decoration:none !important;
    font-weight:700 !important;
    font-size:12px !important;
  }
  .m-cats a.is-active{
    border-color:#e11d48 !important;
    color:#e11d48 !important;
    background:rgba(225,29,72,.06) !important;
  }

  /* BREAKING BAR versi HP: dot saja, tanpa jam */
  .breaking-bar{ display:block !important; }
  .breaking-bar .breaking-right{ display:none !important; }
  .breaking-bar .breaking-badge{
    font-size:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }
  .breaking-bar .breaking-badge .dot{
    width:10px;height:10px;border-radius:50%;
    background:#e11d48;
  }

  /* pastikan konten tidak ketutup fixed yang lama */
  .site-header{ position:static !important; }
  body{ padding-top:0 !important; }
  main{ padding-top:0 !important; }
}
@media (max-width:780px){

  /* pastikan tidak ada parent yang mematikan scroll horizontal */
  .site-header,
  .m-cats{
    overflow: visible !important;
  }

  .m-cats{
    display:flex !important;
    flex-wrap: nowrap !important;        /* KUNCI: jangan wrap */
    overflow-x: auto !important;         /* KUNCI: scroll horizontal */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;

    gap:10px !important;
    padding:8px 10px !important;
    width:100% !important;
    max-width:100% !important;

    /* hilangkan scrollbar tapi tetap bisa scroll */
    scrollbar-width: none;
  }
  .m-cats::-webkit-scrollbar{ display:none; }

  .m-cats a{
    flex: 0 0 auto !important;           /* KUNCI: item jangan mengecil/wrap */
    white-space: nowrap !important;
  }

  /* indikator “bisa digeser” */
  .m-cats{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}
@media (max-width:780px){

  /* jangan ada yang mematikan klik/scroll */
  .m-topbar, .m-cats, .breaking-bar, .site-header{
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
  }

  /* kategori wajib lebih lebar dari layar agar ada overflow */
  .m-cats{
    display:flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;

    white-space: nowrap !important;
    gap: 10px !important;
    padding: 10px 12px !important;

    scrollbar-width: none;
    touch-action: pan-x !important; /* penting: izinkan swipe horizontal */
  }
  .m-cats::-webkit-scrollbar{ display:none; }

  /* KUNCI: isi kategori jangan dipaksa wrap & pastikan konten bisa lebih lebar */
  .m-cats{
    min-width: 0 !important;
  }
  .m-cats > *{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* kalau ada rule lama yang bikin drawer/backdrop nutup */
  .m-drawer,
  .m-drawer-backdrop{
    pointer-events: none !important; /* backdrop sering menutup area */
  }

  /* tapi panel drawer tetap bisa diklik saat open (diatur via class is-open) */
  .m-drawer.is-open{ pointer-events: auto !important; }
  .m-drawer.is-open .m-drawer-panel{ pointer-events: auto !important; }
}
/* =========================
   FIX KLIK MOBILE (FINAL)
   ========================= */
@media (max-width: 780px){

  /* Pastikan header HP ada di layer atas dan bisa diklik */
  .site-header{ position: relative !important; z-index: 99990 !important; }

  .m-topbar{ position: relative !important; z-index: 99999 !important; pointer-events: auto !important; }
  .m-cats{ position: relative !important; z-index: 99998 !important; pointer-events: auto !important; }
  .m-cats a{ pointer-events: auto !important; }
  .m-btn{ pointer-events: auto !important; }

  /* Drawer: HARUS bisa diklik */
  #mDrawer{ pointer-events: none !important; }          /* default: klik tembus */
  #mDrawer.is-open{ pointer-events: auto !important; }  /* saat open: bisa klik backdrop untuk close */

  /* Panel drawer (di header.php class-nya m-panel) */
  #mDrawer .m-panel{ pointer-events: auto !important; }
}

/* HAPUS EFEK rule lama yang mematikan drawer selamanya */
#mDrawer,
#mDrawer.is-open{
  /* override rule lama */
  pointer-events: unset !important;
}
/* =========================================================
   HEADER FINAL (OVERRIDE) - taruh paling bawah file
   ========================================================= */

/* Desktop: gunakan header/nav bawaan desktop, mobile elements disembunyikan */
@media (min-width: 781px){
  .m-topbar, .m-cats, #mDrawer, .m-search-row { display: none !important; }
  .header-main, .nav-bar { display: block !important; }
}

/* Mobile: hanya m-topbar + m-cats (+ breaking jika kamu pakai) */
@media (max-width: 780px){

  /* Matikan total versi desktop di HP */
  .header-main, .nav-bar { display: none !important; }

  /* Pastikan header HP tidak ketimpa layer lain */
  header.site-header{ position: relative !important; z-index: 99990 !important; }
  .m-topbar{ display:flex !important; position: relative !important; z-index: 99999 !important; }
  .m-cats{ display:flex !important; position: relative !important; z-index: 99998 !important; }

  /* Mobile topbar: logo kiri, toggle kanan */
  .m-topbar{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb !important;
    padding:10px 12px !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .m-brand{ display:flex !important; align-items:center !important; min-width:0 !important; }
  .m-brand img{
    height:34px !important;
    width:auto !important;
    max-width:72vw !important;
    object-fit:contain !important;
    display:block !important;
  }
  .m-btn{
    width:44px !important;
    height:44px !important;
    border:0 !important;
    background:transparent !important;
    color:#111 !important;
    font-size:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
  }

  /* Mobile cats: swipe horizontal */
  .m-cats{
    background:#fff !important;
    border-bottom:1px solid #e5e7eb !important;
    padding:8px 10px !important;
    gap:10px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    white-space:nowrap !important;
    flex-wrap:nowrap !important;

    scrollbar-width:none;
    touch-action: pan-x !important;
  }
  .m-cats::-webkit-scrollbar{ display:none; }
  .m-cats a{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    border:1px solid #e5e7eb !important;
    background:#fff !important;
    color:#111 !important;
    font-weight:700 !important;
    font-size:12px !important;
    pointer-events:auto !important;
  }
  .m-cats a.is-active{
    border-color:#e11d48 !important;
    color:#e11d48 !important;
    background:rgba(225,29,72,.06) !important;
  }

  /* Drawer: default tidak nangkap klik, saat open baru aktif */
  #mDrawer{ pointer-events:none !important; }
  #mDrawer.is-open{ pointer-events:auto !important; }
  #mDrawer .m-panel{ pointer-events:auto !important; }

  /* Pastikan tidak ada rule lama yang mematikan klik */
  .m-topbar, .m-cats, .m-btn{ pointer-events:auto !important; }
}
/* =========================================================
   DESKTOP HEADER COMPACT (FINAL) - taruh paling bawah
   ========================================================= */
@media (min-width: 781px){

  /* header jangan terlalu tinggi */
  .site-header{ position: sticky; top:0; z-index: 50; }

  .header-main{ padding: 8px 0 !important; }

  /* kembalikan jadi 2 kolom: logo kiri, iklan kanan */
  .header-main-inner{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* hilangkan semua “tinggi paksa” akibat eksperimen */
  .brand-chip{
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .logo-mark{
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .logo-mark img{
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
  }

  /* iklan jangan bikin header makin tinggi */
  .header-ad{
    min-height: 60px !important;
    height: auto !important;
    align-self: center !important;
  }
}
@media (min-width: 781px){
  .logo-mark img{
    height: 78px !important;  /* naikkan: 70-100 */
    width: auto !important;
    max-width: 260px !important; /* batasi biar tidak makan slot iklan */
    object-fit: contain !important;
  }
}
.animate-ad {
  opacity: 0;
  transform: translateY(20px);
  animation: adFadeIn 0.8s ease-out forwards;
}

@keyframes adFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   VISIBILITY HELPER (FINAL)
   ========================================================= */
.m-only{ display:none !important; }
.d-only{ display:block !important; }

@media (max-width: 780px){
  .m-only{ display:block !important; }
  .d-only{ display:none !important; }
}
/* =========================================================
   MOBILE STICKY HEADER (FINAL)
   - m-topbar sticky di atas
   - m-cats sticky di bawahnya
   ========================================================= */
@media (max-width: 780px){

  :root{
    --mTopH: 56px;  /* tinggi topbar (logo + burger) */
    --mCatsH: 54px; /* tinggi bar kategori */
  }

  /* header area selalu di atas */
  header.site-header{
    position: relative !important;
    z-index: 99990 !important;
  }

  .m-topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: #fff !important;
  }

  .m-cats{
    position: sticky !important;
    top: var(--mTopH) !important;
    z-index: 99998 !important;
    background: #fff !important;
  }

  /* dorong konten agar tidak ketutup sticky header */
  main{
    padding-top: calc(var(--mTopH) + var(--mCatsH) + 10px) !important;
  }

  /* pastikan bisa klik & swipe */
  .m-topbar, .m-cats, .m-btn, .m-cats a{
    pointer-events: auto !important;
  }
  .m-cats{
    touch-action: pan-x !important;
  }
}