/* Gaya bersama layar aplikasi pasangan: editor, terbit, dasbor, penerima tamu */
:root{
  --sirih:#24392F; --sirih-2:#36523F; --sirih-muda:#E4EBE3;
  --melati:#F7F8F4; --putih:#FFFFFF; --kunyit:#B98A3E; --kunyit-muda:#F5ECDD;
  --mawar:#EBD3CC; --tinta:#1C2420; --abu:#5E6B63; --abu-2:#8A958E; --garis:#DCE2D8;
  --merah:#B4483B; --biru:#3D6A9E;
  --serif:"Young Serif",Georgia,serif; --sans:"Figtree",system-ui,sans-serif;
  --r-kecil:10px; --r:14px; --r-besar:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--melati);color:var(--tinta);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
svg{display:block;flex:none}
:focus-visible{outline:3px solid var(--kunyit);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--sirih);line-height:1.2}

/* bilah atas */
.bilah{position:sticky;top:0;z-index:30;height:60px;display:flex;align-items:center;gap:16px;padding:0 20px;background:rgba(247,248,244,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:18px;color:var(--sirih);text-decoration:none;white-space:nowrap}
.logo svg{width:22px;height:22px}
.bilah .kanan{margin-left:auto;display:flex;align-items:center;gap:10px}
.status-simpan{font-size:13px;color:var(--abu);display:flex;align-items:center;gap:6px;white-space:nowrap}
.status-simpan i{width:7px;height:7px;border-radius:50%;background:#4E9A6B}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 18px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;border:1.5px solid var(--sirih);background:transparent;color:var(--sirih);white-space:nowrap;transition:background .15s,transform .1s}
.btn:hover{background:#fff}
.btn:active{transform:scale(.97)}
.btn-isi{background:var(--sirih);color:var(--melati)}
.btn-isi:hover{background:var(--sirih-2)}
.btn-emas{background:var(--kunyit);border-color:var(--kunyit);color:#1C1C1C}
.btn-emas:hover{background:#c6974a}
.btn-hantu{border-color:transparent}
.btn-kecil{padding:7px 12px;font-size:13px}
.btn-lebar{width:100%}
.btn svg{width:17px;height:17px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* isian */
.isian{display:grid;gap:6px}
.isian label,.label{font-size:13px;font-weight:600;color:var(--abu)}
.isian .bantu{font-size:12px;color:var(--abu-2)}
.masukan{width:100%;border:1.5px solid var(--garis);border-radius:var(--r);padding:11px 13px;background:#fff;font-size:15px;transition:border-color .15s}
.masukan:focus{outline:none;border-color:var(--sirih)}
textarea.masukan{min-height:92px;resize:vertical;line-height:1.5}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiga{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--r-besar);padding:20px}
.lencana{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--sirih-muda);color:var(--sirih);white-space:nowrap}
.lencana.emas{background:var(--kunyit-muda);color:#7A5A22}
.lencana.merah{background:#F6E1DD;color:var(--merah)}
.lencana.biru{background:#E2EAF4;color:var(--biru)}
.lencana.abu{background:#EDEFEC;color:var(--abu)}

/* saklar */
.saklar{position:relative;width:42px;height:24px;flex:none}
.saklar input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;margin:0;z-index:1}
.saklar span{position:absolute;inset:0;border-radius:999px;background:#CBD3CB;transition:.15s}
.saklar span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.saklar input:checked+span{background:var(--sirih)}
.saklar input:checked+span::after{transform:translateX(18px)}
.saklar input:focus-visible+span{outline:3px solid var(--kunyit);outline-offset:2px}

/* lembar bawah (HP) & dialog */
.tirai{position:fixed;inset:0;background:rgba(20,26,23,.45);z-index:80;display:none}
.tirai.buka{display:block}
.lembar{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--melati);border-radius:24px 24px 0 0;max-height:92dvh;overflow:auto;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding:10px 20px calc(24px + env(safe-area-inset-bottom))}
.lembar.buka{transform:none}
.lembar .pegangan{width:40px;height:4px;border-radius:2px;background:#C9D0C8;margin:4px auto 14px}
@media (min-width:760px){
  .lembar{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92vw);border-radius:24px;transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:.2s}
  .lembar.buka{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .lembar .pegangan{display:none}
}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--tinta);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:99;pointer-events:none;white-space:nowrap}
.toast.tampil{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:520px){.logo-teks{display:none}}