:root{
  --blue:#075da6;
  --blue2:#0f80d8;
  --navy:#063b70;
  --cyan:#2bd4ff;
  --yellow:#ffd34d;
  --green:#00b894;
  --red:#ff5d73;
  --panel:rgba(255,255,255,.94);
  --glass:rgba(255,255,255,.82);
  --line:rgba(255,255,255,.58);
  --shadow:0 22px 50px rgba(0,0,0,.24);
  --soft-shadow:0 14px 32px rgba(4,27,53,.16);
  --text:#0f2742;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:#041b35}
body:before{content:"";position:fixed;inset:0;background:
  radial-gradient(circle at 9% 12%,rgba(43,212,255,.23),transparent 31%),
  radial-gradient(circle at 92% 2%,rgba(255,211,77,.2),transparent 28%),
  linear-gradient(135deg,#04233f 0%,#075da6 48%,#062f5d 100%);z-index:-2}
body:after{content:"";position:fixed;inset:0;background-image:linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(180deg,rgba(255,255,255,.12),transparent 42%,rgba(2,15,31,.22));background-size:84px 84px,84px 84px,100% 100%;opacity:.32;z-index:-1}
.display-shell{width:100vw;height:100vh;padding:.95vh .85vw;display:grid;grid-template-rows:9.5vh minmax(0,1fr) 6.3vh;gap:.95vh}
.topbar{position:relative;display:grid;grid-template-columns:minmax(170px,20vw) minmax(0,1fr) minmax(170px,20vw);align-items:center;gap:.45vw;padding:.6vh 1vw;border-radius:22px;background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(228,246,255,.96));box-shadow:var(--soft-shadow);border:1px solid var(--line);overflow:hidden}
.topbar:before{content:"";position:absolute;inset:auto 0 0;height:.42vh;background:linear-gradient(90deg,var(--yellow),var(--cyan),var(--green));opacity:.95}
.topbar:after{content:"";position:absolute;top:-48%;right:16%;width:18vw;height:18vw;background:radial-gradient(circle,rgba(15,128,216,.14),transparent 64%);pointer-events:none}
.logo-wrap{width:7vh;height:7vh;display:grid;place-items:center;justify-self:start;border-radius:18px;background:#fff;box-shadow:0 6px 20px rgba(13,92,166,.14);overflow:hidden}
.logo-wrap img{max-width:88%;max-height:88%;object-fit:contain}
.brand{display:flex;justify-content:center;align-items:center;width:100%;padding:0 .8vw}
.brand-inner{display:inline-flex;align-items:center;justify-content:center;gap:.72vw;max-width:100%;margin:0 auto}
.brand-secondary-logo{width:clamp(46px,3.8vw,74px);height:auto;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(6,59,112,.12))}
.brand-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;min-width:0}
.brand h1{margin:0;color:var(--navy);font-size:clamp(20px,2.35vw,42px);font-weight:900;letter-spacing:.5px;line-height:1.05;text-transform:uppercase;width:100%;text-align:left;white-space:nowrap}
.brand p{margin:.25vh 0 0;color:#3e6689;font-weight:780;font-size:clamp(11px,.92vw,18px);width:100%;text-align:left}
.clock-card{position:relative;justify-self:end;width:100%;max-width:20vw;text-align:right;color:#064577;font-weight:800;line-height:1.12;padding:.7vh .85vw;border-radius:16px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(7,93,166,.08)}
.clock-card .date{font-size:clamp(12px,1.05vw,20px);opacity:.88}
.clock-card .time{font-size:clamp(20px,2.3vw,42px);letter-spacing:1px;color:#063b70;text-shadow:0 3px 0 rgba(255,255,255,.7)}
.main-grid{min-height:0;display:grid;grid-template-columns:14.2vw minmax(0,1fr) 15.2vw;gap:.62vw}
.side-stack{min-height:0;display:grid;gap:.82vh}
.side-stack.left{grid-template-rows:1.02fr 1.22fr}
.side-stack.right{grid-template-rows:1.02fr .98fr .34fr}
.panel{position:relative;min-height:0;overflow:hidden;border-radius:18px;background:var(--panel);box-shadow:var(--soft-shadow);border:1px solid rgba(255,255,255,.5)}
.panel:after,.main-panel:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(6,59,112,.08);z-index:4}
.panel-title{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:.62vh .55vw;background:linear-gradient(90deg,var(--navy),var(--blue2));color:#fff;font-size:clamp(8px,.58vw,12px);font-weight:900;text-transform:uppercase;letter-spacing:.35px;min-height:3.2vh;box-shadow:0 9px 20px rgba(6,59,112,.18)}
.panel-title span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-title .tag{padding:.2vh .3vw;border-radius:999px;background:rgba(255,255,255,.2);font-size:.7em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.slider{width:100%;height:100%;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .65s ease,transform 1.2s ease;display:flex;flex-direction:column;background:#fff}
.slide.active{opacity:1;transform:scale(1);z-index:2}
.slide img{width:100%;height:100%;object-fit:cover;display:block;background:#eef7ff}
.slide.side img{height:60%;padding-top:3.2vh;object-fit:cover}
.slide.side .caption{height:40%;padding:.58vh .58vw .68vh;background:linear-gradient(180deg,#fff,#f4fbff);display:flex;flex-direction:column;justify-content:center;gap:.2vh}
.slide.side.leader-card img{height:72%;padding-top:3.2vh;object-fit:contain;object-position:center center;background:#f7fbff}
.slide.side.leader-card .caption{height:28%;justify-content:flex-start;padding:.68vh .72vw 2.05vh;gap:.16vh}
.slide.side.leader-card .caption h3{font-size:clamp(10px,.84vw,16px);line-height:1.02}
.slide.side.leader-card .caption p{font-size:clamp(8px,.56vw,11px);line-height:1.08}

.slide.side.competency-card{background:linear-gradient(180deg,#f8fcff,#eef8ff)}
.slide.side.competency-card img{position:absolute;top:3.2vh;left:0;right:0;width:100%;height:calc(100% - 8.8vh);padding:0;object-fit:fill;object-position:center center;background:#fff}
.slide.side.competency-card .caption{position:absolute;left:0;right:0;bottom:0;height:5.6vh;z-index:6;display:flex;flex-direction:column;justify-content:flex-start;padding:.45vh .72vw .55vh;gap:.08vh;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.99));box-shadow:0 -6px 14px rgba(4,27,53,.08)}
.slide.side.competency-card .caption h3{font-size:clamp(10px,.82vw,16px);line-height:1.02;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide.side.competency-card .caption p{font-size:clamp(8px,.58vw,11px);line-height:1.08;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption h3,.overlay-caption h2{margin:0;color:#083a6f;font-size:clamp(10px,.78vw,15px);font-weight:900;line-height:1.06}
.caption p,.overlay-caption p{margin:0;color:#42627c;font-size:clamp(8px,.58vw,12px);font-weight:650;line-height:1.16}
.presence-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.28vw;margin-bottom:.25vh;padding:.28vh .42vw;border-radius:999px;color:#fff;font-size:clamp(7px,.52vw,10px);font-weight:950;line-height:1;text-transform:uppercase;letter-spacing:.25px;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.presence-badge:before{content:"";width:.45em;height:.45em;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.24)}
.presence-badge.in{background:linear-gradient(90deg,#078b55,#10b981)}
.presence-badge.out{background:linear-gradient(90deg,#b42318,#ef4444)}
.main-panel{border-radius:28px;overflow:hidden;position:relative;background:#fff;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.56)}
.main-panel .main-slide{background:#fff}
.main-panel .main-slide img{width:100%;height:100%;object-fit:fill;object-position:center center;background:#f5f9fd}
.main-panel .main-slide.has-title{padding-top:4.15vh}
.main-panel .main-slide.has-title img{height:100%}
.main-slide-title{position:absolute;top:0;left:0;right:0;height:4.15vh;z-index:6;display:flex;align-items:center;justify-content:center;gap:.55vw;padding:.35vh 1vw;background:linear-gradient(90deg,#079a61,#00b16f,#079a61);color:#fff;font-size:clamp(12px,1.15vw,22px);font-weight:950;line-height:1;text-align:center;text-transform:uppercase;letter-spacing:.25px;white-space:nowrap;overflow:hidden;box-shadow:0 5px 14px rgba(0,102,69,.22);border-bottom:.42vh solid #0e98d5}
.main-slide-title img{height:2.65vh;width:auto;max-width:3.1vw;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.main-slide-title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{height:100%;display:grid;place-items:center;text-align:center;padding:1.4vw;color:#46708e;font-weight:800;background:linear-gradient(135deg,#f4fbff,#e6f4ff)}
.staff-card{padding-top:3.3vh;height:100%;display:grid;grid-template-columns:32% 1fr;align-items:center;gap:.45vw;background:linear-gradient(135deg,#fff,#eaf7ff)}
.staff-photo{width:100%;height:100%;min-height:0;display:grid;place-items:center;padding:.62vh .25vw .62vh .48vw}
.staff-photo img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.staff-info{padding:.62vh .48vw .62vh 0;min-width:0}
.staff-info h3{margin:0 0 .3vh;font-size:clamp(10px,.82vw,16px);font-weight:950;color:#073b6f;line-height:1.05}
.staff-info .role{display:inline-block;margin:.1vh 0 .35vh;padding:.26vh .35vw;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff;font-size:clamp(7px,.52vw,10px);font-weight:850;line-height:1.05}
.staff-info p{margin:0;color:#3f6685;font-size:clamp(8px,.56vw,11px);font-weight:650;line-height:1.14}
.social-card .caption h3{color:#075da6}
.social-line-slide{padding-top:3.2vh;background:linear-gradient(135deg,#fff,#eef8ff);justify-content:center;overflow:hidden}
.social-line{height:100%;display:grid;grid-template-columns:2.6vw minmax(0,1fr);align-items:center;gap:.56vw;padding:.45vh .7vw 1.45vh}
.social-logo{width:2.2vw;height:2.2vw;min-width:28px;min-height:28px;display:grid;place-items:center;border-radius:11px;background:#fff;color:#075da6;box-shadow:0 8px 18px rgba(7,93,166,.12);overflow:hidden}
.social-logo img{width:100%;height:100%;object-fit:contain;padding:5px;background:#fff}
.social-logo svg{width:68%;height:68%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.social-logo.facebook svg{fill:currentColor;stroke:none}
.social-logo.instagram{color:#fff;background:linear-gradient(135deg,#f58529,#dd2a7b 48%,#515bd4)}
.social-logo.facebook{color:#fff;background:#1877f2}
.social-logo.x{color:#fff;background:#111827}
.social-logo.whatsapp{color:#fff;background:#25d366}
.social-logo.phone{color:#fff;background:linear-gradient(135deg,#075da6,#0f80d8)}
.social-logo.email{color:#fff;background:linear-gradient(135deg,#0f80d8,#00b894)}
.social-logo.website{color:#fff;background:linear-gradient(135deg,#063b70,#2bd4ff)}
.social-logo.tiktok{color:#fff;background:linear-gradient(135deg,#111827,#ff0050)}
.social-logo.youtube{color:#fff;background:#ff0000}
.social-copy{min-width:0;max-width:100%}
.social-copy h3{margin:0 0 .18vh;color:#075da6;font-size:clamp(10px,.76vw,15px);font-weight:900;line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.social-copy p{margin:0;color:#42627c;font-size:clamp(8px,.58vw,11px);font-weight:720;line-height:1.12;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.social-card .slide-indicator{right:.54vw;bottom:.28vh;padding:.2vh .36vw;gap:.24vw}
.social-card .slide-dot{width:.28vw;height:.28vw;min-width:4px;min-height:4px}
.social-card .slide-dot.active{width:.78vw}
.award-card .panel-title{background:linear-gradient(90deg,#8a5b00,#e0a100)}
.award-card .staff-info .role{background:linear-gradient(90deg,#b27600,#ffd34d);color:#382400}
.slide.side.right-feature-card{background:linear-gradient(180deg,#ffffff,#eef7ff)}
.slide.side.right-feature-card img{height:68%;padding-top:3.2vh;object-fit:cover;object-position:center top;background:#eef7ff}
.slide.side.right-feature-card .caption{height:32%;justify-content:flex-start;padding:.68vh .72vw .62vh;gap:.18vh}
.slide.side.right-feature-card .caption h3{font-size:clamp(11px,.86vw,17px);line-height:1.02}
.slide.side.right-feature-card .caption p{font-size:clamp(8px,.58vw,11px);line-height:1.12}
.feature-role{display:inline-block;align-self:flex-start;margin:.08vh 0 .28vh;padding:.24vh .38vw;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff;font-size:clamp(7px,.52vw,10px);font-weight:850;line-height:1.05}
.slide.side.award-feature-card .feature-role{background:linear-gradient(90deg,#b27600,#ffd34d);color:#382400}
.slide.side.award-feature-card img{width:100%;height:72%;padding-top:3.2vh;object-fit:contain;object-position:center center;background:#ffffff}
.slide.side.award-feature-card .caption{height:28%;justify-content:flex-start;padding:.52vh .72vw .7vh;gap:.1vh}
.slide.side.award-feature-card .caption h3{font-size:clamp(10px,.78vw,15px);line-height:1.02}
.slide.side.award-feature-card .caption p{font-size:clamp(7px,.52vw,10px);line-height:1.08}

/* Petugas Pelayanan: tampilkan media 1080x960 secara utuh tanpa crop */
.slide.side.service-feature-card img{width:100%;height:72%;padding-top:3.2vh;object-fit:contain;object-position:center center;background:#ffffff}
.slide.side.service-feature-card .caption{height:28%;justify-content:flex-start;padding:.52vh .72vw .7vh;gap:.1vh}
.slide.side.service-feature-card .caption h3{font-size:clamp(10px,.78vw,15px);line-height:1.02}
.slide.side.service-feature-card .caption p{font-size:clamp(7px,.52vw,10px);line-height:1.08}
.slide.side.service-feature-card .feature-role{margin:.05vh 0 .18vh;padding:.2vh .34vw;font-size:clamp(7px,.48vw,9px)}
.slide-indicator{position:absolute;right:.72vw;bottom:.42vh;z-index:7;display:flex;align-items:center;gap:.34vw;padding:.3vh .46vw;border-radius:999px;background:rgba(6,59,112,.74);box-shadow:0 8px 20px rgba(0,0,0,.16);backdrop-filter:blur(5px)}
.main-panel .slide-indicator{right:.92vw;bottom:.72vh;background:rgba(6,59,112,.66)}
/* Indikator ringkas untuk slider dengan lebih dari 10 konten. */
.slide-indicator.slide-counter{min-width:3.2vw;justify-content:center;gap:.18vw;color:#fff;font-size:clamp(9px,.68vw,13px);font-weight:950;letter-spacing:.2px}
.slide-counter .slide-current{color:var(--yellow)}
.slide-counter .slide-separator{opacity:.68}
.slide-counter .slide-total{opacity:.95}

.slide-dot{width:.42vw;height:.42vw;min-width:6px;min-height:6px;border-radius:50%;background:rgba(255,255,255,.48);transition:width .25s ease,background .25s ease}
.slide-dot.active{width:1.1vw;border-radius:999px;background:var(--yellow)}
.footer-ticker{display:grid;grid-template-columns:13vw minmax(0,1fr);align-items:center;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 12px 25px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.55)}
.ticker-label{height:100%;display:grid;place-items:center;background:linear-gradient(90deg,var(--yellow),#ffb927);color:#342000;font-weight:950;font-size:clamp(12px,1.08vw,20px);text-transform:uppercase}
.ticker-track{white-space:nowrap;overflow:hidden;height:100%;display:flex;align-items:center;color:#063b70;font-weight:850;font-size:clamp(15px,1.38vw,27px)}
.ticker-content{display:inline-block;padding-left:100%;animation:ticker 40s linear infinite}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.ticker-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--blue2);margin:0 1.1em}
.offline-badge{position:fixed;right:1.3vw;bottom:7.7vh;z-index:20;background:#fff3cd;color:#533f03;padding:.55vh .8vw;border-radius:999px;font-weight:800;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.14);display:none}
body.offline .offline-badge{display:block}
@media(max-aspect-ratio: 4/3){
  .topbar{grid-template-columns:minmax(150px,20vw) minmax(0,1fr) minmax(150px,20vw)}
  .display-shell{grid-template-rows:9vh minmax(0,1fr) 6vh}
  .main-grid{grid-template-columns:15vw minmax(0,1fr) 16vw;gap:.55vw}
  .side-stack.left{grid-template-rows:1fr 1.2fr}
  .side-stack.right{grid-template-rows:1.02fr .98fr .34fr}
  .side-stack,.side-stack.right{gap:.7vh}
  .panel,.main-panel{border-radius:15px}
  .slide-dot{width:7px;height:7px}
}

.right-social-card .social-line-slide{padding-top:3.2vh;justify-content:center}
.right-social-card .social-line{grid-template-columns:2.2vw minmax(0,1fr);gap:.5vw;padding:.35vh .65vw 1.2vh}
.right-social-card .social-logo{width:1.95vw;height:1.95vw;min-width:24px;min-height:24px;border-radius:10px}
.right-social-card .social-copy h3{font-size:clamp(9px,.72vw,14px);line-height:1.02;margin:0}
.right-social-card .social-copy p{font-size:clamp(7px,.52vw,10px);line-height:1.05}
.right-social-card .slide-indicator{right:.48vw;bottom:.2vh;padding:.16vh .32vw}

/* Perbaikan tampilan media kanan: gambar tidak tertutup header panel dan tidak crop */
.slide.side.service-feature-card > img,
.slide.side.award-feature-card > img{
  width:100% !important;
  height:72% !important;
  padding-top:3.2vh !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#ffffff !important;
}