:root{color-scheme:dark;font-family:Inter,Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:#f4f8ff;background:#061631 url('background.jpg') center center/cover fixed no-repeat}body:before{content:"";position:fixed;inset:0;background:linear-gradient(120deg,rgba(2,13,34,.90),rgba(3,24,55,.77) 47%,rgba(0,15,40,.85));pointer-events:none}.shell{position:relative;max-width:1500px;margin:auto;padding:26px 5.5% 25px}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;min-height:46px}.login-button{display:inline-flex;align-items:center;gap:17px;text-decoration:none;color:#fff;border:1px solid #5283bd;border-radius:10px;padding:11px 21px;background:rgba(8,39,78,.8);font-weight:700;transition:.2s}.login-button:hover{background:#1463a1;transform:translateY(-2px)}.user-name{font-size:13px;color:#a9bed7}.intro{margin:9px 0 25px}.eyebrow,.section-label{font-size:10px;letter-spacing:2.1px;color:#9db7d4;font-weight:800}.eyebrow{display:flex;align-items:center;gap:12px}.pulse,.live i{width:7px;height:7px;border-radius:50%;background:#60d7ca;box-shadow:0 0 12px #60d7ca}.eyebrow-line{width:28px;height:1px;background:#4a719e}h1{font-size:clamp(35px,4.2vw,61px);letter-spacing:-2.5px;line-height:1.03;margin:14px 0 12px;font-weight:800}h1 em{font-style:normal;color:#7dc9ff}.intro p{font-size:14px;color:#aec3db;margin:0}.carousel-wrap{position:relative}.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;outline:none}.carousel::-webkit-scrollbar{display:none}.slide{min-width:100%;scroll-snap-align:start}.panel{background:linear-gradient(130deg,rgba(8,30,64,.95),rgba(7,23,50,.95));border:1px solid rgba(132,177,226,.23);border-radius:22px;padding:27px 30px 29px;box-shadow:0 23px 75px rgba(0,5,20,.38)}.panel-head,.panel-title,.card-heading{display:flex;align-items:center;justify-content:space-between}.panel-title{justify-content:flex-start;gap:17px}.module-icon{display:grid;place-items:center;width:55px;height:55px;flex:none;border:1px solid var(--accent);border-radius:14px;background:rgba(59,131,196,.18);color:var(--accent);font-size:29px}.panel h2{font-size:clamp(22px,2.3vw,30px);margin:6px 0 3px;letter-spacing:-.6px}.panel-head p{color:#9bb2ce;font-size:13px;margin:0}.live{font-size:10px;letter-spacing:1.3px;color:#96d8d4;border:1px solid #245a69;border-radius:30px;padding:9px 12px;white-space:nowrap;display:flex;gap:9px;align-items:center}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:26px 0 15px}.metric{border:1px solid rgba(110,153,202,.2);background:linear-gradient(135deg,rgba(22,60,105,.60),rgba(12,37,78,.55));border-radius:14px;min-height:124px;padding:19px 20px;display:flex;flex-direction:column}.metric span{font-size:12px;color:#aac2df}.metric strong{font-size:clamp(24px,2.45vw,35px);margin:10px 0 5px;letter-spacing:-1px;white-space:nowrap}.metric small{font-size:11px;color:var(--accent)}.lower{display:grid;grid-template-columns:1.18fr 1fr;gap:15px}.content-card{border:1px solid rgba(110,153,202,.19);background:rgba(8,28,61,.73);border-radius:14px;padding:20px 22px;min-width:0}.card-heading h3{font-size:16px;margin:6px 0 0}.year,.dots{font-size:11px;color:#95acc8;padding:8px 12px;border:1px solid #2a466c;border-radius:7px}.dots{border:0;font-size:17px;letter-spacing:2px}.chart{height:171px;display:flex;align-items:end;position:relative;gap:9px;padding-top:22px}.gridline{position:absolute;left:0;right:0;height:1px;background:rgba(138,173,213,.11)}.gridline.one{top:28%}.gridline.two{top:53%}.gridline.three{top:78%}.bar-col{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;flex:1;height:100%;min-width:0}.bar{width:min(100%,26px);border-radius:5px 5px 0 0;background:linear-gradient(to top,#16528f,var(--accent));opacity:.9;min-height:8px;transition:.2s}.bar-col:hover .bar{filter:brightness(1.4)}.bar-value{visibility:hidden;position:absolute;bottom:calc(100% - 3px);font-size:11px}.bar-col:hover .bar-value{visibility:visible}.bar-col small{font-size:10px;color:#879fbd;margin-top:8px}.items{margin-top:12px}.item{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(130,173,219,.13);padding:15px 0}.item-mark{width:7px;height:7px;flex:none;background:var(--accent);border-radius:50%}.item-copy{min-width:0;flex:1}.item-copy strong,.item-copy small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.item-copy strong{font-size:12px}.item-copy small{font-size:11px;color:#91a8c5;margin-top:5px}.badge{font-size:10px;border-radius:20px;padding:6px 8px;white-space:nowrap}.badge.danger{background:#61283a;color:#ff9eae}.badge.warning{background:#584323;color:#f5d18b}.badge.success{background:#164d55;color:#8ce4d5}.arrow{position:absolute;top:50%;z-index:2;transform:translateY(-50%);height:45px;width:45px;border-radius:50%;border:1px solid #6c97c7;background:#0c315c;color:white;font-size:32px;line-height:30px;cursor:pointer;box-shadow:0 5px 20px #020d22;transition:.2s}.arrow:hover{background:#15629b}.arrow.prev{left:-23px}.arrow.next{right:-23px}.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:23px 0}.page-dot{display:flex;align-items:center;gap:10px;border:1px solid #355778;background:rgba(10,35,69,.75);color:#a5bad3;border-radius:8px;padding:10px 16px;cursor:pointer;font-size:11px;font-weight:700;transition:.2s}.page-dot.active,.page-dot:hover{background:#16619a;color:white;border-color:#6bb8ed}.dot-number{color:#7fc9f5}footer{text-align:center;font-size:11px;color:#7d9cbd}footer span{padding:0 6px}@media(max-width:850px){.shell{padding:17px 5%}.metrics{grid-template-columns:repeat(2,1fr)}.lower{grid-template-columns:1fr}.intro{margin-top:15px}.panel{padding:22px}.chart{height:155px}}@media(max-width:560px){.shell{padding:12px 15px}.intro{margin-top:24px}.intro p{line-height:1.5}.panel{padding:17px}.module-icon{width:43px;height:43px;font-size:22px}.panel-title{gap:10px}.panel h2{font-size:20px}.panel-head p{font-size:11px}.live{display:none}.metrics{gap:8px;margin:20px 0 9px}.metric{padding:13px;min-height:110px}.metric strong{font-size:23px}.metric span{font-size:11px}.content-card{padding:16px}.lower{gap:9px}.arrow{width:35px;height:35px;font-size:26px}.arrow.prev{left:-12px}.arrow.next{right:-12px}.pagination{gap:5px}.page-dot{padding:9px}.dot-label{display:none}.item{gap:7px}.item-copy strong{font-size:11px}.badge{font-size:9px}}

.live-panel{padding:23px}.live-panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.live-panel-head h2{margin:6px 0}.live-panel-head p{margin:0;color:#a8bfd9;font-size:12px}.live-panel-head a{background:#1769a4;border:1px solid #65a9d8;color:white;text-decoration:none;border-radius:8px;padding:10px 14px;font-size:12px;white-space:nowrap}.source-frame{border-radius:12px;overflow:hidden;background:#07152d;border:1px solid #48709c;height:min(72vh,760px);min-height:560px}.source-frame iframe{width:100%;height:100%;border:0;background:#07152d}.frame-note{font-size:11px;color:#8fa9c6;margin:12px 2px 0}@media(max-width:560px){.live-panel{padding:13px}.live-panel-head{align-items:flex-start;flex-direction:column}.source-frame{height:72vh;min-height:510px}}

/* Navigasi halaman: hanya satu dashboard dirender per permintaan. */
.page-wrap{position:relative}.page-wrap .slide{min-width:0}.page-wrap .arrow{display:grid;place-items:center;text-decoration:none}.pagination .page-dot{text-decoration:none}.page-wrap .panel{animation:appear .22s ease-out}@keyframes appear{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Halaman dashboard tanpa kartu pembungkus. */
.page-wrap .panel,.page-wrap .panel.live-panel{background:none;border:0;border-radius:0;box-shadow:none;padding:0;animation:none}.page-wrap .slide{background:none}.page-wrap .panel-head,.page-wrap .live-panel-head{padding:0 3px}.page-wrap .metrics{margin-top:22px}.page-wrap .arrow{top:46%;background:rgba(5,37,79,.92)}@media(max-width:560px){.page-wrap .panel,.page-wrap .panel.live-panel{padding:0}.page-wrap .arrow{top:40%}}

/* Header pengantar dihapus; judul Laptop & PC tanpa ikon dan dekat bagian atas. */
.shell{padding-top:20px}.top-actions{margin-bottom:12px}.page-wrap .panel-head{align-items:flex-start}.page-wrap .panel-title{align-items:flex-start}.page-wrap .panel-title h2{margin-top:4px}.page-wrap .slide[aria-label="Tracker Laptop & PC RKI"] .panel-title{gap:0}.page-wrap .slide[aria-label="Tracker Laptop & PC RKI"] .panel-head{padding-top:0}@media(max-width:560px){.shell{padding-top:12px}.top-actions{margin-bottom:13px}}