*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:#06152e}a{text-decoration:none;color:inherit}
.landing{background:#06152e;color:white}.hero{min-height:80vh;padding:32px;background:radial-gradient(circle at 15% 10%,#1264ff55,transparent 35%),radial-gradient(circle at 85% 20%,#00d4a055,transparent 35%),linear-gradient(135deg,#06152e,#07365b 50%,#064a4b)}.topbar{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:auto}.brand{display:flex;gap:12px;align-items:center}.brand span{display:block;font-size:12px;opacity:.8}.logo{width:48px;height:48px;border-radius:16px;background:white;color:#1264ff;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 30px #00e0ff44}.topbar nav a{margin-left:18px;font-weight:800}.hero-content{max-width:880px;margin:110px auto;text-align:center}.badge{display:inline-block;border:1px solid #00ffe155;background:#00ffe11a;color:#8ffff0;padding:10px 22px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:1px}.hero h1{font-size:92px;margin:20px 0 10px;background:linear-gradient(#fff,#8ffff0);-webkit-background-clip:text;color:transparent}.hero p{font-size:20px;line-height:1.6}.btn,.submit,.login-box button,.admin-form button{background:linear-gradient(100deg,#1264ff,#18d5ff,#4cff75);border:0;color:white;font-weight:900;border-radius:18px;padding:16px 24px;box-shadow:0 18px 40px #00e0ff44}.section{padding:50px;max-width:1180px;margin:auto}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.card{background:white;color:#06152e;border-radius:24px;padding:18px;box-shadow:0 18px 50px #0003}.mpp-photo{height:130px;border-radius:18px;background:linear-gradient(135deg,#eaf3ff,#dffdf3);overflow:hidden}.mpp-photo img{width:100%;height:100%;object-fit:cover}

.tamu-premium{min-height:100vh;background:#041020;color:white;overflow-x:hidden;padding-bottom:72px}.bg3d{position:fixed;inset:0;background:radial-gradient(circle at 15% 18%,#0f63ff55,transparent 32%),radial-gradient(circle at 82% 30%,#00bd8b77,transparent 30%),linear-gradient(135deg,#020b1b,#051c35 55%,#073b3e);z-index:-2}.bg3d:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(#000,transparent 85%)}
.tamu-wrap{max-width:1160px;margin:auto;padding:24px}.tamu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tamu-head .brand b{font-size:15px}.tamu-head .brand span{font-weight:900;font-size:10px}.clock3d{border:1px solid #00e0ff77;border-radius:18px;padding:10px 20px;text-align:center;background:#00364a99;box-shadow:0 0 28px #00e0ff33}.clock3d span,.clock3d small{display:block;font-size:10px;font-weight:900;letter-spacing:1px}.clock3d b{font-size:26px;color:#51fff3;text-shadow:0 0 18px #51fff3}.title-zone{text-align:center;margin:14px auto 22px}.title-zone h1{font-size:70px;line-height:.96;margin:18px 0 8px;letter-spacing:4px;background:linear-gradient(#fff,#95fff0);-webkit-background-clip:text;color:transparent;text-shadow:0 8px 26px #00e0ff66}.title-zone p{color:#d9f4ff;margin:0;font-size:16px}
.layout-form{display:grid;grid-template-columns:minmax(420px,1fr) minmax(390px,.72fr);gap:22px;align-items:start}.panel{border:1px solid #6feaff55;background:linear-gradient(145deg,#ffffff14,#ffffff08);border-radius:26px;padding:24px;box-shadow:inset 0 0 80px #00d4ff14,0 22px 60px #0008;backdrop-filter:blur(14px)}.panel h2{font-size:28px;margin:0}.panel-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.panel-title p{margin:4px 0 0;color:#cff6ff}.panel-title span{background:#ffffff22;padding:10px 15px;border-radius:999px;font-size:12px;font-weight:900}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}label{display:block;font-size:14px;font-weight:900;color:white}input,select,textarea{width:100%;margin-top:9px;border:1px solid #7bdcff55;background:#081b34cc;color:white;border-radius:16px;padding:15px 17px;outline:none;font-size:15px}textarea{height:120px;resize:vertical}.full{margin-top:18px}.full small{display:block;text-align:right;color:#c8efff;margin-top:6px}.submit{width:100%;margin-top:18px;font-size:18px}.mobile-submit{display:none}
.camera-panel{text-align:center}.camera-frame{position:relative;width:100%;aspect-ratio:4/3;max-height:420px;border-radius:24px;border:1px solid #00d9ff;overflow:hidden;background:#061d31;box-shadow:inset 0 0 70px #00d9ff22}.camera-frame video,.camera-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.camera-frame img{display:none}.camera-frame.photo-mode img{display:block}.camera-frame.photo-mode video{display:none}.corners:before,.corners:after{display:none!important;content:none!important}#camStatus{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:#08c99e;color:white;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:900}.photo-btn{margin-top:22px;width:124px;height:124px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 25%,#6cff8d,#18d5ff,#1264ff 72%);color:white;font-weight:900;box-shadow:0 0 38px #00e0ff99;cursor:pointer}
.running{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:min(1080px,calc(100% - 24px));display:flex;align-items:center;border:1px solid #24bfff55;background:#041b35ee;border-radius:16px;overflow:hidden;z-index:10}.running b{background:linear-gradient(90deg,#1264ff,#02c796);padding:14px 18px;white-space:nowrap}.running marquee{font-weight:900;color:white}
.modal{display:none;position:fixed;inset:0;background:#010917cc;backdrop-filter:blur(8px);z-index:30;place-items:center}.modal.show{display:grid}.modal-box{width:min(360px,90vw);background:linear-gradient(145deg,#fff,#edfffb);color:#071a35;border-radius:28px;padding:28px;text-align:center;box-shadow:0 25px 70px #0008}.check{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:#d9fff0;color:#00b97c;font-size:54px;font-weight:900}.modal-box button{background:linear-gradient(90deg,#1264ff,#00b894);border:0;border-radius:15px;color:white;padding:13px 26px;font-weight:900}

.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#06152e,#064a4b)}.login-box{width:min(430px,92vw);background:white;border-radius:28px;padding:30px;box-shadow:0 22px 70px #0006}.login-box label{color:#06152e;margin-top:15px}.login-box input{color:#06152e;background:#f3f7fb}.login-box button{width:100%;margin:20px 0 10px}.alert{background:#fff0f0;color:#b00000;border-radius:14px;padding:12px;font-weight:900}.admin-body{display:flex;background:#f3f7fb;min-height:100vh}.admin-body aside{width:250px;background:#06152e;color:white;padding:24px;display:flex;flex-direction:column;gap:10px}.admin-body aside a{padding:12px;border-radius:12px;font-weight:800}.admin-body aside a:hover{background:#ffffff12}.admin-body main{flex:1;padding:30px}.dashcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.dashcards div{background:white;border-radius:22px;padding:24px;box-shadow:0 10px 30px #0001}.dashcards b{font-size:42px;color:#1264ff;display:block}.tablewrap{background:white;border-radius:20px;overflow:auto;box-shadow:0 10px 30px #0001}.tablewrap table{width:100%;border-collapse:collapse}.tablewrap th,.tablewrap td{padding:12px;border-bottom:1px solid #e8eef6;text-align:left}.thumb{width:70px;height:55px;object-fit:cover;border-radius:10px}.admin-form{max-width:700px;background:white;padding:24px;border-radius:22px;box-shadow:0 10px 30px #0001;margin-bottom:20px}.admin-form label{color:#06152e;margin-bottom:14px}.admin-form input,.admin-form textarea{color:#06152e;background:#f7f9fc}.ok{background:#dfffee;color:#008751;padding:12px;border-radius:12px;margin-bottom:12px;font-weight:900}

@media(max-width:820px){
  .tamu-premium{padding-bottom:64px}.tamu-wrap{padding:16px 10px}.tamu-head{gap:8px;align-items:flex-start}.tamu-head .brand{transform:scale(.86);transform-origin:left top}.clock3d{padding:8px 12px}.clock3d b{font-size:18px}
  .title-zone{margin-top:6px}.title-zone .badge{font-size:10px;padding:8px 12px}.title-zone h1{font-size:34px;letter-spacing:2px;line-height:1.05}.title-zone p{font-size:12px;line-height:1.25}
  .layout-form{display:flex;flex-direction:column;gap:14px}.form-panel{order:1}.camera-panel{order:2}.mobile-submit{display:block;order:3}.desktop-submit{display:none}
  .panel{border-radius:22px;padding:16px}.panel h2{font-size:22px}.panel-title span{font-size:10px;padding:8px 10px}.grid2{grid-template-columns:1fr;gap:13px;margin-top:16px}input,select,textarea{padding:13px 14px;font-size:14px;border-radius:14px}textarea{height:105px}
  .camera-frame{aspect-ratio:4/3;max-height:none}.photo-btn{width:90px;height:90px;font-size:12px;margin-top:14px}.running{bottom:6px;width:calc(100% - 18px);border-radius:13px}.running b{padding:11px 12px;font-size:12px}.running marquee{font-size:12px}
}


/* v14 - clean mobile camera preview */
.camera-panel{
  width:100%;
  min-width:0;
}
.camera-frame{
  width:100%;
  min-height:260px;
  border:2px solid rgba(0,217,255,.75);
}
.camera-frame video,
.camera-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.corners,
.corners:before,
.corners:after{
  display:none!important;
  content:none!important;
  border:0!important;
}
.camera-frame.photo-mode #camStatus{
  background:rgba(0,190,150,.94);
}
@media(max-width:820px){
  .camera-panel{
    width:100%!important;
    align-self:stretch!important;
  }
  .camera-frame{
    width:100%!important;
    aspect-ratio:4/3!important;
    min-height:220px!important;
  }
  .photo-btn{
    width:96px!important;
    height:96px!important;
  }
}
@media(max-width:430px){
  .panel{
    width:100%!important;
  }
  .camera-frame{
    min-height:210px!important;
  }
}

/* v15 Landing Page Modern SIDULANG */
.landing-v15{min-height:100vh;background:#041020;color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}.landing-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 15% 10%,rgba(18,100,255,.45),transparent 34%),radial-gradient(circle at 86% 18%,rgba(0,212,160,.42),transparent 32%),linear-gradient(135deg,#020816,#062349 52%,#064541)}.landing-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(#000,transparent 85%)}
.land-nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;width:min(1180px,calc(100% - 32px));margin:16px auto;padding:14px 18px;border:1px solid rgba(127,234,255,.35);border-radius:24px;background:rgba(3,18,39,.72);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.35)}.land-brand{display:flex;gap:12px;align-items:center}.land-logo{width:48px;height:48px;border-radius:16px;background:#fff;color:#1264ff;display:grid;place-items:center;font-weight:1000;box-shadow:0 0 30px rgba(0,224,255,.35)}.land-brand b{display:block;font-size:18px}.land-brand span{font-size:12px;color:#bfefff;font-weight:800}.land-nav nav{display:flex;gap:8px;align-items:center}.land-nav nav a{padding:11px 14px;border-radius:14px;color:#e7fbff;font-weight:900;font-size:14px}.land-nav nav a:hover{background:rgba(255,255,255,.12)}.land-nav .nav-cta{background:linear-gradient(90deg,#1264ff,#03c796);box-shadow:0 12px 28px rgba(0,224,255,.28)}
.land-hero{width:min(1180px,calc(100% - 32px));margin:70px auto 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}.hero-left .pill,.section-title span{display:inline-block;border:1px solid rgba(74,255,229,.55);background:rgba(0,255,225,.12);color:#8ffff0;padding:10px 18px;border-radius:999px;font-weight:1000;letter-spacing:1px;font-size:12px}.land-hero h1{font-size:104px;line-height:.9;margin:22px 0 10px;background:linear-gradient(#fff,#9ffff1);-webkit-background-clip:text;color:transparent;letter-spacing:4px;text-shadow:0 18px 50px rgba(0,224,255,.3)}.land-hero h2{font-size:30px;line-height:1.25;margin:0 0 14px;color:#fff}.land-hero p{font-size:17px;line-height:1.7;color:#d5f7ff;max-width:680px}.hero-actions{display:flex;gap:14px;margin-top:26px}.hero-actions a,.land-cta a{border-radius:18px;padding:16px 22px;font-weight:1000}.hero-actions .primary,.land-cta a{background:linear-gradient(90deg,#1264ff,#18d5ff,#4cff75);color:#fff;box-shadow:0 18px 46px rgba(0,224,255,.32)}.hero-actions .secondary{border:1px solid rgba(127,234,255,.35);background:rgba(255,255,255,.08);color:#e9fbff}.hero-card{min-height:420px;border:1px solid rgba(127,234,255,.35);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 0 90px rgba(0,224,255,.14),0 28px 80px rgba(0,0,0,.45);position:relative;overflow:hidden;display:grid;place-items:center}.glass-stat{position:relative;z-index:2;width:min(320px,82%);padding:28px;border-radius:28px;background:rgba(3,18,39,.72);border:1px solid rgba(127,234,255,.4);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}.glass-stat span,.glass-stat small{display:block;color:#bfefff;font-weight:900}.glass-stat b{display:block;font-size:64px;margin:8px 0;color:#7dfff1}.orbit{position:absolute;inset:30px;animation:spinOrbit 18s linear infinite}.orbit div{position:absolute;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:rgba(255,255,255,.13);border:1px solid rgba(127,234,255,.35);box-shadow:0 0 35px rgba(0,224,255,.22)}.orbit div:nth-child(1){left:4%;top:16%}.orbit div:nth-child(2){right:8%;top:20%}.orbit div:nth-child(3){left:15%;bottom:8%}.orbit div:nth-child(4){right:14%;bottom:14%}@keyframes spinOrbit{to{transform:rotate(360deg)}}
.land-section{width:min(1180px,calc(100% - 32px));margin:70px auto}.section-title{text-align:center;margin-bottom:28px}.section-title h2{font-size:42px;margin:14px 0 8px}.section-title p{color:#d5f7ff;margin:0 auto;max-width:760px;line-height:1.6}.land-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.land-stats div{border:1px solid rgba(127,234,255,.35);border-radius:26px;background:rgba(255,255,255,.1);padding:26px;text-align:center;box-shadow:inset 0 0 60px rgba(0,224,255,.12)}.land-stats b{display:block;font-size:42px;color:#8ffff0}.land-stats span{font-weight:900;color:#dffaff}
.mpp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}.mpp-card{border:1px solid rgba(127,234,255,.35);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.06));box-shadow:0 24px 70px rgba(0,0,0,.32);overflow:hidden;cursor:pointer;transition:.25s}.mpp-card:hover{transform:translateY(-8px);box-shadow:0 30px 90px rgba(0,224,255,.24)}.mpp-img{height:190px;position:relative;background:linear-gradient(135deg,rgba(18,100,255,.22),rgba(0,212,160,.22));overflow:hidden}.mpp-img img{width:100%;height:100%;object-fit:cover;transition:.35s}.mpp-card:hover .mpp-img img{transform:scale(1.06)}.mpp-img span{position:absolute;right:14px;top:14px;padding:8px 12px;border-radius:999px;background:rgba(3,18,39,.82);font-weight:1000;color:#8ffff0}.mpp-placeholder,.big-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:58px}.mpp-info{padding:20px}.mpp-info h3{font-size:20px;margin:0 0 8px}.mpp-info p{color:#ccefff;margin:0 0 16px}.mpp-info button{border:0;border-radius:14px;padding:12px 16px;background:linear-gradient(90deg,#1264ff,#03c796);color:white;font-weight:1000}
.land-cta{width:min(1180px,calc(100% - 32px));margin:60px auto;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px;border-radius:30px;border:1px solid rgba(127,234,255,.35);background:linear-gradient(100deg,rgba(18,100,255,.28),rgba(0,212,160,.22));box-shadow:0 24px 70px rgba(0,0,0,.34)}.land-cta h2{margin:0 0 8px;font-size:30px}.land-cta p{margin:0;color:#d5f7ff}.land-footer{text-align:center;padding:35px;color:#bfefff}.land-footer b{display:block;font-size:22px;color:#fff}
.mpp-modal{display:none;position:fixed;inset:0;z-index:60;background:rgba(1,9,23,.82);backdrop-filter:blur(12px);place-items:center;padding:18px}.mpp-modal.show{display:grid}.mpp-modal-box{width:min(980px,96vw);max-height:90vh;overflow:auto;display:grid;grid-template-columns:.9fr 1.1fr;border-radius:34px;background:#06162d;border:1px solid rgba(127,234,255,.42);box-shadow:0 30px 100px rgba(0,0,0,.6);position:relative}.mpp-modal .close{position:absolute;right:15px;top:15px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#06152e;font-size:28px;font-weight:900;z-index:2}.modal-photo{min-height:440px;background:linear-gradient(135deg,#083b7a,#006a5f)}.modal-photo img{width:100%;height:100%;object-fit:cover}.modal-content{padding:34px}.modal-content h2{font-size:34px;margin:0 0 10px}.modal-content p{color:#d5f7ff;line-height:1.6}.modal-list{display:grid;gap:12px;margin-top:20px}.modal-list div{border:1px solid rgba(127,234,255,.25);border-radius:18px;padding:15px;background:rgba(255,255,255,.07)}.modal-list b{display:block;color:#8ffff0;margin-bottom:6px}.modal-list span{color:#fff;line-height:1.45}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-form-wide{max-width:980px}.admin-preview{width:220px;height:130px;object-fit:cover;border-radius:16px;margin:5px 0 16px}.cancel{display:inline-block;margin-left:12px;font-weight:900;color:#1264ff}
@media(max-width:860px){.land-nav nav{display:none}.land-hero{grid-template-columns:1fr;margin-top:36px}.land-hero h1{font-size:62px}.land-hero h2{font-size:23px}.hero-card{min-height:280px}.land-stats{grid-template-columns:repeat(2,1fr)}.section-title h2{font-size:30px}.mpp-modal-box{grid-template-columns:1fr}.modal-photo{min-height:260px}.land-cta{flex-direction:column;align-items:flex-start}.hero-actions{flex-direction:column}.hero-actions a{text-align:center}}@media(max-width:520px){.land-hero h1{font-size:48px}.land-hero h2{font-size:19px}.land-stats{grid-template-columns:1fr}.mpp-img{height:170px}.land-section{margin:45px auto}.land-cta h2{font-size:24px}.modal-content{padding:24px}.modal-content h2{font-size:26px}}

/* =========================
   SIDULANG V17 PORTAL PREMIUM
========================= */
.portal-v17{margin:0;min-height:100vh;background:#06152e;color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}
.portal-bg{position:fixed;inset:0;z-index:-3;background:linear-gradient(135deg,#020918 0%,#072b5c 48%,#04705d 100%)}
.portal-bg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(#000,rgba(0,0,0,.78),transparent)}
.portal-bg span{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(40px);opacity:.38;animation:portalFloat 12s ease-in-out infinite alternate}
.portal-bg span:nth-child(1){left:4%;top:12%;background:#1767ff}
.portal-bg span:nth-child(2){right:7%;top:20%;background:#00e0ad;animation-delay:2s}
.portal-bg span:nth-child(3){left:35%;bottom:4%;background:#26d9ff;animation-delay:1s}
.portal-bg span:nth-child(4){right:30%;bottom:18%;background:#48ff88;animation-delay:3s}
@keyframes portalFloat{to{transform:translate3d(45px,-35px,0) scale(1.08)}}
.preloader{position:fixed;inset:0;z-index:999;background:#020918;display:grid;place-items:center;align-content:center;gap:18px;transition:.45s}
.preloader.hide{opacity:0;visibility:hidden}
.loader-orb{width:82px;height:82px;border-radius:26px;background:linear-gradient(135deg,#1264ff,#18d5ff,#4cff75);display:grid;place-items:center;font-weight:1000;font-size:28px;box-shadow:0 0 50px #18d5ff;animation:pulseOrb 1.3s infinite alternate}
@keyframes pulseOrb{to{transform:scale(1.08) rotate(4deg)}}
.portal-navbar{position:sticky;top:16px;z-index:50;width:min(1180px,calc(100% - 30px));margin:16px auto;padding:14px 18px;border:1px solid rgba(137,245,255,.32);border-radius:26px;display:flex;align-items:center;justify-content:space-between;background:rgba(4,17,39,.78);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.36)}
.portal-brand{display:flex;gap:13px;align-items:center;color:#fff}.brand-mark{width:50px;height:50px;border-radius:16px;background:#fff;color:#1264ff;display:grid;place-items:center;font-weight:1000;box-shadow:0 0 30px rgba(0,224,255,.35)}.portal-brand b{display:block;font-size:20px}.portal-brand span{display:block;font-size:12px;font-weight:800;color:#c8f8ff}
.portal-navbar nav{display:flex;align-items:center;gap:8px}.portal-navbar nav a{color:#eaffff;font-weight:900;padding:12px 14px;border-radius:15px}.portal-navbar nav a:hover{background:rgba(255,255,255,.12)}.portal-navbar .nav-primary{background:linear-gradient(90deg,#1264ff,#02c796);box-shadow:0 12px 30px rgba(0,224,255,.32)}
.hero-premium{position:relative;width:min(1180px,calc(100% - 30px));margin:78px auto 40px;min-height:650px;display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.hero-particles i{position:absolute;width:10px;height:10px;border-radius:50%;background:#8ffff0;box-shadow:0 0 26px #8ffff0;animation:particleMove 7s linear infinite}
.hero-particles i:nth-child(1){left:5%;top:18%}.hero-particles i:nth-child(2){left:38%;top:8%;animation-delay:1s}.hero-particles i:nth-child(3){right:12%;top:18%;animation-delay:2s}.hero-particles i:nth-child(4){left:12%;bottom:20%;animation-delay:3s}.hero-particles i:nth-child(5){right:45%;bottom:12%;animation-delay:4s}.hero-particles i:nth-child(6){right:7%;bottom:28%;animation-delay:5s}
@keyframes particleMove{50%{transform:translateY(-35px) scale(1.6);opacity:.5}}
.eyebrow,.section-head small{display:inline-block;border:1px solid rgba(143,255,240,.48);background:rgba(0,255,225,.13);color:#8ffff0;border-radius:999px;padding:11px 18px;font-size:12px;font-weight:1000;letter-spacing:1.1px}
.hero-copy h1{font-size:118px;line-height:.86;margin:22px 0 14px;letter-spacing:5px;background:linear-gradient(#fff,#88fff0);-webkit-background-clip:text;color:transparent;text-shadow:0 18px 50px rgba(0,224,255,.34)}
.hero-copy h2{font-size:35px;line-height:1.22;margin:0 0 18px}.hero-copy p{font-size:18px;line-height:1.75;color:#d9f8ff;max-width:700px}
.hero-buttons{display:flex;gap:16px;margin-top:30px}.btn-main,.btn-outline,.cta-premium a{padding:17px 24px;border-radius:18px;font-weight:1000}.btn-main,.cta-premium a{background:linear-gradient(90deg,#1264ff,#15d5ff,#4cff75);color:#fff;box-shadow:0 18px 45px rgba(0,224,255,.34)}.btn-outline{border:1px solid rgba(143,255,240,.38);background:rgba(255,255,255,.08);color:#fff}
.screen-card{height:430px;border-radius:38px;border:1px solid rgba(143,255,240,.34);background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.06));box-shadow:inset 0 0 100px rgba(0,224,255,.12),0 30px 90px rgba(0,0,0,.45);position:relative;overflow:hidden;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:.15s}
.screen-card:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,#35ffe3,transparent,#1264ff,transparent);animation:spin 9s linear infinite;opacity:.14}.screen-top{position:absolute;left:26px;top:22px;display:flex;gap:8px}.screen-top span{width:13px;height:13px;border-radius:50%;background:#8ffff0}.dashboard-mini{position:absolute;inset:72px 46px 54px;border-radius:30px;background:rgba(2,13,31,.7);border:1px solid rgba(143,255,240,.28);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:26px}.circle-chart{width:150px;height:150px;border-radius:50%;background:conic-gradient(#4cff75 70%,#123 0);display:grid;place-items:center;margin:auto;box-shadow:0 0 55px rgba(0,224,255,.28)}.circle-chart b{font-size:50px;color:#8ffff0}.circle-chart small{display:block;color:#fff}.mini-bars{height:170px;display:flex;align-items:end;gap:12px}.mini-bars i{flex:1;border-radius:14px 14px 0 0;background:linear-gradient(#4cff75,#18d5ff,#1264ff)}.floating-chip{position:absolute;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(143,255,240,.36);font-weight:900;box-shadow:0 15px 40px rgba(0,0,0,.25);animation:chipFloat 4s ease-in-out infinite alternate}.chip-1{left:18px;top:105px}.chip-2{right:18px;top:160px;animation-delay:1s}.chip-3{left:120px;bottom:28px;animation-delay:2s}@keyframes chipFloat{to{transform:translateY(-18px)}}@keyframes spin{to{transform:rotate(360deg)}}
.stats-premium{width:min(1180px,calc(100% - 30px));margin:0 auto 80px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat-box{padding:30px;border-radius:30px;border:1px solid rgba(143,255,240,.32);background:rgba(255,255,255,.1);text-align:center;box-shadow:inset 0 0 70px rgba(0,224,255,.12)}.stat-box b{display:block;font-size:52px;color:#8ffff0}.stat-box span{font-weight:900;color:#e8ffff}
.section-premium,.map-section,.news-section,.gallery-section{width:min(1180px,calc(100% - 30px));margin:90px auto}.section-head{text-align:center;margin-bottom:34px}.section-head h2{font-size:46px;margin:15px 0 8px}.section-head p{color:#d9f8ff;max-width:760px;margin:auto;line-height:1.65}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card,.news-card{border:1px solid rgba(143,255,240,.3);border-radius:30px;background:rgba(255,255,255,.1);padding:25px;box-shadow:0 24px 70px rgba(0,0,0,.28);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:.25s}.service-card:hover,.news-card:hover{transform:translateY(-8px)}.service-card div{font-size:42px}.service-card h3,.news-card h3{font-size:22px;margin:16px 0 10px}.service-card p,.news-card p{color:#d8f8ff;line-height:1.6}
.map-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}.bangka-map{border:1px solid rgba(143,255,240,.3);border-radius:34px;background:rgba(255,255,255,.1);min-height:520px;display:grid;place-items:center;box-shadow:inset 0 0 90px rgba(0,224,255,.12)}.map-island{position:relative;width:270px;height:420px;border-radius:58% 42% 50% 48%;background:linear-gradient(160deg,#1264ff,#18d5ff,#00b894);box-shadow:0 0 70px rgba(0,224,255,.4);transform:rotate(-18deg)}.pin{position:absolute;padding:8px 11px;border-radius:999px;background:#fff;color:#06405b;font-size:11px;font-weight:1000;box-shadow:0 12px 26px rgba(0,0,0,.25);transform:rotate(18deg)}.p1{left:80px;top:80px}.p2{left:115px;top:180px}.p3{left:88px;top:235px}.p4{left:12px;top:135px}.p5{left:95px;bottom:55px}
.mpp-premium-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.mpp-premium-card{border:1px solid rgba(143,255,240,.32);border-radius:28px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.28);cursor:pointer;transition:.25s}.mpp-premium-card:hover{transform:translateY(-8px) scale(1.015)}.mpp-cover{height:170px;position:relative;background:linear-gradient(135deg,#1264ff44,#00b89455)}.mpp-cover img{width:100%;height:100%;object-fit:cover}.mpp-empty{height:100%;display:grid;place-items:center;font-size:56px}.mpp-cover span{position:absolute;right:12px;top:12px;background:rgba(3,18,39,.82);color:#8ffff0;border-radius:999px;padding:8px 11px;font-weight:1000}.mpp-body{padding:18px}.mpp-body h3{font-size:20px;margin:0 0 8px}.mpp-body p{color:#d9f8ff;margin:0 0 14px}.mpp-body button{border:0;border-radius:14px;background:linear-gradient(90deg,#1264ff,#02c796);color:#fff;font-weight:1000;padding:12px 15px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.news-img{height:160px;border-radius:22px;background:linear-gradient(135deg,#1264ff66,#00b89466);display:grid;place-items:center;font-size:56px}.news-card span{display:inline-block;margin-top:15px;color:#8ffff0;font-weight:1000}.gallery-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:16px}.gallery-grid div{border-radius:26px;background:linear-gradient(135deg,rgba(18,100,255,.45),rgba(0,212,160,.5));border:1px solid rgba(143,255,240,.32);display:grid;place-items:center;font-weight:1000;font-size:22px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.gallery-grid div:nth-child(1){grid-row:span 2}.gallery-grid div:nth-child(4){grid-column:span 2}
.cta-premium{width:min(1180px,calc(100% - 30px));margin:90px auto 50px;padding:36px;border-radius:34px;border:1px solid rgba(143,255,240,.34);background:linear-gradient(100deg,rgba(18,100,255,.3),rgba(0,212,160,.24));display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 30px 90px rgba(0,0,0,.34)}.cta-premium h2{font-size:34px;margin:0 0 8px}.cta-premium p{margin:0;color:#d9f8ff}.footer-premium{width:min(1180px,calc(100% - 30px));margin:0 auto 30px;border-top:1px solid rgba(143,255,240,.25);padding:25px 0;display:flex;justify-content:space-between;color:#d9f8ff}.footer-premium b{display:block;font-size:22px;color:#fff}
.reveal{opacity:0;transform:translateY(40px);transition:.8s cubic-bezier(.2,.8,.2,1)}.reveal.show{opacity:1;transform:translateY(0)}
@media(max-width:960px){.portal-navbar nav{display:none}.hero-premium,.map-layout{grid-template-columns:1fr}.hero-copy h1{font-size:72px}.stats-premium,.service-grid{grid-template-columns:repeat(2,1fr)}.news-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:135px}.gallery-grid div:nth-child(1),.gallery-grid div:nth-child(4){grid-row:auto;grid-column:auto}.cta-premium{flex-direction:column;align-items:flex-start}.mpp-premium-grid{grid-template-columns:1fr}}
@media(max-width:560px){.hero-premium{margin-top:35px;min-height:auto}.hero-copy h1{font-size:50px}.hero-copy h2{font-size:24px}.hero-buttons{flex-direction:column}.stats-premium,.service-grid{grid-template-columns:1fr}.section-head h2{font-size:30px}.screen-card{height:300px}.dashboard-mini{inset:55px 20px 35px;grid-template-columns:1fr}.mini-bars{display:none}.portal-brand span{display:none}}


/* =========================
   SIDULANG V18 WHITE ELEGANT THEME
   Override portal dark neon into clean government style
========================= */

.portal-v17{
  background:#f6f8fb!important;
  color:#1f2937!important;
}

.portal-bg{
  background:
    radial-gradient(circle at 10% 5%, rgba(15,93,184,.09), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(0,184,148,.08), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%)!important;
}

.portal-bg:before{
  background-image:
    linear-gradient(rgba(15,93,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,93,184,.045) 1px,transparent 1px)!important;
  opacity:.7;
}

.portal-bg span{
  display:none!important;
}

.preloader{
  background:#ffffff!important;
  color:#1f2937!important;
}

.loader-orb{
  background:linear-gradient(135deg,#0f5db8,#00b894)!important;
  box-shadow:0 18px 40px rgba(15,93,184,.18)!important;
}

.portal-navbar{
  background:rgba(255,255,255,.92)!important;
  border:1px solid #e5eef7!important;
  box-shadow:0 16px 48px rgba(15,93,184,.10)!important;
}

.portal-brand,
.portal-navbar nav a{
  color:#1f2937!important;
}

.portal-brand span{
  color:#64748b!important;
}

.brand-mark{
  background:linear-gradient(135deg,#0f5db8,#00b894)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(15,93,184,.18)!important;
}

.portal-navbar nav a:hover{
  background:#eef6ff!important;
}

.portal-navbar .nav-primary{
  color:#fff!important;
  background:linear-gradient(90deg,#0f5db8,#00b894)!important;
  box-shadow:0 12px 28px rgba(15,93,184,.20)!important;
}

.hero-premium{
  min-height:620px!important;
}

.hero-particles{
  display:none!important;
}

.eyebrow,
.section-head small{
  background:#eaf7ff!important;
  color:#0f5db8!important;
  border:1px solid #cfe7ff!important;
}

.hero-copy h1{
  background:linear-gradient(90deg,#0f5db8,#00a884)!important;
  -webkit-background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
}

.hero-copy h2,
.section-head h2,
.cta-premium h2,
.footer-premium b{
  color:#1f2937!important;
}

.hero-copy p,
.section-head p,
.cta-premium p,
.footer-premium,
.service-card p,
.news-card p,
.mpp-body p{
  color:#4b5563!important;
}

.btn-main,
.cta-premium a{
  background:linear-gradient(90deg,#0f5db8,#00b894)!important;
  color:#fff!important;
  box-shadow:0 16px 36px rgba(15,93,184,.20)!important;
}

.btn-outline{
  background:#ffffff!important;
  color:#0f5db8!important;
  border:1px solid #cfe7ff!important;
  box-shadow:0 10px 28px rgba(15,93,184,.08)!important;
}

.screen-card,
.stat-box,
.service-card,
.news-card,
.bangka-map,
.mpp-premium-card,
.cta-premium{
  background:#ffffff!important;
  border:1px solid #e5eef7!important;
  box-shadow:0 18px 48px rgba(15,93,184,.10)!important;
}

.screen-card:before{
  display:none!important;
}

.screen-top span{
  background:#dbeafe!important;
}

.dashboard-mini{
  background:#f8fafc!important;
  border:1px solid #e5eef7!important;
}

.circle-chart{
  background:conic-gradient(#0f5db8 70%,#e5eef7 0)!important;
  box-shadow:none!important;
}

.circle-chart b,
.stat-box b{
  color:#0f5db8!important;
}

.circle-chart small,
.stat-box span{
  color:#64748b!important;
}

.mini-bars i{
  background:linear-gradient(#00b894,#0f5db8)!important;
}

.floating-chip{
  background:#ffffff!important;
  border:1px solid #e5eef7!important;
  color:#334155!important;
  box-shadow:0 12px 30px rgba(15,93,184,.10)!important;
}

.service-card div{
  background:linear-gradient(135deg,#eaf7ff,#e8fff8)!important;
  color:#0f5db8!important;
  border-radius:22px;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
}

.map-island{
  background:linear-gradient(160deg,#dff4ff,#cbf7eb)!important;
  box-shadow:0 18px 45px rgba(15,93,184,.16)!important;
  border:1px solid #cfe7ff!important;
}

.pin{
  background:#ffffff!important;
  color:#0f5db8!important;
  border:1px solid #cfe7ff!important;
}

.mpp-cover,
.news-img,
.gallery-grid div{
  background:linear-gradient(135deg,#eaf7ff,#e8fff8)!important;
  color:#0f5db8!important;
  border:1px solid #e5eef7!important;
}

.mpp-cover span{
  background:#ffffff!important;
  color:#0f5db8!important;
  border:1px solid #cfe7ff!important;
}

.mpp-body h3,
.service-card h3,
.news-card h3{
  color:#1f2937!important;
}

.mpp-body button{
  background:linear-gradient(90deg,#0f5db8,#00b894)!important;
}

.news-card span{
  color:#0f5db8!important;
}

.gallery-grid div{
  box-shadow:0 16px 40px rgba(15,93,184,.10)!important;
}

.cta-premium{
  background:linear-gradient(135deg,#ffffff,#f1f8ff)!important;
}

.footer-premium{
  border-top:1px solid #e5eef7!important;
}

.mpp-modal{
  background:rgba(15,23,42,.38)!important;
}

.mpp-modal-box{
  background:#ffffff!important;
  border:1px solid #e5eef7!important;
  box-shadow:0 28px 80px rgba(15,23,42,.25)!important;
}

.modal-content h2{
  color:#1f2937!important;
}

.modal-content p,
.modal-list span{
  color:#4b5563!important;
}

.modal-list div{
  background:#f8fafc!important;
  border:1px solid #e5eef7!important;
}

.modal-list b{
  color:#0f5db8!important;
}

.modal-photo{
  background:linear-gradient(135deg,#eaf7ff,#e8fff8)!important;
}

.big-placeholder{
  color:#0f5db8!important;
}

.reveal{
  transition:.75s cubic-bezier(.2,.8,.2,1)!important;
}

/* refined elegant hover */
.service-card:hover,
.news-card:hover,
.mpp-premium-card:hover,
.stat-box:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 24px 60px rgba(15,93,184,.16)!important;
}

/* mobile clean */
@media(max-width:960px){
  .portal-navbar{
    top:8px!important;
    width:calc(100% - 18px)!important;
  }
  .hero-copy h1{
    font-size:64px!important;
  }
}

@media(max-width:560px){
  .hero-copy h1{
    font-size:48px!important;
  }
}

/* V19 Admin, Login, Batik Bangka */
:root{--bpom-blue:#0f5db8;--bpom-green:#00b894;--ink:#1f2937;--muted:#64748b;--line:#e5eef7}
.login-batik{background:radial-gradient(circle at 10% 10%,rgba(15,93,184,.18),transparent 32%),radial-gradient(circle at 90% 20%,rgba(0,184,148,.18),transparent 30%),linear-gradient(135deg,#f7fbff,#fff 48%,#eefaf6)!important;position:relative;overflow:hidden}
.login-batik:before,.admin-batik:before,.tamu-premium:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(circle at 12px 12px,rgba(15,93,184,.38) 2px,transparent 3px),radial-gradient(circle at 42px 42px,rgba(0,184,148,.34) 2px,transparent 3px),linear-gradient(45deg,transparent 45%,rgba(15,93,184,.18) 46%,rgba(15,93,184,.18) 48%,transparent 49%),linear-gradient(-45deg,transparent 45%,rgba(0,184,148,.18) 46%,rgba(0,184,148,.18) 48%,transparent 49%);background-size:54px 54px,54px 54px,72px 72px,72px 72px;z-index:0}
.login-decor{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(30px);opacity:.25}.decor-1{left:-90px;top:-90px;background:#0f5db8}.decor-2{right:-70px;bottom:-80px;background:#00b894}
.login-premium{position:relative;z-index:1;width:min(460px,92vw)!important;border-radius:34px!important;padding:34px!important;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(18px);border:1px solid rgba(229,238,247,.9);box-shadow:0 32px 90px rgba(15,93,184,.18)!important}
.login-logo{width:70px;height:70px;border-radius:24px;display:grid;place-items:center;color:white;font-weight:1000;font-size:24px;background:linear-gradient(135deg,var(--bpom-blue),var(--bpom-green));box-shadow:0 18px 40px rgba(15,93,184,.22);margin-bottom:18px}
.login-heading span{display:inline-block;background:#eaf7ff;color:var(--bpom-blue);padding:8px 13px;border-radius:999px;font-size:12px;font-weight:1000;letter-spacing:.8px}.login-heading h1{margin:14px 0 6px!important;font-size:38px!important;background:linear-gradient(90deg,var(--bpom-blue),var(--bpom-green));-webkit-background-clip:text;color:transparent}.login-heading p{margin:0 0 22px;color:var(--muted);font-weight:800}
.login-premium label{color:var(--ink)!important;font-weight:900;margin-bottom:14px}.input-icon{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #d9e7f5;border-radius:17px;padding:0 14px;margin-top:8px}.input-icon input{border:0!important;background:transparent!important;margin:0!important;padding:15px 0!important;box-shadow:none!important}.input-icon span{font-size:18px}.login-premium button{background:linear-gradient(90deg,var(--bpom-blue),var(--bpom-green))!important;border-radius:17px!important;box-shadow:0 18px 36px rgba(15,93,184,.20)!important;font-size:16px}.back-home{display:block;text-align:center;color:var(--bpom-blue)!important;font-weight:900}
.admin-batik{position:relative;background:linear-gradient(135deg,#f7fbff,#fff 45%,#f3fbf8)!important}.admin-batik>aside,.admin-batik>main{position:relative;z-index:1}.admin-body aside{background:linear-gradient(180deg,#082a5a,#064541)!important;box-shadow:18px 0 45px rgba(15,93,184,.16)}.admin-body aside h2{letter-spacing:1px;background:linear-gradient(90deg,#fff,#bfffee);-webkit-background-clip:text;color:transparent!important}.admin-body aside a{border:1px solid rgba(255,255,255,.08);transition:.2s}.admin-body aside a:hover{background:rgba(255,255,255,.14)!important;transform:translateX(4px)}.admin-body main{background:transparent!important}
.admin-page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.admin-page-head span{display:inline-block;background:#eaf7ff;color:var(--bpom-blue);padding:8px 13px;border-radius:999px;font-size:12px;font-weight:1000}.admin-page-head h1{margin:8px 0 0;font-size:34px;color:var(--ink)}.admin-add{background:linear-gradient(90deg,var(--bpom-blue),var(--bpom-green));color:#fff!important;padding:13px 18px;border-radius:16px;font-weight:1000;box-shadow:0 16px 34px rgba(15,93,184,.18)}
.admin-form,.tablewrap,.dashcards div{border:1px solid var(--line);box-shadow:0 18px 45px rgba(15,93,184,.09)!important}.admin-form button{background:linear-gradient(90deg,var(--bpom-blue),var(--bpom-green))!important}.modern-table table th,.tablewrap table th{background:#f1f7ff;color:#0f3768;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.tablewrap table tr:hover td{background:#fbfdff}.badge-role{display:inline-block;padding:7px 11px;border-radius:999px;background:#e8fff8;color:#008a70;font-weight:1000}.actions{white-space:nowrap}.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;margin-right:5px;text-decoration:none!important;font-size:16px;border:1px solid var(--line)}.icon-btn.edit{background:#eaf7ff}.icon-btn.delete{background:#fff1f1}.icon-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,93,184,.13)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tamu-premium:after{z-index:-1;opacity:.10}.tamu-premium{background:radial-gradient(circle at 10% 5%,rgba(15,93,184,.16),transparent 28%),radial-gradient(circle at 90% 12%,rgba(0,184,148,.15),transparent 30%),linear-gradient(135deg,#031126,#052849 55%,#07453f)!important}
@media(max-width:760px){.admin-body{display:block!important}.admin-body aside{width:100%!important;min-height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.admin-body aside h2{grid-column:1/-1}.admin-grid{grid-template-columns:1fr}.admin-page-head{flex-direction:column;align-items:flex-start}}


/* ==================================================
   V20 - BATIK VISIBLE + WHITE ELEGANT TAMU & LANDING
   ================================================== */

/* batik pattern layer - more visible but still elegant */
.portal-v17::before,
.tamu-premium::before,
.login-batik::before,
.admin-batik::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:-1!important;
  opacity:.18!important;
  background-image:
    radial-gradient(circle at 16px 16px, rgba(15,93,184,.42) 2px, transparent 3px),
    radial-gradient(circle at 46px 46px, rgba(0,184,148,.42) 2px, transparent 3px),
    linear-gradient(45deg, transparent 43%, rgba(15,93,184,.22) 44%, rgba(15,93,184,.22) 47%, transparent 48%),
    linear-gradient(-45deg, transparent 43%, rgba(0,184,148,.22) 44%, rgba(0,184,148,.22) 47%, transparent 48%);
  background-size:64px 64px,64px 64px,88px 88px,88px 88px!important;
}

/* Landing forced white elegant with visible Bangka-batik feel */
.portal-v17{
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,252,255,.96)),
    radial-gradient(circle at 10% 10%,rgba(15,93,184,.12),transparent 30%),
    radial-gradient(circle at 90% 18%,rgba(0,184,148,.10),transparent 30%)!important;
  color:#1f2937!important;
}
.portal-bg{
  background:
    linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%)!important;
}
.portal-bg:before{
  opacity:.65!important;
  background-image:
    linear-gradient(rgba(15,93,184,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,93,184,.05) 1px,transparent 1px)!important;
}
.portal-bg span{display:none!important}

/* Book tamu forced white elegant */
.tamu-premium{
  background:
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(245,249,252,.97)),
    radial-gradient(circle at 10% 7%,rgba(15,93,184,.10),transparent 28%),
    radial-gradient(circle at 92% 10%,rgba(0,184,148,.10),transparent 28%)!important;
  color:#1f2937!important;
}
.tamu-premium::after{
  display:none!important;
}

/* white card look for buku tamu */
.tamu-head .brand b,
.tamu-head .brand span,
.title-zone h1,
.title-zone p,
.panel h2,
.panel-title p,
label{
  color:#1f2937!important;
}
.title-zone h1{
  background:linear-gradient(90deg,#0f5db8,#00a884)!important;
  -webkit-background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
}
.title-zone .badge,
.badge{
  background:#eaf7ff!important;
  color:#0f5db8!important;
  border:1px solid #cfe7ff!important;
}
.tamu-head .logo{
  background:linear-gradient(135deg,#0f5db8,#00b894)!important;
  color:#fff!important;
}
.clock3d{
  background:#ffffff!important;
  border:1px solid #d7e8f6!important;
  box-shadow:0 14px 34px rgba(15,93,184,.12)!important;
}
.clock3d b{
  color:#0f5db8!important;
  text-shadow:none!important;
}
.clock3d span,
.clock3d small{
  color:#64748b!important;
}
.panel{
  background:rgba(255,255,255,.92)!important;
  border:1px solid #dceaf6!important;
  box-shadow:0 18px 48px rgba(15,93,184,.12)!important;
  backdrop-filter:blur(12px)!important;
}
.panel-title span{
  background:#e8fff8!important;
  color:#008a70!important;
}
input,select,textarea{
  background:#f8fafc!important;
  color:#1f2937!important;
  border:1px solid #d7e8f6!important;
}
input::placeholder,
textarea::placeholder{
  color:#8a98a8!important;
}
.camera-frame{
  background:#f6fbff!important;
  border:2px solid #0fbaae!important;
  box-shadow:inset 0 0 45px rgba(15,93,184,.08)!important;
}
.camera-panel h2{
  color:#1f2937!important;
}
.photo-btn{
  background:linear-gradient(135deg,#0f5db8,#19d4ff,#00b894)!important;
  box-shadow:0 18px 42px rgba(15,93,184,.22)!important;
}
.submit{
  background:linear-gradient(90deg,#0f5db8,#00b894)!important;
  box-shadow:0 16px 36px rgba(15,93,184,.18)!important;
}
.running{
  background:#ffffff!important;
  border:1px solid #d7e8f6!important;
  box-shadow:0 12px 32px rgba(15,93,184,.12)!important;
}
.running b{
  background:linear-gradient(90deg,#0f5db8,#00b894)!important;
}
.running marquee{
  color:#1f2937!important;
}

/* Bigger visible batik ornaments on sides */
.portal-v17::after,
.tamu-premium .bg3d::after{
  content:"";
  position:fixed;
  right:-90px;
  top:120px;
  width:280px;
  height:280px;
  border-radius:42% 58% 50% 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(15,93,184,.10) 29%, rgba(15,93,184,.10) 33%, transparent 34%),
    repeating-conic-gradient(from 45deg, rgba(0,184,148,.10) 0 12deg, transparent 12deg 24deg);
  z-index:-1;
  opacity:.8;
}
.portal-navbar,
.land-nav{
  background:rgba(255,255,255,.94)!important;
  border:1px solid #dceaf6!important;
  box-shadow:0 16px 44px rgba(15,93,184,.12)!important;
}
.hero-copy h1,
.land-hero h1{
  background:linear-gradient(90deg,#0f5db8,#00a884)!important;
  -webkit-background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
}
.hero-copy h2,
.hero-copy p,
.portal-brand,
.portal-navbar nav a{
  color:#1f2937!important;
}
.screen-card,
.service-card,
.stat-box,
.news-card,
.mpp-premium-card,
.bangka-map,
.cta-premium{
  background:rgba(255,255,255,.92)!important;
  border:1px solid #dceaf6!important;
  box-shadow:0 18px 48px rgba(15,93,184,.12)!important;
}
.dashboard-mini,
.modal-list div{
  background:#f8fafc!important;
}
@media(max-width:820px){
  .portal-v17::before,
  .tamu-premium::before{
    opacity:.12!important;
    background-size:54px 54px,54px 54px,74px 74px,74px 74px!important;
  }
}


/* ==================================================
   V21 - FIX BUKU TAMU BACKGROUND FULL WHITE
   ================================================== */

body.tamu-premium,
.tamu-premium{
  background:
    linear-gradient(180deg,#ffffff 0%,#f7fafc 100%) !important;
  color:#1f2937 !important;
}

/* Matikan background gelap lama */
.tamu-premium .bg3d,
.bg3d{
  display:none !important;
}

/* Motif batik sangat halus, tetap putih elegan */
body.tamu-premium::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.055 !important;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(15,93,184,.45) 2px, transparent 3px),
    radial-gradient(circle at 44px 44px, rgba(0,184,148,.40) 2px, transparent 3px),
    linear-gradient(45deg, transparent 44%, rgba(15,93,184,.25) 45%, rgba(15,93,184,.25) 47%, transparent 48%),
    linear-gradient(-45deg, transparent 44%, rgba(0,184,148,.22) 45%, rgba(0,184,148,.22) 47%, transparent 48%);
  background-size:72px 72px,72px 72px,96px 96px,96px 96px !important;
}

/* Pastikan konten di atas motif */
.tamu-wrap,
.running,
.modal{
  position:relative !important;
  z-index:1 !important;
}

/* Header dan judul lebih terbaca di background putih */
.tamu-head .brand b,
.tamu-head .brand span,
.title-zone p{
  color:#334155 !important;
  text-shadow:none !important;
}

.title-zone h1{
  background:linear-gradient(90deg,#0f5db8,#00a884) !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* Kartu form dan kamera putih elegan */
.panel{
  background:rgba(255,255,255,.96) !important;
  border:1px solid #dceaf6 !important;
  box-shadow:0 18px 48px rgba(15,93,184,.12) !important;
}

.camera-panel,
.form-panel{
  background:rgba(255,255,255,.96) !important;
}

/* Input terang */
input,select,textarea{
  background:#f8fafc !important;
  color:#1f2937 !important;
  border:1px solid #d7e8f6 !important;
}

label,
.panel h2,
.camera-panel h2,
.panel-title p{
  color:#1f2937 !important;
}

/* Running text putih */
.running{
  background:#ffffff !important;
  border:1px solid #d7e8f6 !important;
  box-shadow:0 12px 32px rgba(15,93,184,.12) !important;
}

.running marquee{
  color:#1f2937 !important;
}

/* Hilangkan ornamen gelap tambahan */
.tamu-premium::after,
.tamu-premium .bg3d::after{
  display:none !important;
}


/* ==================================================
   V22 - HEADER BIRU + NAVBAR BORDER TEGAS
   ================================================== */

/* ===== BUKU TAMU: header biru seperti AKU KAMU ===== */
body.tamu-premium,
.tamu-premium{
  background:#f7fafc !important;
  color:#1f2937 !important;
}

.tamu-premium .bg3d,
.bg3d{
  display:none !important;
}

.tamu-wrap{
  max-width:1280px !important;
  padding-top:14px !important;
}

/* Header biru penuh */
.tamu-head{
  background:linear-gradient(90deg,#2788c8 0%,#45a9db 55%,#5bbbe7 100%) !important;
  border:2px solid #2477ae !important;
  border-radius:22px !important;
  padding:18px 26px !important;
  box-shadow:0 12px 32px rgba(36,119,174,.22) !important;
  margin-bottom:36px !important;
}

.tamu-head .brand b,
.tamu-head .brand span{
  color:#ffffff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.20) !important;
}

.tamu-head .brand b{
  font-size:22px !important;
  letter-spacing:.5px !important;
}

.tamu-head .brand span{
  font-size:13px !important;
  font-weight:900 !important;
}

.tamu-head .logo{
  width:62px !important;
  height:62px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.18) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
}

/* Jam digital dalam card */
.clock3d{
  background:rgba(255,255,255,.20) !important;
  border:1px solid rgba(255,255,255,.45) !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
}

.clock3d b{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.22) !important;
}

.clock3d span,
.clock3d small{
  color:#ffffff !important;
  font-weight:1000 !important;
}

/* Judul buku tamu tetap elegan putih background */
.title-zone{
  margin-top:12px !important;
}

.title-zone h1{
  background:linear-gradient(90deg,#0f5db8,#00a884) !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
  text-shadow:none !important;
}

.title-zone p{
  color:#334155 !important;
}

.title-zone .badge{
  background:#eaf7ff !important;
  color:#0f5db8 !important;
  border:1px solid #cfe7ff !important;
}

/* Card tetap putih */
.panel,
.form-panel,
.camera-panel{
  background:#ffffff !important;
  border:1px solid #dceaf6 !important;
  box-shadow:0 18px 48px rgba(15,93,184,.12) !important;
}

.panel h2,
.panel-title p,
.camera-panel h2,
label{
  color:#1f2937 !important;
}

input,select,textarea{
  background:#f8fafc !important;
  color:#1f2937 !important;
  border:1px solid #d7e8f6 !important;
}

input::placeholder,
textarea::placeholder{
  color:#8a98a8 !important;
}

/* Motif batik tipis di halaman buku tamu */
body.tamu-premium::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.05 !important;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(15,93,184,.55) 2px, transparent 3px),
    radial-gradient(circle at 48px 48px, rgba(0,184,148,.45) 2px, transparent 3px),
    linear-gradient(45deg, transparent 44%, rgba(15,93,184,.30) 45%, rgba(15,93,184,.30) 47%, transparent 48%),
    linear-gradient(-45deg, transparent 44%, rgba(0,184,148,.28) 45%, rgba(0,184,148,.28) 47%, transparent 48%);
  background-size:72px 72px,72px 72px,96px 96px,96px 96px !important;
}

.tamu-wrap,
.running,
.modal{
  position:relative !important;
  z-index:1 !important;
}

/* ===== LANDING PAGE: navbar border lebih jelas ===== */
.portal-navbar,
.land-nav{
  background:#ffffff !important;
  border:2px solid #cfe0f2 !important;
  border-bottom:4px solid #0f5db8 !important;
  border-radius:24px !important;
  box-shadow:0 14px 38px rgba(15,93,184,.14) !important;
}

.portal-navbar nav a,
.land-nav nav a{
  border:1px solid transparent !important;
}

.portal-navbar nav a:hover,
.land-nav nav a:hover{
  background:#eef7ff !important;
  border-color:#cfe0f2 !important;
}

.portal-navbar .nav-primary,
.land-nav .nav-cta{
  background:linear-gradient(90deg,#0f5db8,#00b894) !important;
  color:#ffffff !important;
  border:2px solid #0f5db8 !important;
  box-shadow:0 12px 28px rgba(15,93,184,.22) !important;
}

/* Logo/navbar landing lebih tegas */
.brand-mark,
.land-logo{
  background:linear-gradient(135deg,#0f5db8,#00b894) !important;
  color:#ffffff !important;
}

/* Motif batik landing lebih terlihat tapi tetap soft */
.portal-v17::before,
.landing-v15::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
  opacity:.055 !important;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(15,93,184,.55) 2px, transparent 3px),
    radial-gradient(circle at 48px 48px, rgba(0,184,148,.45) 2px, transparent 3px),
    linear-gradient(45deg, transparent 44%, rgba(15,93,184,.30) 45%, rgba(15,93,184,.30) 47%, transparent 48%),
    linear-gradient(-45deg, transparent 44%, rgba(0,184,148,.28) 45%, rgba(0,184,148,.28) 47%, transparent 48%);
  background-size:72px 72px,72px 72px,96px 96px,96px 96px !important;
}

/* Running text */
.running{
  background:#ffffff !important;
  border:2px solid #cfe0f2 !important;
  box-shadow:0 12px 32px rgba(15,93,184,.12) !important;
}

.running b{
  background:linear-gradient(90deg,#0f5db8,#00b894) !important;
}

.running marquee{
  color:#1f2937 !important;
}

@media(max-width:820px){
  .tamu-head{
    padding:14px 16px !important;
    border-radius:18px !important;
  }
  .tamu-head .brand b{
    font-size:16px !important;
  }
  .tamu-head .brand span{
    font-size:10px !important;
  }
  .tamu-head .logo{
    width:48px !important;
    height:48px !important;
  }
  .clock3d{
    min-width:112px !important;
  }
}

/* V23 Admin Revamp */
.admin-clean{background:#f6f9fc!important;color:#102033}.admin-sidebar{width:280px!important;background:linear-gradient(180deg,#0f5db8,#0b7b83)!important;color:#fff!important;padding:24px!important;box-shadow:18px 0 45px rgba(15,93,184,.16);position:fixed;left:0;top:0;bottom:0;overflow:auto}.side-brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.side-logo{width:52px;height:52px;border-radius:18px;background:#fff;color:#0f5db8;display:grid;place-items:center;font-weight:1000}.side-brand b{display:block;font-size:22px}.side-brand span{font-size:12px;opacity:.85}.admin-sidebar nav{display:grid;gap:10px}.side-link,.side-group summary,.side-group a{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:16px;color:#fff!important;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);font-weight:900;cursor:pointer}.side-group{border:0}.side-group summary{list-style:none}.side-group a{margin:8px 0 0 28px;background:rgba(255,255,255,.07);font-size:14px}.side-link:hover,.side-group summary:hover,.side-group a:hover{background:rgba(255,255,255,.18);transform:translateX(3px)}.logout{background:rgba(255,80,80,.18)!important}.admin-main{margin-left:280px!important;padding:34px!important;min-height:100vh}.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-topbar span{display:inline-block;background:#eaf7ff;color:#0f5db8;border-radius:999px;padding:8px 13px;font-weight:1000;font-size:12px}.admin-topbar h1{margin:9px 0 4px;font-size:34px}.admin-topbar p{margin:0;color:#64748b}.admin-visit,.admin-add{background:linear-gradient(90deg,#0f5db8,#00b894);color:#fff!important;border-radius:16px;padding:13px 18px;font-weight:1000;box-shadow:0 15px 35px rgba(15,93,184,.18)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}.stat-card{background:#fff;border:1px solid #dceaf6;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(15,93,184,.09)}.stat-card span{font-size:32px}.stat-card b{display:block;font-size:42px;margin:10px 0 4px;color:#0f5db8}.stat-card p{margin:0;color:#64748b;font-weight:900}.admin-grid-2{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.admin-card{background:#fff;border:1px solid #dceaf6;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(15,93,184,.09);margin-bottom:20px}.fake-chart{height:210px;display:flex;align-items:end;gap:12px;background:#f8fafc;border-radius:18px;padding:18px}.fake-chart i{flex:1;background:linear-gradient(#00b894,#0f5db8);border-radius:12px 12px 0 0}.info-list{display:grid;gap:12px}.info-list div{background:#f8fafc;border-radius:16px;padding:14px}.table-responsive{overflow:auto}.admin-table{width:100%;border-collapse:separate;border-spacing:0}.admin-table th{background:#eef6ff;color:#0f3768;text-transform:uppercase;font-size:12px;letter-spacing:.5px;padding:14px;text-align:left}.admin-table td{padding:14px;border-bottom:1px solid #eef2f7}.admin-table tr:hover td{background:#fbfdff}.filter-bar{display:grid;grid-template-columns:1fr 220px 110px auto auto;gap:10px;margin-bottom:16px}.filter-bar input,.filter-bar select,.admin-form input,.admin-form select,.admin-form textarea,.admin-form-inline input,.admin-form-inline select,.admin-form-inline textarea{background:#f8fafc!important;color:#1f2937!important;border:1px solid #d7e8f6!important;border-radius:14px!important;padding:12px!important}.filter-bar button,.admin-form button,.admin-form-inline button{background:linear-gradient(90deg,#0f5db8,#00b894);border:0;border-radius:14px;color:#fff;font-weight:1000;padding:12px 16px}.pagination{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.pagination a{padding:9px 13px;border-radius:12px;background:#eef6ff;color:#0f5db8;font-weight:900}.pagination a.active{background:#0f5db8;color:#fff}.actions{white-space:nowrap}.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-right:6px;text-decoration:none!important;border:1px solid #dceaf6}.icon-btn.edit{background:#eaf7ff}.icon-btn.delete{background:#fff1f1}.badge-role{background:#e8fff8;color:#008a70;border-radius:999px;padding:7px 11px;font-weight:1000}.admin-actions-top{margin-bottom:16px}.admin-form-wide{max-width:980px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-preview{width:230px;height:140px;object-fit:cover;border-radius:16px}.admin-form-inline{display:grid;grid-template-columns:160px 1fr 140px;gap:12px}.admin-form-inline textarea{grid-column:1/-1;min-height:100px}.admin-form-inline button{width:max-content}.cancel{display:inline-block;margin-left:12px;color:#0f5db8!important;font-weight:900}
@media(max-width:900px){.admin-sidebar{position:relative;width:100%!important}.admin-main{margin-left:0!important;padding:18px!important}.stat-grid,.admin-grid-2{grid-template-columns:1fr}.filter-bar,.admin-grid,.admin-form-inline{grid-template-columns:1fr}.admin-topbar{display:block}.admin-visit{display:inline-block;margin-top:12px}}
@media print{.admin-sidebar,.admin-topbar,.filter-bar,.pagination,.actions{display:none!important}.admin-main{margin:0!important;padding:0!important}.admin-card{box-shadow:none;border:0}.admin-table th,.admin-table td{font-size:11px;padding:8px}}

/* V24 CMS Landing Content */
.news-img img,.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.gallery-grid div{overflow:hidden}
.admin-form h2,.admin-card h2{margin-top:0;color:#1f2937}
.filter-bar:has(select:only-child){grid-template-columns:260px auto}

/* V25 editable existing landing content */
.admin-section-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 18px}
.admin-section-tabs a{padding:10px 14px;border-radius:999px;background:#ffffff;border:1px solid #dceaf6;color:#0f5db8!important;font-weight:1000;box-shadow:0 8px 20px rgba(15,93,184,.08)}
.admin-section-tabs a:hover{background:#eaf7ff}


/* V26 Peta Pulau Bangka Interaktif */
.bangka-map{
  padding:24px !important;
  align-content:start !important;
}
.bangka-map-title{
  text-align:center;
  margin-bottom:18px;
}
.bangka-map-title b{
  display:block;
  font-size:24px;
  color:#1f2937;
}
.bangka-map-title span{
  display:block;
  color:#64748b;
  margin-top:4px;
  font-weight:800;
}
.bangka-real-map{
  min-height:520px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%,rgba(15,93,184,.06),transparent 30%),
    linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid #dceaf6;
  border-radius:28px;
  overflow:hidden;
  position:relative;
}
.bangka-real-map:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,93,184,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,93,184,.035) 1px,transparent 1px);
  background-size:34px 34px;
}
.bangka-shape{
  width:330px;
  height:470px;
  position:relative;
  filter:drop-shadow(0 22px 32px rgba(15,93,184,.18));
}
.bangka-shape:before{
  content:"";
  position:absolute;
  inset:20px 30px 28px 36px;
  background:linear-gradient(155deg,#dff7ff,#c8f7e8 58%,#e9fff8);
  border:2px solid #bfe6f4;
  clip-path:polygon(
    48% 1%, 62% 6%, 72% 16%, 76% 28%, 84% 40%, 77% 52%,
    86% 66%, 74% 78%, 67% 96%, 52% 90%, 43% 76%, 29% 69%,
    19% 53%, 23% 36%, 17% 22%, 28% 9%
  );
}
.bangka-shape:after{
  content:"";
  position:absolute;
  right:52px;
  top:64px;
  width:56px;
  height:70px;
  background:#bff1e4;
  border:2px solid #9ddbcc;
  border-radius:50% 45% 55% 40%;
  opacity:.9;
  transform:rotate(-18deg);
}
.area{
  position:absolute;
  opacity:.42;
  pointer-events:none;
}
.area-utara{
  left:129px; top:38px; width:95px; height:120px;
  background:#0f5db8;
  clip-path:polygon(30% 0,70% 8%,100% 45%,74% 100%,25% 92%,0 38%);
}
.area-barat{
  left:71px; top:110px; width:110px; height:185px;
  background:#00b894;
  clip-path:polygon(35% 0,88% 22%,80% 82%,30% 100%,0 55%);
}
.area-tengah{
  left:145px; top:170px; width:105px; height:145px;
  background:#20c5ee;
  clip-path:polygon(20% 0,80% 10%,100% 62%,50% 100%,0 58%);
}
.area-selatan{
  left:140px; top:292px; width:110px; height:145px;
  background:#7dd3fc;
  clip-path:polygon(5% 0,74% 10%,100% 44%,62% 100%,18% 76%);
}
.area-pangkalpinang{
  left:214px; top:219px; width:34px; height:34px;
  background:#f59e0b;
  border-radius:50%;
  opacity:.8;
}
.map-pin{
  position:absolute;
  z-index:4;
  border:0;
  background:#ffffff;
  color:#0f5db8;
  border-radius:999px;
  padding:9px 12px 9px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:1000;
  font-size:12px;
  box-shadow:0 12px 26px rgba(15,93,184,.18);
  cursor:pointer;
  transition:.2s;
  border:1px solid #cfe0f2;
}
.map-pin i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,#0f5db8,#00b894);
  box-shadow:0 0 0 5px rgba(15,93,184,.12);
}
.map-pin:hover{
  transform:translateY(-4px) scale(1.04);
  background:#eaf7ff;
}
.pin-bangka{left:142px; top:95px}
.pin-bangkabarat{left:42px; top:210px}
.pin-pangkalpinang{right:28px; top:236px}
.pin-bangkatengah{left:142px; top:275px}
.pin-bangkaselatan{left:140px; bottom:36px}
.map-note{
  margin-top:14px;
  background:#f8fafc;
  border:1px solid #dceaf6;
  color:#475569;
  border-radius:18px;
  padding:12px 14px;
  font-size:13px;
  text-align:center;
}
.map-note b{
  color:#0f5db8;
}
@media(max-width:680px){
  .bangka-real-map{min-height:430px}
  .bangka-shape{transform:scale(.82)}
}


/* V27 - Peta Wilayah Pulau Bangka sesuai kab/kota */
.bangka-map-card{
  background:#ffffff !important;
  border:1px solid #dceaf6 !important;
  box-shadow:0 18px 48px rgba(15,93,184,.12) !important;
}
.bangka-image-map{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:#ffffff;
  border:1px solid #dceaf6;
  border-radius:28px;
  overflow:hidden;
  box-shadow:inset 0 0 40px rgba(15,93,184,.05);
}
.bangka-image-map img{
  width:100%;
  display:block;
  height:auto;
  object-fit:contain;
}
.map-hotspot{
  position:absolute;
  z-index:6;
  border:0;
  background:rgba(255,255,255,.94);
  color:#1f2937;
  border-radius:999px;
  padding:7px 11px;
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.18);
  border:2px solid #ffffff;
  transition:.2s ease;
  white-space:nowrap;
}
.map-hotspot:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#0f5db8;
  box-shadow:0 0 0 5px rgba(15,93,184,.12);
}
.map-hotspot span{
  display:block;
  line-height:1;
  font-size:12px;
}
.map-hotspot small{
  display:none;
  color:#64748b;
  font-size:10px;
}
.map-hotspot:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 14px 28px rgba(15,23,42,.24);
}
.pin-bangkabarat{
  left:5.5%;
  top:33.5%;
  border-color:#86368f;
}
.pin-bangkabarat:before{background:#86368f}
.pin-bangka{
  left:47%;
  top:27%;
  border-color:#ef4774;
}
.pin-bangka:before{background:#ef4774}
.pin-pangkalpinang{
  left:62%;
  top:44%;
  border-color:#344fb5;
}
.pin-pangkalpinang:before{background:#344fb5}
.pin-bangkatengah{
  left:61%;
  top:57%;
  border-color:#ffc21a;
}
.pin-bangkatengah:before{background:#ffc21a}
.pin-bangkaselatan{
  left:72%;
  top:82%;
  border-color:#08b88a;
}
.pin-bangkaselatan:before{background:#08b88a}
.map-legend{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
  margin:14px 0 0;
}
.map-legend div{
  display:flex;
  gap:7px;
  align-items:center;
  background:#f8fafc;
  border:1px solid #dceaf6;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  color:#334155;
  font-weight:900;
}
.map-legend i{
  width:12px;
  height:12px;
  border-radius:50%;
}
.lg-barat{background:#86368f}.lg-bangka{background:#ef4774}.lg-pangkal{background:#344fb5}.lg-tengah{background:#ffc21a}.lg-selatan{background:#08b88a}
.bangka-real-map,.bangka-shape,.map-island{
  display:none !important;
}
@media(max-width:680px){
  .bangka-image-map{
    max-width:100%;
    border-radius:20px;
  }
  .map-hotspot{
    padding:6px 8px;
  }
  .map-hotspot span{
    font-size:10px;
  }
}


/* V28 - Urutan menu: Beranda, Jaringan MPP, Isi Buku Tamu */
.portal-navbar nav{
  gap:6px !important;
}
.portal-navbar nav a{
  padding:11px 12px !important;
}
.portal-navbar .nav-primary{
  order:0;
}
.map-section{
  margin-top:34px !important;
}
.hero-premium{
  margin-bottom:28px !important;
}
@media(max-width:1100px){
  .portal-navbar nav a{
    font-size:13px !important;
    padding:10px 9px !important;
  }
}

/* V29 - Hero slideshow dan hapus catatan peta */
.map-note{display:none !important}
.hero-slider{position:relative;min-height:430px;border-radius:38px;background:#fff;border:1px solid #dceaf6;box-shadow:0 30px 80px rgba(15,93,184,.13);overflow:hidden;padding:28px}
.hero-slider:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 15%,rgba(15,93,184,.10),transparent 30%),radial-gradient(circle at 85% 20%,rgba(0,184,148,.10),transparent 28%);pointer-events:none}
.hero-slider .slide{position:absolute;inset:28px;opacity:0;transform:translateX(24px) scale(.98);transition:.55s ease;display:grid;grid-template-rows:1fr auto;gap:18px;pointer-events:none}
.hero-slider .slide.active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
.slide-art{position:relative;min-height:250px;border-radius:30px;background:linear-gradient(135deg,#f3f9ff,#e9fff8);border:1px solid #dceaf6;display:grid;place-items:center;overflow:hidden}
.slide-art:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:conic-gradient(from 90deg,#0f5db8,#00b894,#7dd3fc,#0f5db8);opacity:.11;animation:spin 14s linear infinite}
.slide-icon{position:relative;z-index:1;width:110px;height:110px;border-radius:32px;background:#fff;display:grid;place-items:center;font-size:58px;box-shadow:0 18px 45px rgba(15,93,184,.14)}
.slide-chart{position:absolute;right:42px;bottom:36px;height:125px;display:flex;align-items:end;gap:12px}
.slide-chart i{width:22px;border-radius:12px 12px 0 0;background:linear-gradient(#00b894,#0f5db8);box-shadow:0 12px 26px rgba(15,93,184,.12)}
.slide-card-mini{position:absolute;left:34px;top:34px;background:#fff;border:1px solid #dceaf6;border-radius:18px;padding:13px 18px;color:#0f5db8;font-weight:1000;box-shadow:0 12px 30px rgba(15,93,184,.12)}
.slide-donut{position:relative;z-index:1;width:150px;height:150px;border-radius:50%;background:conic-gradient(#0f5db8 70%,#dceaf6 0);display:grid;place-items:center;font-size:54px;font-weight:1000;color:#0f5db8;box-shadow:0 18px 50px rgba(15,93,184,.12)}
.slide-donut small{display:block;font-size:13px;color:#64748b;margin-top:-26px}
.slide-caption{position:relative;z-index:2;background:#fff;border:1px solid #dceaf6;border-radius:24px;padding:18px 20px;box-shadow:0 16px 38px rgba(15,93,184,.10)}
.slide-caption b{display:block;font-size:22px;color:#1f2937;margin-bottom:8px}
.slide-caption p{margin:0;color:#475569;line-height:1.55}
.slide-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.slide-dots button{width:11px;height:11px;border:0;border-radius:999px;background:#c7d8ea;cursor:pointer;transition:.2s}
.slide-dots button.active{width:32px;background:linear-gradient(90deg,#0f5db8,#00b894)}
@media(max-width:720px){.hero-slider{min-height:390px;padding:20px}.hero-slider .slide{inset:20px}.slide-art{min-height:215px}.slide-chart{display:none}}


/* V32 - Slideshow editable + admin user clean */
.login-icon-nav{
  min-width:48px;
  text-align:center;
  font-size:19px !important;
  padding:10px 13px !important;
  border-radius:16px !important;
  background:#eef7ff !important;
  border:1px solid #cfe0f2 !important;
}
.login-icon-nav:hover{
  background:#e8fff8 !important;
  transform:translateY(-2px);
}
.slide-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:30px;
  position:relative;
  z-index:1;
}
.hero-slider .slide-art:has(.slide-photo)::before{
  display:none;
}
.admin-actions-top{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}
.admin-table .actions{
  display:flex;
  gap:8px;
}
.admin-card .admin-form{
  margin:0;
}
@media(max-width:900px){
  .admin-actions-top{
    justify-content:flex-start;
  }
}

/* V33 - Upload Logo SIDULANG */
.logo-brand{overflow:hidden!important;display:grid!important;place-items:center!important;background:#fff!important}
.app-logo-img,.logo-brand img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;border-radius:inherit!important}
.brand-mark.logo-brand{padding:4px!important}
.side-logo.logo-brand{padding:4px!important}
.login-logo.logo-brand{padding:8px!important;background:#fff!important}
.tamu-head .logo.logo-brand{padding:4px!important;background:#fff!important}
.logo-setting-preview{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(135deg,#f8fafc,#eaf7ff);border:1px solid #dceaf6;border-radius:22px;padding:18px;margin-bottom:18px}
.logo-setting-preview b{display:block;font-size:18px;color:#1f2937}
.logo-setting-preview p{margin:6px 0 0;color:#64748b}
.logo-preview-box{width:150px;height:150px;border-radius:28px;background:#fff;border:1px solid #dceaf6;box-shadow:0 16px 38px rgba(15,93,184,.12);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.logo-preview-box img{width:100%;height:100%;object-fit:contain;padding:10px}
.logo-preview-box span{font-size:36px;color:#0f5db8;font-weight:1000}
@media(max-width:700px){.logo-setting-preview{flex-direction:column;align-items:flex-start}}

/* V34 - Layanan SIDULANG dengan gambar */
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.service-image-card{padding:0 !important;overflow:hidden !important;background:#fff !important;border:1px solid #dceaf6 !important;box-shadow:0 18px 45px rgba(15,93,184,.10) !important}
.service-image{width:100%;aspect-ratio:16/9;background:#eaf7ff;overflow:hidden}
.service-image img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s ease}
.service-image-card:hover .service-image img{transform:scale(1.045)}
.service-text{padding:18px 20px 22px}
.service-text h3{margin:0 0 8px;color:#1f2937;line-height:1.22;font-size:19px}
.service-text p{margin:0;color:#475569;line-height:1.55}
.service-icon{width:74px;height:74px;border-radius:24px;margin:24px 0 0 24px;display:grid;place-items:center;font-size:34px;background:#eaf7ff}
@media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:640px){.service-grid{grid-template-columns:1fr !important}}


/* V35 - Fix kartu layanan landscape penuh dan teks tidak kepotong */
#layanan{
  scroll-margin-top:130px;
}
#layanan .service-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:28px !important;
  align-items:stretch !important;
}
#layanan .service-card.service-image-card{
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:#ffffff !important;
}
#layanan .service-card.service-image-card > div.service-image{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:#eef7ff !important;
  display:block !important;
  overflow:hidden !important;
}
#layanan .service-card.service-image-card > div.service-image img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}
#layanan .service-card.service-image-card > div.service-text{
  display:block !important;
  padding:18px 20px 22px !important;
  min-height:120px !important;
  height:auto !important;
  overflow:visible !important;
}
#layanan .service-card.service-image-card h3{
  display:block !important;
  font-size:20px !important;
  line-height:1.25 !important;
  margin:0 0 8px !important;
  color:#1f2937 !important;
  overflow:visible !important;
  white-space:normal !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
}
#layanan .service-card.service-image-card p{
  display:block !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:#475569 !important;
  margin:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
}
@media(max-width:1100px){
  #layanan .service-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:680px){
  #layanan .service-grid{grid-template-columns:1fr !important}
  #layanan .service-card.service-image-card > div.service-text{min-height:auto !important}
}


/* V36 - Fix total kolom teks layanan agar tidak sempit/kepotong */
#layanan .service-card.service-image-card,
#layanan article.service-card.service-image-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
}

#layanan .service-card.service-image-card .service-image{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:0 !important;
  border-radius:0 !important;
  transform:none !important;
}

#layanan .service-card.service-image-card .service-image img{
  position:static !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
}

#layanan .service-card.service-image-card .service-text{
  position:static !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  flex:1 1 auto !important;
  box-sizing:border-box !important;
  padding:18px 22px 24px !important;
  margin:0 !important;
  background:#ffffff !important;
  border-radius:0 !important;
  overflow:visible !important;
  transform:none !important;
  clip-path:none !important;
}

#layanan .service-card.service-image-card .service-text::before,
#layanan .service-card.service-image-card .service-text::after{
  display:none !important;
  content:none !important;
}

#layanan .service-card.service-image-card .service-text h3,
#layanan .service-card.service-image-card h3{
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 0 10px !important;
  padding:0 !important;
  color:#1f2937 !important;
  font-size:21px !important;
  line-height:1.28 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}

#layanan .service-card.service-image-card .service-text p,
#layanan .service-card.service-image-card p{
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#475569 !important;
  font-size:15.5px !important;
  line-height:1.58 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
}

#layanan .service-card.service-image-card:hover .service-text{
  transform:none !important;
}

#layanan .service-card.service-image-card:hover .service-image img{
  transform:scale(1.035) !important;
}

@media(max-width:680px){
  #layanan .service-card.service-image-card .service-text{
    padding:16px 18px 20px !important;
  }
  #layanan .service-card.service-image-card h3{
    font-size:18px !important;
  }
}


/* V37 - Berita Read More */
.news-card-readmore{
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  min-height:0 !important;
}
.news-card-readmore .news-img{
  flex:0 0 auto !important;
}
.news-card-readmore h3{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-height:82px !important;
}
.news-excerpt{
  display:-webkit-box !important;
  -webkit-line-clamp:4 !important;
  line-clamp:4 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  max-height:104px !important;
}
.readmore-btn{
  margin-top:auto;
  width:max-content;
  border:0;
  border-radius:14px;
  padding:11px 16px;
  background:linear-gradient(90deg,#0f5db8,#00b894);
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(15,93,184,.18);
}
.news-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(10px);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.news-modal.show{display:flex}
.news-modal-box{
  width:min(920px,96vw);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-radius:30px;
  box-shadow:0 30px 90px rgba(15,23,42,.28);
  position:relative;
  border:1px solid #dceaf6;
}
.news-modal-box .close{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#ffffff;
  color:#0f172a;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(15,23,42,.16);
  z-index:2;
}
.news-modal-img{
  width:100%;
  aspect-ratio:16/7;
  background:linear-gradient(135deg,#eaf7ff,#e8fff8);
  overflow:hidden;
  display:grid;
  place-items:center;
  font-size:72px;
}
.news-modal-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-modal-content{padding:28px 34px 36px}
.news-modal-content span{
  display:inline-block;
  color:#0f5db8;
  font-weight:1000;
  margin-bottom:10px;
}
.news-modal-content h2{
  margin:0 0 16px;
  font-size:32px;
  line-height:1.2;
  color:#1f2937;
}
.news-modal-content p{
  color:#475569;
  line-height:1.75;
  font-size:17px;
  white-space:normal;
}
@media(max-width:640px){
  .news-modal-content{padding:22px}
  .news-modal-content h2{font-size:24px}
  .news-modal-img{aspect-ratio:16/10}
}

/* V38 - Buku tamu select layanan, popup sukses, WA settings */
.tamu-premium select,
.tamu-premium option,
select[name="layanan_id"],
select[name="mpp_id"]{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  white-space:normal !important;
  text-overflow:ellipsis !important;
  overflow:hidden !important;
  font-size:15px !important;
  padding-right:38px !important;
}
.tamu-premium .form-grid,
.tamu-premium .admin-grid{
  min-width:0 !important;
}
.success-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(8px);
  z-index:99999;
  display:none;
  place-items:center;
  padding:22px;
}
.success-modal.show{display:grid}
.success-box{
  width:min(430px,94vw);
  background:#fff;
  border-radius:30px;
  padding:34px 28px;
  text-align:center;
  box-shadow:0 32px 90px rgba(15,23,42,.28);
  border:1px solid #dceaf6;
}
.success-check{
  width:86px;
  height:86px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:54px;
  font-weight:1000;
  color:#10b981;
  background:#dcfce7;
}
.success-check.error{
  color:#ef4444;
  background:#fee2e2;
}
.success-box h2{
  margin:0 0 10px;
  color:#1f2937;
}
.success-box p{
  color:#64748b;
  line-height:1.55;
}
.success-box button{
  border:0;
  border-radius:16px;
  padding:13px 22px;
  margin-top:8px;
  color:#fff;
  font-weight:1000;
  background:linear-gradient(90deg,#0f5db8,#00b894);
  cursor:pointer;
}
.help{
  color:#64748b;
  font-size:13px;
  background:#f8fafc;
  padding:12px 14px;
  border-radius:14px;
}

/* V44 dashboard clean + WA status */
.dash-grid-clean{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:22px 0}
.dash-card-clean{background:#fff;border:1px solid #dceaf6;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(15,93,184,.08)}
.dash-card-clean span{font-size:30px;display:block;margin-bottom:12px}
.dash-card-clean b{font-size:42px;color:#0f5db8;line-height:1}
.dash-card-clean p{margin:8px 0 0;color:#64748b;font-weight:900}
.dash-card-clean.primary{background:linear-gradient(135deg,#0f5db8,#00b894);color:#fff}
.dash-card-clean.primary b,.dash-card-clean.primary p{color:#fff}
.dash-two{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.section-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.section-title-row h2{margin:0}
.mini-link{background:#eaf7ff;color:#0f5db8;text-decoration:none;border-radius:14px;padding:9px 13px;font-weight:900}
.admin-table.compact td,.admin-table.compact th{padding:12px 14px}
.wa-badge{display:inline-block;border-radius:999px;padding:6px 10px;background:#e2e8f0;color:#334155;font-weight:900;font-size:12px}
.wa-badge.sent{background:#dcfce7;color:#047857}
.wa-badge.failed{background:#fee2e2;color:#b91c1c}
.wa-badge.disabled{background:#fef3c7;color:#92400e}
.wa-summary{display:grid;gap:12px}
.wa-summary div{background:#f8fafc;border-radius:18px;padding:16px}
.wa-summary b{font-size:32px;color:#0f5db8;display:block}
.wa-summary span{color:#64748b;font-weight:900}
.wa-summary a{display:block;text-align:center;text-decoration:none;background:linear-gradient(90deg,#0f5db8,#00b894);color:white;border-radius:16px;padding:13px;font-weight:1000}
@media(max-width:1000px){.dash-grid-clean{grid-template-columns:repeat(2,1fr)}.dash-two{grid-template-columns:1fr}}
@media(max-width:640px){.dash-grid-clean{grid-template-columns:1fr}}


/* V47 - Master Layanan drag urutan */
.drag-cell,.drag-head{width:72px;text-align:center!important}
.drag-handle{
  width:38px;height:38px;border:0;border-radius:12px;
  background:linear-gradient(135deg,#0f5db8,#00b894);
  color:#fff;font-size:20px;font-weight:1000;cursor:grab;
  box-shadow:0 10px 22px rgba(15,93,184,.18);
}
.drag-handle:active{cursor:grabbing;transform:scale(.96)}
.sortable-ghost{opacity:.45;background:#eaf7ff!important}
.sort-saved-msg{
  position:fixed;right:26px;bottom:26px;z-index:99999;
  background:#0f172a;color:#fff;border-radius:16px;
  padding:14px 18px;font-weight:900;box-shadow:0 18px 50px rgba(15,23,42,.25);
  opacity:0;transform:translateY(16px);transition:.25s ease;
}
.sort-saved-msg.show{opacity:1;transform:translateY(0)}













/* V51 FINAL - Running text ikut container form, bukan melebar sendiri */
body.tamu-premium .tamu-wrap{
  max-width:1160px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Footer running sekarang berada di dalam .tamu-wrap, jadi width 100% = sama dengan form+foto */
body.tamu-premium .running{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:22px 0 0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  border-radius:16px !important;
  z-index:1 !important;
}

body.tamu-premium .running b{
  flex:0 0 auto !important;
}

body.tamu-premium .running marquee{
  min-width:0 !important;
}

/* Desktop: form dan running satu garis container */
@media (min-width:901px){
  body.tamu-premium .layout-form{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* HP tetap seperti sebelumnya */
@media (max-width:900px){
  body.tamu-premium .running{
    width:100% !important;
    max-width:100% !important;
    margin-top:14px !important;
    border-radius:13px !important;
  }
}