@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--bg-gradient-1: #020617;--bg-gradient-2: #0f172a;--bg-gradient-3: #1e1b4b;--bg-gradient-4: #083344;--text-primary: #f8fafc;--text-muted: #94a3b8;--accent: #38bdf8;--accent-hover: #0284c7;--card-bg: rgba(15, 23, 42, .55);--card-border: rgba(56, 189, 248, .15);--sidebar-bg: rgba(2, 6, 23, .75);--color-aman: #10b981;--color-menipis: #f59e0b;--color-kosong: #ef4444}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;color:var(--text-primary);min-height:100vh;overflow-x:hidden;background:linear-gradient(-45deg,var(--bg-gradient-1),var(--bg-gradient-2),var(--bg-gradient-3),var(--bg-gradient-4));background-size:400% 400%;animation:gradientBG 15s ease infinite}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:radial-gradient(circle at 15% 50%,rgba(56,189,248,.05) 0%,transparent 50%),radial-gradient(circle at 85% 30%,rgba(139,92,246,.08) 0%,transparent 50%);z-index:-1;pointer-events:none;animation:floatParticles 20s ease-in-out infinite alternate}@keyframes floatParticles{0%{transform:scale(1) translateY(0)}to{transform:scale(1.2) translateY(-20px)}}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}h1{font-size:1.75rem;font-weight:700;margin-bottom:1.5rem;background:linear-gradient(90deg,#38bdf8,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px rgba(56,189,248,.3)}h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.card{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:16px;padding:1.5rem;box-shadow:0 8px 32px #0000004d,inset 0 0 10px #38bdf80d;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,inset 0 0 15px #38bdf81a;border-color:#38bdf84d}.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}.col-span-4{grid-column:span 4}.col-span-6{grid-column:span 6}.col-span-8{grid-column:span 8}.col-span-12{grid-column:span 12}@media (max-width: 1024px){.col-span-4,.col-span-6,.col-span-8{grid-column:span 12}}.form-input,.form-select{width:100%;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--card-border);background:#0f172ab3;color:var(--text-primary);font-family:inherit;font-size:1rem;transition:all .2s ease;box-shadow:inset 0 2px 4px #0003}.form-input:focus,.form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #38bdf833,inset 0 2px 4px #0003}.form-select option{background:var(--bg-gradient-2);color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #38bdf866;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px #38bdf899}.btn-primary:active{transform:translateY(0) scale(.98)}.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-radius:12px;color:var(--text-muted);text-decoration:none;font-weight:500;transition:all .2s ease}.sidebar-link:hover{background:#38bdf81a;color:var(--text-primary);box-shadow:inset 2px 0 0 var(--accent)}.sidebar-link.active{background:linear-gradient(90deg,rgba(56,189,248,.2),transparent);color:var(--accent);border-left:3px solid var(--accent);box-shadow:0 4px 15px #0000001a}.bottom-nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.5rem;color:var(--text-muted);text-decoration:none;font-size:.7rem;font-weight:500;transition:all .2s;flex:1}.bottom-nav-link.active{color:var(--accent);text-shadow:0 0 10px rgba(56,189,248,.5)}.bottom-nav-link.active svg{stroke:var(--accent);filter:drop-shadow(0 0 5px rgba(56,189,248,.5))}.table-wrapper{overflow-x:auto;border-radius:12px;background:#0f172a66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}table{width:100%;border-collapse:separate;border-spacing:0;text-align:left}th,td{padding:1rem;border-bottom:1px solid rgba(148,163,184,.1)}th{font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;background:#0f172a99}tr:last-child td{border-bottom:none}tr:hover td{background:#38bdf80d}.badge{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.2)}.badge-aman{background:#10b98133;color:#34d399;box-shadow:0 0 10px #10b98133}.badge-menipis{background:#f59e0b33;color:#fbbf24;box-shadow:0 0 10px #f59e0b33}.badge-kosong{background:#ef444433;color:#f87171;box-shadow:0 0 10px #ef444433}.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.region-card{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#0f172a99;border-radius:12px;border:1px solid var(--card-border);box-shadow:0 4px 15px #0003;transition:all .3s ease}.region-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #38bdf833;border-color:#38bdf866}.recharts-cartesian-axis-tick-value{fill:var(--text-muted)!important;font-family:Outfit,sans-serif;font-size:12px}