:root{--brand:#123A32;--brand-2:#1C5247;--brand-ink:#0B1B17;--bg:#EFECE4;--paper:#FFFFFF;--ink:#15130E;--muted:#867F74;--line:#E4DFD4;--brass:#A6792C;--brass-2:#C89A4E;--ok:#2E7D5B;--danger:#A24333;--warn:#B7791F;--fd:"Fraunces",serif;--fb:"Manrope",system-ui,sans-serif;--fm:"IBM Plex Mono",monospace;--r:14px;--r-sm:10px;--sh-sm:0 1px 2px rgba(11,27,23,.06),0 1px 3px rgba(11,27,23,.05);--sh:0 4px 14px rgba(11,27,23,.07),0 2px 6px rgba(11,27,23,.05);--sh-lg:0 18px 44px rgba(11,27,23,.14)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--fb);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}h1,h2,h3{font-family:var(--fd);font-weight:500;letter-spacing:-.015em;line-height:1.14;color:var(--ink)}::selection{background:var(--brass);color:#fff}.wrap{max-width:1120px;margin:0 auto;padding:0 24px}header.top{background:#0b1b17eb;backdrop-filter:saturate(1.2) blur(8px);color:#e7ece6;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}header.top .in{display:flex;align-items:center;gap:18px;height:62px}header.top .mk{font-family:var(--fd);font-weight:600;font-size:22px;color:#f1eee4;display:flex;align-items:center;gap:8px}header.top .mk .dot{width:9px;height:9px;border-radius:50%;background:var(--brass-2);box-shadow:0 0 0 3px #c89a4e33}header.top .mk small{font-family:var(--fm);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2)}header.top nav{margin-left:auto;display:flex;align-items:center;gap:4px}header.top nav a{padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600;color:#aeb9b0;transition:.14s}header.top nav a:hover{background:#ffffff14;color:#f1eee4}header.top nav a.cta{background:var(--brass);color:#231705}header.top nav a.cta:hover{background:var(--brass-2)}.badge{font-family:var(--fm);font-size:10.5px;letter-spacing:.03em;padding:5px 10px;border-radius:7px;background:#ffffff17;color:#cfe0d8}.app{display:flex;min-height:100vh}.side{width:246px;flex:none;background:var(--brand-ink);color:#c6d2ca;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.side .brand{padding:20px 20px 14px;font-family:var(--fd);font-size:21px;color:#f1eee4;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.07)}.side .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brass-2);box-shadow:0 0 0 3px #c89a4e33}.side .rol{font-family:var(--fm);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-2);padding:12px 20px 6px}.side nav{display:flex;flex-direction:column;gap:2px;padding:2px 12px;overflow-y:auto;flex:1}.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:#a9b8ae;transition:.14s}.side nav a svg{width:17px;height:17px;flex:none;opacity:.8}.side nav a:hover{background:#ffffff0f;color:#f1eee4}.side nav a.aktif{background:var(--brand);color:#f1eee4}.side nav a.aktif svg{opacity:1;color:var(--brass-2)}.side .alt{border-top:1px solid rgba(255,255,255,.07);padding:14px 16px;display:flex;align-items:center;gap:10px}.side .alt .av{width:34px;height:34px;border-radius:9px;background:var(--brand);color:#f1eee4;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}.side .alt .nm{flex:1;min-width:0;font-size:13px;font-weight:600;color:#e7ece6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side .alt a{color:#8ba093;font-size:12px}.side .alt a:hover{color:#f1eee4}.appmain{flex:1;min-width:0;background:var(--bg)}.appbar{display:none}main{min-height:60vh}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm)}a.card,.card.tik{transition:transform .16s,box-shadow .16s,border-color .16s}a.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#d9d2c4}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:700;padding:11px 18px;background:var(--brand);color:#f1eee4;cursor:pointer;text-decoration:none;transition:.15s;box-shadow:var(--sh-sm)}.btn:hover{background:var(--brand-2);transform:translateY(-1px);box-shadow:var(--sh)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}.btn-ghost:hover{background:var(--bg);border-color:#d3ccbe}label{display:block;font-size:12.5px;font-weight:600;color:#5b554d;margin-bottom:6px}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink);margin-bottom:14px;transition:.14s}input:hover,select:hover,textarea:hover{border-color:#d3ccbe}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #123a321a}:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.seal{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass);font-weight:500}.alert{border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;margin-bottom:16px}.alert.err{background:#a243331a;color:var(--danger)}.alert.ok{background:#2e7d5b1f;color:var(--ok)}.ilan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}.kutu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}footer.foot{background:var(--brand-ink);color:#8ba093;padding:30px 0;margin-top:64px;font-size:13px;border-top:1px solid rgba(255,255,255,.06)}header.top nav::-webkit-scrollbar,.side nav::-webkit-scrollbar{display:none}@media(max-width:900px){.app{flex-direction:column;min-height:auto}.side{width:auto;height:auto;position:sticky;top:0;z-index:50;flex-direction:column}.side .rol{display:none}.side nav{flex-direction:row;overflow-x:auto;padding:8px 10px;gap:4px}.side nav a{white-space:nowrap;padding:8px 12px}.side nav a span.t{display:inline}.side .alt{order:-1}}@media(max-width:720px){.wrap{padding:0 16px}header.top .in{gap:10px;height:56px}header.top nav{overflow-x:auto}header.top nav a{padding:8px 10px;font-size:13px;white-space:nowrap}header.top .mk{font-size:19px}header.top .mk small{display:none}h1{font-size:clamp(24px,7vw,34px)!important}.card{padding:18px}}