/* ===== Portal Berita (Static + Admin LocalStorage) ===== */
:root{
  --bg:#f3f5f8; --card:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
  --nav:#0b2f4a; --nav2:#061f33; --accent:#e11d2e;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 12px; --max: 1200px;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--sans); color:var(--text); background:var(--bg)}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 16px}

/* Topbar */
.topbar{background:var(--nav2); color:#eaf2ff; font-size:12px}
.topbar__inner{display:flex; justify-content:space-between; align-items:center; padding:8px 0; gap:10px}
.topbar__left{display:flex; gap:10px; flex-wrap:wrap}
.topbar__btn{border:1px solid rgba(255,255,255,.18); padding:6px 10px; border-radius:6px; background:rgba(255,255,255,.06)}
.topbar__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topbar__icon{width:22px; height:22px; display:grid; place-items:center; border-radius:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-weight:700}
.topbar__link{opacity:.9}
.topbar__link:hover{opacity:1; text-decoration:underline}
.topbar__sep{width:1px; height:18px; background:rgba(255,255,255,.2)}

/* Brand */
.brand{background:linear-gradient(180deg, var(--nav) 0%, #0b2f4a 60%, #0a2740 100%); padding:18px 0; color:#fff}
.brand__inner{display:flex; align-items:center; justify-content:center}
.brand__logo{display:flex; align-items:center; gap:12px}
.logoMark{width:64px; height:64px; border-radius:12px; display:grid; place-items:center; background:#fff; color:var(--nav); font-weight:900; letter-spacing:.5px; box-shadow:var(--shadow)}
.logoText__big{font-size:34px; font-weight:900; letter-spacing:1px; line-height:1.05}
.logoText__big.red{color:var(--accent)}

/* Nav */
.nav{background:var(--nav2); border-bottom:1px solid rgba(255,255,255,.08)}
.nav__inner{display:flex; gap:14px; align-items:center; padding:10px 0; overflow:auto}
.nav a{color:#eaf2ff; font-weight:800; font-size:13px; white-space:nowrap; opacity:.9}
.nav a:hover{opacity:1}
.nav a.active{opacity:1; position:relative}
.nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:3px; background:var(--accent); border-radius:999px}

/* Dropdown */
.navItem{position:relative; display:inline-flex; align-items:center}
.dropBtn{color:#eaf2ff; font-weight:800; font-size:13px; opacity:.9; background:transparent; border:0; cursor:pointer; padding:0; white-space:nowrap}
.dropBtn:hover{opacity:1}
.dropMenu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:240px;
  background:#0b2337; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.25);
  padding:8px; display:none; z-index:10;
}
.dropMenu a{display:block; padding:10px 10px; border-radius:10px; opacity:.95}
.dropMenu a:hover{background:rgba(255,255,255,.08); opacity:1}
.navItem.open .dropMenu{display:block}

/* Layout */
.main{display:grid; grid-template-columns: 300px 1fr 300px; gap:16px; padding:16px 16px 0}
@media (max-width: 1180px){ .main{grid-template-columns: 1fr; padding:16px} .ad{display:none} }

/* Ads */
.ad__box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px; position:sticky; top:16px}
.ad__label{font-size:11px; color:var(--muted); margin-bottom:10px}
.ad__mock{height:520px; border-radius:10px; border:2px dashed var(--line); display:grid; place-items:center; color:var(--muted); font-weight:800}

/* Content grid */
.content__grid{display:grid; grid-template-columns: 1.7fr .8fr; gap:16px}
@media (max-width: 980px){ .content__grid{grid-template-columns: 1fr} }

/* Hero */
.hero{border-radius:var(--radius); overflow:hidden; background:#111; min-height:420px; position:relative; box-shadow:var(--shadow); display:block}
.hero__inner{position:absolute; inset:0}
.hero__img{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02)}
.hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%)}
.hero__content{position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff}
.hero__pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(225,29,46,.95); font-weight:900; font-size:12px}
.hero__title{margin:10px 0 8px; font-size:26px; line-height:1.2; font-weight:900}
.hero__meta{font-size:12px; opacity:.9}

/* Sidebar */
.sidebar{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.tabs{display:grid; grid-template-columns: repeat(3, 1fr); border-bottom:1px solid var(--line)}
.tab{padding:12px 10px; border:0; background:transparent; font-weight:900; cursor:pointer; color:#111}
.tab.active{color:var(--accent); border-bottom:3px solid var(--accent)}
.pane{display:none; padding:12px}
.pane.show{display:block}
.sideItem{display:grid; grid-template-columns: 74px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.sideItem:last-child{border-bottom:0}
.sideItem a{display:grid; grid-template-columns: 74px 1fr; gap:10px}
.sideThumb{width:74px; height:54px; border-radius:10px; background:#e5e7eb; background-size:cover; background-position:center}
.sideTitle{font-weight:900; font-size:13px; line-height:1.2}
.sideDate{font-size:12px; color:var(--muted); margin-top:4px}

/* Sections */
.section{margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.section__head{display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(--line); gap:12px}
.section__head h2{margin:0; font-size:16px}
.section__tools{display:flex; gap:10px; align-items:center}
.search{width:min(380px, 100%); padding:10px 12px; border-radius:999px; border:1px solid var(--line); outline:none}

.newsList{padding:14px; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
@media (max-width: 720px){ .newsList{grid-template-columns:1fr} }

.cardNews{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; cursor:pointer; transition:.15s transform, .15s box-shadow; display:block}
.cardNews:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.cardNews__img{height:160px; background:#e5e7eb; background-size:cover; background-position:center}
.cardNews__body{padding:12px}
.badge{display:inline-flex; padding:5px 8px; border-radius:999px; font-size:12px; font-weight:900; background:#111827; color:#fff}
.badge.red{background:var(--accent)}
.cardNews__title{margin:10px 0 6px; font-weight:900; line-height:1.25}
.meta{color:var(--muted); font-size:12px}
.muted{color:var(--muted)}

/* Breadcrumb + share */
.breadcrumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--muted); margin:10px 0 12px}
.breadcrumb a{color:var(--nav); font-weight:900}
.breadcrumb a:hover{text-decoration:underline}
.crumbSep{opacity:.6}

.shareRow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.shareBtn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; padding:9px 12px; border-radius:999px; font-weight:900; font-size:12px; cursor:pointer}
.shareBtn:hover{box-shadow: var(--shadow)}
.shareBtn.blue{border-color: rgba(59,130,246,.25)}
.shareBtn.dark{border-color: rgba(17,24,39,.25)}
.shareBtn.green{border-color: rgba(16,185,129,.25)}
.copyHint{font-size:12px; color:var(--muted)}

/* Tags */
.tagRow{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tagChip{display:inline-flex; border:1px solid var(--line); background:#fff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; color:#111827}
.tagChip:hover{box-shadow: var(--shadow)}

/* Pagination */
.pager{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:14px; border-top:1px solid var(--line); align-items:center}
.pager__left, .pager__right{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pageBtn{border:1px solid var(--line); background:#fff; padding:9px 12px; border-radius:10px; font-weight:900; cursor:pointer}
.pageBtn:disabled{opacity:.5; cursor:not-allowed}
.pagePill{border:1px solid var(--line); background:#fff; padding:8px 10px; border-radius:999px; font-size:12px; color:var(--muted); font-weight:900}

/* Detail */
.detailMain{grid-template-columns: 1fr 320px}
@media (max-width: 980px){ .detailMain{grid-template-columns:1fr} .detailSide{display:none} }
.detail__card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.detail__cover{height:360px; background:#e5e7eb; background-size:cover; background-position:center}
.detail__body{padding:16px}
.detail__cat{display:inline-flex; background:var(--accent); color:#fff; font-weight:900; font-size:12px; border-radius:999px; padding:6px 10px}
.detail__title{margin:10px 0 8px; font-size:26px; line-height:1.2}
.detail__meta{color:var(--muted); font-size:13px}
.detail__text{margin-top:14px; line-height:1.8; color:#111827; white-space:pre-line}

/* Admin */
.adminMain{grid-template-columns: 1fr; padding:16px}
.adminGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
@media (max-width: 980px){ .adminGrid{grid-template-columns:1fr} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.panel__head{display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(--line); gap:10px; flex-wrap:wrap}
.panel__head h2{margin:0; font-size:16px}
.panel__body{padding:14px}
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:top}
.table th{color:var(--muted); font-size:12px}
.rowActions{display:flex; gap:8px; flex-wrap:wrap}
.smallBtn{border:1px solid var(--line); background:#fff; padding:7px 9px; border-radius:10px; font-weight:900; font-size:12px; cursor:pointer}
.smallBtn.danger{border-color: rgba(225,29,46,.35); color: var(--accent)}
.smallBtn:hover{box-shadow: var(--shadow)}
.field{display:grid; gap:6px; margin-bottom:12px}
.field label{font-size:12px; color:var(--muted); font-weight:900}
.input, textarea, select{border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-family:inherit; font-size:14px; outline:none; background:#fff}
textarea{min-height:130px; resize:vertical}
.help{font-size:12px; color:var(--muted)}
.hr{height:1px; background:var(--line); margin:12px 0}

/* Footer */
.footer{padding:18px 0 28px}
.footer__inner{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--muted)}


/* ===== Dropdown fix (LAINNYA) ===== */
/* Navbar sebelumnya pakai overflow:auto, bikin dropdown ke-clip. Ini bikin dropdown bisa muncul. */
.nav__inner{
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}
/* Pastikan dropdown berada di atas elemen lain */
.dropMenu{ z-index: 9999; }


/* ===== Dropdown fix v2 (LAINNYA) ===== */
/* Pastikan dropdown tidak ke-clip dan bisa tampil tanpa scroll manual */
.nav, .nav__inner{ overflow: visible !important; }
.nav__inner{
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative;
}
/* Mode dropdown 'fixed' supaya posisinya mengikuti tombol (tidak ikut scroll container) */
.dropMenu.isFixed{
  position: fixed !important;
}