/* ==========================================================
   RUANG PENULIS (dashboard) + HALAMAN MASUK
   Dipakai bersama aset/tema.css & aset/animasi.css
   ========================================================== */
body.halaman-dasbor,body.polos,body.halaman-masuk{padding-bottom:0}

/* ---------- Bilah atas dashboard ---------- */
.aksi-atas{display:flex;gap:.5rem;align-items:center}
.tbl-kecil{
  display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 1rem;border-radius:12px;text-decoration:none;font-size:.88rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);transition:all .25s var(--ease)
}
.tbl-kecil:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.tbl-kecil.bahaya:hover{background:#c0392b;border-color:#c0392b}
.hero-dasbor{padding-bottom:3.2rem}
.avatar{
  width:68px;height:68px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font-family:var(--font-judul);font-size:1.9rem;font-weight:700;
  color:var(--hijau-950);background:linear-gradient(135deg,var(--emas-300),var(--emas-500));box-shadow:0 0 0 6px rgba(255,255,255,.12),0 14px 28px -8px rgba(0,0,0,.4)
}
.hero-dasbor h1{font-size:clamp(1.6rem,4.4vw,2.4rem)}

/* ---------- Tata letak ---------- */
.dasbor{max-width:1200px;margin:-1.6rem auto 0;padding:0 1.25rem 3rem;display:grid;gap:1.6rem;position:relative;z-index:2}
.panel{background:#fff;border:1px solid var(--garis);border-radius:var(--r-lg);padding:clamp(1.2rem,3.5vw,2rem);box-shadow:var(--b-2)}
.panel h2{font-family:var(--font-judul);font-size:1.3rem;display:flex;align-items:center;gap:.8rem}
.kepala-panel{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.unggah h2{margin-bottom:1.2rem}
@media (min-width:1000px){
  .dasbor{grid-template-columns:420px 1fr;align-items:start}
  .unggah{position:sticky;top:84px}
}

/* ---------- Zona tarik & lepas ---------- */
form#formUnggah{display:grid;gap:1.1rem}
.zona{
  position:relative;display:grid;justify-items:center;gap:.3rem;text-align:center;padding:2rem 1rem;cursor:pointer;border-radius:var(--r-md);
  border:2px dashed #cfc7b0;background:linear-gradient(180deg,#fffdf8,var(--kertas));transition:all .3s var(--ease)
}
.zona:hover,.zona.tarik{border-color:var(--emas-500);background:var(--emas-100);transform:translateY(-2px)}
.zona input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.zona-ikon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;color:var(--hijau-700);background:var(--hijau-100);margin-bottom:.4rem;transition:transform .35s var(--ease)}
.zona:hover .zona-ikon,.zona.tarik .zona-ikon{transform:scale(1.12) rotate(-6deg)}
.zona-judul{font-weight:700;font-size:1.02rem}
.zona-sub{font-size:.85rem;color:var(--abu)}
.zona-sub u{color:var(--hijau-700);font-weight:600}
.berkas-pilih{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:var(--r-md);background:var(--hijau-50);border:1px solid var(--hijau-100);animation:turunMasuk .4s var(--ease)}
.berkas-pilih[hidden]{display:none}
.berkas-pilih .ikon-bulat{width:42px;height:42px}
.berkas-info{flex:1;min-width:0}
.berkas-info b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.berkas-info small{color:var(--abu);font-size:.8rem}
.tbl-ikon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:none;background:#fff;color:var(--abu);border:1px solid var(--garis);transition:all .2s}
.tbl-ikon:hover{background:#fde8e6;color:#c0392b;border-color:#f3b8b1}

/* ---------- Isian ---------- */
.medan{display:grid;gap:.5rem}
.medan>label{font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.5rem}
.medan>label i{color:var(--emas-600)}
.medan>label em{font-style:normal;font-weight:500;color:var(--abu);font-size:.82rem}
.medan input[type=text]{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-sm);border:2px solid var(--garis);font:inherit;font-size:.98rem;background:#fff;color:var(--tinta);transition:border-color .2s,box-shadow .2s
}
.medan input[type=text]:focus{outline:none;border-color:var(--hijau-600);box-shadow:0 0 0 4px rgba(23,133,101,.14)}
.pilih-cepat{display:flex;flex-wrap:wrap;gap:.45rem}
.pilih-cepat button{
  cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;color:var(--hijau-800);background:var(--hijau-50);border:1px solid var(--hijau-100);
  display:inline-flex;align-items:center;gap:.4rem;transition:all .2s
}
.pilih-cepat button:hover{background:var(--emas-100);border-color:var(--emas-300)}
.galat-form{padding:.8rem 1rem;border-radius:var(--r-sm);background:#fdecea;color:#8a2a1f;border:1px solid #f3b8b1;font-size:.9rem;font-weight:600;animation:turunMasuk .3s}
.galat-form[hidden]{display:none}
.tbl-besar{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:1rem 1.2rem;border:none;border-radius:14px;cursor:pointer;text-decoration:none;
  font:inherit;font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--hijau-700),var(--hijau-900));
  box-shadow:0 12px 24px -10px rgba(11,80,62,.7);transition:all .25s var(--ease)
}
.tbl-besar:hover{transform:translateY(-2px);box-shadow:0 18px 30px -10px rgba(11,80,62,.7)}
.tbl-besar:active{transform:scale(.98)}
.tbl-besar:disabled{opacity:.6;cursor:not-allowed;transform:none}
.tbl-besar.emas{background:linear-gradient(135deg,var(--emas-300),var(--emas-500));color:var(--hijau-950);box-shadow:0 12px 24px -10px rgba(210,161,46,.8)}
.tbl-besar.abu{background:#fff;color:var(--tinta);border:1px solid var(--garis);box-shadow:none}
.tbl-besar.merah{background:linear-gradient(135deg,#d6493a,#a52a1d);box-shadow:0 12px 24px -10px rgba(165,42,29,.7)}
.catatan-kecil{font-size:.8rem;color:var(--abu);display:flex;gap:.5rem;line-height:1.5}
.catatan-kecil i{color:var(--emas-600);margin-top:.15rem}

/* ---------- Karya saya ---------- */
.daftar-karya{display:grid;gap:.9rem}
.karya{display:flex;gap:1rem;padding:.9rem;border-radius:var(--r-md);border:1px solid var(--garis);background:linear-gradient(180deg,#fff,#fdfbf6);transition:all .3s var(--ease)}
.karya:hover{border-color:var(--emas-300);box-shadow:var(--b-1);transform:translateY(-2px)}
.karya-sampul{flex:none;width:72px;height:98px;border-radius:3px 8px 8px 3px;overflow:hidden;display:grid;place-items:center;color:var(--emas-300);font-size:1.5rem;
  background:linear-gradient(150deg,var(--hijau-700),var(--hijau-900));box-shadow:0 8px 16px -6px rgba(7,58,45,.45);position:relative}
.karya-sampul::before{content:'';position:absolute;inset:0 auto 0 0;width:12%;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent);z-index:2}
.karya-sampul img{width:100%;height:100%;object-fit:cover}
.karya-isi{flex:1;min-width:0}
.karya-isi h3{font-family:var(--font-judul);font-size:1.04rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.2rem}
.karya-meta{font-size:.82rem;color:var(--abu);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.karya-meta i{color:var(--emas-600);font-size:.78rem}
.karya-meta.redup{font-style:italic;color:#8b9893}
.karya-aksi{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.65rem}
.aksi{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none;color:var(--hijau-800);background:var(--hijau-50);border:1px solid var(--hijau-100);transition:all .2s}
.aksi:hover{background:var(--hijau-100)}
.aksi.baca{background:linear-gradient(135deg,var(--hijau-700),var(--hijau-800));color:#fff;border-color:transparent}
.aksi.baca:hover{filter:brightness(1.12)}
.aksi.hapus{color:#a52a1d;background:#fdecea;border-color:#f6cbc5}
.aksi.hapus:hover{background:#f9d4cf}
.kosong-dasbor{text-align:center;padding:2.6rem 1rem;color:var(--abu);border:2px dashed var(--garis);border-radius:var(--r-md)}
.kosong-dasbor .ikon{width:76px;height:76px;margin:0 auto .9rem;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;color:var(--emas-600);background:var(--emas-100)}
.kosong-dasbor strong{display:block;font-family:var(--font-judul);font-size:1.2rem;color:var(--tinta)}

/* ---------- Lapisan proses & dialog ---------- */
.proses{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem;
  background:radial-gradient(800px 500px at 50% 40%,rgba(15,104,80,.92),rgba(4,38,30,.96));backdrop-filter:blur(6px);
  animation:muncul .35s var(--ease) both
}
.proses[hidden]{display:none}
.proses.dialog{background:rgba(4,38,30,.7)}
@keyframes muncul{from{opacity:0}to{opacity:1}}
@keyframes naikKartu{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.proses-kartu{width:min(460px,100%);background:#fff;border-radius:26px;padding:2rem 1.6rem 1.6rem;text-align:center;box-shadow:var(--b-3);animation:naikKartu .5s var(--ease) both;max-height:96vh;overflow:auto}
.proses-kartu.kecil{width:min(400px,100%)}
.proses-visual{padding:1.4rem 0 1.1rem;background:linear-gradient(160deg,var(--hijau-800),var(--hijau-950));margin:-2rem -1.6rem 1.4rem;border-radius:26px 26px 0 0}
.proses-visual .buku-muat{--lebar:120px;--tinggi:84px}
.proses-kartu h3{font-family:var(--font-judul);font-size:1.35rem;margin-bottom:.2rem}
.proses-kartu p{color:var(--abu);font-size:.92rem}
.proses-berkas{font-weight:600;color:var(--hijau-800)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1.1rem}
.bar-kemajuan{height:12px;border-radius:12px;background:var(--hijau-100);overflow:hidden;position:relative}
.bar-kemajuan span{display:block;height:100%;width:0;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--hijau-600),var(--emas-500));transition:width .5s var(--ease)}
.bar-kemajuan span::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:kilau 1.4s linear infinite}
@keyframes kilau{to{transform:translateX(100%)}}
.kemajuan-info{display:flex;justify-content:space-between;gap:1rem;margin:.55rem 0 1.2rem;font-size:.85rem;color:var(--abu)}
.kemajuan-info b{color:var(--hijau-800);font-variant-numeric:tabular-nums}
.tahap{list-style:none;display:grid;gap:.5rem;text-align:left;margin-bottom:1rem}
.tahap li{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border-radius:12px;font-size:.9rem;font-weight:600;color:#9aa6a1;background:var(--kertas);border:1px solid transparent;transition:all .35s var(--ease)}
.tahap li i{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.85rem;background:#e7e2d4;color:#9aa6a1;transition:all .35s var(--ease)}
.tahap li.aktif{color:var(--hijau-900);background:var(--emas-100);border-color:var(--emas-300)}
.tahap li.aktif i{background:linear-gradient(135deg,var(--emas-300),var(--emas-500));color:var(--hijau-950);animation:denyut 1.2s ease-in-out infinite}
.tahap li.beres{color:var(--hijau-800)}
.tahap li.beres i{background:var(--hijau-600);color:#fff}
.tahap li.beres i::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900}
.tahap li.beres i>*{display:none}
@keyframes denyut{0%,100%{box-shadow:0 0 0 0 rgba(210,161,46,.55)}50%{box-shadow:0 0 0 9px rgba(210,161,46,0)}}
.jangan-tutup{font-size:.8rem!important;color:#8a6d12!important;display:flex;justify-content:center;gap:.5rem;align-items:center}
.proses-tombol{display:flex;gap:.7rem;margin-top:1.2rem}
.proses-tombol[hidden]{display:none}
.proses-tombol>*{flex:1}

/* Hasil: sukses / gagal */
.proses-hasil{margin:-.2rem 0 .8rem}
.proses-hasil[hidden]{display:none}
.ikon-besar{width:92px;height:92px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font-size:2.4rem}
.ikon-besar.sukses{color:#fff;background:linear-gradient(135deg,var(--hijau-600),var(--hijau-800));box-shadow:0 0 0 10px var(--hijau-100);animation:letup .7s var(--ease) both}
.ikon-besar.galat{color:#fff;background:linear-gradient(135deg,#d6493a,#a52a1d);box-shadow:0 0 0 10px #fbdad6;animation:letup .6s var(--ease) both}
@keyframes letup{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.proses.selesai-ok .proses-visual,.proses.selesai-ok .bar-kemajuan,.proses.selesai-ok .kemajuan-info,.proses.selesai-ok .tahap,.proses.selesai-ok .jangan-tutup,
.proses.selesai-err .proses-visual,.proses.selesai-err .bar-kemajuan,.proses.selesai-err .kemajuan-info,.proses.selesai-err .tahap,.proses.selesai-err .jangan-tutup{display:none}
.proses.selesai-ok .proses-kartu,.proses.selesai-err .proses-kartu{padding-top:2.2rem}
.confetti{position:fixed;top:-12px;width:9px;height:14px;border-radius:2px;z-index:300;pointer-events:none;animation:jatuh linear forwards}
@keyframes jatuh{to{transform:translate3d(var(--x),105vh,0) rotate(var(--r));opacity:.9}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:250;transform:translate(-50%,30px);opacity:0;max-width:90vw;display:flex;gap:.7rem;align-items:center;padding:.85rem 1.2rem;border-radius:14px;font-weight:600;font-size:.92rem;color:#fff;background:var(--hijau-900);box-shadow:0 18px 40px rgba(4,38,30,.5);transition:all .5s var(--ease)}
.toast[hidden]{display:none}
.toast.tampil{opacity:1;transform:translate(-50%,0)}
.toast.galat{background:#a52a1d}
.toast i{color:var(--emas-300)}

/* ---------- Halaman akses ditolak ---------- */
body.polos{display:grid;place-items:center;padding:1.5rem}
.kartu-tengah{max-width:420px;text-align:center;background:#fff;border:1px solid var(--garis);border-radius:var(--r-lg);padding:2.4rem 1.8rem;box-shadow:var(--b-2);display:grid;gap:.9rem;justify-items:center}
.kartu-tengah h1{font-family:var(--font-judul)}
.kartu-tengah p{color:var(--abu)}

/* ---------- Halaman masuk ---------- */
body.halaman-masuk{
  min-height:100vh;display:grid;place-items:center;padding:1.5rem;position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(700px 380px at 12% 0%,rgba(23,133,101,.6),transparent 65%),
    radial-gradient(600px 320px at 95% 100%,rgba(210,161,46,.3),transparent 60%),
    linear-gradient(160deg,var(--hijau-900),var(--hijau-800) 55%,#0a4a38)
}
body.halaman-masuk::before{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 30px);opacity:.7}
.masuk-wadah{position:relative;width:min(420px,100%);display:grid;gap:1.3rem;justify-items:center;animation:naikKartu .8s var(--ease) both}
.masuk-merek{text-align:center}
.masuk-merek img{width:84px;height:84px;margin:0 auto .8rem;border-radius:22px;background:#fff;padding:6px;box-shadow:0 18px 36px -10px rgba(0,0,0,.5)}
.masuk-merek h1{font-family:var(--font-judul);font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.1}
.masuk-merek h1 em{color:var(--emas-300)}
.masuk-merek p{color:rgba(255,255,255,.8);margin-top:.3rem;font-size:.95rem}
.masuk-kartu{width:100%;background:#fff;color:var(--tinta);border-radius:24px;padding:1.8rem 1.5rem;box-shadow:var(--b-3)}
.masuk-kartu h2{font-family:var(--font-judul);font-size:1.4rem}
.masuk-sub{color:var(--abu);font-size:.9rem;margin:.1rem 0 1.2rem}
.masuk-kartu form{display:grid;gap:.9rem}
.medan-masuk{position:relative}
.medan-masuk>i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--hijau-700);pointer-events:none}
.medan-masuk input{width:100%;padding:.95rem 3rem .95rem 2.8rem;border-radius:14px;border:2px solid var(--garis);font:inherit;font-size:1rem;background:var(--kertas);transition:all .2s}
.medan-masuk input:focus{outline:none;background:#fff;border-color:var(--hijau-600);box-shadow:0 0 0 4px rgba(23,133,101,.15)}
.lihat-sandi{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:38px;height:38px;border:none;border-radius:10px;background:none;color:var(--abu);cursor:pointer}
.lihat-sandi:hover{background:var(--hijau-50);color:var(--hijau-700)}
.galat-masuk{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;margin-bottom:1rem;border-radius:12px;background:#fdecea;color:#8a2a1f;border:1px solid #f3b8b1;font-weight:600;font-size:.9rem;animation:getar .45s}
@keyframes getar{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.tbl-besar.memuat{pointer-events:none;opacity:.8}
.tbl-besar.memuat i{animation:putar 1s linear infinite}
.tbl-besar.memuat i::before{content:'\f110'}
@keyframes putar{to{transform:rotate(360deg)}}
.tautan-kembali{color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;font-size:.92rem;display:inline-flex;gap:.5rem;align-items:center;transition:color .2s}
.tautan-kembali:hover{color:var(--emas-300)}
.halaman-masuk .hero-hias{position:fixed}

@media (max-width:640px){
  .tbl-kecil span{display:none}.tbl-kecil{padding:0;width:40px;justify-content:center}
  .karya-sampul{width:60px;height:84px}
  .proses-tombol{flex-direction:column}
}

/* atribut hidden harus selalu menang */
.zona[hidden],.jangan-tutup[hidden],.proses-visual[hidden]{display:none}