/* =========================================================
   panduan.css — halaman "Cara Guna Sistem" (public/panduan.js)
   Semua kelas berawalan pd-. Guna token tema (tema.css) supaya terang/gelap
   ikut tema aplikasi. Mudah alih dahulu (390px), grid 2 lajur pada skrin lebar.
   ========================================================= */
.pd{--pd-garis:var(--line,#1E3A57);--pd-kad:var(--panel,#0F1A2B);--pd-ink:var(--teks,#E6F1FF);--pd-redup:var(--teks2,#8FA9C4);
  display:flex;flex-direction:column;gap:12px;min-width:0;color:var(--pd-ink);max-width:980px;margin:0 auto;padding-bottom:88px}  /* ruang FAB (+) */
.pd *,.pd *::before,.pd *::after{box-sizing:border-box}
.pd button{font-family:inherit}

/* Warna aksen per kumpulan */
.pd-w-biru{--pd-w:var(--biru,#3B82F6)}
.pd-w-hijau{--pd-w:var(--hijau,#34D399)}
.pd-w-ungu{--pd-w:var(--ungu,#A78BFA)}
.pd-w-oren{--pd-w:var(--oren,#FB923C)}
.pd-w-cyan{--pd-w:var(--cyan,#22D3EE)}

.pd-kepala{display:flex;gap:12px;align-items:center;border-radius:20px;padding:16px;border:1px solid var(--pd-garis);
  background:linear-gradient(135deg,color-mix(in srgb,var(--biru,#3B82F6) 20%,var(--bg2,#0A1220)),color-mix(in srgb,var(--ungu,#A78BFA) 18%,var(--bg2,#0A1220)))}
.pd-kepala h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.pd-kepala p{margin:2px 0 0;font-size:13px;color:var(--pd-redup)}
.pd-kepala-ikon{width:46px;height:46px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--biru,#3B82F6);color:#fff}

.pd-waktu{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.5;
  background:var(--bdg-cyan-bg,#113C51);color:var(--bdg-cyan-fg,#67E8F9)}
.pd-waktu i{margin-top:3px}

.pd-lekit{position:sticky;top:var(--x-lekit-atas,60px);z-index:20;display:flex;flex-direction:column;gap:8px;padding:6px 0;background:var(--bg,#050B14)}
.pd-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tab{flex:none;display:inline-flex;gap:6px;align-items:center;min-height:42px;padding:0 14px;border-radius:999px;cursor:pointer;
  font:700 13.5px var(--font-ui,system-ui,sans-serif);background:var(--pd-kad);color:var(--pd-redup);border:1.5px solid var(--pd-garis)}
.pd-tab.aktif{background:var(--primary,#0E7490);border-color:var(--primary,#0E7490);color:var(--on-primary,#fff)}
.pd-tab:focus-visible,.pd-buka:focus-visible,.pd-togol input:focus-visible+.pd-togol-r{outline:3px solid var(--kuning,#FACC15);outline-offset:2px}

.pd-togol{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--pd-redup);cursor:pointer;min-height:36px;align-self:flex-start}
.pd-togol input{position:absolute;opacity:0;width:1px;height:1px}
.pd-togol-r{width:40px;height:22px;border-radius:999px;background:var(--pd-garis);position:relative;flex:none;transition:background .2s}
.pd-togol-r::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.pd-togol input:checked+.pd-togol-r{background:var(--hijau,#34D399)}
.pd-togol input:checked+.pd-togol-r::after{transform:translateX(18px)}

.pd-isi{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-intro{margin:0;font-size:13px;color:var(--pd-redup);line-height:1.5}
.pd-sorok,.pd-kosong{margin:0;font-size:12.5px;color:var(--pd-redup);text-align:center;padding:6px}
.pd-kosong{padding:20px;border:1px dashed var(--pd-garis);border-radius:16px}

/* Garis masa harian */
.pd-fasa{display:flex;flex-direction:column;gap:8px}
.pd-fasa-k{display:flex;align-items:center;gap:10px}
.pd-fasa-k h2{margin:0;font-size:16px;font-weight:800;color:var(--pd-w)}
.pd-fasa-ikon{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;
  background:color-mix(in srgb,var(--pd-w) 20%,transparent);color:var(--pd-w)}
.pd-garis{list-style:none;margin:0 0 0 16px;padding:0 0 0 18px;border-left:3px solid color-mix(in srgb,var(--pd-w) 45%,transparent);display:flex;flex-direction:column;gap:10px}
.pd-titik{position:relative}
.pd-titik::before{content:"";position:absolute;left:-27px;top:16px;width:15px;height:15px;border-radius:50%;
  background:var(--pd-w);border:3px solid var(--bg,#050B14)}

/* Kad */
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pd-kad{background:var(--pd-kad);border:1px solid var(--pd-garis);border-left:4px solid var(--pd-w,var(--biru,#3B82F6));border-radius:16px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.pd-kad-lain{opacity:.72;border-left-style:dashed}
.pd-kad-atas{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.pd-kad-t{margin:0;font-size:15.5px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.pd-lencana-izin{flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--bdg-neutral-bg,#333);color:var(--bdg-neutral-fg,#ddd)}
.pd-bila{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--pd-ink)}
.pd-bila i{color:var(--pd-w,var(--biru));margin-top:3px}
.pd-julat{display:inline-block;margin-left:2px;padding:1px 7px;border-radius:7px;font-size:12px;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--pd-w,var(--biru)) 22%,transparent);color:var(--pd-ink)}
.pd-siapa-baris{display:flex;gap:6px;flex-wrap:wrap}
.pd-siapa{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bdg-neutral-bg,#333);color:var(--bdg-neutral-fg,#ddd)}
.pd-siapa-staff{background:var(--bdg-biru-bg,#203865);color:var(--bdg-biru-fg,#93C5FD)}
.pd-siapa-tech{background:var(--bdg-oren-bg,#552B1F);color:var(--bdg-oren-fg,#FDBA74)}
.pd-siapa-bos{background:var(--bdg-ungu-bg,#3B2062);color:var(--bdg-ungu-fg,#D8B4FE)}
.pd-siapa-semua{background:var(--bdg-hijau-bg,#2D421F);color:var(--bdg-hijau-fg,#BEF264)}
.pd-siapa.pd-saya{box-shadow:0 0 0 2px var(--pd-w,var(--biru))}
.pd-cara{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.5;color:var(--pd-redup)}
.pd-cara li::marker{color:var(--pd-w,var(--biru));font-weight:800}
.pd-nota{margin:0;display:flex;gap:8px;font-size:12.5px;line-height:1.5;padding:8px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--kuning,#FBBF24) 12%,transparent);color:var(--pd-ink)}
.pd-nota i{color:var(--kuning,#FBBF24);margin-top:3px}
.pd-kaki{display:flex;justify-content:flex-end}
.pd-buka{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:12px;cursor:pointer;
  font:700 13px var(--font-ui,system-ui,sans-serif);border:1.5px solid var(--pd-w,var(--biru));background:transparent;color:var(--pd-ink)}
.pd-buka:hover{background:color-mix(in srgb,var(--pd-w,var(--biru)) 15%,transparent)}
.pd-buka:active{transform:scale(.97)}

@media (min-width:760px){
  .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-lekit{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .pd-togol-r,.pd-togol-r::after{transition:none}
  .pd-buka:active{transform:none}
}