/* =================================================================
   Catatan — genjohtzy.xyz
   Tema terang sebagai dasar, tema gelap lewat prefers-color-scheme
   dan atribut [data-theme] agar tombol manual bisa menimpanya.
   ================================================================= */

/* ---------- Token warna: tema terang ---------- */
:root {
    --latar:            #f4f5f7;
    --permukaan:        #ffffff;
    --permukaan-2:      #f9fafb;
    --garis:            #e3e6ea;
    --garis-kuat:       #cdd3da;
    --teks:             #1a1d21;
    --teks-lembut:      #5f6672;
    --teks-samar:       #8b93a1;
    --aksen:            #3b6cf6;
    --aksen-teks:       #ffffff;
    --aksen-lembut:     #eaf0fe;
    --bahaya:           #d6403a;
    --sukses:           #17794a;
    --bayang-1:         0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .07);
    --bayang-2:         0 4px 12px rgba(16, 24, 40, .10);
    --bayang-3:         0 16px 48px rgba(16, 24, 40, .22);
    --radius:           12px;
    --radius-kecil:     8px;

    /* Warna kartu catatan */
    --k-default:        #ffffff;
    --k-kuning:         #fff6d6;
    --k-hijau:          #e2f6e6;
    --k-biru:           #e4eefe;
    --k-ungu:           #f0e8fd;
    --k-merah:          #fde8e7;
    --k-tepi:           rgba(16, 24, 40, .09);
}

/* ---------- Tema gelap: mengikuti sistem ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="terang"]) {
        --latar:        #14161a;
        --permukaan:    #1c1f25;
        --permukaan-2:  #23272e;
        --garis:        #2e333c;
        --garis-kuat:   #414853;
        --teks:         #e8eaed;
        --teks-lembut:  #a8b0bd;
        --teks-samar:   #79818f;
        --aksen:        #6b93ff;
        --aksen-teks:   #10131a;
        --aksen-lembut: #1e2a44;
        --bahaya:       #ff7b73;
        --sukses:       #5ad196;
        --bayang-1:     0 1px 2px rgba(0, 0, 0, .4);
        --bayang-2:     0 4px 14px rgba(0, 0, 0, .45);
        --bayang-3:     0 16px 48px rgba(0, 0, 0, .6);

        --k-default:    #1c1f25;
        --k-kuning:     #3a3320;
        --k-hijau:      #1e3527;
        --k-biru:       #1d2b3f;
        --k-ungu:       #2d2440;
        --k-merah:      #3a2426;
        --k-tepi:       rgba(255, 255, 255, .09);
    }
}

/* ---------- Tema gelap: dipilih manual ---------- */
:root[data-theme="gelap"] {
    --latar:        #14161a;
    --permukaan:    #1c1f25;
    --permukaan-2:  #23272e;
    --garis:        #2e333c;
    --garis-kuat:   #414853;
    --teks:         #e8eaed;
    --teks-lembut:  #a8b0bd;
    --teks-samar:   #79818f;
    --aksen:        #6b93ff;
    --aksen-teks:   #10131a;
    --aksen-lembut: #1e2a44;
    --bahaya:       #ff7b73;
    --sukses:       #5ad196;
    --bayang-1:     0 1px 2px rgba(0, 0, 0, .4);
    --bayang-2:     0 4px 14px rgba(0, 0, 0, .45);
    --bayang-3:     0 16px 48px rgba(0, 0, 0, .6);

    --k-default:    #1c1f25;
    --k-kuning:     #3a3320;
    --k-hijau:      #1e3527;
    --k-biru:       #1d2b3f;
    --k-ungu:       #2d2440;
    --k-merah:      #3a2426;
    --k-tepi:       rgba(255, 255, 255, .09);
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--latar);
    color: var(--teks);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--aksen); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }

button { font: inherit; cursor: pointer; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
    outline: 2px solid var(--aksen);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lewati-tautan {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--aksen); color: var(--aksen-teks);
    padding: .6rem 1rem; border-radius: 0 0 var(--radius-kecil) 0;
}
.lewati-tautan:focus { left: 0; }

/* ---------- Bilah atas ---------- */
.bilah-atas {
    position: sticky; top: 0; z-index: 40;
    background: var(--permukaan);
    border-bottom: 1px solid var(--garis);
}

.bilah-atas__isi {
    max-width: 1240px; margin: 0 auto;
    padding: .65rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.merek {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 650; font-size: 1.05rem; color: var(--teks);
}
.merek:hover { text-decoration: none; }
.merek__ikon { width: 24px; height: 24px; color: var(--aksen); }
.merek__lipat, .merek__garis { stroke-width: 1.6; }

.bilah-atas__nav { display: flex; align-items: center; gap: .5rem; }

/* ---------- Tombol ---------- */
.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: var(--radius-kecil);
    font-weight: 550; font-size: .92rem;
    transition: background-color .15s, border-color .15s, transform .06s;
}
.tombol:hover { text-decoration: none; }
.tombol:active { transform: translateY(1px); }

.tombol--utama { background: var(--aksen); color: var(--aksen-teks); }
.tombol--utama:hover { filter: brightness(1.08); }

.tombol--halus {
    background: var(--permukaan-2); color: var(--teks); border-color: var(--garis);
}
.tombol--halus:hover { background: var(--latar); border-color: var(--garis-kuat); }

.tombol--lebar { width: 100%; }
.tombol--besar { padding: .7rem 1.4rem; font-size: 1rem; }

.tombol-ikon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    background: transparent; color: var(--teks-lembut);
    border: 1px solid transparent; border-radius: var(--radius-kecil);
}
.tombol-ikon:hover { background: var(--permukaan-2); color: var(--teks); }

/* Ikon tema: tampilkan sesuai tema aktif */
.ikon-gelap { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="terang"]) .ikon-terang { display: none; }
    :root:not([data-theme="terang"]) .ikon-gelap  { display: block; }
}
:root[data-theme="gelap"] .ikon-terang { display: none; }
:root[data-theme="gelap"] .ikon-gelap  { display: block; }
:root[data-theme="terang"] .ikon-terang { display: block; }
:root[data-theme="terang"] .ikon-gelap  { display: none; }

/* ---------- Menu akun ---------- */
.menu-akun { position: relative; }

.menu-akun__pemicu {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .55rem .3rem .3rem;
    background: transparent; border: 1px solid var(--garis);
    border-radius: 999px; color: var(--teks);
}
.menu-akun__pemicu:hover { background: var(--permukaan-2); }

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--aksen); color: var(--aksen-teks);
    font-size: .82rem; font-weight: 650;
}

.menu-akun__nama { font-size: .9rem; max-width: 10ch; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.menu-akun__panah { width: 16px; height: 16px; color: var(--teks-samar); }

.menu-akun__isi {
    position: absolute; right: 0; top: calc(100% + .45rem);
    min-width: 232px; padding: .35rem;
    background: var(--permukaan);
    border: 1px solid var(--garis); border-radius: var(--radius);
    box-shadow: var(--bayang-2);
}
.menu-akun__isi[hidden] { display: none; }

.menu-akun__header {
    display: flex; flex-direction: column;
    padding: .55rem .7rem; margin-bottom: .3rem;
    border-bottom: 1px solid var(--garis);
}
.menu-akun__header span { font-size: .82rem; color: var(--teks-samar);
                          overflow: hidden; text-overflow: ellipsis; }

.menu-akun__isi a,
.menu-akun__keluar {
    display: block; width: 100%; text-align: left;
    padding: .5rem .7rem; border: 0; border-radius: var(--radius-kecil);
    background: transparent; color: var(--teks); font-size: .9rem;
}
.menu-akun__isi a:hover,
.menu-akun__keluar:hover { background: var(--permukaan-2); text-decoration: none; }
.menu-akun__keluar { color: var(--bahaya); }

/* ---------- Notifikasi ---------- */
.tumpukan-notifikasi {
    position: fixed; top: 4.4rem; right: 1.25rem; z-index: 60;
    display: flex; flex-direction: column; gap: .5rem;
    max-width: min(380px, calc(100vw - 2.5rem));
}

.notifikasi {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .7rem .85rem;
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-left: 3px solid var(--teks-samar);
    border-radius: var(--radius-kecil);
    box-shadow: var(--bayang-2);
    font-size: .9rem;
    animation: geser-masuk .22s ease-out;
}
.notifikasi--success { border-left-color: var(--sukses); }
.notifikasi--error   { border-left-color: var(--bahaya); }
.notifikasi--info    { border-left-color: var(--aksen); }

.notifikasi__tutup {
    margin-left: auto; background: none; border: 0;
    color: var(--teks-samar); font-size: 1.2rem; line-height: 1; padding: 0 .2rem;
}

@keyframes geser-masuk {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Halaman depan ---------- */
main { flex: 1; }

.halaman-depan main { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }
.halaman-auth main { width: 100%; }
.halaman-auth { min-height: 100vh; }
.halaman-auth .kaki { display: none; }

.sorot {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem;
    align-items: center; padding: 4rem 0 3rem;
}

.sorot__judul { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -.02em; }
.sorot__deskripsi { font-size: 1.08rem; color: var(--teks-lembut); max-width: 46ch; margin: 0 0 1.8rem; }
.sorot__aksi { display: flex; flex-wrap: wrap; gap: .7rem; }

.sorot__pratinjau { display: grid; gap: .9rem; }

.pratinjau-kartu {
    padding: 1rem 1.1rem;
    border: 1px solid var(--k-tepi); border-radius: var(--radius);
    box-shadow: var(--bayang-1);
    background: var(--k-default);
}
.pratinjau-kartu p { margin: .35rem 0 0; color: var(--teks-lembut); font-size: .92rem; }
.pratinjau-kartu--kuning { background: var(--k-kuning); transform: rotate(-1deg); }
.pratinjau-kartu--biru   { background: var(--k-biru);   transform: rotate(.6deg); }
.pratinjau-kartu--hijau  { background: var(--k-hijau);  transform: rotate(-.4deg); }

.fitur {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem; padding: 1rem 0 4rem;
}
.fitur__item {
    padding: 1.4rem;
    background: var(--permukaan);
    border: 1px solid var(--garis); border-radius: var(--radius);
}
.fitur__ikon { font-size: 1.5rem; margin-bottom: .5rem; }
.fitur__item h2 { font-size: 1.05rem; }
.fitur__item p { margin: 0; color: var(--teks-lembut); font-size: .92rem; }

/* ---------- Autentikasi (login & daftar) ---------- */
.auth {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* Panel merek — sisi kiri dengan gradien */
.auth__merek {
    position: relative;
    display: flex; align-items: center;
    padding: 3rem;
    color: #f5f8ff;
    background:
        radial-gradient(1100px 480px at 12% 8%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(760px 520px at 92% 100%, rgba(0,0,0,.28), transparent 55%),
        linear-gradient(150deg, #2f4bd6 0%, #3b6cf6 42%, #5a7bff 78%, #7c5cff 100%);
    overflow: hidden;
}
.auth__merek::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(70% 60% at 30% 30%, #000, transparent 75%);
    pointer-events: none;
}
.auth__merek-isi { position: relative; z-index: 1; max-width: 30rem; }

.auth__logo {
    display: inline-flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.25rem; color: #fff; text-decoration: none;
    margin-bottom: 2.4rem;
}
.auth__logo svg {
    width: 30px; height: 30px; fill: none;
    stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.auth__logo .auth__logo-lipat { fill: rgba(255,255,255,.18); }

.auth__merek-judul {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1rem;
}
.auth__merek-teks {
    font-size: 1.02rem; line-height: 1.6;
    color: rgba(255,255,255,.85); margin: 0 0 2.2rem;
}

.auth__poin { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin: 0 0 2.4rem; }
.auth__poin li { display: flex; align-items: flex-start; gap: .8rem; font-size: .96rem; color: rgba(255,255,255,.92); }
.auth__poin-ikon {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem; border-radius: 9px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(2px);
    font-size: 1rem;
}

.auth__merek-kaki { font-size: .82rem; color: rgba(255,255,255,.6); margin: 0; }

/* Sisi formulir — kanan */
.auth__panel {
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--latar);
}
.auth__kotak { width: 100%; max-width: 400px; }
.auth__kepala { margin-bottom: 1.6rem; }
.auth__judul { font-size: 1.7rem; letter-spacing: -.01em; margin: 0 0 .35rem; }
.auth__sub { margin: 0; color: var(--teks-lembut); font-size: .95rem; }

.auth__kaki {
    margin: 1.5rem 0 0; text-align: center;
    font-size: .9rem; color: var(--teks-lembut);
}
.auth__kaki--info {
    padding: .7rem .9rem; border-radius: var(--radius-kecil);
    background: var(--permukaan-2); border: 1px solid var(--garis);
    text-align: center;
}

/* Tombol tema mengambang untuk halaman auth */
.tombol-tema-apung {
    position: fixed; top: 1rem; right: 1rem; z-index: 20;
    background: var(--permukaan);
    border: 1px solid var(--garis);
    box-shadow: var(--bayang-1);
}
.tombol-tema-apung:hover { background: var(--permukaan-2); }

@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth__merek { padding: 2.4rem 1.5rem 2rem; align-items: flex-start; }
    .auth__merek-isi { max-width: none; }
    .auth__logo { margin-bottom: 1.4rem; }
    .auth__merek-judul { font-size: 1.5rem; }
    .auth__merek-teks { margin-bottom: 0; font-size: .96rem; }
    .auth__poin, .auth__merek-kaki { display: none; }
    .auth__panel { padding: 2rem 1.25rem 3rem; align-items: flex-start; }
    .auth__kotak { margin-top: .5rem; }
}

.form { display: flex; flex-direction: column; gap: 1rem; }

.bidang { display: flex; flex-direction: column; gap: .35rem; }
.bidang__label { font-size: .88rem; font-weight: 550; }

.bidang__input {
    width: 100%; padding: .6rem .75rem;
    background: var(--permukaan-2);
    color: var(--teks);
    border: 1px solid var(--garis); border-radius: var(--radius-kecil);
    font: inherit; font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}
.bidang__input:focus {
    outline: none; border-color: var(--aksen);
    box-shadow: 0 0 0 3px var(--aksen-lembut);
}

.bidang__bungkus-sandi { position: relative; display: block; }
.bidang__bungkus-sandi .bidang__input { padding-right: 4rem; }
.bidang__lihat {
    position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
    padding: .3rem .5rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--teks-lembut); font-size: .82rem;
}
.bidang__lihat:hover { background: var(--latar); color: var(--teks); }

.bidang__bantuan { font-size: .8rem; color: var(--teks-samar); }

.kotak-galat {
    margin-bottom: 1.1rem; padding: .75rem .9rem;
    background: color-mix(in srgb, var(--bahaya) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bahaya) 35%, transparent);
    border-radius: var(--radius-kecil);
    color: var(--bahaya); font-size: .89rem;
}
.kotak-galat p { margin: 0; }
.kotak-galat p + p { margin-top: .3rem; }

/* ---------- Tata letak aplikasi ---------- */
.tata-app {
    display: grid; grid-template-columns: 248px 1fr;
    gap: 1.5rem;
    max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem;
    width: 100%;
}

.sisi { display: flex; flex-direction: column; gap: 1.4rem; align-self: start;
        position: sticky; top: 4.6rem; }

.sisi__grup { display: flex; flex-direction: column; gap: .15rem; }

.sisi__judul {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--teks-samar); font-weight: 650; margin: 0 0 .35rem .6rem;
}

.sisi__tautan {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-kecil);
    color: var(--teks); font-size: .92rem;
}
.sisi__tautan:hover { background: var(--permukaan); text-decoration: none; }
.sisi__tautan.aktif { background: var(--aksen-lembut); color: var(--aksen); font-weight: 550; }

.sisi__tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sisi__kosong { margin: 0 .6rem; font-size: .85rem; color: var(--teks-samar); }

.lencana {
    flex-shrink: 0; min-width: 22px; padding: .05rem .4rem;
    background: var(--permukaan-2); border-radius: 999px;
    font-size: .76rem; color: var(--teks-lembut); text-align: center;
}
.sisi__tautan.aktif .lencana { background: var(--permukaan); color: var(--aksen); }

.sisi__pemicu { display: none; }

/* ---------- Bilah alat & pencarian ---------- */
.isi-app { min-width: 0; }

.bilah-alat { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }

.pencarian { position: relative; flex: 1; max-width: 460px; }
.pencarian__ikon {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--teks-samar); pointer-events: none;
}
.pencarian__input {
    width: 100%; padding: .55rem .75rem .55rem 2.25rem;
    background: var(--permukaan);
    color: var(--teks);
    border: 1px solid var(--garis); border-radius: 999px;
    font: inherit; font-size: .92rem;
}
.pencarian__input:focus {
    outline: none; border-color: var(--aksen);
    box-shadow: 0 0 0 3px var(--aksen-lembut);
}
.pencarian__input::-webkit-search-cancel-button { display: none; }
.pencarian__hapus {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    color: var(--teks-samar); font-size: 1.25rem; line-height: 1;
}
.pencarian__hapus:hover { color: var(--teks); text-decoration: none; }

.info-hasil { margin: -.5rem 0 1rem; font-size: .88rem; color: var(--teks-lembut); }

/* ---------- Kisi kartu catatan ---------- */
.kisi-catatan {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 1rem;
    align-items: start;
}

.kartu {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1rem 1.05rem .7rem;
    background: var(--k-default);
    border: 1px solid var(--k-tepi);
    border-radius: var(--radius);
    box-shadow: var(--bayang-1);
    cursor: pointer;
    transition: box-shadow .16s, transform .16s;
    overflow-wrap: anywhere;
}
.kartu:hover { box-shadow: var(--bayang-2); transform: translateY(-2px); }

.kartu.warna-kuning { background: var(--k-kuning); }
.kartu.warna-hijau  { background: var(--k-hijau); }
.kartu.warna-biru   { background: var(--k-biru); }
.kartu.warna-ungu   { background: var(--k-ungu); }
.kartu.warna-merah  { background: var(--k-merah); }

.kartu--disematkan { border-color: color-mix(in srgb, var(--aksen) 45%, transparent); }

.kartu__judul { font-size: 1rem; margin: 0 1.6rem .35rem 0; }
.kartu__tanpa-judul { color: var(--teks-samar); font-weight: 400; font-style: italic; }

.kartu__cuplikan {
    margin: 0 0 .7rem; color: var(--teks-lembut); font-size: .89rem;
    white-space: pre-wrap;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    line-clamp: 6; overflow: hidden;
}

.kartu__tag { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }

.pil {
    padding: .1rem .5rem;
    background: color-mix(in srgb, var(--teks) 8%, transparent);
    border-radius: 999px;
    font-size: .76rem; color: var(--teks-lembut);
}

.kartu__kaki {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: auto; padding-top: .5rem;
    border-top: 1px solid var(--k-tepi);
    font-size: .78rem; color: var(--teks-samar);
}

.kartu__aksi { display: flex; gap: .3rem; opacity: 0; transition: opacity .15s; }
.kartu:hover .kartu__aksi,
.kartu:focus-within .kartu__aksi { opacity: 1; }

.kartu__aksi button {
    padding: .18rem .45rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--teks-lembut); font-size: .78rem;
}
.kartu__aksi button:hover { background: color-mix(in srgb, var(--teks) 10%, transparent); color: var(--teks); }
.kartu__aksi button.bahaya:hover { background: color-mix(in srgb, var(--bahaya) 15%, transparent); color: var(--bahaya); }

.kartu__sematkan {
    position: absolute; top: .6rem; right: .6rem;
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 6px;
    color: var(--teks-samar); opacity: 0; transition: opacity .15s, color .15s;
}
.kartu__sematkan svg { width: 15px; height: 15px; }
.kartu:hover .kartu__sematkan, .kartu__sematkan:focus-visible { opacity: 1; }
.kartu__sematkan:hover { background: color-mix(in srgb, var(--teks) 10%, transparent); }
.kartu--disematkan .kartu__sematkan { opacity: 1; color: var(--aksen); fill: currentColor; }

/* ---------- Keadaan kosong ---------- */
.kosong { text-align: center; padding: 4rem 1rem; color: var(--teks-lembut); }
.kosong__ikon { font-size: 2.6rem; margin-bottom: .6rem; }
.kosong h2 { font-size: 1.15rem; color: var(--teks); }
.kosong p { margin: 0; font-size: .93rem; }

/* ---------- Editor ---------- */
.lapisan {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 12, 16, .5);
    backdrop-filter: blur(2px);
    animation: pudar-masuk .15s ease-out;
}
.lapisan[hidden] { display: none; }

@keyframes pudar-masuk { from { opacity: 0; } to { opacity: 1; } }

.editor {
    display: flex; flex-direction: column;
    width: min(760px, 100%); max-height: min(88vh, 780px);
    background: var(--permukaan);
    border: 1px solid var(--garis); border-radius: var(--radius);
    box-shadow: var(--bayang-3);
    overflow: hidden;
}

.editor__atas {
    display: flex; align-items: center; gap: .5rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--garis);
}

.editor__judul {
    flex: 1; padding: .25rem 0; border: 0; background: transparent;
    color: var(--teks); font: inherit; font-size: 1.12rem; font-weight: 600;
}
.editor__judul:focus { outline: none; }
.editor__judul::placeholder { color: var(--teks-samar); font-weight: 400; }

.editor__isi {
    flex: 1; min-height: 300px;
    padding: 1rem;
    border: 0; background: transparent; resize: none;
    color: var(--teks); font: inherit; font-size: .96rem; line-height: 1.7;
}
.editor__isi:focus { outline: none; }

.editor__bawah {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-top: 1px solid var(--garis);
    background: var(--permukaan-2);
}

.editor__tag {
    flex: 1 1 180px; min-width: 0;
    padding: .4rem .65rem;
    background: var(--permukaan); color: var(--teks);
    border: 1px solid var(--garis); border-radius: var(--radius-kecil);
    font: inherit; font-size: .86rem;
}
.editor__tag:focus { outline: none; border-color: var(--aksen); }

.pilih-warna { display: flex; gap: .3rem; }

.titik-warna {
    width: 22px; height: 22px; padding: 0;
    border: 1px solid var(--garis-kuat); border-radius: 50%;
    transition: transform .12s;
}
.titik-warna:hover { transform: scale(1.15); }
.titik-warna.terpilih { box-shadow: 0 0 0 2px var(--permukaan), 0 0 0 4px var(--aksen); }
.titik-warna.warna-default { background: var(--k-default); }
.titik-warna.warna-kuning  { background: var(--k-kuning); }
.titik-warna.warna-hijau   { background: var(--k-hijau); }
.titik-warna.warna-biru    { background: var(--k-biru); }
.titik-warna.warna-ungu    { background: var(--k-ungu); }
.titik-warna.warna-merah   { background: var(--k-merah); }

.editor__aksi { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.editor__status { font-size: .82rem; color: var(--teks-samar); min-width: 6ch; }

/* ---------- Kaki halaman ---------- */
.kaki { border-top: 1px solid var(--garis); margin-top: auto; }
.kaki__isi {
    max-width: 1240px; margin: 0 auto; padding: 1.1rem 1.25rem;
    font-size: .84rem; color: var(--teks-samar);
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.kaki__pisah { opacity: .5; }

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
    .sorot { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0 2rem; }
    .sorot__pratinjau { max-width: 420px; }
}

@media (max-width: 760px) {
    .tata-app { grid-template-columns: 1fr; padding: 1rem; }

    .sisi {
        position: fixed; inset: 0 auto 0 0; z-index: 50;
        width: 270px; padding: 1.1rem;
        background: var(--permukaan);
        border-right: 1px solid var(--garis);
        box-shadow: var(--bayang-3);
        transform: translateX(-100%);
        transition: transform .22s ease;
        overflow-y: auto;
    }
    .sisi.terbuka { transform: none; }
    .sisi__pemicu { display: inline-flex; }

    .kisi-catatan { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }

    .menu-akun__nama { display: none; }

    .tumpukan-notifikasi { top: auto; bottom: 1rem; right: 1rem; left: 1rem; max-width: none; }

    .editor { max-height: 100%; height: 100%; border-radius: 0; }
    .lapisan { padding: 0; }
    .editor__aksi { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* Latar gelap saat sidebar mobile terbuka */
.tirai-sisi {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(10, 12, 16, .45);
}
.tirai-sisi[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =================================================================
   Panel Admin
   ================================================================= */
.menu-akun__admin { font-weight: 600; }

.admin { max-width: 1080px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; width: 100%; }

.admin__kepala {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
}
.admin__judul { font-size: 1.55rem; letter-spacing: -.01em; margin: 0; }
.admin__judul-sub { margin: .25rem 0 0; color: var(--teks-lembut); font-size: .92rem; }

.admin__balik {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--teks-lembut); font-size: .9rem; text-decoration: none; margin-bottom: 1rem;
}
.admin__balik:hover { color: var(--aksen); }

/* Kartu statistik */
.stat-kisi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; margin-bottom: 2rem;
}
.stat {
    padding: 1.15rem 1.25rem;
    background: var(--permukaan);
    border: 1px solid var(--garis); border-radius: var(--radius);
    box-shadow: var(--bayang-1);
}
.stat__angka { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.stat__label { margin-top: .35rem; color: var(--teks-lembut); font-size: .88rem; }

/* Judul bagian */
.admin__bagian { margin: 2.2rem 0 1rem; }
.admin__bagian h2 { font-size: 1.12rem; margin: 0; }
.admin__bagian p { margin: .2rem 0 0; color: var(--teks-lembut); font-size: .88rem; }

/* Tabel */
.tabel-bungkus {
    background: var(--permukaan);
    border: 1px solid var(--garis); border-radius: var(--radius);
    box-shadow: var(--bayang-1); overflow: hidden;
}
.tabel-gulir { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th, .tabel td { padding: .8rem 1rem; text-align: left; vertical-align: middle; white-space: nowrap; }
.tabel thead th {
    background: var(--permukaan-2); color: var(--teks-lembut);
    font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--garis);
}
.tabel tbody tr + tr td { border-top: 1px solid var(--garis); }
.tabel tbody tr:hover td { background: var(--permukaan-2); }
.tabel td.rata-kanan, .tabel th.rata-kanan { text-align: right; }

.pengguna-sel { display: flex; align-items: center; gap: .65rem; }
.pengguna-sel .avatar { width: 2rem; height: 2rem; font-size: .85rem; }
.pengguna-sel__info { display: flex; flex-direction: column; line-height: 1.25; }
.pengguna-sel__nama { font-weight: 600; }
.pengguna-sel__email { color: var(--teks-samar); font-size: .82rem; }

.lencana-peran {
    display: inline-block; padding: .12rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.lencana-peran--admin { background: var(--aksen-lembut); color: var(--aksen); }
.lencana-peran--staff { background: var(--permukaan-2); color: var(--teks-lembut); border: 1px solid var(--garis); }
.lencana-peran--nonaktif { background: rgba(214,64,58,.12); color: var(--bahaya); }

.aksi-sel { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.aksi-sel form { display: inline; }

.tombol--mini {
    padding: .32rem .6rem; font-size: .82rem; border-radius: 7px;
    background: var(--permukaan-2); color: var(--teks);
    border: 1px solid var(--garis);
}
.tombol--mini:hover { background: var(--latar); border-color: var(--garis-kuat); text-decoration: none; }
.tombol--mini.bahaya { color: var(--bahaya); }
.tombol--mini.bahaya:hover { background: rgba(214,64,58,.1); border-color: var(--bahaya); }

/* Panel buat staff */
.panel-form {
    padding: 1.4rem;
    background: var(--permukaan);
    border: 1px solid var(--garis); border-radius: var(--radius);
    box-shadow: var(--bayang-1);
}
.panel-form .form-baris {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; margin-bottom: 1rem;
}

/* Catatan staff (monitoring) — grid read-only */
.pantau-kartu {
    position: relative;
    padding: 1rem 1.1rem;
    border: 1px solid var(--k-tepi); border-radius: var(--radius);
    background: var(--k-default); box-shadow: var(--bayang-1);
}
.pantau-kartu__judul { font-size: 1rem; margin: 0 0 .3rem; }
.pantau-kartu__cuplikan { margin: 0; color: var(--teks-lembut); font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.pantau-kartu__kaki {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: .8rem; font-size: .78rem; color: var(--teks-samar);
}
.pantau-kartu__tag { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .6rem; }

.info-kotak {
    padding: .8rem 1rem; border-radius: var(--radius-kecil);
    background: var(--aksen-lembut); color: var(--teks);
    border: 1px solid var(--garis); font-size: .88rem; margin-bottom: 1.5rem;
}
.info-kotak code { background: rgba(0,0,0,.08); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }

@media (max-width: 640px) {
    .admin__kepala { align-items: flex-start; }
    .tabel th, .tabel td { padding: .65rem .75rem; }
}