:root{--blue:#1268f3;--blue2:#0b56d8;--navy:#10294b;--ink:#10284b;--muted:#607695;--line:#e4ebf4;--bg:#f4f8fc;--card:#fff;--shadow:0 5px 18px rgba(20,53,94,.055)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,#f5f9fd,#edf4fa);font-size:14px}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.wrap{max-width:1440px;margin:auto;padding:0 40px}
header{height:73px;background:rgba(255,255,255,.94);border-bottom:1px solid #e8eef6;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.nav{height:100%;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:11px;min-width:275px}.brand-mark{width:61px;height:49px;display:grid;place-items:center;font-size:39px;line-height:1;filter:drop-shadow(0 2px 1px #c8d8eb)}.brand-name{font-weight:800;font-size:27px;letter-spacing:-1.2px;color:#102c52}.brand-tag{font-size:11px;color:#607695;margin-top:1px}.navlinks{display:flex;align-items:center;gap:29px;height:100%;flex:1}.navlinks a{height:100%;display:flex;align-items:center;font-size:12px;font-weight:650;position:relative}.navlinks a.active,.navlinks a:hover{color:var(--blue)}.navlinks a.active:after{display:none}.navtools{display:flex;align-items:center;gap:11px}.search-top{display:flex;align-items:center;background:#f0f4f9;border-radius:30px;padding:0 14px;height:38px;width:230px;color:#7185a2}.search-top input{border:0;background:transparent;outline:0;width:100%;padding:8px;font-size:12px}.iconbtn{border:1px solid #e5ebf4;background:#f5f8fc;border-radius:50%;width:36px;height:36px;color:var(--navy);font-size:16px}.login{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:11px 17px;font-size:12px;font-weight:700;box-shadow:0 4px 10px #1268f32a}.login:hover,.primary:hover{background:var(--blue2)}
main{padding:17px 0 13px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.hero{height:333px;border-radius:10px;overflow:hidden;position:relative;color:white;background:#1e476a;box-shadow:var(--shadow)}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:background-image .3s}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,25,43,.86) 0%,rgba(5,25,43,.53) 42%,rgba(5,25,43,.02) 100%),linear-gradient(0deg,rgba(0,0,0,.26),transparent 45%)}.hero-content{position:absolute;z-index:2;left:37px;top:34px;max-width:510px}.tag{display:inline-flex;align-items:center;padding:5px 13px;border-radius:30px;background:var(--blue);color:#fff;font-size:10px;font-weight:800;letter-spacing:.2px}.hero h1{font-size:31px;line-height:1.18;letter-spacing:-.7px;margin:10px 0 9px;font-weight:800}.hero p{font-size:13px;line-height:1.55;max-width:455px;margin:0 0 12px}.meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:inherit;font-size:11px}.meta span{display:inline-flex;align-items:center;gap:5px}.primary{display:inline-flex;align-items:center;gap:12px;background:var(--blue);color:white;border:0;border-radius:25px;padding:12px 21px;font-size:12px;font-weight:700;margin-top:15px}.hero-controls{position:absolute;z-index:3;right:22px;bottom:15px;display:flex;align-items:center;gap:9px}.hero-controls button{width:29px;height:29px;border:0;border-radius:50%;background:#0a2346c9;color:white;font-size:17px}.dots{display:flex;gap:6px}.dots button{width:8px;height:8px;padding:0;background:#ffffff88}.dots button.selected{background:#fff}
.categorybar{margin-top:14px;background:var(--card);border:1px solid #e8eef6;border-radius:10px;display:grid;grid-template-columns:repeat(8,1fr);padding:11px 4px;box-shadow:var(--shadow)}.category{border:0;border-right:1px solid #e7edf5;background:transparent;color:#203b60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:51px;font-size:11px;position:relative}.category:last-child{border:0}.category .cat-icon{font-size:20px}.category.active{color:var(--blue);font-weight:700}.category.active:after{display:none}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 13px}.section-head h2{font-size:23px;letter-spacing:-.5px;margin:0;font-weight:800}.section-head h2:after{content:"";display:block;width:57px;height:3px;background:var(--blue);border-radius:4px;margin-top:4px}.see-all{color:var(--blue);font-size:12px;font-weight:650}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.article-card{background:var(--card);border:1px solid #e8eef6;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;min-width:0}.article-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px #173c6514}.thumb{height:101px;position:relative;background:#dbe6f0;background-size:cover;background-position:center}.thumb .tag{position:absolute;bottom:-9px;left:16px;padding:5px 10px;font-size:9px}.tag.wisata{background:#0877ed}.tag.teknologi{background:#7425ed}.tag.pendidikan{background:#0ca65b}.tag.gayahidup{background:#ef7b0a}.tag.budaya{background:#bd4b88}.tag.bisnis{background:#168f9c}.card-body{padding:16px 17px 11px}.card-body h3{font-size:13px;line-height:1.4;margin:0 0 7px;font-weight:750;letter-spacing:-.1px}.card-body p{font-size:11px;line-height:1.45;color:var(--muted);margin:0 0 9px;min-height:32px}.card-meta{display:flex;align-items:center;gap:12px;color:#6a809e;font-size:9px;white-space:nowrap}.card-meta .arrow{color:var(--blue);font-size:15px;margin-left:auto}
.sidebar{display:flex;flex-direction:column;gap:15px}.sidebox{background:var(--card);border:1px solid #e8eef6;border-radius:9px;padding:15px;box-shadow:var(--shadow)}.sidebox h3{font-size:14px;margin:0 0 10px;font-weight:800}.side-search{display:flex;height:38px}.side-search input{min-width:0;flex:1;border:1px solid #dce5f0;border-radius:7px 0 0 7px;padding:0 12px;outline:0;font-size:12px}.side-search button{width:40px;border:0;border-radius:0 7px 7px 0;background:var(--blue);color:#fff;font-size:17px}.popular-title{font-size:16px!important;display:flex;align-items:center;gap:8px}.popular-list{display:flex;flex-direction:column;gap:14px}.popular-item{display:grid;grid-template-columns:100px 1fr;gap:13px;align-items:center;position:relative}.popular-img{height:66px;border-radius:6px;background-size:cover;background-position:center}.rank{position:absolute;left:-3px;top:-4px;background:var(--blue);color:white;border:2px solid white;border-radius:50%;height:25px;width:25px;display:grid;place-items:center;font-size:12px;font-weight:800}.popular-item h4{font-size:11px;line-height:1.35;margin:0 0 7px;font-weight:750}.popular-meta{display:flex;gap:12px;font-size:9px;color:#7186a1}.newsletter p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 11px}.email-field{height:36px;border:1px solid #dce5f0;border-radius:7px;display:flex;align-items:center;padding:0 11px;gap:8px;margin-bottom:9px;color:#6680a0}.email-field input{border:0;outline:0;min-width:0;width:100%;font-size:11px}.subscribe{height:33px;width:100%;border:0;border-radius:7px;background:var(--blue);color:#fff;font-size:11px;font-weight:700}.socials{display:flex;gap:10px;justify-content:space-between}.social{height:39px;width:39px;display:grid;place-items:center;border-radius:10px;color:white;font-size:18px;font-weight:800;box-shadow:0 3px 7px #122c501c}.fb{background:#1877f2}.ig{background:linear-gradient(45deg,#ffb23f,#e1306c,#833ab4)}.yt{background:#f00000}.xx{background:#111}.in{background:#0878b9}.empty{grid-column:1/-1;padding:35px;text-align:center;color:var(--muted);background:white;border-radius:8px}
footer{background:linear-gradient(110deg,#102847,#1b3558);color:#fff;margin-top:0;padding:17px 0 14px}.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.3fr .9fr;gap:30px}.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}.footer-brand .mark{font-size:31px}.footer-brand strong{font-size:20px}.footer-brand small{display:block;color:#c3d0e2;font-size:10px;margin-top:1px}.footer-about p{font-size:10px;color:#d0d9e7;line-height:1.5;max-width:310px;margin:0}.footer-col h4{font-size:11px;margin:0 0 7px}.footer-col a{display:block;font-size:10px;color:#d4deeb;margin:3px 0}.footer-cats{display:grid;grid-template-columns:1fr 1fr}.footer-social{display:flex;gap:8px;margin-bottom:12px}.footer-social span{height:25px;width:25px;border-radius:6px;display:grid;place-items:center;font-size:12px;background:#1268f3}.copyright{font-size:10px;color:#d4deeb;white-space:nowrap}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#102847;color:white;padding:12px 18px;border-radius:9px;box-shadow:0 8px 24px #0002;opacity:0;pointer-events:none;transition:.25s;z-index:50;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}
body.dark{--ink:#e9f1ff;--muted:#a9bad1;--line:#2b405b;--bg:#101d2f;--card:#172941;background:#101d2f;color:var(--ink)}body.dark header{background:#14243aee;border-color:#2b405b}body.dark .brand-name,body.dark .navlinks a,body.dark .category{color:#e9f1ff}body.dark .search-top,body.dark .iconbtn{background:#20344d;color:#dce8f8;border-color:#304560}body.dark .search-top input,body.dark .email-field input{color:#e9f1ff}body.dark .side-search input,body.dark .email-field{background:#172941;border-color:#344b66;color:#e9f1ff}body.dark .empty{background:#172941}
@media(max-width:1100px){.wrap{padding:0 22px}.brand{min-width:auto}.brand-name{font-size:23px}.nav{gap:20px}.navlinks{gap:17px}.search-top{width:180px}.layout{grid-template-columns:minmax(0,1fr) 270px}.hero h1{font-size:28px}.cards{gap:10px}.card-body{padding:15px 12px 10px}.card-meta{gap:7px}.footer-grid{gap:18px}}
@media(max-width:850px){header{height:auto}.nav{min-height:70px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;gap:12px}.brand{flex:1}.navlinks{order:3;flex-basis:100%;height:34px;justify-content:space-between}.navlinks a.active:after{display:none}.navtools{gap:7px}.search-top{width:160px}.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.popular{grid-row:span 2}.hero{height:320px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid .footer-col:last-child{grid-column:2/4}}
@media(max-width:600px){.wrap{padding:0 13px}.brand-mark{width:42px;font-size:32px}.brand-name{font-size:21px}.brand-tag{font-size:9px}.navtools{width:100%;order:2}.search-top{flex:1;width:auto}.login{padding:10px 12px}.navlinks{gap:10px;overflow:auto}.navlinks a{font-size:11px;white-space:nowrap}.hero{height:360px}.hero-content{left:21px;right:18px;top:26px}.hero h1{font-size:27px}.hero p{font-size:12px}.categorybar{grid-template-columns:repeat(4,1fr);row-gap:10px;padding:10px 3px}.category:nth-child(4){border-right:0}.category:nth-child(n+5){border-top:1px solid #e7edf5;padding-top:10px}.category.active:after{display:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.thumb{height:100px}.card-body h3{font-size:12px}.card-body p{font-size:10px;min-height:44px}.card-meta{font-size:8px;gap:6px;flex-wrap:wrap}.section-head h2{font-size:21px}.sidebar{grid-template-columns:1fr}.popular{grid-row:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}.footer-grid .footer-col:last-child{grid-column:auto}.copyright{white-space:normal}.hero-controls{right:12px;bottom:12px}}
@media(max-width:390px){.cards{grid-template-columns:1fr}.thumb{height:150px}.card-body p{min-height:0}.hero h1{font-size:24px}.hero-content{left:17px}.meta{gap:9px}.category{font-size:10px}}



/* Dropdown kategori navigasi utama */
.nav-dropdown{height:100%;display:flex;align-items:center;position:relative}
.nav-dropdown-toggle{height:100%;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:650;padding:0;white-space:nowrap}
.dropdown-chevron{font-size:15px;transition:transform .18s ease}
.nav-dropdown.open .dropdown-chevron{transform:rotate(180deg)}
.nav-submenu{display:none;position:absolute;top:calc(100% - 4px);left:-15px;min-width:185px;padding:7px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(15,39,70,.16);z-index:50}
.nav-dropdown.open .nav-submenu{display:block}
.nav-submenu a{display:block!important;height:auto!important;padding:10px 12px;border-radius:6px;font-size:12px!important;color:var(--ink)!important;white-space:nowrap}
.nav-submenu a:after{display:none!important}
.nav-submenu a:hover{background:rgba(18,104,243,.09);color:var(--blue)!important}
@media(max-width:850px){
 .nav-dropdown{height:34px;flex:0 0 auto}
 .nav-dropdown-toggle{height:34px;font-size:11px}
 .nav-submenu{top:100%;left:0}
}

/* Rapikan ikon panah dropdown kategori */
.nav-dropdown-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;vertical-align:middle}
.dropdown-chevron{display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;font-size:0;line-height:1;position:relative;transform:none}
.dropdown-chevron:before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);position:absolute;top:1px;left:2px;transition:transform .18s ease,top .18s ease}
.nav-dropdown.open .dropdown-chevron{transform:none}
.nav-dropdown.open .dropdown-chevron:before{transform:rotate(225deg);top:4px}

/* Perbaikan dropdown Kategori pada layar HP */
@media(max-width:850px){
  .navlinks{overflow:visible;position:relative;z-index:40;flex-wrap:nowrap}
  .nav-dropdown{position:relative;z-index:45}
  .nav-dropdown-toggle{white-space:nowrap;min-width:max-content}
  .nav-submenu{position:absolute;top:calc(100% + 4px);left:0;min-width:170px;max-width:min(220px, calc(100vw - 26px));max-height:55vh;overflow-y:auto;z-index:100;background:var(--card);box-shadow:0 12px 30px rgba(15,39,70,.22)}
  .nav-submenu a{display:block!important;padding:11px 12px;white-space:normal;line-height:1.35}
}
@media(max-width:600px){
  .navlinks{justify-content:flex-start;gap:clamp(12px,4vw,20px);overflow:visible}
  .nav-dropdown{flex-shrink:0}
  .nav-submenu{left:0}
}