/*
Theme Name: Abed Steady
Theme URI: https://abedsteady.com
Author: Abed Steady
Description: Tema personal branding untuk kreator AI. Empat halaman: Beranda dengan video profil, Belajar AI, Update AI, dan Profil. Tanpa plugin tambahan, tanpa page builder.
Version: 3.4.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abedsteady
Tags: blog, education, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   1. TOKEN — semua warna, jarak, dan bayangan diatur di sini.
      Ubah di sini sekali, seluruh situs ikut berubah.
   ============================================================ */
/* Situs ini sengaja hanya punya satu tampilan: terang.
   Tanpa baris ini, Chrome di Android menyalakan "Mode gelap paksa" —
   dia membalik sendiri warna situs yang tidak menyatakan pilihannya,
   dan latar putih jadi hitam. Menyatakan "light" bikin Chrome
   membiarkan warna aslinya. */
:root { color-scheme: light; }

:root {
  /* Dasar */
  --bg:          #ffffff;
  --bg-alt:      #f6f8fc;
  --bg-elev:     #ffffff;

  /* Pasir hangat — diambil dari latar video profil, biar nyambung */
  --sand:        #faf6f0;
  --sand-2:      #f1e8db;
  --sand-3:      #e3d4bf;

  /* Biru muda */
  --sky:         #eef4fc;
  --sky-2:       #dfeafa;
  --sky-3:       #c4dbf6;

  /* Navy */
  --navy:        #0e2340;
  --navy-2:      #17365c;
  --navy-3:      #2c5488;

  /* Gold */
  --gold:        #b8891a;
  --gold-bright: #e0aa2e;
  --gold-soft:   #f4dfa4;
  --gold-dim:    rgba(184,137,26,.09);
  --on-gold:     #14203a;

  /* Teks */
  --text:        #0e2340;
  --text-dim:    #4c6180;
  --text-faint:  #8394ab;

  /* Garis */
  --line:        #dce5f0;
  --line-soft:   #eaf0f7;

  --ok:          #1a7f4b;

  /* Radius */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-2xl: 34px;

  /* ---- KEDALAMAN ----
     Empat tingkat. Tiap tingkat pakai beberapa bayangan bertumpuk:
     satu tajam & dekat, satu sedang, satu lebar & lembut.
     Itu yang bikin benda terasa punya ketebalan, bukan cuma kotak datar. */
  --d1: 0 1px 2px rgba(14,35,64,.05),
        0 2px 6px rgba(14,35,64,.045);
  --d2: 0 1px 2px rgba(14,35,64,.05),
        0 4px 10px rgba(14,35,64,.05),
        0 10px 24px rgba(14,35,64,.05);
  --d3: 0 2px 4px rgba(14,35,64,.05),
        0 8px 18px rgba(14,35,64,.06),
        0 22px 46px rgba(14,35,64,.07);
  --d4: 0 4px 8px rgba(14,35,64,.05),
        0 16px 32px rgba(14,35,64,.07),
        0 40px 80px rgba(14,35,64,.10);

  /* Garis tipis putih di tepi atas — bikin permukaan terasa menonjol */
  --ring:      inset 0 1px 0 rgba(255,255,255,.92);
  --ring-soft: inset 0 1px 0 rgba(255,255,255,.55);

  --maxw: 1220px;

  --font-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Sans', var(--font-body);
}

/* ============================================================
   2. DASAR
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-3); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.13;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3 { font-size: 1.28rem; }
p  { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px; }

.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px;
}
.skip-link:focus { left: 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   3. LATAR BERLAPIS
      Beberapa gradasi lembut yang saling tumpuk. Ini yang bikin
      halaman terasa punya ruang, bukan kertas putih polos.
   ============================================================ */
.bg-lapis {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 8% -6%,  rgba(224,234,250,.85), transparent 62%),
    radial-gradient(760px 540px at 96% 2%,  rgba(244,232,214,.9),  transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(238,244,252,.9), transparent 62%),
    #ffffff;
}

/* ============================================================
   4. PERMUKAAN — kartu, kaca, panel
   ============================================================ */
.kartu {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.kartu:hover { transform: translateY(-3px); box-shadow: var(--d3), var(--ring); }

/* Kaca buram — dipakai buat elemen yang mengambang di atas isi lain */
.kaca {
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--d3), var(--ring);
}
/* Kalau browser tidak bisa blur, jangan tembus pandang — nanti teksnya susah dibaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kaca { background: rgba(255,255,255,.96); }
}

/* ============================================================
   5. TOMBOL
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 650; font-size: .95rem; line-height: 1;
  padding: 15px 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s;
  text-align: center;
}
.btn-primary {
  background: linear-gradient(178deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 2px 5px rgba(184,137,26,.28),
              0 8px 18px rgba(184,137,26,.24),
              0 18px 36px rgba(184,137,26,.16);
}
.btn-primary:hover {
  color: var(--on-gold); transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 4px 8px rgba(184,137,26,.3),
              0 12px 26px rgba(184,137,26,.26),
              0 26px 50px rgba(184,137,26,.18);
}
.btn-navy {
  background: linear-gradient(178deg, var(--navy-2) 0%, var(--navy) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset,
              0 2px 5px rgba(14,35,64,.24),
              0 10px 22px rgba(14,35,64,.2);
}
.btn-navy:hover { color: #fff; transform: translateY(-2px); }
.btn-putih {
  background: #fff; color: var(--navy);
  border-color: var(--line);
  box-shadow: var(--d1), var(--ring);
}
.btn-putih:hover { color: var(--navy); transform: translateY(-2px); box-shadow: var(--d2), var(--ring); }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.btn-sm { padding: 11px 18px; font-size: .85rem; }

/* ============================================================
   6. HEADER
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.hdr.nempel {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 2px rgba(14,35,64,.04), 0 8px 24px rgba(14,35,64,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: rgba(255,255,255,.97); }
}

.hdr-in { display: flex; align-items: center; gap: 22px; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); }
.brand:hover { color: var(--navy); }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(168deg, var(--navy-2), var(--navy));
  color: var(--gold-bright);
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
              0 2px 5px rgba(14,35,64,.24),
              0 8px 18px rgba(14,35,64,.18);
}
/* Logo yang diunggah lewat Sesuaikan → Identitas Situs.
   Tingginya dikunci supaya header tetap 74px berapa pun ukuran file aslinya. */
.brand-logo { display: block; flex: none; line-height: 0; }
.brand-logo img {
  display: block;
  height: 44px; width: auto; max-width: 190px;
  object-fit: contain;
}
.brand-txt { display: grid; line-height: 1.15; }
.brand-txt strong { font-family: var(--font-display); font-size: .99rem; font-weight: 700; }
.brand-txt em { font-style: normal; font-size: .74rem; color: var(--text-faint); }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 9px 15px; border-radius: 10px;
  font-size: .93rem; font-weight: 560; color: var(--text-dim);
  transition: background .18s, color .18s;
  /* Nama menu tidak boleh dipatahkan jadi dua baris. Tanpa ini, begitu
     ruang header menyempit flexbox mengecilkan tiap tautan sampai
     teksnya melipat — "Update AI" jadi "Update" di atas "AI". Yang
     benar: teksnya utuh, dan yang menyesuaikan jarak antar menunya. */
  white-space: nowrap;
}
/* Menu tidak ikut dikecilkan paksa waktu ruang kurang — brand dan
   deretan ikon yang mengalah duluan. */
.nav { flex: 0 0 auto; }
/* Nama dan tagline brand ikut dijaga utuh — kalau tidak, tekanan ruang
   pindah ke sini dan "Abed Steady" yang patah jadi dua baris. */
.brand-txt strong, .brand-txt em { white-space: nowrap; }
.nav a:hover { background: var(--bg-alt); color: var(--navy); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-parent > a { color: var(--navy); background: var(--sky); font-weight: 640; }

.hdr-cta { flex: none; }

/* ---- Ikon sosial bulat ----
   Dipakai di header, laci menu HP, dan bagian perkenalan Beranda. */
.sosial-bulat { display: flex; gap: 7px; flex: none; }
.sosial-bulat a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  color: var(--navy);
  box-shadow: var(--d1), var(--ring);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, color .2s, background .2s;
}
.sosial-bulat a:hover {
  transform: translateY(-2px);
  color: var(--gold);
  box-shadow: var(--d2), var(--ring);
}
.sosial-bulat svg { width: 17px; height: 17px; fill: currentColor; }
.hdr-in .sosial-bulat { margin-left: 4px; }

.burger {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 13px;
  background: #fff; box-shadow: var(--d1), var(--ring);
  cursor: pointer; padding: 0;
}
.burger span {
  display: block; width: 19px; height: 2px; margin: 4px auto;
  background: var(--navy); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

.drawer {
  border-top: 1px solid var(--line-soft);
  background: rgba(255,255,255,.97);
  padding: 14px 0 22px;
}
.drawer ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 3px; }
.drawer a {
  display: block; padding: 14px 16px; border-radius: 13px;
  font-family: var(--font-display); font-weight: 620; font-size: 1.02rem; color: var(--navy);
}
.drawer a:hover { background: var(--bg-alt); }
.drawer-cta {
  display: block; text-align: center; padding: 16px;
  border-radius: 999px; font-weight: 680;
  background: linear-gradient(178deg, var(--gold-bright), var(--gold));
  color: var(--on-gold) !important;
  box-shadow: 0 8px 18px rgba(184,137,26,.24);
}

/* ============================================================
   7. HERO VIDEO — video landscape penuh jadi header,
      teks menimpa di kiri dan kanan.
   ============================================================ */
/* Hero pakai ruang lebih lebar dari halaman lain, supaya teks di kiri
   dan kanan menjauh dari Abed yang berdiri di tengah frame. */
.hero-video > .wrap { max-width: 1360px; }
.hero-video .hv-kendali { max-width: 1360px; }
.hero-video {
  /* Latar gelap: dipakai kalau video belum diunggah, dan sebagai
     warna dasar sebelum videonya sempat termuat. */
  background: #0b0e13;
  color: #fff;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 76vh, 820px);
  padding: 60px 0 96px;
  overflow: hidden;
}

/* --- Lapisan video --- */
.hv-media { position: absolute; inset: 0; z-index: -2; background: #0b0e13; }
/* .hv-media punya z-index sendiri, jadi anak-anaknya ditumpuk di dalamnya.
   Video harus 0 dan kain penutup 1 — kalau kain diberi angka minus,
   dia justru masuk ke belakang video dan teks jadi tidak terbaca. */
.hv-media video, .hv-media .poster-diam { position: relative; z-index: 0; }
.hv-media video,
.hv-media .poster-diam {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 42%;
}
/* Gambar diam yang menahan tempat; videonya ditumpuk persis di atasnya
   dan baru dimunculkan setelah benar-benar berjalan. Kalau langsung
   terlihat, yang tampak cuma kotak hitam selama berkasnya diunduh. */
.hv-media video {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease;
}
.hv-media video.jalan { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hv-media video { transition: none; }
}

/* Kain penutup: tebal di tepi kiri & kanan tempat teks berada,
   bening di tengah tempat Abed berdiri. Warnanya putih kehangatan
   supaya menyatu dengan latar halaman, bukan gelap. */
.hv-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Kiri: pekat di tepi, bening penuh sebelum sampai ke Abed */
    linear-gradient(90deg,
      rgba(8,10,14,.94) 0%,
      rgba(8,10,14,.9)  16%,
      rgba(8,10,14,.74) 24%,
      rgba(8,10,14,.38) 31%,
      rgba(8,10,14,0)   35%),
    /* Kanan: cermin dari yang kiri */
    linear-gradient(270deg,
      rgba(8,10,14,.94) 0%,
      rgba(8,10,14,.9)  14%,
      rgba(8,10,14,.72) 22%,
      rgba(8,10,14,.36) 28%,
      rgba(8,10,14,0)   33%),
    /* Atas & bawah: bikin tepi hero menyatu, tidak putus mendadak */
    linear-gradient(180deg,
      rgba(8,10,14,.55) 0%,
      rgba(8,10,14,.12) 16%,
      rgba(8,10,14,.12) 62%,
      rgba(8,10,14,.82) 100%);
}

/* --- Susunan isi: teks kiri | ruang kosong buat Abed | kartu kanan --- */
.hv-isi {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 34%) minmax(0, .78fr);
  gap: 28px;
  align-items: center;
}
.hv-kiri  { text-align: left; }
/* grid-auto-rows: 1fr bikin ketiga kartu setinggi kartu terpanjang.
   Tanpa ini, kartu yang judulnya dua baris jadi lebih jangkung
   dan deretannya kelihatan tidak rata. */
.hv-kanan { display: grid; gap: 12px; grid-auto-rows: 1fr; }
.hv-tengah { min-height: 1px; }

.hero-video h1 { font-size: clamp(2.05rem, 3vw, 2.95rem); margin-bottom: 18px; max-width: 12em; }
.hero-video h1 .emas {
  background: linear-gradient(96deg, var(--gold) 8%, var(--gold-bright) 55%, var(--gold) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
/* Lebarnya sengaja dibatasi supaya kalimat berhenti sebelum masuk
   ke badan Abed — di situ latarnya gelap dan teks jadi susah dibaca. */
.hero-sub { font-size: 1rem; color: rgba(255,255,255,.82); max-width: 19em; margin-bottom: 26px; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-video .hero-aksi .btn-lg { padding: 16px 24px; font-size: .95rem; }
/* Tombol kedua di atas video gelap: garis tipis putih, bukan kotak putih penuh */
.hero-video .btn-putih {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 22px rgba(0,0,0,.24);
}
.hero-video .btn-putih:hover { background: rgba(255,255,255,.18); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-soft);
  padding: 8px 15px; border-radius: 999px;
  box-shadow: var(--d1), var(--ring);
  margin-bottom: 18px;
}
/* Di atas video gelap, label ini pakai warna terang */
.hero-video .eyebrow {
  color: var(--gold-bright);
  background: rgba(224,170,46,.14);
  border-color: rgba(224,170,46,.34);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright);
  box-shadow: 0 0 0 0 rgba(224,170,46,.6);
  animation: abpulse 2.4s infinite;
}
@keyframes abpulse {
  70%  { box-shadow: 0 0 0 8px rgba(224,170,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,170,46,0); }
}
@media (prefers-reduced-motion: reduce) { .eyebrow i { animation: none; } }

.proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; max-width: 22em; }
.stars { color: var(--gold-bright); letter-spacing: 2px; font-size: .92rem; }
.proof p { font-size: .84rem; color: var(--text-dim); margin: 0; }
.hero-video .proof p { color: rgba(255,255,255,.72); }

/* --- Kartu kecil di kanan --- */
.stat-kartu {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 10px 30px rgba(0,0,0,.28);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), background .28s;
}
.stat-kartu:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stat-kartu { background: rgba(18,22,30,.82); }
}
.stat-ikon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.1rem;
  background: rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
}
.stat-teks { line-height: 1.3; }
.stat-teks b { display: block; font-family: var(--font-display); font-size: .91rem; font-weight: 680; color: #fff; }
.stat-teks span { display: block; font-size: .77rem; color: rgba(255,255,255,.6); margin-top: 2px; }

/* --- Nama & tombol suara, menempel di bawah video --- */
.hv-kendali {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 22px;
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
.hv-nama { line-height: 1.25; color: var(--navy); }
.hv-nama strong {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.hv-nama span { display: block; font-size: .78rem; color: var(--text-dim); }

.btn-suara {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 650; font-size: .85rem;
  color: #fff;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 22px rgba(0,0,0,.3);
  transition: transform .2s, background .2s;
}
.btn-suara:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.btn-suara svg { width: 15px; height: 15px; flex: none; }
.btn-suara .ikon-bisu  { display: block; }
.btn-suara .ikon-bunyi { display: none; }
.btn-suara[aria-pressed="true"] .ikon-bisu  { display: none; }
.btn-suara[aria-pressed="true"] .ikon-bunyi { display: block; }

/* Tombol putar besar — hanya muncul kalau browser menolak main sendiri */
.btn-putar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4;
  width: 76px; height: 76px; border-radius: 50%;
  display: none; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.94);
  border: 1px solid #fff;
  box-shadow: var(--d4);
}
.btn-putar.tampil { display: grid; }
.btn-putar svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--navy); }

/* Deretan nama tools di bawah hero */
.strip { padding: 8px 0 34px; }
.strip-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  justify-content: center;
  padding: 18px 24px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line-soft);
  box-shadow: var(--d1), var(--ring);
}
.strip-in em {
  font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}
.strip-in span { font-family: var(--font-display); font-weight: 620; font-size: .92rem; color: var(--navy-3); opacity: .78; }

/* ============================================================
   8. BAGIAN UMUM
   ============================================================ */
.bagian { padding: 66px 0; position: relative; }
.bagian-pasir::before,
.bagian-biru::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
}
.bagian-pasir::before { background: linear-gradient(180deg, rgba(250,246,240,0), rgba(250,246,240,.95) 22%, rgba(250,246,240,.95) 78%, rgba(250,246,240,0)); }
.bagian-biru::before  { background: linear-gradient(180deg, rgba(238,244,252,0), rgba(238,244,252,.95) 22%, rgba(238,244,252,.95) 78%, rgba(238,244,252,0)); }

.judul-bagian { max-width: 42em; margin: 0 auto 40px; text-align: center; }
.judul-bagian.kiri { margin-inline: 0; text-align: left; }
.judul-bagian p { color: var(--text-dim); margin: 0; }
.label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .69rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim); border: 1px solid var(--gold-soft);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* ============================================================
   9. SOROTAN (carousel event / promo)
   ============================================================ */
.sorot { padding: 6px 0 42px; position: relative; z-index: 2; }
.sorot-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sorot-nav { display: flex; gap: 8px; }
.arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  box-shadow: var(--d1), var(--ring);
  display: grid; place-items: center; cursor: pointer; color: var(--navy);
  transition: transform .2s, box-shadow .2s;
}
.arrow:hover { transform: translateY(-2px); box-shadow: var(--d2), var(--ring); }
.arrow:disabled { opacity: .35; cursor: default; transform: none; }
.arrow svg { width: 17px; height: 17px; }

.sorot-rel { position: relative; }

/* Lebar tiap slide dihitung dari --sorot-tampil, yaitu berapa slide
   yang muat sekaligus. Cuma angka itu yang diubah tiap breakpoint,
   jadi tidak ada rumus lebar yang ditulis berulang-ulang. */
.sorot-trek {
  --sorot-tampil: 3;
  --sorot-sela: 20px;
  display: flex; gap: var(--sorot-sela); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 22px; margin: -6px -2px -22px;
  scrollbar-width: none;
}
.sorot-trek::-webkit-scrollbar { display: none; }
.sorot-trek:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: var(--r-lg); }

.sorot-slide {
  flex: 0 0 calc(
    (100% - (var(--sorot-tampil) - 1) * var(--sorot-sela)) / var(--sorot-tampil)
  );
  scroll-snap-align: start;
  display: block; position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, var(--sky-2), var(--sand-2));
  box-shadow: var(--d3), var(--ring);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
a.sorot-slide:hover { transform: translateY(-5px); box-shadow: var(--d4), var(--ring); }
a.sorot-slide:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

/* Semua desain dipotong ke bentuk yang sama supaya barisnya rata,
   berapa pun ukuran file yang diunggah. */
.sorot-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--sorot-rasio, 4 / 5);
  object-fit: cover; object-position: center;
}
/* Sudut gambar ikut membulat walau ada tanda panah tepat di atasnya */
.sorot-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(14,35,64,.07);
}

.titik { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.titik button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: var(--line); transition: width .25s, background .25s;
}
.titik button[aria-current="true"] { width: 26px; border-radius: 999px; background: var(--gold-bright); }

/* ============================================================
   10. KARTU ARTIKEL
   ============================================================ */
.uc {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.uc:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); }
.uc-gbr { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.uc-gbr img { width: 100%; height: 100%; object-fit: cover; }
.uc-kosong {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--sky), var(--sand));
  color: var(--navy-3); font-family: var(--font-display); font-weight: 700; font-size: 2rem; opacity: .5;
}
.uc-isi { padding: 20px 21px 22px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.uc-kat {
  font-family: var(--font-display);
  font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.uc h3 { font-size: 1.06rem; margin: 0; }
.uc h3 a { color: var(--navy); }
.uc h3 a:hover { color: var(--gold); }
.uc p { font-size: .89rem; color: var(--text-dim); margin: 0; }
.uc-kaki {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .77rem; color: var(--text-faint);
}
.uc-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-tools span {
  font-size: .71rem; color: var(--text-faint);
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  padding: 3px 9px; border-radius: 7px;
}

/* ============================================================
   11. KARTU TOOL AFFILIATE
       Muncul di dalam artikel dan di halaman Belajar AI.
   ============================================================ */
.tool {
  display: flex; flex-direction: column; gap: 11px;
  padding: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.tool:hover { transform: translateY(-3px); box-shadow: var(--d3), var(--ring); }
.tool-atas { display: flex; align-items: flex-start; gap: 13px; }
.tool-logo {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(168deg, var(--sand), var(--sand-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 8px rgba(14,35,64,.08);
  font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.05rem;
}
.tool-logo img { width: 100%; height: 100%; object-fit: cover; }
.tool-nama { flex: 1; min-width: 0; }
.tool-nama h3 { font-size: 1.05rem; margin: 0 0 3px; }
.tool-harga { font-size: .79rem; color: var(--text-faint); }
.tool-gratis {
  display: inline-block; font-size: .67rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ok);
  background: rgba(26,127,75,.09); border: 1px solid rgba(26,127,75,.22);
  padding: 3px 9px; border-radius: 999px;
}
.tool-baris { font-size: .88rem; color: var(--text-dim); margin: 0; }
.tool-baris b { color: var(--navy); font-weight: 640; }
.tool-kaki { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.tool-aff {
  font-size: .68rem; color: var(--text-faint);
  border: 1px dashed var(--line); padding: 3px 9px; border-radius: 7px;
}

/* Blok tool di tengah artikel — sengaja dibedakan supaya kelihatan
   sebagai rekomendasi, bukan bagian dari kalimat penulis. */
.tool-sisip {
  margin: 34px 0;
  padding: 26px;
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, var(--sand) 0%, #fff 62%);
  border: 1px solid var(--sand-2);
  box-shadow: var(--d3), var(--ring);
}
.tool-sisip > .label { margin-bottom: 14px; }
.tool-sisip .tool { box-shadow: var(--d1), var(--ring); }
.tool-sisip .grid-2 { gap: 16px; }

/* ============================================================
   11b. HALAMAN KERJASAMA — kartu layanan & portfolio
   ============================================================ */
.layanan {
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.layanan:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); }
.layanan-ikon {
  width: 50px; height: 50px; flex: none; border-radius: 15px;
  display: grid; place-items: center; font-size: 1.4rem;
  margin-bottom: 16px;
  background: linear-gradient(168deg, var(--sand), var(--sand-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px rgba(14,35,64,.08);
}
.layanan h3 { font-size: 1.12rem; margin-bottom: 8px; }
.layanan p { font-size: .89rem; color: var(--text-dim); margin-bottom: 16px; }
.layanan-poin {
  list-style: none; margin: auto 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 7px;
}
.layanan-poin li {
  position: relative; padding-left: 20px;
  font-size: .83rem; color: var(--text-dim);
}
.layanan-poin li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

/* Kartu lebar di bawah daftar layanan. Tujuh layanan di dalam grid
   tiga kolom menyisakan satu kartu sendirian di baris ketiga —
   kartu lebar ini mengisi baris itu penuh. */
.layanan-lebar {
  grid-column: 1 / -1;
  background: linear-gradient(168deg, var(--sand), var(--bg-elev) 62%);
}
.layanan-lebar:hover { transform: none; box-shadow: var(--d2), var(--ring); }
.lebar-kepala { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.lebar-kepala .layanan-ikon { margin-bottom: 0; background: linear-gradient(168deg,#fff,var(--sand-2)); }
/* Poin di kartu lebar dibuat berjajar — kalau menumpuk ke bawah
   seperti di kartu biasa, ruang kosong di kanannya terlalu lebar. */
.lebar-poin {
  margin: 0; padding: 12px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pelatihan-segmen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.segmen {
  padding: 18px 18px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--d1), var(--ring);
}
.segmen-ikon { font-size: 1.15rem; display: block; margin-bottom: 8px; }
.segmen h4 { font-size: .97rem; margin: 0 0 6px; }
.segmen p { font-size: .83rem; color: var(--text-dim); margin: 0; }

/* ============================================================
   HALAMAN MENTORING PRIVATE
   ============================================================ */
/* Gambar utama. Dipotong ke 16:9 lewat CSS supaya tingginya terkendali
   berapa pun ukuran berkas yang diunggah — foto tegak tidak akan
   membuat halaman jadi memanjang. */
.mentor-gbr {
  margin: 0; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-2xl);
  box-shadow: var(--d4), var(--ring);
  background: var(--bg-alt);
}
.mentor-gbr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }

/* Empat pertemuan berjajar. Tidak pakai .tangga karena .tangga
   dirancang untuk tiga kartu bertingkat. */
.sesi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sesi-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.sesi-item:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); }
.sesi-no {
  font-family: var(--font-display);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.sesi-item .ikon3d { width: 50px; height: 50px; font-size: 1.3rem; border-radius: 16px; margin-bottom: 6px; }
.sesi-item h3 { font-size: 1.03rem; margin: 0; }
.sesi-item p { font-size: .87rem; color: var(--text-dim); margin: 0; }

/* Empat fakta pokok. Ditulis .angka.angka-4 (bukan .angka-4 saja) karena
   aturan .angka bawaan berada di bawahnya dalam berkas ini — dengan
   kekhususan yang sama, yang di bawah selalu menang. */
.angka.angka-4 { grid-template-columns: repeat(4, 1fr); }

/* Daftar "belum cocok" — bentuknya sama dengan .cek, tandanya saja beda. */
.silang { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.silang li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; color: var(--text-dim); }
.silang i {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: .8rem; font-weight: 700;
  color: var(--text-faint); background: var(--bg-alt);
  border: 1px solid var(--line);
  margin-top: 1px;
}

/* --- Enam hal yang dibawa pulang ---
   Dulu satu kartu tinggi di kiri dan dua kartu di kanan, jadi sudut
   kiri bawah menganga kosong. Sekarang enam kartu setara 3x2 —
   barisnya penuh dan tinggi tiap kartu sama. */
.bawa-grid { gap: 18px; }
.bawa {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(166deg, #ffffff 0%, #ffffff 52%, var(--bg-alt) 100%);
  /* Bayangan bertingkat: garis terang di dalam (seolah kena cahaya dari
     atas), bayangan rapat di bawah kartu, lalu bayangan lebar yang jatuh
     ke halaman. Tiga lapis ini yang bikin kartunya terasa terangkat. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(14,35,64,.06),
    0 10px 20px -8px rgba(14,35,64,.16),
    0 28px 46px -22px rgba(14,35,64,.22);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.bawa:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 2px 4px rgba(14,35,64,.07),
    0 18px 32px -10px rgba(14,35,64,.2),
    0 40px 62px -26px rgba(14,35,64,.26);
}
.bawa-no {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .84rem; font-weight: 700;
  color: var(--on-gold);
  background: linear-gradient(165deg, var(--gold-bright), var(--gold));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 4px rgba(184,137,26,.3),
    0 8px 14px -4px rgba(184,137,26,.36);
}
.bawa p { margin: 0; font-size: .92rem; color: var(--text-dim); line-height: 1.55; padding-top: 6px; }

/* --- Cocok / belum cocok ---
   Dua kartu sejajar dengan tinggi sama. Catatan kecil didorong ke dasar
   kartu pakai margin-top:auto supaya dua kartunya tetap rata bawah
   walau jumlah poinnya beda. */
.pilih-grid { gap: 22px; align-items: stretch; }
.pilih {
  display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 2px 4px rgba(14,35,64,.06),
    0 14px 26px -10px rgba(14,35,64,.17),
    0 34px 54px -24px rgba(14,35,64,.22);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.pilih:hover { transform: translateY(-5px); }
.pilih-ya    { background: linear-gradient(166deg, #ffffff, var(--sand)); }
.pilih-tidak { background: linear-gradient(166deg, #ffffff, var(--bg-alt)); }
.pilih-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pilih-kepala h3 { margin: 0; font-size: 1.1rem; }
.pilih-ikon {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; font-size: .95rem; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px -2px rgba(14,35,64,.22);
}
.pilih-ya .pilih-ikon    { color: #fff; background: linear-gradient(165deg, #1f9159, #147a45); }
.pilih-tidak .pilih-ikon { color: #fff; background: linear-gradient(165deg, #7f93ad, #5a6f8c); }
.pilih-catatan { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--text-faint); }

/* --- Ikon 3D ---
   Kedalamannya dibangun dari empat lapis: garis terang di tepi atas
   (cahaya), bayangan dalam di tepi bawah (lengkungan), bayangan rapat
   di bawah ikon, dan bayangan lebar yang jatuh ke halaman. Ditambah
   kemiringan tipis lewat perspective supaya terasa berdiri, bukan
   tempelan datar. */
.ikon3d {
  --i3d-a: var(--gold-bright);
  --i3d-b: var(--gold);
  position: relative;
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  border-radius: 18px;
  background: linear-gradient(158deg, var(--i3d-a), var(--i3d-b));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(0,0,0,.16),
    0 2px 3px rgba(14,35,64,.14),
    0 10px 18px -6px rgba(14,35,64,.3),
    0 24px 36px -16px rgba(14,35,64,.34);
  transform: perspective(460px) rotateX(10deg);
  transition: transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s;
}
/* Kilau melengkung di separuh atas — ini yang bikin permukaannya
   terbaca sebagai benda, bukan kotak berwarna. */
.ikon3d::after {
  content: ""; position: absolute; inset: 2px 2px 45% 2px;
  border-radius: 16px 16px 46% 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  pointer-events: none;
}
.ikon3d-navy  { --i3d-a: var(--navy-3); --i3d-b: var(--navy); }
.ikon3d-hijau { --i3d-a: #23a065;       --i3d-b: #147a45; }
.ikon3d-gold  { --i3d-a: var(--gold-bright); --i3d-b: var(--gold); }

/* Di kepala bagian ikonnya ditaruh di tengah, di atas label. */
.ikon3d-jd { margin: 0 auto 18px; }

/* Diarahkan kursor: ikon berdiri lebih tegak dan naik sedikit. */
.judul-bagian:hover .ikon3d-jd,
.sesi-item:hover .ikon3d {
  transform: perspective(460px) rotateX(0deg) translateY(-4px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(0,0,0,.16),
    0 3px 5px rgba(14,35,64,.15),
    0 16px 26px -8px rgba(14,35,64,.32),
    0 34px 48px -20px rgba(14,35,64,.36);
}

/* --- Kartu penawaran di penutup halaman Mentoring ---
   Dulu harganya jadi judul h2, jadi angkanya patah dua baris dan
   posisinya terasa timpang. Sekarang harga punya blok sendiri, dan
   seluruh penutupnya jadi satu kartu terangkat. */
.tawar {
  position: relative;
  max-width: 720px; margin: 34px auto 0;
  padding: 62px 40px 40px;
  text-align: center;
  border-radius: var(--r-2xl);
  background: linear-gradient(168deg, #ffffff 0%, #ffffff 56%, var(--sand) 100%);
  border: 1px solid var(--line-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 2px 5px rgba(14,35,64,.07),
    0 18px 34px -12px rgba(14,35,64,.2),
    0 46px 70px -30px rgba(14,35,64,.26);
}
/* Ikon utama dibuat menggantung di tepi atas kartu — ini yang bikin
   kartunya terbaca sebagai objek berlapis, bukan kotak rata. */
.tawar-ikon {
  position: absolute; top: -34px; left: 50%;
  width: 68px; height: 68px; font-size: 1.75rem; border-radius: 22px;
  transform: translateX(-50%) perspective(500px) rotateX(10deg);
}
.tawar:hover .tawar-ikon { transform: translateX(-50%) perspective(500px) rotateX(0deg) translateY(-5px); }
.tawar h2 { margin: 12px 0 0; font-size: clamp(1.5rem, 3vw, 2rem); }

.tawar-harga { margin: 22px 0 26px; }
.tawar-harga b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1;
  color: var(--navy);
  /* Bayangan tipis di bawah angka — bikin harganya seolah timbul. */
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 4px 14px rgba(14,35,64,.18);
}
.tawar-harga span { display: block; margin-top: 10px; font-size: .86rem; color: var(--text-faint); }

.tawar-poin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.tawar-poin > div { display: grid; justify-items: center; gap: 10px; }
.tawar-poin .ikon3d { width: 46px; height: 46px; font-size: 1.15rem; border-radius: 15px; }
.tawar-poin em { font-style: normal; font-size: .82rem; color: var(--text-dim); line-height: 1.4; }

.tawar-teks { font-size: .92rem; color: var(--text-dim); margin: 0 auto 26px; max-width: 34em; }

/* Tombol WhatsApp — satu-satunya jalan pesan di halaman ini, jadi
   dibuat besar, penuh selebar kartu, dan terasa bisa ditekan. */
.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 19px 26px;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 700;
  color: #fff; border-radius: 999px;
  background: linear-gradient(170deg, #2fb56d 0%, #1faa5c 45%, #16884a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.18),
    0 3px 5px rgba(12,84,48,.28),
    0 14px 24px -6px rgba(12,84,48,.42),
    0 30px 44px -18px rgba(12,84,48,.4);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.btn-wa:hover { color: #fff; transform: translateY(-3px); }
.btn-wa:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 2px 4px rgba(12,84,48,.3); }
.btn-wa svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

.tawar-kaki { margin: 20px 0 0; font-size: .87rem; }

/* --- Perjalanan karier di halaman Profil ---
   Dulu bagian ini cuma empat kolom teks polos yang mengambang di atas
   satu garis tipis: tanpa wadah, mata tidak tahu di mana satu tahap
   berhenti dan tahap berikutnya mulai, jadi terlihat berantakan.
   Sekarang tiap tahap punya kartunya sendiri, ikonnya duduk di tepi
   atas kartu, dan garis penghubungnya ditarik dari ikon ke ikon. */
.jalan-teks { max-width: 42em; margin: 0 auto 62px; text-align: center; }
.jalan-teks p { color: var(--text-dim); line-height: 1.8; }
.jalan-teks p:last-child { margin-bottom: 0; }

.jejak {
  --jejak-sela: 22px;
  --jejak-ikon: 54px;
  --jejak-geser: 24px; /* jarak ikon dari tepi kiri kartu */
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: var(--jejak-sela); row-gap: var(--jejak-sela);
  align-items: stretch;
  /* Ruang untuk ikon yang menggantung di atas kartu. */
  padding-top: calc(var(--jejak-ikon) / 2 + 6px);
}
.jejak-item {
  position: relative; z-index: 1;
  display: grid; align-content: start; gap: 10px;
  padding: 40px 22px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(166deg, #ffffff 0%, #ffffff 52%, var(--bg-alt) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(14,35,64,.06),
    0 10px 20px -8px rgba(14,35,64,.16),
    0 28px 46px -22px rgba(14,35,64,.22);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.jejak-item:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 2px 4px rgba(14,35,64,.07),
    0 18px 32px -10px rgba(14,35,64,.2),
    0 40px 62px -26px rgba(14,35,64,.26);
}
/* Ikon keluar dari alur kartu supaya tingginya tidak ikut dihitung —
   dengan begitu baris teks di keempat kartu tetap mulai sejajar. */
.jejak-item .ikon3d {
  position: absolute; z-index: 2;
  top: calc(var(--jejak-ikon) / -2); left: var(--jejak-geser);
  width: var(--jejak-ikon); height: var(--jejak-ikon);
  margin: 0; font-size: 1.4rem;
}
/* Garis penghubung: ditarik dari tengah ikon kartu ini ke tengah ikon
   kartu berikutnya, jadi panjangnya selalu selebar kartu + selanya.
   Kartu terakhir tidak menarik garis — tidak ada tujuan lagi. */
.jejak-item::before {
  content: ""; position: absolute; z-index: 0;
  top: 0; left: calc(var(--jejak-geser) + var(--jejak-ikon) / 2);
  width: calc(100% + var(--jejak-sela));
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--sand-3) 55%, var(--sky-3));
}
.jejak-item:last-child::before { display: none; }

/* Subgrid bikin label, judul, dan keterangan keempat kartu jatuh di
   baris yang sama walau panjang teksnya beda-beda. */
@supports (grid-template-rows: subgrid) {
  .jejak { grid-template-rows: auto auto auto; }
  .jejak-item { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
}
.jejak-thn {
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold);
}
.jejak-item h3 { font-size: 1.04rem; margin: 0; line-height: 1.32; }
.jejak-item p { font-size: .88rem; color: var(--text-dim); margin: 0; line-height: 1.62; }

.karya {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.karya:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); }
.karya-gbr { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.karya-gbr img { width: 100%; height: 100%; object-fit: cover; }
.karya-jenis {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--font-display);
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: rgba(14,35,64,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.karya-isi { padding: 20px 21px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.karya-isi h3 { font-size: 1.05rem; margin: 0; }
.karya-klien { font-size: .79rem; color: var(--text-faint); margin: 0; }
.karya-isi > p { font-size: .88rem; color: var(--text-dim); margin: 0; }
.karya-kaki {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .82rem;
}
.karya-hasil {
  font-family: var(--font-display); font-weight: 660; color: var(--gold);
  font-size: .84rem;
}

/* ============================================================
   11c. KARTU KELAS AI
   ============================================================ */
.kelas {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.kelas:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); }
.kelas-unggul {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-soft), var(--d3), var(--ring);
}
.kelas-unggul:hover { box-shadow: 0 0 0 1px var(--gold-bright), var(--d4), var(--ring); }
.kelas-pita {
  font-family: var(--font-display);
  font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-gold);
  background: linear-gradient(178deg, var(--gold-bright), var(--gold));
  padding: 5px 11px; border-radius: 999px;
}

.kelas-gbr { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.kelas-gbr img { width: 100%; height: 100%; object-fit: cover; }
/* Label status ditaruh DI BAWAH gambar, bukan menumpang di atasnya.
   Desain kelas yang diunggah Abed sudah penuh informasi — label yang
   menutupi sudutnya bikin desainnya tidak terbaca utuh. */
/* Satu baris berisi semua label kartu. Semuanya di bawah gambar —
   tidak ada yang menutupi desain yang diunggah Abed. */
.kelas-label { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 2px; }

.kelas-status {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  color: #fff; background: var(--navy);
}
/* Nama profesi. Dulu dipotong pakai titik-titik karena ruangnya sempit
   di atas gambar; sekarang di bawah gambar teksnya muat utuh. */
.prog-profesi {
  font-family: var(--font-display);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  color: var(--on-gold);
  background: linear-gradient(178deg, var(--gold-bright), var(--gold));
  padding: 5px 11px; border-radius: 999px;
}
/* Warna solid — sebelumnya semi-tembus karena ditumpuk di atas gambar.
   Di atas kartu putih, warna tembus jadi pucat dan susah dibaca. */
.kelas-status.status-pendaftaran-dibuka { background: #147a45; }
.kelas-status.status-kuota-penuh        { background: #a84a18; }
.kelas-status.status-segera-hadir       { background: #24497a; }
.kelas-status.status-ditutup            { background: #5a6f8c; }

.kelas-isi { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.kelas-isi h3 { font-size: 1.12rem; margin: 0; }
.kelas-durasi { font-size: .78rem; color: var(--text-faint); margin: 0; }
.kelas-ring { font-size: .89rem; color: var(--text-dim); margin: 0; }
.kelas-untuk { font-size: .84rem; color: var(--text-dim); margin: 0; }
.kelas-untuk b { color: var(--navy); font-weight: 640; }
.kelas-poin {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 7px;
}
.kelas-poin li {
  position: relative; padding-left: 22px;
  font-size: .84rem; color: var(--text-dim);
}
.kelas-poin li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  font-size: .78rem; font-weight: 800; color: var(--gold);
}
/* Harga di atas, tombol melebar penuh di bawahnya.
   Kalau disejajarkan, kartu yang punya harga coret jadi terlalu lebar
   dan tombolnya turun sendiri — tiga kartu jadi tidak seragam. */
.kelas-kaki {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 12px; justify-items: stretch;
}
.kelas-kaki .btn, .kelas-kaki .btn-mati { width: 100%; }
.kelas-harga { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.kelas-harga s { font-size: .82rem; color: var(--text-faint); }
.kelas-harga b {
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; color: var(--navy);
}
.btn-mati {
  background: var(--bg-elev-2, var(--bg-alt));
  color: var(--text-faint);
  border-color: var(--line);
  cursor: not-allowed; box-shadow: none;
  padding: 13px 20px; font-size: .88rem;
}
.btn-mati:hover { transform: none; color: var(--text-faint); }

/* Kotak "belum ada isinya" */
.kosong-isi { padding: 44px 32px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.kosong-isi h3 { margin: 0; }
.kosong-isi p { margin: 0; color: var(--text-dim); max-width: 40em; }
.hitung-isi { font-size: .85rem; color: var(--text-faint); margin-top: 10px; }

/* ============================================================
   12. HALAMAN BELAJAR AI
   ============================================================ */
.tangga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.anak-tangga {
  position: relative; padding: 28px 26px 30px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--d2), var(--ring);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.anak-tangga:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); }
/* Tiap anak tangga makin tinggi — biar terasa berjenjang */
.anak-tangga:nth-child(2) { transform: translateY(-14px); }
.anak-tangga:nth-child(2):hover { transform: translateY(-18px); }
.anak-tangga:nth-child(3) { transform: translateY(-28px); }
.anak-tangga:nth-child(3):hover { transform: translateY(-32px); }
.tangga-no {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 700;
  line-height: 1; color: var(--sand-3); margin-bottom: 12px;
}
.anak-tangga:nth-child(2) .tangga-no { color: var(--sky-3); }
.anak-tangga:nth-child(3) .tangga-no { color: var(--gold-soft); }
.anak-tangga h3 { font-size: 1.16rem; }
.anak-tangga p { font-size: .9rem; color: var(--text-dim); margin-bottom: 16px; }
.tangga-cap {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
.cap-gratis { color: var(--ok); background: rgba(26,127,75,.09); border: 1px solid rgba(26,127,75,.22); }
.cap-bayar  { color: var(--gold); background: var(--gold-dim); border: 1px solid var(--gold-soft); }

.materi {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 22px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--d1), var(--ring);
  transition: transform .25s, box-shadow .25s;
}
.materi:hover { transform: translateY(-3px); box-shadow: var(--d3), var(--ring); }
.materi-no {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--navy);
  background: linear-gradient(168deg, var(--sky), var(--sky-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 8px rgba(14,35,64,.08);
}
.materi h3 { font-size: 1.02rem; margin: 0 0 4px; }
.materi p { font-size: .87rem; color: var(--text-dim); margin: 0; }

/* ============================================================
   13. HALAMAN PROFIL
   ============================================================ */
.profil-atas { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center; }
.profil-foto {
  position: relative; aspect-ratio: 4/5; border-radius: var(--r-2xl); overflow: hidden;
  background: linear-gradient(165deg, var(--sand), var(--sand-2));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--d4), var(--ring);
}
.profil-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profil-foto .kosong { display: grid; place-items: center; height: 100%; color: var(--navy-3); opacity: .45; font-size: 3rem; font-family: var(--font-display); font-weight: 700; }

.angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
.angka-item {
  padding: 20px; text-align: center; border-radius: var(--r-lg);
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--d2), var(--ring);
}
.angka-item b { display: block; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.angka-item span { display: block; font-size: .77rem; color: var(--text-faint); margin-top: 5px; }

.cek { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cek li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; color: var(--text-dim); }
.cek i {
  width: 22px; height: 22px; flex: none; margin-top: 2px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: .68rem; font-weight: 800;
  background: linear-gradient(168deg, var(--gold-soft), #ecc76e); color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 5px rgba(184,137,26,.22);
}

.sosial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Isi kartu ditumpuk dan ditaruh di tengah.
   Sebelumnya isinya rata kiri, jadi ada 200px lebih ruang kosong
   di sebelah kanan tiap kartu — kelihatan miring padahal kotaknya
   sudah sama lebar. */
.sosial-kartu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px 20px; text-align: center;
  border-radius: var(--r-lg); background: var(--bg-elev);
  border: 1px solid var(--line-soft); box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.sosial-kartu:hover { transform: translateY(-4px); box-shadow: var(--d4), var(--ring); color: inherit; }
.sosial-ikon {
  width: 54px; height: 54px; flex: none; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(168deg, var(--navy-2), var(--navy)); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset,
              0 4px 10px rgba(14,35,64,.22),
              0 12px 26px rgba(14,35,64,.16);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.sosial-kartu:hover .sosial-ikon { transform: translateY(-2px) scale(1.04); }
.sosial-ikon svg { width: 30px; height: 30px; fill: currentColor; }
.sosial-teks { display: block; }
.sosial-kartu b {
  display: block; font-family: var(--font-display);
  font-weight: 680; color: var(--navy); font-size: 1rem; line-height: 1.25;
}
/* HARUS .sosial-teks span, bukan .sosial-kartu span.
   Kotak ikon dan tombol "Ikuti" juga <span> di dalam kartu ini —
   kalau aturannya terlalu luas, keduanya ikut kena dan menang
   karena kekhususannya lebih tinggi: ikon batal jadi grid (jadi
   gambarnya nempel ke atas kotak) dan tombol Ikuti kehilangan
   warna gold-nya. */
.sosial-teks span { display: block; font-size: .82rem; color: var(--text-faint); margin-top: 3px; }
.sosial-ikut {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-display); font-size: .74rem; font-weight: 660;
  letter-spacing: .04em; color: var(--gold);
  background: var(--gold-dim); border: 1px solid var(--gold-soft);
  padding: 5px 14px; border-radius: 999px;
  transition: background .2s;
}
.sosial-kartu:hover .sosial-ikut { background: rgba(224,170,46,.2); }

/* ============================================================
   14. ARSIP & ARTIKEL
   ============================================================ */
.hal-kepala { padding: 52px 0 30px; }
.hal-kepala h1 { margin-bottom: 12px; text-wrap: balance; }
.hal-kepala p { color: var(--text-dim); max-width: 40em; margin: 0; }

/* Penggal kata yang tidak boleh patah di tengah, misal "1-on-1". */
.satu-baris { white-space: nowrap; }

.saring { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 34px; }
.saring a, .saring button {
  font-family: var(--font-display); font-size: .84rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.8); border: 1px solid var(--line);
  color: var(--text-dim); box-shadow: var(--d1), var(--ring);
  transition: transform .2s, box-shadow .2s, color .2s;
}
.saring a:hover, .saring button:hover { transform: translateY(-2px); color: var(--navy); box-shadow: var(--d2), var(--ring); }
.saring [aria-current="true"], .saring .aktif {
  background: linear-gradient(178deg, var(--navy-2), var(--navy));
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 5px rgba(14,35,64,.22), 0 10px 22px rgba(14,35,64,.18);
}

/* --- Pindah halaman daftar artikel ---
   Sebelumnya bagian ini sama sekali tidak diberi gaya, jadi WordPress
   menampilkannya sebagai teks polos kecil ("1 2 3 Berikutnya") yang
   nempel di kiri — orang tidak sadar itu bisa diklik. Sekarang tiap
   angka jadi tombol bundar minimal 46px, ditaruh di tengah. */
.pagination { margin-top: 34px; }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 9px;
}
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 46px; padding: 0 14px;
  font-family: var(--font-display); font-size: .95rem; font-weight: 660;
  color: var(--navy); background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--d1), var(--ring);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, color .2s;
}
.pagination a.page-numbers:hover {
  transform: translateY(-2px); color: var(--gold);
  box-shadow: var(--d2), var(--ring);
}
.pagination a.page-numbers:active { transform: translateY(1px); }
/* Halaman yang sedang dibuka: gelap penuh, jelas bedanya. */
.pagination .page-numbers.current {
  background: linear-gradient(178deg, var(--navy-2), var(--navy));
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 5px rgba(14,35,64,.22), 0 10px 22px rgba(14,35,64,.18);
}
/* "Sebelumnya" dan "Berikutnya" berisi kata, jadi dibiarkan melebar. */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 20px; font-size: .88rem;
}
.pagination .nav-panah { font-size: 1.05em; line-height: 1; }
.pagination .page-numbers.dots {
  border-color: transparent; background: none; box-shadow: none;
  min-width: 22px; padding: 0; color: var(--text-faint);
}
@media (max-width: 640px) {
  /* Di HP semuanya jadi bulatan seukuran sama, termasuk tombol maju
     dan mundur — katanya diganti panah saja. Dengan kata "Sebelumnya"
     dan "Berikutnya" utuh, satu barisnya butuh lebih dari 350px dan
     pasti turun ke baris kedua. Bulatan 40px masih di atas ukuran
     minimum yang nyaman ditekan jempol. */
  .pagination { margin-top: 24px; }
  .pagination .nav-links { gap: 7px; }
  .pagination .page-numbers {
    min-width: 40px; height: 40px; padding: 0 8px; font-size: .85rem;
  }
  .pagination .prev.page-numbers,
  .pagination .next.page-numbers {
    justify-content: center; gap: 0; padding: 0; min-width: 40px;
  }
  .pagination .nav-panah { font-size: 1.15rem; }
  /* Katanya disembunyikan dari mata, bukan dihapus — pembaca layar
     tetap mendengar "Sebelumnya" / "Berikutnya". */
  .pagination .nav-kata {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .pagination .page-numbers.dots { min-width: 16px; }
}

/* WordPress menyisipkan judul tersembunyi di navigasi ini. Disembunyikan
   dengan cara yang tetap terbaca pembaca layar — bukan display:none. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.artikel { max-width: 760px; margin-inline: auto; }
.artikel-kepala { padding: 46px 0 24px; }
.remah { font-size: .82rem; color: var(--text-faint); margin-bottom: 16px; }
.remah a { color: var(--text-dim); }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .84rem; color: var(--text-faint); margin-top: 16px; }
.artikel-gbr { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--d3), var(--ring); margin-bottom: 34px; }

.isi { font-size: 1.06rem; line-height: 1.78; }
.isi > * { margin-bottom: 1.15em; }
.isi h2 { font-size: 1.62rem; margin: 1.9em 0 .6em; }
.isi h3 { font-size: 1.24rem; margin: 1.6em 0 .5em; }
.isi ul, .isi ol { padding-left: 1.3em; }
.isi li { margin-bottom: .5em; }
.isi img { border-radius: var(--r-lg); box-shadow: var(--d2); }
.isi blockquote {
  margin: 1.8em 0; padding: 22px 26px;
  border-left: 3px solid var(--gold-bright);
  background: linear-gradient(120deg, var(--sand), rgba(255,255,255,0));
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-dim); font-size: 1.04rem;
}
.isi blockquote p:last-child { margin-bottom: 0; }
.isi code {
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  padding: 2px 7px; border-radius: 6px; font-size: .9em;
}
.isi pre {
  background: var(--navy); color: #e8eef7; padding: 20px 22px;
  border-radius: var(--r-md); overflow-x: auto; box-shadow: var(--d2);
}
.isi pre code { background: none; border: none; padding: 0; color: inherit; }
.isi a { color: var(--navy-3); text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.isi a:hover { color: var(--gold); }

.bagi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 40px 0; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.bagi span { font-size: .85rem; color: var(--text-faint); margin-right: 4px; }

/* ============================================================
   15b. AI UNTUK PROFESI
   ============================================================ */

/* --- Kartu profesi di halaman daftar --- */
.profesi-kartu {
  display: grid; align-content: start; gap: 10px;
  padding: 44px 22px 24px; position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(166deg, #ffffff 0%, #ffffff 52%, var(--bg-alt) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(14,35,64,.06),
    0 10px 20px -8px rgba(14,35,64,.16),
    0 28px 46px -22px rgba(14,35,64,.22);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
  color: inherit;
}
.profesi-kartu:hover {
  transform: translateY(-6px); color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 2px 4px rgba(14,35,64,.07),
    0 18px 32px -10px rgba(14,35,64,.2),
    0 40px 62px -26px rgba(14,35,64,.26);
}
/* Ikon menggantung di tepi atas, sama polanya dengan kartu Perjalanan
   di halaman Profil — supaya bahasa visualnya satu keluarga. */
.profesi-kartu .ikon3d {
  position: absolute; top: -26px; left: 22px;
  width: 52px; height: 52px; margin: 0; font-size: 1.35rem;
}
.profesi-kartu h2 { font-size: 1.05rem; margin: 0; line-height: 1.3; }
.profesi-kartu p { font-size: .87rem; color: var(--text-dim); margin: 0; line-height: 1.55; }
.profesi-jml {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
}
/* Ruang untuk ikon yang menggantung di baris paling atas. */
.profesi-grid { padding-top: 30px; row-gap: 46px; }

/* --- Kepala halaman satu profesi --- */
.prof-ikon { margin: 0 0 16px; width: 62px; height: 62px; font-size: 1.6rem; }

/* --- Daftar masalah sehari-hari --- */
.masalah { max-width: 46em; margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.masalah li {
  position: relative; padding: 14px 18px 14px 46px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 14px); box-shadow: var(--d1), var(--ring);
  font-size: .95rem; color: var(--text-dim); line-height: 1.6;
}
.masalah li::before {
  content: "✕"; position: absolute; left: 16px; top: 15px;
  font-size: .78rem; font-weight: 700; color: #b3402f;
}

/* --- Kartu tool di halaman profesi --- */
.prof-tools { display: grid; gap: 16px; max-width: 760px; margin-inline: auto; }
.prof-tool {
  padding: 22px 22px 20px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--d2), var(--ring);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.prof-tool:hover { transform: translateY(-3px); box-shadow: var(--d3), var(--ring); }
.prof-tool-atas { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.prof-tool-no {
  flex: none; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--sand-3); line-height: 1;
}
.prof-tool-logo {
  flex: none; width: 44px; height: 44px; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(168deg, var(--sand), var(--sand-2));
  border: 1px solid var(--line-soft);
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
}
.prof-tool-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.prof-tool-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.prof-tool-judul h3 { font-size: 1.05rem; margin: 0; }
.prof-tool-baris { font-size: .9rem; color: var(--text-dim); margin: 0 0 7px; line-height: 1.6; }
.prof-tool-baris b { color: var(--navy); font-weight: 660; }
.prof-tool-kaki {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}

/* Keterangan afiliasi. Sengaja tidak dibuat samar — ini justru
   bagian yang bikin rekomendasi di atasnya lebih dipercaya. */
.prof-aff-nota {
  max-width: 760px; margin: 22px auto 0;
  padding: 15px 18px; border-radius: var(--r-md, 14px);
  background: var(--gold-dim); border: 1px solid var(--gold-soft);
  font-size: .84rem; line-height: 1.65; color: var(--text-dim);
}

/* Kotak batasan — dipakai untuk profesi yang menyangkut data pribadi
   orang lain atau kesehatan. */
.prof-catatan {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 760px; margin-inline: auto;
  padding: 20px 22px; border-radius: var(--r-lg);
  background: #fdf6e6; border: 1px solid #f0d78c;
  box-shadow: var(--d1), var(--ring);
}
.prof-catatan-ikon { font-size: 1.3rem; line-height: 1.2; flex: none; }
.prof-catatan b { display: block; color: var(--navy); margin-bottom: 5px; font-family: var(--font-display); }
.prof-catatan p { margin: 0; font-size: .89rem; color: var(--text-dim); line-height: 1.65; }

/* ============================================================
   16. FOOTER
   ============================================================ */
.ft { background: var(--navy); color: rgba(255,255,255,.68); padding: 54px 0 26px; margin-top: 20px; }
.ft-in { display: grid; grid-template-columns: 1.3fr 2fr; gap: 40px; }
.ft-brand { display: grid; gap: 14px; align-content: start; }
.ft-brand .brand-mark { background: rgba(255,255,255,.09); }
/* Di atas navy, bagian otak yang biru tua ikut hilang. Alas putih menjaga
   logonya tetap terbaca tanpa perlu unggah versi terang terpisah. */
.ft-logo {
  display: inline-block; justify-self: start; line-height: 0;
  background: #fff; padding: 12px 16px; border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.18);
}
.ft-logo img { display: block; height: 46px; width: auto; max-width: 200px; object-fit: contain; }
.ft-brand p { font-size: .89rem; margin: 0; max-width: 22em; }
.ft-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ft-nav h4 { color: #fff; font-size: .77rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.ft-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft-nav a { color: rgba(255,255,255,.68); font-size: .89rem; }
.ft-nav a:hover { color: var(--gold-bright); }

.ft-sosial a { display: flex; align-items: center; gap: 10px; }
.ft-sosial svg {
  width: 30px; height: 30px; flex: none; padding: 6px;
  border-radius: 9px; fill: currentColor;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: background .2s;
}
.ft-sosial a:hover svg { background: rgba(224,170,46,.16); }
.ft-sosial span { font-weight: 560; }
.ft-sosial em { font-style: normal; font-size: .78rem; color: rgba(255,255,255,.42); }
.ft-bottom {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: grid; gap: 10px;
}
.ft-bottom p { font-size: .8rem; margin: 0; color: rgba(255,255,255,.5); }
.ft-disc { max-width: 60em; line-height: 1.6; }

/* ============================================================
   17. MUNCUL SAAT DIGULIR
   ============================================================ */
.js-abed [data-reveal] { opacity: 0; transform: translateY(20px); }
.siap [data-reveal] { transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
[data-reveal].tampil { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   18. LAYAR TABLET & HP
   ============================================================ */
@media (max-width: 1080px) {
  /* Ruang menyempit — kartu kanan turun ke bawah teks, tapi tetap
     di atas video. Kolom kosong buat Abed dihapus. */
  .hv-isi { grid-template-columns: minmax(0, 1fr) minmax(180px, 26%); gap: 22px; }
  .hv-tengah { display: none; }
  .hv-kanan { align-content: center; }
  .hero-sub { max-width: 22em; }

  .profil-atas { grid-template-columns: 1fr; gap: 34px; }
  .profil-foto { max-width: 380px; margin-inline: auto; width: 100%; }

  .ft-in { grid-template-columns: 1fr; gap: 32px; }
}

/* Menu jadi tombol garis tiga lebih awal daripada perubahan tata letak
   lainnya. Dengan lima item menu + tiga ikon sosial + tombol Kerjasama,
   di bawah 1080px barisnya tidak muat dan tombolnya meluber keluar layar. */
@media (max-width: 1080px) {
  /* .hdr-in, bukan .hdr — laci menu juga ada di dalam .hdr,
     kalau pakai .hdr ikonnya ikut hilang di laci. */
  .nav, .hdr-cta, .hdr-in .sosial-bulat { display: none; }
  .burger { display: block; margin-left: auto; }
  /* Di laci menu ikonnya ditaruh di tengah, di bawah tombol utama */
  .drawer .sosial-bulat { justify-content: center; margin-top: 16px; }
  .drawer .sosial-bulat a { width: 46px; height: 46px; }
  .drawer .sosial-bulat svg { width: 20px; height: 20px; }
}

/* Tablet: dua desain sekaligus. Tiga terlalu sempit di lebar segini —
   teks di dalam desainnya jadi tidak kebaca. Batasnya disamakan dengan
   titik saat menu berubah jadi tombol garis tiga, supaya perpindahan
   desktop → tablet terjadi serentak. */
@media (max-width: 1080px) {
  .sorot-trek { --sorot-tampil: 2; --sorot-sela: 16px; }
}

/* Laptop sempit — di bawah 1080px menu sudah berubah jadi tombol burger,
   jadi rentang inilah titik paling padat: tujuh menu, tiga ikon sosial,
   dan tombol Kerjasama harus muat satu baris. Sejak menu "AI untuk
   Profesi" ditambahkan, semuanya tidak lagi cukup dan header terdorong
   keluar layar. Ikon sosial yang dilepas duluan — isinya sudah ada di
   footer dan di menu burger, jadi tidak ada yang benar-benar hilang. */
/* Lebar isi header dibatasi .wrap (maks 1180px), jadi ruangnya SAMA
   sempitnya di layar 1366 maupun 1920 — melebarkan layar tidak menambah
   tempat. Dengan tujuh menu, deretan ikon sosial, dan tombol Kerjasama,
   isinya lewat sedikit dari ruang itu. Jadi menunya dirapatkan untuk
   semua layar lebar, bukan cuma di rentang tertentu. */
@media (min-width: 1081px) {
  .nav ul { gap: 2px; }
  .nav a { padding: 9px 12px; font-size: .89rem; }
  .hdr-cta { padding-inline: 20px; }
}
/* Laptop paling sempit: setelah dirapatkan pun masih kurang, jadi ikon
   sosialnya yang mengalah. Isinya sudah ada di footer dan menu burger. */
@media (min-width: 1081px) and (max-width: 1300px) {
  .hdr-in .sosial-bulat { display: none; }
  .nav a { padding: 9px 11px; font-size: .88rem; }
  .hdr-cta { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .grid-3, .tangga { grid-template-columns: repeat(2, 1fr); }
  /* Sosial tetap 3 kolom di tablet. Kalau ikut jadi 2 kolom,
     kartu ketiga berdiri sendiri di baris bawah — malah terlihat
     lebih timpang daripada tiga kolom yang agak sempit. */
  .sosial-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pelatihan-segmen { grid-template-columns: repeat(2, 1fr); }
  .sesi { grid-template-columns: repeat(2, 1fr); }
  .bawa-grid { grid-template-columns: repeat(2, 1fr); }
  /* Dua kolom: garis penghubungnya dimatikan, karena kartu ke-2 tidak
     lagi bersebelahan dengan kartu ke-3 — garisnya akan menyambung ke
     tempat yang salah. */
  .jejak { grid-template-columns: repeat(2, 1fr); column-gap: 22px; row-gap: 46px; }
  .jejak-item::before { display: none; }
  /* Subgrid dilepas begitu tahapannya turun ke dua baris — barisnya
     tidak lagi sejajar secara logis, dan kalau dipaksa malah kacau. */
  @supports (grid-template-rows: subgrid) {
    .jejak { grid-template-rows: none; }
    .jejak-item { grid-row: auto; grid-template-rows: none; }
  }
  .angka.angka-4 { grid-template-columns: repeat(2, 1fr); }
  .sosial-kartu { padding: 22px 12px; }
  .anak-tangga:nth-child(2),
  .anak-tangga:nth-child(3) { transform: none; }
  .anak-tangga:nth-child(2):hover,
  .anak-tangga:nth-child(3):hover { transform: translateY(-4px); }
}

@media (max-width: 820px) {
  /* Di layar sempit tidak ada "kiri" dan "kanan" — teks mau ditaruh
     di mana pun pasti menutupi wajah, dan Abed jadi pucat di balik
     kain penutup. Jadi di sini videonya jadi spanduk utuh di atas,
     teks turun ke bawahnya di latar terang. Wajahnya kelihatan penuh,
     tulisannya kebaca penuh. */
  .hero-video { min-height: 0; padding: 0 0 30px; display: block; }
  .hv-media {
    position: relative; inset: auto;
    width: 100%; aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--line-soft);
  }
  .hv-media video, .hv-media .poster-diam { object-position: 50% 30%; }
  /* Teks turun ke latar terang, jadi warnanya harus balik jadi gelap.
     Kalau tidak, teks putih ketemu latar putih dan hilang total. */
  .hero-video { background: transparent; color: var(--text); }
  .hero-video .eyebrow {
    color: var(--gold); background: rgba(255,255,255,.86);
    border-color: var(--gold-soft); box-shadow: var(--d1), var(--ring);
  }
  .hero-sub { color: var(--text-dim); }
  .hero-video .proof p { color: var(--text-dim); }
  .hero-video .btn-putih {
    background: #fff; color: var(--navy); border-color: var(--line);
    box-shadow: var(--d1), var(--ring);
  }
  .hero-video .btn-putih:hover { color: var(--navy); background: #fff; }
  .stat-kartu {
    background: rgba(255,255,255,.82);
    border-color: rgba(255,255,255,.95);
    box-shadow: var(--d2), var(--ring);
  }
  .stat-kartu:hover { background: rgba(255,255,255,.95); }
  .stat-ikon { background: linear-gradient(168deg, var(--sky), var(--sky-2)); }
  .stat-teks b { color: var(--navy); }
  .stat-teks span { color: var(--text-faint); }

  /* Di spanduk cuma perlu bayangan tipis di bawah supaya tombol suara terbaca */
  .hv-scrim {
    background: linear-gradient(180deg,
      rgba(8,10,14,0)   0%,
      rgba(8,10,14,0)   58%,
      rgba(8,10,14,.42) 100%);
  }
  .hv-isi { display: block; padding-top: 30px; }
  .hv-kiri { min-height: 0; }
  .hv-kanan { margin-top: 30px; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat-kartu { flex-direction: column; text-align: center; gap: 9px; padding: 16px 10px; }
  .hero-sub, .proof { max-width: none; }
  .hero-video h1 { max-width: none; }
  /* Tombol suara nempel di pojok kanan bawah spanduk video */
  .hv-kendali {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    height: 56.25vw; align-items: flex-end; padding-bottom: 16px;
  }
  .btn-putar { top: 28vw; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .bagian { padding: 46px 0; }
  /* Judul halaman di HP. Ukuran desktop (2,3rem) memaksa judul panjang
     seperti "Mentoring Private 1-on-1" pecah jadi tiga baris di layar
     320px. Diturunkan sedikit supaya muat dua baris yang seimbang,
     tapi tetap jelas lebih besar dari teks isi. */
  .hal-kepala h1 { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
  /* Alasan yang sama untuk angka harga. "Rp10.000.000" pada ukuran
     desktop melebihi lebar kartu di layar 320px dan bikin halaman
     bisa digeser ke samping. */
  .tawar-harga b { font-size: clamp(1.7rem, 8.4vw, 2.4rem); }
  /* Di HP spanduk dibuat lebih tinggi (4:3) supaya kepala tidak terpotong —
     videonya aslinya melebar, kalau dipaksa 16:9 di layar sempit
     yang tersisa cuma potongan tengah yang terlalu rapat. */
  .hv-media { aspect-ratio: 4 / 3; }
  .hv-media video, .hv-media .poster-diam { object-position: 50% 26%; }
  .hv-kendali { padding-inline: 20px; height: 75vw; }
  .btn-putar { top: 37vw; }
  .hv-kanan { grid-template-columns: 1fr; gap: 9px; }
  .stat-kartu { flex-direction: row; text-align: left; padding: 14px 16px; }
  /* .tangga ikut satu kolom lagi. Sempat dicoba tiga kolom, tapi
     tiap kartu punya judul + keterangan + tombol + label — di kolom
     selebar ~110px semuanya jadi terlalu dipaksakan. */
  .grid-3, .grid-2, .tangga, .angka { grid-template-columns: 1fr; }

  /* Kartu Update AI jadi 2 kolom di HP. Satu per baris bikin tiap
     kartu setinggi hampir satu layar penuh — buat daftar artikel
     yang dibaca sambil scroll cepat, itu terlalu makan tempat. */
  /* :has() dipakai sebagai jaring pengaman — kalau ada daftar kartu
     Update AI yang wadahnya belum sempat diberi kelas uc-grid
     (halaman kategori, arsip, hasil pencarian), aturannya tetap
     kena karena dikenali dari isinya. */
  .uc-grid,
  .grid-3:has(> .uc) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .uc-grid .uc-isi, .grid-3:has(> .uc) .uc-isi { padding: 11px 11px 13px; gap: 5px; }
  .uc-grid .uc-kat, .grid-3:has(> .uc) .uc-kat { font-size: .57rem; letter-spacing: .07em; }
  /* Judul dan ringkasan dipotong di jumlah baris tertentu. Tanpa ini
     satu judul panjang bikin kartunya jauh lebih tinggi daripada
     tetangganya, dan daftarnya terasa turun panjang sekali. */
  .uc-grid .uc h3, .grid-3:has(> .uc) .uc h3 {
    font-size: .84rem; line-height: 1.28;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .uc-grid .uc p, .grid-3:has(> .uc) .uc p {
    font-size: .73rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .uc-grid .uc-kaki, .grid-3:has(> .uc) .uc-kaki { font-size: .68rem; padding-top: 9px; gap: 6px; }
  /* Daftar tools disembunyikan di kartu sekecil ini — tiga label
     berjejer bikin kartunya melar dan justru mengalihkan dari judul. */
  .uc-grid .uc-tools, .grid-3:has(> .uc) .uc-tools { display: none; }

  /* Tiga kanal sosial tetap bersebelahan di HP. Isinya cuma ikon +
     nama + handle — satu kartu per baris bikin tiga kotak besar yang
     hampir kosong dan memakan hampir satu layar penuh. Ukurannya
     dikecilkan supaya di lebar ~108px masih terbaca, dan tombol
     "Ikuti" dibuat selebar kartu biar tetap gampang ditekan. */
  .sosial-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .sosial-kartu { padding: 16px 7px; gap: 9px; border-radius: var(--r-md, 14px); }
  .sosial-ikon { width: 42px; height: 42px; border-radius: 13px; }
  .sosial-ikon svg { width: 23px; height: 23px; }
  .sosial-kartu b { font-size: .82rem; }
  /* Handle @abedsteady terlalu panjang untuk kolom sesempit ini —
     di kartu ini namanya sudah cukup, jadi handle-nya disembunyikan. */
  .sosial-teks span { display: none; }
  .sosial-ikut {
    display: block; width: 100%; margin-top: 2px;
    font-size: .68rem; padding: 6px 4px; letter-spacing: .02em;
  }

  /* Kartu profesi 1 kolom di HP — isinya nama pekerjaan plus satu
     kalimat, jadi butuh lebar penuh biar kalimatnya tidak patah-patah. */
  .profesi-grid { grid-template-columns: 1fr; row-gap: 40px; padding-top: 28px; }
  .prof-tool { padding: 18px 16px 17px; }
  .prof-tool-baris { font-size: .85rem; }
  .prof-ikon { width: 54px; height: 54px; font-size: 1.4rem; }
  .masalah li { padding: 12px 15px 12px 40px; font-size: .89rem; }
  .masalah li::before { left: 14px; top: 13px; }
  .prof-catatan { padding: 16px 16px; gap: 11px; }
  .prof-aff-nota { font-size: .8rem; padding: 13px 15px; }

  /* Portfolio tetap 2 kolom di HP. Kartunya sekadar galeri karya —
     satu per baris bikin tiap kartu setinggi setengah layar dan
     daftarnya jadi panjang sekali. Isinya ikut dikecilkan supaya
     di lebar ~165px masih terbaca, bukan cuma diciutkan paksa. */
  .karya-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Rasio gambar sengaja TIDAK dibuat lebih tinggi. Isi portfolio
     Abed banyak yang berupa logo klien melebar (Asus, Pippit) — kotak
     yang lebih tinggi + object-fit:cover justru memotong sisi kiri
     kanan logonya. 16:10 sama seperti desktop: logonya utuh, dan
     kartunya juga jadi lebih pendek. */
  .karya-grid .karya-isi { padding: 11px 11px 13px; gap: 5px; }
  /* Ukurannya disamakan dengan kartu Update AI, termasuk pemotongan
     jumlah baris: satu judul panjang bikin kartunya jauh lebih tinggi
     daripada tetangganya, dan daftarnya terasa turun panjang sekali. */
  .karya-grid .karya-isi h3 {
    font-size: .84rem; line-height: 1.28;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .karya-grid .karya-klien { font-size: .66rem; }
  .karya-grid .karya-isi > p {
    font-size: .73rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .karya-grid .karya-kaki {
    padding-top: 9px; gap: 4px; font-size: .68rem;
    flex-direction: column; align-items: flex-start;
  }
  .karya-grid .karya-hasil { font-size: .7rem; line-height: 1.35; }
  /* Label jenis kerjasama dikecilkan — di kartu selebar ini label
     ukuran desktop hampir selebar kartunya sendiri dan menutupi
     gambar. Bayangannya juga ditipiskan biar tidak berat. */
  .karya-grid .karya-jenis {
    left: 7px; top: 7px; font-size: .54rem;
    padding: 3px 7px; letter-spacing: .05em;
    max-width: calc(100% - 14px);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  .sesi { grid-template-columns: 1fr; }
  .bawa-grid, .pilih-grid, .jejak { grid-template-columns: 1fr; }
  .jalan-teks { margin-bottom: 48px; }
  .tawar { padding: 56px 22px 32px; }
  .tawar-poin { grid-template-columns: 1fr; gap: 16px; }
  .tawar-poin > div { grid-template-columns: 46px 1fr; justify-items: start; align-items: center; text-align: left; }
  /* Tulisan tombolnya sempat patah dua baris di layar sempit. */
  .btn-wa { padding: 17px 16px; font-size: .96rem; gap: 10px; }
  .btn-wa svg { width: 21px; height: 21px; }
  /* minmax(0,1fr), bukan 1fr. Dengan 1fr, kolom tidak boleh lebih sempit
     dari isi terpanjangnya — di layar 320px angka "Rp2.000.000" memaksa
     kolom melebar dan kartu kanan tertimpa keluar layar. */
  .angka.angka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .angka-item { padding: 14px 8px; }
  .angka-item b { font-size: clamp(1rem, 4.4vw, 1.2rem); }
  .angka-item span { font-size: .68rem; }
  /* HP: satu desain per layar. Lebarnya sengaja 86% supaya ujung slide
     berikutnya mengintip — itu petunjuk visual bahwa carousel-nya bisa
     digeser. Tidak pakai margin negatif, karena itu bikin halaman bisa
     digeser ke samping. */
  .sorot-trek { --sorot-tampil: 1; --sorot-sela: 14px; }
  .sorot-slide { flex-basis: 86%; }
  .pelatihan-segmen { grid-template-columns: 1fr; }
  .lebar-kepala { flex-direction: column; gap: 12px; }
  .lebar-poin { grid-template-columns: 1fr; }
  /* Di layar sempit logonya dikecilkan supaya tidak berdesakan
     dengan tombol garis tiga. */
  .brand-logo img { height: 38px; max-width: 148px; }
  .ft-logo { padding: 10px 13px; }
  .ft-logo img { height: 40px; }
  .ft-nav { grid-template-columns: 1fr; gap: 24px; }
  .tool-sisip { padding: 20px; }
}

/* ============================================================
   19. CETAK
   ============================================================ */
@media print {
  .hdr, .ft, .sorot, .hv-media, .hv-kendali, .bg-lapis { display: none !important; }
  body { background: #fff; }
  .artikel { max-width: none; }
}