:root{--bg:#f3f5f9;--card:#fff;--text:#1b2536;--muted:#667085;--line:#e4e8ef;--head:#f7f9fc;--pri:#1d4ed8;--ok:#15803d;--warn:#b45309;--bad:#b91c1c;--sb:#0c2340}
body{background:var(--bg);color:var(--text)}
/* ===== TEMA PROFESIONAL ===== */
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.shell{display:flex;min-height:100vh}
.sb{width:256px;flex:none;background:var(--sb);color:#cbd6e6;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:11px;align-items:center;padding:2px 6px 18px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;cursor:pointer}
.logo{width:40px;height:40px;flex:none;border-radius:11px;background:linear-gradient(135deg,#3b82f6,#14b8a6);display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.brand b{display:block;color:#fff;font-size:13px;line-height:1.3;font-weight:600}
.brand small{display:block;color:#93a4bd;font-size:11.5px;line-height:1.3;margin-top:2px}
.mlabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f92ae;padding:6px 12px}
.mi{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:9px;color:#cbd6e6;cursor:pointer;margin-bottom:3px;font-size:14.5px;text-decoration:none}
.mi:hover{background:rgba(255,255,255,.08);color:#fff}
.mi.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.mi svg{width:18px;height:18px;flex:none}
.sfoot{margin-top:auto;padding:12px 8px 0;font-size:12px;color:#7f92ae;border-top:1px solid rgba(255,255,255,.1)}
.mn{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:12px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.crumb{font-size:14px;color:var(--muted)}.crumb b{color:var(--text);font-weight:600}
.top .sp{flex:1}.chip{font-size:13px;padding:4px 11px;border-radius:999px;background:var(--head);border:1px solid var(--line)}
.content{max-width:1120px;margin:0 auto;padding:26px 28px 56px}
h1{font-size:22px;font-weight:650;letter-spacing:-.01em}
.card{border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden}
.hero{background:linear-gradient(120deg,#0c2340,#1d4ed8);color:#fff;border-radius:14px;padding:22px 26px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.hero .hx{font-size:48px;font-weight:700;line-height:1}.hero .hl{opacity:.8;font-size:13px;margin-bottom:6px}
.hero .hs{display:flex;gap:30px;flex-wrap:wrap;margin-left:auto}.hero .hs div{font-size:12.5px;opacity:.9}.hero .hs b{display:block;font-size:22px}
.sec{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:6px 0 8px}
th{font-size:11.5px!important;letter-spacing:.05em;text-transform:uppercase;font-weight:600!important;color:var(--muted)!important;background:var(--head)!important}
tbody tr:hover>*{background:var(--head)}
.bw{display:flex;align-items:center;gap:9px}.bw span{font-size:12.5px;font-weight:600;min-width:38px;text-align:right}
.bar{flex:1;height:8px;background:#e6ebf3;border-radius:999px;overflow:hidden;min-width:70px}
.fill{height:100%;border-radius:999px;min-width:0;padding:0}
.g{background:var(--ok)}.y{background:var(--warn)}.rd{background:var(--bad)}
@media(max-width:860px){.shell{display:block}.sb{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;padding:12px 14px}.brand{flex:1 1 100%;border:0;margin:0;padding:0 0 10px}.sb .menu{display:flex;gap:6px}.mlabel,.sfoot{display:none}.top{padding:10px 14px}.content{padding:18px 14px 44px}.hero .hs{margin-left:0}}

/* Penyesuaian Bootstrap */
.btn{border-radius:8px;font-weight:500}
.btn-primary{--bs-btn-bg:var(--pri);--bs-btn-border-color:var(--pri);--bs-btn-hover-bg:#1a43b8;--bs-btn-hover-border-color:#1a43b8}
.btn-outline-primary{--bs-btn-color:var(--pri);--bs-btn-border-color:var(--pri);--bs-btn-hover-bg:var(--pri)}
.form-control,.form-select{border-radius:8px;border-color:#d5dbe5}
.form-control:focus,.form-select:focus{border-color:var(--pri);box-shadow:0 0 0 .2rem rgba(29,78,216,.15)}
.table>:not(caption)>*>*{padding:.8rem 1rem}
.alert{border-radius:10px}
a{color:var(--pri)}
.hd2{background:var(--card);border-bottom:1px solid var(--line);border-left:4px solid var(--pri);padding:14px 28px}
.hd2 .t1{font-size:17px;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.hd2 .t2{font-size:13px;color:var(--muted);margin-top:2px}
.elemen,.el{font-size:.82rem;line-height:1.5}
@media(max-width:860px){.hd2{padding:12px 14px}.hd2 .t1{font-size:15px}}

/* data-induk */
.mi.grp{margin-top:12px;color:#fff;font-weight:600;cursor:default}.mi.grp:hover{background:none}
.mi.sub{padding:8px 12px 8px 40px;font-size:13.5px}
.logo.logo-img{background:#fff;padding:4px;overflow:hidden}.logo.logo-img img{width:100%;height:100%;object-fit:contain;display:block}


/* =========================================================
   TEMA PROFESIONAL — PINK PASTEL
   Latar terang, sidebar terang, satu warna aksen pink.
   ========================================================= */
:root{
  --bg:#f8f0f4;--card:#fff;--text:#2b2230;--muted:#76687a;--line:#ecdae4;--head:#fbf1f6;
  --pri:#b83a82;--pri-h:#9e316f;--pri-50:#fbedf4;--pri-100:#f8dbea;--pri-200:#f3c0db;--pri-300:#eb98c4;
  --sb:#fdf6f9;--grad:linear-gradient(135deg,#9f3f78 0%,#bf5291 100%)
}
body{background:var(--bg)}
::selection{background:var(--pri-200);color:var(--text)}
a{color:var(--pri)}a:hover{color:var(--pri-h)}

/* Tombol & form */
.btn{transition:background .15s,border-color .15s,box-shadow .15s}
.btn-primary{--bs-btn-bg:var(--pri);--bs-btn-border-color:var(--pri);--bs-btn-hover-bg:var(--pri-h);--bs-btn-hover-border-color:var(--pri-h);--bs-btn-active-bg:var(--pri-h);--bs-btn-active-border-color:var(--pri-h);--bs-btn-disabled-bg:var(--pri);--bs-btn-disabled-border-color:var(--pri)}
.btn-outline-primary{--bs-btn-color:var(--pri);--bs-btn-border-color:var(--pri);--bs-btn-hover-bg:var(--pri);--bs-btn-hover-border-color:var(--pri);--bs-btn-active-bg:var(--pri-h);--bs-btn-active-border-color:var(--pri-h)}
.form-control:focus,.form-select:focus{border-color:var(--pri-300);box-shadow:0 0 0 .2rem rgba(139,90,43,.12)}
.form-check-input:checked{background-color:var(--pri);border-color:var(--pri)}
.text-primary{color:var(--pri)!important}.bg-primary,.badge.bg-primary,.progress-bar{background-color:var(--pri)!important}
.page-link{color:var(--pri)}.active>.page-link,.page-link.active{background-color:var(--pri);border-color:var(--pri)}
.nav-pills .nav-link.active{background-color:var(--pri)}

/* Sidebar terang */
.sb{background:var(--sb);color:var(--text);border-right:1px solid var(--line);transition:width .25s ease,transform .25s ease;z-index:40}
.brand{border-bottom:1px solid var(--line)}
.brand b{color:var(--text)}.brand small{color:var(--muted)}
.logo.logo-img{background:#fff;border:1px solid var(--line);padding:4px;overflow:hidden}
.logo.logo-img img{width:100%;height:100%;object-fit:contain;display:block}
.mlabel{color:#a597a6}
.mi{color:#55485a;white-space:nowrap;overflow:hidden;position:relative;transition:background .15s,color .15s}
.mi svg{color:#a07f95}
.mi:hover{background:var(--pri-50);color:var(--text)}
.mi.on{background:var(--pri-100);color:var(--pri-h);font-weight:600}
.mi.on svg{color:var(--pri)}
.mi.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--pri)}
.mi.grp{color:var(--text)}.mi.grp:hover{background:none}
.sfoot{color:var(--muted);border-top:1px solid var(--line)}

/* Sidebar ciut */
.shell.mini .sb{width:76px;padding-left:12px;padding-right:12px}
.shell.mini .brand{justify-content:center;padding-left:0;padding-right:0}
.shell.mini .brand>span:not(.logo),.shell.mini .mlabel,.shell.mini .sfoot,.shell.mini .mi.sub{display:none}
.shell.mini .mi{font-size:0;justify-content:center;padding:11px 0}
.shell.mini .mi.on::before{display:none}

/* Bilah atas & judul */
.top{transition:box-shadow .2s}
.top.melayang{box-shadow:0 4px 16px -10px rgba(59,36,18,.25)}
.hd2{border-left:4px solid var(--pri-300)}
.ix-tgl{border:0;background:transparent;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.ix-tgl:hover{background:var(--head);color:var(--text)}
.ix-tgl svg{width:20px;height:20px}
.ix-caribtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--head);color:var(--muted);border-radius:8px;padding:6px 10px;font-size:13px;min-width:190px}
.ix-caribtn:hover{border-color:var(--pri-200)}
.ix-caribtn svg{width:15px;height:15px}.ix-caribtn span{flex:1;text-align:left}
kbd{font-family:inherit;font-size:11px;padding:1px 6px;border-radius:5px;background:#fff;border:1px solid var(--line);color:var(--muted)}

/* Kartu, hero, tabel */
.content .card{transition:box-shadow .2s,border-color .2s}
.content .card:hover{box-shadow:0 6px 18px -12px rgba(59,36,18,.22)}
.hero,.vk-hero{background:var(--grad)!important;box-shadow:0 10px 24px -16px rgba(111,68,35,.55)!important}
.hero{position:relative}
th{background:var(--head)!important}
tbody tr:hover>*{background:#fbf1f6}

/* Muncul saat scroll (halus) */
.rv{opacity:0;transform:translateY(6px);transition:opacity .35s ease var(--d,0ms),transform .35s ease var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* Progres halaman */
.ix-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:2000;background:var(--pri);opacity:0;pointer-events:none}
.ix-prog.jalan{opacity:1;width:85%;transition:width 6s cubic-bezier(.08,.8,.2,1)}
.ix-prog.selesai{opacity:0;width:100%;transition:width .2s,opacity .3s .2s}

/* Palet pencarian */
.ix-pal{position:fixed;inset:0;z-index:1900;background:rgba(59,36,18,.32);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.ix-pal.on{opacity:1;visibility:visible}
.ix-pal-kotak{width:100%;max-width:560px;background:#fff;border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 60px -24px rgba(59,36,18,.45);overflow:hidden}
.ix-pal-cari{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ix-pal-cari svg{width:18px;height:18px;color:var(--muted)}
.ix-pal-cari input{flex:1;border:0;outline:0;font-size:15px;min-width:0}
.ix-pal ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.ix-pal li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 12px;border-radius:8px;cursor:pointer}
.ix-pal li b{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix-pal li small{color:var(--muted);font-size:12px;flex:none}
.ix-pal li.on{background:var(--pri-50)}.ix-pal li.on b{color:var(--pri-h)}
.ix-pal li.kosong{color:var(--muted);justify-content:center;cursor:default}
.ix-pal-kaki{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--head)}

/* Notifikasi */
.ix-toasts{position:fixed;right:20px;bottom:20px;z-index:1800;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 32px)}
.ix-toast{display:flex;align-items:center;gap:10px;background:#fff;color:var(--text);padding:12px 14px;border-radius:10px;border:1px solid var(--line);border-left:4px solid #3fa977;box-shadow:0 12px 30px -16px rgba(59,36,18,.4);min-width:260px;max-width:420px;font-size:14px;animation:ix-masuk .25s ease}
.ix-toast svg{width:18px;height:18px;flex:none;color:#3fa977}
.ix-toast span{flex:1}
.ix-toast button{border:0;background:none;color:var(--muted);font-size:20px;line-height:1}
.ix-toast i{display:none}
.ix-toast.pergi{transition:opacity .25s;opacity:0}
@keyframes ix-masuk{from{opacity:0;transform:translateY(8px)}}

/* Penyaring tabel & nama berkas */
.ix-saring{display:flex;align-items:center;gap:8px;margin:0 0 10px;max-width:320px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 10px}
.ix-saring:focus-within{border-color:var(--pri-300);box-shadow:0 0 0 3px rgba(139,90,43,.1)}
.ix-saring svg{width:15px;height:15px;color:var(--muted);flex:none}
.ix-saring input{border:0;outline:0;flex:1;font-size:13.5px;padding:4px 0;min-width:0;background:transparent}
.ix-saring span{font-size:12px;color:var(--pri);font-weight:600;white-space:nowrap}
.ix-berkas{font-size:12.5px;color:var(--ok);margin-top:6px}

/* Kembali ke atas */
.ix-naik{position:fixed;right:20px;bottom:20px;z-index:1700;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--pri);background:#fff;box-shadow:0 6px 16px -8px rgba(59,36,18,.35);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
.ix-naik.on{opacity:1;pointer-events:auto}
.ix-naik:hover{background:var(--pri-50)}
.ix-naik svg{width:18px;height:18px}
.ix-toasts:not(:empty)~.ix-naik{bottom:84px}

/* Ponsel: sidebar menjadi laci */
.ix-tirai{display:none}
@media(max-width:860px){
  .shell{display:block}
  .sb{position:fixed;top:0;left:0;bottom:0;width:272px;height:100vh;flex-direction:column;flex-wrap:nowrap;padding:20px 14px;transform:translateX(-105%);overflow-y:auto}
  .sb .menu{display:block}
  .brand{flex:none;margin-bottom:14px;padding:2px 6px 18px}
  .mlabel,.sfoot{display:block}
  .shell.buka .sb{transform:none;box-shadow:16px 0 40px rgba(59,36,18,.18)}
  .ix-tirai{display:block;position:fixed;inset:0;background:rgba(59,36,18,.3);z-index:35;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .shell.buka .ix-tirai{opacity:1;visibility:visible}
  .shell.mini .sb{width:272px}
  .ix-caribtn{min-width:0}.ix-caribtn span,.ix-caribtn kbd{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* =========================================================
   TEMA COKLAT KREM — NUANSA BATIK KAWUNG LINE ART TRANSPARAN
   ========================================================= */
:root{
  --bg:#f6efe3;--card:#fffdf8;--text:#3b2a1a;--muted:#7c6a55;--line:#e7d9c2;--head:#f9f2e6;
  --pri:#8b5a2b;--pri-h:#6f4423;--pri-50:#f7eedf;--pri-100:#efdfc4;--pri-200:#e3c9a0;--pri-300:#cfa776;
  --emas:#c79a4b;--sb:#f3e7d3;--grad:linear-gradient(135deg,#4e2e16 0%,#7a4b25 55%,#a0703c 100%);
  --kawung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%238b5a2b' stroke-width='.7' stroke-linecap='round'%3E%3Cellipse cx='32.0' cy='16.0' rx='7.68' ry='13.44'/%3E%3Cellipse cx='32.0' cy='48.0' rx='7.68' ry='13.44'/%3E%3Cellipse cx='16.0' cy='32.0' rx='13.44' ry='7.68'/%3E%3Cellipse cx='48.0' cy='32.0' rx='13.44' ry='7.68'/%3E%3Cpath d='M32.0 9.6v12.8M32.0 41.6v12.8M9.6 32.0h12.8M41.6 32.0h12.8'/%3E%3Ccircle cx='32.0' cy='32.0' r='1.92'/%3E%3Ccircle cx='0' cy='0' r='3.2'/%3E%3Ccircle cx='64' cy='0' r='3.2'/%3E%3Ccircle cx='0' cy='64' r='3.2'/%3E%3Ccircle cx='64' cy='64' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  --kawung-terang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23f6e6c6' stroke-width='.7' stroke-linecap='round'%3E%3Cellipse cx='32.0' cy='16.0' rx='7.68' ry='13.44'/%3E%3Cellipse cx='32.0' cy='48.0' rx='7.68' ry='13.44'/%3E%3Cellipse cx='16.0' cy='32.0' rx='13.44' ry='7.68'/%3E%3Cellipse cx='48.0' cy='32.0' rx='13.44' ry='7.68'/%3E%3Cpath d='M32.0 9.6v12.8M32.0 41.6v12.8M9.6 32.0h12.8M41.6 32.0h12.8'/%3E%3Ccircle cx='32.0' cy='32.0' r='1.92'/%3E%3Ccircle cx='0' cy='0' r='3.2'/%3E%3Ccircle cx='64' cy='0' r='3.2'/%3E%3Ccircle cx='0' cy='64' r='3.2'/%3E%3Ccircle cx='64' cy='64' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  --ok:#4d7c3a;--warn:#b7791f;--bad:#a23b2a
}
body{background:var(--bg)}
::selection{background:var(--pri-200);color:var(--text)}
.card{background:var(--card)}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(139,90,43,.14)}
.ix-saring:focus-within{box-shadow:0 0 0 3px rgba(139,90,43,.12)}
.bar{background:#ecdfca}
tbody tr:hover>*{background:#f7eedf}
.mlabel{color:#a08a6c}
.mi{color:#5b4632}.mi svg{color:#a07b52}

/* Sidebar krem dengan motif kawung samar + garis emas */
.sb{background-color:var(--sb);background-image:linear-gradient(rgba(243,231,211,.9),rgba(243,231,211,.9)),var(--kawung);background-size:auto,64px 64px;border-right:0;box-shadow:inset -3px 0 0 var(--emas)}
.brand{border-bottom:1px solid var(--pri-200)}
.brand b{color:var(--pri-h);font-size:13.5px}

/* Hero & bilah judul: sogan dengan kawung terang */
/* Gradasi coklat tua -> krem; motif tipis di lapisan terpisah */
.hero,.vk-hero{background:linear-gradient(120deg,#2e1b0d 0%,#4e2e16 30%,#7a4b25 58%,#b68a55 82%,#e6d1aa 100%)!important;box-shadow:0 10px 24px -16px rgba(46,27,13,.6)!important;isolation:isolate}
.hero::before,.vk-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--kawung-terang) 0 0/64px 64px repeat;opacity:.12;
  -webkit-mask-image:linear-gradient(120deg,transparent 0%,transparent 35%,#000 75%);mask-image:linear-gradient(120deg,transparent 0%,transparent 35%,#000 75%)}
.vk-deko{display:none}
/* Kartu & teks tetap terbaca saat latar menjadi krem */
.hero,.vk-hero{text-shadow:0 1px 2px rgba(46,27,13,.35)}
.kz-k{background:rgba(46,27,13,.30)!important;border-color:rgba(255,240,215,.22)!important}
.kz-k:hover{background:rgba(46,27,13,.40)!important}
.kz-k.on{background:rgba(46,27,13,.48)!important;border-color:#f3e1bd!important}
.vk-kpi{background:rgba(46,27,13,.30)!important;border-color:rgba(255,240,215,.2)!important}
.hd2{border-left:4px solid var(--emas);background-image:linear-gradient(90deg,var(--card) 70%,rgba(255,253,248,.85)),var(--kawung);background-size:auto,64px 64px}
.top{background:var(--card);border-bottom:2px solid var(--pri-100)}

/* Latar konten: motif kawung samar (pengganti watermark logo) */
.shell::before{content:"";position:fixed;top:0;bottom:0;left:256px;right:0;z-index:-1;pointer-events:none;background:var(--kawung) 0 0/64px 64px repeat;opacity:.07}
.shell.mini::before{left:76px}
@media(max-width:860px){.shell::before{left:0}}
@media print{.shell::before{display:none}}

/* Halaman masuk */
.lg-art{background-color:var(--pri-50)!important;background-image:linear-gradient(rgba(247,238,223,.85),rgba(247,238,223,.85)),var(--kawung)!important;background-size:auto,64px 64px!important}
.lg-art h2{color:var(--pri-h)}
.lg-art .lg-garis{background:var(--emas)!important}