/* =====================================================================
   Aksara Fonts in Use

   PALET: setiap token punya nilai cadangan yang KERAS di baris yang sama.
   Plugin ini harus terlihat benar di tema mana pun, termasuk tema yang tidak
   mendefinisikan satu variabel pun. Rantai fallback membaca variabel tema
   sebagai PREFERENSI, bukan sebagai syarat.

   --fiu-ink berakhir di #14161b, bukan currentColor. Rantai yang berakhir di
   currentColor pernah membuat elemen hilang sama sekali di plugin lain pada
   proyek ini: saat dipakai sebagai LATAR pada elemen yang warnanya baru saja
   diset putih, currentColor ikut jadi putih — putih di atas putih. Di mana
   pun warna perlu dibalik di bawah ini, yang dipakai color-mix terhadap
   currentColor, bukan var(--fiu-ink).
   ===================================================================== */
.fiu-archive,
.fiu-single,
.fiu-uses,
.fiu-panel {
  --fiu-ink: var(--wp--preset--color--contrast, var(--e-global-color-text, #14161b));
  --fiu-paper: var(--wp--preset--color--base, #fff);
  --fiu-muted: color-mix(in srgb, var(--fiu-ink) 58%, var(--fiu-paper));
  --fiu-line: color-mix(in srgb, var(--fiu-ink) 14%, transparent);
  --fiu-soft: color-mix(in srgb, var(--fiu-ink) 5%, var(--fiu-paper));
  --fiu-accent: var(--wp--preset--color--accent-1, var(--wp--preset--color--primary, #1875f0));
  --fiu-radius: 10px;
  color: var(--fiu-ink);
}

.fiu-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ---------- kepala ---------- */
.fiu-header { padding: 46px 0 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .fiu-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px; } }
.fiu-header__title { margin: 0; font-size: clamp(38px, 6vw, 74px); line-height: 1.02; letter-spacing: -.03em; }
.fiu-header__meta { display: flex; flex-direction: column; gap: 14px; }
.fiu-counter {
  align-self: flex-start;
  margin: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--fiu-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.fiu-header__intro { margin: 0; color: var(--fiu-muted); font-size: 14px; line-height: 1.6; max-width: 64ch; }
.fiu-header__intro p { margin: 0 0 8px; }

/* ---------- baris filter ----------
   <details>/<summary>, bukan tiruan dropdown dari div + JavaScript. Dengan
   begitu ia bisa dibuka lewat papan tuan, dibacakan pembaca layar sebagai
   grup yang bisa dibuka, dan tetap berfungsi kalau JavaScript gagal dimuat.
   Menutup saat klik di luar memang jadi tugas JS — tapi itu kenyamanan yang
   hilang, bukan fungsi yang hilang. */
.fiu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--fiu-line);
}
.fiu-filter { position: relative; }
.fiu-filter__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--fiu-line);
  border-radius: 999px;
  background: var(--fiu-soft);
  color: var(--fiu-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.fiu-filter__summary::-webkit-details-marker { display: none; }
.fiu-filter.is-active > .fiu-filter__summary { background: var(--fiu-ink); color: var(--fiu-paper); border-color: var(--fiu-ink); }
.fiu-filter__chevron { font-size: 10px; opacity: .7; }
.fiu-filter[open] > .fiu-filter__summary .fiu-filter__chevron { transform: rotate(180deg); }
.fiu-filter__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--fiu-line);
  border-radius: var(--fiu-radius);
  background: var(--fiu-paper);
  box-shadow: 0 16px 44px color-mix(in srgb, currentColor 14%, transparent);
}
.fiu-filter__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 7px;
  color: inherit;
  font-size: 13px;
  text-decoration: none;
}
.fiu-filter__option:hover { background: var(--fiu-soft); }
.fiu-filter__option.is-selected { background: var(--fiu-soft); font-weight: 700; }
.fiu-filter__option--clear { color: var(--fiu-muted); border-bottom: 1px solid var(--fiu-line); border-radius: 0; margin-bottom: 4px; }
/* Chip hitungan relatif terhadap currentColor — lihat catatan palet di atas. */
.fiu-filter__count {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fiu-filters__clear { margin-left: 4px; color: var(--fiu-muted); font-size: 13px; }

@media (max-width: 720px) {
  /* Satu baris yang digeser, dengan tepi memudar. Aturan yang sama dipakai
     baris tab dan baris kategori di tema ini: potongan yang mengintip, atau
     tepi yang memudar, adalah SATU-SATUNYA tanda bahwa barisnya berlanjut —
     scrollbar overlay di iOS baru muncul setelah orang menggeser. */
  .fiu-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .fiu-filters::-webkit-scrollbar { display: none; }
  .fiu-filter { flex: 0 0 auto; }
  /* Menu yang muncul di dalam wadah yang di-mask akan ikut terpotong dan
     memudar. Di layar sempit ia dibuat menempel di bawah, lebar penuh. */
  .fiu-filter__menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 52vh; }
}

/* ---------- grid ---------- */
.fiu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 30px 24px;
  padding: 34px 0 44px;
}
.fiu-grid--compact { padding: 0; gap: 24px 20px; }

.fiu-card__link { display: block; color: inherit; text-decoration: none; }
.fiu-card__media {
  display: block;
  position: relative;
  /* Kotak rasio dipasang SEBELUM gambarnya datang. Tanpa ini grid melonjak
     tiap kali satu gambar selesai dimuat, dan kartu yang sedang dituju jari
     orang bergeser tepat saat ia menekan. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--fiu-radius);
  background: var(--fiu-soft);
}
.fiu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.fiu-card__link:hover .fiu-card__media img { transform: scale(1.02); }
.fiu-card__placeholder { position: absolute; inset: 0; background: var(--fiu-soft); }
.fiu-card__body { display: block; padding: 14px 2px 0; }
.fiu-card__family { display: block; color: var(--fiu-muted); font-size: 12px; font-weight: 600; }
.fiu-card__title { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fiu-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  color: var(--fiu-muted);
  font-size: 13px;
  line-height: 1.45;
}

.fiu-pagination { display: flex; justify-content: center; gap: 8px; padding: 0 0 60px; }
.fiu-pagination .page-numbers { padding: 8px 13px; border: 1px solid var(--fiu-line); border-radius: 7px; color: inherit; font-size: 13px; text-decoration: none; }
.fiu-pagination .page-numbers.current { background: var(--fiu-ink); color: var(--fiu-paper); border-color: var(--fiu-ink); }

.fiu-empty { padding: 60px 0 80px; text-align: center; }
.fiu-empty h2 { margin: 0 0 12px; font-size: 22px; }
.fiu-empty__clear { color: var(--fiu-accent); font-weight: 600; }

/* ---------- detail (panel dan halaman penuh memakai yang sama) ---------- */
.fiu-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 900px) { .fiu-detail { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 40px; align-items: start; } }
.fiu-detail__media { display: grid; gap: 14px; min-width: 0; }
.fiu-detail__figure { margin: 0; border-radius: var(--fiu-radius); overflow: hidden; background: var(--fiu-soft); }
.fiu-detail__figure img { display: block; width: 100%; height: auto; }
.fiu-detail__side { min-width: 0; display: grid; gap: 18px; align-content: start; }
@media (min-width: 900px) { .fiu-detail__side { position: sticky; top: 24px; } }
.fiu-detail__title { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -.02em; }
.fiu-detail__family { padding: 14px 16px; border-radius: var(--fiu-radius); background: var(--fiu-soft); display: grid; gap: 4px; }
.fiu-detail__family-label { color: var(--fiu-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.fiu-detail__family-name { color: var(--fiu-accent); font-size: 16px; font-weight: 700; text-decoration: none; }
.fiu-detail__text { color: var(--fiu-ink); font-size: 14px; line-height: 1.6; }
.fiu-detail__text p { margin: 0 0 12px; }
.fiu-detail__link { margin: 0; font-size: 14px; }
.fiu-detail__link a { color: var(--fiu-accent); }
.fiu-detail__terms { display: grid; gap: 7px; }
.fiu-detail__terms-label { color: var(--fiu-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.fiu-detail__terms-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fiu-term { padding: 5px 11px; border-radius: 999px; background: var(--fiu-soft); color: inherit; font-size: 12px; text-decoration: none; }
.fiu-term:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.fiu-detail__credit { margin: 0; padding-top: 12px; border-top: 1px solid var(--fiu-line); color: var(--fiu-muted); font-size: 12px; line-height: 1.5; }

.fiu-breadcrumb { display: flex; gap: 8px; align-items: center; padding: 26px 0 18px; color: var(--fiu-muted); font-size: 13px; }
.fiu-breadcrumb a { color: inherit; }
.fiu-single__back { padding: 34px 0 60px; font-size: 14px; }

/* ---------- panel geser ---------- */
html.fiu-panel-open { overflow: hidden; }
.fiu-panel { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; }
.fiu-panel[hidden] { display: none; }
.fiu-panel__backdrop { position: absolute; inset: 0; background: rgba(16, 18, 24, .55); backdrop-filter: blur(3px); }
.fiu-panel__dialog {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(92vh, 1040px);
  /* overflow: hidden DIHAPUS, dan penggantinya ada di .fiu-panel__body.
   *
   * Tombol maju/mundur sengaja duduk 14px DI LUAR dialog (lihat --prev/--next
   * di bawah). Dengan overflow: hidden, 14px terluarnya terpotong dan yang
   * tersisa setengah lingkaran menempel di tepi — bukan tombol, melainkan
   * sesuatu yang tampak rusak.
   *
   * Sudut membulatnya tidak hilang: latar putih dan radius tetap milik dialog
   * ini, dan .fiu-panel__body — satu-satunya anak yang bisa melampaui sudut —
   * membawa radius yang sama plus padding 24px, jadi tidak ada isi yang pernah
   * menyentuh sudutnya. */
  overflow: visible;
  border-radius: 14px;
  background: var(--fiu-paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

/* CINCIN FOKUS DIALOGNYA DIMATIKAN, DAN INI BUKAN PELANGGARAN AKSESIBILITAS.
 *
 * fonts-in-use.js memindahkan fokus ke dialog saat panel dibuka — itu memang
 * anjuran untuk modal, supaya pembaca layar mulai membaca dari sini dan bukan
 * dari halaman di belakangnya. Tapi dialognya tabindex="-1": ia BUKAN kontrol
 * yang bisa dicapai dengan Tab, ia hanya titik pendaratan.
 *
 * Tema seperti Aksara memberi [tabindex]:focus-visible cincin tinta 2px, jadi
 * seluruh kotak 1180px itu dikelilingi garis hitam tebal begitu panel dibuka.
 * Garis itu tidak memberi tahu apa pun — batas dialognya sudah jelas karena ia
 * mengambang di atas latar yang diredupkan — dan terbaca sebagai cacat render.
 *
 * Yang TIDAK disentuh: tombol tutup, tombol maju/mundur, dan setiap tautan di
 * dalamnya. Ketiganya <button>/<a> sungguhan, bisa dicapai Tab, dan cincin
 * fokusnya tetap utuh.
 *
 * KENAPA ADA .fiu-panel DI DEPANNYA, DAN KENAPA RADIUSNYA DITULIS ULANG.
 *
 * Aturan tema itu `[tabindex]:focus-visible` — satu atribut + satu pseudo-kelas
 * = (0,2,0). `.fiu-panel__dialog:focus-visible` juga (0,2,0): SERI, dan yang
 * memutuskan cuma urutan muat. Hari ini plugin menang karena asetnya dipasang
 * di prioritas 20 dan tema di 10, tapi itu kebetulan, bukan jaminan — dan
 * dibalik urutannya, garis hitam 2px-nya kembali (sudah diukur). Dengan
 * `.fiu-panel` di depan jadi (0,3,0): menang tanpa bergantung pada urutan.
 *
 * Aturan tema yang sama juga menyetel `border-radius: var(--radius-sm)`, dan
 * di Aksara itu 2px. Karena (0,2,0) selalu mengalahkan `.fiu-panel__dialog`
 * yang cuma (0,1,0), sudut dialognya DIPERSEGI dari 14px jadi 2px begitu fokus
 * mendarat — yaitu selalu, sejak panel dibuka. Mematikan outline saja tidak
 * memulihkannya, jadi radiusnya ditulis ulang di sini. */
.fiu-panel .fiu-panel__dialog:focus,
.fiu-panel .fiu-panel__dialog:focus-visible {
  outline: none;
  border-radius: 14px;
}

.fiu-panel__body {
  max-height: min(92vh, 1040px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
.fiu-panel__close {
  position: absolute; z-index: 2; top: 12px; right: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--fiu-paper);
  color: var(--fiu-ink);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px color-mix(in srgb, currentColor 16%, transparent);
}
.fiu-panel__nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--fiu-paper);
  color: var(--fiu-ink);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 14px color-mix(in srgb, currentColor 18%, transparent);
}

/* BULATANNYA HARUS TETAP BULAT SAAT DIFOKUS.
 *
 * Aturan fokus tema (`button:focus-visible`) menyetel `border-radius:
 * var(--radius-sm)` — 2px di Aksara — bersama cincinnya. Spesifisitasnya
 * (0,1,1), sedangkan `border-radius: 50%` di atas hanya (0,1,0), jadi tema
 * menang: begitu tombol tutup atau tombol maju/mundur dicapai dengan Tab,
 * lingkarannya berubah jadi kotak bersudut 2px. Sudah diukur — radiusnya
 * terbaca 2px pada tombol yang difokus.
 *
 * Dengan mouse ini tidak terlihat (Chromium tidak memberi :focus-visible pada
 * tombol yang diklik), jadi cacatnya cuma menimpa pengguna papan tuntut —
 * justru orang yang paling bergantung pada cincin fokus itu.
 *
 * Yang dipulihkan HANYA radiusnya. Cincin 2px tinta milik tema dibiarkan utuh:
 * ketiganya tombol sungguhan yang bisa dicapai Tab, dan di situlah cincin itu
 * memang berguna. */
.fiu-panel .fiu-panel__close:focus,
.fiu-panel .fiu-panel__close:focus-visible,
.fiu-panel .fiu-panel__nav:focus,
.fiu-panel .fiu-panel__nav:focus-visible {
  border-radius: 50%;
}

.fiu-panel__nav[hidden] { display: none; }
.fiu-panel__nav--prev { left: -14px; }
.fiu-panel__nav--next { right: -14px; }
@media (max-width: 720px) {
  .fiu-panel { padding: 8px; }
  .fiu-panel__body { padding: 16px; }
  .fiu-panel__nav--prev { left: 6px; }
  .fiu-panel__nav--next { right: 6px; }
}
.fiu-panel__loading { height: 240px; border-radius: var(--fiu-radius); background: var(--fiu-soft); }

/* ---------- blok "dipakai di dunia nyata" pada halaman font ---------- */
.fiu-uses { padding: 46px 0; border-top: 1px solid var(--fiu-line); }
.fiu-uses__head { margin-bottom: 26px; }
.fiu-uses__eyebrow { margin: 0 0 8px; color: var(--fiu-muted); font-size: var(--fiu-label-size, 12px); font-weight: var(--fiu-label-weight, 500); letter-spacing: var(--fiu-label-tracking, .1em); line-height: 1.35; text-transform: uppercase; }
.fiu-uses__title { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.fiu-uses__more { padding-top: 22px; font-size: 14px; }
.fiu-uses__more a { color: var(--fiu-accent); font-weight: 600; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .fiu-card__media img,
  .fiu-filter__chevron { transition: none; transform: none; }
  .fiu-card__link:hover .fiu-card__media img { transform: none; }
}

/* ---------- blok unduh trial di bawah kasus ----------
   Isinya dirender shortcode Authentype, jadi yang diatur di sini hanya
   wadah dan kepalanya. Gaya formulirnya sendiri milik specimen.css, dan
   sengaja tidak ditimpa: dua sumber gaya untuk satu formulir berarti satu
   di antaranya akan tertinggal setiap kali yang lain diperbaiki. */
.fiu-trial {
  padding: 40px 0 8px;
  margin-top: 34px;
  border-top: 1px solid var(--fiu-line);
}
.fiu-trial__group + .fiu-trial__group { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--fiu-line); }
.fiu-trial__head { margin-bottom: 20px; }
.fiu-trial__eyebrow { margin: 0 0 8px; color: var(--fiu-muted); font-size: var(--fiu-label-size, 12px); font-weight: var(--fiu-label-weight, 500); letter-spacing: var(--fiu-label-tracking, .1em); line-height: 1.35; text-transform: uppercase; }
.fiu-trial__title { margin: 0; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.12; letter-spacing: -.02em; }