/* ============================================================
   ALATKITA — CSS inti (menggantikan Tailwind CDN)
   Rujukan WAJIB: DESIGN.md
   Palet terang-hangat, tipografi besar, asimetris, tanpa slop.
   ============================================================ */

/* ---------- Font self-host (DESIGN.md §3) — woff2 subset latin ---------- */
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Token warna (DESIGN.md §2) ---------- */
:root {
    --kertas:        #FFF8F0;
    --kertas-gelap:  #F5EBDD;
    --tinta:         #2A2438;
    --tinta-lembut:  #6B6275;
    --tomat:         #F25C54;
    --tomat-gelap:   #C9362F;   /* hover: teks putih 5.18:1 */
    --tomat-pekat:   #A82A24;
    --kuning:        #F2B33D;
    --lumor:         #1B998B;
    --baja:          #2D3047;
    --putih:         #FFFFFF;
    --garis:         #E5DCCB;

    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body:    'Inter', 'Space Grotesk', sans-serif;

    --maxw: 1180px;
    --pad: 24px;
}

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

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--kertas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    color: var(--tinta);
}
h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
a { color: var(--baja); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tomat); }
img { max-width: 100%; display: block; }

/* ---------- Struktur ---------- */
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ---------- Header ---------- */
.site-head {
    position: sticky; top: 0; z-index: 50;
    background: var(--kertas);
    border-bottom: 1px solid var(--garis);
}
.site-head .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: 72px;
}
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.15rem; letter-spacing: -0.01em;
    color: var(--tinta); text-decoration: none;
}
.brand-mark {
    width: 34px; height: 34px; border-radius: 6px;
    background: var(--tomat); color: var(--putih);
    display: grid; place-items: center;
    font-size: 1rem; font-weight: 700;
    font-family: var(--font-display);
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    padding: 8px 12px; border-radius: 6px;
    font-size: 0.9rem; font-weight: 500;
    color: var(--tinta-lembut); text-decoration: none;
}
.nav a:hover { background: var(--kertas-gelap); color: var(--tinta); }
.nav a.is-active { color: var(--tinta); font-weight: 600; }
.nav-credit {
    margin-left: 8px; padding: 7px 13px;
    border: 1px solid var(--tinta); border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; color: var(--tinta);
}
.nav-credit b { font-family: var(--font-display); }

/* ---------- Tombol ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
    padding: 12px 24px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; line-height: 1.2;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Tomat #F25C54 + teks Tinta = 4.57:1 (lolos AA). Hover ke tomat pekat
   dengan teks putih 5.18:1. DESIGN.md §7 */
.btn-primary { background: var(--tomat); color: var(--tinta); }
.btn-primary:hover { background: var(--tomat-gelap); color: var(--putih); }
.btn-outline { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-outline:hover { background: var(--tinta); color: var(--kertas); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--kertas-gelap); color: var(--tinta-lembut);
    border-color: var(--garis); cursor: not-allowed;
}
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ---------- Kartu & permukaan ---------- */
.kartu {
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: 18px;
    padding: 28px;
}
.kartu-datar { background: var(--kertas-gelap); border-radius: 18px; padding: 28px; }

/* ---------- Formulir ---------- */
label.lbl {
    display: block; font-weight: 600; font-size: 0.82rem;
    color: var(--tinta); margin-bottom: 6px;
}
.inp, textarea.inp, select.inp {
    width: 100%; font-family: var(--font-body); font-size: 0.95rem;
    color: var(--tinta); background: transparent;
    border: 0; border-bottom: 1px solid var(--tinta);
    padding: 8px 2px; border-radius: 0;
}
.inp:focus { outline: none; border-bottom: 2px solid var(--tomat); }
textarea.inp { resize: vertical; line-height: 1.55; }
select.inp { border: 1px solid var(--garis); border-radius: 8px; padding: 10px 12px; background: var(--putih); }
.hint { font-size: 0.8rem; color: var(--tinta-lembut); margin-top: 6px; }

/* ---------- Pita kuota (landing) ---------- */
.kuota {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px;
    border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis);
    padding: 16px 0; font-size: 0.9rem;
}
.kuota .k-label { color: var(--tinta-lembut); font-weight: 500; }
.kuota .k-item b { font-family: var(--font-display); font-size: 1.05rem; }
.kuota .k-item span { color: var(--tinta-lembut); font-size: 0.82rem; }

/* ---------- Landing: etalase ---------- */
.etalase { padding: 72px 0 0; }
.hero {
    display: grid; grid-template-columns: 7fr 5fr;
    gap: 48px; align-items: start;
}
.hero-copy p.lead {
    font-size: 1.2rem; color: var(--tinta-lembut);
    max-width: 46ch; margin-top: 20px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* momen desain landing: komik keluar dari grid */
.hero-art { position: relative; }
.hero-art .bingkai {
    border: 1px solid var(--garis); border-radius: 14px;
    overflow: hidden; background: var(--putih);
    transform: rotate(-1.2deg);
}
.hero-art .cap {
    font-size: 0.8rem; color: var(--tinta-lembut);
    margin-top: 12px; text-align: right;
}

/* daftar alat editorial (asimetris, bukan grid kartu seragam) */
.daftar-alat { margin-top: 110px; }
.baris-alat {
    display: grid; grid-template-columns: 5fr 7fr;
    gap: 48px; align-items: center;
    padding: 64px 0; border-top: 1px solid var(--garis);
}
.baris-alat:last-child { border-bottom: 1px solid var(--garis); }
.baris-alat.balik { grid-template-columns: 7fr 5fr; }
.baris-alat.balik .alat-teks { order: 2; }
.baris-alat.balik .alat-gambar { order: 1; }
.alat-teks .no {
    font-family: var(--font-display); font-size: 0.85rem;
    font-weight: 500; color: var(--tomat);
    display: block; margin-bottom: 10px;
}
.alat-teks h2 { margin-bottom: 12px; }
.alat-teks p { color: var(--tinta-lembut); max-width: 44ch; }
.alat-teks .tautan {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 18px; font-weight: 600; font-size: 0.92rem;
    color: var(--tinta); text-decoration: none;
    border-bottom: 2px solid var(--tomat); padding-bottom: 2px;
}
.alat-teks .tautan:hover { color: var(--tomat); }
.alat-gambar img {
    width: 100%; border: 1px solid var(--garis); border-radius: 14px;
    background: var(--putih);
}
.alat-gambar.tall img { max-height: 520px; object-fit: cover; object-position: top; }

/* ---------- Halaman alat (dalam aplikasi) ---------- */
.tool-grid {
    display: grid; grid-template-columns: 5fr 7fr;
    gap: 56px; align-items: start; padding: 8px 0 40px;
}
.tool-panel { position: sticky; top: 96px; }
.tool-panel h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.tool-panel .lead { color: var(--tinta-lembut); margin-top: 10px; font-size: 1.05rem; }
.tool-form { margin-top: 26px; }
.tool-form .field { margin-bottom: 20px; }
.tool-out { min-height: 320px; }
.tool-out .kosong {
    border: 1px dashed var(--garis); border-radius: 18px;
    padding: 56px 32px; text-align: center; color: var(--tinta-lembut);
    background: var(--kertas-gelap);
}
.tool-out .hasil img {
    width: 100%; border: 1px solid var(--garis); border-radius: 14px;
    background: var(--putih);
}

/* ---------- Halaman statis ---------- */
.prosa { max-width: 65ch; padding: 24px 0 60px; }
.prosa h2 { margin-top: 48px; }
.prosa p, .prosa li { color: var(--tinta); }
.prosa .lead { font-size: 1.15rem; color: var(--tinta-lembut); }

/* ---------- Tabel (admin, riwayat) ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.tbl th {
    text-align: left; font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--tinta-lembut); padding: 10px 12px;
    border-bottom: 1px solid var(--tinta);
}
table.tbl td { padding: 12px; border-bottom: 1px solid var(--garis); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Lencana status ---------- */
.lencana {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}
.lencana-ok { background: #E4F4F1; color: #11665B; }
.lencana-no { background: #FBE7E5; color: #A32E27; }
.lencana-tunggu { background: #FCF1DC; color: #8A5D10; }

/* ---------- Footer ---------- */
.site-foot {
    border-top: 1px solid var(--garis);
    margin-top: 110px; padding: 32px 0;
    font-size: 0.85rem; color: var(--tinta-lembut);
}
.site-foot .wrap {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between;
}

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
    .hero, .baris-alat, .baris-alat.balik, .tool-grid {
        grid-template-columns: 1fr; gap: 32px;
    }
    .baris-alat.balik .alat-teks { order: 1; }
    .baris-alat.balik .alat-gambar { order: 2; }
    .tool-panel { position: static; }
    .alat-gambar.tall img { max-height: 380px; }
    .daftar-alat { margin-top: 72px; }
    .nav .nav-hide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Utilitas pemetaan dari Tailwind (transisi UI F1 -> DESIGN.md)
   Sengaja eksplisit supaya view bisa dibaca tanpa Tailwind CDN.
   ============================================================ */
.text-tinta       { color: var(--tinta); }
.text-tinta-lembut { color: var(--tinta-lembut); }
.text-tomat       { color: var(--tomat); }
.text-kuning      { color: #9A6B0F; }      /* versi gelap: lolos AA di atas terang */
.text-lumor       { color: #14776A; }      /* versi gelap: lolos AA di atas terang */

.bg-kertas        { background: var(--kertas); }
.bg-kertas-gelap  { background: var(--kertas-gelap); }
.bg-kartu         { background: var(--putih); border: 1px solid var(--garis); }
.bg-tomat         { background: var(--tomat); }
.bg-tomat-p       { background: #FBE7E5; }
.bg-lumor-p       { background: #E4F4F1; }

.border-garis     { border-color: var(--garis); }
.border-tinta     { border-color: var(--tinta); }
.border-tomat     { border-color: var(--tomat); }
.border-kuning    { border-color: var(--kuning); }
.border-lumor     { border-color: var(--lumor); }

.no-shadow        { box-shadow: none; }
.rounded-6        { border-radius: 6px; }
.rounded-8        { border-radius: 8px; }
.rounded-18       { border-radius: 18px; }

.max-5            { max-width: var(--maxw); margin: 0 auto; }

/* kepala halaman alat: judul kiri, badge kuota kanan */
.kepala-alat {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: 16px;
    padding: 24px 0 8px;
}
.kepala-alat h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.kepala-alat p  { color: var(--tinta-lembut); margin-top: 8px; font-size: 1.02rem; }

/* formulir alat: ruang antar bidang seragam */
.tool-form .field,
.tool-form > div { margin-bottom: 20px; }
.tool-form .field:last-child { margin-bottom: 0; }

/* pesan galat validasi */
.galat {
    border: 1px solid var(--tomat); border-radius: 12px;
    background: #FBE7E5; color: #8E2A24;
    padding: 14px 18px; font-size: 0.9rem; margin: 16px 0;
}
.galat .g-judul { font-weight: 600; margin-bottom: 4px; }
.galat ul { margin: 6px 0 0; padding-left: 18px; }

/* ============================================================
   Utilitas tipografi & tampilan (dibutuhkan view; sebelumnya
   memakai kelas Tailwind yang TIDAK terdefinisi -> teks jatuh
   ke gaya bawaan browser. DESIGN.md §3 + §5.)
   ============================================================ */
.font-medium   { font-weight: 500; }
/* Catatan: Inter-500 dihapus dari @font-face — view hanya memakai 400/600/700.
   Browser memetakan 500 ke bobot terdekat (400), tampilan tetap rapi. */
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.text-xs   { font-size: 0.75rem; line-height: 1.5; }
.text-sm   { font-size: 0.875rem; line-height: 1.55; }
.text-base { font-size: 1rem; line-height: 1.6; }
.text-lg   { font-size: 1.125rem; line-height: 1.5; }
.text-xl   { font-size: 1.3rem; line-height: 1.35; }
.text-2xl  { font-size: 1.6rem; line-height: 1.25; }
.text-3xl  { font-size: 2rem; line-height: 1.15; }
.text-4xl  { font-size: 2.5rem; line-height: 1.1; }

.tracking-tight { letter-spacing: -0.02em; }
.uppercase      { text-transform: uppercase; }
.tracking-wide  { letter-spacing: 0.04em; }
.tracking-wider { letter-spacing: 0.08em; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.divide-y > * + * { border-top: 1px solid var(--garis); }
.divide-garis > * + * { border-top: 1px solid var(--garis); }

/* bidang isian: 16px minimum supaya Safari iOS tidak auto-zoom (TEMUAN 2).
   !important diperlukan karena view memakai kelas utilitas .text-sm/.text-xs
   yang kalau tidak, akan menimpa ukuran ini. */
.inp, textarea.inp, select.inp,
textarea.text-sm, select.text-sm, input.text-sm,
textarea.text-xs, select.text-xs, input.text-xs {
    font-size: 1rem !important;
}

/* ============================================================
   MOBILE — ritme padat, target sentuh ≥44px, karya dulu (TEMUAN 3,5,7,9,10)
   ============================================================ */
@media (max-width: 900px) {
    .baris-alat .alat-teks .no { margin-bottom: 6px; }
    /* karya terlihat segera sesudah judul; paragraf & tautan turun ke bawah */
    .baris-alat, .baris-alat.balik {
        display: flex; flex-direction: column; gap: 20px;
        padding: 36px 0;
    }
    .baris-alat.balik .alat-teks,
    .baris-alat.balik .alat-gambar { order: initial; }
    /* urutan HP: 1 judul · 2 karya · 3 paragraf · 4 tautan (TEMUAN 9).
       Selektor memakai .balis juga supaya spesifisitasnya mengalahkan
       aturan 'order: initial' di atas untuk baris terbalik. */
    .baris-alat .alat-teks,
    .baris-alat.balik .alat-teks { display: contents; }
    .baris-alat .judul-urut,
    .baris-alat.balik .judul-urut { order: 1; }
    .baris-alat .alat-gambar,
    .baris-alat.balik .alat-gambar { order: 2; }
    .baris-alat .alat-teks > p,
    .baris-alat.balik .alat-teks > p { order: 3; }
    .baris-alat .tautan-baris,
    .baris-alat.balik .tautan-baris { order: 4; }
    /* nomor & judul sebaris supaya tidak terpotong di HP sempit */
    .baris-alat .judul-urut {
        display: flex; align-items: baseline; gap: 10px;
        flex-wrap: wrap;
    }
    .baris-alat .judul-urut .no { flex: none; }
    .alat-teks .tautan { margin-top: 0; }
}

@media (max-width: 640px) {
    :root { --pad: 18px; }

    /* target sentuh: brand & pill kredit juga >= 44px (TEMUAN 5) */
    .brand { min-height: 44px; }
    .nav-credit { min-height: 44px; display: inline-flex; align-items: center; }
    .site-head .wrap { height: 60px; }
}

    /* ritme vertikal padat */
    .etalase { padding-top: 40px; }
    .daftar-alat { margin-top: 56px; }
    .baris-alat, .baris-alat.balik { padding: 36px 0; gap: 16px; }
    .site-foot { margin-top: 64px; }
    .site-head .wrap { height: 60px; gap: 10px; }
    .brand { font-size: 1.05rem; }
    .brand-mark { width: 30px; height: 30px; }
    .nav { gap: 2px; }
    .nav a { padding: 11px 9px; }                 /* target sentuh ≥44px */
    .nav-credit { padding: 9px 12px; font-size: 0.78rem; margin-left: 4px; }
    .kuota { gap: 6px 16px; padding: 14px 0; }

    /* judul lebih kecil supaya tidak melebar di 360px (TEMUAN 8) */
    h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
    .hero-copy p.lead { font-size: 1.05rem; margin-top: 16px; }
    .hero-cta { margin-top: 22px; gap: 10px; }
    .hero-cta .btn { flex: 1 1 auto; }
    .hero-art .bingkai { transform: none; }        /* rotasi dinetralkan di HP */

    /* kotak hasil kosong tidak makan layar (TEMUAN 7) */
    .tool-out .kosong { padding: 36px 20px; min-height: 170px; }
    .tool-grid { gap: 28px; padding-bottom: 24px; }
    .tool-panel h1 { font-size: 1.75rem; }

    /* target sentuh: tombol & tautan aksi (TEMUAN 5) */
    .btn { min-height: 44px; padding: 12px 20px; }
    .alat-teks .tautan { min-height: 44px; }
    .nav a { min-height: 44px; display: inline-flex; align-items: center; }
    .lencana { padding: 5px 12px; }

    /* tabel tidak melebar keluar layar (TEMUAN 6) */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl-wrap table.tbl { min-width: 520px; }

    /* formulir HP */
    .kepala-alat { padding-top: 12px; }
    .kepala-alat h1 { font-size: 1.75rem; }
}

/* cegah luapan horizontal dari rotasi/elemen dekoratif (TEMUAN 8) */
.hero-art { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }

/* Tombol beli di /harga: target sentuh 44px di HP (TEMUAN 5).
   Tautan inline dalam paragraf (mis. "Daftar gratis", "masuk") sengaja
   dibiarkan ramping — itu teks mengalir, bukan target sentuh utama. */
@media (max-width: 640px) {
    .btn-buy { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Tautan inline dalam kalimat (mis. "Daftar gratis", "masuk"): tetap tampak
   sebagai teks berdesain, tetapi area sentuhnya diperbesar ke >= 44px di HP
   lewat padding vertikal + margin negatif, jadi aliran baris tidak berubah. */
@media (max-width: 640px) {
    .bg-kartu a.underline,
    .bg-kartu a[href].font-semibold {
        display: inline-block;
        padding: 11px 4px;
        margin: -11px -4px;
    }
}

/* ---------- Utilitas .hidden (dibutuhkan view) ----------
   Sebelumnya TIDAK terdefinisi, akibatnya elemen "sembunyi" (kotak kosong,
   pesan galat, tombol unduh sebelum ada hasil) SELALU tampil. */
.hidden { display: none !important; }

/* .flex / .block / .grid sebagai pembungkus tampilan */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }