/* ==========================================================================
   Ucapin — Sistem desain "STUDIO" (ivory · lavender · dusty rose)
   --------------------------------------------------------------------------
   Arah editorial-kreatif: latar ivory hangat, aksen lavender lembut dan
   dusty rose, tipografi serif ekspresif. Datar & tegas, tanpa gradien
   mencolok dan tanpa kartu kaca. Dipakai SEMUA halaman publik.
   ========================================================================== */

:root {
    /* Latar & tinta */
    --ivory:        #faf6f0;   /* ivory hangat, bukan putih steril */
    --ivory-2:      #f4ede3;   /* ivory sedikit lebih tua */
    --ivory-3:      #ece2d2;   /* untuk garis lembut */
    --kertas-putih: #fffdf9;   /* permukaan kartu */
    --tinta:        #221c17;   /* hampir hitam, hangat */
    --tinta-2:      #5f564a;   /* tinta pudar */
    --tinta-3:      #a3937f;   /* tinta sangat pudar (caption) */

    /* Aksen */
    --lavender:     #6f5b9e;   /* ungu lembut */
    --lavender-2:   #8a76b5;
    --lavender-muda:#efeaf7;
    --rose:         #c2637a;   /* dusty rose */
    --rose-2:       #a94e63;
    --rose-muda:    #f9ecef;
    --emas:         #b98a2f;   /* aksen hangat */

    /* Status (dipakai hemat, tetap bermakna) */
    --hijau:        #3f6f4f;
    --ambur:        #9a6b15;
    --merah:        #a0392c;

    /* Garis */
    --garis:        #e6dccb;
    --garis-tua:    #cfc1a8;

    /* Bentuk */
    --radius:       16px;
    --radius-sm:    12px;
}

/* ── Tipografi ──────────────────────────────────────────────────────────── */
.st-judul   { font-family: 'Fraunces', 'Instrument Serif', Georgia, serif; font-weight: 700; letter-spacing: -0.022em; line-height: 1.03; }
.st-serif   { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.st-tangan  { font-family: 'Caveat', cursive; font-weight: 600; letter-spacing: .01em; }
.st-tik     { font-family: 'Space Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.st-sans    { font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; }

/* Label kecil editorial */
.st-label {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--tinta-3);
}

/* ── Latar halaman ivory ────────────────────────────────────────────────── */
.st-halaman {
    background-color: var(--ivory);
    color: var(--tinta);
}
/* Tekstur kertas halus tetap dipakai — nol biaya render */
.st-tekstur { background-image: url('/img/kertas-butir-halus.png'); background-size: 340px; }

/* Header & footer menyatu dengan ivory */
body:has(.st-halaman) header { background: rgba(250,246,240,.88) !important; border-bottom-color: var(--garis) !important; }
body:has(.st-halaman) footer { border-top-color: var(--garis) !important; background: var(--ivory-2) !important; }

/* ── Panel & kartu (datar, tegas, tanpa kaca) ──────────────────────────── */
.st-panel {
    background: var(--kertas-putih);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    box-shadow: 0 1px 0 rgba(34,28,23,.03), 0 14px 30px -20px rgba(34,28,23,.22);
}
.st-panel-rata { box-shadow: 0 1px 0 rgba(34,28,23,.03); }

/* Kartu template: frame yang menghormati karya, bukan menyainginya */
.st-kartu {
    position: relative;
    background: var(--kertas-putih);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(34,28,23,.03), 0 18px 34px -24px rgba(34,28,23,.28);
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
    display: flex; flex-direction: column; height: 100%;
}
.st-kartu:hover { transform: translateY(-6px); box-shadow: 0 2px 0 rgba(34,28,23,.04), 0 30px 48px -24px rgba(34,28,23,.34); }

/* ── Tombol ─────────────────────────────────────────────────────────────── */
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-weight: 700; border-radius: var(--radius-sm);
    padding: .9rem 1.5rem; font-size: .95rem;
    transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background-color .18s ease;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    line-height: 1.1;
}
.st-btn-utama { background: var(--rose); color: #fff; box-shadow: 0 3px 0 #8d3f52, 0 12px 20px -10px rgba(194,99,122,.5); }
.st-btn-utama:hover { transform: translateY(-2px); background: var(--rose-2); }
.st-btn-utama:active { transform: translateY(0); box-shadow: 0 1px 0 #8d3f52; }

.st-btn-lavender { background: var(--lavender); color: #fff; box-shadow: 0 3px 0 #53457c, 0 12px 20px -10px rgba(111,91,158,.5); }
.st-btn-lavender:hover { transform: translateY(-2px); background: var(--lavender-2); }
.st-btn-lavender:active { transform: translateY(0); box-shadow: 0 1px 0 #53457c; }

.st-btn-tinta { background: var(--tinta); color: var(--ivory); box-shadow: 0 3px 0 #14100b, 0 12px 20px -10px rgba(34,28,23,.5); }
.st-btn-tinta:hover { transform: translateY(-2px); background: #39312a; }
.st-btn-tinta:active { transform: translateY(0); box-shadow: 0 1px 0 #14100b; }

.st-btn-garis { background: transparent; color: var(--tinta); border: 1.5px solid var(--garis-tua); }
.st-btn-garis:hover { border-color: var(--tinta); transform: translateY(-1px); background: var(--kertas-putih); }

.st-btn-kecil { padding: .55rem 1rem; font-size: .82rem; border-radius: 10px; }

/* ── Input ──────────────────────────────────────────────────────────────── */
.st-input {
    width: 100%; background: var(--kertas-putih);
    border: 1.5px solid var(--garis); border-radius: var(--radius-sm);
    padding: .8rem 1.05rem; font-size: .95rem; color: var(--tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.st-input:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(111,91,158,.14); }
.st-input::placeholder { color: var(--tinta-3); }

/* ── Chip / kategori (pemilih suasana, bukan badge klaim) ──────────────── */
.st-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1.05rem; border-radius: 999px;
    border: 1.5px solid var(--garis); background: transparent; color: var(--tinta-2);
    font-size: .85rem; font-weight: 600;
    transition: all .16s ease; text-decoration: none;
}
.st-chip:hover { border-color: var(--lavender); color: var(--lavender); transform: translateY(-1px); background: var(--lavender-muda); }
.st-chip-aktif { background: var(--tinta); color: var(--ivory); border-color: var(--tinta); }
.st-chip-aktif:hover { background: var(--tinta); color: var(--ivory); border-color: var(--tinta); }

/* ── Stempel status (tinta, bukan badge mengkilap) ─────────────────────── */
.st-stempel {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .7rem; border-radius: 8px;
    font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    border: 1.5px solid currentColor; background: transparent;
}
.st-stempel-hijau { color: var(--hijau); }
.st-stempel-emas  { color: var(--emas); }
.st-stempel-ambur { color: var(--ambur); }
.st-stempel-merah { color: var(--merah); }
.st-stempel-tinta { color: var(--tinta-2); }
.st-stempel-lavender { color: var(--lavender); }
.st-stempel-rose  { color: var(--rose); }

/* ── Kotak info bernuansa tinta ─────────────────────────────────────────── */
.st-info { border: 1px solid var(--garis); border-left: 4px solid var(--lavender); background: var(--kertas-putih); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.st-info-rose { border-left-color: var(--rose); }
.st-info-emas { border-left-color: var(--emas); }
.st-info-ambur { border-left-color: var(--ambur); }
.st-info-hijau { border-left-color: var(--hijau); }
.st-info-merah { border-left-color: var(--merah); }

/* ── Garis bawah judul seksi ────────────────────────────────────────────── */
.st-kepala { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); line-height: 1.08; }
.st-garis-tinta { border: 0; border-top: 2px solid var(--tinta); width: 54px; }

/* ── Animasi masuk saat digulir ─────────────────────────────────────────── */
.st-muncul { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.st-muncul.st-tampil { opacity: 1; transform: none; }
.st-tunda-1 { transition-delay: .08s; } .st-tunda-2 { transition-delay: .16s; }
.st-tunda-3 { transition-delay: .24s; } .st-tunda-4 { transition-delay: .32s; }

/* Aksesibilitas: hormati preferensi gerak minim */
@media (prefers-reduced-motion: reduce) {
    .st-muncul { opacity: 1 !important; transform: none !important; transition: none !important; }
    .st-kartu, .st-btn, .st-chip { transition: none !important; }
}
/* Pengaman bila JS mati */
noscript ~ * .st-muncul { opacity: 1; transform: none; }

/* ── Mobile navigation ─────────────────────────────────────────────────── */
#menu-mobile-tombol {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex: 0 0 40px;
    display: none !important;
}
@media (max-width: 767px) {
    #menu-mobile-tombol { display: grid !important; }
}
#menu-mobile {
    position: relative;
    z-index: 2;
}

/* ── Aksen tangan (catatan kecil) ───────────────────────────────────────── */
.st-aksen { font-family: 'Caveat', cursive; color: var(--rose); font-weight: 700; font-size: 1.15em; line-height: 1; }

/* ── Pemisah dekoratif ──────────────────────────────────────────────────── */
.st-sobek { height: 2px; background-image: linear-gradient(90deg, var(--garis) 55%, transparent 45%); background-size: 14px 2px; background-repeat: repeat-x; }