/* ==========================================================================
   Ucapin — Bahasa desain bersama "CETAK" untuk semua halaman situs
   (katalog, statis, auth, pemesanan, dasbor). Satu sumber gaya.
   --------------------------------------------------------------------------
   Prinsip sama dengan landing: kertas & tinta, warna datar, tipografi kuat,
   animasi masuk yang muncul saat digulir. Tidak ada gradien, tidak ada
   kartu kaca rounded-3xl, tidak ada badge klaim.
   ========================================================================== */

:root {
    --kertas:  #faf6ee;   /* krem kertas */
    --kertas-2:#f4eee0;   /* krem sedikit lebih tua */
    --tinta:   #26221a;   /* tinta hampir hitam */
    --tinta-2: #5b5443;   /* tinta pudar */
    --garis:   #e5dcc7;   /* garis tepi kertas */
    --segel:   #a03d2a;   /* merah segel lilin */
    --emas:    #b98a2f;   /* aksen emas tua */
    --hijau:   #3f6f4f;   /* hijau tinta (status baik) */
    --ambur:   #9a6b15;   /* kuning tua (status tunggu) */
    --merah:   #a03d2a;   /* merah (status tolak) */
}

/* Font cetak — dipakai semua halaman */
.up-font-judul   { font-family: "Fraunces", Georgia, "Times New Roman", serif; }
.up-font-tangan  { font-family: "Caveat", cursive; }
.up-font-tik     { font-family: "Special Elite", "Courier New", monospace; }
.up-font-mono    { font-family: "Space Mono", ui-monospace, monospace; }

/* ── Latar kertas bertekstur untuk seluruh halaman ──────────────────── */
.up-kertas {
    background-color: var(--kertas);
    background-image:
        linear-gradient(rgba(38, 34, 26, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 34, 26, .025) 1px, transparent 1px);
    background-size: 44px 44px;
}
.up-tekstur { background-image: url('/img/kertas-butir.png'); background-size: 300px; }

/* ── Panel/kartu cetak: garis tegas + bayangan potongan kertas ─────── */
.up-panel {
    background: #fffdf8;
    border: 1px solid var(--garis);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(38, 34, 26, .04), 0 10px 22px -14px rgba(38, 34, 26, .18);
}
.up-panel-rata { box-shadow: 0 1px 0 rgba(38, 34, 26, .04); }

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

/* ── Tombol cetak (datar, tegas) ───────────────────────────────────── */
.up-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 700; border-radius: 10px;
    padding: .8rem 1.4rem; font-size: .95rem;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.up-btn-utama {
    background: var(--segel); color: #fff;
    box-shadow: 0 3px 0 #7c2d1f, 0 10px 18px -8px rgba(160, 61, 42, .5);
}
.up-btn-utama:hover { transform: translateY(-2px); background: #8f3423; }
.up-btn-utama:active { transform: translateY(0); box-shadow: 0 1px 0 #7c2d1f; }

.up-btn-tinta {
    background: var(--tinta); color: var(--kertas);
    box-shadow: 0 3px 0 #12100b, 0 10px 18px -10px rgba(38, 34, 26, .5);
}
.up-btn-tinta:hover { transform: translateY(-2px); background: #38312a; }
.up-btn-tinta:active { transform: translateY(0); box-shadow: 0 1px 0 #12100b; }

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

.up-btn-kecil { padding: .5rem .9rem; font-size: .8rem; border-radius: 8px; }

/* ── Input cetak ───────────────────────────────────────────────────── */
.up-input {
    width: 100%;
    background: #fffdf8;
    border: 1.5px solid var(--garis);
    border-radius: 10px;
    padding: .72rem 1rem; font-size: .92rem; color: var(--tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.up-input:focus {
    outline: none; border-color: var(--segel);
    box-shadow: 0 0 0 3px rgba(160, 61, 42, .12);
}
.up-input::placeholder { color: #b3a98d; }

/* ── Chip / kategori (bukan "badge klaim") ─────────────────────────── */
.up-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .9rem; border-radius: 999px;
    border: 1.5px solid var(--garis);
    background: transparent; color: var(--tinta-2);
    font-size: .82rem; font-weight: 600;
    transition: all .15s ease; text-decoration: none;
}
.up-chip:hover { border-color: var(--tinta); color: var(--tinta); transform: translateY(-1px); }
.up-chip-aktif { background: var(--tinta); color: var(--kertas); border-color: var(--tinta); }

/* ── Kartu template (katalog) ──────────────────────────────────────── */
.up-kartu {
    background: #fffdf8;
    border: 1px solid var(--garis);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 0 rgba(38, 34, 26, .04), 0 14px 26px -18px rgba(38, 34, 26, .22);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
    display: flex; flex-direction: column; height: 100%;
}
.up-kartu:hover { transform: translateY(-6px); box-shadow: 0 2px 0 rgba(38, 34, 26, .05), 0 26px 40px -20px rgba(38, 34, 26, .3); }

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

/* ── Kotak info bernuansa tinta (pengganti kotak emerald/amber Tailwind) */
.up-info {
    border: 1px solid var(--garis);
    border-left: 4px solid var(--hijau);
    background: #fffdf8; border-radius: 10px; padding: 1rem 1.2rem;
}
.up-info-ambur { border-left-color: var(--ambur); }
.up-info-merah { border-left-color: var(--merah); }
.up-info-emas { border-left-color: var(--emas); }

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

/* Pengaman bila JS mati */
noscript ~ * .up-muncul { opacity: 1; transform: none; }

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

/* ── Header & footer ikut tema kertas ──────────────────────────────── */
body:has(.up-halaman) header {
    background: rgba(250, 246, 238, .9) !important;
    border-bottom-color: var(--garis) !important;
}
body:has(.up-halaman) footer {
    border-top-color: var(--garis) !important;
}

/* Teks mutar halus untuk aksen tangan */
.up-aksen-tangan {
    font-family: "Caveat", cursive; color: var(--segel);
    font-weight: 700; font-size: 1.15em; line-height: 1;
}

/* Garis tepi berlubang (seperti tiket/sobekan) untuk pemisah dekoratif */
.up-sobek {
    height: 2px;
    background-image: linear-gradient(90deg, var(--garis) 55%, transparent 45%);
    background-size: 14px 2px; background-repeat: repeat-x;
}