/* Panel pendaftar, panel admin, dan halaman masuk/daftar */
:root{--line:#e2e8f0;--muted:#64748b;--bg:#f1f5f9;--r-lg:18px;--r-md:12px;--side-w:264px}
body{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--primary)} a:hover{color:var(--primary-dark)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.text-muted{color:var(--muted)!important}

/* Tombol */
.btn{font-weight:600;border-radius:10px}
.btn-brand{background:var(--primary);border:1px solid var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--primary) 80%,transparent)}
.btn-brand:hover,.btn-brand:focus,.btn-brand:active{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important;color:#fff!important}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff;display:inline-flex;align-items:center;gap:.4rem}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--soft)}
.btn-lg{padding:.8rem 1.2rem;border-radius:12px;font-size:1rem}

/* Formulir */
.form-control,.form-select{border-radius:10px;border-color:#cbd5e1;padding:.6rem .85rem}
.form-floating>.form-control{padding-top:1.6rem;padding-bottom:.6rem}
.input-group>.form-floating>.form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>.btn{border-radius:0 10px 10px 0}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--primary);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--primary) 18%,transparent)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-label{font-weight:600;font-size:.9rem;color:#334155}
.alert{border-radius:var(--r-md);border:0}

/* Logo */
.mark{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));color:var(--primary-dark);font-size:1.05rem}
.brand-mark{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--ink);text-decoration:none}

/* ===== Halaman masuk / daftar ===== */
.auth-body{background:#fff}
.auth-split{display:grid;grid-template-columns:minmax(380px,44%) 1fr;min-height:100vh}
.auth-art{position:relative;overflow:hidden;color:#fff;padding:2.5rem 3rem;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;
  background:radial-gradient(600px 400px at 100% 0%,color-mix(in srgb,var(--secondary) 60%,transparent),transparent 65%),linear-gradient(160deg,var(--primary),color-mix(in srgb,var(--primary-dark) 70%,#020617))}
.auth-art::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 30% 40%,#000,transparent 75%)}
.auth-logo{display:inline-flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.05rem;color:inherit;text-decoration:none}
.auth-art .auth-logo{color:#fff}
.auth-art h2{font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:1.75rem;max-width:16ch}
.auth-art ul{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;color:rgba(255,255,255,.85)}
.auth-art li i{color:var(--accent);margin-right:.5rem}
.auth-art small{color:rgba(255,255,255,.6)}
.auth-main{display:grid;place-items:center;padding:2.5rem 1.25rem}
.auth-form{width:min(440px,100%)}
.auth-main .auth-logo{color:var(--ink)}
.auth-title{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;margin-bottom:.35rem}
.auth-sub{color:var(--muted);margin-bottom:1.75rem}
@media (max-width:991.98px){.auth-split{grid-template-columns:1fr}.auth-art{display:none}.auth-main{place-items:start center;padding-top:3rem}}

/* ===== Panel ===== */
.panel-body{background:var(--bg);min-height:100vh}
.side{background:color-mix(in srgb,var(--primary-dark) 60%,#020617);color:#fff;display:flex;flex-direction:column}
@media (min-width:992px){
  .side{position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:30}
  .panel-main{margin-left:var(--side-w)}
}
@media (max-width:991.98px){.side.offcanvas-lg{--bs-offcanvas-width:280px;background:color-mix(in srgb,var(--primary-dark) 60%,#020617)}}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.25rem 1rem}
.side-logo{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none;font-weight:800;line-height:1.2}
.side-logo:hover{color:#fff}
.side-logo small{display:block;font-weight:600;font-size:.72rem;color:rgba(255,255,255,.55)}
.side-nav{display:flex;flex-direction:column;gap:.15rem;padding:.75rem;flex:1;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:.75rem;color:rgba(255,255,255,.72);text-decoration:none;font-weight:600;font-size:.93rem;padding:.65rem .85rem;border-radius:10px;transition:background .15s,color .15s}
.side-nav a i{font-size:1.1rem;width:1.2rem;text-align:center}
.side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav a.active{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.side-sep{height:1px;background:rgba(255,255,255,.1);margin:.75rem .5rem}
.side-user{display:flex;align-items:center;gap:.7rem;padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}
.side-user .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent);color:#1a1405;font-weight:800}
.side-user .nm{flex:1;min-width:0;font-weight:700;font-size:.88rem;line-height:1.25;overflow:hidden}
.side-user small{display:block;font-weight:500;color:rgba(255,255,255,.55);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.75rem;padding:.9rem 1.75rem;background:rgba(241,245,249,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-title{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.panel-content{padding:1.75rem;max-width:1280px}
@media (max-width:575.98px){.panel-content{padding:1.1rem}.topbar{padding:.75rem 1rem}}
.panel-content h1.h4{font-weight:800;letter-spacing:-.02em}

/* Kotak & tabel */
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.box-title{font-weight:800;font-size:1.02rem;margin-bottom:1rem;letter-spacing:-.01em}
.box.p-0 .table{margin:0}
.table{--bs-table-bg:transparent}
.table>thead th{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:none;background:#f8fafc;border-bottom:1px solid var(--line);padding:.75rem 1rem}
.table>tbody td{padding:.85rem 1rem;border-color:#f1f5f9}
.table>tbody tr:hover{background:#f8fafc}
.table>:not(caption)>*>*{vertical-align:middle}
.box.p-0 .table thead th:first-child{border-top-left-radius:var(--r-lg)}
.box.p-0 .table thead th:last-child{border-top-right-radius:var(--r-lg)}
.badge{font-weight:700;border-radius:999px;padding:.4em .75em}
.stat{font-size:2rem;font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.03em;margin:.25rem 0}
dl.row dt{font-weight:600;color:var(--muted);font-size:.9rem}
dl.row dd{margin-bottom:.65rem}
.pagination{--bs-pagination-active-bg:var(--primary);--bs-pagination-active-border-color:var(--primary);--bs-pagination-color:var(--primary)}

/* Pilihan layanan */
.svc-pick{border:1.5px solid var(--line);border-radius:12px;padding:.9rem 1rem;display:flex;gap:.8rem;cursor:pointer;height:100%;transition:border-color .15s,background .15s}
.svc-pick:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.svc-pick:has(input:checked){border-color:var(--primary);background:var(--soft)}
.svc-pick .nm{font-weight:700}
.svc-pick small{color:var(--muted)}
.svc-badge{display:inline-block;font-size:.68rem;font-weight:800;background:color-mix(in srgb,var(--accent) 25%,#fff);color:color-mix(in srgb,var(--accent) 45%,#000);border-radius:999px;padding:.12rem .55rem;margin-left:.35rem;vertical-align:middle}

/* Riwayat */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 1.1rem 1.5rem;border-left:2px solid var(--line);margin-left:.45rem}
.timeline li::before{content:"";position:absolute;left:-8px;top:.3rem;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--primary)}
.timeline li:first-child::before{background:var(--primary);box-shadow:0 0 0 4px var(--soft)}
.timeline li:last-child{border-left-color:transparent}
@media (min-width:992px){.side.offcanvas-lg{background-color:color-mix(in srgb,var(--primary-dark) 60%,#020617)!important;visibility:visible!important}}

/* Logo unggahan */
.logo-img{height:38px;width:auto;max-width:190px;object-fit:contain;display:block;flex:none}
.side-logo .logo-text,.auth-logo .logo-text{line-height:1.2}
.side-logo .logo-text small{display:block;font-weight:600;font-size:.72rem;color:rgba(255,255,255,.55)}

/* Placeholder lebih samar */
.form-control::placeholder{color:#a3adba;opacity:1}
/* Teks panjang (URL, nama) tidak boleh melebarkan halaman di HP */
.panel-content{overflow-wrap:break-word;min-width:0}
.panel-content .table{overflow-wrap:normal;word-break:normal}
.panel-content .table th{white-space:nowrap}
.panel-content .table td{min-width:7rem}
.panel-main{min-width:0;overflow-x:hidden}
/* Kotak "Aplikasi sudah aktif" */
.app-ready{display:flex;gap:.9rem;align-items:flex-start;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:14px;padding:1rem 1.1rem}
.app-ready-ico{flex:none;width:40px;height:40px;border-radius:50%;background:#10b981;color:#fff;display:grid;place-items:center;font-size:1.3rem}
.app-ready-body{min-width:0;flex:1}
.app-ready-url{font-size:.88rem;color:#047857;word-break:break-all;margin-top:.15rem}

/* Menu samping: scrollbar tipis & menyatu */
.side-nav{scrollbar-width:thin;scrollbar-color:transparent transparent;padding-top:.5rem;padding-bottom:.5rem}
.side-nav:hover{scrollbar-color:rgba(255,255,255,.22) transparent}
.side-nav::-webkit-scrollbar{width:6px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.side-nav::-webkit-scrollbar-button{display:none;height:0}
.side-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
.side-nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.side-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38)}
.side-nav a{padding:.55rem .85rem}
@media (max-height:760px){.side-nav a{padding:.45rem .85rem;font-size:.9rem}.side-head{padding:1rem 1.25rem .6rem}}