/* Hallmark · tokens · project: Jalanin Aja · genre: modern-minimal (struktur) · design-system: design.md
 * theme: Hum (warna & huruf) · struktur: studied-DNA (source: Klook Travel, brief user 9 Okt 2026)
 * Axes (diversification): paper=light-cream · display=rounded-sans · accent=multi (95 · 235 · 18)
 *
 * 9 Okt 2026: warna dan huruf Hum DIPERTAHANKAN; yang diganti bentuknya —
 * kartu putih di atas cream, sudut 8–12px, bayang tipis, tombol rata,
 * informasi lebih rapat. Lihat design.md di akar repo.
 *
 * Kembali ke sistem Hum setelah percobaan navy/serif. Cream, bukan putih.
 * Ink gelap kebiruan, bukan hitam murni. Tiga aksen yang masing-masing
 * memegang permukaannya sendiri — pear untuk aksi, cyan untuk jelajah,
 * coral untuk satu momen paling terang di halaman.
 *
 * Kontras dihitung, bukan dikira (rasio WCAG, sRGB setelah clipping):
 *   ink on paper       16.6:1     ink-2 on paper        6.8:1
 *   ink on paper-2     15.2:1     ink-2 on paper-3      5.7:1
 *   ink on pear        11.8:1     ink on band-pear     14.8:1
 *   ink on cyan         6.2:1     ink-2 on band-cyan    6.3:1
 *   ink on coral        5.2:1     ink-2 on band-coral   6.1:1
 *   focus on paper      4.4:1     focus on pear         3.1:1   (≥3:1 di mana pun)
 */

:root {
  /* ---- Paper & ink ----------------------------------------------------
     Cream, bukan putih — putih murni membuang seluruh kehangatan tema ini.
     Tiga tingkat: alas, panel, dan hover panel. */
  --color-paper:     oklch(97% 0.012 95);    /* cream, tarikan pear tipis */
  --color-paper-2:   oklch(94% 0.016 95);    /* permukaan panel */
  --color-paper-3:   oklch(91% 0.020 95);    /* hover panel */

  /* Permukaan kartu — putih, supaya kartu terangkat dari cream tanpa garis
     tebal. Satu-satunya nilai baru di palet; cream tetap jadi alas. */
  --color-surface:   oklch(100% 0 0);

  --color-ink:       oklch(20% 0.012 250);   /* near-black, condong dingin */
  --color-ink-2:     oklch(45% 0.020 250);   /* teks sekunder — 6.8:1 di cream */

  /* ---- Aksen ----------------------------------------------------------
     Tiga aksen, tiga tugas. Tidak pernah digradasikan satu sama lain.
     pear = aksi utama · cyan = jelajah, tautan, penanda flora
     coral = satu momen paling terang saja (blok penutup) */
  --color-pear:      oklch(86% 0.18 95);
  --color-pear-deep: oklch(72% 0.17 95);     /* tepi tombol dorong */
  --color-cyan:      oklch(66% 0.18 235);
  --color-cyan-deep: oklch(54% 0.16 235);
  --color-coral:     oklch(68% 0.24 18);
  --color-coral-deep:oklch(56% 0.21 18);
  --color-mint:      oklch(80% 0.16 150);    /* jarang: tag "Ringan" */
  --color-lav:       oklch(74% 0.16 305);    /* jarang: tag dekoratif */

  --color-accent:    var(--color-pear);      /* alias peran: aksi utama */

  /* Alas bertinta — pita seksi. Ink tetap terbaca di ketiganya (≥14.7:1). */
  --band-pear:       oklch(93% 0.070 95);
  --band-cyan:       oklch(94% 0.038 235);
  --band-coral:      oklch(94% 0.038 18);
  /* Alas label kecil (tag kesulitan "mudah", status acara). Ink ≥14:1. */
  --band-mint:       oklch(93% 0.060 150);
  --band-lav:        oklch(93% 0.050 305);
  /* Satu-satunya gradasi di sistem: spanduk acara di beranda. Lembut, dari
     alas pita pear lewat putih ke alas pita cyan — bukan dua aksen penuh
     yang dilebur. Lihat design.md § Warna. */
  --gradasi-spanduk: linear-gradient(115deg, var(--band-pear) 0%, var(--color-surface) 52%, var(--band-cyan) 100%);

  /* Tinta kartu — 6% saat diam, 12% saat hover (color-shift Hum) */
  --tint-pear:       oklch(86% 0.18 95 / 0.16);
  --tint-pear-hi:    oklch(86% 0.18 95 / 0.30);
  --tint-cyan:       oklch(66% 0.18 235 / 0.10);
  --tint-cyan-hi:    oklch(66% 0.18 235 / 0.20);
  --tint-coral:      oklch(68% 0.24 18 / 0.10);
  --tint-coral-hi:   oklch(68% 0.24 18 / 0.20);
  --tint-mint:       oklch(80% 0.16 150 / 0.14);
  --tint-mint-hi:    oklch(80% 0.16 150 / 0.26);
  --tint-lav:        oklch(74% 0.16 305 / 0.12);
  --tint-lav-hi:     oklch(74% 0.16 305 / 0.24);

  --color-focus:     oklch(55% 0.19 250);    /* biru fokus — 4.4:1 di cream */
  /* Teks "menunggu/antre" — jingga, bukan merah: kabar tunggu, bukan galat. */
  --color-antre:     oklch(55% 0.18 40);

  /* ---- Garis & bayang -------------------------------------------------
     Satu bahasa seam untuk seluruh halaman: garis putus-putus tipis.
     Bayang berlapis (kontak rapat + ambient lembut), bukan satu --shadow. */
  --color-rule:      oklch(82% 0.025 95);
  --color-rule-2:    oklch(72% 0.030 95);

  --rule-hair:       1px solid var(--color-rule);
  --rule-dash:       1px dashed var(--color-rule);
  --rule-heavy:      2px solid var(--color-ink);

  --shadow-contact:  0 1px 2px oklch(20% 0.012 250 / 0.06);
  --shadow-ambient:  0 14px 34px -18px oklch(20% 0.012 250 / 0.22);
  --shadow-lift:     0 2px 4px oklch(20% 0.012 250 / 0.07),
                     0 22px 44px -20px oklch(20% 0.012 250 / 0.28);
  /* Kartu: diam nyaris rata, hover terangkat sedikit. Tanpa garis tepi —
     bayang tipis inilah yang memisahkan kartu putih dari cream. */
  --shadow-card:     0 1px 2px oklch(20% 0.012 250 / 0.06),
                     0 2px 8px -2px oklch(20% 0.012 250 / 0.08);
  --shadow-card-hi:  0 2px 4px oklch(20% 0.012 250 / 0.06),
                     0 12px 24px -8px oklch(20% 0.012 250 / 0.18);

  /* ---- Type -----------------------------------------------------------
     Dua keluarga. Rounded sans di mana-mana; tidak ada serif satu pun di
     tema ini. Mono hanya untuk label kapital, ordinal, dan angka tabular. */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-display);
  --font-label:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-body:    400;
  --weight-medium:  500;
  --weight-display: 700;
  --weight-bold:    700;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.0625rem;
  --text-lg:      1.25rem;
  --text-xl:      1.5rem;
  /* Skala judul dipadatkan (9 Okt 2026): judul halaman aplikasi adalah
     penunjuk arah, bukan poster. Display hanya untuk hero landing. */
  --text-2xl:     clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --text-3xl:     clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --text-display: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --text-stat:    clamp(1.75rem, 1.3rem + 2vw, 2.5rem);

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-label:    0.10em;

  --leading-display: 1.04;
  --leading-heading: 1.12;
  --leading-body:    1.55;
  --leading-tight:   1.35;   /* meta kartu, label */

  /* ---- Space (4 pt) ---------------------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --page-max:    72rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --shell:       var(--page-max);   /* satu angka; semua seksi patuh */

  /* ---- Radius ----------------------------------------------------------
     Tidak ada sudut siku di mana pun — tapi juga tidak ada lagi gelembung
     20px. Kartu 12, isi 8, tombol 10, tag 4. */
  --radius-card:  12px;
  --radius-inner: 8px;
  --radius-input: 8px;
  --radius-btn:   10px;
  --radius-tag:   4px;
  /* Sisi terkecil sebuah sasaran sentuh. 44px adalah lantai WCAG 2.5.5 dan
     ukuran ujung jari orang dewasa; tanda sekecil apa pun boleh terlihat lebih
     kecil dari ini, tapi AREA yang menerima sentuhannya tidak boleh. */
  --target-sentuh: 2.75rem;

  --radius-pill:  999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* kartu, penanda karakter */
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);      /* reveal, hitungan */
  --ease-press:  cubic-bezier(0.2, 0.7, 0.3, 1);      /* tombol dorong */

  --dur-press: 140ms;
  --dur-micro:  70ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-rise:  600ms;
  --dur-draw: 1500ms;   /* jalur di peta hero menggambar dirinya sendiri */
  --dur-walk:    10s;   /* satu putaran pejalan di peta hero: jalan, popup temuan, berhenti di bendera */

  /* ---- Elevation --------------------------------------------------------- */
  --z-base:       1;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
}

/* Blog Jalanin Aja — di atas tokens.css (palet & huruf Hum, tidak diubah).
 *
 * Satu-satunya kelonggaran dari design.md: blog boleh bergradasi lebih dari
 * spanduk acara (permintaan 19 Okt 2026, "biar elegan"). Aturannya tetap:
 * gradasi selalu dari ALAS pita (band-*) atau tint, tidak pernah dua aksen
 * penuh dilebur di permukaan besar. Aksen penuh hanya bertemu di garis tipis
 * (progres baca, tepi kartu saat hover) dan di teks judul hero.
 */

:root {
  /* Tint (aksen tembus pandang), bukan aksen penuh: cukup berwarna untuk
     terasa, tapi ink tetap ≥14:1 di atasnya karena alasnya tetap cream. */
  --gradasi-cahaya:
    radial-gradient(55% 75% at 8% 0%, oklch(86% 0.18 95 / 0.42) 0%, transparent 62%),
    radial-gradient(48% 70% at 92% 10%, oklch(66% 0.18 235 / 0.26) 0%, transparent 64%),
    radial-gradient(40% 55% at 62% 92%, oklch(68% 0.24 18 / 0.20) 0%, transparent 66%);
  --gradasi-garis: linear-gradient(90deg, var(--color-pear) 0%, var(--color-cyan) 55%, var(--color-coral) 100%);
  --gradasi-judul: linear-gradient(100deg, var(--color-ink) 0%, var(--color-ink) 35%, var(--color-cyan-deep) 75%, var(--color-coral-deep) 100%);
  --gradasi-kosong: linear-gradient(135deg, var(--band-pear), var(--band-cyan) 60%, var(--band-coral));
  --baca-max: 44rem;
  /* Ghost Admin → Design → Typography boleh menimpa huruf; bawaannya tetap Plus Jakarta Sans. */
  --huruf-judul: var(--gh-font-heading, var(--font-display));
  --huruf-isi: var(--gh-font-body, var(--font-body));
}

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

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--huruf-isi);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.lompat {
  position: absolute; left: var(--space-md); top: -4rem; z-index: var(--z-modal);
  background: var(--color-ink); color: var(--color-surface);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-btn);
}
.lompat:focus { top: var(--space-md); }

.cangkang {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.cangkang--baca { max-width: calc(var(--baca-max) + 2 * var(--page-gutter)); }

.kode { font-family: var(--font-label); }

/* ---- Progres baca -------------------------------------------------------- */
.progres {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-toast);
  pointer-events: none;
}
.progres__isi {
  display: block; height: 100%; width: 100%;
  background: var(--gradasi-garis);
  transform-origin: 0 50%; transform: scaleX(0);
}
body:not(.post-template) .progres { display: none; }

/* ---- Tombol & lencana ---------------------------------------------------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-sentuh);
  padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-btn);
  background: var(--color-pear); color: var(--color-ink);
  font: inherit; font-weight: var(--weight-bold); font-size: var(--text-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.tombol:hover { background: color-mix(in oklch, var(--color-pear) 55%, var(--color-pear-deep)); }
.tombol:active { background: var(--color-pear-deep); }
.tombol--tipis {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-rule);
}
.tombol--tipis:hover { background: var(--color-paper-2); }

.lencana {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-tag);
  background: var(--band-cyan); color: var(--color-ink);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  text-decoration: none;
}
a.lencana:hover { background: var(--tint-cyan-hi); }

/* ---- Kepala -------------------------------------------------------------- */
.kepala {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in oklch, var(--color-rule) 60%, transparent);
}
.kepala__dalam {
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: 4rem;
}
.kepala__logo { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; }
.kepala__logo img { height: 36px; width: auto; }
.kepala__label {
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  padding-left: var(--space-xs);
  border-left: 1px solid var(--color-rule);
  color: var(--color-ink-2);
}
.kepala__nav { flex: 1; min-width: 0; }
.kepala__nav .nav {
  display: flex; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.kepala__nav .nav a {
  display: block; padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
}
.kepala__nav .nav a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.kepala__nav .nav-current a { background: var(--color-ink); color: var(--color-surface); }
.kepala__aksi { display: flex; gap: var(--space-xs); }

@media (max-width: 40rem) {
  .kepala__dalam { flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xs); }
  .kepala__nav { order: 3; flex-basis: 100%; }
  .kepala__aksi { margin-left: auto; }
  .kepala__aksi .tombol { min-height: 2.5rem; padding-inline: var(--space-md); }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.hero__cahaya {
  position: absolute; inset: -10% -5%; z-index: -1;
  background: var(--gradasi-cahaya);
  filter: blur(8px);
  /* luruh ke cream, bukan terpotong garis */
  -webkit-mask: linear-gradient(#000 55%, transparent 96%);
  mask: linear-gradient(#000 55%, transparent 96%);
  animation: hanyut 22s var(--ease-in-out) infinite alternate;
}
.hero__cahaya::after {
  /* butir halus supaya gradasinya tidak "plastik" */
  content: ""; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes hanyut {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 3%, 0) scale(1.06); }
}
.hero__dalam > * { max-width: 52rem; }
.hero__sapa {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-surface) 70%, transparent);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-2);
}
.hero__sapa::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--gradasi-garis);
}
.hero__judul, .artikel__judul, .kartu__judul, .konten h2, .konten h3, .konten h4 { font-family: var(--huruf-judul); }
.hero__judul {
  margin: 0;
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  background: var(--gradasi-judul);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-wrap: balance;
  width: fit-content;   /* gradasi selebar teksnya, supaya ujung coral terlihat */
}
.hero__lede {
  max-width: 38rem; margin: var(--space-md) 0 0;
  font-size: var(--text-md); color: var(--color-ink-2);
  text-wrap: pretty;
}
.hero--ringkas { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero--ringkas .hero__judul { font-size: var(--text-3xl); }
.hero p:has(> .tombol) { margin-top: var(--space-lg); }

/* ---- Langganan ----------------------------------------------------------- */
.langganan {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  margin-top: var(--space-lg); max-width: 30rem;
  padding: 0.375rem;
  border-radius: calc(var(--radius-btn) + 0.375rem);
  background: var(--color-surface);
  box-shadow: var(--shadow-card-hi);
}
.langganan__isian {
  flex: 1 1 12rem; min-width: 0; min-height: var(--target-sentuh);
  padding: 0 var(--space-md);
  border: 0; border-radius: var(--radius-input); background: transparent;
  font: inherit; color: var(--color-ink);
}
.langganan__isian:focus-visible { outline-offset: 0; }
.langganan__pesan { display: none; flex-basis: 100%; margin: 0; padding: 0 var(--space-md) var(--space-xs); font-size: var(--text-sm); }
.langganan.success .langganan__pesan--berhasil,
.langganan.error .langganan__pesan--gagal { display: block; }
.langganan.loading .tombol { opacity: 0.6; }

/* ---- Grid & kartu -------------------------------------------------------- */
.daftar {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  padding-block: var(--space-lg) var(--space-2xl);
}
.daftar--rata { padding-block: 0; }

.kartu {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-short) var(--ease-out);
}
/* Tepi gradasi saat hover: border 1px yang hanya tampil di bingkai lewat mask. */
.kartu::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--gradasi-garis);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none; z-index: 1;
}
.kartu:hover { box-shadow: var(--shadow-card-hi); }
.kartu:hover::before, .kartu:focus-within::before { opacity: 1; }
.kartu__tautan { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.kartu__tautan:focus-visible { outline-offset: 4px; border-radius: var(--radius-card); }
.kartu__media {
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-paper-2);
}
.kartu__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}
.kartu:hover .kartu__media img { transform: scale(1.03); }
.kartu__kosong { width: 100%; height: 100%; background: var(--gradasi-kosong); }
.kartu__isi { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md) var(--space-md) var(--space-lg); flex: 1; }
.kartu__isi .lencana { align-self: flex-start; }
.kartu__judul {
  margin: 0; font-size: var(--text-lg); font-weight: var(--weight-display);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.kartu__ringkas { margin: 0; color: var(--color-ink-2); }
.kartu__meta {
  display: flex; gap: var(--space-2xs); flex-wrap: wrap;
  margin: auto 0 0; padding-top: var(--space-xs);
  font-size: var(--text-xs); color: var(--color-ink-2);
}

@media (min-width: 60rem) {
  .kartu--besar { grid-column: 1 / -1; }
  .kartu--besar .kartu__tautan { flex-direction: row; }
  .kartu--besar .kartu__media {
    flex: 0 0 60%; aspect-ratio: 16 / 9;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
  .kartu--besar .kartu__isi { justify-content: center; padding: var(--space-xl); gap: var(--space-sm); }
  .kartu--besar .kartu__judul { font-size: var(--text-3xl); }
  .kartu--besar .kartu__meta { margin-top: var(--space-xs); }
}

.kosong {
  grid-column: 1 / -1; padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-card); background: var(--color-surface);
  box-shadow: var(--shadow-card); text-align: center; color: var(--color-ink-2);
}

.halaman {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-2xl);
}
.halaman__nomor { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---- Artikel ------------------------------------------------------------- */
.artikel__kepala {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-xl);
}
.artikel__cahaya {
  position: absolute; inset: 0; z-index: -1;
  background: var(--gradasi-cahaya);
  -webkit-mask: linear-gradient(#000 40%, transparent);
  mask: linear-gradient(#000 40%, transparent);
}
.remah { display: flex; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-md); }
.remah a { text-decoration: none; }
.remah a:hover { color: var(--color-ink); text-decoration: underline; }
.artikel__judul {
  margin: 0; font-size: var(--text-3xl); font-weight: 800;
  line-height: var(--leading-heading); letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.artikel__lede { margin: var(--space-md) 0 0; font-size: var(--text-md); color: var(--color-ink-2); }
.artikel__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs);
  margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2);
}
.artikel__meta a { color: var(--color-ink); font-weight: var(--weight-medium); text-decoration: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-rule); }
.avatar--besar { width: 88px; height: 88px; margin-bottom: var(--space-md); }

.artikel__gambar { margin: 0 auto var(--space-xl); }
.artikel__gambar img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.artikel__gambar figcaption, .konten figcaption {
  margin-top: var(--space-xs); text-align: center;
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.artikel__tag { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xl) 0; }
.artikel__komentar { padding-block: var(--space-xl) 0; }

/* ---- Konten (Koenig) ----------------------------------------------------- */
.konten {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    [wide-start] minmax(0, 6rem)
    [main-start] min(var(--baca-max), calc(100% - 2 * var(--page-gutter))) [main-end]
    minmax(0, 6rem) [wide-end]
    minmax(var(--page-gutter), 1fr) [full-end];
  font-size: var(--text-md); line-height: 1.75;
}
.konten > * { grid-column: main; margin: 0 0 var(--space-lg); }
.konten > .kg-width-wide { grid-column: wide; }
.konten > .kg-width-full { grid-column: full; }
.konten > .kg-width-full img { border-radius: 0; }

.konten h2, .konten h3, .konten h4 {
  margin-top: var(--space-xl); margin-bottom: var(--space-sm);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-display);
}
.konten h2 { font-size: var(--text-xl); }
.konten h3 { font-size: var(--text-lg); }
.konten a {
  color: var(--color-cyan-deep); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.konten a:hover { text-decoration-thickness: 2px; }
.konten img { border-radius: var(--radius-inner); }
.konten blockquote:not(.kg-blockquote-alt) {
  position: relative; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: var(--weight-medium);
}
.konten blockquote:not(.kg-blockquote-alt)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--color-pear), var(--color-cyan), var(--color-coral));
}
.konten .kg-blockquote-alt { text-align: center; font-size: var(--text-xl); font-style: italic; color: var(--color-ink-2); }
.konten hr {
  border: 0; height: 1px; margin-block: var(--space-xl);
  background: linear-gradient(90deg, transparent, var(--color-rule-2), transparent);
}
.konten code { font-family: var(--font-label); font-size: 0.88em; background: var(--color-paper-2); padding: 0.1em 0.35em; border-radius: var(--radius-tag); }
.konten pre {
  overflow-x: auto; padding: var(--space-md); border-radius: var(--radius-inner);
  background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); line-height: 1.6;
}
.konten pre code { background: none; padding: 0; color: inherit; }
.konten ul, .konten ol { padding-left: 1.4rem; }
.konten li + li { margin-top: var(--space-2xs); }
.konten table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--text-sm); }
.konten th, .konten td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: left; }
.konten figure { margin-inline: 0; }
.konten .kg-callout-card { border-radius: var(--radius-card); }
.konten .kg-bookmark-container { border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 0; background: var(--color-surface); }

/* Kotak member-only / paywall bawaan Ghost */
.konten .gh-post-upgrade-cta-content {
  border-radius: var(--radius-card);
  background: var(--gradasi-kosong) !important;
  color: var(--color-ink) !important;
}
.konten .gh-post-upgrade-cta-content a.gh-btn { background: var(--color-ink) !important; color: var(--color-surface) !important; border-radius: var(--radius-btn); }

/* ---- Baca juga ----------------------------------------------------------- */
.lanjut {
  margin-top: var(--space-2xl); padding-block: var(--space-2xl);
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--band-cyan) 100%);
}
.lanjut__judul { margin: 0 0 var(--space-lg); font-size: var(--text-xl); }

/* ---- Kaki ---------------------------------------------------------------- */
.kaki {
  position: relative;
  background: var(--color-surface);
  padding-block: var(--space-xl);
}
.kaki::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradasi-garis);
}
.kaki__dalam { display: grid; gap: var(--space-lg); }
.kaki__merek img { height: 40px; width: auto; }
.kaki__merek p { margin: var(--space-xs) 0 0; max-width: 28rem; color: var(--color-ink-2); font-size: var(--text-sm); }
.kaki__nav .nav { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.kaki__nav a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.kaki__nav a:hover { color: var(--color-ink); text-decoration: underline; }
.kaki__hak { margin: 0; font-size: var(--text-xs); color: var(--color-ink-2); }
@media (min-width: 48rem) {
  .kaki__dalam { grid-template-columns: 1fr auto; align-items: end; }
  .kaki__hak { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}