/* Aquatic UI — Tailwind companion: sidebar, waves, animations, tables, forms */
:root { --oc-950:#041e36; --oc-900:#062b4c; --oc-700:#0a4a7a; --oc-600:#0b5fa5; --oc-500:#0e7cc0; --cy-300:#67e8f9; }

/* ---------- sidebar ---------- */
.sidebar-ocean { background: linear-gradient(175deg,#062b4c 0%,#0a4a7a 55%,#0b5fa5 100%); }
.sidebar-ocean::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(220px 160px at 110% -20px, rgba(103,232,249,.25), transparent 60%),
    radial-gradient(260px 200px at -40px 40%, rgba(14,124,192,.45), transparent 65%),
    radial-gradient(300px 220px at 50% 115%, rgba(103,232,249,.18), transparent 60%); }
.sidebar-ocean > * { position:relative; z-index:1; }
.logo-drop { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:16px;
  color:#fff; background:linear-gradient(135deg,#0e7cc0,#22d3ee); box-shadow:0 8px 20px -6px rgba(34,211,238,.6), inset 0 1px 0 rgba(255,255,255,.4);
  animation:floaty 5s ease-in-out infinite; }
.role-chip { display:inline-block; margin-top:2px; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#67e8f9; background:rgba(103,232,249,.12); border:1px solid rgba(103,232,249,.3); padding:2px 8px; border-radius:999px; }
.nhead { font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(186,230,253,.55); padding:14px 12px 6px; }
.nlink { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; font-size:13.5px; font-weight:600;
  color:rgba(224,242,254,.82); transition:all .22s ease; border:1px solid transparent; }
.nlink:hover { background:rgba(255,255,255,.09); color:#fff; transform:translateX(3px); }
.nlink-active { background:linear-gradient(90deg,rgba(34,211,238,.28),rgba(34,211,238,.10)); color:#fff !important;
  border-color:rgba(103,232,249,.35); box-shadow:0 6px 18px -8px rgba(34,211,238,.7); }
.nicon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.nlink-active .nicon { background:linear-gradient(135deg,#22d3ee,#0e7cc0); border-color:transparent; }
.logout-card { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; font-size:13.5px; font-weight:700;
  color:#fecdd3; background:rgba(244,63,94,.10); border:1px solid rgba(244,63,94,.3); transition:all .22s; }
.logout-card:hover { background:rgba(244,63,94,.25); color:#fff; }

/* wave icons (mask => currentColor) */
.wv { display:inline-block; width:18px; height:18px; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.wv-dash { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>"); }
.wv-users { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-8 0a4 4 0 1 0-.6-7.9A5.5 5.5 0 0 1 12 5.5a5.5 5.5 0 0 1 4.6 2.5A4 4 0 0 0 8 11zm8 2c-2.7 0-8 1.3-8 4v3h16v-3c0-2.7-5.3-4-8-4z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-8 0a4 4 0 1 0-.6-7.9A5.5 5.5 0 0 1 12 5.5a5.5 5.5 0 0 1 4.6 2.5A4 4 0 0 0 8 11zm8 2c-2.7 0-8 1.3-8 4v3h16v-3c0-2.7-5.3-4-8-4z'/></svg>"); }
.wv-news { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4 4h13a1 1 0 0 1 1 1v12h3a1 1 0 0 0 1-1V5a2 2 0 0 0-2-2H4v1zm15 1v12H6a2 2 0 0 0-2 2v-2 0V5h15zM6 19a1 1 0 0 1 1-1h12v2H7a1 1 0 0 1-1-1z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4 4h13a1 1 0 0 1 1 1v12h3a1 1 0 0 0 1-1V5a2 2 0 0 0-2-2H4v1zm15 1v12H6a2 2 0 0 0-2 2v-2 0V5h15zM6 19a1 1 0 0 1 1-1h12v2H7a1 1 0 0 1-1-1z'/></svg>"); }
.wv-cal { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v9H5v-9h14z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v9H5v-9h14z'/></svg>"); }
.wv-cash { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2v10h16V7H4zm3 2a3 3 0 1 0 3 3 3 3 0 0 0-3-3zm12-1h2v6h-2v-2h-2v-2h2V8z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2v10h16V7H4zm3 2a3 3 0 1 0 3 3 3 3 0 0 0-3-3zm12-1h2v6h-2v-2h-2v-2h2V8z'/></svg>"); }
.wv-check { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>"); }
.wv-bill { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 2h12a1 1 0 0 1 1 1v18l-3-2-2 2-2-2-2 2-2-2-3 2V3a1 1 0 0 1 1-1zm3 5v2h6V7H9zm0 4v2h6v-2H9z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 2h12a1 1 0 0 1 1 1v18l-3-2-2 2-2-2-2 2-2-2-3 2V3a1 1 0 0 1 1-1zm3 5v2h6V7H9zm0 4v2h6v-2H9z'/></svg>"); }
.wv-user { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z'/></svg>"); }
.wv-bank { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 1 8v2h22V8L12 2zM3 10v8H1v3h22v-3h-2v-8h-3v8h-3v-8h-3v8H9v-8H6v8H3v-8z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 1 8v2h22V8L12 2zM3 10v8H1v3h22v-3h-2v-8h-3v8h-3v-8h-3v8H9v-8H6v8H3v-8z'/></svg>"); }
.wv-out { -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 2h9a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H9v-2h8V4H9V2zM3 11l1.4-1.4L6 11H14v2H6l-1.6 1.6L3 13l4-4 2 2z' transform='rotate(180 12 12) translate(1 0)'/><path d='M15 2h5a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1h-5v-2h4V4h-4V2zM10 11l1.4-1.4L13 11H5v2h8l-1.6 1.6L13 16l4-4-4-4-1.6 1.6L13 11z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M15 2h5a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1h-5v-2h4V4h-4V2zM10 11l1.4-1.4L13 11H5v2h8l-1.6 1.6L13 16l4-4-4-4-1.6 1.6L13 11z'/></svg>"); }

/* ---------- header bits ---------- */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px;
  color:#0a4a7a; background:#eef7fd; border:1px solid #d9edfa; transition:all .2s; }
.icon-btn:hover { background:#0b5fa5; color:#fff; transform:translateY(-1px); }
.btn-logout { font-size:12.5px; font-weight:800; color:#fff; padding:9px 16px; border-radius:12px;
  background:linear-gradient(135deg,#0b5fa5,#0e7cc0); box-shadow:0 8px 18px -8px rgba(11,95,165,.7); transition:all .2s; }
.btn-logout:hover { transform:translateY(-1px); box-shadow:0 12px 22px -8px rgba(11,95,165,.8); }
.flash-ic { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; color:#fff; flex-shrink:0; margin-top:1px; }

/* ---------- cards / stats ---------- */
.card { background:#fff; border-radius:20px; box-shadow:0 2px 12px -2px rgba(6,43,76,.10); border:1px solid rgba(226,232,240,.9); }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid #f1f5f9; font-family:Sora,sans-serif; font-weight:700; color:#062b4c; }
.card-b { padding:20px; }
.stat { position:relative; overflow:hidden; border-radius:20px; color:#fff; padding:20px; box-shadow:0 14px 30px -12px rgba(6,43,76,.5); transition:transform .25s ease, box-shadow .25s ease; }
.stat:hover { transform:translateY(-4px); box-shadow:0 20px 38px -12px rgba(6,43,76,.55); }
.stat::before { content:''; position:absolute; width:170px; height:170px; right:-50px; top:-50px; border-radius:50%;
  background:rgba(255,255,255,.14); }
.stat::after { content:''; position:absolute; width:110px; height:110px; right:30px; bottom:-55px; border-radius:50%;
  background:rgba(255,255,255,.10); }
.stat .wv-big { position:absolute; right:14px; bottom:10px; width:64px; height:64px; opacity:.28; background:#fff;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.st1 { background:linear-gradient(135deg,#0a4a7a,#0e7cc0 60%,#22d3ee); }
.st2 { background:linear-gradient(135deg,#065f46,#10b981 60%,#6ee7b7); }
.st3 { background:linear-gradient(135deg,#4c1d95,#7c3aed 60%,#c4b5fd); }
.st4 { background:linear-gradient(135deg,#92400e,#f59e0b 60%,#fcd34d); }

/* ---------- forms ---------- */
.lbl { display:block; font-size:12.5px; font-weight:700; color:#0a4a7a; margin-bottom:6px; }
.inp { width:100%; font-size:14px; color:#0f172a; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:12px; padding:10px 14px; transition:all .2s; }
.inp:focus { outline:none; border-color:#0e7cc0; background:#fff; box-shadow:0 0 0 4px rgba(14,124,192,.14); }
textarea.inp { resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:800;
  padding:10px 18px; border-radius:12px; transition:all .2s; cursor:pointer; border:1px solid transparent; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-p { color:#fff; background:linear-gradient(135deg,#0b5fa5,#0e7cc0); box-shadow:0 10px 20px -10px rgba(11,95,165,.7); }
.btn-p:hover { box-shadow:0 14px 26px -10px rgba(11,95,165,.8); }
.btn-s { color:#334155; background:#f1f5f9; border-color:#e2e8f0; }
.btn-s:hover { background:#e2e8f0; }
.btn-d { color:#fff; background:linear-gradient(135deg,#e11d48,#fb7185); box-shadow:0 10px 20px -10px rgba(225,29,72,.6); }
.btn-w { color:#fff; background:linear-gradient(135deg,#d97706,#fbbf24); box-shadow:0 10px 20px -10px rgba(217,119,6,.6); }
.btn-g { color:#fff; background:linear-gradient(135deg,#059669,#34d399); box-shadow:0 10px 20px -10px rgba(5,150,105,.6); }
.btn-i { color:#fff; background:linear-gradient(135deg,#0284c7,#38bdf8); box-shadow:0 10px 20px -10px rgba(2,132,199,.6); }
.btn-sm { padding:7px 12px; font-size:12px; border-radius:10px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x:auto; border-radius:0 0 20px 20px; }
table.tbl { width:100%; font-size:13.5px; border-collapse:collapse; }
table.tbl thead th { text-align:left; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#0a4a7a; background:linear-gradient(180deg,#eef7fd,#e0f0fb); padding:12px 16px; white-space:nowrap; border-bottom:2px solid #bae6fd; }
table.tbl tbody td { padding:12px 16px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
table.tbl tbody tr { transition:background .15s; }
table.tbl tbody tr:hover { background:#f0f9ff; }
table.tbl tbody tr:last-child td { border-bottom:none; }
.avatar-sm { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px;
  font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,#0b5fa5,#22d3ee); flex-shrink:0; }

/* datatables theming */
.dataTables_wrapper { padding:16px 20px 20px; font-size:13.5px; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:7px 12px; background:#f8fafc; font-size:13px; }
.dataTables_wrapper .dataTables_filter input:focus { outline:none; border-color:#0e7cc0; box-shadow:0 0 0 3px rgba(14,124,192,.14); }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:10px !important; border:1px solid transparent !important;
  color:#0a4a7a !important; font-weight:700; padding:5px 12px !important; margin-left:4px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background:#e0f0fb !important; border-color:#bae6fd !important; color:#0a4a7a !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:linear-gradient(135deg,#0b5fa5,#0e7cc0) !important;
  color:#fff !important; border-color:transparent !important; }
.dataTables_wrapper .dataTables_info { color:#64748b; font-size:12.5px; padding-top:12px; }

/* ---------- animations ---------- */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes riseIn { from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)} }
@keyframes popIn { 0%{opacity:0; transform:scale(.94)} 100%{opacity:1; transform:scale(1)} }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(24px,-18px) scale(1.08)} }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.reveal { opacity:0; }
.reveal.in { animation:riseIn .6s cubic-bezier(.22,.8,.32,1) forwards; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.18s}.stagger > *:nth-child(4){animation-delay:.26s}
.stagger > *:nth-child(5){animation-delay:.34s}.stagger > *:nth-child(6){animation-delay:.42s}
.wave-band { position:relative; overflow:hidden; }
html, body { overflow-x:hidden; }
.wave-band svg.waves { position:absolute; bottom:-2px; left:0; width:100%; display:block; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:drift 9s ease-in-out infinite; pointer-events:none; }
.hero-grid { background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 10%, black 40%, transparent 100%); mask-image:radial-gradient(ellipse 90% 90% at 50% 10%, black 40%, transparent 100%); }
.glass { background:rgba(255,255,255,.1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.2); }

/* public article cards */
.art-card { transition:transform .3s ease, box-shadow .3s ease; }
.art-card:hover { transform:translateY(-6px); box-shadow:0 24px 44px -18px rgba(6,43,76,.4); }
.art-card img { transition:transform .5s ease; }
.art-card:hover img { transform:scale(1.06); }

/* mobile sidebar */
@media (max-width:1023px){ #sidebar:not(.open){ transform:translateX(-100%);} #sidebar.open{ transform:translateX(0);} }

/* print (laporan -> PDF) */
@media print { header, footer, .no-print, #sidebar { display:none !important; } body { background:#fff; } .card { box-shadow:none; } }

/* ---------- collapsible sidebar (desktop) ---------- */
#sidebar { transition:width .28s ease, transform .28s ease; }
#mainWrap { transition:padding .28s ease; }
@media (min-width:1024px){
  body.sb-min #sidebar { width:86px; }
  body.sb-min #mainWrap { padding-left:86px; }
  body.sb-min #sidebar .sb-hide { display:none; }
  body.sb-min #sidebar .user-card { margin-left:14px; margin-right:14px; padding:8px; justify-content:center; }
  body.sb-min #sidebar .logo-row { padding-left:0; padding-right:0; justify-content:center; }
  body.sb-min #sidebar .nlink { justify-content:center; padding:10px 0; }
  body.sb-min #sidebar .nhead { font-size:0; padding:10px 20px 6px; }
  body.sb-min #sidebar .nhead::after { content:''; display:block; height:1px; background:rgba(255,255,255,.22); border-radius:1px; }
  body.sb-min #sidebar nav { padding-left:10px; padding-right:10px; }
  #sidebar .sb-hide { transition:opacity .18s ease; }
  body.sb-min #sidebar .nlink span:last-child { display:none; }
}
/* text clip halus saat transisi lebar */
#sidebar .nlink span:last-child { white-space:nowrap; overflow:hidden; }

/* ---------- motif publik (ombak + buih) ---------- */
.pool-hero { position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(115deg,#075985 0%,#0284c7 38%,#0ea5e9 68%,#22d3ee 100%); }
.pool-hero::before { content:''; position:absolute; inset:0; z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='36' viewBox='0 0 140 36'%3E%3Cpath d='M0 18 Q 17 6 35 18 T 70 18 T 105 18 T 140 18' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:140px 36px; opacity:.5; }
.pool-hero::after { content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.35) 0 70px, transparent 71px),
    radial-gradient(circle at 92% 22%, rgba(255,255,255,.2) 0 34px, transparent 35px),
    radial-gradient(circle at 6% 95%, rgba(255,255,255,.18) 0 110px, transparent 111px),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,.14) 0 40px, transparent 41px); }
.pool-soft { background-color:#f0f9ff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='36' viewBox='0 0 140 36'%3E%3Cpath d='M0 18 Q 17 6 35 18 T 70 18 T 105 18 T 140 18' fill='none' stroke='rgba(2,132,199,.14)' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:140px 36px; }
.pool-dots { background-color:#fff;
  background-image:radial-gradient(rgba(2,132,199,.16) 1.6px, transparent 1.6px);
  background-size:22px 22px; }
.pool-cta { position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(100deg,#f59e0b 0%,#f97316 55%,#0ea5e9 130%); }
.pool-cta::before { content:''; position:absolute; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='36' viewBox='0 0 140 36'%3E%3Cpath d='M0 18 Q 17 6 35 18 T 70 18 T 105 18 T 140 18' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:140px 36px; opacity:.55; }

/* bayangan agar teks putih terbaca di atas gradien cerah */
.txt-shadow { text-shadow:0 2px 14px rgba(4,30,54,.55); }
.txt-shadow-sm { text-shadow:0 1px 8px rgba(4,30,54,.5); }