/* =========================================================================
   Sigatra — Dasar
   =========================================================================
   Reset, huruf, dan kerangka tata letak. Tidak ada komponen di sini.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Huruf lokal

   Di-host sendiri, bukan lewat Google Fonts. Tiga alasan:
   1. Menghapus satu koneksi ke domain pihak ketiga — langsung memperbaiki
      waktu tampil teks (LCP), yang merupakan faktor peringkat Google.
   2. Tidak ada alamat IP pengunjung yang terkirim ke server luar.
   3. Situs tetap tampil benar meskipun jaringan pengunjung memblokir
      domain Google.

   Berkas fontnya perlu diletakkan di public/assets/fonts/ — lihat
   public/assets/fonts/README.md. Kalau belum ada, tumpukan huruf cadangan
   di --font-sans tetap menghasilkan tampilan rapi, jadi situs tidak rusak.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}


/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;

    /* Tanpa ini, tautan lompat (#faq) berhenti di posisi yang tertutup
       header lengket. */
    scroll-padding-top: 6.5rem;

    /* Hindari geser horizontal saat scrollbar muncul/hilang antar halaman. */
    scrollbar-gutter: stable;
}

body {
    min-height: 100svh;
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;

    /* Jaring pengaman: tidak ada satu pun halaman yang boleh menggeser
       ke samping di ponsel. */
    overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
    /* Warna dasar selagi gambar dimuat — mencegah kilatan putih di tema
       gelap. */
    background-color: var(--surface-2);
}

svg {
    flex-shrink: 0;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: var(--sp-8);
}

::selection {
    background-color: color-mix(in oklab, var(--accent) 22%, transparent);
    color: var(--text);
}


/* -------------------------------------------------------------------------
   Huruf
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
    color: var(--text);
}

h1 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extra);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

p {
    text-wrap: pretty;
}

a {
    color: var(--accent);
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 0.08em;
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
    color: var(--accent-hover);
    text-decoration-color: currentColor;
}

strong, b { font-weight: var(--fw-semibold); }

small { font-size: var(--fs-sm); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-feature-settings: "liga" 0;
}

:where(p, li) > code {
    background-color: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xs);
    padding: 0.1em 0.38em;
    color: var(--accent-ink);
}

blockquote {
    margin: 0;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}


/* -------------------------------------------------------------------------
   Fokus keyboard

   Cincin fokus HANYA muncul untuk navigasi keyboard (:focus-visible), bukan
   saat diklik mouse. Menghapusnya sama sekali akan membuat situs tidak bisa
   dipakai tanpa mouse — itu pelanggaran aksesibilitas yang paling sering
   terjadi sekaligus paling mudah dihindari.
   ------------------------------------------------------------------------- */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}


/* -------------------------------------------------------------------------
   Lompat ke konten — bantuan untuk pengguna keyboard & pembaca layar
   ------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: var(--z-toast);
    padding: var(--sp-3) var(--sp-5);
    background-color: var(--accent);
    color: var(--accent-on);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    transform: translateY(-160%);
    transition: transform var(--dur) var(--ease-spring);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: 4px;
}


/* -------------------------------------------------------------------------
   Tata letak
   ------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--lg  { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.section--flush-top { padding-block-start: 0; }

.section--alt {
    background-color: var(--bg-subtle);
}

/* Garis rambut pemisah bagian, memudar di kedua ujung supaya tidak
   memotong halaman secara kaku. */
.section--divided::before {
    content: "";
    position: absolute;
    inset-inline: var(--gutter);
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* Kepala bagian */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 46rem;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

.section-head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.section-head--split {
    max-width: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
    flex-wrap: wrap;
}

.section-head--split > :first-child {
    max-width: 44rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
}

.section-head--center .eyebrow::after {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
}

.section-title {
    font-size: var(--fs-2xl);
    max-width: 22ch;
}

.section-head--center .section-title,
.section-head--center .section-lead {
    max-width: none;
}

.section-lead {
    font-size: var(--fs-md);
    color: var(--text-2);
    max-width: 58ch;
    line-height: var(--lh-relaxed);
}

/* Kisi umum */
.grid {
    display: grid;
    gap: var(--sp-6);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Susunan vertikal dengan jarak seragam */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-8); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}


/* -------------------------------------------------------------------------
   Bantuan teks
   ------------------------------------------------------------------------- */

.text-muted   { color: var(--text-2); }
.text-subtle  { color: var(--text-3); }
.text-sm      { font-size: var(--fs-sm); }
.text-xs      { font-size: var(--fs-xs); }
.text-lg      { font-size: var(--fs-lg); }
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }

.mono {
    font-family: var(--font-mono);
    font-size: 0.94em;
    letter-spacing: var(--tracking-normal);
}

/* Teks bergradasi merek — dipakai hemat, hanya untuk satu frasa kunci
   dalam judul. Kalau dipakai di mana-mana, efeknya justru hilang. */
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Beri sedikit ruang supaya huruf miring/ekor tidak terpotong. */
    padding-inline-end: 0.06em;
}

/* Sorotan garis bawah di belakang teks — alternatif yang lebih hangat
   daripada gradasi, dipakai untuk penekanan sekunder. */
.text-mark {
    position: relative;
    display: inline;
    background-image: linear-gradient(
        to top,
        color-mix(in oklab, var(--highlight) 34%, transparent) 0 0.32em,
        transparent 0.32em
    );
    padding-inline: 0.08em;
}


/* -------------------------------------------------------------------------
   Aksesibilitas
   ------------------------------------------------------------------------- */

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

[hidden] {
    display: none !important;
}


/* -------------------------------------------------------------------------
   Batang gulir
   ------------------------------------------------------------------------- */

@supports (scrollbar-color: auto) {
    html {
        scrollbar-color: var(--border-strong) transparent;
        scrollbar-width: thin;
    }
}

@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--border-strong);
        border-radius: var(--r-full);
        border: 3px solid var(--bg);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--text-3);
    }
}


/* -------------------------------------------------------------------------
   Isi artikel (prose)

   Gaya untuk HTML yang datang dari panel admin. Ditulis dengan :where()
   supaya kekhususannya nol — kelas apa pun yang ditambahkan nanti selalu
   bisa menimpanya tanpa perlu !important.
   ------------------------------------------------------------------------- */

.prose {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-2);
    max-width: 68ch;
}

.prose :where(h2, h3, h4) {
    color: var(--text);
    margin-block: 1.9em 0.7em;
    scroll-margin-top: 7rem;
}

.prose :where(h2) { font-size: var(--fs-xl); }
.prose :where(h3) { font-size: var(--fs-lg); }

.prose :where(p, ul, ol, blockquote, figure, pre, table) {
    margin-block: 1.15em;
}

.prose :where(ul, ol) {
    padding-inline-start: 1.35em;
}

.prose :where(li) {
    margin-block: 0.4em;
    padding-inline-start: 0.2em;
}

.prose :where(li)::marker {
    color: var(--accent);
}

.prose :where(a) {
    text-decoration: underline;
    font-weight: var(--fw-medium);
}

.prose :where(strong) {
    color: var(--text);
}

.prose :where(blockquote) {
    border-inline-start: 3px solid var(--accent);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    color: var(--text);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: var(--fw-medium);
}

.prose :where(img, figure) {
    border-radius: var(--r-md);
    overflow: hidden;
}

.prose :where(figcaption) {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-align: center;
}

.prose :where(pre) {
    background-color: var(--surface-inv);
    color: var(--text-inv);
    padding: var(--sp-5);
    border-radius: var(--r-md);
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.prose :where(pre) code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

/* Tabel di dalam artikel harus bisa digulir sendiri di ponsel, bukan
   memaksa seluruh halaman melebar. */
.prose :where(table) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: var(--fs-sm);
}

.prose :where(th, td) {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    text-align: start;
}

.prose :where(th) {
    color: var(--text);
    font-weight: var(--fw-semibold);
}