/* ============================================================
   SIAKAD STAK Arastamar Grimenawa
   Struktur kelas mengikuti SIAKAD Arastamar (Wamena);
   warna, huruf, dan bentuk mengikuti situs stak-agj.ac.id:
   biru kampus, navy, merah, dan emas.
   Nama variabel --indigo-* dipertahankan supaya gaya sebaris
   di halaman lama tetap berlaku, nilainya kini biru Grimenawa.
   ============================================================ */
:root{
  --biru:#1f48a8; --biru-2:#2f63d6; --navy:#0a1b46; --navy-2:#11286a;
  --merah-agj:#d7263d; --emas:#f4b400;
  --grad:linear-gradient(120deg,#1f48a8,#2f63d6 55%,#4f7bf0);
  --grad-hangat:linear-gradient(120deg,#d7263d,#f0643a 60%,#f4b400);
  --grad-navy:linear-gradient(180deg,#0a1b46 0%,#0d225a 60%,#11286a 100%);

  --indigo:#1f48a8;        /* warna utama */
  --indigo-2:#2f63d6;      /* biru sedang */
  --indigo-3:#2f63d6;      /* aksen */
  --indigo-4:#eaf0fd;      /* biru sangat muda */
  --indigo-5:#c9d6f5;      /* biru muda */
  --bg:#f3f6fc;
  --putih:#ffffff;
  --ink:#172040;
  --abu:#5a6686;
  --abu-muda:#a3adc6;
  --muda:#eef2fb;
  --garis:#e2e8f5;
  --hijau:#14915a;
  --merah:#d7263d;
  --kuning:#f4b400;
  --biru-info:#0e8fd6;
  --radius:12px;
  --bayang:0 8px 24px -14px rgba(15,44,115,.35);
  --bayang-kecil:0 2px 10px -4px rgba(15,44,115,.18);
  --sidebar-w:264px;
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-hias:'Fraunces',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55}
a{color:var(--biru-2);text-decoration:none}
a:hover{color:var(--biru)}
strong,b{font-weight:700}

/* ---------- Tata letak ---------- */
.wrapper{display:flex;min-height:100vh}

/* ---------- Bilah samping ---------- */
.sidebar{width:var(--sidebar-w);background:var(--grad-navy);color:#fff;position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;z-index:1000;transition:transform .28s ease;border-right:1px solid rgba(255,255,255,.04)}
.sidebar::before{content:"";position:sticky;top:0;display:block;height:4px;background:var(--grad-hangat);z-index:2}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

.brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand img{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:contain;padding:2px;
  box-shadow:0 0 0 3px rgba(244,180,0,.35)}
.brand-text{font-size:1.12rem;font-weight:800;color:#fff;line-height:1.15;letter-spacing:.01em}
.brand-text small{display:block;font-size:.7rem;font-weight:700;color:var(--emas);letter-spacing:.02em;margin-top:2px}

.user-panel{display:flex;align-items:center;gap:11px;margin:14px 14px 4px;padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07)}
.user-panel .ava{width:40px;height:40px;border-radius:50%;background:var(--grad-hangat);display:flex;align-items:center;
  justify-content:center;font-weight:800;color:#fff;flex-shrink:0;font-size:.85rem}
.user-panel img.ava{object-fit:cover;background:#fff}
.user-panel .nm{font-size:.86rem;font-weight:700;color:#fff;line-height:1.25}
.user-panel .rl{font-size:.72rem;color:#9fb3e8;text-transform:capitalize;font-weight:600}

.nav-header{padding:16px 22px 6px;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#7f93c9;font-weight:800}
.nav-menu{list-style:none;padding:0 12px 6px}
.nav-menu li{margin-bottom:2px}
.nav-menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:#c3cff3;font-size:.875rem;font-weight:600;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav-menu a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav-menu a.aktif{background:var(--grad);color:#fff;box-shadow:0 8px 18px -10px rgba(47,99,214,.95)}
.nav-menu a.aktif i{color:var(--emas)}
.nav-menu a i{width:18px;text-align:center;font-size:.92rem;flex-shrink:0;opacity:.95}
.nav-menu a .badge{margin-left:auto;background:var(--merah);color:#fff;padding:1px 8px;border-radius:99px;font-size:.7rem}
.sidebar > .nav-menu:last-child{padding-bottom:30px}

/* ---------- Area utama ---------- */
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}

.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis);padding:11px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;position:sticky;top:0;z-index:900}
.topbar .kiri{display:flex;align-items:center;gap:14px;min-width:0}
.btn-menu{display:none;background:#fff;border:1px solid var(--garis);border-radius:10px;width:40px;height:40px;
  font-size:1.05rem;color:var(--biru);cursor:pointer}
.ta-badge{background:var(--indigo-4);color:var(--biru);padding:6px 14px;border-radius:99px;font-size:.78rem;font-weight:700;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--indigo-5)}
.ta-badge i{color:var(--merah)}
.topbar .kanan{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topbar .kanan a{color:var(--abu);font-size:.84rem;font-weight:600;display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:10px;transition:background .15s ease,color .15s ease}
.topbar .kanan a:hover{color:var(--biru);background:var(--muda)}
.topbar .kanan a.tb-keluar{color:var(--merah)}
.topbar .kanan a.tb-keluar:hover{background:#fde7ea}

.konten{padding:26px 28px 36px;flex:1;width:100%}
.judul-halaman{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.judul-halaman h1{font-size:1.55rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.2}
.judul-halaman h1::after{content:"";display:block;width:46px;height:4px;border-radius:4px;background:var(--grad-hangat);margin-top:8px}
.judul-halaman .sub{color:var(--abu);font-size:.86rem;margin-top:8px}

.footer-app{padding:16px 28px;font-size:.8rem;color:var(--abu);border-top:1px solid var(--garis);background:#fff;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Kartu ---------- */
.card{background:var(--putih);border-radius:16px;border:1px solid var(--garis);box-shadow:var(--bayang);margin-bottom:20px;overflow:hidden}
.card-header{padding:14px 18px;border-bottom:1px solid var(--garis);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:10px}
.card-header h2{font-size:1rem;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:9px}
.card-header h2 i{width:30px;height:30px;border-radius:9px;background:var(--indigo-4);color:var(--biru-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.card-body{padding:18px}

/* ---------- Kotak statistik ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.stat-box{background:var(--putih);border-radius:16px;border:1px solid var(--garis);padding:18px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--bayang);position:relative;overflow:hidden;transition:transform .2s ease}
.stat-box:hover{transform:translateY(-3px)}
.stat-ikon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;color:#fff;flex-shrink:0}
.si-indigo{background:var(--grad)}
.si-biru{background:linear-gradient(135deg,#0e8fd6,#38b6f0)}
.si-hijau{background:linear-gradient(135deg,#14915a,#2fbf7b)}
.si-kuning{background:linear-gradient(135deg,#f4b400,#ef7d00)}
.si-merah{background:var(--grad-hangat)}
.si-ungu{background:linear-gradient(135deg,#0a1b46,#1f48a8)}
.stat-teks b{display:block;font-size:1.7rem;font-weight:800;line-height:1.1;color:var(--navy)}
.stat-teks span{font-size:.82rem;color:var(--abu);font-weight:600}

/* ---------- Tabel ---------- */
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.86rem}
table.data th{background:#f5f8fe;color:var(--navy);font-weight:800;text-align:left;padding:11px 13px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--garis);white-space:nowrap}
table.data td{padding:11px 13px;border-bottom:1px solid var(--garis);vertical-align:middle}
table.data tbody tr{transition:background .15s ease}
table.data tbody tr:hover{background:#f7f9ff}
table.data tr:last-child td{border-bottom:0}
.td-foto{width:46px}
.foto-bulat{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;display:block;border:2px solid #fff;box-shadow:0 0 0 1px var(--garis)}
.foto-ini{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:.76rem;font-weight:800}

/* ---------- Lencana ---------- */
.lencana{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700;white-space:nowrap}
.l-hijau{background:#e3f7ec;color:#11683b}
.l-merah{background:#fde7ea;color:#9b1728}
.l-kuning{background:#fff4d1;color:#7a5800}
.l-biru{background:var(--indigo-4);color:var(--biru)}
.l-abu{background:#eef1f7;color:#4a5574}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:11px;font-size:.86rem;
  font-weight:700;border:1.5px solid transparent;cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.4;
  transition:filter .15s ease,transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn-utama{background:var(--grad);color:#fff;box-shadow:0 8px 18px -10px rgba(47,99,214,.9)}
.btn-utama:hover{color:#fff}
.btn-biru{background:var(--biru-2);color:#fff}
.btn-biru:hover{color:#fff}
.btn-hijau{background:var(--hijau);color:#fff}
.btn-hijau:hover{color:#fff}
.btn-merah{background:var(--merah);color:#fff}
.btn-merah:hover{color:#fff}
.btn-garis{background:#fff;border-color:var(--garis);color:var(--navy)}
.btn-garis:hover{border-color:var(--biru-2);color:var(--biru-2);filter:none}
.btn-sm{padding:5px 11px;font-size:.76rem;border-radius:9px}

/* ---------- Formulir ---------- */
.form-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-baris > *{min-width:0}
label{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:6px}
label .wajib{color:var(--merah)}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],input[type=time],
input[type=url],input[type=tel],input[type=search],input[type=datetime-local],input[type=month],select,textarea{
  width:100%;padding:9px 12px;border:1.5px solid var(--garis);border-radius:10px;font-family:inherit;
  font-size:.87rem;background:#fff;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
input[type=file]{font-family:inherit;font-size:.84rem;max-width:100%}
input[type=radio],input[type=checkbox]{accent-color:var(--biru-2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--biru-2);box-shadow:0 0 0 4px rgba(47,99,214,.13)}
.grup{margin-bottom:14px}
.bantuan{font-size:.76rem;color:var(--abu);margin-top:5px}

/* ---------- Peringatan ---------- */
.alert{padding:12px 16px;border-radius:12px;margin-bottom:18px;font-size:.87rem;display:flex;align-items:center;gap:10px;font-weight:600;border:1px solid transparent}
.a-hijau{background:#e3f7ec;color:#11683b;border-color:#b5e6c9}
.a-merah{background:#fde7ea;color:#9b1728;border-color:#f6bcc5}
.a-kuning{background:#fff6dc;color:#7a5800;border-color:#f7dd8f}
.a-biru{background:var(--indigo-4);color:var(--biru);border-color:var(--indigo-5)}

/* ---------- Pencarian dan saringan ---------- */
.bar-alat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.bar-alat input[type=text],.bar-alat select{width:auto;min-width:170px}
.bar-alat .tumbuh{flex:1;min-width:200px}

/* ============================================================
   HALAMAN MASUK — dua kolom: panel kampus + formulir
   ============================================================ */
body.hal-login{background:var(--bg);min-height:100vh}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;position:relative;z-index:2}
.login-sisi{position:relative;overflow:hidden;color:#fff;padding:44px 52px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--grad-navy)}
.login-sisi::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 15% 10%,rgba(79,123,240,.45),transparent 55%),
             radial-gradient(ellipse at 90% 100%,rgba(215,38,61,.35),transparent 50%)}
.login-sisi .pola{position:absolute;inset:0;z-index:1;opacity:.08;
  background-image:radial-gradient(#fff 1.2px,transparent 1.4px);background-size:22px 22px}
.login-sisi > *{position:relative;z-index:3}
.login-sisi .ls-merek{display:flex;align-items:center;gap:14px}
.login-sisi .ls-merek img{width:58px;height:58px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 4px rgba(244,180,0,.4)}
.login-sisi .ls-merek b{display:block;font-size:1.05rem;font-weight:800;line-height:1.2}
.login-sisi .ls-merek small{color:var(--emas);font-weight:700;font-size:.78rem}
.login-sisi h2{font-family:var(--font-hias);font-weight:600;font-style:italic;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.15;margin:30px 0 14px;max-width:520px}
.login-sisi h2 span{color:var(--emas)}
.login-sisi p.ls-lead{color:#c9d6f5;max-width:470px;font-size:.95rem}
.ls-fitur{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-width:520px}
.ls-fitur div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;
  display:flex;gap:10px;align-items:center;font-size:.83rem;font-weight:600;backdrop-filter:blur(4px)}
.ls-fitur i{width:32px;height:32px;border-radius:10px;background:var(--grad-hangat);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.login-sisi .ls-bawah{font-size:.78rem;color:#9fb3e8}

.login-kanan{display:flex;align-items:center;justify-content:center;padding:34px 22px;background:var(--bg)}
.login-box{background:var(--putih);border-radius:22px;border:1px solid var(--garis);box-shadow:0 24px 60px -30px rgba(15,44,115,.45);
  width:100%;max-width:420px;overflow:hidden;position:relative}
.login-box::before{content:"";display:block;height:5px;background:var(--grad-hangat)}
.login-atas{padding:26px 28px 6px;text-align:left}
.login-atas img{display:none}
.login-atas h1{font-size:1.5rem;font-weight:800;color:var(--navy)}
.login-atas p{font-size:.84rem;color:var(--abu);margin-top:4px}
.login-isi{padding:18px 28px 24px}
.login-isi h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;color:var(--merah);font-weight:800}
.login-isi .masukan-ikon{position:relative}
.login-isi .masukan-ikon i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--abu-muda);font-size:.9rem}
.login-isi .masukan-ikon input{padding-left:38px;height:46px}
.login-isi .masukan-ikon .lihat{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--abu);cursor:pointer;padding:8px 10px;font-size:.9rem}
.login-isi .btn-utama{height:48px;font-size:.95rem;border-radius:12px}
.login-kaki{text-align:center;padding:15px;background:#f8faff;border-top:1px solid var(--garis);font-size:.8rem;color:var(--abu)}
.login-kaki a{font-weight:700}

/* Slide foto sebagai latar panel kampus */
.login-slide{position:absolute;inset:0;z-index:0;overflow:hidden}
.ls-item{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1.1s ease;transform:scale(1.04)}
.ls-item.on{opacity:1}
.login-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(10,27,70,.9) 0%,rgba(17,40,106,.78) 55%,rgba(31,72,168,.62) 100%)}
.ls-teks{font-size:.86rem;color:#fff;opacity:.9;margin-top:8px}

@media (max-width:900px){
  .login-wrap{grid-template-columns:1fr}
  .login-sisi{padding:28px 22px 30px}
  .login-sisi h2{margin:20px 0 8px}
  .ls-fitur{display:none}
  .login-sisi .ls-bawah{display:none}
  .login-kanan{padding:0 16px 30px;margin-top:-18px}
}

/* ---------- Kosong ---------- */
.kosong{text-align:center;padding:38px 20px;color:var(--abu)}
.kosong i{font-size:2.5rem;color:var(--indigo-5);margin-bottom:12px;display:block}
.kosong p{font-size:.9rem}

/* ---------- Halaman ---------- */
.paginasi{display:flex;gap:5px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.paginasi a,.paginasi span{padding:6px 12px;border-radius:9px;font-size:.84rem;border:1px solid var(--garis);background:#fff;font-weight:600}
.paginasi .kini{background:var(--grad);color:#fff;border-color:transparent}

/* ---------- Responsif ---------- */
@media (max-width:992px){
  .sidebar{transform:translateX(-100%);box-shadow:none}
  .sidebar.buka{transform:translateX(0);box-shadow:20px 0 50px -20px rgba(0,0,0,.5)}
  .main{margin-left:0}
  .btn-menu{display:inline-flex;align-items:center;justify-content:center}
  .tirai{display:none;position:fixed;inset:0;background:rgba(10,27,70,.55);z-index:999}
  .tirai.tampil{display:block}
  .topbar{padding:10px 16px}
  .topbar .kanan a span.tb-label{display:none}
}
@media (max-width:576px){
  .konten{padding:18px 14px 28px}
  .judul-halaman h1{font-size:1.3rem}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-box{padding:12px;gap:10px}
  .stat-ikon{width:42px;height:42px;font-size:1.1rem}
  .stat-teks b{font-size:1.3rem}
  .ta-badge{font-size:.72rem;padding:5px 10px}
  .footer-app{padding:14px 16px}
}

/* ============================================================
   AKSEN NOKEN PAPUA
   Pita hias di atas kartu modul Kelas Digital (Absensi & Tugas
   Online), terinspirasi anyaman noken: jalinan silang dan
   simpul titik, dalam warna kampus. Murni gradient CSS.
   ============================================================ */
:root{
  --toraja-hitam:#0a1b46;
  --toraja-krem:#fff4d1;
  --toraja-merah:#d7263d;
  --toraja-jingga:#f4b400;
}
.batik-bingkai{border-radius:16px 16px 0 0;overflow:hidden;box-shadow:var(--bayang-kecil)}
.batik-pita{
  height:14px;
  background-color:var(--toraja-krem);
  background-image:
    repeating-linear-gradient(45deg, var(--toraja-hitam) 0 4px, transparent 4px 10px),
    repeating-linear-gradient(-45deg, var(--toraja-merah) 0 4px, transparent 4px 10px);
}
.batik-titik{
  height:10px;
  background-color:var(--toraja-hitam);
  background-image:radial-gradient(circle, var(--toraja-jingga) 2px, transparent 2.3px);
  background-size:14px 10px;
  background-position:center;
}
.batik-pita-utama{
  height:18px;
  background-image:
    repeating-linear-gradient(135deg, #1f48a8 0 10px, #2f63d6 10px 20px),
    repeating-linear-gradient(45deg, rgba(244,180,0,.35) 0 10px, transparent 10px 20px);
}

/* ---------- Saklar aktif/nonaktif ---------- */
.saklar-baris{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--garis)}
.saklar-baris:last-child{border-bottom:0}
.saklar-teks strong{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:.95rem}
.saklar-teks strong i{color:var(--merah)}
.saklar-teks p{font-size:.8rem;color:var(--abu);margin-top:3px;max-width:520px}
.saklar{position:relative;display:inline-block;width:48px;height:27px;flex-shrink:0}
.saklar input{opacity:0;width:0;height:0}
.saklar-slider{position:absolute;cursor:pointer;inset:0;background:#cfd6e6;border-radius:27px;transition:.2s}
.saklar-slider::before{content:"";position:absolute;height:21px;width:21px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.saklar input:checked + .saklar-slider{background:var(--biru-2)}
.saklar input:checked + .saklar-slider::before{transform:translateX(21px)}

/* ---------- Pilihan status kehadiran ---------- */
.grup-status{display:flex;flex-wrap:wrap;gap:4px}
.opsi-status{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1.5px solid var(--garis);
  border-radius:99px;font-size:.78rem;cursor:pointer;transition:.15s;margin:0;font-weight:600}
.opsi-status input{margin:0}
.opsi-status:has(input:checked){background:var(--indigo-4);border-color:var(--biru-2);color:var(--biru)}

/* ============================================================
   DASBOR
   ============================================================ */
.kotak-utama{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.ku{position:relative;border-radius:18px;color:#fff;overflow:hidden;text-decoration:none;
  box-shadow:var(--bayang);transition:transform .2s ease,box-shadow .2s ease;display:block}
.ku::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-50px;top:-60px;background:rgba(255,255,255,.1);z-index:1}
.ku:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(15,44,115,.6);color:#fff}
.ku-isi{padding:20px 20px 10px;position:relative;z-index:2}
.ku-isi b{display:block;font-size:2.3rem;font-weight:800;line-height:1}
.ku-isi span{font-size:.9rem;opacity:.95;font-weight:600}
.ku-bg{position:absolute;right:16px;top:18px;font-size:3.6rem;opacity:.2;z-index:1}
.ku-kaki{background:rgba(0,0,0,.13);padding:8px 20px;font-size:.8rem;font-weight:700;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:6px}
.ku-biru{background:var(--grad)}
.ku-hijau{background:linear-gradient(120deg,#0f7a4b,#14915a 55%,#2fbf7b)}
.ku-kuning{background:linear-gradient(120deg,#ef7d00,#f4b400);color:#3d2a00}
.ku-kuning .ku-kaki{color:#3d2a00}
.ku-kuning:hover{color:#3d2a00}
.ku-merah{background:var(--grad-hangat)}

.judul-bagian{font-size:1rem;font-weight:800;color:var(--navy);margin:6px 0 14px;display:flex;align-items:center;gap:9px}
.judul-bagian i{color:var(--merah)}

.kotak-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.ks{position:relative;border-radius:16px;padding:18px 18px 16px;color:#fff;overflow:hidden;box-shadow:var(--bayang-kecil)}
.ks b{display:block;font-size:1.9rem;font-weight:800;line-height:1;position:relative;z-index:2}
.ks span{font-size:.84rem;opacity:.95;position:relative;z-index:2;font-weight:600}
.ks i{position:absolute;right:12px;bottom:8px;font-size:2.8rem;opacity:.2;z-index:1}
.ks-hijau{background:linear-gradient(135deg,#14915a,#2fbf7b)}
.ks-biru{background:var(--grad)}
.ks-kuning{background:linear-gradient(135deg,#ef7d00,#f4b400);color:#3d2a00}
.ks-merah{background:linear-gradient(135deg,#b61e33,#d7263d)}
.ks-gelap{background:linear-gradient(135deg,#0a1b46,#11286a)}
.ks-pink{background:linear-gradient(135deg,#d7263d,#f0643a)}
.ks-abu{background:linear-gradient(135deg,#5a6686,#7c88a8)}

.kotak-kecil{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.kk{background:var(--putih);border-radius:14px;border:1px solid var(--garis);padding:13px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--bayang-kecil);text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.kk:hover{transform:translateY(-2px);border-color:var(--indigo-5)}
.kk-ik{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;flex-shrink:0}
.ki-biru{background:linear-gradient(135deg,#0e8fd6,#38b6f0)}.ki-kuning{background:linear-gradient(135deg,#ef7d00,#f4b400)}
.ki-hijau{background:linear-gradient(135deg,#14915a,#2fbf7b)}
.ki-indigo{background:var(--grad)}.ki-tosca{background:linear-gradient(135deg,#0a1b46,#1f48a8)}.ki-merah{background:var(--grad-hangat)}
.kk small{display:block;font-size:.76rem;color:var(--abu);font-weight:600}
.kk b{font-size:1.15rem;color:var(--navy)}

.dua-sisi{display:grid;grid-template-columns:1.65fr 1fr;gap:20px;align-items:start}
.dua-sisi > *{min-width:0}
@media (max-width:1050px){.dua-sisi{grid-template-columns:1fr}}

.panel-ta{background:var(--grad-navy);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--bayang);margin-bottom:20px;color:#fff;position:relative;overflow:hidden}
.panel-ta::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(244,180,0,.14)}
.pt-ik{width:48px;height:48px;border-radius:14px;background:var(--grad-hangat);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.panel-ta small{display:block;font-size:.78rem;color:#9fb3e8;font-weight:600}
.panel-ta b{font-size:1.05rem;color:#fff}

.item-peng{padding:12px 18px;border-bottom:1px solid var(--garis);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.item-peng:last-child{border-bottom:0}
.item-peng a{font-size:.88rem;font-weight:700;flex:1;min-width:150px;color:var(--navy)}
.item-peng a:hover{color:var(--biru-2)}
.item-peng small{width:100%;font-size:.74rem;color:var(--abu)}

/* Menu yang modulnya belum dibangun */
.nav-menu a.belum{color:#7f93c9;opacity:.75}
.nav-menu a.belum:hover{background:rgba(255,255,255,.05);color:#b8c6ee}
.badge-segera{margin-left:auto;background:rgba(244,180,0,.18);color:var(--emas);padding:1px 7px;
  border-radius:9px;font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}

/* ============================================================
   TABEL DATA: bilah alat, pengurutan, paginasi
   ============================================================ */
.tabel-bilah{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--garis);background:#fafcff}
.tb-kiri{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tb-tampil{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--abu);margin:0;font-weight:600}
.tb-tampil select{width:auto;padding:5px 8px;font-size:.83rem}
.tb-ekspor{display:flex;gap:4px;flex-wrap:wrap}
.btn-eks{background:#fff;border:1.5px solid var(--garis);color:var(--navy);padding:5px 11px;border-radius:9px;
  font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-eks:hover{background:var(--biru-2);color:#fff;border-color:var(--biru-2)}
.tb-cari{display:flex;align-items:center;gap:7px;margin:0}
.tb-cari label{margin:0;font-size:.83rem;color:var(--abu);font-weight:600}
.tb-cari input{width:230px;padding:7px 12px;font-size:.84rem}
.tb-hapus{color:var(--abu);font-size:.9rem;padding:2px 5px}
.tb-hapus:hover{color:var(--merah)}

.th-tautan{color:var(--navy);display:flex;align-items:center;gap:6px;justify-content:space-between;white-space:nowrap}
.th-tautan i{font-size:.72rem;opacity:.45}
.th-aktif .th-tautan i{opacity:1;color:var(--merah)}
table.data th.th-aktif{background:var(--indigo-4)}

.tabel-kaki{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--garis);background:#fafcff}
.tk-info{font-size:.82rem;color:var(--abu)}
.paginasi{margin:0}
.paginasi .mati{color:var(--abu-muda);background:#f6f8fc}

/* Sel bertumpuk seperti NIM/NIK dan NIDN/NUPTK */
.sel-tumpuk{line-height:1.35}
.sel-tumpuk small{display:block;color:var(--abu);font-size:.74rem}
.sel-tumpuk .nilai{font-weight:700;color:var(--biru);font-size:.84rem}
.sel-tumpuk .kosong{color:var(--abu-muda);font-style:italic;font-size:.76rem;padding:0;text-align:left}

/* Tab prodi */
.tab-prodi{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px 0;border-bottom:1px solid var(--garis);background:#fafcff}
.tab-prodi a{padding:9px 16px;border-radius:11px 11px 0 0;font-size:.85rem;font-weight:700;color:var(--abu);
  background:#eef2fb;border:1px solid var(--garis);border-bottom:0;display:flex;align-items:center;gap:7px}
.tab-prodi a:hover{background:var(--indigo-4);color:var(--biru)}
.tab-prodi a.aktif{background:#fff;color:var(--biru);border-bottom:2px solid #fff;margin-bottom:-1px;box-shadow:inset 0 3px 0 var(--merah)}

/* Formulir dalam kartu lebar */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.form-grid > *{min-width:0}
.form-grid .lebar{grid-column:1 / -1}
.pemisah-form{grid-column:1/-1;border-top:1px dashed var(--garis);margin:6px 0 2px;padding-top:14px;
  font-size:.78rem;font-weight:800;color:var(--merah);text-transform:uppercase;letter-spacing:.08em}

/* Pratinjau foto pada formulir */
.foto-pratinjau{width:96px;height:120px;border-radius:12px;object-fit:cover;object-position:top center;
  border:1px solid var(--garis);background:#f1f4fa;display:block}
.foto-kotak{width:96px;height:120px;border-radius:12px;background:var(--indigo-4);color:var(--biru);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800}

@media (max-width:700px){
  .tabel-bilah{flex-direction:column;align-items:stretch}
  .tb-cari input{width:100%}
  .tb-cari{width:100%}
}

/* ---------- Kotak centang kelas ---------- */
.kotak-centang{border:1.5px solid var(--garis);border-radius:12px;max-height:220px;overflow-y:auto;padding:8px 4px;background:#fff}
.kc-judul{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--abu);
  padding:6px 10px 4px;margin-top:4px}
.kc-judul:first-child{margin-top:0}
.kc-opsi{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:.85rem;cursor:pointer;border-radius:8px;font-weight:500;margin:0}
.kc-opsi:hover{background:var(--indigo-4)}
.kc-opsi input{margin:0;width:15px;height:15px;flex-shrink:0}

/* ---------- Tombol Instal Aplikasi (PWA, khusus dosen) ---------- */
.btn-instal-app{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;
  border:1.5px solid var(--biru-2);background:var(--indigo-4);color:var(--biru);font-size:.8rem;
  font-weight:700;font-family:inherit;cursor:pointer}
.btn-instal-app:hover{background:var(--biru-2);color:#fff}

/* ---------- Cetak ---------- */
@media print{
  .sidebar,.topbar,.footer-app,.tirai,.btn,.bar-alat,.tabel-bilah,.tabel-kaki{display:none!important}
  .main{margin-left:0}
  .konten{padding:0}
  .card{box-shadow:none;border:1px solid #ccc}
  body{background:#fff}
}