@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/fraunces.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); }

:root {
  --paper:#fbfaf7;
  --surface:#ffffff;
  --ink:#17181c;
  --muted:#6b7280;
  --faint:#6a707c;
  --navy:#16243d;
  --navy-2:#22355a;
  --noir:#191a1f;
  --noir-2:#0c0d11;
  --noir-3:#23252c;
  --accent:#b58a4c;
  --accent-2:#966f35;
  --line:#e7e4dc;
  --line-2:#f1eee6;
  --green:#2f7a54;
  --red:#b3424e;
  --blue:#3a5b8f;
  --radius:16px;
  --shadow: 0 1px 2px rgba(23,24,28,.04), 0 10px 30px rgba(23,24,28,.05);
  --shadow-lg: 0 24px 50px rgba(23,24,28,.12);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family:var(--font-body); color:var(--ink); background:var(--paper); font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:none; }
a:hover { color:var(--accent-2); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); line-height:1.2; margin:0 0 .5rem; }
p { margin:0 0 1rem; }
img { max-width:100%; }
[x-cloak] { display:none !important; }

.container { max-width:1160px; margin:0 auto; padding:0 24px; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:1px solid transparent; font-weight:600; font-size:13.5px; cursor:pointer; line-height:1.2; transition:transform .18s cubic-bezier(.22,1,.36,1), background .18s, color .18s, border-color .18s; background:var(--noir); color:#fff; }
.btn:active { transform:scale(.98); }
.btn:hover { background:var(--noir-2); color:#fff; }
.btn-gold { background:var(--accent); color:#fff; }
.btn-gold:hover { background:var(--accent-2); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn-outline:hover { border-color:var(--ink); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:rgba(25,26,31,.06); }

.btn-back { display:inline-flex; align-items:center; gap:8px; padding:5px 16px 5px 5px; border:1px solid var(--accent); background:linear-gradient(135deg, #c99d5e 0%, var(--accent) 55%, var(--accent-2) 100%); border-radius:999px; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:#fff; box-shadow:0 2px 10px rgba(181,138,76,.32); transition:all .22s cubic-bezier(.22,1,.36,1); }
.btn-back-ico { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(2px); transition:transform .22s cubic-bezier(.22,1,.36,1), background .2s; box-shadow:inset 0 1px 2px rgba(255,255,255,.25); }
.btn-back-ico i { transition:transform .22s cubic-bezier(.22,1,.36,1); }
.btn-back-txt { padding-right:2px; letter-spacing:.02em; text-shadow:0 1px 2px rgba(120,84,32,.25); }
.btn-back:hover { background:linear-gradient(135deg, #d4a968 0%, var(--accent) 55%, #a87d3f 100%); transform:translateY(-1px); box-shadow:0 5px 16px rgba(181,138,76,.42); color:#fff; border-color:#c99d5e; }
.btn-back:hover .btn-back-ico { background:rgba(255,255,255,.28); }
.btn-back:hover .btn-back-ico i { transform:translateX(-2px); }
.btn-back:active { transform:translateY(0) scale(.97); box-shadow:0 1px 5px rgba(181,138,76,.3); }
.btn-sm { padding:6px 12px; font-size:12.5px; }
.btn-danger { background:var(--red); color:#fff; }
.btn-wa { background:#1f9d55; color:#fff; }
.btn-wa:hover { background:#187a42; color:#fff; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

.alert { padding:12px 16px; border-radius:12px; font-size:13.5px; margin-bottom:16px; }
.alert-error { background:#fbf1f2; color:var(--red); border:1px solid #f2d7da; }
.alert-success { background:#eef7f0; color:var(--green); border:1px solid #d2e8d9; }

.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:11px; margin-bottom:6px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.field input, .field textarea, .field select { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid rgba(181,138,76,.25); border-color:var(--accent); }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ===== LOGIN ===== */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:
  radial-gradient(1400px 700px at 15% -10%, rgba(181,138,76,.14), transparent 60%),
  radial-gradient(1200px 600px at 90% 110%, rgba(25,26,31,.08), transparent 55%),
  linear-gradient(180deg, #fbfaf7, #f4f1ea); padding:24px; }
.login-wrap { width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; }
.login-card {
  position:relative; width:100%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:26px;
  box-shadow:0 24px 60px rgba(25,26,31,.12), 0 2px 8px rgba(25,26,31,.05);
  padding:46px 42px 30px; overflow:hidden;
}
.login-accent {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.login-brand { display:flex; justify-content:center; margin-bottom:20px; }
.login-logo-full {
  max-width:280px; width:100%; height:auto; display:block;
  filter:drop-shadow(0 8px 18px rgba(25,26,31,.12));
}
.login-title { font-family:var(--head); font-size:1.5rem; font-weight:700; color:var(--ink); text-align:center; line-height:1.3; }
.login-sub { text-align:center; color:var(--muted); font-size:12.5px; letter-spacing:.06em; margin:8px 0 26px; }
.login-alert { margin-bottom:18px; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:7px; letter-spacing:.02em; }
.login-input {
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:0 14px; transition:border-color .2s, box-shadow .2s;
}
.login-input i { color:var(--faint); flex:none; }
.login-input input { flex:1; border:none; background:transparent; padding:13px 0; font-size:14px; color:var(--ink); outline:none; min-width:0; }
.login-input input::placeholder { color:var(--faint); }
.login-input:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px rgba(181,138,76,.15); }
.login-btn {
  width:100%; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border:none; color:#fff; font-family:var(--head); font-weight:700; font-size:14.5px;
  padding:14px 20px; border-radius:12px; cursor:pointer; margin-top:8px;
  box-shadow:0 10px 24px rgba(181,138,76,.35); transition:transform .15s, box-shadow .15s;
}
.login-btn:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(181,138,76,.45); }
.login-foot { margin-top:20px; text-align:center; font-size:12.5px; }
.login-foot a { color:var(--muted); text-decoration:none; }
.login-foot a:hover { color:var(--accent); }
.login-copy { margin-top:18px; color:var(--faint); font-size:11px; letter-spacing:.05em; }

/* ===== SHELL / RAIL ===== */
.shell { display:flex; min-height:100vh; }
.main-col { display:flex; flex-direction:column; flex:1; min-width:0; }
.rail { width:252px; flex:none; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; transition:width .28s cubic-bezier(.22,1,.36,1); border-right:1px solid var(--line); }
.rail-brand { display:flex; align-items:center; justify-content:center; padding:20px 12px 16px; border-bottom:1px solid var(--line); position:relative; }
.rail-logo-img { width:100%; max-width:214px; height:auto; display:block; background:#fff; border-radius:10px; padding:7px; box-shadow:0 6px 18px rgba(12,13,17,.10); }
.rail-mark { display:none; width:40px; height:40px; border-radius:12px; background:var(--accent); color:#0c0d11; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:20px; box-shadow:0 6px 18px rgba(12,13,17,.12); }
.rail-logo { width:40px; height:40px; flex:none; }
.rail-logo svg { width:100%; height:100%; }
.rail-brand-txt { display:flex; flex-direction:column; line-height:1.15; }
.rail-brand-txt span { font-size:9px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.rail-brand-txt strong { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.rail-nav { flex:1; overflow-y:auto; padding:16px 12px; display:flex; flex-direction:column; gap:2px; }
.rail-nav::-webkit-scrollbar { width:0; }
.rail-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:var(--muted); font-size:13.5px; font-weight:500; border:0; background:none; cursor:pointer; text-align:left; width:100%; transition:.15s; font-family:var(--font-body); }
.rail-item i { width:18px; height:18px; flex:none; opacity:.9; }
.rail-item:hover { background:rgba(25,26,31,.06); color:var(--ink); }
.rail-item.active { background:var(--accent); color:#0c0d11; font-weight:700; }
.rail-foot { border-top:1px solid var(--line); padding:16px; }
.rail-clock { display:flex; flex-direction:column; margin-bottom:14px; font-size:11px; color:var(--muted); }
.rail-clock .t { color:var(--ink); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; }
.rail-user { display:flex; align-items:center; gap:10px; }
.rail-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none; }
.rail-user-txt { flex:1; min-width:0; }
.rail-user-txt strong { display:block; color:var(--ink); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-user-txt span { font-size:11px; color:var(--muted); text-transform:capitalize; }
.rail-logout { border:0; background:rgba(25,26,31,.06); color:var(--muted); border-radius:8px; padding:7px; cursor:pointer; display:flex; align-items:center; transition:.15s; }
.rail-logout:hover { background:var(--red); color:#fff; }

/* ===== RAIL COLLAPSED (icon rail, desktop) ===== */
.rail.collapsed { width:74px; }
.rail.collapsed .rail-brand { padding:18px 0; justify-content:center; border-bottom:1px solid var(--line); }
.rail.collapsed .rail-logo-img { display:none; }
.rail.collapsed .rail-mark { display:flex; }
.rail.collapsed .rail-nav { padding:14px 10px; align-items:center; gap:8px; }
.rail.collapsed .rail-item { justify-content:center; padding:10px 0; width:44px; }
.rail.collapsed .rail-item span { display:none; }
.rail.collapsed .rail-item i { width:20px; height:20px; }
.rail.collapsed .rail-foot { padding:14px 6px; }
.rail.collapsed .rail-clock { display:none; }
.rail.collapsed .rail-user { justify-content:center; }
.rail.collapsed .rail-user-txt { display:none; }

.content { flex:1; min-width:0; padding:0 40px 44px; }

/* ===== APP BAR ===== */
.appbar { display:flex; align-items:center; gap:12px; padding:12px 40px 14px; position:sticky; top:0; z-index:40; background:#fff; color:var(--ink); border-bottom:1px solid var(--line); pointer-events:auto; }
.icon-btn { padding:9px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(12,13,17,.08); flex:none; }
.icon-btn:hover { background:var(--paper); border-color:var(--accent); color:var(--ink); }
.icon-btn i { width:20px; height:20px; display:block; }
.appbar-title { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appbar-brand { display:none; align-items:center; gap:8px; text-decoration:none; color:#fff; }
.brand-logo { height:30px; width:auto; background:#fff; border-radius:5px; padding:2px 6px; }

/* ===== PROFILE (kanan appbar) ===== */
.appbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.profile-chip { display:flex; align-items:center; gap:9px; padding:5px 6px; border:1px solid var(--line); border-radius:999px; background:var(--paper); box-shadow:0 2px 6px rgba(12,13,17,.05); flex:none; }
.profile-avatar-img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none; }
.profile-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; flex:none; }
.profile-meta { display:flex; flex-direction:column; line-height:1.1; text-align:left; padding-right:6px; }
.profile-meta strong { font-size:12.5px; font-weight:600; color:var(--ink); }
.profile-meta em { font-size:11px; font-style:normal; color:var(--muted); }
@media (max-width:560px) { .profile-meta { display:none; } }
.appbar-logout { color:#dc2626; }
.appbar-logout:hover { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }

/* ===== MOBILE OVERLAY ===== */
.rail-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; backdrop-filter:blur(2px); }

/* ===== HERO BAND (stat ringkas) ===== */
.hero-band { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.hb-item { flex:1; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow); border-left:3px solid var(--line); }
.hb-gold { border-left-color:var(--accent); }
.hb-blue { border-left-color:#3b82f6; }
.hb-green { border-left-color:#22c55e; }
.hb-val { font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); line-height:1.1; }
.hb-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-top:4px; }

/* ===== PAGE HEAD ===== */
.page-head { margin-bottom:24px; }
.page-head-with-back { display:flex; flex-direction:column; gap:0; }
.page-head-with-back .btn-back { align-self:flex-start; margin-bottom:10px; }
.page-head h1 { font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:0; margin:0; }
.page-head .kick { font-size:12px; letter-spacing:.04em; color:var(--muted); font-weight:500; margin-top:6px; }

/* ===== SECTION TITLE ===== */
.section-title { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink); }
.section-title .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }

/* ===== BROADCAST ===== */
.broadcast { position:relative; overflow:hidden; height:270px; display:flex; flex-direction:column; background:linear-gradient(135deg,#3a2e22,#28201a); border:1px solid #4d3f32; border-radius:20px; color:#fff; padding:28px 32px; box-shadow:var(--shadow-lg); }
.broadcast-pengumuman { height:320px; }
.broadcast-pengumuman .broadcast-slide .j { font-size:24px; -webkit-line-clamp:1; }
.broadcast-pengumuman .broadcast-slide .i { font-size:14px; -webkit-line-clamp:4; line-height:1.65; }
.broadcast-klien { height:300px; }
.broadcast-klien .broadcast-slide .j { font-size:22px; -webkit-line-clamp:1; }
.broadcast-klien .broadcast-slide .i { font-size:14px; -webkit-line-clamp:3; line-height:1.6; }
.broadcast::before { content:''; position:absolute; top:-80px; right:-50px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(181,138,76,.30), transparent 70%); pointer-events:none; }
.broadcast::after { content:''; position:absolute; bottom:-60px; left:15%; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(181,138,76,.15), transparent 70%); pointer-events:none; }
.broadcast-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1); position:relative; z-index:1; }
.broadcast-title { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.broadcast-stage { flex:1; display:flex; align-items:center; position:relative; z-index:1; min-height:0; overflow:hidden; }
.broadcast-slide { width:100%; min-height:0; }
.broadcast-slide .j { font-family:var(--font-display); font-size:26px; font-weight:600; color:#fff; margin-bottom:8px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.broadcast-slide .i { color:#d6d3cd; font-size:15px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.broadcast-slide .meta { color:#9a968f; font-size:12px; margin-top:10px; }
.broadcast-dots { display:flex; gap:8px; justify-content:center; margin-top:16px; position:relative; z-index:1; }
.broadcast-dots button { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); border:0; cursor:pointer; padding:0; transition:.2s; }
.broadcast-dots button.active { background:var(--accent); width:20px; border-radius:99px; }
.broadcast-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; position:relative; z-index:1; }
.broadcast-nav .broadcast-dots { margin-top:0; }
.bc-nav-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.8); cursor:pointer; transition:.18s;
}
.bc-nav-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.broadcast-agenda { background:linear-gradient(135deg,#1f2f45,#182540); border-color:#2e4260; }
.broadcast-agenda::before { background:radial-gradient(circle, rgba(59,130,246,.22), transparent 70%); }
.broadcast-agenda::after { background:radial-gradient(circle, rgba(96,165,250,.12), transparent 70%); }
.broadcast-action { background:linear-gradient(135deg,#3d2020,#2c1616); border-color:#553030; }
.broadcast-action::before { background:radial-gradient(circle, rgba(239,68,68,.22), transparent 70%); }
.broadcast-action::after { background:radial-gradient(circle, rgba(252,165,165,.12), transparent 70%); }
.broadcast-penugasan { background:linear-gradient(135deg,#1e3520,#182a18); border-color:#2e4d30; }
.broadcast-penugasan::before { background:radial-gradient(circle, rgba(34,197,94,.22), transparent 70%); }
.broadcast-penugasan::after { background:radial-gradient(circle, rgba(134,239,172,.12), transparent 70%); }
.agenda-badge { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:999px; color:#fff; }

/* ===== APP ECOSYSTEM ===== */
.apps-shell { border:1px solid var(--line); background:var(--surface); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); padding:18px; }
.apps-scroll { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.apps-scroll::-webkit-scrollbar { height:6px; }
.apps-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.app-card { flex:0 0 232px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; cursor:pointer; transition:.16s; display:flex; flex-direction:column; gap:9px; height:172px; }
.app-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.app-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.app-card .name { font-weight:700; font-size:15px; color:var(--ink); line-height:1.2; }
.app-card .desc { font-size:12.5px; color:var(--muted); line-height:1.45; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.app-card .tag { align-self:flex-start; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); background:#f6f1e6; border:1px solid #eee4cf; padding:2px 8px; border-radius:999px; line-height:1.5; }
.app-hint { text-align:center; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-top:12px; }
.search-box { position:relative; display:inline-flex; align-items:center; }
.search-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); width:16px; height:16px; pointer-events:none; }
.search-box input { padding:9px 34px 9px 36px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:var(--surface); width:260px; max-width:100%; transition:border-color .15s, box-shadow .15s; }
.search-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.15); }
.search-box input::placeholder { color:var(--faint); }
.search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--faint); padding:3px; border-radius:6px; display:flex; align-items:center; }
.search-clear:hover { color:var(--ink); background:rgba(0,0,0,.05); }
.kanban-person { padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:var(--surface); cursor:pointer; min-width:170px; transition:border-color .15s, box-shadow .15s; }
.kanban-person:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.15); }

/* tint duotone */
.grad-blue   { background:#edf1f7; color:#3a5b8f; }
.grad-indigo { background:#efeffa; color:#4f46a5; }
.grad-rose   { background:#fdf0f1; color:#b3424e; }
.grad-cyan   { background:#eaf5f5; color:#2c6e6a; }
.grad-stone  { background:#f1efec; color:#5c5348; }
.grad-amber  { background:#faf3e6; color:#a9772e; }
.grad-emerald{ background:#ecf6ef; color:#2f7a54; }
.grad-purple { background:#f4effb; color:#6d4ba0; }
.grad-teal   { background:#e6f4f1; color:#1f6f67; }

/* ===== WIDGET ===== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.widget { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:22px; }
.widget-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.widget-head h3 { font-family:var(--font-display); font-size:16px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; }

/* ===== TABS ===== */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.tab { padding:8px 16px; border:1px solid var(--line); background:var(--surface); border-radius:999px; cursor:pointer; font-weight:600; font-size:13px; color:var(--muted); transition:.18s cubic-bezier(.22,1,.36,1); }
.tab.active { background:linear-gradient(135deg, #c99d5e 0%, var(--accent) 55%, var(--accent-2) 100%); color:#fff; border-color:var(--accent); box-shadow:0 2px 8px rgba(181,138,76,.35); }
.tab:hover { border-color:var(--accent); color:var(--ink); }
.tab.active:hover { color:#fff; border-color:var(--accent); }

/* ===== MANAJEMEN PERKARA GROUPS (Perkara/Kalender/Akun) ===== */
.siko-groups { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.siko-group { display:flex; align-items:center; gap:8px; padding:11px 20px; border:1px solid var(--line); background:var(--surface); border-radius:14px; cursor:pointer; font-weight:600; font-size:14px; color:var(--muted); transition:.15s; box-shadow:var(--shadow); }
.siko-group:hover { border-color:var(--accent); color:var(--ink); transform:translateY(-1px); }
.siko-group.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(181,138,76,.4);
}
.siko-group.active i { color:var(--accent); }

.submenu-center { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:16px auto 8px; }
.submenu-center .siko-group {
  padding:10px 24px; border-radius:999px; font-size:13.5px; box-shadow:var(--shadow);
}
.submenu-center .siko-group.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 20px rgba(181,138,76,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.submenu-center .siko-group.active i { color:#fff; }
.hero-page .submenu-center { margin-top:24px; }
.hero-page .submenu-center .siko-group {
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.82); box-shadow:none;
}
.hero-page .submenu-center .siko-group:hover { color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35); transform:translateY(-1px); }
.hero-page .submenu-center .siko-group.active {
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  border-color:transparent; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.3);
}

/* ===== FILTER JENIS PERKARA ===== */
.siko-jenis { display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 18px; }
.siko-jenis-chip { padding:6px 14px; border:1px solid var(--line); background:var(--surface); border-radius:999px; cursor:pointer; font-weight:600; font-size:12.5px; color:var(--muted); transition:.15s; }
.siko-jenis-chip:hover { border-color:var(--accent); color:var(--ink); }
.siko-jenis-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mon-tabs {
  display:flex; gap:8px; flex-wrap:wrap; margin:16px 20px 0;
  background:transparent; border:none; padding:0; box-shadow:none;
}
.mon-tab {
  flex:1 1 auto; min-width:0; justify-content:center;
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
  border-radius:13px; cursor:pointer;
  font-family:var(--head); font-weight:600; font-size:13px;
  background:var(--surface); border:1px solid var(--line);
  color:var(--muted); box-shadow:var(--shadow);
  transition:all .25s cubic-bezier(.22,1,.36,1); white-space:nowrap;
}
.mon-tab i { transition:color .25s; flex:none; color:var(--accent); }
.mon-tab:hover { color:var(--ink); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(181,138,76,.2); }
.mon-tab.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 20px rgba(181,138,76,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.mon-tab.active i { color:#fff; }
.mon-tabs-dark { background:transparent; border:none; box-shadow:none; padding:0; }
.mon-tabs-dark .mon-tab { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.8); box-shadow:none; }
.mon-tabs-dark .mon-tab i { color:rgba(255,255,255,.7); }
.mon-tabs-dark .mon-tab:hover { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.mon-tabs-dark .mon-tab.active { background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f); border-color:transparent; color:#fff; }
.mon-tabs-dark .mon-tab.active i { color:#fff; }
@media (max-width:640px) {
  .mon-tab { flex:1 1 45%; white-space:normal; justify-content:flex-start; padding:9px 12px; font-size:12px; }
}
.mon-panel { animation:monFade .3s ease both; }
@keyframes monFade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.mon-pihak { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.mon-pihak-group {
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px;
}
.mon-pihak-role {
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:6px;
}
.mon-pihak-nama { color:var(--ink); font-size:.9rem; line-height:1.45; }
.mon-pihak-nama + .mon-pihak-nama { margin-top:4px; }
.disc-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#191a1f,#24262d);
  color:#fff;
}
.disc-head-av {
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.disc-body { padding:18px; max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.disc-row { display:flex; gap:10px; align-items:flex-end; }
.disc-row.mine { flex-direction:row-reverse; }
.disc-av { width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none; }
.disc-av-txt {
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:.75rem;
}
.disc-bubble {
  max-width:75%; padding:10px 14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.disc-row.mine .disc-bubble {
  background:linear-gradient(135deg,#c99d5e,#b58a4c); color:#fff; border-color:transparent;
  border-bottom-right-radius:4px;
}
.disc-row.theirs .disc-bubble { border-bottom-left-radius:4px; }
.disc-meta { display:flex; gap:8px; align-items:baseline; margin-bottom:3px; }
.disc-who { font-weight:700; font-size:.78rem; }
.disc-row.mine .disc-who { color:#fff; }
.disc-when { color:var(--muted); font-size:.7rem; }
.disc-row.mine .disc-when { color:rgba(255,255,255,.8); }
.disc-msg { white-space:pre-wrap; font-size:.9rem; line-height:1.5; }
.disc-row.mine .disc-msg { color:#fff; }
.disc-input {
  display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--line);
  background:var(--surface);
}
.disc-file {
  display:flex; align-items:center; gap:7px; margin-top:8px;
  background:rgba(181,138,76,.12); border:1px dashed rgba(181,138,76,.5);
  color:var(--accent-2); border-radius:8px; padding:6px 10px;
  font-size:.8rem; font-weight:600; text-decoration:none; max-width:100%;
}
.disc-file span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.disc-row.mine .disc-file { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); color:#fff; }
.disc-attach {
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  width:40px; flex:none; border:1px solid var(--line); border-radius:10px;
  color:var(--muted); transition:.15s; background:var(--paper);
}
.disc-attach:hover { border-color:var(--accent); color:var(--accent); }
.disc-attach.has { border-color:var(--accent); color:var(--accent); background:rgba(181,138,76,.1); }
.disc-attach-name { font-size:.75rem; color:var(--muted); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== PANEL / TABLE ===== */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); margin-bottom:24px; overflow:hidden; }
.panel-head { padding:16px 22px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h3 { margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar input, .toolbar select { padding:8px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--surface); }
.toolbar input { min-width:220px; }
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th { text-align:left; vertical-align:middle; padding:13px 16px; background:var(--paper); color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tr:hover td { background:#fcfbf8; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.tbl .actions-th { text-align:right; vertical-align:middle; }
.tbl .empty { text-align:center; color:var(--faint); padding:44px 20px; font-size:13.5px; }
.tbl .empty::before { content:''; display:block; width:34px; height:34px; margin:0 auto 12px; opacity:.4; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a707c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>") center/contain no-repeat; }
.tbl .actions { text-align:right; vertical-align:middle; }
.tbl .actions-wrap { display:flex; gap:6px; justify-content:flex-end; }
.tbl .actions-wrap button { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 9px; cursor:pointer; font-size:13px; color:var(--muted); transition:.15s; }
.tbl .actions-wrap button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }
.riwayat-actions { display:flex; gap:4px; }
.riwayat-actions button { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12px; font-weight:700; color:var(--ink); }
.riwayat-actions button:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== BADGE ===== */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.03em; }
.badge-navy { background:#edf1f7; color:#33415c; }
.badge-gold { background:#f6f1e6; color:#966f35; }
.badge-green { background:#ecf6ef; color:#2f7a54; }
.badge-red { background:#fbf1f2; color:#b3424e; }
.badge-blue { background:#eaf1f9; color:#3a5b8f; }
.badge-gray { background:#f1f2f4; color:#6b7280; }

/* ===== MODAL ===== */
.modal-backdrop { position:fixed; inset:0; background:rgba(16,20,30,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal { background:var(--surface); border:1px solid var(--line); border-radius:20px; width:100%; max-width:600px; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal-head { padding:20px 24px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3 { margin:0; font-family:var(--font-display); font-size:18px; font-weight:700; }
.modal-head .x { background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--faint); }
.modal-body { padding:24px; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--line-2); display:flex; justify-content:flex-end; gap:10px; }

/* ===== DETAIL ===== */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.detail-item { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.detail-item-wide { grid-column:1 / -1; }
.detail-item .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600; }
.detail-item .v { font-weight:600; color:var(--ink); margin-top:3px; }

/* ===== TIMELINE ===== */
.timeline { position:relative; padding-left:20px; }
.timeline::before { content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line); }
.tl-item { position:relative; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line-2); }
.tl-item:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.tl-item .dot { position:absolute; left:-19px; top:5px; width:10px; height:10px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 2px var(--line); }
.tl-item .when { font-size:11px; color:var(--faint); font-weight:600; margin-bottom:2px; }
.tl-item .what { font-weight:600; font-size:13.5px; color:var(--ink); }

/* ===== FOOTER ===== */
.site-footer { background:var(--paper); border-top:1px solid var(--line); padding:20px 0; }
.site-footer .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--faint); }

/* ===== PUBLIC SITE (index.php) ===== */
.site-header { background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:70px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:1.2rem; color:var(--ink); font-weight:600; }
.brand .seal { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; }
.brand-logo { height:44px; width:auto; display:block; }
.nav-links { display:flex; gap:26px; align-items:center; }
.nav-links a { color:var(--muted); font-weight:500; font-size:14px; }
.nav-links a:hover { color:var(--ink); }
.menu-toggle { display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 11px; font-size:1.25rem; line-height:1; cursor:pointer; }

.hero { background:radial-gradient(1000px 500px at 80% -20%, #ffffff, var(--paper)); color:var(--ink); padding:90px 0 70px; border-bottom:1px solid var(--line); }
.hero .container { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero.single .container { display:block; max-width:900px; }
.hero.single h1 { font-size:3.1rem; }
.hero h1 { font-family:var(--font-display); font-size:2.9rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.hero h1 em { color:var(--accent-2); font-style:normal; }
.hero p.lead { font-size:1.05rem; color:var(--muted); max-width:54ch; }
.hero .cta-row { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
.hero-stats .stat { border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--surface); }
.hero-stats .stat b { display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--ink); font-weight:600; }
.hero-stats .stat span { font-size:12.5px; color:var(--muted); }
.hero-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; color:var(--ink); box-shadow:var(--shadow-lg); }
.hero-card h3 { font-size:1.05rem; }
.hero-card ul { list-style:none; margin:0; padding:0; }
.hero-card li { padding:9px 0; border-bottom:1px dashed var(--line); display:flex; gap:10px; align-items:center; }

.section { padding:72px 0; }
.section-alt { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { max-width:720px; margin:0 auto 44px; text-align:center; }
.section-head .kicker { color:var(--accent-2); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:600; }
.section-head h2 { font-family:var(--font-display); font-size:1.7rem; }
.section-head p { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow); transition:.18s; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.card .icon { width:46px; height:46px; border-radius:12px; background:var(--paper); border:1px solid var(--line); color:var(--accent-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px; }
.card h3 { font-size:1.05rem; }
.card-author { font-size:12px; color:var(--accent-2); font-weight:600; margin:6px 0 8px; }
.card p { color:var(--muted); font-size:13.5px; margin-bottom:0; }

/* tim / partner */
.mp-lead { display:flex; justify-content:center; margin-bottom:28px; }
.mp-card { max-width:520px; width:100%; padding:34px 30px; gap:14px; }
.mp-card .team-avatar { width:104px; height:104px; }
.mp-card h3 { font-size:1.3rem; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.team-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.team-avatar { width:72px; height:72px; border-radius:50%; background:var(--noir); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:20px; flex:none; box-shadow:0 0 0 3px var(--accent); overflow:hidden; }
.team-avatar img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.team-card h3 { margin:0 0 2px; font-size:1.05rem; line-height:1.3; }
.team-card .role { color:var(--accent-2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; display:flex; justify-content:center; }
.team-card .team-tag { color:var(--muted); font-size:13px; margin-top:6px; display:block; line-height:1.5; }
.team-card .edu { color:var(--muted); font-size:13px; margin-top:8px; line-height:1.5; }
.team-tag { display:inline-block; margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); background:#f6f1e6; border:1px solid #eee4cf; padding:3px 9px; border-radius:999px; }

/* strip hubungan kerja */
.rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.rel-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.rel-card h3 { font-size:1rem; display:flex; gap:10px; align-items:center; }
.rel-card p { color:var(--muted); font-size:13.5px; margin-bottom:0; }

/* klien & referensi */
.prose { color:var(--muted); font-size:14.5px; max-width:56ch; }
.card-more {
  display:inline-block; margin-top:12px; font-size:13px; font-weight:700;
  color:var(--accent-2);
}
.card-more:hover { text-decoration:underline; }
.card-img {
  width:calc(100% + 48px); height:150px; object-fit:cover;
  margin:-24px -24px 16px; border-radius:16px 16px 0 0; display:block;
}
.artikel-banner {
  width:100%; max-width:820px; height:auto; border-radius:14px;
  margin:0 auto 8px; display:block; box-shadow:var(--shadow);
}
.artikel-kredit { max-width:820px; margin:0 auto 22px; font-size:11px; color:var(--faint); text-align:right; }
.artikel-meta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; color:var(--muted); font-size:13.5px; }
.artikel-kat {
  background:rgba(181,138,76,.14); border:1px solid rgba(181,138,76,.35);
  color:var(--accent-2); font-weight:700; padding:2px 10px; border-radius:999px;
}
.artikel-body { max-width:820px; margin:0 auto; }
.artikel-summary {
  font-family:var(--font-display); font-size:1.12rem; line-height:1.6;
  color:var(--ink); background:var(--surface); border-left:4px solid var(--accent);
  border-radius:10px; padding:16px 20px; margin-bottom:24px;
}
.artikel-text { font-size:15px; line-height:1.85; color:var(--ink); }
.artikel-text p { margin:0 0 18px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.chip { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 14px; font-size:13px; font-weight:500; color:var(--ink); box-shadow:var(--shadow); }
.lead-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }

/* kontak detail */
.contact-rows { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:820px; margin:0 auto 34px; }
.contact-row { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow); }
.contact-row .c-ic { width:42px; height:42px; border-radius:11px; background:var(--paper); border:1px solid var(--line); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:none; }
.contact-row .c-k { font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.contact-row .c-v { font-weight:600; color:var(--ink); margin-top:2px; }

@media (min-width:921px) {
  .rail-backdrop { display:none !important; }
}
@media (max-width:920px) {
  .rail { position:fixed; left:-260px; top:0; height:100vh; z-index:60; transition:left .28s cubic-bezier(.22,1,.36,1); width:252px; }
  .rail.open { left:0; }
  .rail.collapsed { width:252px; }
  .rail.collapsed .rail-brand { padding:14px 12px 10px; justify-content:center; }
  .rail.collapsed .rail-logo-img { display:none; }
  .rail.collapsed .rail-mark { display:none; }
  .rail.collapsed .rail-nav { padding:64px 12px 16px; align-items:stretch; gap:2px; }
  .rail.collapsed .rail-item { justify-content:flex-start; padding:9px 12px; width:100%; }
  .rail.collapsed .rail-item span { display:inline; }
  .rail.collapsed .rail-item i { width:18px; height:18px; }
  .rail.collapsed .rail-foot { padding:16px; }
  .rail.collapsed .rail-clock { display:flex; }
  .rail.collapsed .rail-user { justify-content:flex-start; }
  .rail.collapsed .rail-user-txt { display:block; }
.appbar { z-index:70; pointer-events:auto; }
  .appbar.is-beranda .appbar-title { display:none; }
  .appbar-brand { display:flex; }
  .rail-logo-img { display:none; }
  .content { padding:0 16px 40px; }
  .appbar { padding:12px 16px 14px; }
  .grid-2 { grid-template-columns:1fr; }
  .hero .container { grid-template-columns:1fr; }
  .site-footer .grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .page-head h1 { font-size:23px; }
  .modal .form-2col { grid-template-columns:1fr; }
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar input, .toolbar select { min-width:0; }
  .hero h1 { font-size:2rem; }
  .hero-stats { grid-template-columns:1fr; }
  .contact-rows { grid-template-columns:1fr; }
  .menu-toggle { display:inline-flex; }
  .site-header .container { height:auto; flex-wrap:wrap; padding:12px 16px; }
  .nav-links { display:none; width:100%; flex-direction:column; gap:2px; padding:10px 0 4px; }
  .site-header.nav-open .nav-links { display:flex; }
  .broadcast { height:220px; padding:20px; }
  .broadcast-pengumuman { height:340px; }
  .broadcast-pengumuman .broadcast-slide .i { -webkit-line-clamp:6; }
  .broadcast-slide .j { font-size:20px; }
  .broadcast-slide .i { font-size:13px; }
}

/* ================= KANBAN KOORDINASI TIM ================= */
.kanban { display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.kanban-filters { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.kanban-tools { display:flex; gap:10px; align-items:center; flex:1 1 100%; }
.kanban-tools .search-box { flex:1 1 auto; }
.kanban-tools .search-box input { width:100%; }
.kanban-tools .kanban-person { flex:none; }
.kanban-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 10px; }
.kanban-stat { display:flex; align-items:center; gap:8px; }
.kanban-load { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.load-card {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
}
.load-avatar, .kanban-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; flex-shrink:0;
}
.load-avatar-img, .kanban-avatar-img { object-fit:cover; padding:0; background:#eee; }
.load-info { flex:1; min-width:0; }
.load-bar { height:5px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden; margin-top:6px; flex:1; min-width:60px; }
.load-bar-fill { height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.kanban-board { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
.kanban-col {
  background:rgba(0,0,0,.035); border:1px solid var(--line); border-radius:14px;
  padding:12px; display:flex; flex-direction:column; gap:10px; min-height:200px;
}
.kanban-col-head { display:flex; justify-content:space-between; align-items:center; padding:2px 4px; }
.kanban-cards { display:flex; flex-direction:column; gap:8px; flex:1; }
.kanban-card {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.05); cursor:pointer;
  transition:box-shadow .15s, transform .15s;
}
.kanban-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); transform:translateY(-1px); }
.kanban-deadline { font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:20px; background:rgba(0,0,0,.06); }
.kanban-deadline.overdue { background:#fdecea; color:#c0392b; }
.kanban-deadline.soon { background:#fef5e7; color:#b9770e; }
.kanban-move { display:flex; gap:6px; margin-top:10px; justify-content:flex-end; }
.kanban-empty { text-align:center; color:var(--muted); font-size:.8rem; padding:20px 0; }
.kanban-add { width:100%; justify-content:center; }

@media (max-width:920px) {
  .kanban-board { grid-template-columns:1fr; }
}

/* ================= DASHBOARD PERKARA ================= */
.seg-control {
  display:flex; gap:4px; padding:5px; margin:16px 0 12px;
  background:rgba(0,0,0,.045); border:1px solid var(--line); border-radius:13px;
}
.seg-btn {
  flex:1 1 0; justify-content:center;
  display:flex; align-items:center; gap:7px; padding:10px 14px; border:none;
  background:transparent; border-radius:9px; cursor:pointer; font-weight:600;
  font-size:13px; color:var(--muted); transition:.2s; line-height:1;
  white-space:nowrap;
}
.seg-btn:hover { color:var(--ink); }
.seg-btn.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  color:#fff; box-shadow:0 4px 14px rgba(181,138,76,.4);
}
.seg-count { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.09); }
.seg-btn.active .seg-count { background:rgba(255,255,255,.22); }
.siko-group .seg-count { background:rgba(0,0,0,.07); color:var(--muted); }
.siko-group.active .seg-count { background:rgba(255,255,255,.22); color:#fff; }
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.filter-chip {
  display:flex; align-items:center; gap:7px; padding:7px 14px; border:1px solid var(--line);
  background:var(--surface); border-radius:999px; cursor:pointer; font-weight:600;
  font-size:12.5px; color:var(--muted); transition:.18s;
}
.filter-chip:hover { border-color:var(--accent); color:var(--ink); }
.filter-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 2px 6px rgba(181,138,76,.35); }
.chip-count { font-size:11px; font-weight:700; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.08); }
.filter-chip.active .chip-count { background:rgba(255,255,255,.25); }

/* Kartu ikon per jenis litigasi */
.perkara-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
.perkara-toolbar input { min-width:260px; }
.perkara-toolbar .search-box { flex:1 1 auto; }
.perkara-toolbar .search-box input { width:100%; }
.perkara-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.ps-item {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; border-left:4px solid var(--accent);
}
.ps-gold { border-left-color:var(--accent); }
.ps-blue { border-left-color:#3a5b8f; }
.ps-amber { border-left-color:#b9770e; }
.ps-green { border-left-color:#2f7a54; }
.ps-red { border-left-color:var(--red); }
.ps-val { font-family:var(--font-mono); font-weight:700; font-size:1.6rem; line-height:1.1; }
.ps-lbl { color:var(--muted); font-size:.8rem; margin-top:2px; }
.perkara-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-top:16px; }
.portal-perkara-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:8px; }
.portal-perkara-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column;
}
.portal-perkara-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #c99d5e, #b58a4c, #966f35, transparent);
}
.portal-perkara-card:hover {
  box-shadow:0 16px 34px rgba(181,138,76,.2);
  transform:translateY(-4px); border-color:var(--accent);
}
.portal-perkara-card .pc-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:20px 20px 14px;
}
.portal-perkara-card .pc-body { padding:0 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.portal-perkara-card .pc-nomor { font-size:1.12rem; color:var(--noir); }
.portal-perkara-card .pc-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.portal-perkara-card .pc-pihak { font-weight:600; font-size:.92rem; color:var(--noir); display:flex; align-items:center; gap:7px; }
.portal-perkara-card .pc-pihak::before {
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35);
}
.portal-perkara-card .pc-meta {
  background:var(--paper); border:1px solid var(--line-2); border-radius:12px;
  padding:10px 12px; gap:6px;
}
.portal-perkara-card .pc-meta-row { align-items:center; }
.portal-perkara-card .pc-meta-k { min-width:70px; }
.portal-perkara-card .pc-foot {
  margin-top:14px; padding:14px 20px 18px; border-top:1px solid var(--line-2);
}
.portal-perkara-card .pc-btn-detail {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35) !important;
  color:#fff !important; border:none !important;
  padding:8px 16px; border-radius:10px; font-weight:700;
  box-shadow:0 4px 14px rgba(181,138,76,.35);
}
.portal-perkara-card .pc-btn-detail:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(181,138,76,.45); }

.mon-filter { flex:1 1 100%; }
.mon-kartu {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column; gap:10px; padding:0;
}
.mon-kartu::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #c99d5e, #b58a4c, #966f35, transparent);
}
.mon-kartu:hover { box-shadow:0 16px 34px rgba(181,138,76,.2); transform:translateY(-4px); border-color:var(--accent); }
.mon-kartu .pc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:20px 20px 10px; }
.mon-kartu .pc-body { padding:0 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mon-kartu .pc-nomor { font-size:1.1rem; }
.mon-kartu .pc-meta { gap:6px; }
.mon-kartu .pc-foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px; padding:12px 20px 18px; border-top:1px solid var(--line-2);
}

/* Brand header klien */
.brand-klien-logo { max-height:68px; max-width:78px; width:auto; height:auto; object-fit:contain; }
.hero-premium {
  background:
    radial-gradient(1200px 500px at 20% -20%, rgba(181,138,76,.16), transparent 60%),
    radial-gradient(1000px 400px at 90% 130%, rgba(181,138,76,.1), transparent 55%),
    linear-gradient(150deg, #26282f 0%, #1d1f26 55%, #181a20 100%);
  border:1px solid rgba(181,138,76,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(25,26,31,.18);
}
.hero-page { padding:22px 26px; border-radius:18px; margin:20px 20px 0; }
.hero-page-top { display:flex; justify-content:space-between; align-items:center; }
.hero-page-title { text-align:center; margin-top:14px; }
.hero-page-ico {
  width:56px; height:56px; border-radius:16px; margin:0 auto 12px;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(181,138,76,.4);
}
.hero-page-title h1 { font-family:var(--head); font-size:1.45rem; font-weight:700; color:#fff; margin:0; }
.hero-page-title p { color:rgba(255,255,255,.72); font-size:.85rem; margin:6px 0 0; }

.hero-dash { padding:28px 32px; border-radius:20px; margin:0 0 24px; }
.hero-dash-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-dash-greet {
  font-family:var(--head); font-size:.95rem; font-weight:600; color:var(--accent);
  letter-spacing:.05em;
}
.hero-dash-date { font-size:.8rem; color:rgba(255,255,255,.7); letter-spacing:.03em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hd-clock {
  font-family:var(--font-mono); font-size:.85rem; font-weight:600;
  background:rgba(181,138,76,.16); border:1px solid rgba(181,138,76,.35);
  color:var(--accent); border-radius:8px; padding:3px 10px;
}
.hero-dash-body { margin-top:18px; }
.hero-dash-sub { color:rgba(255,255,255,.72); font-size:.9rem; margin-top:8px; }
.hero-dash-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
  margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
}
.hd-stat {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:14px 16px;
}
.hd-ico {
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.hd-gold { background:linear-gradient(135deg,#c99d5e,#966f35); }
.hd-blue { background:linear-gradient(135deg,#5b8def,#3a5b8f); }
.hd-green { background:linear-gradient(135deg,#34b373,#1f7a4f); }
.hd-amber { background:linear-gradient(135deg,#f0a13d,#b9770e); }
.hd-val { font-family:var(--font-display); font-size:22px; font-weight:700; color:#fff; line-height:1.1; }
.hd-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.65); margin-top:2px; font-weight:600; }
.brand-welcome-line { min-height:1.7rem; display:flex; align-items:flex-start; justify-content:center; }
.tw-area { position:relative; width:100%; display:block !important; }
.tw-spacer { visibility:hidden; display:block; }
.tw-type { position:absolute; left:0; right:0; top:0; text-align:center; display:block; }
@media (max-width:520px) {
  .brand-welcome-line { min-height:3.4rem; font-size:1.05rem !important; }
}
.brand-klien-welcome { animation:welcomeDrop .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes welcomeDrop {
  0% { opacity:0; transform:translateY(-22px); }
  100% { opacity:1; transform:translateY(0); }
}
.tw-cursor { display:inline-block; margin-left:2px; color:var(--accent); animation:twBlink 1s step-end infinite; font-weight:400; }
.klien-announce {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #fdf8ee, #faf3e2);
  border:1px solid #ecd9b5; border-left:4px solid var(--accent);
  border-radius:12px; padding:11px 16px; font-size:.87rem; color:#5c4a2a;
  box-shadow:0 2px 10px rgba(181,138,76,.12);
}
.agenda-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-top:14px; }
.agenda-card {
  position:relative; display:flex; gap:14px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); transition:box-shadow .18s, transform .18s, border-color .18s;
}
.agenda-card:hover { box-shadow:0 10px 26px rgba(181,138,76,.18); transform:translateY(-3px); border-color:var(--accent); }
.agenda-card.is-past { opacity:.55; border-style:dashed; }
.agenda-date {
  flex:none; width:54px; height:60px; border-radius:12px;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.agenda-date .ad-d { font-family:var(--head); font-size:22px; font-weight:700; line-height:1; }
.agenda-date .ad-m { font-size:9px; letter-spacing:.06em; text-transform:uppercase; margin-top:3px; opacity:.9; }
.agenda-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.agenda-kegiatan { font-family:var(--head); font-weight:700; font-size:1rem; line-height:1.3; }
.agenda-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); }
.agenda-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.agenda-actions { display:flex; gap:4px; align-items:flex-start; }
.agenda-actions button {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:5px 7px; cursor:pointer; color:var(--muted); transition:.15s;
}
.agenda-actions button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }
.tg-step {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line-2); border-radius:12px;
  padding:14px;
}
.tg-num {
  width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-weight:700; font-size:1rem;
  box-shadow:0 4px 12px rgba(181,138,76,.3);
}
@keyframes twBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.brand-glow {
  color:#fff;
  text-shadow:0 0 8px rgba(181,138,76,.45), 0 0 20px rgba(181,138,76,.35), 0 0 42px rgba(181,138,76,.2);
  animation:brandGlowIn 1.6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes brandGlowIn {
  0% { opacity:0; text-shadow:0 0 2px rgba(181,138,76,.1); filter:blur(2px); }
  100% { opacity:1; text-shadow:0 0 8px rgba(181,138,76,.45), 0 0 20px rgba(181,138,76,.35), 0 0 42px rgba(181,138,76,.2); filter:blur(0); }
}
.perkara-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow:var(--shadow); cursor:pointer;
  transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column; gap:10px;
}
.perkara-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.09); transform:translateY(-2px); }
.perkara-card.is-selesai { opacity:.65; background:var(--paper); border-style:dashed; }
.perkara-card.is-selesai::after {
  content:'ARSIP'; position:absolute; top:10px; right:-34px; transform:rotate(38deg);
  background:rgba(25,26,31,.08); color:var(--muted); font-size:10px; font-weight:700;
  letter-spacing:.08em; padding:3px 34px;
}
.klien-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.klien-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column; gap:12px; padding:20px;
}
.klien-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #c99d5e, #b58a4c, #966f35, transparent);
}
.klien-card:hover { box-shadow:0 16px 34px rgba(181,138,76,.2); transform:translateY(-4px); border-color:var(--accent); }
.kc-head { display:flex; align-items:center; gap:12px; }
.kc-av {
  width:46px; height:46px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-weight:700; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(181,138,76,.3);
}
.kc-nama { font-family:var(--head); font-weight:700; font-size:1.02rem; line-height:1.3; }
.kc-perusahaan { font-size:.82rem; color:var(--muted); }
.klien-card .pc-meta { flex:1; }
.kc-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--line-2);
}
.pc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pc-nomor { font-family:var(--head); font-weight:700; font-size:1.05rem; line-height:1.3; }
.pc-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pc-pihak { font-weight:600; font-size:.92rem; color:var(--noir); }
.pc-meta { display:flex; flex-direction:column; gap:4px; background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; }
.pc-meta-row { display:flex; gap:10px; font-size:.83rem; }
.pc-meta-k { color:var(--faint); min-width:62px; }
.pc-meta-v { color:var(--ink); }
.pc-money { font-family:var(--font-mono); font-weight:600; }
.pc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.pc-pic { display:flex; align-items:center; gap:8px; }
.pc-pic-img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.pc-pic-av { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.pc-pic-name { font-size:.8rem; color:var(--muted); }
.pc-actions { display:flex; gap:6px; align-items:center; }
.pc-actions button {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:6px 9px; cursor:pointer; font-size:13px; color:var(--muted); transition:.15s;
}
.pc-actions button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }
.pc-btn-detail {
  display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--noir) !important;
  background:var(--paper) !important; border-color:var(--accent) !important;
}
.pc-btn-detail:hover { background:var(--accent) !important; color:#fff !important; }
.tbl .btn-back-pill {
  display:inline-flex; align-items:center; gap:5px; font-weight:600;
  color:var(--noir) !important; background:var(--paper) !important; border-color:var(--accent) !important;
}
.tbl .btn-back-pill:hover { background:linear-gradient(135deg, #c99d5e 0%, var(--accent) 55%, var(--accent-2) 100%) !important; color:#fff !important; border-color:var(--accent) !important; }
.perkara-empty { grid-column:1/-1; text-align:center; color:var(--faint); padding:48px 20px; font-size:13.5px; }

@media (max-width:920px) {
  .perkara-stats { grid-template-columns:repeat(2,1fr); }
  .perkara-grid { grid-template-columns:1fr; }
  .portal-perkara-grid { grid-template-columns:1fr; }
  .perkara-toolbar { flex-direction:column; align-items:stretch; }
  .perkara-toolbar input { min-width:0; }
}

/* ================= DETAIL PERKARA UNIVERSAL ================= */
.detail-hasil { margin-top:14px; padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.detail-hasil .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600; margin-bottom:6px; }
.detail-hasil .v { color:var(--ink); font-size:.92rem; }

/* Para Pihak */
.pihak-cards { display:flex; flex-direction:column; gap:10px; }
.pihak-card {
  display:flex; align-items:flex-start; gap:14px; padding:14px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
}
.pihak-role {
  flex-shrink:0; padding:4px 12px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; background:#f6f1e6; color:#966f35; border:1px solid #eee4cf;
}
.pihak-body { flex:1; min-width:0; }
.pihak-nama { font-weight:700; color:var(--noir); font-size:.95rem; }
.pihak-meta { color:var(--muted); font-size:.82rem; margin-top:2px; }
.pihak-actions { display:flex; gap:6px; }
.pihak-actions button {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:6px 9px; cursor:pointer; font-size:13px; color:var(--muted); transition:.15s;
}
.pihak-actions button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }

/* Timeline horizontal (tahapan perkara) */
.htl { display:flex; align-items:flex-start; position:relative; padding:6px 0 10px; overflow:hidden; }
.htl::before {
  content:''; position:absolute; top:17px; left:0; right:0; height:3px; background:var(--line-2);
}
.htl-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; text-align:center; z-index:1; }
.htl-dot {
  width:26px; height:26px; border-radius:50%; background:var(--surface);
  border:3px solid var(--line); transition:.25s; position:relative;
}
.htl-step.done .htl-dot { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(181,138,76,.18); }
.htl-label { margin-top:8px; font-size:11px; font-weight:600; color:var(--faint); padding:0 4px; }
.htl-step.done .htl-label { color:var(--noir); }

@media (max-width:640px) {
  .htl-label { font-size:9.5px; }
  .pihak-card { flex-direction:column; }
}

/* ================= DISKUSI CHAT (detail perkara) ================= */
.chat-wrap { display:flex; flex-direction:column; gap:14px; padding:8px 4px 18px; max-height:480px; overflow-y:auto; }
.chat-msg { display:flex; gap:12px; align-items:flex-start; }
.chat-av {
  width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0;
}
.chat-body {
  flex:1; min-width:0; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px;
}
.chat-head { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.chat-name { font-weight:700; font-size:.85rem; color:var(--noir); }
.chat-when { color:var(--faint); font-size:.72rem; }
.chat-text { white-space:pre-wrap; font-size:.9rem; color:var(--ink); }
.chat-file {
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  background:rgba(181,138,76,.12); border:1px dashed rgba(181,138,76,.5);
  color:var(--accent-2); border-radius:8px; padding:6px 10px;
  font-size:.8rem; font-weight:600; text-decoration:none; max-width:100%;
}
.chat-file span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-actions { margin-top:8px; display:flex; }
.chat-input { display:flex; gap:10px; padding:14px; border-top:1px solid var(--line-2); background:var(--paper); }

@media (max-width:640px) {
  .chat-input { flex-direction:column; }
}

/* ================= LAPORAN PENANGANAN PERKARA ================= */
.lp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
}
.lp-head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--line-2); background:var(--paper);
}
.lp-badge {
  padding:3px 12px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; background:#f6f1e6; color:#966f35; border:1px solid #eee4cf;
}
.lp-date { font-weight:600; font-size:.85rem; color:var(--ink); }
.lp-by { margin-left:auto; color:var(--faint); font-size:.78rem; }
.lp-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.lp-section { }
.lp-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:4px; }
.lp-label-red { color:#b3424e; }
.lp-label-blue { color:#3a5b8f; }
.lp-text { white-space:pre-wrap; font-size:.9rem; color:var(--ink); line-height:1.5; }
.lp-text-mono { font-family:var(--font-mono); font-size:.85rem; }
.lp-print { margin-left:auto; }

/* ================= CETAK LPP ================= */
.lpp-modal { max-width:760px; width:calc(100vw - 40px); }
.lpp-sheet {
  background:#fff; color:#111; padding:28px 44px; border:1px solid var(--line);
  border-radius:4px; font-family:'Book Antiqua', 'Palatino Linotype', Georgia, serif; font-size:13px;
}
/* KOP: logo kiri, kecil */
.lpp-kop { margin-bottom:10px; }
.lpp-logo { max-height:60px; width:auto; display:block; }
/* Tanggal, Nomor, Kepada (kiri) */
.lpp-left { line-height:1.7; }
.lpp-city { line-height:1.7; }
.lpp-no { line-height:1.7; margin-bottom:14px; }
.lpp-kepada { line-height:1.7; margin-bottom:16px; }
/* Hal (tengah + underline presisi mengikuti kata) */
.lpp-hal {
  display:inline-block; text-align:center; font-weight:700; margin:0 auto 18px;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.lpp-hal-wrap { text-align:center; margin-bottom:18px; }
.lpp-lampiran { line-height:1.7; margin-bottom:12px; font-size:13px; }
.lpp-lampiran-lbl { font-weight:700; }
/* Isi */
.lpp-salam { margin-bottom:4px; }
.lpp-body-txt { line-height:1.8; text-align:justify; margin-bottom:12px; }
.lpp-point { display:flex; gap:12px; margin-bottom:10px; line-height:1.8; text-align:justify; }
.lpp-num { flex:none; font-weight:400; }
.lpp-point-txt { flex:1; }
/* Tanda tangan (tengah, 2 kolom) */
.lpp-sign { font-size:13px; text-align:center; margin-top:24px; }
.lpp-sign-lbl { margin-bottom:2px; }
.lpp-sign-firm { font-weight:700; margin-top:4px; }
.lpp-sign-tag { font-size:12px; }
.lpp-sign-row { display:flex; justify-content:center; gap:40px; margin-top:14px; }
.lpp-sign-row { display:flex; justify-content:center; gap:40px; margin-top:6px; }
.lpp-sign-col { width:42%; text-align:center; font-weight:700; font-size:12.5px; }
/* Cc & Footer */
.lpp-cc { margin-top:14px; }
.lpp-foot { font-size:10.5px; text-align:center; color:#333; border-top:1px solid #ccc; margin-top:14px; padding-top:6px; line-height:1.5; }
.lpp-page { text-align:center; font-size:11px; color:#333; margin-top:14px; }

@media print {
  @page { size:A4; margin:0 16mm 26mm 16mm; @bottom-center { content:"Halaman " counter(page); font-size:9px; color:#333; } }
  html, body { background:#fff !important; }
  body :not(#lpp-print):not(#lpp-print *) { display:none !important; }
  #lpp-print { position:static !important; inset:auto !important; background:none !important; padding:0 !important; align-items:flex-start !important; }
  #lpp-print .lpp-modal { position:static !important; width:100% !important; max-width:100% !important; max-height:none !important; overflow:visible !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; background:#fff !important; }
  #lpp-print .modal-head { display:none !important; }
  #lpp-print .modal-body { padding:0 !important; }
  #lpp-print .lpp-sheet { border:0 !important; padding:14mm 0 0 !important; background:#fff !important; }
  #lpp-print .lpp-sign-space { min-height:36px; }
  #lpp-print .lpp-sign-row,
  #lpp-print .lpp-cc,
  #lpp-print .lpp-kepada,
  #lpp-print .lpp-point { page-break-inside:avoid; break-inside:avoid; }
  #lpp-print .lpp-cc { page-break-before:avoid; break-before:avoid; }
  #lpp-print .lpp-foot {
    position:fixed; left:16mm; right:16mm; bottom:12mm;
    font-size:8.5px; text-align:center; color:#333;
    border-top:1px solid #ccc; padding-top:2px; line-height:1.3;
    margin:0; z-index:10;
  }
}

/* ===== PERSONIL TIM (Profil Personil — Direktori) ===== */
.personil-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:16px; }
.personil-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 4px 18px rgba(23,24,28,.06); padding:18px;
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.personil-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#c99d5e,#b58a4c,#966f35,transparent);
}
.personil-card:hover {
  box-shadow:0 16px 34px rgba(181,138,76,.18);
  transform:translateY(-4px); border-color:var(--accent);
}
.personil-top { display:flex; align-items:center; gap:14px; }
.personil-av {
  width:54px; height:54px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  box-shadow:0 4px 14px rgba(181,138,76,.35);
}
.personil-av-img { object-fit:cover; }
.personil-id { min-width:0; display:flex; flex-direction:column; gap:6px; }
.personil-nama { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; }
.personil-meta { display:flex; flex-direction:column; gap:7px; background:var(--paper); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; }
.personil-meta-row { display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--ink); min-width:0; }
.personil-meta-row i { color:var(--accent); }
.personil-meta-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.personil-foot { display:flex; flex-direction:column; gap:8px; }
.personil-load { display:flex; align-items:center; gap:10px; }
.personil-load-bar { flex:1; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.personil-load-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#c99d5e,#b58a4c,#966f35); transition:width .4s; }
.personil-load span { font-size:.75rem; color:var(--muted); white-space:nowrap; }
.personil-deadline { font-size:.78rem; color:var(--muted); }
.personil-deadline.has { color:var(--accent-2); font-weight:600; }
.personil-group { margin-bottom:24px; }
.personil-group:last-child { margin-bottom:0; }
.personil-group-head {
  display:flex; align-items:center; gap:10px; margin-top:20px; padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.personil-group:first-child .personil-group-head { margin-top:6px; }
.personil-group-head::before {
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.18);
}
.personil-group-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--navy); }
.personil-group-count { margin-left:auto; font-size:.78rem; color:var(--muted); }
.personil-group .personil-grid { margin-top:12px; }
.personil-card-act { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.personil-view { font-size:.78rem; font-weight:700; color:var(--accent-2); white-space:nowrap; }
.personil-card:hover .personil-view { text-decoration:underline; }

/* ===== PERSONIL TIM (Detail Profil) ===== */
.personil-hero { color:#fff; padding:24px 26px; border-radius:18px; margin:20px 20px 0; }
.personil-hero-body { display:flex; align-items:center; gap:18px; margin-top:16px; flex-wrap:wrap; }
.personil-hero-av {
  width:74px; height:74px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  box-shadow:0 8px 22px rgba(181,138,76,.4);
}
.personil-hero-av-img { object-fit:cover; }
.personil-hero-info { min-width:0; display:flex; flex-direction:column; gap:7px; }
.personil-hero-nama { font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.25; }
.personil-hero-tags { display:flex; flex-wrap:wrap; gap:6px; }
.personil-chip {
  background:rgba(181,138,76,.16); border:1px solid rgba(181,138,76,.35);
  color:#e7cf9e; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:999px;
}
.personil-hero-contact { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); font-size:.82rem; opacity:.85; }
.personil-stats { margin:16px 20px 0; }
.personil-profil-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; margin:16px 20px 24px; }
.personil-profil-card { padding:18px; }
.personil-profil-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--navy); margin-bottom:10px; }
.personil-profil-head i { color:var(--accent); }
.personil-profil-body { white-space:pre-wrap; font-size:.9rem; color:var(--ink); line-height:1.65; }
.personil-profil-empty { border-style:dashed; background:var(--paper); }

/* ===== KOORDINASI TIM (statistik, kartu, drawer beban kerja) ===== */
.kanban-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 4px; }
.ks-item {
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; border-left:4px solid var(--accent);
}
.ks-gold { border-left-color:var(--accent); }
.ks-red { border-left-color:var(--red); }
.ks-amber { border-left-color:#b9770e; }
.ks-green { border-left-color:var(--green); }
.ks-val { font-family:var(--font-mono); font-weight:700; font-size:1.35rem; line-height:1.1; }
.ks-lbl { color:var(--muted); font-size:.74rem; margin-top:2px; }
.kanban-sec { display:flex; align-items:center; gap:12px; }
.kanban-sec-ico {
  width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(181,138,76,.35);
}
.kanban-sec-title { font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.25; }
.kanban-sec-sub { font-size:.76rem; color:var(--muted); margin-top:2px; }
.guide-toggle {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:.15s;
}
.guide-toggle i { color:var(--accent-2); }
.guide-toggle:hover { border-color:var(--accent); color:var(--ink); }
.guide-toggle.open { background:linear-gradient(135deg,#c99d5e,#966f35); border-color:transparent; color:#fff; }
.guide-toggle.open i { color:#fff; }
.guide-toggle-dark { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff; }
.guide-toggle-dark i { color:rgba(255,255,255,.8); }
.guide-toggle-dark:hover { border-color:rgba(255,255,255,.55); color:#fff; }
.guide-toggle-dark.open { background:linear-gradient(135deg,#c99d5e,#966f35); border-color:transparent; color:#fff; }
.guide-toggle-dark.open i { color:#fff; }
.kanban-guide-zone { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:16px 0 0; }
.kanban-guide-zone .guide-open { width:100%; margin-top:0; }
.guide-open {
  margin-top:10px; padding:14px 16px;
  background:var(--surface); border:1px solid rgba(181,138,76,.3);
  border-radius:14px; box-shadow:var(--shadow);
}
.guide-open-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.guide-open-step {
  flex:1; min-width:150px;
  display:flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  padding:9px 12px;
}
.guide-open-num {
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1;
  color:var(--accent); flex:none; min-width:18px; opacity:.9;
}
.guide-open-step b { display:block; font-size:.78rem; letter-spacing:.04em; }
.guide-open-step span { display:block; font-size:.68rem; color:var(--muted); margin-top:1px; }
.guide-open-arr { display:flex; align-items:center; color:var(--accent-2); flex:none; }
.guide-open-hints {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
}
.guide-open-hint {
  display:flex; align-items:flex-start; gap:9px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:10px;
  padding:9px 12px;
}
.guide-open-hint i { color:var(--accent-2); flex:none; margin-top:2px; }
.guide-open-hint b { display:block; font-size:.78rem; color:var(--ink); line-height:1.3; }
.guide-open-hint span { display:block; font-size:.68rem; color:var(--muted); margin-top:2px; line-height:1.45; }
.site-card {
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.site-card-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.site-card-logo { width:52px; height:52px; border-radius:12px; object-fit:cover; border:1px solid var(--line); box-shadow:var(--shadow); }
.site-card-info { flex:1; min-width:180px; }
.site-card-nama { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.3; }
.site-card-tag { font-size:.78rem; color:var(--accent-2); font-weight:600; margin-top:2px; }
.site-card-meta { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8rem; color:var(--muted); }
.site-card-meta span { display:inline-flex; align-items:center; gap:6px; }
.site-card-meta i { color:var(--accent-2); }
.site-card-addr { display:flex; align-items:flex-start; gap:6px; font-size:.8rem; color:var(--muted); }
.site-card-addr i { color:var(--accent-2); flex:none; margin-top:2px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; margin-bottom:16px; }
.site-field-wide { grid-column:1 / -1; }
.settings-upload-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; padding:12px 14px; background:var(--paper); border:1px dashed var(--line); border-radius:12px; }
.sur-label { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--accent-2); }
.sur-busy { font-size:.76rem; color:var(--muted); }
.team-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.team-media-item {
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.team-media-item img { width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 4px 12px rgba(23,24,28,.12); }
.tmi-nama { font-size:.8rem; font-weight:600; }
.tmi-upload {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:.72rem; font-weight:600; color:var(--accent-2);
  border:1px solid rgba(181,138,76,.4); border-radius:999px; padding:5px 12px;
  transition:.15s;
}
.tmi-upload:hover { background:rgba(181,138,76,.12); }
.tmi-input { display:none; }
.tmi-busy { font-size:.7rem; color:var(--muted); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:#265f46; color:#fff; }
.load-card { transition:box-shadow .15s, transform .15s, border-color .15s; }
.load-card:hover { border-color:var(--accent); box-shadow:0 6px 16px rgba(181,138,76,.16); transform:translateY(-1px); }
.load-view { flex:none; color:var(--accent-2); display:flex; }
.load-terlambat { display:inline-block; margin-top:3px; font-size:.72rem; font-weight:700; color:var(--red); }
.kanban-type { display:flex; align-items:center; gap:6px; margin:6px 0 2px; min-width:0; flex-wrap:wrap; }
.kanban-type-link { display:inline-flex; align-items:center; gap:5px; color:var(--accent-2); font-weight:600; font-size:.74rem; min-width:0; }
.kanban-type-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-type-internal {
  display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700;
  color:var(--muted); background:rgba(0,0,0,.05); padding:2px 8px; border-radius:999px;
}
.load-drawer { position:fixed; inset:0; z-index:90; pointer-events:none; }
.load-drawer.open { pointer-events:auto; }
.load-drawer-backdrop { position:absolute; inset:0; background:rgba(12,13,17,.5); opacity:0; transition:opacity .25s; backdrop-filter:blur(2px); }
.load-drawer.open .load-drawer-backdrop { opacity:1; }
.load-drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(500px,100%);
  background:var(--paper); border-left:1px solid var(--line);
  box-shadow:-14px 0 44px rgba(0,0,0,.2);
  transform:translateX(102%); transition:transform .28s ease;
  display:flex; flex-direction:column;
}
.load-drawer.open .load-drawer-panel { transform:translateX(0); }
.load-drawer-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface);
}
.load-drawer-head-actions { display:flex; align-items:center; gap:8px; flex:none; }
.load-drawer-user { display:flex; align-items:center; gap:12px; min-width:0; }
.ldu-av {
  width:48px; height:48px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  box-shadow:0 4px 12px rgba(181,138,76,.35);
}
.ldu-av { object-fit:cover; }
.ldu-info { min-width:0; display:flex; flex-direction:column; gap:4px; }
.ldu-nama { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; }
.load-drawer-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); }
.lds-item { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; text-align:center; }
.lds-red .lds-val { color:var(--red); }
.lds-val { font-family:var(--font-mono); font-weight:700; font-size:1.25rem; line-height:1.1; }
.lds-lbl { color:var(--muted); font-size:.72rem; margin-top:2px; }
.load-drawer-body { flex:1; overflow-y:auto; padding:16px 20px 24px; display:flex; flex-direction:column; gap:18px; }
.load-drawer-col { display:flex; flex-direction:column; gap:8px; }
.load-drawer-col-head { display:flex; justify-content:space-between; align-items:center; padding:2px 2px 6px; border-bottom:1px solid var(--line-2); }
.load-drawer-task {
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.ldt-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.ldt-act { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.kanban-hasil {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#f1f7f2; border:1px solid rgba(47,122,84,.25); color:var(--green);
  font-size:.74rem; padding:5px 9px; border-radius:9px; margin-top:7px;
}
.kanban-hasil-file { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--green); min-width:0; }
.kanban-hasil-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-hasil-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-bukti {
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:.72rem; font-weight:600; color:#3a5b8f;
  background:rgba(58,91,143,.09); border:1px solid rgba(58,91,143,.22);
  padding:3px 9px; border-radius:999px;
}
.ldt-bukti { display:flex; flex-direction:column; gap:5px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.ldt-bukti-title { display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--muted); }
.ldt-bukti-item {
  display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--ink);
  min-width:0; padding:3px 0;
}
.ldt-bukti-item i { color:#3a5b8f; }
.ldt-bukti-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.ldt-bukti-item:hover { color:var(--accent-2); }
.ldt-integ { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ldt-integ .btn { padding:4px 10px; font-size:11.5px; }