/* ============================================================================
   Banamitra — CSS bersama seluruh halaman
   Dipisah dari blok <style> index.html di putaran 53. Isinya TIDAK diubah,
   hanya dipindah, supaya satu perubahan berlaku untuk semua halaman.

   Aturan proyek: class yang dibuat/ditempel lewat JS harus ditulis CSS murni
   di sini, bukan util Tailwind — kalau tidak, class-nya hilang saat nanti
   migrasi ke Tailwind build (compiler tidak memindai string di dalam JS).
   Contoh yang sudah mengikuti aturan ini: .hero-dot, .tw-c, .yt-frame, .gstars.
   ============================================================================ */
  /* ---- Reveal on scroll ---- */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal.is-in { opacity: 1; transform: none; }

  /* ---- Marquee ---- */
  .marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-mask { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }

  /* ---- Carousel hero: cross-fade + ken burns halus ---- */
  .hero-slide {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.2s ease-in-out, transform 7s ease-out;
    will-change: opacity, transform;
  }
  .hero-slide.is-active { opacity: 1; transform: scale(1); }

  /* ditulis CSS murni (bukan util Tailwind) karena dot dibuat lewat JS */
  .hero-dot {
    position: relative;
    height: .375rem; width: .375rem;
    border-radius: 9999px;
    background-color: rgba(255,255,255,.5);
    transition: width .35s ease, background-color .35s ease;
  }
  .hero-dot::after { content: ''; position: absolute; inset: -11px; } /* perbesar area sentuh */
  .hero-dot:hover { background-color: rgba(255,255,255,.85); }
  .hero-dot.is-active { width: 1.75rem; background-color: #D9AC1E; }

  /* ---- Scrim hero terarah ----
     Dua lapis: diagonal (kiri-bawah → kanan-atas) + penguat vertikal di dasar.
     Tujuannya biru #245E87 terasa dominan di area teks tanpa menutupi foto. */
  .hero-scrim {
    background-image:
      /* 1. diagonal utama: 80deg = arah ke kanan sedikit ke atas,
            jadi titik 0% (paling pekat) jatuh di kiri-bawah tempat teks berada */
      linear-gradient(80deg,
        rgba(11,42,64,.62) 0%,
        rgba(20,70,102,.46) 30%,
        rgba(36,94,135,.26) 55%,
        rgba(36,94,135,.10) 78%,
        rgba(36,94,135,.04) 100%),
      /* 2. penguat dasar — menopang dot carousel & sticky CTA */
      linear-gradient(to top,
        rgba(11,42,64,.25) 0%,
        rgba(11,42,64,.06) 30%,
        transparent 60%),
      /* 3. pita tipis di puncak — menjaga logo & nav tetap terbaca */
      linear-gradient(to bottom,
        rgba(11,42,64,.30) 0%,
        transparent 16%);
  }
  /* Di HP teks memenuhi hampir seluruh lebar, jadi gradient dibuat lebih vertikal. */
  @media (max-width: 640px) {
    .hero-scrim {
      background-image:
        linear-gradient(25deg,
          rgba(11,42,64,.60) 0%,
          rgba(20,70,102,.44) 35%,
          rgba(36,94,135,.24) 70%,
          rgba(36,94,135,.12) 100%),
        linear-gradient(to top,
          rgba(11,42,64,.28) 0%,
          rgba(11,42,64,.08) 35%,
          transparent 65%),
        linear-gradient(to bottom,
          rgba(11,42,64,.32) 0%,
          transparent 14%);
    }
  }

  /* ---- Scrim foto section (bukan hero) ----
     Dipakai di section foto "10 Keunggulan": homepage + 4 halaman jasa.

     ⚠⚠ DITULIS CSS MURNI KARENA UTIL TAILWIND-NYA TIDAK ADA. Di
     assets\css\tailwind.css hasil build hanya ada `.from-brand-950/90`;
     `via-brand-950/78` dan `to-brand-950/88` TIDAK PERNAH ter-build. Akibatnya
     Tailwind memakai bawaannya untuk perhentian yang hilang — TRANSPARAN — jadi
     yang benar-benar tampil selama ini 90% di puncak lalu BENING TOTAL di dasar,
     bukan 90 → 78 → 88. Persis kerusakan senyap yang diperingatkan CLAUDE.md.

     ⚠ Angka 90/78/88 bukan selera: diukur supaya teks putih tetap >7:1 dan
     deskripsi white/80 >5:1 di atas titik paling terang fotonya. Jangan
     ditipiskan tanpa mengukur ulang, dan ukur ulang kalau fotonya diganti.

     Setara dengan: bg-gradient-to-b from-brand-950/90 via-brand-950/78
     to-brand-950/88 — brand-950 = #07141F = rgb(7,20,31) (lihat
     tools\tailwind\tailwind.config.js), dan 50% adalah posisi `via-` bawaan
     Tailwind. ⚠ JANGAN menyalin rgba(11,42,64) dari .hero-scrim di atas: itu
     warna pilihan tangan di luar palet, bukan brand-950. */
  .foto-scrim {
    background-image: linear-gradient(to bottom,
      rgba(7,20,31,.90) 0%,
      rgba(7,20,31,.84) 50%,
      rgba(7,20,31,.90) 100%);
  }

  /* ---- Peredam foto latar (15 Agustus 2026) ----
     User melaporkan section "10 Keunggulan" terasa "terlalu kontras merah"
     dan tulisannya kurang terbaca. Scrim saja TIDAK cukup mengatasinya, dan
     alasannya bukan selera:

     · Scrim hanya bisa MENGGELAPKAN, tidak bisa meredam WARNA. Foto latarnya
       konstruksi saat matahari terbenam — langitnya jingga pekat, rompi
       pekerjanya kuning menyala. Warna-warna itu tetap menembus lapisan gelap
       dan itulah "merah" yang dilihat user.
     · Titik paling terang fotonya (langit) ada tepat di belakang H2.
     · Fotonya RAMAI — besi tulangan, orang, tumpukan material. Kekacauan
       visual di belakang teks melelahkan dibaca walau kontrasnya lolos angka.

     Karena itu peredaman dipasang pada GAMBARNYA: saturasi diturunkan supaya
     warnanya tidak berebut, kecerahan diturunkan supaya scrim tidak bekerja
     sendirian. Hasilnya teks putih aman di atas titik paling terang sekalipun,
     dan fotonya tetap terbaca sebagai tekstur — bukan hilang jadi blok gelap.

     ⚠ Dipakai di 20 halaman: index + 4 jasa-* + 15 halaman kota. Kalau fotonya
     diganti, ukur ulang — angka ini disetel untuk foto senja yang ramai ini. */
  .foto-latar {
    filter: saturate(.45) brightness(.72);
  }

  /* ---- Bayangan logo ----
     Pengganti chip putih: memberi logo garis pemisah dari foto di belakangnya.
     Hanya aktif saat header transparan (dikendalikan JS lewat class .logo-glow). */
  .logo-glow img {
    filter: drop-shadow(0 1px 2px rgba(7,20,31,.55))
            drop-shadow(0 4px 14px rgba(7,20,31,.45));
  }

  /* ---- Bayangan teks hero ----
     Pendamping .hero-scrim: scrim menahan area, text-shadow menahan tiap huruf. */
  .text-hero {
    text-shadow: 0 1px 2px rgba(7,20,31,.7),
                 0 2px 10px rgba(7,20,31,.6),
                 0 6px 32px rgba(7,20,31,.5);
  }

  /* ---- Grid pattern hero ---- */
  .bg-blueprint {
    background-image:
      linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 44px 44px;
  }

  /* ---- Placeholder foto ---- */
  .ph {
    background-color: #EEF5FA;
    background-image: repeating-linear-gradient(45deg, rgba(36,94,135,.07) 0 10px, transparent 10px 20px);
  }

  /* ---- Nama pengurus (section Tentang) ----
     Kalau nama tetap harus turun baris di layar sempit, ratakan panjang tiap barisnya
     supaya tidak menyisakan potongan satu kata. Browser lama mengabaikan ini tanpa efek samping. */
  .pengurus-nama {
    text-wrap: balance;
  }

  /* ---- FAQ ----
     Memakai <details>/<summary> bawaan browser, bukan akordeon JS:
     dapat diakses lewat keyboard tanpa kode tambahan, tetap berfungsi kalau JS gagal,
     dan seluruh jawaban tetap ada di DOM untuk mesin pencari meski sedang tertutup. */
  .faq-item > summary { list-style: none; cursor: pointer; }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-item > summary:focus-visible {
    outline: 2px solid #245E87;
    outline-offset: 2px;
    border-radius: 1rem;
  }
  .faq-caret { transition: transform .25s ease; }
  .faq-item[open] .faq-caret { transform: rotate(180deg); }

  /* item 6-15: disembunyikan sampai tombol "Lihat pertanyaan lainnya" ditekan */
  .faq-more { display: none; }
  .faq-more.is-open { display: block; }
  #faq-toggle[aria-expanded="true"] .faq-caret { transform: rotate(180deg); }

  /* proyek 7-16: pola yang sama dengan FAQ.
     Yang menahan unduhan sepuluh gambarnya BUKAN display:none di sini, melainkan
     data-src pada <img>-nya (putaran 60) — display:none saja ternyata tidak bisa
     diandalkan untuk itu. Lihat HANDOFF.md bagian 3. */
  .porto-more { display: none; }
  .porto-more.is-open { display: block; }
  #porto-toggle[aria-expanded="true"] .porto-caret { transform: rotate(180deg); }

  /* Di putaran 61 ada .tanya-noscript di sini, pasangan kotak tanya bertekstarea di
     faq.html. DIHAPUS di putaran 62: user mengganti kotak itu dengan tautan WhatsApp
     biasa, jadi tidak ada lagi yang perlu dijelaskan saat JS mati. Resepnya tercatat
     di HANDOFF.md kalau suatu saat kotak tanya itu dikembalikan. */

  /* ---- Sampul video YouTube (pola "facade") ----
     iframe YouTube menarik ±1 MB skrip dan memasang cookie sejak halaman dibuka,
     padahal sebagian besar pengunjung tidak menekan play. Yang dimuat di sini cuma
     satu gambar (89 KB); iframe-nya baru dibuat JS setelah tombol ditekan.
     Ditulis CSS murni — bukan util Tailwind — karena iframe-nya dibuat lewat JS. */
  .yt-facade {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 9; overflow: hidden;
    border: 0; padding: 0; margin: 0;
    border-radius: 1.5rem; cursor: pointer;
    background: #122F45;
  }
  .yt-facade img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s ease, filter .3s ease;
  }
  .yt-facade:hover img { transform: scale(1.03); filter: brightness(.9); }
  .yt-facade:focus-visible { outline: 3px solid #D9AC1E; outline-offset: 3px; }

  .yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
  .yt-play > span {
    display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; border-radius: 9999px;
    background: #D9AC1E; color: #122F45;
    box-shadow: 0 12px 32px rgba(18, 47, 69, .45);
    transition: transform .25s ease, background-color .25s ease;
  }
  .yt-facade:hover .yt-play > span { transform: scale(1.08); background: #EACB55; }
  .yt-play svg { width: 1.75rem; height: 1.75rem; margin-left: .15rem; }

  /* iframe pengganti, dibuat JS saat diklik */
  .yt-frame {
    display: block; width: 100%; aspect-ratio: 16 / 9;
    border: 0; border-radius: 1.5rem; background: #122F45;
  }

  /* ---- Bintang rating Google ----
     Dua lapis bintang identik: lapis dasar redup, lapis emas di atasnya dipotong
     selebar var(--rating). Jadi 4,6 benar-benar menggambar 4,6 bintang — bukan
     dibulatkan. Mengubah ratingnya cukup mengubah satu angka di HTML.
     Ditulis CSS murni (bukan util Tailwind) mengikuti aturan proyek. */
  .gstars { position: relative; display: inline-block; line-height: 0; }
  .gstars-base, .gstars-fill { display: flex; gap: 2px; }
  .gstars-base { color: rgba(255,255,255,.25); }
  .gstars-fill {
    position: absolute; inset: 0; overflow: hidden;
    width: calc(var(--rating, 0) / 5 * 100%);
    color: #D9AC1E;
  }
  .gstars svg { width: 20px; height: 20px; flex: none; }
  .gstars-sm svg { width: 14px; height: 14px; }

  /* testimoni 4-11: pola yang sama lagi. Delapan foto (±420 KB) baru diunduh
     kalau tombolnya ditekan. */
  .testi-more { display: none; }
  .testi-more.is-open { display: block; }
  #testi-toggle[aria-expanded="true"] .testi-caret { transform: rotate(180deg); }

  /* Catatan: .val-banner (pita biru bersudut) dan .val-ico dihapus di putaran 51
     bersama desain lama kartu value. Kalau desain itu perlu dikembalikan, aturannya
     tercatat lengkap di HANDOFF.md bagian "Desain kartu value (putaran 24)". */

  /* ---- Dropdown navigasi desktop ----
     Status buka/tutup dipegang JS lewat class .is-open, jadi style-nya CSS murni.
     Memakai visibility (bukan display) supaya transisinya bisa dianimasikan. */
  .nav-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.4rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: none; }
  .nav-caret { transition: transform .2s ease; }
  .nav-item.is-open .nav-caret, .m-group.is-open .nav-caret { transform: rotate(180deg); }

  /* ---- Dropdown TINGKAT DUA: Jasa Kontraktor → 15 halaman kota ----
     Ditambahkan 15 Agustus 2026, DIUBAH hari itu juga atas permintaan user.

     ⚠⚠ VERSI PERTAMA MEMBUKA SAAT DISENTUH KURSOR (:hover) DAN DITOLAK USER.
     Yang berlaku: daftar kota TERSEMBUNYI sampai panah ke bawah DITEKAN.
     Jangan mengembalikan pola hover — itu justru yang diminta dihilangkan.

     ⚠⚠ Memakai <details>/<summary> bawaan browser, BUKAN .nav-item/.m-group.
     site.js closeAllNav() menutup SEMUA .nav-item sekaligus dan akordeon
     mobile menutup semua .m-group selain yang diklik, jadi dropdown di dalam
     dropdown akan saling membunuh. <details> memberi klik-untuk-buka secara
     bawaan: NOL baris JS baru, dapat diakses keyboard, dan tetap berfungsi
     kalau JS gagal dimuat. Pola yang sama dengan FAQ. site.js tidak disentuh.

     ⚠ Satu class dipakai desktop MAUPUN mobile supaya perilakunya dijamin
     sama. <summary> SENGAJA tidak ber-class .m-link — site.js menutup seluruh
     menu mobile begitu .m-link diklik, sehingga menunya akan tertutup tepat
     saat user membuka daftar kota. */
  .kota-toggle { list-style: none; cursor: pointer; }
  .kota-toggle::-webkit-details-marker { display: none; }
  .kota-toggle:focus-visible {
    outline: 2px solid #245E87;
    outline-offset: -2px;
    border-radius: .75rem;
  }
  /* ⚠ Disandarkan pada details[open], BUKAN pada class penanda di <details>-nya.
     Class penanda tanpa aturan CSS dilaporkan hilang selamanya oleh
     audit-class.ps1 — noise permanen untuk nol manfaat. */
  details[open] > .kota-toggle .nav-caret { transform: rotate(180deg); }

  /* ---- Akordeon navigasi mobile ----
     grid-template-rows 0fr→1fr agar tinggi bisa beranimasi tanpa tahu tingginya dulu. */
  .m-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
  }
  .m-sub > div { overflow: hidden; }
  .m-group.is-open > .m-sub { grid-template-rows: 1fr; }

  /* ---- Efek typewriter tagline hero ----
     JS membungkus tiap karakter jadi span lalu memunculkannya berurutan.
     Semua karakter tetap memakan ruang sejak awal, jadi layout tidak bergeser.
     Ditulis CSS murni karena span-nya dibuat lewat JS. */
  .tw > span { opacity: 0; }
  .tw.is-ready > span { opacity: 1; }
  .tw-c { opacity: 0; transition: opacity .12s linear; }
  .tw-c.is-on { opacity: 1; }
  .tw-c.is-cursor { position: relative; }
  .tw-c.is-cursor::after {
    content: '';
    position: absolute; top: .08em; right: -.14em;
    width: .07em; height: 1.05em;
    background-color: #D9AC1E;
    animation: tw-blink .85s steps(1, end) infinite;
  }
  @keyframes tw-blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

  @media (prefers-reduced-motion: reduce) {
    .nav-panel, .nav-caret, .m-sub { transition: none; }
    .faq-caret { transition: none; }
    .tw > span, .tw-c { opacity: 1; }
    .tw-c.is-cursor::after { display: none; }
    .marquee-track { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-slide { transition: opacity .4s ease; transform: none; }
    .hero-slide.is-active { transform: none; }
    html { scroll-behavior: auto; }
  }

  /* aman dari home-indicator iOS */
  .safe-b { padding-bottom: calc(0.625rem + env(safe-area-inset-bottom)); }

  /* ==========================================================================
     ISI ARTIKEL — .artikel-isi  (putaran 76)
     ==========================================================================
     Dipakai 146 halaman artikel hasil generate dari WordPress.

     ⚠⚠ SENGAJA CSS MURNI, BUKAN UTIL TAILWIND. Dua alasannya:
     1. Isi artikel datang dari WordPress sebagai HTML mentah (<p>, <h2>, <ul>,
        <table>, <figure>). Menempelkan class Tailwind ke tiap elemennya berarti
        pembangun halaman harus menyunting ribuan tag — rapuh dan menggelembungkan
        berkas. Satu selector induk jauh lebih tahan banting.
     2. Menambah util Tailwind BARU mewajibkan `npm run build` (putaran 73),
        sementara Node tidak terpasang tetap di mesin ini. Dengan CSS murni,
        halaman artikel bisa dibangun ulang kapan pun tanpa Node.

     Konsekuensinya: JANGAN memindahkan aturan di bawah ini jadi class Tailwind
     "supaya seragam" — itu justru mengembalikan kedua masalah di atas.

     Warna diambil dari palet resmi (tools\tailwind\tailwind.config.js):
     brand-900 #0C2030 · brand-800 #122F45 · brand-700 #183F5C
     brand-600 #1E5074 · brand-500 #245E87 · brand-100 #D6E6F1
     brand-50  #EEF5FA · gold-400  #D9AC1E · gold-700  #755A10
     -------------------------------------------------------------------------- */

  /* Ukuran dasar 15px mengikuti isi halaman legal (text-[15px] leading-relaxed).
     Panjang barisnya dibatasi oleh kolom grid 40rem di HTML, bukan di sini. */
  .artikel-isi {
    font-size: 15px;
    line-height: 1.75;
    /* brand-700 PENUH, bukan lagi rgba(...,.92) (15 Agt 2026). Versi
       semi-transparan terbaca #2A4E69 di atas putih — kontras 8,6:1, lolos
       WCAG, tapi terasa pucat berdampingan dengan judul yang hampir hitam,
       dan itu bagian dari keluhan "font berantakan". Warna penuh ini ada di
       palet resmi dan menaikkan kontras ke 10,4:1. */
    color: #183F5C;
  }
  .artikel-isi > *:first-child { margin-top: 0; }

  .artikel-isi p { margin: 0 0 1.15rem; }

  /* ---- Hierarki jarak judul (disetel ulang 15 Agustus 2026) ----
     User melaporkan "spasi, H1–H4 berantakan". Sebabnya terukur: jarak antar
     paragraf 1,15rem, sedangkan jarak DI ATAS h3 hanya 2rem. Selisihnya cuma
     ±0,85rem, jadi judul tidak terbaca sebagai pemisah bagian — semuanya
     mengambang pada jarak yang mirip. Naskah dari WordPress memperparah ini:
     hampir tiap kalimat jadi <p> sendiri, sehingga halaman penuh jeda seragam.

     Aturan yang dipakai sekarang — jarak ATAS judul kelipatan jelas dari jarak
     antar paragraf, jarak BAWAH judul dibuat rapat supaya judul menempel pada
     teks yang dijelaskannya:

       antar paragraf   1,15rem   (patokan)
       di atas h4       2,10rem   ≈ 1,8x
       di atas h3       2,40rem   ≈ 2,1x
       di atas h2       3,25rem   ≈ 2,8x
       di bawah h2/h3   0,75 / 0,5rem  (jauh lebih rapat dari jarak antar paragraf)

     ⚠ Jangan menyamakan jarak atas dan bawah judul. Judul yang jaraknya sama
     di atas dan bawah tampak milik kedua bagian sekaligus, dan itulah yang
     membuatnya terbaca "berantakan". */
  .artikel-isi h2 {
    margin: 3.25rem 0 .75rem;
    font-size: 1.5rem; line-height: 1.25;
    font-weight: 800; letter-spacing: -.02em;
    color: #0C2030;
    scroll-margin-top: 7rem;               /* padanan scroll-mt-28, header fixed */
  }
  .artikel-isi h3 {
    margin: 2.4rem 0 .5rem;
    font-size: 1.175rem; line-height: 1.35;
    font-weight: 800; color: #122F45;
    scroll-margin-top: 7rem;
  }
  .artikel-isi h4, .artikel-isi h5 {
    margin: 2.1rem 0 .45rem;
    font-size: 1.02rem; line-height: 1.4;
    font-weight: 700; color: #183F5C;
    scroll-margin-top: 7rem;
  }

  /* Judul yang langsung menempel judul lain (h2 disusul h3 — pola paling umum
     di naskah WordPress ini) tidak boleh memakai jarak penuh: keduanya satu
     kesatuan, bukan dua bagian terpisah. */
  .artikel-isi h2 + h3,
  .artikel-isi h2 + h4,
  .artikel-isi h3 + h4 { margin-top: 1.25rem; }

  /* Gambar/figure tepat setelah judul juga dirapatkan — kalau tidak, judulnya
     tampak menggantung jauh di atas gambar yang ia perkenalkan. */
  .artikel-isi h2 + figure,
  .artikel-isi h3 + figure { margin-top: 1rem; }

  @media (min-width: 640px) {
    .artikel-isi h2 { font-size: 1.75rem; }
    .artikel-isi h3 { font-size: 1.3rem; }
  }

  .artikel-isi strong, .artikel-isi b { font-weight: 800; color: #0C2030; }
  .artikel-isi em, .artikel-isi i { font-style: italic; }

  /* Tautan: pola yang sama dengan tautan di dalam naskah halaman legal —
     tebal, garis bawah emas setebal 2px. */
  .artikel-isi a {
    font-weight: 700; color: #1E5074;
    text-decoration: underline;
    text-decoration-color: #D9AC1E;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color .2s ease;
  }
  .artikel-isi a:hover { color: #122F45; }

  .artikel-isi ul, .artikel-isi ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
  .artikel-isi ul { list-style: disc; }
  .artikel-isi ol { list-style: decimal; }
  .artikel-isi li { margin-bottom: .5rem; padding-left: .2rem; }
  .artikel-isi li::marker { color: #4A85AE; font-weight: 700; }
  .artikel-isi ul ul, .artikel-isi ol ol,
  .artikel-isi ul ol, .artikel-isi ol ul { margin: .5rem 0 0; }

  .artikel-isi blockquote {
    margin: 1.6rem 0;
    padding: .3rem 0 .3rem 1.15rem;
    border-left: 3px solid #D9AC1E;
    color: #183F5C; font-style: italic;
  }

  .artikel-isi hr { margin: 2.25rem 0; border: 0; border-top: 1px solid rgba(12, 32, 48, .1); }

  /* ---- Gambar & keterangan ----
     figure dipakai WordPress untuk gambar berketerangan; <img> telanjang juga
     ada. Keduanya diberi sudut membulat dan lebar penuh kolom. */
  .artikel-isi img {
    display: block; width: 100%; height: auto;
    border-radius: 1rem;
    background-color: #EEF5FA;             /* alas saat gambar belum termuat */
  }
  .artikel-isi figure { margin: 1.75rem 0; }
  .artikel-isi figcaption {
    margin-top: .7rem;
    font-size: 13px; line-height: 1.6;
    color: rgba(24, 63, 92, .7);
    text-align: center;
  }
  /* <img> yang berdiri sendiri di dalam <p> — WordPress sering begitu */
  .artikel-isi p > img:only-child { margin: 1.75rem 0; }

  /* ---- Tabel ----
     44 tabel di 31 artikel, sebagian 5 kolom. Di 390 px tabel selebar itu
     PASTI meluber. Pembungkus .artikel-tabel yang menggulung, bukan halamannya:
     aturan proyek "badan halaman tidak boleh menggulung ke samping". */
  .artikel-tabel {
    margin: 1.75rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;
    border: 1px solid rgba(12, 32, 48, .1);
  }
  .artikel-isi table {
    width: 100%; min-width: 32rem;
    border-collapse: collapse;
    font-size: 14px;
  }
  .artikel-isi thead th, .artikel-isi tr:first-child th {
    background-color: #EEF5FA;
    color: #0C2030; font-weight: 800; text-align: left;
  }
  .artikel-isi th, .artikel-isi td {
    padding: .7rem .9rem;
    border-bottom: 1px solid rgba(12, 32, 48, .08);
    vertical-align: top;
  }
  .artikel-isi tr:last-child td { border-bottom: 0; }

  /* Sampul video di dalam artikel memakai .yt-facade yang sudah ada di atas;
     yang perlu di sini hanya jaraknya. */
  .artikel-isi .yt-facade { margin: 1.75rem 0; }

  /* ---- Daftar isi artikel (sidebar sticky) ----
     Penanda judul yang sedang dibaca dipasang site.js lewat class .is-now,
     jadi aturannya CSS murni — sama seperti .hero-dot dan .tw-c. */
  .artikel-toc a.is-now {
    color: #1E5074;
    background-color: #EEF5FA;
  }
  .artikel-toc a.is-now > span { color: #755A10; }