/*
 * Token warna Yolked Send untuk tema Material.
 *
 * Halaman dokumentasi harus terbaca sebagai bagian dari produk yang sama
 * dengan landing page, bukan microsite terpisah. Karena itu nilainya disalin
 * apa adanya dari `web/src/app/globals.css` dan dari kelas Tailwind yang
 * dipakai landing page: latar putih, aksen emerald, header putih berbingkai
 * slate (`bg-white/85` + `border-slate-200`), footer `bg-slate-50`.
 *
 * Material membaca custom property ini sendiri, jadi sebagian besar warna
 * cukup diganti di sini tanpa menimpa selector. Pengecualiannya header dan
 * kotak pencarian, yang di Material bergantung pada `--md-primary-fg-color`
 * sebagai warna latar; keduanya ditimpa eksplisit di bawah.
 */
/*
 * Atribut `data-md-color-scheme` dipasang Material di elemen <body>, dan blok
 * `[data-md-color-scheme="default"]` milik main.css mendefinisikan ulang token
 * di elemen itu juga. Selama nilai kita hanya ditulis di `:root`/`html`, token
 * warisan itu selalu kalah karena <body> mendefinisikannya sendiri — bukan
 * masalah spesifisitas. Karena itu selector di bawah ikut menyasar elemen
 * ber-atribut tersebut, dan menang lewat urutan sumber (extra.css dimuat
 * setelah main.css).
 */
:root,
html[data-md-color-scheme="default"],
[data-md-color-scheme="default"] {
  /* Aksen brand — sama dengan `--color-brand-*` di globals.css. */
  --md-primary-fg-color: #059669;        /* brand-600 — tombol & tautan */
  --md-primary-fg-color--light: #10b981; /* brand-500 */
  --md-primary-fg-color--dark: #047857;  /* brand-700 */
  --md-accent-fg-color: #059669;

  /* Latar & teks — landing page memakai `bg-white` + `text-slate-900`. */
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #0f172a;
  --md-default-fg-color--light: #475569;
  --md-default-fg-color--lighter: #64748b;
  --md-typeset-color: #0f172a;
  --md-typeset-a-color: #059669;

  /* Blok kode & garis pemisah mengikuti `bg-slate-50` / `border-slate-200`. */
  --md-code-bg-color: #f8fafc;
  --md-code-fg-color: #0f172a;

  /* Footer landing: `bg-slate-50/70` + `border-t border-slate-200`. */
  --md-footer-bg-color: #f8fafc;
  --md-footer-bg-color--dark: #f1f5f9;
  --md-footer-fg-color: #475569;
  --md-footer-fg-color--light: #64748b;
  --md-footer-fg-color--lighter: #94a3b8;
}

/*
 * Header. Di scheme `default`, Material mewarnai header dengan
 * `--md-primary-fg-color` dan menulis teksnya dengan `--md-primary-bg-color`
 * (putih). Karena landing page memakai header putih, header di sini dibuat
 * putih juga — dan teks serta ikonnya HARUS ditimpa, kalau tidak akan menjadi
 * putih di atas putih. Translucency + blur disamakan dengan `bg-white/85
 * backdrop-blur-md` milik landing.
 */
.md-header {
  color: #0f172a;
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.md-header__button {
  color: #475569;
}

.md-header__button:hover {
  color: #0f172a;
  opacity: 1;
}

/* Warna dasar judul header. Ini yang menahan judul halaman aktif (topic kedua)
   tetap slate-900; nama situs di topic pertama ditimpa jadi hijau di bawah. */
.md-header__title {
  color: #0f172a;
}

/* Kotak pencarian: di header berwarna Material memakai latar putih transparan,
   yang akan hilang di atas header putih. Diberi latar slate seperti input
   landing. */
.md-header .md-search__input {
  color: #0f172a;
  background-color: #f1f5f9;
}

.md-header .md-search__input::placeholder {
  color: #94a3b8;
}

.md-header .md-search__icon {
  color: #64748b;
}

/* Judul. Material mewarnai h1–h4 dengan `--md-default-fg-color--light`
   (slate-600 di token di atas), sedangkan judul di landing page memakai
   `text-slate-900`. Disamakan supaya bobot visualnya sama. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: #0f172a;
}

/* Judul situs di header; landing dan sidebar panel sama-sama memakai
   `text-brand-600` untuk nama brand, jadi teksnya dibuat emerald.
   Selector diarahkan ke `.md-header__topic` PERTAMA saja — di dalam
   `.md-header__title` ada dua topic: yang pertama nama situs, yang kedua judul
   halaman aktif. Kalau `.md-header__title` yang diwarnai, judul halaman ikut
   hijau dan seluruh header terlihat seperti satu tautan. */
.md-header__title .md-header__topic:first-child {
  color: #059669;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Judul di sidebar/drawer. Di scheme `default` Material memberinya latar
   `--md-primary-fg-color` (di sini emerald) dan teks putih; nama brand hijau di
   atas latar emerald tidak terbaca. Latarnya dibuat putih seperti header
   landing, jadi teksnya bisa ikut hijau dan kedua judul brand konsisten.

   Selector `[for="__drawer"]` disalin dari Material — aturannya di sana adalah
   `.md-nav--primary .md-nav__title[for="__drawer"]` (spesifisitas 0,3,0),
   sehingga `.md-nav__title` saja selalu kalah. Dengan selector yang setara,
   `extra.css` menang lewat urutan sumber karena dimuat setelah `main.css`. */
.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for="__drawer"] {
  color: #0f172a;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: none;
}

/* Hijau hanya untuk judul yang memuat logo brand, yaitu judul drawer utama
   (`for="__drawer"`). Judul menu bertingkat — "Daftar isi" dan nama halaman
   induk saat masuk ke sub-menu — tetap slate, supaya hijau di halaman ini tetap
   berarti "ini brand", bukan sekadar judul.

   Spesifisitasnya harus SAMA dengan aturan slate di atas, karena itu bagian
   `.md-nav--primary` diulang, bukan dipersingkat jadi `.md-nav__title[for=…]`;
   yang menentukannya adalah urutan sumber. */
.md-nav--primary .md-nav__title[for="__drawer"] {
  color: #059669;
}

/* Panah "kembali" di judul menu bertingkat membaca `currentColor`, jadi ikut
   hijau. Warna aksennya dikembalikan ke slate supaya tidak terbaca sebagai
   tombol brand. */
.md-nav__title .md-nav__icon {
  color: #475569;
}

/*
 * Chevron buka/tutup di daftar menu sidebar dimatikan.
 *
 * Setiap item yang punya sub-daftar isi dirender Material sebagai
 * `<label class="md-nav__link">` yang di dalamnya ada `<span class="md-nav__icon
 * md-icon">` — chevron kecil di sebelah kanan teks menu. Menu dokumentasi ini
 * dibiarkan rata teks saja, jadi ikon itu disembunyikan.
 *
 * Selector sengaja dibatasi pada `.md-nav__link` di sidebar primer. Ikon
 * dengan kelas yang sama juga dipakai sebagai panah "kembali" di judul menu
 * saat drawer mobile terbuka, dan itu tetap dibutuhkan untuk navigasi.
 *
 * Menyembunyikan ikonnya tidak menghilangkan fungsinya: yang membuka sub-menu
 * adalah `<label for="__toc">`, dan label itu tetap utuh serta tetap bisa
 * diklik di seluruh lebar barisnya.
 */
.md-sidebar--primary .md-nav__link .md-nav__icon {
  display: none;
}

/*
 * Footer — tata letak `overrides/partials/footer.html`.
 *
 * Nilainya disalin dari `web/src/components/marketing/SiteFooter.tsx`, yaitu
 * kelas Tailwind berikut: `border-t border-slate-200 bg-slate-50/70`, wadah
 * `max-w-6xl px-5 py-14 sm:px-8`, grid `md:grid-cols-[1.4fr_1fr_1fr_1.2fr]`
 * berjarak `gap-10`, judul grup `text-[13px] font-semibold uppercase
 * tracking-wide text-slate-800`, tautan `text-[13.5px] text-slate-600
 * hover:text-brand-700`, dan baris bawah `mt-12 border-t border-slate-200 pt-6
 * text-[12.5px]`.
 *
 * SELURUHNYA memakai px, bukan rem. Landing page memakai root 16px (bawaan
 * Tailwind), sedangkan Material menyetel `html { font-size: 125% }` sehingga
 * root-nya 20px — `13.5px` di Tailwind tidak sama dengan `.675rem` di sini dan
 * menyalin nilainya apa adanya akan membesarkan seluruh footer ~25%.
 */
.ys-footer {
  color: #475569;
  background-color: rgba(248, 250, 252, 0.7);
  border-top: 1px solid #e2e8f0;
}

/* `max-w-6xl` (1152px) + `px-5 py-14`, melebar jadi `px-8` di layar ≥640px. */
.ys-footer__inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 56px 20px;
}

@media (min-width: 640px) {
  .ys-footer__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Satu kolom di layar sempit, empat kolom `1.4fr 1fr 1fr 1.2fr` dari 768px. */
.ys-footer__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .ys-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

.ys-footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
}

/* Nama brand hijau, sama seperti `Wordmark` di landing page. `-0.025em` adalah
   `tracking-tight` milik Tailwind, dan karena Material memakai root 20px,
   `-0.025rem` bawaan tidak boleh disalin apa adanya. */
.ys-footer__name {
  color: #059669;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ys-footer__mark {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.ys-footer__lead {
  max-width: 320px;
  margin: 16px 0 0;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.625;
}

.ys-footer__heading {
  margin: 0;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.ys-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  font-size: 13.5px;
  list-style: none;
}

/* Material memberi bullet dan indentasi pada daftar di dalam `.md-typeset`;
   footer ini bukan konten bertipe dokumen, jadi penandanya dibersihkan. */
.ys-footer .ys-footer__links > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ys-footer__links > li::before {
  content: none;
}

.ys-footer__links a {
  color: #475569;
  text-decoration: none;
  transition: color 125ms;
}

.ys-footer__links a:hover {
  color: #047857;
}

/* Ikon kontak diselaraskan dengan baris teksnya. */
.ys-footer__icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  color: #94a3b8;
  vertical-align: -3px;
}

.ys-footer__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Baris hak cipta: `mt-12 border-t border-slate-200 pt-6`. */
.ys-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

@media (min-width: 640px) {
  .ys-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.ys-footer__copyright,
.ys-footer__note {
  margin: 0;
  font-size: 12.5px;
}

.ys-footer__copyright {
  color: #64748b;
}

.ys-footer__note {
  color: #94a3b8;
}