/* Onchain Collective, tema C Blok Data. Warna hanya lewat token; mode Pagi menimpa token yang sama. */

/* Font: @font-face Archivo ada di default.hbs, supaya URL-nya sama dengan URL preload (F01 R5.1; F03 task 11). */

/* Token. Satu-satunya tempat nilai warna boleh ditulis. Nilai dari .claude/rules/design-system.md. */
:root {
  --oc-bg: #13100E;
  --oc-surface: #221E1C;
  --oc-strong: #FFFFFF;
  --oc-on-strong: #13100E;
  --oc-on-strong-2: #646261;
  --oc-text: #FFFFFF;
  --oc-text-2: #A7A5A5;
  --oc-line: #3A3634;
  --oc-border: #8C8988;
  --oc-accent: #CCFC7C;
  --oc-alert: #FC3024;
  --oc-up: #CCFC7C;
  --oc-down: #FF6B5E;
  --oc-meter-up: #CCFC7C;
  --oc-meter-down: #FC3024;
  --oc-meter-empty: #3A3634;
  --oc-focus: #CCFC7C;
  --oc-focus-ring: #13100E;
  --oc-ink: #13100E;

  --oc-p-kripto: #FFD166;
  --oc-p-makro: #8EC5FF;
  --oc-p-keuangan: #C9B6FF;
  --oc-p-teknologi: #7FE7DC;
  --oc-p-geopolitik: #FFB4A2;

  /* Font sistem di belakang Archivo juga dipakai untuk ▲ dan ▼, yang tidak ada di Archivo. */
  --oc-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oc-gap: 4px;
  --oc-lebar-isi: 1328px;
  --oc-lebar-baca: 680px;
  --oc-target: 44px;

  color-scheme: dark;
}

/* Tanpa JavaScript, mode mengikuti perangkat. Blok ini harus sama persis dengan blok Pagi di bawahnya. */
@media (prefers-color-scheme: light) {
  :root:not([data-mode="malam"]) {
    --oc-bg: #FFFFFF;
    --oc-surface: #F3F2F1;
    --oc-strong: #13100E;
    --oc-on-strong: #FFFFFF;
    --oc-on-strong-2: #A7A5A5;
    --oc-text: #13100E;
    --oc-text-2: #646261;
    --oc-line: #D3D2D2;
    --oc-border: #7A7776;
    --oc-up: #3A6B00;
    --oc-down: #C41E12;
    --oc-meter-up: #5A8F00;
    --oc-meter-empty: #D3D2D2;
    --oc-focus: #13100E;
    --oc-focus-ring: #FFFFFF;
    color-scheme: light;
  }
}

:root[data-mode="pagi"] {
  --oc-bg: #FFFFFF;
  --oc-surface: #F3F2F1;
  --oc-strong: #13100E;
  --oc-on-strong: #FFFFFF;
  --oc-on-strong-2: #A7A5A5;
  --oc-text: #13100E;
  --oc-text-2: #646261;
  --oc-line: #D3D2D2;
  --oc-border: #7A7776;
  --oc-up: #3A6B00;
  --oc-down: #C41E12;
  --oc-meter-up: #5A8F00;
  --oc-meter-empty: #D3D2D2;
  --oc-focus: #13100E;
  --oc-focus-ring: #FFFFFF;
  color-scheme: light;
}

/* Dasar */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--oc-bg);
  color: var(--oc-text);
  font-family: var(--gh-font-body, var(--oc-font));
}
h1, h2, h3, h4 {
  font-family: var(--gh-font-heading, var(--oc-font));
}
a { color: inherit; }
img, svg, video { max-width: 100%; }

/* Tata letak */
.oc-halaman {
  display: flex;
  flex-direction: column;
  gap: var(--oc-gap);
  max-width: var(--oc-lebar-isi);
  margin: 0 auto;
  padding: 0 0 32px;
}
.oc-utama { display: flex; flex-direction: column; gap: var(--oc-gap); }

/* Header */
.oc-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 8px 0 16px;
  flex-wrap: wrap;
}

/* Logo per mode. Slot Pagi tersembunyi kecuali mode Pagi, termasuk tanpa JavaScript lewat media query. */
.oc-logo {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: var(--oc-target);
  text-decoration: none;
}
.oc-logo img { height: 20px; width: auto; }
.oc-logo-teks { font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; }
/* display hanya diatur di kelas slot, supaya aturan ukuran gambar tidak mengalahkannya. */
.oc-logo-malam { display: block; }
.oc-logo-pagi { display: none; }
:root[data-mode="pagi"] .oc-logo-malam { display: none; }
:root[data-mode="pagi"] .oc-logo-pagi { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-mode="malam"]) .oc-logo-malam { display: none; }
  :root:not([data-mode="malam"]) .oc-logo-pagi { display: block; }
}

/* Navigasi utama. Di HP tampil sebagai daftar di baris sendiri di bawah logo. */
.oc-nav { flex: 1 0 100%; order: 1; }
.oc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.oc-nav a {
  display: flex;
  align-items: center;
  min-height: var(--oc-target);
  min-width: var(--oc-target);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
/* Penanda halaman sekarang berupa garis, bukan hanya warna (R2.6): kiri di HP, bawah di desktop. */
.oc-nav .nav-current a { box-shadow: inset 3px 0 0 var(--oc-text); padding-left: 10px; }

/* Tombol Menu dan panel navigasi di HP. Tanpa JavaScript tombol tersembunyi dan navigasi tampil langsung (R2.5). */
.oc-menu { display: none; }
.oc-js .oc-menu {
  display: block;
  flex: 0 0 auto;
  height: var(--oc-target);
  padding: 0 12px;
  border: 0;
  background: var(--oc-strong);
  color: var(--oc-on-strong);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.oc-js .oc-nav { display: none; }
.oc-js .oc-nav[data-terbuka] {
  display: block;
  position: absolute;
  left: 4px;
  right: 4px;
  top: 56px;
  z-index: 5;
  background: var(--oc-bg);
  border: 1px solid var(--oc-line);
  padding: 8px 12px 12px;
}

/* Pemilih mode (R1.4). Satu bentuk per lebar layar, keduanya hanya tampil kalau JavaScript berjalan. */
.oc-mode,
.oc-tombol-ikon { display: none; }
.oc-js .oc-tombol-ikon {
  flex: 0 0 var(--oc-target);
  width: var(--oc-target);
  height: var(--oc-target);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--oc-border);
  color: var(--oc-text);
  cursor: pointer;
}
.oc-tombol-ikon .oc-ikon-bulan { display: none; }
:root[data-mode="pagi"] .oc-tombol-ikon .oc-ikon-bulan { display: block; }
:root[data-mode="pagi"] .oc-tombol-ikon .oc-ikon-matahari { display: none; }
.oc-mode { border: 1px solid var(--oc-border); }
.oc-mode button {
  height: var(--oc-target);
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--oc-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.oc-mode button[aria-pressed="true"] { background: var(--oc-strong); color: var(--oc-on-strong); }

/* Tombol Gabung Discord: tombol utama berlatar --oc-strong; lime hanya untuk sorotan dan naik. */
.oc-cta { display: none; }

/* Slot strip Pasar: tinggi mengikuti strip prototipe supaya F02 tidak menggeser tata letak. */
.oc-strip-slot { margin: 0 4px; min-height: 62px; background: var(--oc-surface); }

/* Pasar (F02). Strip di semua halaman kecuali Home (R3.1), dengan tinggi slot F01 di setiap keadaan (R3.4): di HP
   dua baris, judul dan status di atas, daftar yang bisa digeser di bawah, seperti C-Komponen; mulai 1024px satu
   baris. Wadah aset yang tidak ditampilkan di strip memakai display: none, karena baris strip bertinggi tetap. */
.oc-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 2px 12px;
  padding: 6px 12px;
}
.oc-strip-judul { margin: 0; line-height: 16px; color: var(--oc-text-2); }
/* Status: teks dengan kotak 8px, terisi lime hanya saat Live. Teks tanpa JavaScript dan dengan JavaScript dipilih
   lewat kelas .oc-js dari F01, sejak gambar pertama (R3.2). */
.oc-pasar-status { display: flex; align-items: center; gap: 6px; margin: 0; line-height: 16px; color: var(--oc-text-2); white-space: nowrap; }
.oc-pasar-status::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border: 1px solid currentColor; }
[data-keadaan="live"] > .oc-pasar-status::before { background: var(--oc-meter-up); border-color: var(--oc-meter-up); }
.oc-strip .oc-pasar-status { justify-self: end; }
:root:not(.oc-js) .oc-dengan-js,
.oc-js .oc-tanpa-js { display: none; }
/* position: relative membuat daerah geser menjadi blok penampung teks pembaca layar (.oc-sr, position: absolute) di
   dalamnya. Tanpa itu, "naik" dan "turun" di ujung daftar tidak terpotong overflow-x dan melebarkan halaman 360px
   menjadi 742px saat harga tampil (R3.4). */
.oc-strip-gulir {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 14px;
  line-height: 24px;
}
.oc-strip-gulir::-webkit-scrollbar { display: none; }
.oc-strip-daftar { display: flex; gap: 20px; margin: 0; }
.oc-strip-daftar > div { display: flex; align-items: baseline; gap: 6px; }
.oc-strip-daftar dt { font-weight: 600; color: var(--oc-text-2); }
.oc-strip-daftar dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.oc-strip-daftar .oc-strip-tanggal,
.oc-strip-sumber { margin: 0; font-size: 12px; font-weight: 400; color: var(--oc-text-2); }
.oc-strip [data-tampil="tidak"],
:root:not(.oc-js) .oc-strip [data-aset] { display: none; }
/* Perubahan: hanya ▲ dan ▼ yang berwarna; teksnya tetap warna teks (C-Komponen). */
.oc-naik > [aria-hidden] { color: var(--oc-up); }
.oc-turun > [aria-hidden] { color: var(--oc-down); }

/* Footer */
.oc-footer { background: var(--oc-bg); }
/* Pita pola kotak: ubin SVG sebagai mask, warnanya dari --oc-line sehingga ikut mode. Tidak pernah jadi latar teks. */
.oc-pola {
  height: 24px;
  margin: 12px 4px 0;
  background-color: var(--oc-line);
  -webkit-mask-image: url("../images/pola-kotak.svg");
  mask-image: url("../images/pola-kotak.svg");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 240px 24px;
  mask-size: 240px 24px;
}

.oc-footer-isi { padding: 20px 16px 32px; }
.oc-footer-logo img { height: 16px; width: auto; }
.oc-footer-deskripsi { display: none; }
.oc-footer-nav ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  font-size: 15px;
}
.oc-footer-nav a {
  display: flex;
  align-items: center;
  min-height: var(--oc-target);
  text-decoration: underline;
}

.oc-ikuti { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc-ikuti-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--oc-text-2);
}
.oc-ikuti a {
  min-height: var(--oc-target);
  padding: 0 14px;
  display: flex;
  align-items: center;
  border: 1px solid var(--oc-border);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.oc-footer-catatan { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--oc-text-2); }
.oc-footer-catatan p { margin: 0; }
.oc-footer-catatan p + p { margin-top: 6px; }

/* Blok: dipakai fitur lain (F03 sampai F11). Di HP bermargin samping 4px dan berpadding 20px 12px. */
.oc-blok { margin: 0 4px; padding: 20px 12px; }
.oc-blok--kuat { background: var(--oc-strong); color: var(--oc-on-strong); }

/* Kepala halaman daftar (F07, keputusan 9.6): blok .oc-blok dengan label, h1, dan deskripsi. Warna pilar dengan teks
   --oc-ink (R1.3), kuat untuk tag lain (R1.6), dan surface untuk halaman koleksi (Keputusan 1). */
.oc-kepala-label { margin: 0 0 8px; }
.oc-kepala-judul { margin: 0; font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.oc-kepala-deskripsi { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.oc-kepala[data-warna="biasa"] { background: var(--oc-surface); color: var(--oc-text); }
.oc-kepala[data-warna="biasa"] .oc-kepala-deskripsi { color: var(--oc-text-2); }
.oc-kepala[data-warna="kuat"] { background: var(--oc-strong); color: var(--oc-on-strong); }
.oc-kepala[data-warna="kuat"] .oc-kepala-deskripsi { color: var(--oc-on-strong-2); }
.oc-kepala[data-warna="kripto"] { background: var(--oc-p-kripto); }
.oc-kepala[data-warna="makro"] { background: var(--oc-p-makro); }
.oc-kepala[data-warna="keuangan"] { background: var(--oc-p-keuangan); }
.oc-kepala[data-warna="teknologi"] { background: var(--oc-p-teknologi); }
.oc-kepala[data-warna="geopolitik"] { background: var(--oc-p-geopolitik); }
.oc-kepala:is([data-warna="kripto"], [data-warna="makro"], [data-warna="keuangan"], [data-warna="teknologi"], [data-warna="geopolitik"]) { color: var(--oc-ink); }
/* Keadaan kosong halaman daftar (F07 R1.5, F06 R1.6, F05 R3.2). */
.oc-kosong { margin-top: 0; margin-bottom: 0; background: var(--oc-surface); font-size: 15px; line-height: 1.5; }
.oc-kosong a { font-weight: 600; }

/* Daftar kartu di halaman koleksi (F12 R1.10): kartu F03 bertumpuk di HP, tiga kolom mulai 1024px. */
.oc-daftar-kartu { margin: 0 4px; display: grid; gap: var(--oc-gap); }

/* Navigasi halaman daftar (kerangka minimal; tampilan daftar dikerjakan F03 dan F07) */
.oc-halaman-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.oc-halaman-nav a {
  min-height: var(--oc-target);
  min-width: var(--oc-target);
  padding: 0 16px;
  display: flex;
  align-items: center;
  border: 1px solid var(--oc-border);
  text-decoration: none;
  font-weight: 600;
}

/* Label mono (design-system): label, meta, dan waktu di blok dan kartu. */
.oc-mono {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Pilar: kotak 8px berwarna pilar sebelum nama, di baris meta (design-system). */
.oc-pilar { display: inline-flex; align-items: center; gap: 6px; }
.oc-pilar::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; background: var(--oc-pilar-warna); }
.oc-pilar[data-pilar="kripto"] { --oc-pilar-warna: var(--oc-p-kripto); }
.oc-pilar[data-pilar="makro"] { --oc-pilar-warna: var(--oc-p-makro); }
.oc-pilar[data-pilar="keuangan"] { --oc-pilar-warna: var(--oc-p-keuangan); }
.oc-pilar[data-pilar="teknologi"] { --oc-pilar-warna: var(--oc-p-teknologi); }
.oc-pilar[data-pilar="geopolitik"] { --oc-pilar-warna: var(--oc-p-geopolitik); }

/* Kartu (F03 R6.3, R6.4). Tautan judul diperluas ke seluruh kartu lewat ::after; garis fokus digambar di kartu,
   bukan di teks judul (design F03, Keputusan 4). */
.oc-kartu { position: relative; padding: 14px 12px; background: var(--oc-surface); }
.oc-kartu-meta { margin: 0; color: var(--oc-text-2); }
.oc-kartu-judul { margin: 6px 0 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.oc-kartu-judul a { text-decoration: none; }
.oc-kartu-judul a::after { content: ""; position: absolute; inset: 0; }
.oc-kartu-intinya { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--oc-text-2); }
.oc-kartu:focus-within {
  outline: 3px solid var(--oc-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--oc-focus-ring);
}
.oc-kartu a:focus-visible { outline: none; box-shadow: none; }

/* Home (F03). Satu kolom di HP; grid desktop di bagian Desktop. Pesan "Could not load content" dari {{#get}} yang
   dihentikan Ghost disembunyikan, sehingga blok itu diperlakukan sebagai blok tanpa isi (R1.3). */
.oc-home { display: flex; flex-direction: column; gap: var(--oc-gap); }
.oc-home [data-aborted-get-helper] { display: none; }
/* Breaking dan Explainer memakai pola kartu (Keputusan 4): judul h2 bertaut diperluas ke seluruh blok lewat ::after,
   dan garis fokus digambar di blok lewat :focus-within, bukan di teks judul. */
.oc-breaking, .oc-explainer { position: relative; }
.oc-breaking-judul a, .oc-explainer-judul a { text-decoration: none; }
.oc-breaking-judul a::after, .oc-explainer-judul a::after { content: ""; position: absolute; inset: 0; }
.oc-breaking:focus-within, .oc-explainer:focus-within {
  outline: 3px solid var(--oc-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--oc-focus-ring);
}
.oc-breaking a:focus-visible, .oc-explainer a:focus-visible { outline: none; box-shadow: none; }
/* Breaking (R2): blok merah dengan teks --oc-ink. Atribut hidden dari skrip sebaris harus menang atas display. */
.oc-breaking { display: block; background: var(--oc-alert); color: var(--oc-ink); }
.oc-breaking[hidden] { display: none; }
.oc-breaking-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.oc-breaking-judul { margin: 8px 0 0; font-size: 21px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
/* Daily Brief (R3.1): blok kuat dengan tombol utama dan panah ganda di kotak lime (design-system). */
.oc-home-brief-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.oc-home-brief-judul { margin: 14px 0 0; font-size: 27px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.oc-home-brief-judul a { text-decoration: none; }
.oc-home-brief-intinya { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.oc-tombol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 10px 0 14px;
  background: var(--oc-on-strong);
  color: var(--oc-strong);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.oc-panah { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--oc-accent); color: var(--oc-ink); }
/* Angka hari ini (R5.1): angka besar bersorot lime dengan teks --oc-ink. Judul panjang dibungkus, tanpa geser samping. */
.oc-angka { background: var(--oc-surface); }
.oc-angka-judul { margin: 0; color: var(--oc-text-2); }
.oc-angka-besar { margin: 12px 0 0; font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oc-angka-besar mark { padding: 0 6px; background: var(--oc-accent); color: var(--oc-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.oc-angka-kalimat { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.oc-angka-catatan { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--oc-text-2); }
.oc-angka-catatan a { color: var(--oc-text); font-weight: 600; }
/* Live (R6.1): judul bagian kapital (design-system), daftar bergaris pemisah, setiap butir satu tautan. */
.oc-live { background: var(--oc-surface); padding-bottom: 6px; }
.oc-live-kepala { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.oc-judul-bagian { margin: 0; font-size: 22px; line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; }
.oc-tautan-kecil { display: inline-flex; align-items: center; min-height: var(--oc-target); min-width: var(--oc-target); font-size: 14px; font-weight: 600; }
.oc-live-daftar { list-style: none; margin: 6px 0 0; padding: 0; }
.oc-live-daftar li { border-top: 1px solid var(--oc-line); }
.oc-live-daftar a { display: block; padding: 12px 0; text-decoration: none; }
.oc-live-meta { display: block; color: var(--oc-text-2); }
.oc-live-judul { display: block; margin-top: 4px; font-size: 16px; line-height: 1.35; font-weight: 600; }
/* Explainer (R6.2): blok lime dengan teks --oc-ink. Motif dari kotak-jenjang.svg sebagai mask berwarna --oc-ink,
   dibalik ke pojok kanan bawah; judul dibatasi supaya tidak menimpa motif. Label dan judul tanpa position, supaya
   ::after tautan mengisi seluruh blok; motif tidak menangkap ketukan, jadi pojoknya tetap mengenai tautan. */
.oc-explainer { overflow: hidden; display: block; min-height: 160px; background: var(--oc-accent); color: var(--oc-ink); }
.oc-explainer-label { display: flex; align-items: center; margin: 0; }
.oc-kotak-sebaris { display: inline-block; width: 1.05em; height: 0.6em; margin-left: 0.3em; background: currentColor; }
.oc-explainer-judul { max-width: min(70%, calc(100% - 120px)); margin: 8px 0 0; font-size: 21px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.oc-explainer-motif {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 120px;
  height: 120px;
  background: var(--oc-ink);
  -webkit-mask: url("../images/kotak-jenjang.svg") center / contain no-repeat;
  mask: url("../images/kotak-jenjang.svg") center / contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
/* Per pilar (R6.3): judul bagian terlihat di atas latar --oc-surface, bergaya sama dengan judul Live; kartu bertumpuk
   di HP, sebaris di desktop. Bagian tanpa kartu disembunyikan (R1.3). */
.oc-pilar-blok { margin: 0 4px; display: flex; flex-direction: column; gap: var(--oc-gap); }
.oc-pilar-judul { padding: 20px 12px; background: var(--oc-surface); }
.oc-pilar-blok:not(:has(.oc-kartu)) { display: none; }
.oc-pilar-baris { display: flex; flex-direction: column; gap: var(--oc-gap); }
/* Blok Pasar Home (F03 R4, kontrak F02): status selebar blok, dua kolom kotak bertinggi tetap, lalu keterangan.
   Kotak tetap berlatar saat isinya disembunyikan (R3.2), dan baris perubahan punya tinggi sendiri, supaya data yang
   datang tidak menggeser apa pun (F03 R7.3). */
.oc-pasar { margin: 0 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-gap); }
.oc-pasar > .oc-pasar-status { grid-column: 1 / -1; padding: 10px 12px; background: var(--oc-surface); }
.oc-pasar-kotak { min-height: 104px; padding: 14px 12px; background: var(--oc-surface); }
.oc-pasar-kotak > * { margin: 0; }
.oc-pasar [data-tampil="tidak"] > *,
:root:not(.oc-js) .oc-pasar [data-aset] > * { visibility: hidden; }
.oc-pasar-label { font-size: 13px; line-height: 18px; color: var(--oc-text-2); }
.oc-pasar-tanggal:has([data-ihsg-tanggal]:empty) { display: none; }
.oc-pasar-kotak .oc-pasar-nilai { margin-top: 8px; font-size: 20px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-pasar-kotak .oc-pasar-ubah { margin-top: 6px; min-height: 18px; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-meter { display: flex; gap: 2px; margin-top: 6px; }
.oc-meter span { width: 10px; height: 10px; background: var(--oc-meter-empty); }
.oc-meter[data-arah="naik"] span[data-isi] { background: var(--oc-meter-up); }
.oc-meter[data-arah="turun"] span[data-isi] { background: var(--oc-meter-down); }
.oc-pasar-keterangan { grid-column: 1 / -1; margin: 0; padding: 10px 12px; background: var(--oc-surface); font-size: 12px; line-height: 1.5; color: var(--oc-text-2); }

/* Artikel (F04). Satu kolom; mulai 1024px paling lebar 840px di tengah, isi 680px (design F04, Keputusan 3). */
.oc-artikel { display: flex; flex-direction: column; gap: var(--oc-gap); }
.oc-artikel-kepala { overflow-wrap: anywhere; }
.oc-remah { font-size: 13px; line-height: 20px; color: var(--oc-on-strong-2); }
/* Baris label: label, pilar, dan status Flash. Status berupa teks, jadi tidak bergantung pada warna (F04 R9). */
.oc-artikel-label { margin: 14px 0 0; line-height: 22px; }
.oc-status { display: inline-block; margin-left: 12px; padding: 0 6px; line-height: 20px; }
.oc-status--berkembang { background: var(--oc-alert); color: var(--oc-ink); }
.oc-status--terkonfirmasi { border: 1px solid currentColor; }
.oc-byline { margin: 14px 0 0; font-size: 14px; line-height: 20px; color: var(--oc-on-strong-2); }
.oc-byline a { color: var(--oc-on-strong); font-weight: 600; }
.oc-waktu { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--oc-on-strong-2); }
.oc-waktu a { color: var(--oc-on-strong); font-weight: 600; text-align: left; }
.oc-artikel-judul { margin: 10px 0 0; font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
/* Tautan sebaris tema di kepala dan akhir artikel: kotak sentuh 44px lewat padding yang dinetralkan margin,
   sehingga tinggi baris tidak berubah (F04 R1.5, teknik F01 task 18). */
.oc-remah a,
.oc-sebaris {
  display: inline-block;
  min-width: var(--oc-target);
  padding: 12px 0;
  margin: -12px 0;
  line-height: 20px;
  text-align: center;
  color: inherit;
}
.oc-remah a { color: var(--oc-on-strong); }

/* Bersponsor (F04 R6.1): kotak bergaris tepi sebelum isi. "pihak lain" hanya tampil kalau nama sponsor tidak ada. */
.oc-bersponsor { border: 2px solid var(--oc-text); font-size: 15px; line-height: 1.5; }
.oc-sponsor-nama ~ .oc-sponsor-cadangan { display: none; }

/* Intinya (F04 R3.1) dan gambar utama (R5). */
.oc-intinya { background: var(--oc-surface); }
.oc-intinya-judul { margin: 0; color: var(--oc-text-2); }
.oc-intinya p { margin: 8px 0 0; font-size: 17px; line-height: 1.55; }
/* Baris ajakan Discord di bawah Intinya (F04 R8.2): satu paragraf, tautan bergaris bawah dengan target 44px. */
.oc-blok.oc-ajakan { padding-top: 12px; padding-bottom: 12px; font-size: 15px; line-height: 20px; color: var(--oc-text-2); }
.oc-ajakan a { color: var(--oc-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.oc-gambar-utama { margin: 0 4px; }
.oc-gambar-utama img { display: block; width: 100%; height: auto; }
.oc-gambar-utama figcaption { padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--oc-text-2); background: var(--oc-surface); }

.oc-konten { background: var(--oc-surface); font-size: 17px; line-height: 1.65; overflow-wrap: break-word; }
.oc-konten > * { max-width: var(--oc-lebar-baca); margin-left: auto; margin-right: auto; }
.oc-konten > :first-child { margin-top: 0; }
.oc-konten > :last-child { margin-bottom: 0; }
.oc-konten a { text-underline-offset: 2px; }
.oc-konten ul, .oc-konten ol { padding-left: 1.3em; }
/* Disclosure dan kebijakan (F04 R4.4): blok kuat sesudah isi. */
.oc-disclosure { font-size: 14px; line-height: 20px; }
.oc-disclosure h2 { margin: 0; font-size: 15px; line-height: 1.3; }
.oc-disclosure p { margin: 8px 0 0; }
.oc-disclosure p + p { color: var(--oc-on-strong-2); }
.oc-disclosure a { color: var(--oc-on-strong); font-weight: 600; }

/* Bagikan (F04 R7): tiga kontrol sebaris setinggi 48px. Tombol Salin tautan hanya dengan JavaScript (R7.4). */
.oc-bagikan { margin: 0 4px; display: flex; gap: var(--oc-gap); }
.oc-bagikan > * {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  background: var(--oc-surface);
  color: var(--oc-text);
  font: 600 14px var(--oc-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.oc-bagikan > .oc-js-saja { display: none; }
.oc-js .oc-bagikan > .oc-js-saja { display: flex; }
.oc-bagikan [data-tersalin] { background: var(--oc-strong); color: var(--oc-on-strong); }
.oc-centang { display: none; flex: 0 0 auto; }
[data-tersalin] .oc-centang { display: block; }
.oc-salin-cadangan { background: var(--oc-surface); }
.oc-salin-cadangan[hidden] { display: none; }
.oc-salin-cadangan label { display: block; font-size: 14px; font-weight: 600; }
.oc-salin-cadangan input {
  width: 100%;
  min-height: var(--oc-target);
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid var(--oc-border);
  background: var(--oc-bg);
  color: var(--oc-text);
  font: 15px var(--oc-font);
}

/* Judul bagian di isi: kapital (design-system). Bagian dari snippet F14 dikenali dari id judul yang dibuat Ghost,
   bukan dipindah (F04 R4.5): diberi garis pemisah, dan Catatan koreksi bergaris kiri merah seperti C-Komponen. */
.oc-konten h2 { margin-top: 1.6em; margin-bottom: 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
.oc-konten h2 + * { margin-top: 0.6em; }
.oc-konten :is(h2#sumber, h2#disclosure-penulis, h2#catatan-perubahan) { padding-top: 16px; border-top: 1px solid var(--oc-line); font-size: 13px; letter-spacing: 0.05em; }
.oc-konten :is(h2#catatan-koreksi, h2#catatan-koreksi + ul) { padding-left: 12px; border-left: 4px solid var(--oc-alert); }
.oc-konten h2#catatan-koreksi { padding-top: 4px; font-size: 13px; letter-spacing: 0.05em; }
.oc-konten h2#catatan-koreksi + ul { padding-left: calc(12px + 1.3em); padding-bottom: 4px; }
.oc-konten :is(h2#sumber, h2#disclosure-penulis, h2#catatan-perubahan, h2#catatan-koreksi) ~ * { font-size: 15px; }

/* Arsip brief (F05 R3.2): butir di blok --oc-surface dengan celah 4px; mulai 1024px selebar kolom isi 840px. */
.oc-arsip-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--oc-gap); }
.oc-butir-brief { background: var(--oc-surface); }
.oc-butir-brief-tanggal { margin: 0; color: var(--oc-text-2); }
.oc-butir-brief-judul { margin: 8px 0 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.oc-butir-brief-judul a { display: block; padding: 10px 0; margin: -10px 0; text-decoration: none; }
.oc-butir-brief-intinya { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--oc-text-2); }

/* Live (F06): legenda, judul hari WIB, butir yang bisa diketuk, dan tautan halaman bergaya tombol. Kelas halaman memakai
   awalan oc-kabar-, karena oc-live-* sudah dipakai blok Live Home (design F06, Riwayat). */
.oc-kabar-legenda { background: var(--oc-surface); font-size: 13px; line-height: 20px; color: var(--oc-text-2); }
.oc-kabar-legenda p { margin: 0; }
.oc-kabar-legenda p + p { margin-top: 6px; }
.oc-kabar-legenda .oc-status, .oc-kabar-penanda .oc-status:first-child { margin-left: 0; }
.oc-kabar-daftar { list-style: none; margin: 0 4px; padding: 0; display: flex; flex-direction: column; gap: var(--oc-gap); }
.oc-kabar-butir { display: flex; flex-direction: column; gap: var(--oc-gap); }
.oc-kabar-hari { margin: 8px 0 0; padding: 0 12px; font-size: 12px; line-height: 16px; color: var(--oc-text-2); }
.oc-hari-sama > .oc-kabar-hari { display: none; }
.oc-kabar-isi { position: relative; display: flex; gap: 12px; min-height: var(--oc-target); padding: 14px 12px; background: var(--oc-surface); }
.oc-kabar-jam { flex: 0 0 48px; line-height: 20px; color: var(--oc-text-2); }
.oc-kabar-teks { flex: 1 1 auto; min-width: 0; }
.oc-kabar-penanda { margin: 0; line-height: 20px; }
.oc-kabar-penanda .oc-label { margin-left: 12px; }
.oc-kabar-penanda .oc-label:first-child { margin-left: 0; }
.oc-kabar-judul { margin: 6px 0 0; font-size: 16px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.oc-kabar-judul a { text-decoration: none; }
.oc-kabar-judul a::after { content: ""; position: absolute; inset: 0; }
.oc-kabar-isi:focus-within {
  outline: 3px solid var(--oc-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--oc-focus-ring);
}
.oc-kabar-isi a:focus-visible { outline: none; box-shadow: none; }
.oc-kabar-halaman { margin: 0 4px; display: flex; flex-direction: column; gap: 8px; }
.oc-tombol-halaman {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--oc-border);
  color: var(--oc-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Penulis (F08): kepala kuat dengan foto dan tautan Profil, lalu blok kepemilikan aset. */
.oc-penulis-baris { display: flex; align-items: center; gap: 12px; }
.oc-penulis-foto { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; background: var(--oc-surface); }
.oc-penulis-profil { margin: 10px 0 0; }
.oc-penulis-profil a { display: inline-flex; align-items: center; min-height: var(--oc-target); min-width: var(--oc-target); color: var(--oc-on-strong); font-weight: 600; }
.oc-penulis-aset { background: var(--oc-surface); }
.oc-penulis-aset-tautan { display: inline-flex; align-items: center; min-height: var(--oc-target); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; text-decoration: none; }
.oc-penulis-aset-panah { margin-left: 6px; }
.oc-penulis-aset p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--oc-text-2); }

/* Halaman kepercayaan (F09): label Draf dan tanggal di kepala halaman statis. */
.oc-statis-kepala { overflow-wrap: anywhere; }
.oc-label--draf { display: inline-block; margin: 0 0 10px; padding: 0 6px; line-height: 20px; border: 1px solid var(--oc-border); }
.oc-statis-judul { margin: 0; font-size: 30px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.oc-statis-tanggal { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--oc-text-2); }
.oc-statis-kepala { background: var(--oc-surface); }
.oc-blok.oc-koreksi-terakhir { margin-top: 0; margin-bottom: 0; padding-top: 12px; padding-bottom: 12px; background: var(--oc-surface); font-size: 14px; line-height: 20px; color: var(--oc-text-2); }
/* Nomor bagian Kebijakan Redaksi 01 sampai 06 dari CSS, bukan dari teks judul, supaya id dari Ghost tetap (F09 R3.1). */
.page-kebijakan-redaksi .gh-content { counter-reset: bagian; }
.page-kebijakan-redaksi .gh-content h2::before { counter-increment: bagian; content: counter(bagian, decimal-leading-zero) " "; color: var(--oc-text-2); }

/* Komunitas (F11 R1): blok kuat dengan dua label, judul kapital, contoh kiriman di Home, tombol utama dan tombol garis.
   Mulai 1024px dua kolom di dalam blok (design F11, Tata letak). */
.oc-kom-label { margin: 0; }
.oc-kom-label .oc-kotak-sebaris { margin: 0 0.45em; }
.oc-kom-judul { margin: 10px 0 0; font-size: 21px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.oc-kom-penjelasan { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--oc-on-strong-2); }
.oc-kom-contoh { margin: 16px 0 0; padding: 12px; border: 1px solid var(--oc-on-strong-2); }
.oc-kom-contoh figcaption { display: flex; justify-content: space-between; gap: 8px; color: var(--oc-on-strong-2); }
.oc-kom-contoh-judul { margin: 6px 0 0; font-size: 15px; line-height: 1.35; font-weight: 600; }
.oc-kom-contoh-intinya { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.oc-tombol--garis { margin-top: 8px; background: transparent; color: var(--oc-on-strong); border: 1px solid var(--oc-on-strong-2); }

/* Aksesibilitas */
.oc-lewati {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--oc-strong);
  color: var(--oc-on-strong);
  font-weight: 600;
}
.oc-lewati:focus { top: 8px; }

/* Garis fokus 3px dengan cincin 2px yang memisahkannya dari komponen berwarna (R4.2). */
:focus-visible {
  outline: 3px solid var(--oc-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--oc-focus-ring);
}
/* Di blok kuat, lime tidak terlihat di atas putih: garis ikut warna teks blok. */
.oc-blok--kuat :focus-visible,
.oc-kom :focus-visible,
.oc-kepala[data-warna="kuat"] :focus-visible {
  outline-color: var(--oc-on-strong);
  box-shadow: 0 0 0 2px var(--oc-strong);
}
.oc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kartu Ghost */
.gh-content .kg-width-wide { max-width: 1040px; }
.gh-content .kg-width-full { max-width: none; }

/* Desktop */
@media (min-width: 1024px) {
  .oc-halaman { padding: 0 24px 40px; }
  .oc-header { min-height: 72px; padding: 0; gap: 8px 24px; }
  .oc-nav,
  .oc-js .oc-nav,
  .oc-js .oc-nav[data-terbuka] {
    display: block;
    flex: 1 1 520px;
    order: 0;
    position: static;
    border: 0;
    padding: 0;
    background: none;
  }
  .oc-js .oc-menu { display: none; }
  .oc-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 2px; }
  .oc-nav a { padding: 0 10px; font-size: 15px; }
  .oc-nav .nav-current a { box-shadow: inset 0 -3px 0 var(--oc-text); padding-left: 10px; }
  .oc-logo { flex: 0 0 auto; }
  .oc-logo img { height: 24px; }
  .oc-js .oc-tombol-ikon { display: none; }
  .oc-js .oc-mode { display: flex; }
  .oc-cta {
    display: flex;
    align-items: center;
    height: var(--oc-target);
    padding: 0 18px;
    background: var(--oc-strong);
    color: var(--oc-on-strong);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
  }
  .oc-blok { margin: 0; padding: 24px; }
  .oc-strip-slot { margin: 0; min-height: 65.5px; }
  /* Satu baris: judul dan status tidak menyusut, daftar mengisi sisanya, dan keterangan sumber dibungkus dua baris
     supaya kelima aset dan "Powered by CoinGecko" muat tanpa geser mulai sekitar 1366px. Di bawahnya daftar masih
     bisa digeser di dalam strip. */
  .oc-strip { display: flex; align-items: center; gap: 0 12px; padding: 0 16px; }
  .oc-strip-judul, .oc-strip .oc-pasar-status { flex: 0 0 auto; }
  .oc-strip-gulir { flex: 1 1 auto; gap: 20px; }
  .oc-strip-daftar { gap: 18px; }
  .oc-strip-sumber { flex: 0 0 12.5em; margin-left: auto; white-space: normal; line-height: 16px; }
  /* Grid Home (F03 R1.2): kolom kiri dua kali kolom kanan. Blok ditempatkan per kolom dengan penempatan dense,
     tanpa grid-template-areas, supaya blok yang tidak dirender tidak meninggalkan baris atau sel kosong (R1.3). */
  .oc-home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-auto-flow: row dense; }
  .oc-breaking, .oc-pilar-blok { grid-column: 1 / -1; }
  .oc-home-brief, .oc-live { grid-column: 1; }
  .oc-pasar, .oc-angka, .oc-explainer { grid-column: 2; }
  .oc-live { grid-row: span 2; }
  .oc-breaking-judul { font-size: 26px; }
  /* Blok Pasar mengisi sel di samping Daily Brief: kotak membagi sisa tinggi, status dan keterangan tetap. */
  .oc-pasar { margin: 0; grid-template-rows: auto minmax(104px, 1fr) minmax(104px, 1fr) auto; }
  .oc-pasar-kotak { padding: 18px 16px; }
  .oc-pasar-kotak .oc-pasar-nilai { font-size: 26px; line-height: 30px; }
  .oc-pilar-blok { margin: 0; }
  .oc-pilar-judul { padding: 24px; }
  .oc-pilar-baris { flex-direction: row; }
  .oc-daftar-kartu { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-pilar-baris > .oc-kartu { flex: 1 1 0; min-width: 0; }
  .oc-explainer { min-height: 200px; }
  .oc-explainer-judul { font-size: 26px; }
  .oc-home-brief { padding: 32px; }
  .oc-home-brief-judul { font-size: 44px; line-height: 1.04; }
  .oc-home-brief-intinya { font-size: 18px; max-width: 640px; }
  .oc-home-brief .oc-tombol { display: inline-flex; margin-top: 28px; padding-left: 20px; }
  .oc-artikel { width: 100%; max-width: 840px; margin: 0 auto; }
  .oc-artikel-kepala { padding: 32px; }
  .oc-artikel-judul { font-size: 44px; }
  .oc-konten { padding: 32px 24px 40px; font-size: 18px; }
  .oc-gambar-utama { margin: 0; }
  .oc-bagikan { margin: 0; }
  .oc-intinya p { font-size: 18px; }
  .oc-pola { margin: 32px 0 0; }
  .oc-footer-isi { padding: 28px 0 0; }
  .oc-footer-kolom { display: flex; flex-wrap: wrap; gap: 32px 48px; }
  .oc-footer-merek { flex: 1 1 240px; }
  .oc-footer-deskripsi {
    display: block;
    max-width: 300px;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--oc-text-2);
  }
  .oc-footer-nav { flex: 1 1 160px; }
  .oc-footer-nav ul { margin: 0; grid-template-columns: minmax(0, 1fr); }
  .oc-ikuti { flex: 1 1 160px; margin-top: 0; flex-direction: column; align-items: flex-start; gap: 0; }
  .oc-ikuti-label { margin-bottom: 4px; }
  .oc-footer-catatan { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--oc-line); line-height: 1.55; }
  .oc-ikuti a {
    padding: 0;
    border: 0;
    text-decoration: underline;
    font-size: 15px;
    font-weight: 400;
  }
  .oc-kepala-label { font-size: 12px; }
  .oc-kepala-judul { font-size: 40px; }
  .oc-kepala-deskripsi { max-width: 680px; font-size: 16px; }
  .oc-kabar-legenda, .oc-kabar-daftar, .oc-kabar-halaman { width: 100%; max-width: 840px; margin-left: auto; margin-right: auto; }
  .oc-arsip-brief { width: 100%; max-width: 840px; margin: 0 auto; }
  .oc-kom { display: flex; flex-wrap: wrap; gap: 24px 48px; padding: 32px; }
  .oc-kom-teks { flex: 1 1 300px; }
  .oc-kom-aksi { flex: 1 1 280px; }
  .oc-kom-judul { font-size: 32px; line-height: 1.04; }
  .oc-home .oc-kom { grid-column: 1 / -1; }
  .oc-kom-aksi > :first-child { margin-top: 0; }
}