/* ==========================================================================
   Ucapin — Perkakas "CETAK", bukan "render"
   --------------------------------------------------------------------------
   Halaman ucapan harus terasa seperti BENDA CETAK yang dibuat manusia:
   kertas, tinta, mesin tik, stempel pos — bukan antarmuka aplikasi.

   Semua kelas berawalan `ct-` supaya tidak bentrok dengan Tailwind.
   Dimuat lewat <link> biasa (bukan Vite) → tidak perlu build ulang.
   ========================================================================== */

/* ── Kertas ─────────────────────────────────────────────────────────────── */

/* Butiran disimpan sebagai PNG (digambar sekali), BUKAN filter SVG.
   Filter feTurbulence sangat berat dirender → halaman tersendat di HP murah.
   PNG = browser hanya menempel, nol biaya hitung. */

.ct-kertas {
    background-color: #f3ede1;
    background-image: url('/img/kertas-butir.png');
    background-repeat: repeat;
}

.ct-kertas-putih {
    background-color: #faf8f3;
    background-image: url('/img/kertas-butir-halus.png');
    background-repeat: repeat;
}

/* Kertas buku tulis: garis biru tipis + margin merah */
.ct-buku-tulis {
    background-color: #fbfaf5;
    background-image:
        linear-gradient(to right, transparent 0 46px, rgba(200, 60, 60, .35) 46px 47px, transparent 47px),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(60, 90, 160, .22) 31px 32px);
}

/* Overlay butiran untuk ditempel di atas apa pun */
.ct-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    mix-blend-mode: multiply;
    background-image: url('/img/kertas-butir.png');
    background-repeat: repeat;
}

/* ── Bingkai / garis cetak ──────────────────────────────────────────────── */

/* Garis pesawat udara (airmail) — merah-biru diagonal */
.ct-airmail {
    height: 10px;
    background: repeating-linear-gradient(
        45deg,
        #b8332c 0 9px,
        transparent 9px 18px,
        #2c5f8a 18px 27px,
        transparent 27px 36px
    );
}

.ct-bingkai {
    border: 1px solid rgba(28, 25, 23, .55);
    outline: 1px solid rgba(28, 25, 23, .25);
    outline-offset: 4px;
}

.ct-garis-atas { border-top: 1px solid rgba(28, 25, 23, .35); }
.ct-garis-bawah { border-bottom: 1px solid rgba(28, 25, 23, .35); }

/* Garis ganda tipis ala cetakan lama */
.ct-garis-ganda {
    border-top: 3px double rgba(28, 25, 23, .5);
}

/* ── Mesin tik & huruf berkarakter ──────────────────────────────────────── */

.ct-tik {
    font-family: "Courier Prime", "Space Mono", ui-monospace, monospace;
    letter-spacing: .06em;
}

.ct-tik-kecil {
    font-family: "Courier Prime", "Space Mono", ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ct-serif {
    font-family: "Fraunces", "Newsreader", Georgia, serif;
    font-variation-settings: "SOFT" 40, "WONK" 1;
}

.ct-serif-rapi {
    font-family: "Instrument Serif", "Newsreader", Georgia, serif;
}

.ct-raksasa {
    font-family: "Archivo Black", "Anton", Impact, sans-serif;
    letter-spacing: -.02em;
    line-height: .88;
    text-transform: uppercase;
}

/* Tulisan tangan — untuk alamat amplop, tanda tangan, catatan pinggir */
.ct-tangan {
    font-family: "Caveat", "Kalam", cursive;
    letter-spacing: .01em;
}

.ct-tangan-besar {
    font-family: "Caveat", "Kalam", cursive;
    line-height: 1.05;
}

.ct-samar {
    font-family: "Shadows Into Light", "Caveat", cursive;
}

/* Huruf berongga (outline) — khas cetakan sablon */
.ct-rongga {
    color: transparent;
    -webkit-text-stroke: 2px currentColor;
    text-stroke: 2px currentColor;
}

/* ── Perangko & stempel pos ─────────────────────────────────────────────── */

.ct-perangko {
    position: relative;
    background: #fdfaf3;
    border: 1px solid rgba(28, 25, 23, .45);
    box-shadow: 3px 4px 0 rgba(28, 25, 23, .13);
}

/* Perforasi tercetak di dalam tepi perangko */
.ct-perangko::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(28, 25, 23, .45);
    pointer-events: none;
}

.ct-cap {
    border: 2px solid currentColor;
    border-radius: 3px;
    padding: .3rem .6rem;
    transform: rotate(-11deg);
    opacity: .72;
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ── Efek tinta (risograph) ─────────────────────────────────────────────── */

.ct-riso {
    position: relative;
    isolation: isolate;
}

/* Tumpang tindih tinta → warna ketiga muncul di persilangan */
.ct-tinta {
    mix-blend-mode: multiply;
}

/* Geser tinta (misregistration) — ciri khas cetak sablon murah */
.ct-geser-merah { text-shadow: 3px 3px 0 rgba(229, 53, 43, .55); }
.ct-geser-biru  { text-shadow: -3px 3px 0 rgba(0, 120, 191, .5); }

/* ── Penempatan "ditempel tangan" ───────────────────────────────────────── */

.ct-miring-1 { transform: rotate(-1.6deg); }
.ct-miring-2 { transform: rotate(1.2deg); }
.ct-miring-3 { transform: rotate(-2.6deg); }

/* Selotip kertas */
.ct-selotip {
    position: absolute;
    width: 88px;
    height: 26px;
    background: rgba(226, 216, 178, .78);
    box-shadow: 0 1px 3px rgba(28, 25, 23, .22);
    border-left: 1px dashed rgba(28, 25, 23, .18);
    border-right: 1px dashed rgba(28, 25, 23, .18);
}

/* ── Tata letak editorial ───────────────────────────────────────────────── */

/* Kolom teks seperti koran */
.ct-kolom {
    column-gap: 2.25rem;
    text-align: justify;
    hyphens: auto;
}

@media (min-width: 768px) {
    .ct-kolom-2 { columns: 2; }
}

/* Nomor besar di belakang teks */
.ct-nomor-bayangan {
    font-family: "Archivo Black", "Anton", sans-serif;
    color: rgba(28, 25, 23, .07);
    line-height: .8;
    pointer-events: none;
    user-select: none;
}

/* Huruf pertama besar (drop cap) */
.ct-dropcap::first-letter {
    float: left;
    font-family: "Fraunces", Georgia, serif;
    font-size: 3.6em;
    line-height: .8;
    padding: .08em .1em 0 0;
    font-weight: 700;
}

/* ── Animasi yang menahan diri (bukan pulse/mengapung) ──────────────────── */

/* Muncul naik halus — dipakai bertahap lewat animation-delay */
@keyframes ct-naik {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ct-naik {
    animation: ct-naik .85s cubic-bezier(.22, .61, .36, 1) both;
}

/* Teks terketik, satu per satu */
@keyframes ct-ketik {
    from { width: 0; }
    to   { width: 100%; }
}

.ct-ketik {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    animation: ct-ketik 2.2s steps(38, end) both, ct-kedip 1s step-end 4;
}

@keyframes ct-kedip {
    50% { border-color: transparent; }
}

/* Garis yang tergores pelan */
@keyframes ct-gores {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.ct-gores {
    transform-origin: left;
    animation: ct-gores 1.4s cubic-bezier(.22, .61, .36, 1) both;
}

/* Stempel menghantam kertas */
@keyframes ct-cap-jatuh {
    0%   { opacity: 0; transform: rotate(-11deg) scale(1.6); }
    60%  { opacity: .8; transform: rotate(-11deg) scale(.95); }
    100% { opacity: .72; transform: rotate(-11deg) scale(1); }
}

.ct-cap-jatuh { animation: ct-cap-jatuh .6s ease-out both; }

/* ── Hormati pengguna yang tidak ingin animasi ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ct-naik, .ct-ketik, .ct-gores, .ct-cap-jatuh {
        animation: none !important;
    }
    .ct-ketik { width: auto; border-right: none; }
}

/* ── Cetak di atas kertas sungguhan ─────────────────────────────────────── */

@media print {
    .ct-jangan-cetak { display: none !important; }
    body { background: #fff !important; }
}