:root{--navy:#07152d;--navy-2:#0d1f3c;--navy-3:#13294d;--gold:#d7b45c;--gold-2:#e7d29a;--ink:#1d2433;--muted:#6b7385;--bg:#f4f6fa}
body.portal{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.portal>div,.portal>main{flex:1}
.portal-nav{background:linear-gradient(90deg,var(--navy),var(--navy-3));border-bottom:2px solid rgba(215,180,92,.55)}
.portal-nav .navbar-brand{color:#fff;font-weight:600}
.portal-nav .brand-1{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:1.35rem;letter-spacing:2px}
.portal-nav .brand-2{font-size:.9rem;opacity:.9}
.portal-nav .nav-link{color:rgba(255,255,255,.78)}
.portal-nav .nav-link:hover,.portal-nav .nav-link.active{color:var(--gold-2)}
.portal-nav .navbar-toggler{color:#fff;border-color:rgba(255,255,255,.3)}
.portal-foot{text-align:center;color:var(--muted);font-size:12px;padding:18px}
@media (max-width:576px){.portal-nav .brand-2{display:none}}

/* admin */
.admin-wrap{display:flex;min-height:calc(100vh - 110px)}
.admin-side{width:236px;flex-shrink:0;background:#fff;border-right:1px solid #e3e7ef;padding:14px 10px}
.admin-side .side-title{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding:6px 12px 10px}
.side-link{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.92rem}
.side-link:hover{background:#f0f3f9}
.side-link.active{background:var(--navy);color:var(--gold-2)}
.admin-main{flex:1;min-width:0;padding:22px 26px}
@media (max-width:992px){.admin-wrap{flex-direction:column}.admin-side{width:auto;display:flex;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid #e3e7ef}.admin-side .side-title{display:none}.admin-main{padding:16px}}
.page-title{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.9rem;color:var(--navy);margin-bottom:.2rem}
.page-sub{color:var(--muted);margin-bottom:1.2rem}
.card{border:1px solid #e3e7ef;border-radius:12px}
.card-header{background:#fff;font-weight:600;border-bottom:1px solid #eef1f6}
.stat{background:#fff;border:1px solid #e3e7ef;border-radius:12px;padding:16px}
.stat .n{font-size:1.7rem;font-weight:700;color:var(--navy)}
.stat .l{color:var(--muted);font-size:.85rem}
.table{font-size:.9rem}
.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3);color:var(--gold-2)}
.text-bg-tosca{background:#0f9c8c!important;color:#fff}.text-bg-ungu{background:#6f42c1!important;color:#fff}

/* aplikasi saya */
.hero{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;border-radius:16px;padding:26px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(215,180,92,.25),transparent 70%)}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:2rem;margin:0;color:var(--gold-2)}
.hero p{margin:.3rem 0 0;color:rgba(255,255,255,.75)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.app-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid #e3e7ef;border-radius:14px;padding:22px 14px;text-decoration:none;color:var(--ink);transition:.15s}
.app-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(7,21,45,.10);border-color:var(--gold);color:var(--ink)}
.app-tile .nama{font-weight:700;letter-spacing:.5px}
.app-tile .desk{font-size:.82rem;color:var(--muted)}
.app-tile.terkunci{opacity:.45;pointer-events:none}
.app-logo{width:64px;height:64px;object-fit:contain}
.app-logo-sm{width:28px;height:28px;object-fit:contain;font-size:.8rem}
.app-logo-huruf{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;color:#fff;font-weight:700;font-size:1.6rem}
.app-logo-sm.app-logo-huruf{border-radius:7px;font-size:.85rem}

/* login */
body.login-page{min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;font-family:Inter,system-ui,sans-serif;color:#fff;
 background:radial-gradient(circle at 50% 15%,rgba(196,160,75,.12),transparent 35%),linear-gradient(135deg,#020817 0%,#07152d 45%,#020817 100%)}
.login-box{width:100%;max-width:410px}
.login-box .logo{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(218,179,84,.25))}
.login-box .eyebrow{letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-size:12px;margin-top:14px}
.login-box h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2.1rem;margin:4px 0 18px;background:linear-gradient(135deg,#fff 15%,#e7d29a 50%,#fff 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-card{background:rgba(13,31,60,.85);border:1px solid rgba(215,180,92,.28);border-radius:16px;padding:26px;backdrop-filter:blur(8px)}
.login-card label{font-size:.85rem;color:rgba(255,255,255,.75)}
.login-card .form-control{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.login-card .form-control:focus{background:rgba(255,255,255,.1);border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(215,180,92,.2);color:#fff}
.login-card .form-check-label{color:rgba(255,255,255,.7)}
.login-app{display:flex;align-items:center;gap:10px;background:rgba(215,180,92,.1);border:1px solid rgba(215,180,92,.3);border-radius:10px;padding:8px 12px;margin-bottom:16px;font-size:.9rem}
.login-foot{color:rgba(255,255,255,.35);font-size:11px;text-align:center;margin-top:18px}