/* =====================================================================
LDP JPM — Lapisan penyempurnaan v6.1
Fokus: kerapian tipografi, proporsi kartu/tabel, empty state, media
placeholder, ikon bebas-emoji, dan perilaku responsif di tablet/ponsel.
Dimuat PALING AKHIR (setelah style.css, admin.css, ldp-v6.css) sehingga
hanya menimpa detail yang perlu dirapikan — tanpa mengubah struktur.
===================================================================== */
:root{
--v61-line:#e4e8f2;
--v61-ink:#232745;
--v61-ink-soft:#5c6484;
--v61-red:#e11e16;
--v61-gold:#d4af37;
--v61-radius:16px;
--v61-shadow-sm:0 6px 18px -12px rgba(35,39,69,.5);
--v61-shadow:0 18px 44px -26px rgba(35,39,69,.45);
/* Rantai font lengkap: piktogram tetap tampil di Windows/Linux/macOS
sehingga ikon menu tidak lagi muncul sebagai kotak kosong. */
--v61-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",
"Noto Color Emoji","Noto Emoji","Android Emoji",sans-serif;
}
/* ---------------------------------------------------------------
1. Ikon berbasis piktogram — hilangkan "kotak tahu" (tofu)
--------------------------------------------------------------- */
.adm-side .ic,
.adm-side-foot a::first-letter,
.lms-tabs a i,
.ikon-emoji{
font-family:var(--v61-emoji);
font-variant-emoji:text;
line-height:1;
}
.adm-side .ic{
display:inline-flex;align-items:center;justify-content:center;
width:1.35rem;min-width:1.35rem;font-size:.98rem;opacity:.95;
}
/* Tombol lihat/sembunyi kata sandi: ganti karakter emoji dengan ikon SVG
agar identik di semua peramban dan perangkat. */
.pw-toggle::before{
content:"";width:1.15rem;height:1.15rem;background:currentColor;
-webkit-mask:var(--v61-eye) center/contain no-repeat;
mask:var(--v61-eye) center/contain no-repeat;
}
.pw-toggle{
--v61-eye:url('data:image/svg+xml;utf8,');
}
.pw-toggle.is-on{
--v61-eye:url('data:image/svg+xml;utf8,');
}
/* ---------------------------------------------------------------
2. Media & gambar — proporsi konsisten, tidak lagi "melar"
--------------------------------------------------------------- */
.card img, .kelas-card img, .lms-card img,
.artikel-card img, .program-card img,
img.thumb, .media-thumb img, .ph-media img{
display:block;width:100%;height:100%;object-fit:cover;
}
.card .card-media, .kelas-card .card-media,
.lms-card .card-media, .media-thumb, .ph-media{
aspect-ratio:16/9;overflow:hidden;border-radius:12px;
background:linear-gradient(135deg,#eef1f8,#e3e8f4);
}
/* Placeholder "gambar belum tersedia" dibatasi tingginya supaya tidak
mendominasi kartu seperti sebelumnya. */
img[src*="placeholder"], .img-placeholder{
max-height:260px;object-fit:contain;background:#f4f6fb;
}
.lms-course-card .thumb, .lms-progress-card .thumb{
aspect-ratio:16/9;max-height:220px;border-radius:12px;overflow:hidden;
}
/* ---------------------------------------------------------------
3. Tabel — area gulir jelas, header lengket, angka rata kanan
--------------------------------------------------------------- */
.table-wrap{
border:1px solid var(--v61-line);border-radius:14px;background:#fff;
box-shadow:var(--v61-shadow-sm);
/* Bayangan tepi sebagai petunjuk masih ada kolom di samping. */
background-image:
linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
linear-gradient(to right,rgba(255,255,255,0),#fff 70%),
linear-gradient(to right,rgba(35,39,69,.10),rgba(35,39,69,0)),
linear-gradient(to left,rgba(35,39,69,.10),rgba(35,39,69,0));
background-position:0 0,100% 0,0 0,100% 0;
background-repeat:no-repeat;
background-size:28px 100%,28px 100%,12px 100%,12px 100%;
background-attachment:local,local,scroll,scroll;
}
.table-wrap > table.data{margin:0;border:0;box-shadow:none;background:transparent}
.table-wrap > table.data thead th{
position:sticky;top:0;z-index:2;background:#f5f7fc;
font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--v61-ink-soft);
}
table.data td.num,table.data th.num{text-align:right;white-space:nowrap}
table.data td.empty,table.data .empty{
text-align:center;color:var(--v61-ink-soft);padding:2.1rem 1rem;font-weight:600;
}
/* ---------------------------------------------------------------
4. Empty state ringkas & informatif
--------------------------------------------------------------- */
.empty-state{
display:grid;gap:.4rem;justify-items:center;text-align:center;
padding:2.4rem 1.2rem;border:1px dashed var(--v61-line);border-radius:var(--v61-radius);
background:#fafbfe;color:var(--v61-ink-soft);
}
.empty-state strong{color:var(--v61-ink);font-size:1.02rem}
/* ---------------------------------------------------------------
5. Kartu statistik & panel — spasi proporsional
--------------------------------------------------------------- */
.adm-stat,.stat-card{border-radius:14px;box-shadow:var(--v61-shadow-sm)}
.adm-panel{border-radius:var(--v61-radius)}
.adm-panel + .adm-panel{margin-top:1.1rem}
.adm-content{padding-bottom:2.5rem}
/* ---------------------------------------------------------------
6. Tombol & form — tinggi seragam, sentuhan ramah ponsel
--------------------------------------------------------------- */
.btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.btn-sm{min-height:34px}
input,select,textarea{font:inherit}
.form-grid{display:grid;gap:1rem}
@media (min-width:720px){ .form-grid.cols-2{grid-template-columns:1fr 1fr} }
/* ---------------------------------------------------------------
7. Responsif — tablet & ponsel
--------------------------------------------------------------- */
@media (max-width:900px){
.adm-content{padding-inline:1rem}
.adm-grid-2,.adm-grid-3{grid-template-columns:1fr}
}
@media (max-width:640px){
h1{font-size:clamp(1.55rem,6vw,2rem);line-height:1.18}
h2{font-size:clamp(1.3rem,5vw,1.6rem)}
.hero-actions{width:100%}
.hero-actions .btn{flex:1 1 100%}
.adm-top{gap:.6rem}
.table-wrap{border-radius:12px}
table.data th,table.data td{padding:.62rem .7rem;font-size:.9rem}
.btn{width:auto}
.filter-bar,.adm-filter{display:grid;grid-template-columns:1fr;gap:.6rem}
}
/* ---------------------------------------------------------------
8. Gerak halus — dihormati preferensi pengguna
--------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
/* ---------------------------------------------------------------
9. Hero — keterbacaan teks di layar sempit
Gradien diagonal bawaan menyisakan area terang di sudut bawah sehingga
tombol sulit dibaca pada ponsel. Di bawah 900px overlay dibuat vertikal
dan lebih pekat, tanpa mengubah tampilan desktop.
--------------------------------------------------------------- */
@media (max-width:900px){
.hero-slide::after{
background:linear-gradient(180deg,rgba(35,39,69,.93),rgba(35,39,69,.88) 55%,rgba(35,39,69,.94));
}
.hero-slide{padding:1.6rem 1.25rem 2rem}
.hero-slide-in h1{font-size:clamp(1.5rem,6.4vw,2.1rem)}
}
/* ---------------------------------------------------------------
10. Tabel di dalam grid dua kolom (dashboard)
Sebelumnya tabel dipaksa min-width 600px sehingga terpotong walau ruang
desktop cukup. Mulai 900px tabel mengikuti lebar panel; gulir horizontal
hanya dipakai pada layar sempit.
--------------------------------------------------------------- */
@media (min-width:900px){
.table-wrap > table.data,
.adm-panel > table.data,
.adm-panel > form > table.data{min-width:0;width:100%}
}
/* Panel pada grid tidak lagi diregangkan mengikuti panel tertinggi. */
.adm-grid-2,.adm-grid-3{align-items:start}
/* Tabel harus tetap berperilaku sebagai tabel. Aturan lama sempat memakai
display:block untuk gulir, efeknya kolom terpotong; gulir kini ditangani
oleh .table-wrap sehingga tabel dikembalikan ke display:table. */
.table-wrap > table.data{display:table;width:100%;table-layout:auto}