/* =====================================================================
   Ploting Tugas Akhir - Tema "Dark Luxury / Liquid Glass + Neon"
   ===================================================================== */
:root{
  color-scheme:dark;   /* daftar pilihan bawaan peramban ikut bertema gelap */
  --bg:#05060b;
  --bg-2:#080a12;
  --kaca:rgba(255,255,255,.045);
  --kaca-kuat:rgba(255,255,255,.075);
  --garis:rgba(255,255,255,.10);
  --garis-terang:rgba(255,255,255,.18);
  --teks:#eef2f9;
  --teks-2:#a7b0c4;
  --teks-3:#6f7891;
  --neon:#22d3ee;
  --neon-2:#a855f7;
  --emas:#e7c887;
  --hijau:#34d399;
  --kuning:#fbbf24;
  --merah:#fb7185;
  --biru:#60a5fa;
  --ungu:#c084fc;
  --r:18px;
  --r-sm:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--teks);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(800px 600px at 88% 8%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(180deg,#05060b 0%,#070810 50%,#04050a 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;line-height:1.25}
h1{font-size:26px}h2{font-size:20px}h3{font-size:17px}h4{font-size:15px}

/* ------------------------------------------------------------ KACA */
.kaca{
  background:var(--kaca);
  border:1px solid var(--garis);
  border-radius:var(--r);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 18px 50px rgba(0,0,0,.5);
  position:relative;
}
.kaca::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 42%);
}
.kartu{padding:22px}
.kartu>*{position:relative;z-index:1}

/* --------------------------------------------------------- KERANGKA */
.cangkang{display:flex;min-height:100vh}
.bilah{
  width:266px;flex-shrink:0;padding:20px 16px;
  border-right:1px solid var(--garis);
  background:rgba(8,10,18,.55);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.merek{display:flex;gap:12px;align-items:center;padding:8px 10px 20px}
.merek-ikon{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;font-weight:700;font-size:15px;color:#04121a;
  background:linear-gradient(135deg,var(--neon),var(--neon-2));
  box-shadow:0 0 22px rgba(34,211,238,.5);
}
.merek b{display:block;font-size:14px;letter-spacing:-.01em}
.merek span{display:block;font-size:11px;color:var(--teks-3);letter-spacing:.04em;text-transform:uppercase}
.nav-judul{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teks-3);padding:16px 12px 8px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r-sm);
  color:var(--teks-2);font-size:14px;font-weight:500;margin-bottom:3px;
  border:1px solid transparent;transition:all .18s ease;
}
.nav a:hover{background:var(--kaca);color:var(--teks);border-color:var(--garis)}
.nav a.aktif{
  color:#fff;background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(168,85,247,.10));
  border-color:rgba(34,211,238,.42);
  box-shadow:0 0 20px rgba(34,211,238,.16),0 0 0 1px rgba(34,211,238,.10) inset;
}
.nav a .tik{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);opacity:0;transition:.18s}
.nav a.aktif .tik{opacity:1}

.utama{flex:1;min-width:0;padding:22px 26px 48px}
.bilah-atas{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;margin-bottom:22px;
}
.bilah-atas .kiri small{color:var(--teks-3);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.aku{display:flex;align-items:center;gap:12px}
.avatar{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:600;font-size:13px;
  background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(168,85,247,.28));
  border:1px solid var(--garis-terang);color:#fff;
}
.aku .nm{font-size:13px;font-weight:600;line-height:1.2;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aku .pr{font-size:11px;color:var(--teks-3);text-transform:uppercase;letter-spacing:.08em}

/* --------------------------------------------------------- KOMPONEN */
.kisi{display:grid;gap:16px}
.kisi-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.kisi-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kisi-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.statistik{padding:18px 20px;overflow:hidden}
.statistik .lbl{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teks-3)}
.statistik .agka{font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1}
.statistik .ket{font-size:12px;color:var(--teks-2);margin-top:6px}
.statistik .garis-neon{height:2px;border-radius:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--neon),var(--neon-2));box-shadow:0 0 14px rgba(34,211,238,.55)}

.judul-blok{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.judul-blok p{color:var(--teks-3);font-size:13px;margin-top:2px}

/* Tombol */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--garis-terang);background:var(--kaca-kuat);color:var(--teks);
  transition:all .18s ease;font-family:inherit;
}
.btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.btn-neon{
  border-color:rgba(34,211,238,.5);color:#eafcff;
  background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.18));
  box-shadow:0 0 22px rgba(34,211,238,.25);
}
.btn-neon:hover{box-shadow:0 0 30px rgba(34,211,238,.45);border-color:var(--neon)}
.btn-bahaya{border-color:rgba(251,113,133,.45);color:#ffe3e8;background:rgba(251,113,133,.14)}
.btn-bahaya:hover{background:rgba(251,113,133,.24);box-shadow:0 0 22px rgba(251,113,133,.3)}
.btn-mini{padding:6px 12px;font-size:12px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Medan isian */
.medan{margin-bottom:14px}
.medan label{display:block;font-size:12.5px;font-weight:600;color:var(--teks-2);margin-bottom:6px;letter-spacing:.01em}
.medan .bantu{font-size:11.5px;color:var(--teks-3);margin-top:5px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=email],select,textarea{
  width:100%;padding:11px 14px;border-radius:12px;font-size:14px;font-family:inherit;
  background:rgba(255,255,255,.05);border:1px solid var(--garis);color:var(--teks);
  transition:all .18s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(34,211,238,.6);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(34,211,238,.13),0 0 20px rgba(34,211,238,.14);
}
select option{background:#0b0e18;color:var(--teks)}
/* Label pengelompokan pada daftar pilihan sempat tak terbaca karena peramban
   meredupkannya di atas latar gelap. Warna dan bobotnya ditegaskan di sini. */
select optgroup{background:#0b0e18;color:var(--neon);font-weight:700;
  font-style:normal;font-size:12px;letter-spacing:.06em}
select optgroup option{color:var(--teks);font-weight:400;letter-spacing:normal}
textarea{resize:vertical;min-height:96px}
.baris{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* Tabel */
.bungkus-tabel{overflow-x:auto;border-radius:var(--r);border:1px solid var(--garis)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
thead th{
  text-align:left;padding:13px 16px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teks-3);background:rgba(255,255,255,.035);border-bottom:1px solid var(--garis);font-weight:600;
}
tbody td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:middle;color:var(--teks-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,255,255,.035)}
tbody td strong{color:var(--teks);font-weight:600}
td.aksi{white-space:nowrap;text-align:right}

/* Lencana */
.lencana{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;border:1px solid;
}
.lencana::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.l-hijau{color:var(--hijau);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.10)}
.l-kuning{color:var(--kuning);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.10)}
.l-merah{color:var(--merah);border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.10)}
.l-biru{color:var(--biru);border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.10)}
.l-ungu{color:var(--ungu);border-color:rgba(192,132,252,.35);background:rgba(192,132,252,.10)}
.l-abu{color:var(--teks-3);border-color:var(--garis);background:rgba(255,255,255,.04)}

/* Pesan kilat */
.flash{padding:13px 18px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13.5px;
  border:1px solid;display:block;line-height:1.6}
.f-sukses{color:#bbf7e2;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.12)}
.f-galat{color:#ffd9df;border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.12)}
.f-info{color:#cfefff;border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.11)}

/* Progres */
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--neon),var(--neon-2));box-shadow:0 0 12px rgba(34,211,238,.6)}

.langkah{display:flex;gap:0;flex-wrap:wrap;margin:6px 0 2px;overflow:hidden}
.langkah div{flex:1 1 84px;min-width:0;text-align:center;font-size:11px;color:var(--teks-3);padding-top:16px;position:relative}
.langkah div::before{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid var(--garis)}
.langkah div::after{content:'';position:absolute;top:9px;left:50%;width:100%;height:1px;background:var(--garis)}
.langkah div:last-child::after{display:none}
.langkah div.lewat{color:var(--teks)}
.langkah div.lewat::before{background:var(--neon);border-color:var(--neon);box-shadow:0 0 12px var(--neon)}

/* Kartu topik */
.topik{padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,border-color .2s}
.topik:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.35)}
.topik h4{font-size:15px;line-height:1.4}
.topik .meta{font-size:12px;color:var(--teks-3)}
.topik .kaki{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}

/* Halaman masuk */
.laman-masuk{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}
.masuk-kiri{padding:56px 60px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.masuk-kiri .cap{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--neon)}
.masuk-kiri h1{font-size:44px;line-height:1.1;letter-spacing:-.035em}
.masuk-kiri h1 em{font-style:normal;background:linear-gradient(120deg,var(--neon),var(--neon-2) 60%,var(--emas));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.masuk-kiri p{color:var(--teks-2);max-width:46ch}
.poin{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--teks-2)}
.poin b{color:var(--teks);display:block;font-size:13.5px}
.poin i{width:9px;height:9px;border-radius:50%;margin-top:7px;flex-shrink:0;
  background:var(--neon);box-shadow:0 0 12px var(--neon)}
.masuk-kanan{display:grid;place-items:center;padding:40px 48px 40px 0}
.kotak-masuk{width:100%;max-width:400px;padding:34px}

/* Publik */
.pita{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.hero{padding:44px 40px;margin-bottom:20px;text-align:center}
.hero h1{font-size:38px;letter-spacing:-.03em;margin-bottom:12px}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--neon),var(--neon-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--teks-2);max-width:62ch;margin:0 auto}

.kosong{padding:40px 20px;text-align:center;color:var(--teks-3);font-size:13.5px}
.pisah{height:1px;background:var(--garis);margin:18px 0}
.mini{font-size:12px;color:var(--teks-3)}
.tab-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab-bar a{padding:8px 16px;border-radius:11px;font-size:13px;font-weight:600;color:var(--teks-2);
  border:1px solid var(--garis);background:var(--kaca)}
.tab-bar a.aktif{color:#fff;border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.15);
  box-shadow:0 0 18px rgba(34,211,238,.2)}

.tombol-bilah{display:none}
@media (max-width:960px){
  .laman-masuk{grid-template-columns:1fr}
  .masuk-kiri{padding:40px 26px 0}
  .masuk-kiri h1{font-size:32px}
  .masuk-kanan{padding:26px}
  .cangkang{flex-direction:column}
  .bilah{position:relative;width:100%;height:auto;border-right:none;border-bottom:1px solid var(--garis);display:none}
  .bilah.buka{display:block}
  .tombol-bilah{display:inline-flex}
  .utama{padding:16px 14px 40px}
  .hero{padding:30px 20px}
  .hero h1{font-size:27px}
}
@media print{
  body::before,body::after,.bilah,.btn{display:none}
  .kaca{background:#fff;color:#000;box-shadow:none;border-color:#999}
  body{background:#fff;color:#000}
}

/* ------------------------------------------------ Profil & foto pengguna */
.foto-besar{width:132px;height:132px;margin:0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:46px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(140deg,rgba(34,211,238,.22),rgba(168,85,247,.22));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 6px rgba(34,211,238,.07), 0 12px 34px rgba(0,0,0,.45)}
.foto-besar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.rekap-profil{margin-top:18px;text-align:left}
.rekap-profil div{display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.rekap-profil div:last-child{border-bottom:none}
.rekap-profil span{color:var(--teks-3)}
.rekap-profil b{font-variant-numeric:tabular-nums}
input[type=file]{padding:9px 12px;font-size:13px;color:var(--teks-2)}
input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--garis);background:rgba(255,255,255,.05);color:var(--teks);cursor:pointer}
.baris-tanggal{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.baris-tanggal:last-child{border-bottom:none}
.avatar-mini{width:28px;height:28px;flex-shrink:0;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:linear-gradient(140deg,rgba(34,211,238,.22),rgba(168,85,247,.22));
  border:1px solid rgba(255,255,255,.12)}
.avatar-mini img{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------------- Pengaman teks panjang tanpa spasi
   Judul dan abstrak yang diketik tanpa spasi (atau berisi tautan panjang)
   sebelumnya menembus batas kartu. Pemenggalan dipaksakan di semua wadah
   teks, dan anak kisi diberi min-width:0 agar boleh menyusut. */
.kaca, .kartu, td, th, p, h1, h2, h3, h4, li, .mini, .lencana{
  overflow-wrap:anywhere; word-break:break-word}
.kisi > *, .kisi-2 > *, .kisi-3 > *, .kisi-4 > *{min-width:0}
.teks-abstrak{max-height:180px;overflow-y:auto;padding-right:6px}
.teks-abstrak::-webkit-scrollbar{width:6px}
.teks-abstrak::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.potong-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
select, input, textarea{min-width:0;max-width:100%}
form{min-width:0}
.foto-mhs{width:52px;height:52px;flex-shrink:0;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;font-size:19px;font-weight:700;
  background:linear-gradient(140deg,rgba(34,211,238,.20),rgba(168,85,247,.20));
  border:1px solid rgba(255,255,255,.12)}
.foto-mhs img{width:100%;height:100%;object-fit:cover;display:block}
/* Nama orang tidak dipenggal per kata di dalam tabel sempit. */
table td strong{overflow-wrap:normal;word-break:normal}
.btn{white-space:nowrap}