/* ==========================================================
   SIPANDANG Warga — UI 2027 (v12)
   Dimuat setelah modern.css. HANYA tampilan: tidak ada perubahan logika.
   Bahasa desain: aurora + kaca (glass) berlapis, bento, squircle,
   tipografi besar, gerak pegas (spring), transisi antar-halaman native.
   Rollback: hapus <link> ui2027.css di _head.php / _warga_auth.php.
   Kontras: semua teks tetap memakai token dari lapisan kontras modern.css.
   ========================================================== */

:root{
    color-scheme:light;
    accent-color:#2563eb;
    --u-glass:rgba(255,255,255,.74);
    --u-glass-strong:rgba(255,255,255,.88);
    --u-stroke:rgba(255,255,255,.85);
    --u-hair:rgba(15,23,42,.07);
    --u-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -12px rgba(30,58,138,.22),0 2px 6px rgba(15,23,42,.04);
    --u-shadow-lg:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -20px rgba(30,58,138,.35);
    --u-spring:cubic-bezier(.34,1.56,.64,1);
    --u-out:cubic-bezier(.16,1,.3,1);
    --u-r:26px;
    --u-r-sm:18px;
    --u-aurora:
        radial-gradient(60% 40% at 8% 0%,rgba(99,102,241,.20),transparent 70%),
        radial-gradient(55% 38% at 100% 12%,rgba(14,165,233,.20),transparent 70%),
        radial-gradient(60% 40% at 0% 100%,rgba(236,72,153,.10),transparent 70%),
        radial-gradient(50% 35% at 100% 100%,rgba(16,185,129,.10),transparent 70%);
}

/* ---------- Kanvas aurora ---------- */
html,body,body.app-native{
    background:var(--u-aurora),#f5f7fd!important;
    background-attachment:fixed!important;
}
body.app-native{
    font-feature-settings:"ss01","cv11";
    -webkit-font-smoothing:antialiased;
}
body.app-native h1,body.app-native h2,body.app-native h3{text-wrap:balance;}
body.app-native p{text-wrap:pretty;}
html{scroll-behavior:smooth;}

/* ---------- Transisi antar-halaman native (tanpa JS) ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:u-out .18s ease both;}
::view-transition-new(root){animation:u-in .32s var(--u-out) both;}
@keyframes u-out{to{opacity:0;transform:scale(.985);}}
@keyframes u-in{from{opacity:0;transform:translateY(8px) scale(.995);}}
.app-nav{view-transition-name:u-nav;}
.warga-sidebar{view-transition-name:u-side;}
.sos-fab{view-transition-name:u-sos;}

/* ---------- Permukaan kaca universal ---------- */
.card,.info-card,.ritem,.nc,.form-card,.kcard,.lay-item,.berita-card,.chat-card,.sos-card,
.rating-card,.sos-status-card,.kat-card,.chip-action,.page-dashboard .stat-card,.quick-link,
.jam-card,.ig-item,.ov-card,.edit-panel,.detail-sheet,.dok-slot,.prog-wrap,.svc-item{
    background:var(--u-glass)!important;
    -webkit-backdrop-filter:blur(22px) saturate(170%);
    backdrop-filter:blur(22px) saturate(170%);
    border:1px solid var(--u-stroke)!important;
    border-radius:var(--u-r)!important;
    box-shadow:var(--u-shadow)!important;
}
.svc-item,.dok-slot,.ig-item,.jam-card{border-radius:var(--u-r-sm)!important;}
.info-card,.card{padding-block:20px;}
.ritem.siap{box-shadow:inset 5px 0 0 #10b981,var(--u-shadow)!important;}

/* kartu yang bisa disentuh: pegas saat ditekan */
.kat-card,.chip-action,.ritem,.nc,.lay-item,.menu-item,.svc-item,.btn,.stat-card,.app-banner,.siap-bar,.sos-fab{
    transition:transform .45s var(--u-spring),box-shadow .3s,background .3s;
}
.kat-card:active,.chip-action:active,.ritem:active,.nc:active,.lay-item:active,.svc-item:active,
.app-banner:active,.siap-bar:active,.stat-card:active{transform:scale(.965)!important;opacity:1!important;}
@media (hover:hover){
    .kat-card:hover,.chip-action:hover,.ritem:hover,.lay-item:hover{
        transform:translateY(-3px)!important;
        box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 40px -16px rgba(37,99,235,.35)!important;
    }
}

/* ---------- Hero: mesh + grain ---------- */
.page-dashboard .hero,.page-hdr,.info-hero,.profil-hero,body.page-profil .profil-hero,.pg-hdr{
    position:relative;overflow:hidden;
    border-radius:0 0 44px 44px!important;
    background:
        radial-gradient(70% 90% at 100% 0%,rgba(56,189,248,.45),transparent 62%),
        radial-gradient(60% 80% at 0% 100%,rgba(129,140,248,.40),transparent 62%),
        linear-gradient(150deg,#172554 0%,#1d4ed8 52%,#0369a1 100%)!important;
    box-shadow:0 30px 60px -28px rgba(29,78,216,.7)!important;
}
.page-dashboard .hero::before,.page-hdr::before,.info-hero::before,.profil-hero::before,.pg-hdr::before{
    content:""!important;display:block!important;position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-dashboard .hero::after{
    border:0;width:220px;height:220px;right:-60px;top:20px;
    background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%);
}
.page-dashboard .hero-greet .gname{font-size:2.05rem;font-weight:800;letter-spacing:-.045em;line-height:1.08;}
.page-dashboard .hero-greet .gday{
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.page-hdr h1,.info-hero h1,.pg-hdr h2,.sos-hero h1{font-size:1.65rem!important;font-weight:800;letter-spacing:-.04em;}
.logo-wrap .nm{font-size:1.05rem;}

/* ---------- Bento: statistik ---------- */
.stats-row{grid-template-columns:1.3fr 1fr 1fr!important;gap:10px!important;}
.page-dashboard .stat-card{border-radius:24px!important;padding:16px 12px 14px;text-align:left;}
.page-dashboard .stat-card .si{margin:0 0 14px;width:34px;height:34px;border-radius:12px;}
.page-dashboard .stat-card .sv{font-size:2.1rem;font-weight:800;letter-spacing:-.05em;}
html body .page-dashboard .stat-card.dark{
    background:linear-gradient(150deg,#1e3a8a,#1d4ed8 60%,#0369a1)!important;
    border-color:rgba(255,255,255,.25)!important;
    box-shadow:0 22px 36px -16px rgba(29,78,216,.7),0 1px 0 rgba(255,255,255,.3) inset!important;
}
html body .page-dashboard .stat-card.dark .sv,
html body .page-dashboard .stat-card.dark .sl{color:#fff!important;}
html body .page-dashboard .stat-card.dark .si{background:rgba(255,255,255,.2);color:#fff;}
.page-dashboard .stat-card .sl{letter-spacing:.08em;}

/* ---------- Banner ---------- */
.siap-bar{border-radius:var(--u-r)!important;border:1px solid rgba(255,255,255,.25);}
.siap-bar .si{background:rgba(255,255,255,.22);border-radius:14px;}
.app-banner{border-radius:var(--u-r)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}

/* ---------- Kategori & ikon squircle ---------- */
.kat-grid{gap:12px;}
.kat-card{padding:20px 16px 18px!important;}
.kat-card .kico,.chip-action .ci,.svc-ico,.mi-ico,.ir-ico,.ritem-ico,.app-banner-ico,.sheet-hdr .shi{
    border-radius:18px!important;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 16px -8px rgba(37,99,235,.45)!important;
}
.chip-action .ci{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 18px -8px rgba(37,99,235,.6)!important;}
.kat-card .kcount{background:rgba(37,99,235,.09);color:#1e40af!important;font-weight:700;}
.kat-card .karr{background:var(--grad-btn);color:#fff!important;width:30px;height:30px;
    box-shadow:0 8px 14px -6px rgba(37,99,235,.7);}
.dash-sec-title{font-size:1.2rem;letter-spacing:-.035em;}

/* ---------- Navigasi: kaca melayang ---------- */
.app-nav{
    height:72px!important;border-radius:32px!important;
    background:rgba(255,255,255,.66)!important;
    -webkit-backdrop-filter:blur(28px) saturate(200%)!important;
    backdrop-filter:blur(28px) saturate(200%)!important;
    border:1px solid rgba(255,255,255,.9)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 28px 50px -16px rgba(30,58,138,.45),0 4px 10px rgba(15,23,42,.06)!important;
}
.app-nav .nav-item{font-weight:700;transition:transform .45s var(--u-spring);}
.app-nav .nav-item:active{transform:scale(.9);}
.app-nav .nav-ico{width:46px;height:32px;transition:background .35s,transform .45s var(--u-spring);}
html body .app-nav .nav-item.active .nav-ico{
    background:var(--grad-btn)!important;color:#fff!important;transform:translateY(-1px);
    box-shadow:0 10px 18px -8px rgba(29,78,216,.8)!important;
}
html body .app-nav .nav-item.active .nav-ico i{color:#fff!important;}
html body .app-nav .nav-item.active{color:#1e3a8a!important;font-weight:800;}
.app-nav .nav-fab{
    border-radius:24px!important;top:-20px;width:60px;height:60px;
    background:linear-gradient(150deg,#1d4ed8,#0ea5e9)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 30px -8px rgba(37,99,235,.75),0 0 0 6px rgba(255,255,255,.7)!important;
    transition:transform .5s var(--u-spring);
}
.app-nav .nav-fab:active{transform:scale(.88) rotate(90deg);}
.sos-fab{box-shadow:0 14px 26px -8px rgba(220,38,38,.7)!important;}

/* ---------- Form: kolom kaca ---------- */
.form-control,textarea.form-control,.chat-ta,.pesan-ta,.rating-ta,.ri-ta,.lay-search input,
body.sip-bkn-login input[type=text],body.sip-bkn-login input[type=password],
body.sip-bkn-login input[type=email],body.sip-bkn-login input[type=tel],body.sip-bkn-login input[type=number]{
    background:rgba(255,255,255,.7)!important;
    border:1px solid rgba(100,116,139,.28)!important;
    border-radius:18px!important;
    box-shadow:0 1px 2px rgba(15,23,42,.04) inset;
    transition:border-color .25s,box-shadow .3s,background .25s;
}
.form-control:focus,textarea.form-control:focus,.chat-ta:focus,.pesan-ta:focus,.rating-ta:focus,.lay-search input:focus{
    background:#fff!important;border-color:#2563eb!important;
    box-shadow:0 0 0 5px rgba(37,99,235,.15)!important;
}
.btn,.sip-bkn-btn,.btn-kirim,.btn-edit-save,.kf-btn{
    border-radius:20px!important;min-height:52px;font-weight:800;letter-spacing:-.01em;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 26px -12px rgba(29,78,216,.75);
}
.btn-ghost{box-shadow:none!important;background:rgba(255,255,255,.7)!important;
    border:1px solid rgba(100,116,139,.28)!important;color:#1e293b!important;}
.btn:active:not(:disabled){transform:scale(.96);}

/* ---------- Tab & chip pil ---------- */
.filter-tabs,.tabs,.ktabs{
    background:var(--u-glass-strong)!important;
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border:1px solid var(--u-stroke)!important;border-radius:999px!important;
    box-shadow:var(--u-shadow)!important;padding:5px!important;
}
.ftab,.ktab,.tab{border-radius:999px!important;transition:background .3s,color .3s,box-shadow .3s;}
.berita-kat,.lay-badge,.badge-opt,.badge-wajib{border-radius:999px!important;}

/* ---------- Badge status berpenanda titik ---------- */
.st-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;}
.st-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* ---------- Bottom sheet ---------- */
.sheet{
    border-radius:34px 34px 0 0!important;
    background:rgba(255,255,255,.88)!important;
    -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
    border:1px solid rgba(255,255,255,.9)!important;
}
.sheet-pill{width:48px;height:5px;background:rgba(100,116,139,.4);}
.ov{background:rgba(15,23,42,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}

/* ---------- Profil ---------- */
.profil-hero .avatar-lg{box-shadow:0 0 0 5px rgba(255,255,255,.35),0 18px 30px -10px rgba(0,0,0,.4);}
.info-card-title{letter-spacing:.1em;font-size:.68rem;}
.btn-logout{border-radius:20px;}

/* ---------- Sidebar desktop: kaca gelap ---------- */
.warga-sidebar{
    background:
        radial-gradient(120% 60% at 0% 0%,rgba(99,102,241,.35),transparent 60%),
        linear-gradient(180deg,#0b1224,#14286b)!important;
    margin:12px;border-radius:30px;top:0;bottom:0;height:calc(100vh - 24px);
    box-shadow:0 30px 60px -20px rgba(15,23,42,.6)!important;
}
.warga-sidebar-link{border-radius:18px!important;}
.warga-sidebar-cta{border-radius:20px!important;}

/* ---------- Skeleton ---------- */
.sk-card{border-radius:var(--u-r);}

/* ---------- Auth ---------- */
body.sip-bkn-login{background:var(--u-aurora),#f5f7fd!important;background-attachment:fixed!important;}
body.sip-bkn-login .sip-bkn-login-card{
    background:var(--u-glass)!important;border:1px solid var(--u-stroke)!important;
    border-radius:36px!important;box-shadow:var(--u-shadow-lg)!important;
    -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
}
body.sip-bkn-login .sip-bkn-hero-band{
    border-radius:0 0 44px 44px;
    background:
        radial-gradient(70% 90% at 100% 0%,rgba(56,189,248,.45),transparent 62%),
        linear-gradient(150deg,#172554,#1d4ed8 55%,#0369a1)!important;
}

/* ---------- Gerak: muncul dengan pegas ---------- */
@media (prefers-reduced-motion:no-preference){
    @keyframes u-rise{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
    .page-dashboard .stat-card,.kat-card,.chip-action,.ritem,.info-card,.nc,.card{animation:u-rise .6s var(--u-out) both;}
    .kat-card:nth-child(2),.ritem:nth-child(2),.info-card:nth-child(2),.nc:nth-child(2){animation-delay:.06s;}
    .kat-card:nth-child(3),.ritem:nth-child(3),.info-card:nth-child(3),.nc:nth-child(3){animation-delay:.12s;}
    .kat-card:nth-child(n+4),.ritem:nth-child(n+4),.nc:nth-child(n+4){animation-delay:.18s;}
}
@media (prefers-reduced-motion:reduce){
    @view-transition{navigation:none;}
}

/* ---------- Layar lebar ---------- */
@media(min-width:1024px){
    .page-dashboard .hero,.page-hdr,.info-hero{border-radius:0 0 48px 48px!important;}
}

/* ---------- Penguat spesifisitas (body membawa kelas halaman) ---------- */
html body.app-native .page-hdr,html body.app-native .info-hero,html body.app-native .profil-hero,html body.app-native .pg-hdr{
    border-radius:0 0 44px 44px!important;
    background:
        radial-gradient(70% 90% at 100% 0%,rgba(56,189,248,.45),transparent 62%),
        radial-gradient(60% 80% at 0% 100%,rgba(129,140,248,.40),transparent 62%),
        linear-gradient(150deg,#172554 0%,#1d4ed8 52%,#0369a1 100%)!important;
}
html body.page-dashboard .stat-card.dark{
    background:linear-gradient(150deg,#1e3a8a,#1d4ed8 60%,#0369a1)!important;
    border-color:rgba(255,255,255,.25)!important;
    box-shadow:0 22px 36px -16px rgba(29,78,216,.7),0 1px 0 rgba(255,255,255,.3) inset!important;
}
html body.page-dashboard .stat-card.dark .sv,html body.page-dashboard .stat-card.dark .sl{color:#fff!important;}
html body.page-dashboard .stat-card.dark .si{background:rgba(255,255,255,.2)!important;color:#fff!important;}
html body.app-native .tabs{margin-left:14px;margin-right:14px;}
html body .chip-action .cs,html body .page-dashboard .chip-action .cs{color:#3f4d63!important;font-size:.64rem;}