/* PAMSIMAS Tirta Desa - v22 (opening video + dashboard 3D interaktif)
   Direction: theme taken from the user's own village illustration and its
   animated opening video (no people): sky blue #2f9be8, grass #58b368,
   clay-white panels, rounded friendly shapes. ENERGY 2 / RHYTHM 1 / MOTION 3
   on the Dashboard only; work pages (Tagihan etc.) keep the same colours
   without moving layers so meter entry stays fast.
   Purpose per technique:
   - Header: plain sky gradient (the village photo strip and dashboard
     banner image were removed at the user's request, 2026-10-14).
   - Parallax layers + card tilt/glare: depth cues on the summary dashboard.
   - Interactive pipe + valve: the valve IS the animation on/off control,
     a working control, not decoration.
   All motion stops under html[data-motion="off"] or prefers-reduced-motion.
*/
:root{
  --sky:#2f9be8; --sky-dark:#0d5d8a; --deep:#124a6e; --grass:#58b368; --grass-dark:#3da45d;
  --sun:#f2a93b; --danger:#c0392b; --ink:#1d2b33; --muted:#5d7180; --line:#d7e5ec;
  --clay-shadow:0 16px 26px -13px rgba(18,74,110,.45),inset 0 -6px 0 rgba(18,74,110,.07);
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI Rounded","Segoe UI",Arial,sans-serif;margin:0;color:var(--ink);
  background:linear-gradient(180deg,#a5dcf9 0,#cdeffb 240px,#e9f7ea 620px,#f6f9f2 100%);
  background-attachment:fixed}
::selection{background:#bfe3f2}

/* ---------- Header: photo strip from the opening scene ---------- */
.topbar{position:sticky;top:0;z-index:50;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,#0d5d8a 0%,#1273ad 55%,#2f9be8 130%);
  box-shadow:0 8px 24px -10px rgba(6,61,89,.6)}
.topbar::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,50,80,.72),rgba(7,50,80,.28) 55%,rgba(7,50,80,.10))}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:linear-gradient(90deg,var(--grass-dark),var(--grass),#8fd07a,var(--grass))}
.topbar-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:8px 16px;padding:15px 20px 18px;max-width:1440px;margin:0 auto}
.brand{font-weight:800;font-size:18.5px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;
  text-shadow:0 2px 10px rgba(0,30,55,.7)}
.brand .drop{display:inline-block;font-size:21px;animation:dropFloat 3.6s ease-in-out infinite}
@keyframes dropFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.topbar nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.topbar nav a{color:#0d4a6e;text-decoration:none;font-size:14.5px;font-weight:600;
  background:rgba(255,255,255,.92);padding:7px 13px;border-radius:999px;
  box-shadow:0 4px 10px -4px rgba(0,30,55,.5),inset 0 -3px 0 rgba(18,74,110,.12);
  transition:transform .16s var(--ease),background .16s}
.topbar nav a:hover{transform:translateY(-2px);background:#fff;text-decoration:none}
.topbar nav a:focus-visible,.motion-toggle:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,.valve:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.motion-toggle{margin-left:6px;background:#fff3d6;color:#8a5a00;border:none;
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 10px -4px rgba(0,30,55,.5)}
.motion-toggle:hover{background:#ffe9ad}

/* ---------- Layout ---------- */
main{max-width:1280px;margin:0 auto;padding:22px 20px 8px}
html[data-motion="on"] main{animation:pageIn .38s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
footer{text-align:center;color:#6d8a94;font-size:12px;padding:8px 20px 22px}
.hills{display:block;width:100%;height:40px;margin-top:10px}
h1{color:var(--deep);font-size:27px;margin:.2em 0 .5em}
h2{color:var(--deep);margin-top:1.5em}
.flash{padding:11px 15px;border-radius:12px;margin:10px 0;box-shadow:var(--clay-shadow)}
html[data-motion="on"] .flash{animation:pageIn .3s var(--ease) both}
.flash.ok{background:#dcf5e3;color:#14532a;border:1px solid #a9dcba}
.flash.error{background:#fbe3e1;color:#7c211a;border:1px solid #f0b8b3}
.periode,.cari{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:12px 0}
.periode label,.form label{display:flex;flex-direction:column;font-size:14px;gap:4px}
input,select{padding:8px 11px;font-size:14px;border:1.5px solid #bcd9ea;border-radius:10px;background:#fff;
  transition:border-color .16s,box-shadow .16s}
input:focus,select:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(47,155,232,.25);outline:none}

/* Buttons */
button,.btn{position:relative;overflow:hidden;background:linear-gradient(180deg,#3da9ec,var(--sky-dark));
  color:#fff;border:none;padding:9px 17px;font-size:14px;font-weight:600;border-radius:12px;cursor:pointer;
  text-decoration:none;display:inline-block;
  box-shadow:0 8px 16px -7px rgba(18,74,110,.55),inset 0 -3px 0 rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s var(--ease),filter .15s}
button:hover,.btn:hover{filter:brightness(1.09);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(1px) scale(.99)}
.btn.kecil,button.kecil{padding:5px 11px;font-size:12px;border-radius:9px}
.btn.bahaya,button.bahaya{background:linear-gradient(180deg,#d84f3d,#a93226)}
.btn.bahaya:hover,button.bahaya:hover{filter:brightness(1.07)}
.btn.aktif{background:linear-gradient(180deg,#2c7a45,var(--grass-dark));color:#fff}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);
  animation:ripple .5s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- Opening 3D (dashboard, 1x per sesi, tanpa video/gambar) ---------- */
 .op3d{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;height:100dvh;
   z-index:999;overflow:hidden;perspective:900px;cursor:pointer;
   background:linear-gradient(180deg,#79c7f2 0,#a5dcf9 34%,#d8f3e3 78%,#eef9e6 100%);
   transition:transform .8s cubic-bezier(.7,0,.25,1),opacity .8s}
 html.opening-lock,html.opening-lock body{overflow:hidden!important}
 .op3d.done{transform:translateY(-102%);opacity:.35;visibility:hidden}
 .op3d .sun{position:absolute;top:-46px;right:-46px;width:190px;height:190px;border-radius:50%;
   background:radial-gradient(circle,#fff6cf 0 34%,#ffe98a 36% 52%,rgba(255,233,138,0) 72%);
   animation:sunIn 1s ease both .1s}
 .op3d .rays{position:absolute;top:-95px;right:-95px;width:290px;height:290px;border-radius:50%;opacity:.35;
   background:repeating-conic-gradient(rgba(255,214,90,.5) 0 9deg,transparent 9deg 24deg);
   animation:raysSpin 26s linear infinite}
 @keyframes raysSpin{to{transform:rotate(360deg)}}
 @keyframes sunIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
 .op3d .cloud{position:absolute;background:#fff;border-radius:50%;filter:blur(7px);opacity:.92}
 .op3d .cloud.c1{width:150px;height:34px;top:52px;animation:drift1 9s ease-in-out infinite alternate}
 .op3d .cloud.c2{width:100px;height:26px;top:104px;animation:drift1 7s ease-in-out infinite alternate-reverse}
 .op3d .cloud.c3{width:190px;height:40px;top:24px;animation:drift1 11s ease-in-out infinite alternate}
 @keyframes drift1{from{left:-40px}to{left:60px}}
 .op3d .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-style:preserve-3d;padding-bottom:9%}
 .op3d .dropwrap{position:relative;width:clamp(88px,15vh,128px);height:clamp(106px,18vh,154px);transform-style:preserve-3d;
   animation:dropIn .95s cubic-bezier(.28,1.4,.4,1) both .25s}
 @keyframes dropIn{0%{transform:translateY(-190px) rotateY(0deg) scale(.6);opacity:0}
   55%{opacity:1}70%{transform:translateY(6px) rotateY(300deg) scale(1.04)}
   100%{transform:translateY(0) rotateY(360deg) scale(1)}}
 .op3d .dropwrap svg{width:100%;height:100%;filter:drop-shadow(0 14px 16px rgba(13,93,138,.45));
   animation:dropFloat 3.2s ease-in-out infinite 1.3s}
 @keyframes dropFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
 .op3d .ring{position:absolute;left:50%;bottom:-16px;width:110px;height:26px;margin-left:-55px;border-radius:50%;
   border:3px solid rgba(47,155,232,.55);opacity:0;animation:ringOut 2s ease-out infinite}
 .op3d .ring.r2{animation-delay:1s}
 @keyframes ringOut{0%{transform:scale(.35);opacity:0}25%{opacity:.8}100%{transform:scale(1.5);opacity:0}}
 .op3d .ttl{margin-top:3vh;font-size:clamp(38px,8.5vw,82px);font-weight:900;letter-spacing:5px;color:#0d5d8a;display:flex;perspective:600px}
 .op3d .ttl span{display:inline-block;transform-origin:bottom;opacity:0;
   text-shadow:0 2px 0 #7cc4ef,0 4px 0 #4aa8e0,0 7px 14px rgba(13,93,138,.4);
   animation:flipIn .55s cubic-bezier(.2,1.3,.4,1) forwards}
 @keyframes flipIn{from{transform:rotateX(-95deg) translateY(16px);opacity:0}to{transform:rotateX(0) translateY(0);opacity:1}}
 .op3d .sub{margin-top:7px;font-size:16px;font-weight:800;letter-spacing:6px;color:#1c7a43;
   opacity:0;animation:riseIn .5s ease forwards 1.25s}
 .op3d .tag{margin-top:5px;font-size:11.5px;letter-spacing:3.4px;color:#3d6a86;opacity:0;animation:riseIn .5s ease forwards 1.45s}
 @keyframes riseIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
 .op3d .loadbar{margin-top:22px;width:210px;height:8px;border-radius:99px;background:rgba(255,255,255,.75);
   box-shadow:inset 0 2px 4px rgba(13,93,138,.25);overflow:hidden}
 .op3d .loadbar i{display:block;height:100%;width:0;border-radius:99px;
   background:linear-gradient(90deg,#2f9be8,#58b368);animation:loadFill 2.1s cubic-bezier(.3,.7,.4,1) forwards .35s}
 @keyframes loadFill{to{width:100%}}
 .op3d .pipe{position:absolute;left:4%;right:4%;bottom:11%;height:clamp(26px,4.5vh,38px);border-radius:99px;z-index:3;
   background:linear-gradient(180deg,#d7ecfa,#a9cfeb);
   box-shadow:inset 0 3px 6px rgba(255,255,255,.9),inset 0 -5px 8px rgba(18,74,110,.35),0 10px 16px -8px rgba(18,74,110,.5);
   animation:pipeIn .6s ease both .5s}
 @keyframes pipeIn{from{transform:scaleX(.6);opacity:0}to{transform:scaleX(1);opacity:1}}
 .op3d .pipe .water{position:absolute;inset:4px 5px;border-radius:99px;
   background:linear-gradient(90deg,#59c2f0 0,#9be2ff 25%,#59c2f0 50%,#9be2ff 75%,#59c2f0 100%);background-size:220px 100%;
   animation:flowMove 1s linear infinite}
 @keyframes flowMove{to{background-position:220px 0}}
 .op3d .valve{position:absolute;right:17%;top:-21px;width:38px;height:38px;border-radius:50%;z-index:4;
   background:radial-gradient(circle,#ff8a75,#d63c2a 65%,#a82a1c);
   box-shadow:0 6px 12px -4px rgba(120,20,10,.6),inset 0 2px 3px rgba(255,255,255,.5);
   animation:valveSpin .9s cubic-bezier(.3,1.2,.4,1) both .9s}
 .op3d .valve::before,.op3d .valve::after{content:"";position:absolute;left:50%;top:50%;background:#ffd9d2;border-radius:3px}
 .op3d .valve::before{width:28px;height:6px;margin:-3px 0 0 -14px}
 .op3d .valve::after{width:6px;height:28px;margin:-14px 0 0 -3px}
 @keyframes valveSpin{from{transform:rotate(-200deg) scale(.5);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
 .op3d .hills{position:absolute;left:0;right:0;bottom:0;height:18%;z-index:2;animation:hillsUp .7s cubic-bezier(.22,.9,.28,1) both .35s}
 @keyframes hillsUp{from{transform:translateY(70%)}to{transform:none}}
 .op3d .skip{position:absolute;right:16px;bottom:12px;z-index:6;font-size:12px;font-weight:700;color:#0d5d8a;
   background:rgba(255,255,255,.92);padding:6px 13px;border-radius:99px;opacity:0;animation:riseIn .4s ease forwards 1.2s}
@media print{.op3d{display:none!important}}

/* ---------- Dashboard: parallax layers ---------- */

/* ---------- Dashboard: interactive pipe + valve (= animation switch) ---------- */
.pipepanel{position:relative;background:rgba(255,255,255,.82);border-radius:20px;padding:13px 18px 15px;
  box-shadow:var(--clay-shadow);margin-bottom:16px}
.pp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pp-head b{color:var(--deep);font-size:13.5px;letter-spacing:.6px}
.flow-pill{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:#dcf5e3;color:#177245;transition:all .3s}
.flow-pill.off{background:#fde8d8;color:#9a5a00}
.pipe{position:relative;height:34px;margin-top:28px;border-radius:99px;
  background:linear-gradient(180deg,#d7ecfa,#a9cfeb);
  box-shadow:inset 0 3px 6px rgba(255,255,255,.9),inset 0 -5px 8px rgba(18,74,110,.35),0 8px 14px -8px rgba(18,74,110,.5)}
.pipe .water{position:absolute;inset:5px 6px;border-radius:99px;
  background:linear-gradient(90deg,#59c2f0 0,#9be2ff 25%,#59c2f0 50%,#9be2ff 75%,#59c2f0 100%);
  background-size:220px 100%;animation:flowMove 1.15s linear infinite}
@keyframes flowMove{to{background-position:220px 0}}
.pipe.off .water{animation-play-state:paused;filter:saturate(.3) brightness(1.06)}
.pipe .bubble{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:rgba(255,255,255,.85);animation:bubbleRun 2.8s linear infinite}
@keyframes bubbleRun{from{left:2%}to{left:96%}}
.pipe.off .bubble{animation-play-state:paused;opacity:.4}
.valve{position:absolute;right:110px;top:-25px;width:40px;padding:0;background:none;border:none;cursor:pointer;z-index:3;
  box-shadow:none;overflow:visible;transition:transform .7s cubic-bezier(.3,1.3,.4,1)}
.valve:hover{filter:none;transform:none;background:none}
.valve.closed{transform:rotate(160deg)}
.valve .wheel{display:block;width:40px;height:40px;border-radius:50%;position:relative;
  background:radial-gradient(circle,#ff8a75,#d63c2a 65%,#a82a1c);
  box-shadow:0 6px 12px -4px rgba(120,20,10,.6),inset 0 2px 3px rgba(255,255,255,.5)}
.valve .wheel::before,.valve .wheel::after{content:"";position:absolute;left:50%;top:50%;background:#ffd9d2;border-radius:3px}
.valve .wheel::before{width:30px;height:6px;margin:-3px 0 0 -15px}
.valve .wheel::after{width:6px;height:30px;margin:-15px 0 0 -3px}
.valve .stem{display:block;width:9px;height:12px;background:#7d8a94;margin:-2px auto 0;border-radius:2px}
.valve:hover .wheel{filter:brightness(1.1)}
.pp-hint{font-size:11.5px;color:var(--muted);margin-top:9px}

/* ---------- Dashboard cards: clay + 3D tilt ---------- */
.cards{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0;perspective:1100px}
.card{background:#fff;border-radius:20px;padding:16px 19px 14px;min-width:168px;position:relative;overflow:hidden;
  border-top:6px solid var(--sky);box-shadow:var(--clay-shadow);transform-style:preserve-3d;will-change:transform}
.card:nth-child(2){border-top-color:var(--grass)} .card:nth-child(3){border-top-color:var(--grass-dark)}
.card:nth-child(4){border-top-color:#e2574c} .card:nth-child(5){border-top-color:var(--sun)}
.card .shine{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(240px 120px at var(--gx,50%) var(--gy,0%),rgba(120,200,255,.28),transparent 65%)}
.card .num{font-size:25px;font-weight:800;color:var(--deep);transform:translateZ(20px)}
.card .lbl{font-size:13px;color:var(--muted);margin-top:4px;transform:translateZ(12px)}

/* ---------- Tables (work pages: same theme, calm) ---------- */
.tabel{border-collapse:separate;border-spacing:0;width:100%;background:#fff;margin:12px 0;
  box-shadow:var(--clay-shadow);font-size:13px;border-radius:14px}
.tabel th,.tabel td{border-bottom:1px solid #e6edf1;border-right:1px solid #eef3f6;padding:7px 8px;text-align:left;vertical-align:middle}
.tabel th{background:linear-gradient(180deg,#3da9ec,var(--sky-dark));color:#fff;white-space:nowrap;border-right-color:rgba(255,255,255,.14)}
.tabel tr:nth-child(even){background:#f7fbfd}
.tabel .angka{text-align:right;white-space:nowrap}
.tabel tr.total td{background:#e2f2e4;font-weight:bold}
.tabel tr.lunas{background:#eef9f0}.tabel tr.belum{background:#fdf3ec}
.tabel tr{transition:background .15s}
.tabel tr:hover td{background:#eaf4fa}
.tabel tr.grup:hover td{background:var(--sky-dark)}
html[data-motion="on"] .tabel tr.row-in{animation:rowIn .34s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kuat{font-weight:bold}.nowrap{white-space:nowrap}.scroll-x{overflow-x:auto;border-radius:14px}
.tabel th.aksi,.tabel td.aksi{position:sticky;right:0;z-index:2;box-shadow:-2px 0 5px rgba(0,0,0,.10)}
.tabel th.aksi{background:var(--sky-dark)} .tabel td.aksi{background:#fff}
.tabel tr:nth-child(even) td.aksi{background:#f7fbfd}
.aksi-grup{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.aksi-grup form{display:flex;gap:6px;align-items:center;margin:0}
.tabel tr.lunas td.aksi{background:#eef9f0}.tabel tr.belum td.aksi{background:#fdf3ec}
.tabel th.kiri-sticky,.tabel td.kiri-sticky{position:sticky;left:0;z-index:2;box-shadow:2px 0 5px rgba(0,0,0,.10)}
.tabel th.kiri-sticky{background:var(--sky-dark)} .tabel td.kiri-sticky{background:#fff}
.tabel tr:nth-child(even) td.kiri-sticky{background:#f7fbfd}
.tabel tr.total td.kiri-sticky{background:#e2f2e4}
.grafik-toggle{display:flex;gap:8px;margin:8px 0 4px}
.tabel tr.grup td{background:var(--sky-dark);color:#fff;font-weight:bold;font-size:14px;padding:9px 12px}
.belum-ada{color:var(--danger);font-weight:bold;white-space:nowrap}
.tag-reset{background:#e8930c;color:#fff;font-size:11px;font-weight:bold;padding:2px 8px;border-radius:999px;white-space:nowrap}

/* ---------- Chart panel ---------- */
.grafik{background:#fff;border-radius:20px;padding:16px 20px;box-shadow:var(--clay-shadow);margin:12px 0 20px}
.grafik h3{margin:0 0 8px;font-size:15px;color:var(--deep)}
html[data-motion="on"] .grafik svg rect{transform-box:fill-box;transform-origin:50% 100%;animation:barGrow .7s var(--ease) both}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.grafik svg rect{transition:filter .15s}
.grafik svg rect:hover{filter:brightness(1.25)}

/* ---------- Panels / forms ---------- */
.peringatan{background:#fff8f0;border:2px solid #e0a030;border-radius:14px;padding:18px 22px;max-width:560px;margin:12px 0}
.bulan-besar{font-size:26px;font-weight:bold;margin:8px 0}
.inline-form{display:flex;gap:4px;align-items:center}
.inline-form input{padding:4px 6px;font-size:12px}
.form{max-width:560px;background:#fff;padding:22px;border-radius:20px;box-shadow:var(--clay-shadow);
  display:flex;flex-direction:column;gap:12px}
.aksi-form{display:flex;gap:10px;margin-top:6px}
.rincian{background:#fff;padding:16px 20px;border-radius:20px;box-shadow:var(--clay-shadow);
  max-width:560px;margin-bottom:16px}

/* ---------- Motion off + reduced motion ---------- */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:640px){
  .topbar-inner{padding:12px 14px 15px}.brand{font-size:16px}
  .topbar nav a{padding:7px 10px;font-size:13.5px}
  main{padding:16px 12px}.card{min-width:calc(50% - 8px);flex:1 1 calc(50% - 8px)}
  button,.btn{min-height:40px}.btn.kecil,button.kecil{min-height:32px}
  .valve{right:56px}
}
@media print{.topbar,.hills{display:none!important}body{background:#fff}}