@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
:root{--navy:#071c3c;--navy2:#0b2b57;--red:#d21f26;--gold:#c79a35;--line:#e6e9ef;--ink:#111827;--muted:#667085;--bg:#fff;--soft:#f5f7fb;font-family:Arial,Helvetica Neue,sans-serif;color:var(--ink)}body{margin:0;background:#fff}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer;border:0}input,textarea,select{font:inherit}.ticker{height:42px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 max(calc((100vw - 1320px)/2),28px);font-size:13px;gap:22px}.ticker strong{height:42px;background:var(--red);display:flex;align-items:center;padding:0 20px;letter-spacing:.3px}.ticker time{opacity:.9;flex-shrink:0}.ticker-window{flex:1;overflow:hidden;white-space:nowrap;height:42px;display:flex;align-items:center}.ticker-scroll{display:inline-flex;align-items:center;gap:30px;min-width:max-content;animation:newsTicker 44s linear infinite}.ticker-scroll:hover{animation-play-state:paused}.ticker-scroll a{font-size:13px;color:#fff;display:inline-flex;gap:30px;align-items:center}.ticker-scroll a span{color:#e7ae45;font-weight:700}@keyframes newsTicker{0%{transform:translate(0)}to{transform:translate(-50%)}}.masthead{max-width:1320px;margin:auto;min-height:108px;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand img{width:92px;height:84px;object-fit:contain}.brand h1{font-size:34px;color:var(--navy);margin:0;line-height:1.05;letter-spacing:-1px}.brand h1 span{color:var(--red)}.brand p{font-size:17px;font-weight:700;margin:5px 0 2px}.brand small{color:var(--red);font-weight:700}.tagline{font-size:18px;font-weight:700;line-height:1.35}.tagline b{color:var(--navy2)}.tagline em{font-style:normal;color:var(--red)}.header-actions{display:flex;gap:10px}.header-actions a,.header-actions button{height:45px;border-radius:5px;padding:0 18px;font-weight:700;font-size:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase}.outline{background:#fff;border:1px solid var(--navy)!important;color:var(--navy)}.redbtn{background:var(--red);color:#fff}.nav{height:52px;background:var(--navy);display:flex;padding:0 max(calc((100vw - 1320px)/2),28px);align-items:center}.links{display:flex;height:100%}.links a{color:#fff;font-size:11px;font-weight:700;padding:0 12px;display:flex;align-items:center;white-space:nowrap}.search{margin-left:auto;color:#fff;display:flex;align-items:center;gap:6px}.search input{background:transparent;border:0;color:#fff;width:34px;transition:.2s;outline:0}.search input:focus{width:170px;border-bottom:1px solid #fff}.search input::placeholder{color:#cdd7e6}.hamburger{display:none;background:transparent;color:#fff}.layout{max-width:1320px;margin:16px auto 24px;display:grid;grid-template-columns:repeat(3,1fr) 290px;gap:14px}.lead{grid-column:span 2;grid-row:span 2}.featured{height:466px;display:block;position:relative;border-radius:6px;overflow:hidden;background:#101827}.featured img{width:100%;height:100%;object-fit:cover}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:116px 42px 30px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.86),transparent 80%);display:flex;align-items:flex-start;flex-direction:column;justify-content:flex-end}.overlay label,.compact label{font-size:10px;background:var(--red);padding:6px 8px;border-radius:3px;color:#fff;font-weight:700}.overlay small{display:flex;gap:6px;margin:12px 0}.overlay h2{font-size:32px;line-height:1.18;max-width:650px;margin:0 0 14px}.overlay p{max-width:590px;line-height:1.45;margin:0 0 20px}.overlay button{background:var(--red);color:#fff;font-weight:700;padding:12px 18px;border-radius:4px;display:flex;gap:7px;align-items:center}.latest-box,.announcements,.category-panel,.sidebar{border:1px solid var(--line);border-radius:6px;padding:0 12px;background:#fff}.section-title{height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:8px}.section-title h2{font-size:16px;color:var(--navy);margin:0;font-weight:800}.section-title h2:before{content:"";width:4px;height:18px;background:var(--red);display:inline-block;vertical-align:middle;margin-right:8px}.section-title a{font-size:11px;color:#2763bd;display:flex;align-items:center}.announcements .section-title{background:var(--red);height:51px;padding:0 14px;margin:0 -12px 8px;border-radius:5px 5px 0 0}.announcements .section-title h2,.announcements .section-title a{color:#fff}.announcements .section-title h2:before{display:none}.compact{padding:8px 0;display:flex;gap:10px;border-bottom:1px solid var(--line)}.compact:last-child{border-bottom:0}.compact img{height:64px;width:96px;border-radius:4px;object-fit:cover}.compact label{font-size:8px;padding:3px 5px}.compact h3{font-size:13px;line-height:1.35;margin:5px 0;color:#111}.compact small,.announcement small{font-size:11px;color:var(--muted);display:block}.announcement{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.announcement svg{background:#fff0f0;color:var(--red);padding:9px;border-radius:50%;width:42px;height:42px;flex-shrink:0}.announcement b{font-size:13px;display:block;line-height:1.35;margin-bottom:5px}.category-panel{min-height:225px}.gallery{grid-column:span 3;border:1px solid var(--line);padding:0 12px;border-radius:6px}.gallery>div{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:4px 0 13px}.gallery img{height:83px;width:100%;object-fit:cover;border-radius:5px}.sidebar{grid-column:4;grid-row:3/span 2}.rank{padding:11px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:13px}.rank b{background:var(--red);color:#fff;padding:1px 9px;border-radius:3px}.follow{background:var(--navy);color:#fff;border-radius:5px;padding:13px;margin-top:18px}.follow h3{font-size:14px;margin:0 0 11px}.follow p{font-size:12px;margin:0}.demo-notice,.sync{position:fixed;bottom:16px;left:16px;background:#fff7e8;border:1px solid #ebc668;color:#6e4b00;border-radius:7px;padding:12px 15px;display:flex;align-items:center;gap:8px;font-size:13px;z-index:4}.demo-notice code{background:#fff0c9;padding:2px 5px}.footer{background:var(--navy);color:#e9effa;padding:28px max(calc((100vw - 1320px)/2),28px) 18px;display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr;gap:33px;position:relative;padding-bottom:60px}.foot-brand{display:flex;gap:15px}.foot-brand img{height:74px;width:88px;object-fit:contain}.footer h2{font-size:18px;margin:2px 0 8px}.footer h3{font-size:13px;margin:8px 0 12px}.footer p,.footer small{font-size:12px;line-height:1.55;margin:4px 0;color:#dbe4f1}.footer p svg{vertical-align:middle;margin-right:8px}.copyright{position:absolute;bottom:18px;left:0;right:0;text-align:center}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#030e219e;z-index:10;display:flex;justify-content:center;align-items:center}.aspiration-form{background:#fff;width:min(470px,94vw);padding:28px;border-radius:10px;display:flex;flex-direction:column;gap:12px;position:relative}.aspiration-form h2{margin:0;color:var(--navy)}.aspiration-form p{font-size:14px;color:var(--muted);margin:0 0 5px;line-height:1.45}.aspiration-form input,.aspiration-form textarea{border:1px solid #d6dbe4;border-radius:5px;padding:11px;outline:none}.aspiration-form .close{position:absolute;right:16px;top:16px;background:#fff}.aspiration-form .submit{padding:13px;background:var(--red);color:#fff;font-weight:700;border-radius:4px}.notice{color:var(--red)!important;font-weight:700}.article-header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 960px)/2),26px)}.mini-brand{display:flex;gap:12px;align-items:center;color:var(--red);font-size:20px}.mini-brand span{color:var(--navy)}.mini-brand img{height:52px;width:62px;object-fit:contain}.article-header button{background:var(--red);color:#fff;padding:11px 15px;display:flex;gap:7px;border-radius:4px}.story{max-width:820px;margin:44px auto 70px}.story .back{display:block;color:var(--muted);font-size:14px;margin-bottom:28px}.story label{font-weight:700;color:var(--red);font-size:13px}.story h1{font-size:43px;line-height:1.15;color:var(--navy);margin:14px 0}.story .meta{color:var(--muted);margin-bottom:28px}.story-image{width:100%;max-height:460px;object-fit:cover;border-radius:7px;margin-bottom:26px}.story p{font-size:18px;line-height:1.75}.story .leadtext{font-weight:700}.auth-screen{min-height:100vh;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}.auth-logo{display:flex;align-items:center;gap:13px;color:var(--red)}.auth-logo img{width:82px;height:70px;object-fit:contain}.auth-logo h1{font-size:26px}.auth-logo span{color:var(--navy)}.login-box{background:#fff;border:1px solid var(--line);box-shadow:0 16px 45px #dbe1ec;width:min(400px,92vw);padding:32px;display:flex;flex-direction:column;gap:14px;border-radius:10px}.login-box h2{margin:0;color:var(--navy)}.login-box p{color:var(--muted);font-size:14px;margin:0 0 10px}.login-box input{padding:13px;border:1px solid #d3d9e3;border-radius:5px}.login-box button{background:var(--red);color:#fff;padding:13px;border-radius:5px;font-weight:700;display:flex;justify-content:center;gap:8px}.login-box>a{text-align:center;color:var(--navy);font-size:13px}.setup{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:20px}.setup img{width:110px;height:auto;object-fit:contain}.setup p{max-width:500px;line-height:1.6;color:var(--muted)}.setup a,.setup button{background:var(--red);color:#fff;padding:12px 18px;border-radius:4px}.dashboard{min-height:100vh;background:var(--soft);display:grid;grid-template-columns:238px 1fr;grid-template-rows:68px 1fr}.dash-head{grid-column:span 2;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 26px}.dash-head a{display:flex;align-items:center;gap:12px}.dash-head img{height:54px;width:66px;object-fit:contain}.dash-head>div{display:flex;gap:22px;align-items:center;font-size:13px}.dash-head button{display:flex;align-items:center;gap:7px;background:var(--red);color:#fff;border-radius:4px;padding:10px 13px}.dash-nav{background:#fff;border-right:1px solid var(--line);padding:24px 14px}.dash-nav h2{font-size:19px;color:var(--navy);margin:0 0 24px;padding:0 9px}.dash-nav button,.dash-nav a{width:100%;height:46px;display:flex;align-items:center;gap:11px;padding:0 13px;border-radius:6px;background:#fff;color:var(--navy);font-weight:700;margin-bottom:6px}.dash-nav svg{width:18px}.dash-nav .active{background:var(--red);color:#fff}.dash-main{padding:32px;max-width:1050px}.dash-main h1{color:var(--navy);margin-top:0}.dash-notice{background:#e8f3ea;color:#1f622c;border-radius:5px;padding:13px 15px;margin-bottom:18px;display:flex;justify-content:space-between}.editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;border:1px solid var(--line);padding:22px;border-radius:7px}.editor input,.editor textarea,.editor select,.announcement-editor input,.announcement-editor select{border:1px solid #d2d9e4;border-radius:4px;padding:12px;background:#fff}.editor .wide{grid-column:span 2}.article-content{line-height:1.6}.upload{height:47px;display:flex;align-items:center;gap:10px;border:1px dashed #afbbc9;border-radius:4px;padding:0 12px;color:var(--navy);font-size:13px}.upload svg{width:20px}.upload input{display:none}.check{display:flex;align-items:center;gap:9px;font-size:14px}.publish{background:var(--red);color:#fff;border-radius:4px;height:47px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}.cancel{height:47px;border:1px solid var(--line);background:#fff;border-radius:4px}.manage-title{margin-top:34px;color:var(--navy)}.manage-list{background:#fff;border:1px solid var(--line);border-radius:7px}.manage-list>div{display:flex;align-items:center;padding:14px 17px;border-bottom:1px solid var(--line);gap:10px}.manage-list>div:last-child{border:0}.manage-list>div>div{flex:1;display:flex;flex-direction:column;gap:5px}.manage-list label{color:var(--red);font-size:10px;font-weight:700}.manage-list small{color:var(--muted);font-size:12px}.manage-list button{background:#f3f5f9;border-radius:4px;padding:9px;color:var(--navy)}.manage-list svg{width:16px;height:16px}.announcement-editor{background:#fff;border:1px solid var(--line);padding:20px;border-radius:7px;display:grid;grid-template-columns:1fr 150px 120px;gap:12px;margin-bottom:24px}.announcement-editor button{background:var(--red);color:#fff;border-radius:4px;font-weight:700}@media(max-width:1120px){.masthead{padding:14px 22px}.brand h1{font-size:27px}.tagline{display:none}.links a{padding:0 12px}.layout{margin:14px 20px;grid-template-columns:repeat(2,1fr)}.lead{grid-column:span 2}.latest-box,.announcements{grid-row:auto}.sidebar{grid-column:span 2;grid-row:auto}.gallery{grid-column:span 2}.footer{grid-template-columns:1fr 1fr}}@media(max-width:720px){.ticker{padding:0;gap:10px}.ticker time{display:none}.masthead{display:block;padding:13px 16px}.brand img{width:73px;height:65px;object-fit:contain}.brand h1{font-size:23px}.brand p{font-size:13px}.header-actions{margin-top:16px}.nav{padding:0 14px;height:auto;min-height:50px;flex-wrap:wrap}.hamburger{display:block;height:50px}.links{display:none;width:100%;height:auto;flex-direction:column;order:3}.links.active{display:flex}.links a{height:44px}.search{margin-left:auto}.layout{display:flex;flex-direction:column;margin:12px}.featured{height:420px}.overlay{padding:26px}.overlay h2{font-size:26px}.gallery>div{grid-template-columns:repeat(3,1fr)}.footer{display:block;padding:25px 20px 56px}.footer>div{margin-bottom:22px}.story{padding:20px;margin:12px auto}.story h1{font-size:31px}.story p{font-size:16px}.dashboard{display:block}.dash-head{height:66px}.dash-head span{display:none}.dash-nav{display:flex;gap:6px;padding:10px;overflow:auto}.dash-nav h2{display:none}.dash-nav button,.dash-nav a{min-width:130px;margin:0}.dash-main{padding:18px}.editor,.announcement-editor{display:flex;flex-direction:column}.editor .wide{grid-column:auto}}.inner-page{max-width:1320px;margin:24px auto 42px;padding:0}.page-head{padding:28px 32px;margin-bottom:22px;border-radius:8px;background:linear-gradient(110deg,var(--navy),#113769);color:#fff;position:relative;overflow:hidden}.page-head:after{content:"";position:absolute;width:240px;height:240px;right:-70px;top:-90px;border-radius:50%;background:#d21f2647}.page-head h1{font-size:34px;margin:0 0 8px;position:relative;z-index:1}.page-head p{font-size:16px;line-height:1.55;margin:0;max-width:760px;color:#e1e8f5;position:relative;z-index:1}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px}.article-tile{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s}.article-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px #071c3c1a}.article-tile img{height:185px;width:100%;object-fit:cover}.article-tile div{padding:16px}.article-tile small{font-size:10px;color:var(--red);font-weight:700}.article-tile h2{font-size:18px;line-height:1.35;color:var(--navy);margin:9px 0}.article-tile p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 13px}.article-tile span{font-size:12px;color:var(--muted)}.sub-heading{border-bottom:1px solid var(--line);margin:30px 0 17px}.sub-heading h2{font-size:22px;color:var(--navy);margin:0 0 12px}.sub-heading h2:before{content:"";height:22px;width:5px;background:var(--red);display:inline-block;vertical-align:middle;margin-right:10px}.full-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:30px}.full-gallery figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.full-gallery img{height:190px;width:100%;object-fit:cover;display:block}.full-gallery figcaption{padding:13px 14px 16px}.full-gallery small{font-size:10px;font-weight:700;color:var(--red);display:block;margin-bottom:5px}.full-gallery b{display:block;color:var(--navy);font-size:16px;margin-bottom:6px}.full-gallery p{font-size:13px;line-height:1.45;color:var(--muted);margin:0}.figure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.figure-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.figure-card img{width:100%;height:235px;object-fit:cover}.figure-card div{padding:17px}.figure-card small{font-size:11px;font-weight:700;color:var(--red)}.figure-card h2{font-size:20px;color:var(--navy);margin:8px 0}.figure-card p{font-size:14px;line-height:1.55;color:var(--muted)}.figure-card button{background:transparent;color:var(--red);font-weight:700;display:flex;align-items:center;gap:3px;padding:0}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.download-card{display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:8px;background:#fff}.download-card>svg{background:#fdf1f1;color:var(--red);border-radius:50%;padding:12px;width:53px;height:53px;flex-shrink:0}.download-card small{font-size:11px;color:var(--red);font-weight:700}.download-card h2{font-size:18px;line-height:1.35;color:var(--navy);margin:8px 0}.download-card p{font-size:13px;line-height:1.5;color:var(--muted)}.download-card a{display:inline-block;background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:10px 13px;border-radius:4px}.notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}.notice-card{border:1px solid var(--line);border-radius:8px;background:#fff;padding:20px;display:flex;gap:14px}.notice-card svg{color:var(--red);flex-shrink:0}.notice-card h3{color:var(--navy);font-size:17px;margin:0 0 8px}.notice-card small{color:var(--muted)}.notice-card p{font-size:13px;color:var(--muted);line-height:1.5}.about-layout .about-copy{padding:25px 28px;border:1px solid var(--line);border-radius:8px;background:#fff}.about-copy h2{color:var(--navy);margin-top:0}.about-copy p{line-height:1.75;color:#344054}.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 28px}.value-cards div{padding:22px;border-left:5px solid var(--red);background:var(--soft);border-radius:5px}.value-cards b{font-size:20px;color:var(--navy)}.value-cards p{color:var(--muted);margin-bottom:0;line-height:1.5}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-layout section{padding:28px;border:1px solid var(--line);border-radius:8px;background:#fff}.contact-layout section h2{color:var(--navy);margin-top:0}.contact-layout section p{display:flex;align-items:center;gap:8px;color:var(--muted);line-height:1.55}.contact-layout section button{display:flex;align-items:center;gap:7px;background:var(--red);color:#fff;padding:13px 18px;border-radius:4px;font-weight:700;margin-top:20px}.contact-layout .full-gallery{grid-template-columns:1fr 1fr}.footer-admin{display:inline-flex;gap:6px;align-items:center;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:8px 11px;color:#fff;font-size:12px;margin-top:9px}.footer a:hover{color:#fff}.article-ticker time{display:none}@media(max-width:1120px){.inner-page{margin:18px 20px}.article-grid,.full-gallery,.figure-grid,.download-grid,.notice-grid{grid-template-columns:repeat(2,1fr)}.links a{padding:0 9px;font-size:10px}}@media(max-width:720px){.ticker{padding:0;height:40px}.ticker strong{font-size:10px;padding:0 10px;height:40px}.ticker-window{height:40px}.ticker-scroll{animation-duration:36s}.inner-page{margin:12px}.page-head{padding:22px 18px}.page-head h1{font-size:28px}.article-grid,.full-gallery,.figure-grid,.download-grid,.notice-grid,.value-cards,.contact-layout{grid-template-columns:1fr}.article-tile img,.full-gallery img{height:auto;max-height:230px}.contact-layout .full-gallery{grid-template-columns:1fr}.nav .links a{font-size:12px}}.top-tools{display:flex;flex-direction:column;align-items:flex-end;gap:11px;min-width:292px}.top-search{height:43px;display:flex;align-items:center;border:1px solid #d7dee8;border-radius:6px;background:#fff;overflow:hidden;color:var(--navy);width:292px}.top-search svg{margin-left:12px;flex-shrink:0}.top-search input{flex:1;min-width:0;height:100%;padding:0 9px;border:0;outline:0;color:var(--ink)}.top-search input::placeholder{color:#8b96a8}.top-search button{height:100%;padding:0 14px;background:var(--red);color:#fff;font-size:12px;font-weight:700}.top-tools .aspirasi{height:40px;padding:0 14px;font-size:11px;border-radius:5px;display:flex;align-items:center;gap:7px}.social-links{display:flex;align-items:center;gap:7px}.social-links a,.social-links span{width:33px;height:33px;border-radius:50%;display:flex;align-items:center;justify-content:center}.top-tools .social-links a{background:var(--navy);color:#fff}.top-tools .social-links a:hover{background:var(--red)}.top-tools .social-links .inactive{background:#e8ecf2;color:#a7b0be;cursor:not-allowed}.follow .social-links{margin-top:10px}.follow .social-links a{background:#ffffff26;color:#fff}.follow .social-links a:hover{background:var(--red)}.follow .social-links .inactive{background:#ffffff14;color:#ffffff61}.footer .social-links{margin-top:13px}.footer .social-links a{color:#fff;background:#ffffff21}.footer .social-links a:hover{background:var(--red)}.footer .social-links .inactive{background:#ffffff12;color:#566b89}.pagination{display:flex;justify-content:center;align-items:center;gap:7px;padding:9px 0 30px}.pagination button{height:39px;min-width:40px;border:1px solid #d7dee8;background:#fff;color:var(--navy);border-radius:5px;font-weight:700;font-size:13px;display:flex;justify-content:center;align-items:center;gap:4px;padding:0 12px}.pagination button:hover:not(:disabled),.pagination button.active{background:var(--red);border-color:var(--red);color:#fff}.pagination button:disabled{opacity:.45;cursor:not-allowed}.back-top{position:fixed;right:22px;bottom:22px;z-index:8;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 9px 24px #5a070d4d}.back-top:hover{background:var(--navy)}@media(max-width:1200px){.masthead{flex-wrap:wrap}.top-tools{width:100%;flex-direction:row;align-items:center;justify-content:flex-end}.top-search{width:300px}}@media(max-width:720px){.top-tools{margin-top:16px;width:100%;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.top-tools .social-links{grid-column:span 2}.top-search{width:100%}.top-tools .aspirasi{height:43px}.pagination{gap:4px;flex-wrap:wrap}.pagination button{height:36px;padding:0 9px;font-size:12px}.back-top{right:14px;bottom:14px;width:44px;height:44px}.masthead{padding-bottom:14px}}.masthead{gap:18px}.top-tools{min-width:320px}.top-search{width:330px}.tags{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 13px}.tags a{font-size:11px;font-weight:700;background:#edf2f8;color:var(--navy);padding:5px 8px;border-radius:18px;transition:.16s}.tags a:hover{background:var(--red);color:#fff}.article-tile .tags{margin:10px 0}.article-tile span{display:flex;align-items:center;gap:5px}.popular-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.popular-item strong{height:27px;width:27px;min-height:27px;min-width:27px;background:var(--red);border-radius:50%;display:inline-flex;justify-content:center;align-items:center;color:#fff;font-size:12px;flex-shrink:0;box-sizing:border-box}.popular-item b{font-size:12.5px;line-height:1.35;display:block;color:var(--navy);margin-bottom:5px}.popular-item small{color:var(--muted);font-size:11px;display:flex;align-items:center;gap:4px}.side-block{margin-top:18px;padding:15px 12px;background:#f5f7fb;border-radius:6px}.side-block h3{font-size:13px;display:flex;align-items:center;gap:6px;color:var(--navy);margin:0 0 12px}.tag-cloud{display:flex;gap:7px;flex-wrap:wrap}.tag-cloud a{font-size:11px;font-weight:700;padding:7px 9px;border-radius:20px;background:#fff;border:1px solid #e0e5ee;color:var(--navy);display:flex;gap:5px;align-items:center}.tag-cloud a:hover{background:var(--red);color:#fff;border-color:var(--red)}.tag-cloud small{height:17px;min-width:17px;border-radius:10px;background:var(--red);color:#fff;text-align:center;line-height:17px;font-size:10px}.tag-cloud a:hover small{background:#fff;color:var(--red)}.story .tags{margin-top:30px}.share-article{margin-top:32px;padding:18px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px;color:var(--navy)}.story .meta{display:flex;align-items:center;gap:6px}.contact-layout{grid-template-columns:minmax(360px,720px)}.contact-layout section{max-width:760px}.empty{padding:28px;text-align:center;color:var(--muted);background:#f8fafc;border-radius:6px}.small-editor{max-width:700px}.social-editor{display:flex;flex-direction:column;max-width:760px}.social-input{width:100%;display:grid;grid-template-columns:25px 105px 1fr;align-items:center;gap:12px;color:var(--navy);font-weight:700}.social-input input{width:100%}.admin-help{padding:15px;background:#fff7e8;border-radius:6px;color:#805c11;max-width:760px}.dashboard .manage-list label{max-width:100%;white-space:normal}.dashboard .upload{cursor:pointer}.dashboard .editor select,.dashboard .editor input,.dashboard .editor textarea{min-width:0}.article-page .footer{margin-top:0}@media(max-width:1280px){.masthead{padding:14px 20px}.brand h1{font-size:29px}.links a{padding:0 8px;font-size:10px}.layout{margin-left:20px;margin-right:20px}}@media(max-width:980px){.masthead{flex-direction:column;align-items:flex-start}.top-tools{width:100%;display:grid;grid-template-columns:1fr auto;min-width:0}.top-tools .social-links{grid-column:span 2;order:1}.top-search{order:2;width:100%}.top-tools .aspirasi{order:3}.nav{flex-wrap:wrap;height:auto;min-height:52px}.hamburger{display:block}.links{display:none;width:100%;height:auto;flex-direction:column;order:3;padding-bottom:10px}.links.active{display:flex}.links a{font-size:12px;height:42px;padding:0 15px}.layout{display:flex;flex-direction:column}.lead,.gallery,.sidebar{grid-column:auto;grid-row:auto}.sidebar{order:10}}@media(max-width:720px){.brand{align-items:flex-start}.brand img{width:65px;height:63px}.brand h1{font-size:21px;letter-spacing:-.5px}.brand p{font-size:12px;line-height:1.35}.brand small{font-size:11px}.ticker strong{min-width:98px}.ticker time{display:none}.featured{height:405px}.overlay{padding:22px}.overlay h2{font-size:23px}.overlay p{font-size:14px}.latest-box,.announcements,.category-panel,.sidebar,.gallery{padding-left:10px;padding-right:10px}.inner-page{margin:10px}.page-head h1{font-size:25px}.page-head p{font-size:14px}.full-gallery figure,.article-tile,.figure-card,.download-card{border-radius:7px}.share-article{flex-direction:column;align-items:flex-start}.story .meta{flex-wrap:wrap}.dashboard{display:flex;flex-direction:column}.dash-head{grid-column:auto;padding:0 13px}.dash-head b{font-size:12px}.dash-head>div span{display:none}.dash-nav{display:flex;overflow-x:auto;gap:5px;padding:10px;background:#fff}.dash-nav h2{display:none}.dash-nav button,.dash-nav a{min-width:125px;margin:0}.dash-main{padding:14px}.dash-main h1{font-size:24px}.editor{display:flex;flex-direction:column;padding:14px}.editor .wide{grid-column:auto}.social-input{grid-template-columns:25px 1fr}.social-input input{grid-column:span 2}.manage-list>div{padding:11px;gap:5px}.manage-list b{font-size:13px}}.article-tile .tile-image{display:block}.article-tile h2 a{color:inherit}.article-tile h2 a:hover{color:var(--red)}.article-detail-layout{max-width:1320px;margin:26px auto 46px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}.article-story.story{max-width:none;margin:0;padding:0 6px 30px 0}.article-story .back{margin-bottom:23px}.article-story h1{font-size:42px;max-width:900px}.article-story .story-image{max-height:520px}.article-sidebars{display:flex;flex-direction:column;gap:16px;position:sticky;top:18px}.article-side-box{border:1px solid var(--line);border-radius:7px;padding:0 13px;background:#fff;overflow:hidden}.article-side-box .compact img{height:69px;width:99px}.article-side-box .section-title a{display:none}.article-side-box .popular-item:last-child,.article-side-box .compact:last-child{border-bottom:0}.article-tag-block{margin:0 -13px;padding:18px 14px;background:#f5f7fb}.wa-channel{margin:34px 0 25px;padding:21px 22px;border-radius:9px;background:#edf9f1;border:1px solid #b8dfc6;display:flex;gap:16px;align-items:center}.wa-channel>svg{background:#1eaa5b;color:#fff;width:56px;height:56px;border-radius:50%;padding:13px;flex-shrink:0}.wa-channel div{flex:1}.wa-channel h2{font-size:19px;color:#073b21;margin:0 0 5px}.wa-channel p{font-size:13px;line-height:1.46;color:#3c604a;margin:0}.wa-channel a{background:#159447;color:#fff;font-weight:700;font-size:13px;padding:13px 16px;border-radius:5px;white-space:nowrap}.wa-channel a:hover{background:#10783a}.channel-pending{font-size:12px;font-weight:700;padding:12px 15px;border-radius:5px;color:#587164;background:#dceee2;white-space:nowrap}.article-story .share-article{padding:20px;border:1px solid var(--line);border-radius:8px;background:#fafbfd;display:flex;justify-content:space-between}.article-story .share-article div:first-child small{display:block;color:var(--muted);font-size:13px;margin-top:5px}.article-story .share-article .social-links a{background:var(--navy);color:#fff}.article-story .share-article .social-links a:hover{background:var(--red)}.article-story .share-article .social-links .inactive{background:#e8ecf2;color:#a7b0be}.channel-input{border-top:1px solid var(--line);padding-top:15px;margin-top:5px}@media(max-width:1120px){.article-detail-layout{margin:20px;grid-template-columns:minmax(0,1fr) 305px;gap:19px}.article-story h1{font-size:36px}.wa-channel{flex-wrap:wrap}.wa-channel a,.channel-pending{margin-left:72px}}@media(max-width:860px){.article-detail-layout{display:flex;flex-direction:column;margin:17px 14px 34px}.article-story.story{padding:0;width:100%}.article-story h1{font-size:30px}.article-sidebars{position:static;width:100%;margin-top:12px}.article-side-box{width:100%}.wa-channel{display:block;text-align:left;padding:18px}.wa-channel>svg{margin-bottom:12px}.wa-channel h2{font-size:18px}.wa-channel a,.channel-pending{display:block;text-align:center;margin:16px 0 0;width:100%}.article-story .share-article{display:block}.article-story .share-article .social-links{margin-top:16px}}.ticker-under-menu{border-top:1px solid rgba(255,255,255,.1)}.cms{min-height:100vh;background:#f3f6fb;display:grid;grid-template-columns:252px minmax(0,1fr);grid-template-rows:72px minmax(calc(100vh - 72px),auto);font-family:Arial,Helvetica Neue,sans-serif}.cms-topbar{grid-column:1/-1;background:#071c3c;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 25px;position:sticky;top:0;z-index:12;box-shadow:0 3px 14px #00000029}.cms-brand{display:flex;align-items:center;gap:12px}.cms-brand img{height:54px;width:65px;object-fit:contain}.cms-brand b{font-size:18px;display:block}.cms-brand small{font-size:12px;color:#cbd6e8}.cms-user{display:flex;align-items:center;gap:17px}.cms-user>div{text-align:right}.cms-user b{display:block;font-size:13px}.cms-user small{font-size:11px;color:#cbd6e8}.cms-user button,.cms-view-site{height:40px;padding:0 14px;border-radius:5px;color:#fff;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.cms-user button{background:#d21f26}.cms-view-site{border:1px solid rgba(255,255,255,.33)}.cms-sidebar{background:#fff;border-right:1px solid #e4e9f2;padding:22px 12px;position:sticky;top:72px;height:calc(100vh - 72px);overflow-y:auto}.cms-sidebar-title{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#7b879b;padding:0 13px;margin:2px 0 16px}.cms-sidebar a{height:49px;border-radius:7px;padding:0 13px;display:flex;align-items:center;gap:12px;color:#243650;font-weight:700;font-size:14px;margin-bottom:5px}.cms-sidebar a:hover{background:#f2f5fa}.cms-sidebar a.active{background:#d21f26;color:#fff;box-shadow:0 7px 16px #d21f2633}.cms-sidebar a b{margin-left:auto;min-width:22px;height:22px;line-height:22px;text-align:center;background:#d21f26;border-radius:12px;color:#fff;font-size:11px}.cms-sidebar a.active b{background:#fff;color:#d21f26}.cms-content{padding:32px 34px;min-width:0;max-width:1250px}.cms-alert{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#eaf5ec;color:#175a29;border:1px solid #c7e3ce;padding:13px 16px;border-radius:7px;font-size:14px;font-weight:700}.cms-alert button{color:#175a29;background:transparent}.cms-loading{padding:25px;background:#fff;border-radius:8px;border:1px solid #e4e9f2;color:#667085}.cms-page-heading{display:flex;justify-content:space-between;align-items:start;gap:22px;margin-bottom:24px}.cms-page-heading h1{margin:0 0 7px;color:#091f44;font-size:29px}.cms-page-heading p{margin:0;color:#64748b;font-size:14px}.cms-page-heading>button,.cms-actions button{height:46px;background:#d21f26;color:#fff;font-weight:700;border-radius:6px;padding:0 18px;display:flex;align-items:center;gap:7px;white-space:nowrap}.cms-actions{display:flex;gap:9px}.cms-actions .secondary{background:#091f44}.cms-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-bottom:25px}.cms-stat{background:#fff;border:1px solid #e5eaf3;border-radius:9px;padding:19px 17px;display:flex;align-items:center;gap:14px}.cms-stat svg{height:46px;width:46px;padding:12px;border-radius:11px;background:#edf2fb;color:#09244b}.cms-stat:nth-child(2) svg{color:#168441;background:#e7f6ec}.cms-stat:nth-child(3) svg{color:#c48712;background:#fff2d8}.cms-stat:nth-child(5) svg{color:#d21f26;background:#fde9ea}.cms-stat small{display:block;color:#64748b;font-size:12px;margin-bottom:7px}.cms-stat b{display:block;color:#091f44;font-size:26px}.cms-overview-columns{display:grid;grid-template-columns:1.25fr .85fr;gap:18px}.cms-panel{background:#fff;border:1px solid #e4e9f2;border-radius:9px;padding:20px}.cms-panel h2{margin:0 0 18px;color:#091f44;font-size:18px}.cms-popular{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid #edf1f6}.cms-popular:last-child{border:0}.cms-popular>strong{width:27px;height:27px;min-width:27px;min-height:27px;border-radius:50%;background:#d21f26;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;box-sizing:border-box}.cms-popular b{font-size:13.5px;color:#091f44;display:block;line-height:1.35}.cms-popular small{display:block;color:#64748b;font-size:11px;margin-top:4px}.cms-message-preview{padding:11px 0;border-bottom:1px solid #edf1f6}.cms-message-preview:last-child{border:0}.cms-message-preview b{display:block;color:#091f44;font-size:13.5px}.cms-message-preview small{display:block;color:#64748b;margin-top:4px;font-size:11px}.cms-editor{display:grid;grid-template-columns:1fr 1fr;gap:13px;background:#fff;border:1px solid #e4e9f2;border-radius:9px;padding:23px;margin-bottom:22px;box-shadow:0 4px 15px #0f27470a}.cms-editor input,.cms-editor textarea,.cms-editor select,.cms-social-form input{border:1px solid #d5dce8;border-radius:6px;padding:12px;background:#fff;outline:none}.cms-editor input:focus,.cms-editor textarea:focus,.cms-editor select:focus,.cms-social-form input:focus{border-color:#173e78;box-shadow:0 0 0 3px #0f376c14}.cms-editor .wide{grid-column:1/-1}.cms-editor textarea{resize:vertical;line-height:1.55}.cms-editor .upload{height:48px}.cms-editor .check{display:flex;align-items:center;gap:9px}.cms-form-actions{grid-column:1/-1;display:flex;gap:10px;padding-top:5px}.cms-form-actions button{height:45px;border-radius:5px;padding:0 20px;font-weight:700;display:flex;align-items:center;gap:7px}.cms-form-actions .publish{background:#d21f26;color:#fff}.cms-form-actions .cancel{background:#fff;border:1px solid #d5dce8;color:#243650}.compact-form{grid-template-columns:1fr 170px}.compact-form .wide{grid-column:auto}.cms-table-panel{padding:0;overflow:hidden}.cms-toolbar{display:flex;gap:11px;padding:17px 18px;background:#fff;border-bottom:1px solid #e8edf5}.cms-toolbar label{display:flex;align-items:center;gap:7px;border:1px solid #d5dce8;border-radius:6px;height:43px;padding:0 12px;min-width:300px;color:#64748b}.cms-toolbar input{border:0;outline:0;width:100%;background:transparent}.cms-toolbar select{height:43px;border:1px solid #d5dce8;border-radius:6px;padding:0 13px;background:#fff;color:#243650}.cms-table{width:100%}.cms-table-head,.cms-table-row{display:grid;align-items:center;gap:14px;padding:0 20px}.cms-table-head{height:45px;background:#f8fafc;border-bottom:1px solid #e8edf5;color:#667085;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.cms-table-row{min-height:67px;border-bottom:1px solid #edf1f6}.cms-table-row:last-child{border-bottom:0}.cms-table-row b{display:block;font-size:13.5px;color:#091f44;line-height:1.35}.cms-table-row small{display:block;color:#64748b;font-size:11px;margin-top:4px}.article-cols{grid-template-columns:minmax(300px,1fr) 90px 76px 82px}.simple-cols{grid-template-columns:minmax(260px,1fr) 100px 82px}.cms-badge{font-size:11px;font-weight:700;border-radius:16px;padding:7px 10px;text-align:center;width:max-content}.cms-badge.published{background:#e8f6ed;color:#15703a}.cms-badge.draft{background:#fff1d8;color:#9b6100}.cms-badge.baru{background:#fde9ea;color:#c91922}.cms-row-actions{display:flex;gap:6px}.cms-row-actions button{height:35px;width:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#f0f4f9;color:#09244b}.cms-row-actions button.delete{color:#be1921;background:#fff1f1}.cms-pager{display:flex;justify-content:flex-end;gap:5px;padding:15px 18px;border-top:1px solid #edf1f6}.cms-pager button{width:36px;height:36px;border:1px solid #d9e0eb;border-radius:5px;background:#fff;color:#243650;font-weight:700;display:flex;align-items:center;justify-content:center}.cms-pager button.active{background:#d21f26;color:#fff;border-color:#d21f26}.cms-pager button:disabled{opacity:.45}.cms-inbox-item{padding:19px 21px;border-bottom:1px solid #edf1f6}.cms-inbox-item header{display:flex;justify-content:space-between;gap:18px;align-items:start}.cms-inbox-item h3{margin:0 0 6px;color:#091f44;font-size:16px}.cms-inbox-item small{color:#64748b}.cms-inbox-item select{border:1px solid #d5dce8;height:39px;border-radius:5px;padding:0 10px}.cms-inbox-item p{line-height:1.6;font-size:14px;color:#374151;margin:16px 0 0;white-space:pre-wrap}.cms-social-form{background:#fff;border:1px solid #e4e9f2;border-radius:9px;padding:25px;max-width:820px;display:flex;flex-direction:column;gap:14px}.cms-social-form label{display:grid;grid-template-columns:28px 140px 1fr;gap:12px;align-items:center;color:#091f44;font-weight:700;font-size:14px}.cms-social-form button{margin-top:8px;height:47px;background:#d21f26;color:#fff;border-radius:6px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}.cms-content .admin-help{margin-top:16px}@media(max-width:1050px){.cms{grid-template-columns:76px minmax(0,1fr)}.cms-sidebar{padding-left:9px;padding-right:9px}.cms-sidebar-title{display:none}.cms-sidebar a{justify-content:center;padding:0}.cms-sidebar a span{display:none}.cms-sidebar a b{position:absolute;margin:0;transform:translate(18px,-16px)}.cms-content{padding:25px 20px}.cms-stat-grid{grid-template-columns:repeat(2,1fr)}.cms-overview-columns{grid-template-columns:1fr}}@media(max-width:720px){.cms{display:flex;flex-direction:column;min-height:100vh}.cms-topbar{height:auto;min-height:68px;padding:8px 13px;position:static}.cms-brand img{height:48px;width:55px}.cms-brand b{font-size:14px}.cms-user>div,.cms-view-site{display:none}.cms-user button{padding:0 11px}.cms-sidebar{position:static;height:auto;display:flex;gap:5px;overflow-x:auto;padding:9px;background:#fff;border-right:0;border-bottom:1px solid #e4e9f2}.cms-sidebar a{min-width:107px;height:43px;justify-content:flex-start;padding:0 10px;font-size:12px}.cms-sidebar a span{display:block}.cms-sidebar a b{position:static;transform:none;margin-left:auto}.cms-content{padding:16px 12px}.cms-page-heading{display:block}.cms-page-heading h1{font-size:24px}.cms-page-heading>button,.cms-actions{margin-top:16px}.cms-actions{display:flex}.cms-actions button{padding:0 11px;font-size:12px}.cms-stat-grid{grid-template-columns:1fr 1fr;gap:8px}.cms-stat{padding:13px 10px;gap:9px}.cms-stat svg{height:37px;width:37px;padding:9px}.cms-stat b{font-size:21px}.cms-editor,.compact-form{display:flex;flex-direction:column;padding:14px}.cms-form-actions{display:flex}.cms-toolbar{display:flex;flex-direction:column;padding:12px}.cms-toolbar label{min-width:0;width:100%}.cms-toolbar select{width:100%}.cms-table-head{display:none}.cms-table-row{display:flex;flex-wrap:wrap;padding:14px;gap:10px;justify-content:space-between}.cms-table-row>div:first-child{width:100%}.cms-row-actions{margin-left:auto}.cms-inbox-item{padding:14px}.cms-inbox-item header{display:block}.cms-inbox-item select{margin-top:12px;width:100%}.cms-social-form{padding:15px}.cms-social-form label{display:flex;flex-wrap:wrap;gap:8px}.cms-social-form label input{width:100%}}.rich-editor{grid-column:1/-1;border:1px solid #d5dce8;border-radius:7px;background:#fff;overflow:hidden}.rich-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:8px;background:#f7f9fc;border-bottom:1px solid #e4e9f2}.rich-toolbar button{width:35px;height:35px;border-radius:5px;background:transparent;color:#344054;display:flex;align-items:center;justify-content:center}.rich-toolbar button svg{width:17px;height:17px}.rich-toolbar button:hover,.rich-toolbar button.active{background:#09244b;color:#fff}.rich-toolbar span{height:22px;border-left:1px solid #d5dce8;margin:0 5px}.rich-editor-content{min-height:var(--editor-min-height);padding:15px 17px;outline:none;line-height:1.7;color:#172033}.rich-editor-content p{margin:.35em 0 .8em}.rich-editor-content h2{color:#091f44;margin:1em 0 .5em}.rich-editor-content ul,.rich-editor-content ol{padding-left:25px}.rich-editor-content a{color:#1660b7;text-decoration:underline}.rich-editor-content.is-editor-empty:first-child:before{color:#8b96a8;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.editor-field{display:flex;flex-direction:column;gap:8px}.editor-field>label{font-size:13px;font-weight:700;color:#091f44}.editor-section{padding:13px 0 3px;border-bottom:1px solid #edf1f6}.editor-section h3{margin:0 0 5px;color:#091f44;font-size:18px}.editor-section p{margin:0 0 9px;font-size:13px;color:#667085}.schedule-fields{display:flex;gap:10px;align-items:center}.schedule-fields label{display:flex;align-items:center;gap:7px;color:#091f44}.schedule-fields input{height:48px}.cms-badge.scheduled{background:#e7f1fd;color:#1459ad}.rich-public{line-height:1.78;color:#1f2937}.rich-public p{font-size:18px;margin:0 0 20px}.rich-public h2{color:#091f44;font-size:26px;margin:30px 0 14px}.rich-public ul,.rich-public ol{font-size:18px;line-height:1.75;margin-bottom:20px}.rich-public a{color:#1660b7;text-decoration:underline}.rich-public p[style*=justify]{text-align:justify}.leadtext.rich-public p{font-weight:700;font-size:19px}.tile-excerpt,.gallery-caption,.figure-summary,.download-description{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 13px}.tile-excerpt p,.gallery-caption p,.figure-summary p,.download-description p{margin:0}.auto-ad{margin:23px 0;padding:10px;border:1px solid #e4e9f2;border-radius:8px;background:#fafbfd}.auto-ad>small{display:block;text-transform:uppercase;font-size:10px;letter-spacing:1px;color:#7b879b;margin:0 0 8px 3px}.auto-ad a{display:flex;gap:15px;align-items:center;color:inherit}.auto-ad img{max-width:160px;max-height:92px;border-radius:6px;object-fit:cover}.auto-ad b{display:block;color:#091f44;margin-bottom:6px}.auto-ad p{font-size:13px!important;line-height:1.5!important;margin:0!important;color:#667085}.seo-site-editor{max-width:890px}.seo-guidance{margin-top:18px;max-width:890px;padding:22px;background:#fff;border:1px solid #e4e9f2;border-radius:9px}.seo-guidance h2{color:#091f44;margin-top:0}.seo-guidance p{line-height:1.65;color:#475467}.seo-guidance code{background:#f1f4f8;padding:2px 5px;border-radius:3px}.secure-mark{display:flex;align-items:center;gap:7px;color:#15703a;font-size:12px;font-weight:700;background:#e8f6ed;padding:9px 12px;border-radius:5px}.captcha-guide{display:block;color:#667085;line-height:1.45}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}@media(max-width:720px){.rich-toolbar button{width:32px;height:32px}.rich-editor-content{padding:12px;min-height:160px}.schedule-fields{flex-direction:column;align-items:stretch}.auto-ad a{display:block}.auto-ad img{max-width:100%;max-height:160px;margin-bottom:10px}.rich-public p,.rich-public ul,.rich-public ol{font-size:16px}}.editor-loading{padding:25px;border:1px solid #d5dce8;border-radius:7px;color:#667085;background:#fff}.notice-content{font-size:13px;line-height:1.55;color:var(--muted)}.notice-content p{margin:8px 0 0}.captcha-inactive{padding:12px;border-radius:6px;border:1px solid #efc569;background:#fff6dd;color:#7a4d00;display:flex;gap:9px;align-items:flex-start;font-size:12px}.captcha-inactive b{display:block;font-size:13px;margin-bottom:4px}.captcha-inactive small{display:block;line-height:1.45}.captcha-box{border:1px solid #dce8df;background:#f6fbf8;border-radius:6px;padding:10px}.captcha-box p{margin:0 0 10px;color:#15703a;font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}.captcha-error{color:#be1921;display:block;margin-top:8px;line-height:1.45}.public-inner-layout{max-width:1320px;margin:26px auto 44px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}.public-inner-main{min-width:0}.public-inner-main .inner-page{margin:0;padding:0;max-width:none}.social-side-box{padding:17px 14px}.social-side-box h3{margin:0 0 13px;color:var(--navy);font-size:13px}.social-side-box .social-links a{background:var(--navy);color:#fff}.social-side-box .social-links a:hover{background:var(--red)}.social-side-box .social-links .inactive{background:#e8ecf2;color:#a7b0be}@media(max-width:980px){.public-inner-layout{display:flex;flex-direction:column;margin:17px 14px 34px}.public-inner-main,.public-inner-layout .article-sidebars{width:100%}.public-inner-layout .article-sidebars{position:static}}:root{--red:#b6242c;--red-deep:#8f1d26;--red-soft:#fff3f3;--navy:#222b39;--navy2:#344254;--gold:#b88b45;--line:#e8e1df;--ink:#20252e;--muted:#6f7076;--soft:#f8f5f3;--paper:#fffdfc;--shadow:0 12px 32px rgba(48,31,31,.055)}body{background:var(--paper);color:var(--ink)}.masthead{background:linear-gradient(90deg,#fffdfc,#fff,#fff7f5)}.brand h1{color:var(--ink)}.brand p{color:#363941}.brand small{color:var(--red-deep)}.nav{background:#3a1d24;border-top:3px solid var(--red)}.links a.selected,.links a:hover{background:var(--red)}.ticker{background:#f4ecea;color:#3f3031;border-bottom:1px solid #eadeda}.ticker strong{background:var(--red);color:#fff}.ticker-scroll a{color:#413638}.ticker-scroll a span{color:var(--red)}.latest-box,.announcements,.category-panel,.sidebar,.article-side-box,.cms-panel{box-shadow:var(--shadow);border-color:var(--line)}.follow{background:#3a1d24}.footer{background:#301820}.overlay label,.compact label,.overlay button,.redbtn,.aspiration-form .submit,.top-search button,.back-top{background:var(--red)}.top-search button:hover,.back-top:hover{background:var(--red-deep)}.cms{background:#f7f3f1}.cms-topbar{background:#361920;border-bottom:3px solid var(--red)}.cms-sidebar a.active,.cms-page-heading>button,.cms-actions button,.cms-form-actions .publish,.cms-social-form button{background:var(--red)}.cms-actions .secondary{background:#443037}.cms-sidebar a.active{box-shadow:0 7px 16px #b6242c30}.auth-screen{background:radial-gradient(circle at 50% 0,#fff,#faf5f3 42%,#f1e9e7)}.login-box{border-color:#eee1de;box-shadow:0 22px 60px #512a2a1a}.forgot-link{display:flex!important;align-items:center;justify-content:center;gap:6px;color:var(--red)!important;font-weight:700}.recovery-box{width:min(460px,92vw)}.auth-success{display:flex;gap:10px;align-items:flex-start;border:1px solid #bfe1c8;background:#eef9f1;color:#165c2f;border-radius:7px;padding:13px}.auth-success svg{flex-shrink:0}.auth-success b,.auth-success small{display:block}.auth-success small{margin-top:4px}.category-cols{grid-template-columns:minmax(250px,1fr) 110px 110px 82px}.users-cols{grid-template-columns:minmax(260px,1fr) 170px 195px}.category-status{height:33px;border-radius:18px;padding:0 12px;background:#f6e3e3;color:var(--red-deep);font-weight:700}.category-status.active{background:#e8f6ed;color:#15703a}.reset-action{height:38px;padding:0 13px;border-radius:6px;background:var(--red-soft);color:var(--red-deep);font-weight:700;display:flex;align-items:center;gap:6px}.account-help{display:flex;gap:8px;align-items:start;color:#694a48;background:#fff4f2;border:1px solid #f1d5d0;padding:12px;border-radius:6px}.account-help p{margin:0;font-size:13px;line-height:1.5}.analytics-grid{display:grid;grid-template-columns:1.42fr .82fr;gap:17px}.analytics-panel h2{margin-bottom:20px}.chart-row{display:grid;grid-template-columns:minmax(190px,1fr) 145px 68px;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f0e7e5}.chart-row b{display:block;color:#32282a;font-size:13px;line-height:1.3}.chart-row small{color:var(--muted)}.chart-track{height:9px;background:#f0e5e3;border-radius:8px;overflow:hidden}.chart-track span{display:block;height:100%;background:linear-gradient(90deg,var(--red),#dd6167);border-radius:8px}.chart-row strong{text-align:right;color:var(--red-deep);font-size:12px}.category-metric{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #f0e7e5;font-size:13px}.category-metric span{font-weight:700}.category-metric b{color:var(--red-deep)}.analytics-note{font-size:12px;line-height:1.55;color:var(--muted);background:#faf4f2;padding:12px;border-radius:6px;margin-top:15px}.cms-alert.warning{background:#fff4df;color:#865900;border-color:#ecd19c}@media(max-width:980px){.analytics-grid{grid-template-columns:1fr}.chart-row{grid-template-columns:1fr;gap:7px}.chart-row strong{text-align:left}.category-cols,.users-cols{display:flex!important}.category-cols>*,.users-cols>*{width:100%}}.dashboard-chart{margin-top:18px}.dashboard-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,300px) 60px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid #f0e7e5}.dashboard-bar span{font-size:13px;font-weight:700;color:#32282a}.dashboard-bar i{height:9px;background:#f1e3e1;display:block;border-radius:8px;overflow:hidden}.dashboard-bar i b{height:100%;display:block;background:linear-gradient(90deg,var(--red),#db6a6e);border-radius:8px}.dashboard-bar strong{text-align:right;color:var(--red-deep);font-size:12px}@media(max-width:720px){.dashboard-bar{display:block}.dashboard-bar i{margin:8px 0}.dashboard-bar strong{display:block;text-align:left}}body{background:linear-gradient(180deg,#fff,#fff 60%,#fff8f8)}.nav{background:linear-gradient(90deg,var(--navy) 0%,#102f5e 55%,var(--red) 100%)}.featured,.article-tile,.latest-box,.announcements,.category-panel,.sidebar,.cms-panel,.cms-stat{box-shadow:0 10px 28px #091f440f}.article-tile,.compact,.featured{transition:transform .18s ease,box-shadow .18s ease}.article-tile:hover,.compact:hover,.featured:hover{transform:translateY(-2px)}.cms{grid-template-columns:256px minmax(0,1fr);grid-template-rows:72px 1fr;background:#f5f7fb;min-height:100vh}.cms-topbar{position:sticky;top:0;z-index:30}.cms-sidebar{display:block!important;z-index:20}.cms-content{width:100%;max-width:none}.dashboard-lower{margin-top:18px}.dashboard-mini-list p{padding:10px 0;border-bottom:1px solid #edf1f6;margin:0;color:#475467}.dashboard-mini-list p:last-child{border-bottom:0}.dashboard-bar{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 72px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f6}.dashboard-bar span{font-size:13px;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-bar i{height:11px;background:#eef2f7;border-radius:20px;overflow:hidden}.dashboard-bar i b{display:block;height:100%;background:linear-gradient(90deg,#d21f26,#f07b82);border-radius:20px}.dashboard-bar strong{text-align:right;color:#091f44;font-size:13px}.wa-share-link{margin-top:15px;height:44px;display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border-radius:6px;padding:0 15px;font-weight:800;font-size:13px}.account-help{display:flex;align-items:flex-start;gap:9px;background:#f8fafc;border:1px dashed #cfd8e6;border-radius:7px;padding:12px;color:#475467}.account-help p{margin:0;line-height:1.55;font-size:13px}.reset-action{height:39px;border-radius:6px;background:#fff1f1;color:#b71921;font-weight:800;display:inline-flex;align-items:center;gap:7px;padding:0 12px}.reset-action:disabled{opacity:.45}.users-cols{grid-template-columns:minmax(240px,1fr) 150px 170px}.cms-alert.warning{background:#fff8e7;color:#8a5a00;border-color:#f0d393}@media(max-width:1050px){.cms{grid-template-columns:86px minmax(0,1fr)}.cms-sidebar{position:sticky!important;top:72px;height:calc(100vh - 72px)!important}.cms-content{padding:24px 18px}.dashboard-bar{grid-template-columns:1fr}}@media(max-width:720px){.cms{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.cms-topbar{position:sticky;top:0}.cms-sidebar{position:sticky!important;top:0;height:auto!important;display:flex!important;overflow-x:auto;white-space:nowrap;z-index:25}.cms-sidebar a{flex:0 0 auto}.cms-content{padding:16px 12px}.users-cols{grid-template-columns:1fr}.reset-action,.wa-share-link{width:100%;justify-content:center}}:root{--brand-red:#b6242c;--brand-red-dark:#841821;--brand-red-soft:#fff1f2;--brand-ink:#17171b;--brand-slate:#3e4654;--brand-muted:#737987;--brand-border:#ece4e2;--brand-card:#ffffff;--brand-bg:#fbf7f5;--brand-shadow:0 22px 60px rgba(54,24,28,.1);--brand-shadow-sm:0 12px 30px rgba(54,24,28,.07)}.site{background:linear-gradient(180deg,#fff 0,#fff9f7 390px,#fbf7f5)}.masthead{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px);background:#fffdfceb;border-bottom:1px solid rgba(182,36,44,.1);box-shadow:0 12px 34px #1f18180d}.brand{gap:15px}.brand img{filter:drop-shadow(0 10px 18px rgba(134,24,33,.16))}.brand h1{letter-spacing:-.025em}.brand h1 span{color:var(--brand-red)}.brand small{display:inline-flex;margin-top:5px;padding:5px 10px;border-radius:999px;background:var(--brand-red-soft);color:var(--brand-red-dark);font-weight:800;letter-spacing:.02em}.top-tools{gap:12px}.top-search{background:#fff;border:1px solid #eadbd8;border-radius:999px;box-shadow:0 10px 22px #3018180f;overflow:hidden}.top-search input{min-width:230px}.top-search button{border-radius:999px;margin:4px;height:38px}.outline.aspirasi{border-radius:999px;border:1px solid #ead2cd;background:#fff;color:var(--brand-red-dark);box-shadow:0 10px 22px #3018180d}.nav{position:sticky;top:91px;z-index:45;background:linear-gradient(90deg,#2a1117,#4d1b24 48%,#2a1117);box-shadow:0 12px 30px #2d0c122e}.links{max-width:1320px;margin:auto}.links a{height:48px;border-radius:999px;margin:6px 3px;padding:0 14px;font-weight:800;letter-spacing:.02em}.links a.selected,.links a:hover{background:#fff;color:var(--brand-red-dark);box-shadow:0 10px 24px #00000029}.ticker{max-width:1320px;margin:16px auto 0;border:1px solid #eadbd8;border-radius:18px;background:#fff;box-shadow:var(--brand-shadow-sm);overflow:hidden}.ticker strong{border-radius:0 14px 14px 0;padding:0 18px}.ticker time{background:#fff7f5;padding:0 16px;color:#744349;font-weight:800}.layout{max-width:1320px;grid-template-columns:1.4fr .78fr .78fr;gap:22px;margin-top:24px}.lead,.latest-box,.announcements,.category-panel,.gallery,.sidebar,.inner-page,.article-main,.article-side-box,.cms-panel{border:1px solid var(--brand-border);border-radius:24px;background:#fffffff5;box-shadow:var(--brand-shadow-sm);overflow:hidden}.lead{min-height:440px}.featured{height:100%;position:relative}.featured img{height:100%;min-height:440px;filter:saturate(1.06) contrast(1.02)}.featured:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 10%,rgba(22,6,9,.18) 48%,rgba(22,6,9,.86));pointer-events:none}.featured .overlay{z-index:2;left:28px;right:28px;bottom:28px;border-radius:22px;background:linear-gradient(180deg,#261014d6,#17080beb);box-shadow:0 20px 50px #00000040}.overlay label,.tag,.section-title span{border-radius:999px}.section-title{align-items:center;border-bottom:1px solid #f0e8e5;padding-bottom:13px}.section-title h2{letter-spacing:-.01em}.section-title span{height:8px;width:52px;background:linear-gradient(90deg,var(--brand-red),#ef6f75)}.compact-card,.announcement,.popular-item,.cms-message-preview,.cms-popular{border-radius:18px;transition:.18s ease;background:#fff}.compact-card:hover,.popular-item:hover,.cms-popular:hover{transform:translateY(-2px);box-shadow:0 14px 28px #39171b17}.compact-card img{border-radius:16px}.announcement{border:1px solid #f0e4e1;padding:13px}.gallery div{gap:10px}.gallery img{border-radius:18px;transition:.18s ease}.gallery img:hover{transform:scale(1.025)}.side-block{border-radius:20px;background:linear-gradient(180deg,#fff7f6,#fff);border:1px solid #f0dedb}.follow{border-radius:20px;background:linear-gradient(135deg,#2a1117,#571d27)}.public-inner-layout{max-width:1320px;grid-template-columns:minmax(0,1fr) 360px}.page-head{border-radius:26px;background:linear-gradient(135deg,#3a141d,#b6242c);color:#fff;padding:34px;margin-bottom:22px;box-shadow:var(--brand-shadow)}.page-head h1{color:#fff;letter-spacing:-.035em}.page-head p{color:#ffe8e8;max-width:760px}.article-header h1{letter-spacing:-.04em}.article-hero{border-radius:24px}.article-main{padding:28px}.article-sidebars{gap:18px}.article-side-box h3{letter-spacing:.02em}.cms{min-height:100vh;background:linear-gradient(135deg,#f8f2ef 0,#fff 38%,#fff4f2);display:grid;grid-template-columns:286px minmax(0,1fr);grid-template-rows:auto 1fr}.cms-topbar{grid-column:1/3;position:sticky;top:0;z-index:60;background:#2e0f16f0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 42px #2d0e1338}.cms-brand img{background:#fff;border-radius:14px;padding:5px}.cms-sidebar{position:sticky;top:76px;height:calc(100vh - 76px);overflow:auto;background:#ffffffc7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid #eadbd8;padding:18px 14px}.cms-sidebar-title{font-size:11px;letter-spacing:.14em;color:#9a6a6e;font-weight:900;margin:10px 12px 13px}.cms-sidebar a{height:46px;margin-bottom:7px;border-radius:15px;color:#493d42;font-weight:800;transition:.18s ease}.cms-sidebar a:hover{background:#fff3f2;color:var(--brand-red-dark);transform:translate(2px)}.cms-sidebar a.active{background:linear-gradient(135deg,var(--brand-red),#8d1c24);color:#fff;box-shadow:0 14px 30px #b6242c42}.cms-sidebar a b{background:#fff;color:var(--brand-red);border-radius:999px;min-width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-left:auto}.cms-content{padding:28px;max-width:1460px;width:100%;margin:0 auto}.cms-page-heading{border:1px solid #eadbd8;border-radius:26px;background:linear-gradient(135deg,#fff,#fff7f5);padding:22px;box-shadow:var(--brand-shadow-sm);margin-bottom:20px}.cms-page-heading h1{font-size:32px;letter-spacing:-.04em}.cms-page-heading p{font-size:14px;color:#765e62}.cms-actions button,.cms-page-heading>button,.cms-form-actions .publish,.cms-social-form button{border-radius:14px;box-shadow:0 12px 24px #b6242c2e}.cms-stat-grid{grid-template-columns:repeat(5,minmax(160px,1fr));gap:15px}.cms-stat{border:1px solid #eadbd8;border-radius:22px;background:#ffffffeb;padding:18px;box-shadow:var(--brand-shadow-sm);position:relative;overflow:hidden}.cms-stat:before{content:"";position:absolute;inset:auto -26px -36px auto;width:96px;height:96px;border-radius:50%;background:#b6242c14}.cms-stat svg{width:32px;height:32px;color:var(--brand-red);background:#fff1f2;border-radius:14px;padding:8px;box-sizing:content-box}.cms-stat small{text-transform:uppercase;letter-spacing:.06em;font-weight:900}.cms-stat b{font-size:28px;letter-spacing:-.04em}.cms-overview-columns{grid-template-columns:1.35fr .9fr;gap:18px}.cms-panel{padding:22px}.cms-panel h2{letter-spacing:-.025em}.dashboard-bar,.chart-row,.category-metric{border-bottom:1px solid #f1e7e4}.dashboard-bar i,.chart-track{height:12px;background:#f5e7e5}.dashboard-bar i b,.chart-track span{background:linear-gradient(90deg,#8b1922,#df444d,#f18b8f)}.cms-editor{border:1px solid #eadbd8;border-radius:24px;background:#fff;box-shadow:var(--brand-shadow-sm);padding:20px}.cms-editor input,.cms-editor textarea,.cms-editor select,.cms-toolbar input,.cms-toolbar select,.cms-social-form input{border-radius:14px;border:1px solid #e3d7d5;background:#fff}.cms-table-panel{overflow:hidden;padding:0}.cms-toolbar{padding:17px;background:#fff7f5;border-bottom:1px solid #eadbd8}.cms-table-head{background:#33151d;color:#fff;border-radius:0}.cms-table-row{transition:.15s ease}.cms-table-row:hover{background:#fff8f7}.cms-row-actions button,.reset-action,.category-status{border-radius:13px}.cms-inbox-item{border-radius:20px;border:1px solid #eadbd8;box-shadow:var(--brand-shadow-sm)}.auth-screen{background:radial-gradient(circle at top,#fff 0,#fff5f3 42%,#ecdeda)}.login-box{border-radius:28px;box-shadow:0 28px 80px #3e161b29}.login-box button{border-radius:16px}.secure-mark{border-radius:999px}@media(max-width:1180px){.cms{display:block}.cms-topbar{position:static}.cms-sidebar{position:static;height:auto;display:flex;gap:8px;overflow:auto;border-right:0;border-bottom:1px solid #eadbd8}.cms-sidebar-title{display:none}.cms-sidebar a{flex:0 0 auto}.cms-content{padding:18px}.cms-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cms-overview-columns,.layout{grid-template-columns:1fr}.nav{top:0}.ticker{margin-left:14px;margin-right:14px}}@media(max-width:760px){.masthead{position:static}.brand h1{font-size:22px}.top-tools,.top-search{width:100%}.top-search input{min-width:0;width:100%}.links a{border-radius:12px}.layout,.public-inner-layout{margin-left:14px;margin-right:14px}.lead,.featured img{min-height:360px}.cms-stat-grid{grid-template-columns:1fr}.cms-page-heading{display:block}.cms-page-heading h1{font-size:25px}.cms-user{gap:7px}.cms-user div{display:none}.cms-content{padding:14px}.cms-sidebar a span{white-space:nowrap}.page-head{padding:24px}.article-main{padding:18px}}.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}.security-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:18px;box-shadow:0 14px 36px #0f172a0f}.security-card svg{color:#b51018;flex:none}.security-card b{display:block;color:#111827}.security-card span{display:inline-flex;margin:6px 0;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}.security-card span.ok{background:#dcfce7;color:#166534}.security-card span.warn{background:#fef3c7;color:#92400e}.security-card p{margin:0;color:#64748b;line-height:1.5}.security-columns h2{display:flex;gap:8px;align-items:center}.audit-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(15,23,42,.08)}.audit-row:last-child{border-bottom:0}.audit-row b{display:block;text-transform:capitalize}.audit-row small,.audit-row time{color:#64748b;font-size:12px}.security-list{margin:10px 0 0;padding-left:20px;color:#475569;line-height:1.8}.password-meter{display:block;margin-top:-6px;margin-bottom:8px;color:#64748b;font-weight:700}.cms-sidebar a[href="/redaksi/keamanan"]{margin-top:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}.story-hero-media{margin:0 0 18px;padding:0;position:relative;border-radius:14px;overflow:hidden;background:#2f151b;box-shadow:0 18px 45px #5b191f1f}.article-story .story-hero-media .story-image{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:0;margin:0}.story-title-under-image{padding:4px 2px 24px;border-bottom:1px solid var(--line);margin-bottom:24px}.story-title-under-image label{display:inline-flex;align-items:center;margin-bottom:9px;background:var(--red);color:#fff;border-radius:999px;padding:7px 12px;letter-spacing:.4px;text-transform:uppercase}.story-title-under-image h1{margin:4px 0 13px;color:#251b20;letter-spacing:-.8px}.story-title-under-image .leadtext{max-width:900px;margin:0 0 15px;color:#3b3134}.story-title-under-image .leadtext p{font-size:20px;line-height:1.62;margin:0;font-weight:700}.story-title-under-image .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;color:#7a6b6f;font-size:13px}.account-help.success{background:#eef9f1;border-color:#bfe1c8;color:#165c2f}.account-help code{background:#ffffffbf;padding:1px 5px;border-radius:4px}.cms-overview .cms-panel,.cms-stat{border-radius:14px}.cms-page-heading{background:linear-gradient(135deg,#fff,#fff5f3);border:1px solid #efd9d5;border-radius:16px;padding:22px;margin-bottom:18px}.cms-page-heading h1{letter-spacing:-.5px}.cms-overview-columns{align-items:stretch}.dashboard-mini-list p{line-height:1.7}.dashboard-bar i b{min-width:8px}@media(max-width:860px){.story-title-under-image h1{font-size:30px}.story-title-under-image .leadtext p{font-size:17px}.story-hero-media{border-radius:10px}}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;overflow-x:hidden}.site{width:100%;overflow-x:hidden}.masthead{width:min(1320px,calc(100% - 40px));padding-left:0!important;padding-right:0!important}.nav{width:100%;overflow:hidden;padding-left:max(calc((100vw - 1320px)/2),20px)!important;padding-right:max(calc((100vw - 1320px)/2),20px)!important}.nav .links{width:100%;max-width:1320px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;justify-content:flex-start}.nav .links a{flex:0 0 auto;white-space:nowrap}.ticker{width:min(1320px,calc(100% - 40px));max-width:1320px}.layout{width:min(1320px,calc(100% - 40px));display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(260px,.82fr) 310px!important;gap:18px!important;align-items:start;margin-left:auto!important;margin-right:auto!important}.layout>.lead{grid-column:1 / span 2!important;grid-row:1 / span 2!important;min-width:0;min-height:430px}.layout>.latest-box{grid-column:3!important;grid-row:1 / span 2!important;min-width:0}.layout>.announcements{grid-column:4!important;grid-row:1!important;min-width:0}.layout>.category-panel{min-width:0;min-height:220px}.layout>.gallery{grid-column:1 / span 3!important;min-width:0}.layout>.sidebar{grid-column:4!important;grid-row:2 / span 3!important;min-width:0;position:sticky;top:158px;align-self:start;max-height:calc(100vh - 180px);overflow:auto}.featured{width:100%;min-height:430px;height:100%;border-radius:22px;overflow:hidden}.featured img{width:100%;height:100%;min-height:430px;object-fit:cover}.featured .overlay{position:absolute;inset:auto 24px 24px 24px!important;padding:24px!important;max-width:none}.featured .overlay h2{font-size:clamp(24px,2.6vw,36px);line-height:1.15}.featured .overlay p{font-size:15px;line-height:1.55}.latest-box,.announcements,.category-panel,.gallery,.sidebar{border-radius:18px!important;overflow:hidden}.compact{min-width:0}.compact img{flex:0 0 96px}.compact h3{word-break:normal;overflow-wrap:anywhere}.announcement{min-width:0}.popular-item{display:flex;gap:12px;min-width:0}.popular-item div{min-width:0}.popular-item b{overflow-wrap:anywhere}.gallery>div{grid-template-columns:repeat(6,minmax(0,1fr))!important}.footer{overflow:hidden}@media(max-width:1180px){.masthead{width:calc(100% - 28px);flex-wrap:wrap}.top-tools{width:100%;justify-content:flex-start;flex-wrap:wrap}.nav{padding-left:14px!important;padding-right:14px!important}.ticker{width:calc(100% - 28px)}.layout{width:calc(100% - 28px);grid-template-columns:1fr!important;gap:16px!important}.layout>.lead,.layout>.latest-box,.layout>.announcements,.layout>.gallery,.layout>.sidebar{grid-column:1!important;grid-row:auto!important}.layout>.sidebar{position:static;max-height:none;overflow:visible}.gallery>div{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:760px){.masthead{width:calc(100% - 24px);align-items:flex-start}.brand img{width:68px;height:62px}.brand h1{font-size:22px!important}.brand p{font-size:13px}.brand small{font-size:11px}.top-tools .social-links{display:none}.top-search{min-width:0;width:100%}.top-search input{width:100%;min-width:0}.outline.aspirasi{width:100%;justify-content:center}.ticker{width:calc(100% - 24px);height:auto;min-height:42px}.ticker time{display:none}.layout{width:calc(100% - 24px);margin-top:14px!important}.featured,.featured img{min-height:360px}.featured .overlay{inset:auto 12px 12px 12px!important;padding:16px!important;border-radius:16px}.featured .overlay h2{font-size:24px}.gallery>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}.footer{grid-template-columns:1fr!important;padding-left:18px!important;padding-right:18px!important}}.masthead{border-bottom:0!important;box-shadow:none!important;position:relative!important;top:auto!important}.nav{top:0!important;border-top:0!important;border-bottom:0!important}.site header,.site .masthead,.site .nav{outline:0!important}.masthead{padding-top:18px!important;padding-bottom:18px!important}@media(max-width:760px){.masthead{padding:14px!important}}.masthead,.nav,.ticker,.ticker-under-menu,.nav+.ticker,.ticker-under-menu:before,.ticker-under-menu:after{border-top:0!important;border-bottom:0!important;outline:0!important;box-shadow:none!important}.nav{margin-bottom:0!important}.ticker-under-menu{margin-top:14px!important;background:#fff!important}.nav .links,.nav .links a{border:0!important;box-shadow:none!important}.lead{background:#fff!important}.featured{display:flex!important;flex-direction:column!important;position:relative!important;min-height:0!important;height:auto!important;background:#fff!important;color:#20252e!important;border:1px solid var(--brand-border,#ece4e2)!important;border-radius:22px!important;overflow:hidden!important}.featured:after{display:none!important;content:none!important}.featured img{display:block!important;width:100%!important;height:clamp(280px,34vw,470px)!important;min-height:0!important;object-fit:cover!important;filter:none!important}.featured .overlay{position:static!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;width:100%!important;max-width:none!important;padding:18px 22px 20px!important;border-radius:0!important;background:#fff!important;color:#20252e!important;box-shadow:none!important;display:block!important}.featured .overlay label{display:inline-flex!important;margin-bottom:8px!important}.featured .overlay small{color:#6f7076!important;margin:0 0 8px!important;display:flex!important;align-items:center!important;gap:6px!important}.featured .overlay h2{color:#151922!important;font-size:clamp(20px,2vw,28px)!important;line-height:1.22!important;max-width:none!important;margin:0 0 8px!important;letter-spacing:-.02em!important}.featured .overlay p{color:#4b5563!important;max-width:none!important;font-size:14px!important;line-height:1.55!important;margin:0 0 14px!important;font-weight:400!important}.featured .overlay button{padding:10px 15px!important;border-radius:10px!important;font-size:13px!important}.layout>.lead{min-height:0!important}@media(max-width:760px){.ticker-under-menu{margin-top:10px!important}.featured img{height:260px!important}.featured .overlay{padding:15px!important}.featured .overlay h2{font-size:21px!important}.featured .overlay p{font-size:13.5px!important}}.layout{grid-template-columns:minmax(0,1.18fr) minmax(0,1.18fr) minmax(270px,.9fr) 300px!important;grid-auto-flow:dense}.layout>.announcements{grid-column:3!important;grid-row:2!important;max-height:none!important;z-index:1!important}.layout>.latest-box{grid-column:3!important;grid-row:1!important}.layout>.sidebar{grid-column:4!important;grid-row:1 / span 4!important}.announcements{position:relative!important}.announcement:last-child{border-bottom:0!important}.nav,.ticker,.ticker-under-menu,.section-title,.compact,.announcement{border-top:0!important}.nav+.ticker,.ticker-under-menu{border:0!important;box-shadow:none!important}.ticker-under-menu:before,.ticker-under-menu:after{display:none!important;content:none!important}@media(max-width:980px){.nav{align-items:stretch!important;overflow:visible!important;position:relative!important;z-index:2!important}.nav .links{position:static!important;max-height:0;overflow:hidden!important;padding:0!important;margin:0!important;width:100%!important;background:#3a1d24!important;border-radius:0 0 14px 14px!important;transition:max-height .24s ease}.nav .links.active{display:flex!important;max-height:720px;padding:6px 0 10px!important}.nav .links a{min-height:44px!important;height:auto!important;padding:12px 16px!important;border-radius:10px!important;margin:2px 6px!important}.ticker-under-menu{position:relative!important;z-index:1!important}.layout{margin-top:14px!important}}@media(max-width:760px){.nav{width:100%!important;padding-left:12px!important;padding-right:12px!important}.hamburger{min-width:48px!important;justify-content:flex-start!important}.nav .links.active{max-height:780px}.layout>.announcements,.layout>.latest-box,.layout>.lead,.layout>.gallery,.layout>.sidebar{grid-column:1!important;grid-row:auto!important}}.story-hero-media img,.compact img,.featured img,.article-tile img{background:#f4ecea}img[src$=".svg"]{object-fit:cover}@media(min-width:981px){.nav{overflow:visible!important;height:auto!important;min-height:52px}.nav .links{flex:1 1 auto!important;min-width:0!important;max-width:1320px!important;overflow-x:visible!important;overflow-y:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important;white-space:normal!important;flex-wrap:wrap!important;height:auto!important}.nav .links a{height:52px!important;padding:0 7px!important;font-size:10.5px!important}.nav .links::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}.nav .links a,.search{flex:0 0 auto!important}}.ticker-under-menu{width:min(1320px,calc(100% - 40px))!important;max-width:1320px!important;margin:14px auto 0!important;padding-left:0!important;padding-right:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;gap:0!important}.ticker-under-menu strong{flex:0 0 auto!important;margin-left:0!important;border-radius:0 14px 14px 0!important}.ticker-under-menu .ticker-window{min-width:0!important;padding-left:18px!important}.ticker-under-menu time{flex:0 0 auto!important}@media(max-width:760px){.ticker-under-menu{width:calc(100% - 24px)!important;margin-top:10px!important}.ticker-under-menu strong{padding-left:14px!important;padding-right:14px!important}}@media(max-width:980px){.layout{grid-template-columns:1fr!important;display:grid!important;overflow:visible!important}.layout>.lead,.layout>.latest-box,.layout>.announcements,.layout>.category-panel,.layout>.gallery,.layout>.sidebar{grid-column:1!important;grid-row:auto!important;width:100%!important;max-width:100%!important}.category-panel{min-width:0!important}.nav .links:not(.active){display:none!important;max-height:0!important}.nav .links.active{display:flex!important;flex-direction:column!important;width:100%!important}}.captcha-blocked{border-color:#f3b0b4;background:#fff1f2;color:#8a1017}.captcha-loading-status{display:block;margin-top:9px;color:#667085;font-size:12px;line-height:1.45}.captcha-retry{margin-top:9px!important;width:100%;height:auto!important;padding:9px 12px!important;border-radius:6px!important;background:#fff!important;color:#7a1520!important;border:1px solid #e5b7bd!important;font-size:12px!important;font-weight:700!important}.captcha-retry:hover{background:#fff4f5!important}.secure-login button:disabled,.recovery-box button:disabled{opacity:.55;cursor:not-allowed}.turnstile-holder{width:300px!important;min-width:300px!important;min-height:65px!important;display:block!important;margin:2px 0 8px!important;overflow:visible!important}.turnstile-holder iframe{display:block!important;visibility:visible!important;opacity:1!important;min-width:300px!important;min-height:65px!important;border:0!important}.captcha-loading-status{display:block;color:#51615f;font-size:12px;line-height:1.4;margin-top:4px}.captcha-retry{margin-top:8px!important;background:#163f2a!important;color:#fff!important;border-radius:6px!important;padding:9px 12px!important;font-size:12px!important}.captcha-state-verified{border-color:#b9dfc6!important;background:#f5fff8!important}.captcha-state-error,.captcha-state-timeout,.captcha-state-blocked,.captcha-state-unsupported{border-color:#efb7b7!important;background:#fff7f7!important}@media(max-width:420px){.turnstile-holder{transform:scale(.92);transform-origin:left top;margin-bottom:0!important}}.upload-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:47px}.upload-wrap .upload{min-width:210px;box-sizing:border-box}.selected-file{font-size:12px;color:#243650;background:#f7fafc;border:1px solid #dfe7f1;border-radius:12px;padding:8px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.current-image-preview{display:flex;align-items:center;gap:9px;font-size:12px;color:#243650;background:#fff7f5;border:1px solid #eadbd8;border-radius:14px;padding:6px 9px}.current-image-preview img{width:58px;height:42px;object-fit:cover;border-radius:10px;background:#f1f5f9}.manual-url{border:1px dashed #d7dfe9;border-radius:14px;padding:0 12px;background:#fff;min-height:47px;display:flex;align-items:center}.manual-url summary{cursor:pointer;font-size:12px;font-weight:800;color:#64748b;list-style:none;padding:14px 0}.manual-url[open]{display:block;padding-bottom:12px}.manual-url input{width:100%;box-sizing:border-box;margin-top:6px}.cms-title-with-thumb{display:flex!important;align-items:center;gap:12px;min-width:0}.cms-title-with-thumb>div{min-width:0}.cms-thumb{width:58px;height:44px;object-fit:cover;border-radius:12px;background:#e8edf5;border:1px solid #dce4ef;flex-shrink:0}.cms-table-row .cms-title-with-thumb b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.cms-alert:not(.warning){position:fixed!important;z-index:9999;left:50%;top:24px;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));box-shadow:0 24px 80px #1018283d;border:1px solid #eadbd8;background:#fff!important;color:#091f44!important;border-radius:22px;padding:18px 20px!important;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:800;text-align:left}.cms-alert button{background:#f3f5f9;border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}@media(max-width:720px){.upload-wrap{display:block}.upload-wrap .upload,.selected-file,.current-image-preview{margin-bottom:8px}.cms-title-with-thumb{width:100%}.cms-thumb{width:64px;height:48px}.manual-url{grid-column:1/-1}.cms-alert:not(.warning){top:16px;font-size:13px}}.dropdown-nav{position:relative;display:inline-flex;align-items:center;height:100%}.dropdown-nav>a{height:100%;display:flex;align-items:center}.dropdown-menu{display:none;position:absolute;top:100%;left:0;background-color:var(--navy);min-width:180px;box-shadow:0 8px 16px rgba(0,0,0,0.2);z-index:100;border-top:3px solid var(--red)}.dropdown-menu a{color:#fff;padding:7px 12px;text-decoration:none;display:block;font-size:11px;font-weight:700;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,0.08)}.dropdown-menu a:last-child{border-bottom:none}.dropdown-menu a:hover,.dropdown-menu a.selected{background-color:var(--red)}.dropdown-nav:hover .dropdown-menu{display:block}@media(max-width:980px){.dropdown-nav{display:flex;flex-direction:column;align-items:flex-start;width:100%;height:auto}.dropdown-nav>a{width:100%;height:42px!important}.dropdown-menu{display:block;position:static;box-shadow:none;border-top:none;width:100%;padding-left:15px;background-color:rgba(0,0,0,0.15)}.dropdown-menu a{height:40px!important;padding:0 15px;display:flex;align-items:center;border-bottom:none}}@media(max-width:720px){.dropdown-nav>a{height:44px!important}.dropdown-menu a{height:42px!important}}

/* ==========================================
   PREMIUM MODERN OVERHAUL STYLES
   ========================================== */

/* 1. Global Micro-Animations */
a, button, select, input, textarea {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Soft Shadows and Premium Colors Variable Overrides */
:root {
  --shadow: 0 16px 40px rgba(32, 28, 28, 0.05); /* Softer modern shadow */
}

:root, .cms, body, button, input, textarea, select {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Redefine card border radiuses & modern hover effects */
.article-tile, .compact-card, .latest-box, .announcements, .category-panel, .sidebar, .article-side-box, .cms-panel, .figure-card, .download-card, .notice-card {
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
}

.article-tile:hover, .figure-card:hover, .download-card:hover, .notice-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 24px 48px rgba(32, 37, 46, 0.12) !important;
}

/* 3. Smooth Dropdown Animations & Item Sizing (Desktop only) */
@media (min-width: 981px) {
  .dropdown-nav:hover .dropdown-menu {
    display: block !important;
  }
  .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-color: #1a2536 !important;
    border-top: 3px solid var(--red) !important;
    padding: 6px !important;
    border-radius: 0 0 8px 8px !important;
    min-width: 200px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15) !important;
  }
  .dropdown-nav:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav .links .dropdown-menu a {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin: 2px 0 !important;
    border-radius: 6px !important;
    display: block !important;
    text-align: left !important;
    background: transparent !important;
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-bottom: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .nav .links .dropdown-menu a:hover,
  .nav .links .dropdown-menu a.selected {
    background: var(--red) !important;
    color: #fff !important;
  }
}

/* 4. Dropdown Indicator Arrows (Desktop & Mobile) */
.dropdown-nav > a::after {
  content: " ▾";
  font-size: 9px;
  margin-left: 4px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

/* 5. Mobile-Specific Dropdown Collapse/Expand Rules & Touch Feedback */
@media (max-width: 980px) {
  .dropdown-menu {
    display: none !important; /* Collapsed by default on mobile */
  }
  
  .dropdown-nav.mobile-open .dropdown-menu {
    display: block !important; /* Expanded when tapped */
  }
  
  .dropdown-nav.mobile-open > a::after {
    transform: rotate(180deg); /* Rotate arrow when open */
    opacity: 1;
  }

  /* Highlight parent category when expanded (mobile "hover/active" state) */
  .dropdown-nav.mobile-open > a {
    background-color: var(--red) !important;
    color: #fff !important;
  }

  /* Touch active states feedback on mobile links */
  .nav .links a:active,
  .dropdown-menu a:active,
  .nav .links .dropdown-menu a:active {
    background-color: var(--red) !important;
    color: #fff !important;
  }
}

/* 6. Featured Image Crop Alignment & Aspect Ratio Matching (Mobile & Tablet) */
@media (max-width: 980px) {
  .featured img {
    height: auto !important;
    aspect-ratio: 514/448 !important; /* Mimic the exact aspect ratio of desktop view */
    object-fit: cover !important;
    object-position: top !important; /* Focus on faces/upper portion of the photo */
  }
}

/* 7. Latest News Horizontal Page Slideshow (Desktop, Tablet & Mobile) */
.latest-slider-wrapper {
  position: relative !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.latest-slider {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.slider-track {
  display: flex !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x mandatory !important; /* Page-by-page snap scrolling */
  gap: 0 !important; /* Gaps are handled inside slides */
  padding: 8px 4px 16px 4px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.slider-track::-webkit-scrollbar {
  display: none !important;
}

/* Individual Slides (2 Columns of Articles) */
.slider-slide {
  flex: 0 0 100% !important; /* Exactly one slide spans the full width */
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* Exactly 2 columns */
  gap: 16px !important;
  scroll-snap-align: start !important; /* Snaps to start of slide */
  box-sizing: border-box !important;
  padding: 0 8px !important;
}

/* Style cards inside slider */
.latest-slider .compact {
  display: flex !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 4px 12px rgba(32, 28, 28, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.latest-slider .compact:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 22px rgba(32, 28, 28, 0.08) !important;
}

/* Responsive card layout: vertical on mobile, horizontal on desktop/tablet */
@media (max-width: 720px) {
  .latest-slider .compact {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .latest-slider .compact img {
    width: 100% !important;
    height: clamp(100px, 20vw, 140px) !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}

@media (min-width: 721px) {
  .latest-slider .compact {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .latest-slider .compact img {
    width: 130px !important;
    height: 95px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}

.latest-slider .compact div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 2px 4px !important;
  flex: 1 !important;
  min-width: 0 !important; /* Prevents text overflow */
}

.latest-slider .compact label {
  font-size: 9px !important;
  background: var(--red) !important;
  padding: 3.5px 7px !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-weight: 700 !important;
  width: max-content !important;
  margin-bottom: 2px !important;
}

.latest-slider .compact h3 {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 38px !important; /* Keep aligned across cards */
}

.latest-slider .compact small {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

/* Slider Arrow Buttons (Centered Vertically) */
.slider-arrow {
  position: absolute !important;
  top: 50% !important; /* Centered relative to the slide height */
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--navy) !important;
  border: 1px solid #e0e5ee !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.slider-arrow:hover {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
  box-shadow: 0 6px 14px rgba(182, 36, 44, 0.25) !important;
}

.slider-arrow.prev {
  left: -19px !important;
}

.slider-arrow.next {
  right: -19px !important;
}

/* Wide grid alignment for desktop and tablet slider */
@media (min-width: 981px) {
  .latest-box {
    grid-column: span 3 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 14px !important;
  }
}

/* 8. Split Header Text to 2 Lines & Styling Overrides */
.brand h1 {
  color: #111827 !important; /* Black text */
}

.brand h1 span {
  display: block !important; /* Move SUARA to Line 1 */
  color: var(--red) !important; /* Red text */
}

/* 9. Mobile Compact Header Overhaul (max-width: 720px) */
@media (max-width: 720px) {
  .masthead {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 16px !important;
    min-height: 0 !important;
    gap: 8px !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    margin: 0 !important;
  }

  .brand img {
    width: 42px !important;
    height: 38px !important;
    object-fit: contain !important;
  }

  .brand h1 {
    font-size: 14px !important; /* Compact size for 2-line title */
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
  }

  .brand p, .brand small {
    display: none !important; /* Hide long subtitles/taglines on mobile */
  }

  .top-tools {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }

  .top-tools .social-links {
    display: none !important;
  }

  /* Compact Expandable Search Button */
  .top-search {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .top-search input {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #faf5f3 !important;
    border: 1px solid #eee1de !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    color: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  
  .top-search input:focus {
    width: 150px !important;
    border-radius: 20px !important;
    padding: 0 10px 0 34px !important;
    background: #fff !important;
    color: #111827 !important;
    cursor: text !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }

  .top-search input::placeholder {
    color: transparent !important;
  }

  .top-search input:focus::placeholder {
    color: #8b96a8 !important;
  }
  
  .top-search svg {
    position: absolute !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    color: var(--navy) !important;
    margin: 0 !important;
  }
  
  .top-search button {
    display: none !important;
  }
  /* Kirim Aspirasi Button mobile style: inherit global expandable styling */ }
}

/* 10. Navbar Premium Gradient */
.nav {
  background: linear-gradient(90deg, #3a1d24 0%, #4f2530 50%, #3a1d24 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Main Brand Header enhancements */
.masthead {
  background: linear-gradient(90deg, #fffdfc, #fff, #fff9f8) !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #f2e9e6;
}

/* Custom interactive adjustments */
.brand h1 {
  letter-spacing: -1.5px !important;
}

/* Header action buttons modern feel */
.header-actions a, .header-actions button, .cms-page-heading>button, .cms-actions button, .cms-form-actions .publish {
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(182, 36, 44, 0.2) !important;
}

.header-actions a:hover, .header-actions button:hover, .cms-page-heading>button:hover, .cms-actions button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(182, 36, 44, 0.3) !important;
}

/* Ticker design updates */
.ticker {
  background: #fbf8f7 !important;
  border-bottom: 1px solid #efe4e2 !important;
}
.ticker strong {
  background: linear-gradient(135deg, #b6242c 0%, #8f1d26 100%) !important;
  font-weight: 700;
  border-radius: 0 8px 8px 0;
}

/* CMS modernizing */
.cms-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #efe8e6 !important;
}

.cms-sidebar a {
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
}

.cms-sidebar a.active {
  background: linear-gradient(135deg, #b6242c 0%, #8f1d26 100%) !important;
  box-shadow: 0 8px 20px rgba(182, 36, 44, 0.25) !important;
}

.cms-panel {
  border-radius: 12px !important;
  border: 1px solid #efe8e6 !important;
}

/* Soft scrollbar for CMS sidebar */
.cms-sidebar::-webkit-scrollbar {
  width: 6px;
}
.cms-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.cms-sidebar::-webkit-scrollbar-thumb {
  background: #eadeda;
  border-radius: 10px;
}

/* ==========================================================================
   V9 REVISI LAYOUT: Ticker di Bawah Header & Hamburger Sejajar Logo
   ========================================================================== */

/* 1. Hamburger button inside masthead styling */
.masthead .hamburger {
  display: none !important;
}

@media (max-width: 980px) {
  /* Move hamburger to header on mobile */
  .masthead .hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--red) !important; /* Red color for hamburger on white header background */
    background: transparent !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  
  .masthead .hamburger svg {
    width: 26px !important;
    height: 26px !important;
    stroke: currentColor !important;
    stroke-width: 2.5px !important;
  }

  /* Collapse the nav bar when menu is closed so no space is wasted */
  .nav {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nav .links {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Ensure the links display correctly when active */
  .nav .links.active {
    display: flex !important;
    max-height: 720px !important;
  }

  /* Red top ticker styling on mobile (directly below header) */
  .ticker-under-menu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--red) !important;
    color: #fff !important;
    box-shadow: none !important;
    height: 40px !important;
    padding: 0 max(calc((100vw - 1320px)/2), 20px) !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .ticker-under-menu strong {
    background: #9b1c22 !important; /* Darker red label block */
    color: #fff !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  
  .ticker-under-menu .ticker-window {
    height: 40px !important;
    padding-left: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .ticker-under-menu .ticker-scroll a {
    color: #ffffff !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
  }
  
  .ticker-under-menu .ticker-scroll a span {
    color: #fca5a5 !important;
  }
  
  .ticker-under-menu time {
    background: transparent !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
  }
}

@media (max-width: 720px) {
  .masthead .hamburger {
    width: 32px !important;
    height: 32px !important;
    margin-right: 4px !important;
  }
  
  .masthead .hamburger svg {
    width: 24px !important;
    height: 24px !important;
  }

  .ticker-under-menu {
    height: 36px !important;
    padding: 0 12px !important;
  }
  
  .ticker-under-menu strong {
    height: 36px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }
  
  .ticker-under-menu .ticker-window {
    height: 36px !important;
    padding-left: 8px !important;
  }
  
  .ticker-under-menu time {
    display: none !important;
  }
}

/* ==========================================================================
   V10 REVISI SEARCH: Hanya Tampilkan Ikon Lensa & Perbesar Padding Text
   ========================================================================== */

@media (max-width: 980px) {
  /* Search input collapsed state: transparent background, no border, only icon visible */
  .top-search input {
    background: transparent !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
    box-shadow: none !important;
  }

  /* Search input focused state: expanded pill with border and background, text padded to the right */
  .top-search input:focus {
    width: 150px !important;
    border-radius: 20px !important;
    padding: 0 12px 0 40px !important; /* Left padding 40px to completely avoid icon overlap */
    background: #fff !important;
    border: 1px solid #eee1de !important;
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
}

@media (max-width: 720px) {
  /* Ensure padding-left is maintained on small screens */
  .top-search input:focus {
    padding: 0 10px 0 38px !important;
  }
}

/* ==========================================================================
   V11 REVISI BRAND & HAMBURGER: Font Tebal Berkarakter & Hamburger Geser Kiri
   ========================================================================== */

.brand h1 {
  font-family: 'Montserrat', 'Archivo Black', 'Arial Black', Impact, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -1.2px !important;
  line-height: 1.0 !important;
}

.brand h1 span {
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  display: block !important;
}

@media (max-width: 980px) {
  .masthead {
    padding: 10px 10px !important; /* Merapatkan area kiri-kanan header */
  }

  .masthead .hamburger {
    margin: 0 4px 0 -14px !important; /* Menarik tombol menu lebih ke kiri agar sejajar dengan logo/tepi */
  }

  .brand h1 {
    font-size: 15.5px !important; /* Lebih besar dan sangat tebal */
    letter-spacing: -0.8px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 720px) {
  .masthead {
    padding: 8px 10px !important;
  }

  .masthead .hamburger {
    margin: 0 2px 0 -14px !important; /* Geser lebih ke kiri di mobile kecil */
  }

  .brand h1 {
    font-size: 15px !important;
    letter-spacing: -0.8px !important;
    line-height: 1.05 !important;
  }
}

/* ==========================================================================
   V12 REVISI TAMPILAN PC & SLIDER 3 KOLOM AUTOPLAY
   ========================================================================== */

/* Hapus ikon media sosial di header pada desktop */
.top-tools .social-links {
  display: none !important;
}

/* Modifikasi slider berita terbaru untuk 3 kolom */
@media (min-width: 981px) {
  .slider-slide {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  .slider-slide {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .latest-slider .compact {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .latest-slider .compact img {
    width: 100% !important;
    height: 110px !important;
  }
}

@media (max-width: 720px) {
  .slider-slide {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  .latest-slider .compact {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }
  .latest-slider .compact img {
    width: 100% !important;
    height: 85px !important;
    border-radius: 6px !important;
  }
  .latest-slider .compact h3 {
    font-size: 11px !important;
    line-height: 1.3 !important;
    height: 30px !important;
    margin: 0 !important;
  }
  .latest-slider .compact label {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }
  .latest-slider .compact small {
    font-size: 9px !important;
  }
}

/* ==========================================================================
   V13 REVISI TATA LETAK BERANDA DINAMIS & RESPONSIF
   ========================================================================== */

/* Pastikan layout di beranda menggunakan flexbox agar kolom kiri & kanan terpisah rapi */
main.layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 22px !important;
  align-items: flex-start !important;
  max-width: 1320px !important;
  margin: 24px auto !important;
  width: calc(100% - 40px) !important;
  box-sizing: border-box !important;
}

.main-content-area {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.sidebar-content-area {
  width: 290px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Pastikan elemen-elemen di dalam area utama melar mengikuti grid kolom */
.main-content-area .lead {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
  margin: 0 !important;
  width: 100% !important;
}

.main-content-area .latest-box {
  grid-column: span 1 !important;
  grid-row: span 2 !important;
  margin: 0 !important;
  width: 100% !important;
}

.main-content-area .category-panel {
  grid-column: span 3 !important;
  margin: 0 !important;
  width: 100% !important;
}

.main-content-area .gallery {
  grid-column: span 3 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Responsif untuk Tablet & Handphone */
@media (max-width: 980px) {
  main.layout {
    flex-direction: column !important;
    width: calc(100% - 24px) !important;
    margin: 14px auto !important;
    gap: 16px !important;
  }
  
  .main-content-area {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }
  
  .sidebar-content-area {
    width: 100% !important;
    gap: 16px !important;
  }
  
  .main-content-area .lead,
  .main-content-area .latest-box,
  .main-content-area .latest-slider-block,
  .main-content-area .category-panel,
  .main-content-area .gallery {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}

/* ==========================================================================
   V18 SEARCH RESULTS: VERTICAL LIST WITH SMALL THUMBNAIL
   ========================================================================== */
.search-results-vertical {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.search-item-vertical {
  display: flex !important;
  flex-direction: row !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  gap: 16px !important;
  align-items: center !important;
  box-shadow: var(--shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  min-width: 0 !important;
}

.search-item-vertical:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
}

.search-item-thumb {
  flex: 0 0 100px !important;
  width: 100px !important;
  height: 75px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f4ecea !important;
}

.search-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.search-item-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.search-item-category {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.search-item-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.search-item-title a {
  color: var(--navy) !important;
  text-decoration: none !important;
}

.search-item-title a:hover {
  color: var(--red) !important;
}

.search-item-excerpt {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden;
}

.search-item-meta {
  font-size: 11px !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

/* Responsive adjustment for search mobile */
@media (max-width: 540px) {
  .search-item-vertical {
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px !important;
  }
  
  .search-item-thumb {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 60px !important;
  }
  
  .search-item-title {
    font-size: 13.5px !important;
  }
  
  .search-item-excerpt {
    display: none !important;
  }
}

/* ==========================================================================
   V18 LATEST BOX: STATIC VERTICAL LIST STYLE (DESKTOP)
   ========================================================================== */
.latest-static-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.latest-static-list .compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 4px 12px rgba(32, 28, 28, 0.02) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.latest-static-list .compact:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(32, 28, 28, 0.06) !important;
}

.latest-static-list .compact img {
  width: 90px !important;
  height: 70px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.latest-static-list .compact div {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.latest-static-list .compact label {
  font-size: 8px !important;
  background: var(--red) !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-weight: 700 !important;
  width: max-content !important;
  margin-bottom: 2px !important;
}

.latest-static-list .compact h3 {
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 32px !important;
}

.latest-static-list .compact small {
  font-size: 10px !important;
  color: var(--muted) !important;
}

.main-content-area .latest-box.latest-slider-block {
  grid-column: span 3 !important;
  grid-row: auto !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ==========================================================================
   V13 REVISI TATA LETAK BERANDA DINAMIS & RESPONSIF
   ========================================================================== */
.homepage-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 22px !important;
  align-items: flex-start !important;
  max-width: 1320px !important;
  margin: 24px auto !important;
  width: calc(100% - 40px) !important;
  box-sizing: border-box !important;
}

.main-content-area {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.sidebar-content-area {
  width: 290px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.main-content-area .lead {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
  margin: 0 !important;
  width: 100% !important;
}

.main-content-area .latest-box {
  grid-column: span 1 !important;
  grid-row: span 2 !important;
  margin: 0 !important;
  width: 100% !important;
}

.main-content-area .category-panel {
  grid-column: span 3 !important;
  margin: 0 !important;
  width: 100% !important;
}

.main-content-area .gallery {
  grid-column: span 3 !important;
  margin: 0 !important;
  width: 100% !important;
}

@media (max-width: 980px) {
  .homepage-layout {
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% - 24px) !important;
    margin: 14px auto !important;
    gap: 16px !important;
  }
  
  .main-content-area {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }
  
  .sidebar-content-area {
    width: 100% !important;
    gap: 16px !important;
  }
  
  .main-content-area .lead,
  .main-content-area .latest-box,
  .main-content-area .latest-slider-block,
  .main-content-area .category-panel,
  .main-content-area .gallery {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}


/* ==========================================================================
   PORTAL MODERNIZATION: DARK THEME & SKELETON LOADING
   ========================================================================== */

/* 1. Pulse Animation & Skeleton */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.skeleton-pulse {
  animation: skeleton-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.skeleton-block {
  background-color: var(--line) !important;
  border-radius: 6px !important;
  display: block !important;
}

/* 2. Theme Toggle Switch Style */
.theme-toggle {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-right: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  box-sizing: border-box !important;
}

.theme-toggle:hover {
  background: var(--soft) !important;
  transform: scale(1.05) !important;
}

/* 3. Dark Mode Overrides */
:root[data-theme='dark'] {
  --red: #ff4d55;
  --red-deep: #d21f26;
  --red-soft: #2b1315;
  --navy: #f1f5f9;
  --navy2: #cbd5e1;
  --gold: #f59e0b;
  --line: #2d3748;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --soft: #0f172a;
  --paper: #1e293b;
  --shadow: 0 12px 32px rgba(0,0,0,0.45);
}

:root[data-theme='dark'] body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

:root[data-theme='dark'] .latest-box,
:root[data-theme='dark'] .announcements,
:root[data-theme='dark'] .category-panel,
:root[data-theme='dark'] .sidebar,
:root[data-theme='dark'] .article-side-box,
:root[data-theme='dark'] .cms-panel,
:root[data-theme='dark'] .cms-sidebar,
:root[data-theme='dark'] .cms-editor,
:root[data-theme='dark'] .manage-list,
:root[data-theme='dark'] .full-gallery figure,
:root[data-theme='dark'] .article-tile,
:root[data-theme='dark'] .figure-card,
:root[data-theme='dark'] .download-card,
:root[data-theme='dark'] .notice-card,
:root[data-theme='dark'] .about-copy,
:root[data-theme='dark'] .contact-layout section,
:root[data-theme='dark'] .aspiration-form,
:root[data-theme='dark'] .login-box,
:root[data-theme='dark'] .rich-editor,
:root[data-theme='dark'] .rich-toolbar {
  background: #0f172a !important; /* slate-900 for card bg in dark mode */
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

:root[data-theme='dark'] .masthead {
  background: linear-gradient(90deg, #1e293b, #0f172a, #1e293b) !important;
  border-bottom-color: var(--line) !important;
}

:root[data-theme='dark'] .ticker {
  background: #0f172a !important;
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}

:root[data-theme='dark'] .ticker-scroll a {
  color: var(--ink) !important;
}

:root[data-theme='dark'] .brand h1,
:root[data-theme='dark'] .brand p,
:root[data-theme='dark'] .compact h3,
:root[data-theme='dark'] .popular-item b,
:root[data-theme='dark'] .story h1,
:root[data-theme='dark'] .cms-page-heading h1,
:root[data-theme='dark'] .cms-panel h2,
:root[data-theme='dark'] .cms-popular b,
:root[data-theme='dark'] .cms-message-preview b,
:root[data-theme='dark'] .cms-table-row b,
:root[data-theme='dark'] .value-cards b,
:root[data-theme='dark'] .aspiration-form h2,
:root[data-theme='dark'] .login-box h2 {
  color: var(--ink) !important;
}

:root[data-theme='dark'] .compact,
:root[data-theme='dark'] .announcement,
:root[data-theme='dark'] .popular-item,
:root[data-theme='dark'] .rank,
:root[data-theme='dark'] .section-title,
:root[data-theme='dark'] .cms-popular,
:root[data-theme='dark'] .cms-message-preview,
:root[data-theme='dark'] .cms-table-row,
:root[data-theme='dark'] .cms-toolbar,
:root[data-theme='dark'] .cms-inbox-item {
  border-bottom-color: var(--line) !important;
}

:root[data-theme='dark'] .top-search,
:root[data-theme='dark'] .top-search input,
:root[data-theme='dark'] .cms-toolbar select,
:root[data-theme='dark'] .cms-toolbar label,
:root[data-theme='dark'] .cms-editor input,
:root[data-theme='dark'] .cms-editor textarea,
:root[data-theme='dark'] .cms-editor select,
:root[data-theme='dark'] .aspiration-form input,
:root[data-theme='dark'] .aspiration-form textarea,
:root[data-theme='dark'] .login-box input {
  background: #1e293b !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

:root[data-theme='dark'] .side-block,
:root[data-theme='dark'] .tag-cloud a,
:root[data-theme='dark'] .value-cards div,
:root[data-theme='dark'] .cms-stat,
:root[data-theme='dark'] .cms-stat svg {
  background: #0f172a !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

:root[data-theme='dark'] .cms-sidebar a {
  color: var(--ink) !important;
}

:root[data-theme='dark'] .cms-sidebar a:hover {
  background: #0f172a !important;
}

:root[data-theme='dark'] .cms-table-head {
  background: #1e293b !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}

:root[data-theme='dark'] .theme-toggle {
  color: #f59e0b !important;
  border-color: var(--line) !important;
  background: #1e293b !important;
}
:root[data-theme='dark'] .theme-toggle:hover {
  background: #0f172a !important;
}

:root[data-theme='dark'] .demo-notice {
  background: #3c2a10 !important;
  border-color: #6e4b00 !important;
  color: #ffe0a3 !important;
}
:root[data-theme='dark'] .demo-notice code {
  background: #5c3e06 !important;
}
/* ==========================================================================
   V20: ADVANCED FEATURES CSS (HELPDESK, CHATBOT AI, PUSH, CHART)
   ========================================================================== */

/* 1. Push Button Header */
.push-subscribe-btn {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}
.push-subscribe-btn:hover {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
  transform: scale(1.05) !important;
}
:root[data-theme='dark'] .push-subscribe-btn {
  color: var(--gold) !important;
}

/* 2. Floating Chatbot AI (Asisten SGP) */
.sgp-chatbot-toggle {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(210,31,38,0.3) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.sgp-chatbot-toggle:hover {
  transform: scale(1.1) rotate(15deg) !important;
  background: var(--red-deep) !important;
  box-shadow: 0 10px 28px rgba(210,31,38,0.45) !important;
}
.sgp-chatbot-window {
  position: fixed !important;
  bottom: 92px !important;
  right: 24px !important;
  width: 360px !important;
  height: 500px !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
  border: 1px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 9998 !important;
  overflow: hidden !important;
  animation: chatbot-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes chatbot-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sgp-chatbot-header {
  background: var(--red) !important;
  color: #fff !important;
  padding: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: bold !important;
}
.sgp-chatbot-header h4 {
  margin: 0 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.sgp-chatbot-close {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.sgp-chatbot-body {
  flex: 1 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #f8fafc !important;
}
.sgp-chat-msg {
  max-width: 80% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
}
.sgp-chat-msg.bot {
  background: #fff !important;
  color: var(--navy) !important;
  align-self: flex-start !important;
  border-bottom-left-radius: 2px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}
.sgp-chat-msg.user {
  background: var(--red) !important;
  color: #fff !important;
  align-self: flex-end !important;
  border-bottom-right-radius: 2px !important;
}
.sgp-chat-msg.bot a {
  color: var(--red) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}
.sgp-chatbot-input-area {
  display: flex !important;
  padding: 10px !important;
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
  gap: 8px !important;
}
.sgp-chatbot-input {
  flex: 1 !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  outline: none !important;
}
.sgp-chatbot-input:focus {
  border-color: var(--red) !important;
}
.sgp-chatbot-send {
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3. Helpdesk & Case Tracking */
.helpdesk-section {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-top: 24px !important;
}
.helpdesk-tab-buttons {
  display: flex !important;
  gap: 10px !important;
  border-bottom: 2px solid var(--line) !important;
  margin-bottom: 20px !important;
  padding-bottom: 8px !important;
}
.helpdesk-tab-btn {
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.helpdesk-tab-btn.active {
  color: var(--red) !important;
  border-bottom: 3px solid var(--red) !important;
  margin-bottom: -11px !important;
}
.helpdesk-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 24px !important;
}
@media (max-width: 720px) {
  .helpdesk-grid { grid-template-columns: 1fr !important; }
}
.helpdesk-form-card, .helpdesk-tracker-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.helpdesk-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.helpdesk-field label {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--navy) !important;
}
.helpdesk-field input, .helpdesk-field select, .helpdesk-field textarea {
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  font-size: 13.5px !important;
}
.helpdesk-field input:focus, .helpdesk-field select:focus, .helpdesk-field textarea:focus {
  border-color: var(--red) !important;
  outline: none !important;
}
.helpdesk-btn {
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.helpdesk-btn:hover {
  background: var(--red-deep) !important;
}
.case-progress-tracker {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 16px !important;
}
.case-step {
  display: flex !important;
  gap: 16px !important;
  position: relative !important;
}
.case-step:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  left: 17px !important;
  top: 36px !important;
  width: 2px !important;
  height: calc(100% - 10px) !important;
  background: var(--line) !important;
}
.case-step-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--line) !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  z-index: 1 !important;
}
.case-step.active .case-step-icon {
  background: var(--red) !important;
  color: #fff !important;
}
.case-step.done .case-step-icon {
  background: #10b981 !important;
  color: #fff !important;
}
.case-step-content {
  flex: 1 !important;
  padding-top: 6px !important;
}
.case-step-content b {
  font-size: 14px !important;
  color: var(--navy) !important;
}
.case-step-content p {
  margin: 4px 0 0 0 !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* Dark Mode Overrides for Advanced Features */
:root[data-theme='dark'] .sgp-chatbot-window {
  background: #1e293b !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
:root[data-theme='dark'] .sgp-chatbot-body {
  background: #0f172a !important;
}
:root[data-theme='dark'] .sgp-chat-msg.bot {
  background: #1e293b !important;
  color: #f8fafc !important;
}
:root[data-theme='dark'] .sgp-chatbot-input-area {
  background: #1e293b !important;
  border-top-color: var(--line) !important;
}
:root[data-theme='dark'] .sgp-chatbot-input {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: var(--line) !important;
}
:root[data-theme='dark'] .helpdesk-section {
  background: #1e293b !important;
  border-color: var(--line) !important;
}
:root[data-theme='dark'] .helpdesk-field label {
  color: #f8fafc !important;
}
:root[data-theme='dark'] .helpdesk-field input,
:root[data-theme='dark'] .helpdesk-field select,
:root[data-theme='dark'] .helpdesk-field textarea {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: var(--line) !important;
}
/* Fix z-index for Kirim Aspirasi Modal and block any sticky overlap */
.modal-bg {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 9999999 !important;
  background: rgba(3, 14, 33, 0.62) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Align top tools (Dark Mode, Notification, Kirim Aspirasi, Social Links) horizontally on desktop */
@media (min-width: 1201px) {
  .top-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 11px !important;
    width: auto !important;
  }
  .top-search {
    width: 100% !important;
    order: -1 !important; /* Force search to the top row */
  }
  .theme-toggle {
    order: 1 !important;
  }
  .push-subscribe-btn {
    order: 2 !important;
  }
  .top-tools .aspirasi {
    order: 3 !important; /* Put Kirim Aspirasi next to push subscribe btn */
  }
  .top-tools .social-links {
    order: 4 !important; /* Put social links last */
  }
}
@media (max-width: 1200px) {
  .top-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .top-search {
    width: 100% !important;
    order: -1 !important;
  }
  .theme-toggle {
    order: 1 !important;
  }
  .push-subscribe-btn {
    order: 2 !important;
  }
  .top-tools .aspirasi {
    order: 3 !important; /* Put Kirim Aspirasi next to push subscribe btn */
  }
}

/* ==========================================
   CUSTOM REVISI & FIXES
   ========================================== */

/* 1. Hapus Asisten SGP */
.sgp-chatbot-toggle,
.sgp-chatbot-window {
  display: none !important;
}

/* 2. Hapus Icon Notifikasi */
.push-subscribe-btn {
  display: none !important;
}

/* 3. Hapus Helpdesk & Link Terkait */
.helpdesk-section,
#helpdesk-advokasi,
a[href*="helpdesk"],
a[href*="helpdesk-advokasi"] {
  display: none !important;
}

/* 4. Fix Tampilan Mobile Berantakan / Horizontal Scroll */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* 5. Fix Mode Gelap (Dark Mode Overrides) */
html[data-theme='dark'],
:root[data-theme='dark'] {
  --red: #ff4d55 !important;
  --red-deep: #d21f26 !important;
  --red-soft: #2b1315 !important;
  --navy: #f1f5f9 !important;
  --navy2: #cbd5e1 !important;
  --gold: #f59e0b !important;
  --line: #2d3748 !important;
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --soft: #0f172a !important;
  --paper: #1e293b !important;
  --bg: #1e293b !important;
  --shadow: 0 12px 32px rgba(0,0,0,0.45) !important;
}

html[data-theme='dark'] body,
:root[data-theme='dark'] body,
html[data-theme='dark'] #root,
:root[data-theme='dark'] #root,
html[data-theme='dark'] .site,
:root[data-theme='dark'] .site {
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] p,
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6,
html[data-theme='dark'] span,
html[data-theme='dark'] a,
html[data-theme='dark'] div,
html[data-theme='dark'] li,
html[data-theme='dark'] label,
html[data-theme='dark'] td,
html[data-theme='dark'] th,
html[data-theme='dark'] strong,
html[data-theme='dark'] b {
  color: #f8fafc !important;
}

html[data-theme='dark'] a {
  color: #60a5fa !important; /* Light blue for links in dark mode */
}

html[data-theme='dark'] .brand a,
html[data-theme='dark'] .links a,
html[data-theme='dark'] .ticker-scroll a {
  color: #f8fafc !important;
}

html[data-theme='dark'] .latest-box,
html[data-theme='dark'] .announcements,
html[data-theme='dark'] .category-panel,
html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .article-side-box,
html[data-theme='dark'] .cms-panel,
html[data-theme='dark'] .cms-sidebar,
html[data-theme='dark'] .cms-editor,
html[data-theme='dark'] .manage-list,
html[data-theme='dark'] .full-gallery figure,
html[data-theme='dark'] .article-tile,
html[data-theme='dark'] .figure-card,
html[data-theme='dark'] .download-card,
html[data-theme='dark'] .notice-card,
html[data-theme='dark'] .about-copy,
html[data-theme='dark'] .contact-layout section,
html[data-theme='dark'] .aspiration-form,
html[data-theme='dark'] .login-box,
html[data-theme='dark'] .rich-editor,
html[data-theme='dark'] .rich-toolbar,
html[data-theme='dark'] .search-item-vertical,
html[data-theme='dark'] .latest-static-list .compact {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #2d3748 !important;
  color: #f8fafc !important;
}

/* Dark Mode Overrides for Admin Superpower Panel */
html[data-theme='dark'] #sgp-panel-root,
html[data-theme='dark'] .sgp-panel-wrap,
html[data-theme='dark'] .sgp-card,
html[data-theme='dark'] .sgp-table,
html[data-theme='dark'] .sgp-table th,
html[data-theme='dark'] .sgp-table td,
html[data-theme='dark'] .sgp-panel-head,
html[data-theme='dark'] .sgp-panel-nav,
html[data-theme='dark'] .sgp-menu-card,
html[data-theme='dark'] .sgp-kanban-col,
html[data-theme='dark'] .sgp-kanban-item,
html[data-theme='dark'] .sgp-pager {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #2d3748 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .sgp-table th {
  background: #1e293b !important;
}

html[data-theme='dark'] .sgp-input,
html[data-theme='dark'] .sgp-table select {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #2d3748 !important;
}

html[data-theme='dark'] .sgp-super-link:hover,
html[data-theme='dark'] .sgp-panel-nav a,
html[data-theme='dark'] .sgp-panel-close {
  background: #1e293b !important;
  border-color: #2d3748 !important;
  color: #f8fafc !important;
}

/* ========================================================================
   V18 MOBILE SAFE FIX — Beranda HP tidak tumpang tindih
   Fokus: hanya layar tablet/HP; layout PC dibiarkan tetap seperti semula.
   ======================================================================== */
@media (max-width: 900px) {
  html, body, #root, .site {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site, .site * {
    box-sizing: border-box !important;
  }

  /* Header HP: hamburger, logo, mode, dan pencarian tidak bertabrakan */
  .masthead {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .masthead .hamburger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--red) !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 4 !important;
  }

  .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .brand img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    object-fit: contain !important;
  }

  .brand > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand h1 {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand p,
  .brand small {
    display: none !important;
  }

  .top-tools {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .top-tools .social-links,
  .push-subscribe-btn,
  .top-tools .aspirasi {
    display: none !important;
  }

  .theme-toggle {
    order: 1 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    position: relative !important;
    z-index: 6 !important;
  }

  .top-search {
    order: 2 !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 6 !important;
  }

  .top-search svg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 21px !important;
    height: 21px !important;
    color: var(--navy) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .top-search input {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
  }

  .top-search button {
    display: none !important;
  }

  .top-search:focus-within {
    position: absolute !important;
    right: 12px !important;
    top: calc(100% + 8px) !important;
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #eadbd8 !important;
    box-shadow: 0 14px 34px rgba(20, 20, 25, .18) !important;
    border-radius: 999px !important;
    z-index: 99 !important;
  }

  .top-search:focus-within svg {
    left: 18px !important;
    transform: translateY(-50%) !important;
  }

  .top-search:focus-within input {
    opacity: 1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    color: #111827 !important;
    padding: 0 14px 0 42px !important;
  }

  .top-search:focus-within button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    margin: 4px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
  }

  .nav {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
    z-index: 40 !important;
  }

  .ticker-under-menu,
  .ticker {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px auto 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Struktur utama HP: semua blok turun rapi, tidak grid/absolute. */
  main.layout,
  .layout {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 12px auto 24px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    overflow: visible !important;
  }

  .layout > .main-content-area,
  .layout > .sidebar-content-area,
  .main-content-area,
  .sidebar-content-area {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
    overflow: visible !important;
  }

  .main-content-area > *,
  .sidebar-content-area > *,
  .layout > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
  }

  .lead,
  .latest-box,
  .latest-slider-block,
  .announcements,
  .category-panel,
  .gallery,
  .sidebar {
    border-radius: 16px !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Berita utama HP: gambar di atas, teks di bawah, tidak menumpuk di atas gambar. */
  .lead {
    background: #fff !important;
  }

  .featured {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    color: #111827 !important;
    position: static !important;
  }

  .featured::after,
  .featured:after {
    display: none !important;
    content: none !important;
  }

  .featured img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    filter: none !important;
  }

  .featured .overlay {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 15px 16px !important;
    display: block !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important;
  }

  .featured .overlay label {
    display: inline-flex !important;
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  .featured .overlay small {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 0 8px !important;
    color: #6b7280 !important;
    font-size: 11px !important;
  }

  .featured .overlay h2 {
    margin: 0 0 8px !important;
    max-width: none !important;
    color: #111827 !important;
    font-size: clamp(20px, 5.4vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  .featured .overlay > div {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #4b5563 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .featured .overlay > div p,
  .featured .overlay p {
    margin: 0 !important;
    padding: 0 !important;
    color: #4b5563 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .featured .overlay button {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  /* Slider berita terbaru HP: kartu tidak saling bertumpuk. */
  .latest-slider-block {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
  }

  .latest-slider-wrapper,
  .latest-slider,
  .slider-track {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .slider-track {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    padding: 8px 0 12px !important;
    gap: 0 !important;
  }

  .slider-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
  }

  .latest-slider .compact,
  .compact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .latest-slider .compact img,
  .compact img {
    width: 92px !important;
    height: 70px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex: 0 0 92px !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    margin: 0 !important;
  }

  .latest-slider .compact > div,
  .compact > div {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .latest-slider .compact h3,
  .compact h3 {
    height: auto !important;
    max-height: none !important;
    margin: 4px 0 4px !important;
    color: var(--navy) !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .latest-slider .compact label,
  .compact label {
    display: inline-flex !important;
    max-width: 100% !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .latest-slider .compact small,
  .compact small {
    color: var(--muted) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .slider-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 20px !important;
    z-index: 10 !important;
  }

  /* Daftar semua berita / halaman artikel-list HP: teks rata kiri dan tidak terlalu masuk. */
  .inner-page,
  .public-inner-layout {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 12px auto 28px !important;
    padding: 0 !important;
  }

  .page-head {
    margin: 0 0 14px !important;
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }

  .page-head h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  .article-grid,
  .full-gallery,
  .figure-grid,
  .download-grid,
  .notice-grid,
  .value-cards,
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .article-tile,
  .figure-card,
  .download-card,
  .notice-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .article-tile img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .article-tile > div,
  .figure-card > div,
  .download-card > div {
    padding: 14px 15px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .article-tile h2,
  .article-tile p,
  .article-tile span,
  .figure-card h2,
  .figure-card p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .article-tile p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 420px) {
  .masthead {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    column-gap: 6px !important;
  }

  .brand img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .brand h1 {
    font-size: 13.5px !important;
  }

  .top-tools {
    max-width: 82px !important;
    gap: 5px !important;
  }

  .theme-toggle,
  .top-search {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-basis: 36px !important;
  }

  .top-search input {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* Dark mode readability fix untuk aturan mobile di atas. */
html[data-theme='dark'] .featured,
html[data-theme='dark'] .featured .overlay,
html[data-theme='dark'] .lead,
html[data-theme='dark'] .latest-box,
html[data-theme='dark'] .latest-slider .compact,
html[data-theme='dark'] .compact,
html[data-theme='dark'] .article-tile,
html[data-theme='dark'] .figure-card,
html[data-theme='dark'] .download-card,
html[data-theme='dark'] .notice-card,
html[data-theme='dark'] .page-head,
html[data-theme='dark'] .top-search:focus-within {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #2d3748 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .featured .overlay h2,
html[data-theme='dark'] .featured .overlay > div,
html[data-theme='dark'] .featured .overlay > div p,
html[data-theme='dark'] .featured .overlay p,
html[data-theme='dark'] .compact h3,
html[data-theme='dark'] .article-tile h2,
html[data-theme='dark'] .figure-card h2,
html[data-theme='dark'] .download-card h2,
html[data-theme='dark'] .notice-card h2,
html[data-theme='dark'] .page-head h1,
html[data-theme='dark'] .page-head p {
  color: #f8fafc !important;
}

html[data-theme='dark'] .featured .overlay small,
html[data-theme='dark'] .compact small,
html[data-theme='dark'] .article-tile p,
html[data-theme='dark'] .article-tile span,
html[data-theme='dark'] .figure-card p {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .top-search:focus-within input {
  color: #f8fafc !important;
  background: transparent !important;
}

html[data-theme='dark'] .top-search svg,
html[data-theme='dark'] .theme-toggle {
  color: #f8fafc !important;
}


/* =========================================================
   V18 MOBILE SEARCH + DARK SECTION + FEATURED IMAGE PATCH
   Fokus revisi:
   1) ikon/field pencarian HP tidak tertutup,
   2) dark mode bagian Paling Dibaca dan Pengumuman Resmi terbaca,
   3) gambar Berita Utama HP dikecilkan sedikit.
   ========================================================= */
@media (max-width: 720px) {
  .masthead {
    position: relative !important;
    overflow: visible !important;
  }

  .top-tools {
    width: auto !important;
    max-width: none !important;
    min-width: 86px !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .theme-toggle,
  .top-search {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
  }

  .top-search {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff7f4 !important;
    border: 1px solid #eadbd8 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  .top-search svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 19px !important;
    height: 19px !important;
    color: #091f44 !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  .top-search input {
    position: absolute !important;
    inset: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    opacity: 1 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }

  .top-search button {
    display: none !important;
  }

  .top-search:focus-within {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 8px) !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    background: #ffffff !important;
    border: 1px solid #d9e0ea !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .22) !important;
    z-index: 999 !important;
  }

  .top-search:focus-within svg {
    left: 18px !important;
    transform: translateY(-50%) !important;
    color: #091f44 !important;
  }

  .top-search:focus-within input {
    position: static !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    opacity: 1 !important;
    color: #111827 !important;
    padding: 0 14px 0 42px !important;
    cursor: text !important;
  }

  .top-search:focus-within button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 62px !important;
    height: 34px !important;
    margin-right: 5px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #d21f26 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .lead,
  .featured {
    background: #ffffff !important;
  }

  .featured img {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto 0 !important;
    border-radius: 14px !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 235px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .featured .overlay {
    padding: 13px 14px 16px !important;
  }
}

@media (max-width: 390px) {
  .top-tools {
    max-width: none !important;
    min-width: 84px !important;
    gap: 7px !important;
  }

  .theme-toggle,
  .top-search {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
  }

  .top-search input {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  .top-search:focus-within {
    left: 9px !important;
    right: 9px !important;
    width: auto !important;
  }

  .featured img {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    max-height: 220px !important;
  }
}

/* Dark mode: jangan ada teks putih di atas background putih pada sidebar/announcement. */
html[data-theme='dark'] body,
:root[data-theme='dark'] body {
  background: #0b1120 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .latest-box,
html[data-theme='dark'] .announcements,
html[data-theme='dark'] .category-panel,
html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .article-side-box,
html[data-theme='dark'] .lead,
html[data-theme='dark'] .featured,
html[data-theme='dark'] .featured .overlay,
html[data-theme='dark'] .latest-slider .compact,
html[data-theme='dark'] .compact,
html[data-theme='dark'] .article-tile,
html[data-theme='dark'] .notice-card,
:root[data-theme='dark'] .latest-box,
:root[data-theme='dark'] .announcements,
:root[data-theme='dark'] .category-panel,
:root[data-theme='dark'] .sidebar,
:root[data-theme='dark'] .article-side-box,
:root[data-theme='dark'] .lead,
:root[data-theme='dark'] .featured,
:root[data-theme='dark'] .featured .overlay,
:root[data-theme='dark'] .latest-slider .compact,
:root[data-theme='dark'] .compact,
:root[data-theme='dark'] .article-tile,
:root[data-theme='dark'] .notice-card {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .section-title,
:root[data-theme='dark'] .section-title {
  background: #111827 !important;
  border-bottom-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .announcements .section-title,
:root[data-theme='dark'] .announcements .section-title {
  background: #b91c1c !important;
  border-bottom-color: #b91c1c !important;
}

html[data-theme='dark'] .section-title h2,
html[data-theme='dark'] .section-title a,
html[data-theme='dark'] .announcements .section-title h2,
html[data-theme='dark'] .announcements .section-title a,
html[data-theme='dark'] .compact h3,
html[data-theme='dark'] .announcement b,
html[data-theme='dark'] .rank,
html[data-theme='dark'] .rank a,
html[data-theme='dark'] .popular-item,
html[data-theme='dark'] .popular-item b,
html[data-theme='dark'] .featured .overlay h2,
:root[data-theme='dark'] .section-title h2,
:root[data-theme='dark'] .section-title a,
:root[data-theme='dark'] .announcements .section-title h2,
:root[data-theme='dark'] .announcements .section-title a,
:root[data-theme='dark'] .compact h3,
:root[data-theme='dark'] .announcement b,
:root[data-theme='dark'] .rank,
:root[data-theme='dark'] .rank a,
:root[data-theme='dark'] .popular-item,
:root[data-theme='dark'] .popular-item b,
:root[data-theme='dark'] .featured .overlay h2 {
  color: #f8fafc !important;
}

html[data-theme='dark'] .announcement small,
html[data-theme='dark'] .compact small,
html[data-theme='dark'] .featured .overlay small,
html[data-theme='dark'] .featured .overlay p,
html[data-theme='dark'] .featured .overlay > div,
html[data-theme='dark'] .article-tile p,
:root[data-theme='dark'] .announcement small,
:root[data-theme='dark'] .compact small,
:root[data-theme='dark'] .featured .overlay small,
:root[data-theme='dark'] .featured .overlay p,
:root[data-theme='dark'] .featured .overlay > div,
:root[data-theme='dark'] .article-tile p {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .section-title h2:before,
:root[data-theme='dark'] .section-title h2:before {
  background: #ff4d55 !important;
}

html[data-theme='dark'] .announcements .section-title h2:before,
:root[data-theme='dark'] .announcements .section-title h2:before {
  display: none !important;
}

html[data-theme='dark'] .top-search,
:root[data-theme='dark'] .top-search {
  background: #111827 !important;
  border-color: #334155 !important;
}

html[data-theme='dark'] .top-search svg,
:root[data-theme='dark'] .top-search svg {
  color: #f8fafc !important;
}

html[data-theme='dark'] .top-search:focus-within,
:root[data-theme='dark'] .top-search:focus-within {
  background: #0f172a !important;
  border-color: #475569 !important;
}

html[data-theme='dark'] .top-search:focus-within input,
:root[data-theme='dark'] .top-search:focus-within input {
  color: #f8fafc !important;
}


/* =========================================================
   V18 MOBILE DARK CARD FINAL PATCH
   Screenshot fix: kartu Pengumuman Resmi dan Paling Dibaca
   masih putih di dark mode karena aturan modern-card memberi
   background:#fff ke .announcement dan .popular-item.
   ========================================================= */
html[data-theme='dark'] .announcements,
html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .latest-box,
:root[data-theme='dark'] .announcements,
:root[data-theme='dark'] .sidebar,
:root[data-theme='dark'] .latest-box {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
  border-color: #263244 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .announcement,
html[data-theme='dark'] .popular-item,
html[data-theme='dark'] .rank,
html[data-theme='dark'] .compact-card,
html[data-theme='dark'] .cms-popular,
html[data-theme='dark'] .cms-message-preview,
:root[data-theme='dark'] .announcement,
:root[data-theme='dark'] .popular-item,
:root[data-theme='dark'] .rank,
:root[data-theme='dark'] .compact-card,
:root[data-theme='dark'] .cms-popular,
:root[data-theme='dark'] .cms-message-preview {
  background: #111827 !important;
  background-color: #111827 !important;
  border: 1px solid #2f3b4f !important;
  border-bottom-color: #2f3b4f !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .announcement > div,
html[data-theme='dark'] .popular-item > div,
html[data-theme='dark'] .rank > div,
:root[data-theme='dark'] .announcement > div,
:root[data-theme='dark'] .popular-item > div,
:root[data-theme='dark'] .rank > div {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .announcement b,
html[data-theme='dark'] .popular-item b,
html[data-theme='dark'] .popular-item a,
html[data-theme='dark'] .rank,
html[data-theme='dark'] .rank a,
html[data-theme='dark'] .rank b:not(:first-child),
:root[data-theme='dark'] .announcement b,
:root[data-theme='dark'] .popular-item b,
:root[data-theme='dark'] .popular-item a,
:root[data-theme='dark'] .rank,
:root[data-theme='dark'] .rank a,
:root[data-theme='dark'] .rank b:not(:first-child) {
  color: #f8fafc !important;
  opacity: 1 !important;
}

html[data-theme='dark'] .announcement small,
html[data-theme='dark'] .popular-item small,
html[data-theme='dark'] .popular-item small svg,
html[data-theme='dark'] .rank small,
:root[data-theme='dark'] .announcement small,
:root[data-theme='dark'] .popular-item small,
:root[data-theme='dark'] .popular-item small svg,
:root[data-theme='dark'] .rank small {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme='dark'] .announcement svg,
:root[data-theme='dark'] .announcement svg {
  background: rgba(255,77,85,.14) !important;
  color: #ff6269 !important;
}

html[data-theme='dark'] .popular-item strong,
:root[data-theme='dark'] .popular-item strong {
  background: #ff4d55 !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .side-block,
:root[data-theme='dark'] .side-block {
  background: #111827 !important;
  border: 1px solid #2f3b4f !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .side-block h3,
html[data-theme='dark'] .tag-cloud a,
:root[data-theme='dark'] .side-block h3,
:root[data-theme='dark'] .tag-cloud a {
  color: #f8fafc !important;
}

html[data-theme='dark'] .tag-cloud a,
:root[data-theme='dark'] .tag-cloud a {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* Mobile spacing: kartu tetap gelap dan terbaca tanpa melebar berlebihan. */
@media (max-width: 720px) {
  html[data-theme='dark'] .announcement,
  html[data-theme='dark'] .popular-item,
  :root[data-theme='dark'] .announcement,
  :root[data-theme='dark'] .popular-item {
    border-radius: 16px !important;
    margin: 8px 0 !important;
    padding: 12px !important;
  }
}

/* =========================================================
   V18 MOBILE SLIDER + SEARCH + BRAND PATCH
   Khusus tampilan HP:
   1) Slider Berita Terbaru berjalan horizontal, 2 berita per slide.
   2) Textbox pencarian tampil saat ikon lensa diklik.
   3) Judul Suara Global Pekerja lebih besar dan bold berkarakter.
   ========================================================= */
@media (max-width: 980px) {
  .latest-slider-wrapper,
  .latest-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .latest-slider .slider-track,
  .latest-slider-block .slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 0 !important;
    padding: 8px 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .latest-slider .slider-track::-webkit-scrollbar,
  .latest-slider-block .slider-track::-webkit-scrollbar {
    display: none !important;
  }

  .latest-slider .slider-slide,
  .latest-slider-block .slider-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .latest-slider .compact,
  .latest-slider-block .compact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .latest-slider .compact img,
  .latest-slider-block .compact img {
    width: 100% !important;
    height: 88px !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    margin: 0 !important;
  }

  .latest-slider .compact div,
  .latest-slider-block .compact div {
    padding: 0 !important;
    min-width: 0 !important;
  }

  .latest-slider .compact h3,
  .latest-slider-block .compact h3 {
    font-size: 11.5px !important;
    line-height: 1.28 !important;
    min-height: 31px !important;
    max-height: 46px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
}

@media (max-width: 720px) {
  .masthead {
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
  }

  .masthead .hamburger {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 2px 0 -6px !important;
  }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 126px) !important;
    gap: 6px !important;
  }

  .brand img {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .brand h1 {
    font-family: Impact, Haettenschweiler, 'Arial Black', 'Trebuchet MS', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(16.5px, 4.55vw, 18.8px) !important;
    line-height: .96 !important;
    letter-spacing: -.75px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    color: #111827 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.08) !important;
  }

  .brand h1 span {
    font-family: inherit !important;
    font-size: 1.02em !important;
    line-height: .96 !important;
    font-weight: 900 !important;
    letter-spacing: -.85px !important;
  }

  .top-tools {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    position: static !important;
  }

  .theme-toggle {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 7 !important;
  }

  .top-search {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .top-search input {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: none !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #e6edf5 !important;
    color: transparent !important;
    caret-color: transparent !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
  }

  .top-search svg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9 !important;
    width: 18px !important;
    height: 18px !important;
    color: #091f44 !important;
    pointer-events: none !important;
  }

  .top-search.sgp-search-open,
  .top-search:focus-within {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 7px) !important;
    width: auto !important;
    height: 44px !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #d8e0ec !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.22) !important;
    z-index: 1002 !important;
    padding: 0 !important;
  }

  .top-search.sgp-search-open input,
  .top-search:focus-within input {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111827 !important;
    caret-color: #111827 !important;
    padding: 0 14px 0 44px !important;
    cursor: text !important;
    box-shadow: none !important;
  }

  .top-search.sgp-search-open input::placeholder,
  .top-search:focus-within input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }

  .top-search.sgp-search-open svg,
  .top-search:focus-within svg {
    left: 18px !important;
    transform: translateY(-50%) !important;
    color: #091f44 !important;
  }

  body.sgp-mobile-search-open .ticker-under-menu,
  body.sgp-mobile-search-open .ticker {
    margin-top: 58px !important;
  }
}

@media (max-width: 390px) {
  .brand h1 {
    font-size: 15.6px !important;
    letter-spacing: -.7px !important;
  }
  .brand img {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
  }
  .brand {
    max-width: calc(100% - 118px) !important;
  }
}

html[data-theme='dark'] .brand h1,
html[data-theme='dark'] .brand h1 span,
:root[data-theme='dark'] .brand h1,
:root[data-theme='dark'] .brand h1 span {
  color: #f8fafc !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.04) !important;
}

@media (max-width: 720px) {
  html[data-theme='dark'] .top-search input,
  :root[data-theme='dark'] .top-search input {
    background: #111827 !important;
    border-color: #334155 !important;
    color: transparent !important;
    caret-color: transparent !important;
  }

  html[data-theme='dark'] .top-search svg,
  :root[data-theme='dark'] .top-search svg {
    color: #f8fafc !important;
  }

  html[data-theme='dark'] .top-search.sgp-search-open,
  html[data-theme='dark'] .top-search:focus-within,
  :root[data-theme='dark'] .top-search.sgp-search-open,
  :root[data-theme='dark'] .top-search:focus-within {
    background: #0f172a !important;
    border-color: #475569 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.42) !important;
  }

  html[data-theme='dark'] .top-search.sgp-search-open input,
  html[data-theme='dark'] .top-search:focus-within input,
  :root[data-theme='dark'] .top-search.sgp-search-open input,
  :root[data-theme='dark'] .top-search:focus-within input {
    background: #0f172a !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
  }

  html[data-theme='dark'] .top-search.sgp-search-open input::placeholder,
  html[data-theme='dark'] .top-search:focus-within input::placeholder,
  :root[data-theme='dark'] .top-search.sgp-search-open input::placeholder,
  :root[data-theme='dark'] .top-search:focus-within input::placeholder {
    color: #cbd5e1 !important;
  }
}

/* ============================================================
   V18 Mobile Search Under Brand Fix v5
   Posisi textbox pencarian HP: tepat di bawah tulisan brand
   dan sebelum running text Kabar/Berita Terbaru.
   ============================================================ */
@media (max-width: 720px) {
  .masthead {
    position: relative !important;
    overflow: visible !important;
    z-index: 1005 !important;
    transition: padding-bottom .18s ease, min-height .18s ease !important;
  }

  body.sgp-mobile-search-open .masthead {
    padding-bottom: 60px !important;
    min-height: 118px !important;
  }

  .top-search.sgp-search-open,
  .top-search:focus-within {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(100% - 53px) !important;
    bottom: auto !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #d7e0ec !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.16) !important;
    z-index: 1010 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .top-search.sgp-search-open input,
  .top-search:focus-within input {
    height: 46px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 14px 0 44px !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #111827 !important;
    caret-color: #111827 !important;
    border: 0 !important;
    outline: 0 !important;
  }

  .top-search.sgp-search-open svg,
  .top-search:focus-within svg {
    left: 17px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #0f274d !important;
  }

  body.sgp-mobile-search-open .ticker-under-menu,
  body.sgp-mobile-search-open .ticker {
    margin-top: 10px !important;
  }

  html[data-theme='dark'] .top-search.sgp-search-open,
  html[data-theme='dark'] .top-search:focus-within,
  :root[data-theme='dark'] .top-search.sgp-search-open,
  :root[data-theme='dark'] .top-search:focus-within {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.42) !important;
  }

  html[data-theme='dark'] .top-search.sgp-search-open input,
  html[data-theme='dark'] .top-search:focus-within input,
  :root[data-theme='dark'] .top-search.sgp-search-open input,
  :root[data-theme='dark'] .top-search:focus-within input {
    background: transparent !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
  }

  html[data-theme='dark'] .top-search.sgp-search-open input::placeholder,
  html[data-theme='dark'] .top-search:focus-within input::placeholder,
  :root[data-theme='dark'] .top-search.sgp-search-open input::placeholder,
  :root[data-theme='dark'] .top-search:focus-within input::placeholder {
    color: #cbd5e1 !important;
  }
}

/* ============================================================
   V18 Search Visible + PC Icon Align + Semua Berita Summary v6
   1) HP: textbox pencarian dibuat sebagai bar normal di bawah brand.
   2) PC: ikon mode sejajar satu baris dengan pencarian.
   3) Semua Berita: ringkasan lurus dengan judul, tidak masuk kanan.
   ============================================================ */

/* PC/tablet besar: mode dan pencarian satu baris, tidak lagi search full-width di atas */
@media (min-width: 981px) {
  .masthead .top-tools {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .masthead .top-search {
    order: 1 !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    height: 42px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .masthead .top-search svg {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: #0f274d !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .masthead .top-search input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    caret-color: #111827 !important;
    padding: 0 12px 0 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    cursor: text !important;
  }

  .masthead .top-search input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }

  .masthead .top-search button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    margin: 4px 5px 4px 0 !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #d21f26 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 12px !important;
  }

  .masthead .theme-toggle {
    order: 2 !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    align-self: center !important;
  }
}

/* Dark mode untuk search PC */
@media (min-width: 981px) {
  html[data-theme='dark'] .masthead .top-search,
  :root[data-theme='dark'] .masthead .top-search {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
  }
  html[data-theme='dark'] .masthead .top-search svg,
  :root[data-theme='dark'] .masthead .top-search svg {
    color: #f8fafc !important;
  }
  html[data-theme='dark'] .masthead .top-search input,
  :root[data-theme='dark'] .masthead .top-search input {
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
  }
  html[data-theme='dark'] .masthead .top-search input::placeholder,
  :root[data-theme='dark'] .masthead .top-search input::placeholder {
    color: #cbd5e1 !important;
  }
}

/* HP: jangan pakai input kecil yang melebar absolut; pakai bar pencarian khusus di bawah brand. */
@media (max-width: 720px) {
  .masthead .top-search.sgp-search-open,
  .masthead .top-search:focus-within {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .masthead .top-search.sgp-search-open input,
  .masthead .top-search:focus-within input {
    position: absolute !important;
    inset: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    color: transparent !important;
    caret-color: transparent !important;
    background: #ffffff !important;
    border: 1px solid #e6edf5 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
    cursor: pointer !important;
  }

  .masthead .top-search.sgp-search-open button,
  .masthead .top-search:focus-within button {
    display: none !important;
  }

  .sgp-mobile-searchbar {
    display: none;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin: 0 auto 10px;
    padding: 6px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    border: 1px solid #d7e0ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
    position: relative;
    z-index: 1004;
  }

  body.sgp-mobile-search-open .sgp-mobile-searchbar {
    display: flex !important;
  }

  .sgp-mobile-searchbar svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    color: #0f274d;
  }

  .sgp-mobile-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    caret-color: #111827;
    font-size: 14px;
    padding: 0 2px;
  }

  .sgp-mobile-searchbar input::placeholder {
    color: #64748b;
    opacity: 1;
  }

  .sgp-mobile-searchbar button {
    flex: 0 0 auto;
    height: 36px;
    border-radius: 12px;
    background: #d21f26;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
  }

  body.sgp-mobile-search-open .ticker-under-menu,
  body.sgp-mobile-search-open .ticker {
    margin-top: 0 !important;
  }

  html[data-theme='dark'] .sgp-mobile-searchbar,
  :root[data-theme='dark'] .sgp-mobile-searchbar {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.42) !important;
  }

  html[data-theme='dark'] .sgp-mobile-searchbar svg,
  :root[data-theme='dark'] .sgp-mobile-searchbar svg {
    color: #f8fafc !important;
  }

  html[data-theme='dark'] .sgp-mobile-searchbar input,
  :root[data-theme='dark'] .sgp-mobile-searchbar input {
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
  }

  html[data-theme='dark'] .sgp-mobile-searchbar input::placeholder,
  :root[data-theme='dark'] .sgp-mobile-searchbar input::placeholder {
    color: #cbd5e1 !important;
  }
}

/* Semua Berita: ringkasan/excerpt rata dengan judul, tidak menjorok kanan. */
.article-tile > div,
.article-tile .article-content,
.article-tile .card-body,
.article-card > div,
.search-item-content {
  text-align: left !important;
}

.article-tile h2,
.article-tile h3,
.article-tile p,
.article-tile .excerpt,
.article-tile .article-excerpt,
.article-tile .article-summary,
.article-card h2,
.article-card h3,
.article-card p,
.search-item-title,
.search-item-excerpt {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  align-self: stretch !important;
}

.article-tile p,
.article-tile .excerpt,
.article-tile .article-excerpt,
.article-tile .article-summary,
.search-item-excerpt {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 10px !important;
  line-height: 1.55 !important;
}

@media (max-width: 720px) {
  .article-tile > div,
  .article-card > div,
  .search-item-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .article-tile p,
  .article-tile .excerpt,
  .article-tile .article-excerpt,
  .article-tile .article-summary,
  .search-item-excerpt {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}


/* V7 FIX: Semua Berita - excerpt/ringkasan benar-benar rata kiri dengan judul.
   Sebelumnya ringkasan berasal dari rich text (.tile-excerpt) sehingga p/span di dalamnya masih membawa indent/padding. */
.article-tile .tile-excerpt,
.article-tile .tile-excerpt *,
.article-tile .tile-excerpt p,
.article-tile .tile-excerpt div,
.article-tile .tile-excerpt span,
.article-tile .tile-excerpt [class*="ql-indent"],
.article-tile .tile-excerpt [style*="padding-left"],
.article-tile .tile-excerpt [style*="margin-left"],
.article-tile .tile-excerpt [style*="text-indent"],
.article-tile .tile-excerpt [style*="text-align"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  transform: none !important;
  left: auto !important;
}

.article-tile .tile-excerpt {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 14px !important;
  color: #667085 !important;
  line-height: 1.58 !important;
}

.article-tile .tile-excerpt p,
.article-tile .tile-excerpt div,
.article-tile .tile-excerpt span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.article-tile .tile-excerpt p + p {
  margin-top: 8px !important;
}

.article-tile .tile-excerpt ul,
.article-tile .tile-excerpt ol {
  margin-left: 0 !important;
  padding-left: 18px !important;
}

@media (max-width: 720px) {
  .article-tile > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .article-tile .tile-excerpt,
  .article-tile .tile-excerpt *,
  .article-tile .tile-excerpt p,
  .article-tile .tile-excerpt div,
  .article-tile .tile-excerpt span {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
  }
}

html[data-theme='dark'] .article-tile .tile-excerpt,
html[data-theme='dark'] .article-tile .tile-excerpt *,
:root[data-theme='dark'] .article-tile .tile-excerpt,
:root[data-theme='dark'] .article-tile .tile-excerpt * {
  color: #cbd5e1 !important;
}


/* V8 - Berita Terpopuler & Berita Terkait filler: menjaga layout utama, hanya mengisi ruang kosong */
.home-related-box,
.home-popular-box{
  width:100%;
  min-width:0;
}
.home-related-box{ margin-top:18px; }
.home-related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.home-related-grid .news-card,
.home-related-grid .article-card,
.home-related-grid .latest-card,
.home-related-grid a{
  min-width:0;
}
.sidebar-content-area .home-popular-box{
  margin-top:18px;
}
.sidebar-content-area .home-popular-box .popular-item{
  background:var(--card,#fff);
  border:1px solid var(--line,rgba(15,23,42,.1));
}
[data-theme="dark"] .home-related-box,
[data-theme="dark"] .home-popular-box,
[data-theme="dark"] .sidebar-content-area .home-popular-box .popular-item{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-color:rgba(148,163,184,.22) !important;
}
[data-theme="dark"] .home-related-box *,
[data-theme="dark"] .home-popular-box *,
[data-theme="dark"] .home-related-grid *,
[data-theme="dark"] .sidebar-content-area .home-popular-box .popular-item *{
  color:#e5e7eb !important;
}
[data-theme="dark"] .home-popular-box small,
[data-theme="dark"] .home-related-box small{
  color:#cbd5e1 !important;
}
@media (max-width:980px){
  .home-related-box{margin-top:16px;}
  .home-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .sidebar-content-area .home-popular-box{margin-top:16px;}
}
@media (max-width:560px){
  .home-related-grid{grid-template-columns:1fr;}
}

/* V9 - Berita Terkait PC/HP: rapikan kartu agar tidak sempit dan tidak pecah per huruf. */
.home-related-box{
  overflow: visible !important;
}
.home-related-box .section-title{
  margin-bottom: 14px !important;
}
.home-related-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: stretch !important;
}
.home-related-grid .article-tile{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line, #e6e9ef) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
  transform: none !important;
}
.home-related-grid .article-tile:hover{
  transform: none !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .10) !important;
}
.home-related-grid .article-tile .tile-image,
.home-related-grid .article-tile > a:first-child{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.home-related-grid .article-tile img,
.home-related-grid .article-tile .tile-image img{
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 118px !important;
  max-height: 118px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
.home-related-grid .article-tile > div{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 11px 12px !important;
  margin: 0 !important;
  text-align: left !important;
  overflow: visible !important;
}
.home-related-grid .article-tile small:first-child{
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 7px !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  background: var(--red, #d21f26) !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.home-related-grid .article-tile h2,
.home-related-grid .article-tile h3{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  letter-spacing: 0 !important;
}
.home-related-grid .article-tile h2 a,
.home-related-grid .article-tile h3 a{
  color: inherit !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.home-related-grid .article-tile .tile-excerpt,
.home-related-grid .article-tile .tags{
  display: none !important;
}
.home-related-grid .article-tile span{
  display: block !important;
  margin-top: auto !important;
  padding: 0 !important;
  color: #667085 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: normal !important;
}
.home-related-grid .article-tile *,
.home-related-grid .article-tile a{
  min-width: 0 !important;
  word-break: normal !important;
}

/* Jika area kiri sedang sempit, Berita Terkait turun jadi 1 kolom agar tetap rapi. */
@media (min-width: 981px) and (max-width: 1180px){
  .home-related-grid{
    grid-template-columns: 1fr !important;
  }
  .home-related-grid .article-tile{
    grid-template-columns: 142px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .home-related-grid .article-tile img,
  .home-related-grid .article-tile .tile-image img{
    height: 104px !important;
    max-height: 104px !important;
  }
}

@media (max-width: 760px){
  .home-related-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .home-related-grid .article-tile img,
  .home-related-grid .article-tile .tile-image img{
    height: 98px !important;
    max-height: 98px !important;
  }
  .home-related-grid .article-tile > div{
    padding: 9px 9px 10px !important;
  }
  .home-related-grid .article-tile h2,
  .home-related-grid .article-tile h3{
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
}
@media (max-width: 420px){
  .home-related-grid{
    grid-template-columns: 1fr !important;
  }
  .home-related-grid .article-tile{
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .home-related-grid .article-tile img,
  .home-related-grid .article-tile .tile-image img{
    height: 92px !important;
    max-height: 92px !important;
  }
}

html[data-theme='dark'] .home-related-grid .article-tile,
:root[data-theme='dark'] .home-related-grid .article-tile{
  background: #101a2b !important;
  border-color: rgba(148, 163, 184, .24) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}
html[data-theme='dark'] .home-related-grid .article-tile h2,
html[data-theme='dark'] .home-related-grid .article-tile h2 a,
html[data-theme='dark'] .home-related-grid .article-tile h3,
html[data-theme='dark'] .home-related-grid .article-tile h3 a,
:root[data-theme='dark'] .home-related-grid .article-tile h2,
:root[data-theme='dark'] .home-related-grid .article-tile h2 a,
:root[data-theme='dark'] .home-related-grid .article-tile h3,
:root[data-theme='dark'] .home-related-grid .article-tile h3 a{
  color: #f8fafc !important;
}
html[data-theme='dark'] .home-related-grid .article-tile span,
:root[data-theme='dark'] .home-related-grid .article-tile span{
  color: #cbd5e1 !important;
}

/* V10 - FIX FINAL: Berita Terkait memakai komponen .compact, bukan .article-tile.
   V9 belum kena karena CSS menargetkan .article-tile sementara markup aktif adalah <a class="compact">. */
.home-related-box{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.home-related-box .section-title{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 0 14px !important;
  padding-bottom:12px !important;
  border-bottom:1px solid rgba(15,23,42,.10) !important;
}
.home-related-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
  align-items:stretch !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.home-related-grid > .compact,
.home-related-grid > a.compact,
.home-related-grid .compact{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:14px !important;
  background:#fff !important;
  overflow:hidden !important;
  text-decoration:none !important;
  box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
  transform:none !important;
  float:none !important;
  clear:none !important;
}
.home-related-grid > .compact:hover,
.home-related-grid > a.compact:hover{
  transform:none !important;
  box-shadow:0 12px 28px rgba(15,23,42,.10) !important;
}
.home-related-grid > .compact > img,
.home-related-grid > a.compact > img,
.home-related-grid .compact > img{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:126px !important;
  max-height:126px !important;
  object-fit:cover !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  inset:auto !important;
  flex:none !important;
}
.home-related-grid > .compact > div,
.home-related-grid > a.compact > div,
.home-related-grid .compact > div{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:11px 12px 12px !important;
  margin:0 !important;
  text-align:left !important;
  position:static !important;
  overflow:visible !important;
  white-space:normal !important;
}
.home-related-grid .compact label{
  display:inline-block !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 0 7px !important;
  padding:3px 7px !important;
  border-radius:5px !important;
  background:var(--red,#d21f26) !important;
  color:#fff !important;
  font-size:9px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  position:static !important;
  inset:auto !important;
  transform:none !important;
}
.home-related-grid .compact h3{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 8px !important;
  padding:0 !important;
  color:#111827 !important;
  font-size:14px !important;
  line-height:1.34 !important;
  font-weight:800 !important;
  text-align:left !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:manual !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.home-related-grid .compact small{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#667085 !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  text-align:left !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.home-related-grid .compact *,
.home-related-grid .compact{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
/* Jika parent/kolom kiri sempit, jangan memaksa dua kolom karena judul akan terpecah. */
@media (min-width:981px) and (max-width:1180px){
  .home-related-grid{ grid-template-columns:1fr !important; }
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    display:grid !important;
    grid-template-columns:150px minmax(0,1fr) !important;
    align-items:stretch !important;
  }
  .home-related-grid .compact > img{
    height:112px !important;
    max-height:112px !important;
    min-width:0 !important;
  }
}
@media (max-width:760px){
  .home-related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .home-related-grid .compact > img{ height:100px !important; max-height:100px !important; }
  .home-related-grid .compact > div{ padding:9px 10px 10px !important; }
  .home-related-grid .compact h3{ font-size:12.75px !important; line-height:1.33 !important; }
}
@media (max-width:420px){
  .home-related-grid{ grid-template-columns:1fr !important; }
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) !important;
  }
  .home-related-grid .compact > img{
    width:118px !important;
    min-width:118px !important;
    height:94px !important;
    max-height:94px !important;
  }
}
html[data-theme='dark'] .home-related-grid > .compact,
html[data-theme='dark'] .home-related-grid > a.compact,
html[data-theme='dark'] .home-related-grid .compact,
:root[data-theme='dark'] .home-related-grid > .compact,
:root[data-theme='dark'] .home-related-grid > a.compact,
:root[data-theme='dark'] .home-related-grid .compact{
  background:#101a2b !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.28) !important;
}
html[data-theme='dark'] .home-related-grid .compact h3,
:root[data-theme='dark'] .home-related-grid .compact h3{
  color:#f8fafc !important;
}
html[data-theme='dark'] .home-related-grid .compact small,
:root[data-theme='dark'] .home-related-grid .compact small{
  color:#cbd5e1 !important;
}

/* V11 - Berita Terkait horizontal 3 berita saja.
   Perbaikan ini hanya mengubah blok Berita Terkait; layout utama PC/HP tidak disentuh. */
.home-related-box .section-title{
  margin-bottom:14px !important;
}
.home-related-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  align-items:stretch !important;
}
.home-related-grid > .compact:nth-child(n+4),
.home-related-grid > a.compact:nth-child(n+4),
.home-related-grid > article:nth-child(n+4),
.home-related-grid > a:nth-child(n+4){
  display:none !important;
}
.home-related-grid > .compact,
.home-related-grid > a.compact,
.home-related-grid .compact{
  display:block !important;
  grid-template-columns:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.055) !important;
}
.home-related-grid .compact > img{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:104px !important;
  max-height:104px !important;
  object-fit:cover !important;
  border-radius:0 !important;
}
.home-related-grid .compact > div{
  display:block !important;
  padding:10px 10px 11px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  text-align:left !important;
}
.home-related-grid .compact h3{
  font-size:13px !important;
  line-height:1.32 !important;
  margin:0 0 7px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
.home-related-grid .compact label{
  font-size:8px !important;
  padding:3px 6px !important;
  margin:0 0 6px !important;
}
.home-related-grid .compact small{
  font-size:11px !important;
  line-height:1.3 !important;
}
@media (max-width:980px){
  .home-related-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:8px !important;
  }
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    flex:0 0 31.5% !important;
    width:31.5% !important;
    min-width:31.5% !important;
    max-width:31.5% !important;
    display:block !important;
    grid-template-columns:none !important;
    scroll-snap-align:start !important;
  }
  .home-related-grid .compact > img{
    width:100% !important;
    min-width:0 !important;
    height:82px !important;
    max-height:82px !important;
  }
  .home-related-grid .compact > div{
    padding:8px 8px 9px !important;
  }
  .home-related-grid .compact h3{
    font-size:11.5px !important;
    line-height:1.28 !important;
    -webkit-line-clamp:3 !important;
  }
}
@media (max-width:520px){
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    flex-basis:42% !important;
    width:42% !important;
    min-width:42% !important;
    max-width:42% !important;
  }
  .home-related-grid .compact > img{
    height:78px !important;
    max-height:78px !important;
  }
}
html[data-theme='dark'] .home-related-grid > .compact,
html[data-theme='dark'] .home-related-grid > a.compact,
html[data-theme='dark'] .home-related-grid .compact,
:root[data-theme='dark'] .home-related-grid > .compact,
:root[data-theme='dark'] .home-related-grid > a.compact,
:root[data-theme='dark'] .home-related-grid .compact{
  background:#101a2b !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}

/* ========================================================================== */
/* V12 - BERITA TERKAIT MEMANJANG SEPERTI CONTOH                             */
/* Fokus: blok Berita Terkait tampil horizontal 3 berita, image landscape,     */
/* tanpa kartu tebal, tanggal di atas judul, judul tebal.                     */
/* ========================================================================== */
.home-related-box{
  width:100% !important;
  max-width:100% !important;
  margin-top:26px !important;
  overflow:visible !important;
}
.home-related-box .section-title{
  margin:0 0 16px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(15,23,42,.10) !important;
}
.home-related-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
  max-width:100% !important;
  align-items:start !important;
  overflow:visible !important;
  padding:0 !important;
}
.home-related-grid > .compact:nth-child(n+4),
.home-related-grid > a.compact:nth-child(n+4),
.home-related-grid > article:nth-child(n+4),
.home-related-grid > a:nth-child(n+4){
  display:none !important;
}
.home-related-grid > .compact,
.home-related-grid > a.compact,
.home-related-grid .compact{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  text-decoration:none !important;
  color:inherit !important;
  transform:none !important;
}
.home-related-grid > .compact:hover,
.home-related-grid > a.compact:hover,
.home-related-grid .compact:hover{
  transform:none !important;
  box-shadow:none !important;
}
.home-related-grid .compact > img,
.home-related-grid > .compact > img,
.home-related-grid > a.compact > img{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:118px !important;
  max-height:118px !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:8px !important;
  margin:0 0 10px !important;
  padding:0 !important;
  position:static !important;
  inset:auto !important;
}
.home-related-grid .compact > div,
.home-related-grid > .compact > div,
.home-related-grid > a.compact > div{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  text-align:left !important;
  overflow:visible !important;
}
.home-related-grid .compact label{
  display:none !important;
}
.home-related-grid .compact small{
  order:1 !important;
  display:block !important;
  width:100% !important;
  margin:0 0 5px !important;
  padding:0 !important;
  color:#667085 !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  text-align:left !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.home-related-grid .compact h3{
  order:2 !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#111827 !important;
  font-size:14.5px !important;
  line-height:1.28 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  text-align:left !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:manual !important;
  display:-webkit-box !important;
  -webkit-line-clamp:4 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.home-related-grid .compact *,
.home-related-grid .compact{
  box-sizing:border-box !important;
}

@media (min-width:981px){
  .home-related-grid{
    grid-template-columns:repeat(3,minmax(185px,1fr)) !important;
    column-gap:16px !important;
    row-gap:18px !important;
  }
  .home-related-grid .compact > img{
    height:120px !important;
  }
}

@media (max-width:980px){
  .home-related-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    padding:0 2px 8px !important;
  }
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    flex:0 0 46% !important;
    width:46% !important;
    min-width:46% !important;
    max-width:46% !important;
    scroll-snap-align:start !important;
  }
  .home-related-grid .compact > img{
    height:96px !important;
    max-height:96px !important;
    margin-bottom:8px !important;
  }
  .home-related-grid .compact h3{
    font-size:13px !important;
    line-height:1.3 !important;
    -webkit-line-clamp:4 !important;
  }
}

@media (max-width:520px){
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    flex:0 0 74% !important;
    width:74% !important;
    min-width:74% !important;
    max-width:74% !important;
  }
  .home-related-grid .compact > img{
    height:120px !important;
    max-height:120px !important;
  }
}

html[data-theme='dark'] .home-related-grid > .compact,
html[data-theme='dark'] .home-related-grid > a.compact,
html[data-theme='dark'] .home-related-grid .compact,
:root[data-theme='dark'] .home-related-grid > .compact,
:root[data-theme='dark'] .home-related-grid > a.compact,
:root[data-theme='dark'] .home-related-grid .compact{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html[data-theme='dark'] .home-related-grid .compact h3,
:root[data-theme='dark'] .home-related-grid .compact h3{
  color:#f8fafc !important;
}
html[data-theme='dark'] .home-related-grid .compact small,
:root[data-theme='dark'] .home-related-grid .compact small{
  color:#cbd5e1 !important;
}

/* ========================================================================== */
/* V13 - BERITA TERKAIT DIPANJANGKAN MENGISI AREA                             */
/* Tujuan: blok Berita Terkait tidak lagi sempit di 1 kolom grid.             */
/* ========================================================================== */
.main-content-area > .home-related-box,
.main-content-area > section.home-related-box,
.main-content-area > .latest-box.home-related-box{
  grid-column:1 / -1 !important;
  grid-row:auto !important;
  width:100% !important;
  max-width:100% !important;
  align-self:stretch !important;
  justify-self:stretch !important;
}

.home-related-box{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.home-related-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  align-items:start !important;
}

.home-related-grid > .compact,
.home-related-grid > a.compact,
.home-related-grid .compact{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:initial !important;
}

.home-related-grid .compact > img,
.home-related-grid > .compact > img,
.home-related-grid > a.compact > img{
  width:100% !important;
  height:142px !important;
  max-height:142px !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
}

.home-related-grid .compact h3{
  font-size:15px !important;
  line-height:1.3 !important;
  -webkit-line-clamp:3 !important;
}

.home-related-grid .compact small{
  font-size:12px !important;
}

@media (min-width:1180px){
  .home-related-grid{
    gap:20px !important;
  }
  .home-related-grid .compact > img,
  .home-related-grid > .compact > img,
  .home-related-grid > a.compact > img{
    height:156px !important;
    max-height:156px !important;
  }
  .home-related-grid .compact h3{
    font-size:15.5px !important;
  }
}

@media (max-width:980px){
  .main-content-area > .home-related-box,
  .main-content-area > section.home-related-box,
  .main-content-area > .latest-box.home-related-box{
    grid-column:1 / -1 !important;
  }
  .home-related-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
    overflow:visible !important;
    padding:0 !important;
  }
  .home-related-grid > .compact,
  .home-related-grid > a.compact,
  .home-related-grid .compact{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:initial !important;
  }
  .home-related-grid .compact > img,
  .home-related-grid > .compact > img,
  .home-related-grid > a.compact > img{
    height:105px !important;
    max-height:105px !important;
  }
  .home-related-grid .compact h3{
    font-size:12.5px !important;
    line-height:1.28 !important;
    -webkit-line-clamp:3 !important;
  }
}

@media (max-width:560px){
  .home-related-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .home-related-grid .compact > img,
  .home-related-grid > .compact > img,
  .home-related-grid > a.compact > img{
    height:76px !important;
    max-height:76px !important;
    border-radius:7px !important;
  }
  .home-related-grid .compact small{
    font-size:10.5px !important;
    margin-bottom:4px !important;
  }
  .home-related-grid .compact h3{
    font-size:11px !important;
    line-height:1.24 !important;
    -webkit-line-clamp:4 !important;
  }
}