/* kutenang.id — gaya untuk halaman pencarian, profil, dan 404 */

.remah{font-size:13px;color:var(--ink-mute);margin-bottom:16px}
.remah a{color:var(--ink-soft)}
.remah a:hover{color:var(--ink)}

.saring-aktif{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}
.saring-aktif span{
  font-size:12.5px;background:var(--putih);border:1px solid var(--garis);
  border-radius:99px;padding:4px 12px;color:var(--ink-soft);
}
.hapus-saring{font-size:12.5px;color:var(--terracotta);font-weight:600}
.hapus-saring:hover{text-decoration:underline}

/* --------------------------------------------------------------- pencarian */
.cari-grid{display:grid;grid-template-columns:268px 1fr;gap:28px;align-items:start}
.cari-panel{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:20px;position:sticky;top:96px;
}
.cari-panel h3{font-size:15px;margin-bottom:15px}
/* pakai flex, bukan garis mutlak — supaya garis tidak menembus tulisan */
.cari-pisah{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);
  margin:18px 0 14px;
}
.cari-pisah::before,.cari-pisah::after{
  content:"";flex:1;height:1px;background:var(--garis);
}


.talent-bidang .lagi{background:var(--blush);border-color:transparent;font-weight:600}

.catatan-kecil{
  margin-top:20px;font-size:13px;color:var(--ink-soft);
  background:var(--putih);border:1px solid var(--garis);border-left:3px solid var(--sage);
  border-radius:0 var(--r-kecil) var(--r-kecil) 0;padding:12px 16px;
}
.kosong-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:40px 28px;text-align:center;
}
.kosong-kartu h3{margin-bottom:8px}
.kosong-kartu p{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px}

/* ------------------------------------------------------------------ profil */
.profil{padding:40px 0 30px;position:relative}
.profil::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(720px 380px at 74% 10%, rgba(222,206,191,.5), transparent 66%);
}
.profil-atas{display:grid;grid-template-columns:auto minmax(0,1fr) 258px;gap:30px;align-items:start}
.profil-foto{
  width:96px;height:96px;border-radius:50%;background:var(--blush);
  display:grid;place-items:center;font-size:36px;font-weight:700;color:var(--ink);
  border:1px solid var(--garis);flex:none;
}
.profil-inti h1{font-size:clamp(24px,3.4vw,32px);margin:3px 0 11px}
.profil-inti .lead{margin-top:12px;max-width:560px}
.profil-pesan{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:20px;box-shadow:var(--bayang);
}
.profil-tarif{margin-bottom:14px}
.profil-tarif s{color:var(--ink-mute);font-size:13px}
.profil-tarif b{display:block;font-size:24px;line-height:1.2}
.profil-tarif small{font-size:12.5px;color:var(--ink-mute)}
.profil-catat{font-size:12.5px;color:var(--ink-mute);text-align:center;margin-top:10px}

/* Jadwal di kiri (yang dicari orang lebih dahulu), profil di kanan.
   minmax(0,...) WAJIB: tanpa itu isi yang lebar memaksa kolom melar
   dan kolom sebelahnya terhimpit sampai tulisannya patah-patah. */
.profil-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,336px);
  gap:44px;align-items:start;
}
.profil-grid > *{min-width:0}
.profil-tentang{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:22px;position:sticky;top:96px;
}
.profil-tentang .judul-kecil{font-size:17px}
.judul-kecil{font-size:20px;margin-bottom:12px}
.judul-mini{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);margin:22px 0 8px}
.uraian{font-size:14.6px;color:var(--ink-soft)}
.daftar-titik{list-style:none}
.daftar-titik li{font-size:14.4px;color:var(--ink-soft);padding-left:17px;position:relative;margin-bottom:6px}
.daftar-titik li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--sage)}

.jadwal-daftar{display:flex;flex-direction:column;gap:11px}
.jadwal-hari{
  display:grid;grid-template-columns:78px 1fr;gap:13px;align-items:start;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-kecil);padding:13px 15px;
}
.jadwal-nama{font-size:13.5px;font-weight:700;padding-top:3px}
.jadwal-jam{display:flex;flex-wrap:wrap;gap:6px}
.slot{
  font-size:12.5px;font-weight:600;background:var(--ivory);border:1px solid var(--garis);
  border-radius:8px;padding:4px 9px;color:var(--ink-soft);
}
.jadwal-aksi{margin-top:20px;text-align:center}
.jadwal-aksi .kecil{margin-top:9px}

@media (max-width:900px){
  .cari-grid{grid-template-columns:1fr}
  .cari-panel{position:static}
  .profil-atas{grid-template-columns:auto 1fr}
  .profil-pesan{grid-column:1/-1}
  .profil-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:560px){
  .profil-atas{grid-template-columns:1fr}
  .profil-foto{width:76px;height:76px;font-size:28px}
  .jadwal-hari{grid-template-columns:1fr;gap:8px}
}

/* --------------------------------------------------- foto Talent sungguhan */
img.talent-foto, img.profil-foto{
  object-fit:cover;                  /* isi lingkaran tanpa gepeng */
  object-position:center 22%;        /* wajah biasanya di bagian atas */
  background:var(--blush);
}


/* gambar pengganti sementara: seluruh gambar ditampilkan, tidak digeser ke wajah */
img.foto-ganti{object-position:center center}

/* ukuran huruf awal disamakan dengan foto, kalau-kalau dipakai lagi */


/* ------------------------------------------------------------ tanya jawab */
.faq{max-width:820px}
.faq-kelompok{
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--evergreen);margin:30px 0 4px;padding-top:14px;
  border-top:1px solid var(--garis);
}
.faq-kelompok:first-child{margin-top:0;padding-top:0;border-top:none}
.faq-no{
  display:inline-block;min-width:26px;font-size:12.5px;font-weight:700;
  color:var(--ink-mute);
}
.faq-tanya{display:flex;align-items:flex-start;gap:4px;line-height:1.45}
.faq-jawab ul{margin:0 0 10px 20px}
.faq-jawab li{font-size:14.6px;color:var(--ink-soft);margin-bottom:3px}
.faq-jawab p{margin-bottom:9px}
.faq-jawab p:last-child{margin-bottom:0}

/* ------------------------------------------------- ketersediaan jadwal */
.rutin{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rutin-baris{display:flex;gap:12px;font-size:13.6px}
.rutin-hari{min-width:62px;font-weight:700;color:var(--ink)}
.rutin-jam{color:var(--ink-soft)}

.jam-panel{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);padding:18px;
}
.jam-judul{font-size:13.5px;font-weight:700;margin-bottom:12px;color:var(--ink)}
.jam-daftar{display:flex;flex-wrap:wrap;gap:8px}
.jam-slot{
  background:var(--ivory);border:1.5px solid var(--garis);border-radius:10px;
  padding:9px 14px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:.15s;
}
.jam-slot:hover{border-color:var(--sage);background:var(--putih)}
.jam-slot.dipilih{background:var(--ink);border-color:var(--ink);color:var(--ivory)}

/* --------------------------------------------------- jam paling cepat */
.cepat{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--putih);border:1.5px solid var(--garis);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--bayang);
}
.cepat-label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--evergreen);margin-bottom:3px;
}
.cepat-waktu{font-size:20px;letter-spacing:-.2px}

/* ------------------------------------------------------------ agenda */
.agenda{display:flex;flex-direction:column;gap:2px}
.agenda-baris{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start;
  padding:14px 4px;border-bottom:1px solid var(--garis);
}
.agenda-baris:last-child{border-bottom:none}
/* WAJIB ADA. Tanpa aturan ini atribut `hidden` pada baris agenda tidak
   berpengaruh sama sekali: `.agenda-baris{display:grid}` di atas menimpa
   `display:none` bawaan peramban untuk [hidden], karena kekhususannya lebih
   tinggi. Akibatnya seluruh baris selalu tampil dan tombol "Lihat n hari
   lainnya" tidak melakukan apa-apa yang terlihat.
   Ditulis sebagai .agenda-baris[hidden] (0,2,0) supaya menang tanpa
   perlu !important. */
.agenda-baris[hidden]{display:none}
.agenda-hari b{display:block;font-size:14.5px}
.agenda-hari span{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:1px}
.agenda-jam{display:flex;flex-wrap:wrap;gap:7px}

.pilihan{
  position:sticky;bottom:14px;margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--ink);color:var(--ivory);border-radius:var(--r);padding:14px 18px;
  box-shadow:0 10px 30px rgba(77,54,46,.25);
}
.pilihan .kecil{color:rgba(244,243,241,.7);display:block}
.pilihan b{font-size:16px}
.pilihan .tbl-utama{background:var(--ivory);color:var(--ink)}

/* --------------------------------------- baris jam tercepat di kartu */
/* Kotak "Paling cepat" - 20 Agustus 2026.

   margin-top:auto DIPINDAH KE SINI dari .talent-kaki. Dengan begitu ruang
   kosong kartu menumpuk DI ATAS kotak ini, sehingga kotak ini dan harga
   menempel bersama di dasar kartu. Sebelumnya kotak ini mengambang tepat di
   bawah teks perkenalan sementara ruang kosongnya menumpuk di bawahnya.

   Berlaku juga untuk .kartu-cepat-kosong ("Belum ada jam kosong") karena ia
   memakai kelas yang sama - jadi kartu tanpa jam kosong pun tetap rapi. */
.kartu-cepat{
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);
  background:var(--ivory);border:1px solid var(--garis);border-radius:10px;
  padding:9px 12px;margin-bottom:14px;margin-top:auto;
}
.kc-isi{min-width:0}
.kc-label{
  display:block;font-size:9.8px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);line-height:1.4;
}
/* TANPA white-space:nowrap - 20 Agustus 2026.
   Dengan nowrap, teks seperti "Sabtu 22 Agu, 12.00 WIB" (~156px) tidak boleh
   membungkus, padahal ruang teks di kartu halaman pencarian hanya ~114px -
   sisanya keluar kotak lalu terpotong. Sekarang membungkus jadi dua baris bila
   perlu. Di halaman depan ruangnya 169px sehingga tetap satu baris seperti
   semula; pembungkusan hanya terjadi di tempat yang memang sempit. */
/* Tinggi tulisan dikunci DUA BARIS, jadi kotaknya selalu setinggi tiga baris
   (label + dua baris tulisan) berapa pun panjang teksnya. Tanpa ini tinggi
   kotak berbeda-beda antar kartu dan barisnya terlihat berantakan.
   13.6px x 1.35 x 2 baris = 37px. */
.kartu-cepat b{
  display:block;color:var(--ink);font-size:13.6px;line-height:1.35;
  min-height:37px;
}
.kartu-cepat-kosong{color:var(--ink-mute)}
.titik-hijau{
  width:7px;height:7px;border-radius:50%;background:var(--oke);flex:none;
  box-shadow:0 0 0 3px rgba(62,122,78,.15);
}

@media (max-width:900px){
  .profil-grid{grid-template-columns:1fr;gap:30px}
  .profil-tentang{position:static}
}
@media (max-width:560px){
  .agenda-baris{grid-template-columns:1fr;gap:9px}
  .agenda-hari{display:flex;align-items:baseline;gap:8px}
  .agenda-hari span{margin-top:0}
  .cepat{align-items:stretch;flex-direction:column}
  .cepat .tbl{width:100%}
}

/* ---------------------------------------------------- halaman ketentuan */
.hukum{max-width:760px}
.hukum h1{font-size:clamp(26px,3.6vw,34px);margin-bottom:5px}
.hukum-tanggal{font-size:13px;color:var(--ink-mute)}
.hukum h2{font-size:19px;margin:32px 0 10px;padding-top:20px;border-top:1px solid var(--garis)}
.hukum p{font-size:15px;color:var(--ink-soft);margin-bottom:12px;line-height:1.75}
.hukum p b{color:var(--ink)}
.hukum ul{margin:0 0 14px 20px}
.hukum li{font-size:15px;color:var(--ink-soft);margin-bottom:7px;line-height:1.7}
.hukum-tabel{overflow-x:auto;margin:6px 0 16px}
.hukum-tabel table{width:100%;border-collapse:collapse;font-size:14.2px;
  border:1px solid var(--garis);border-radius:10px;overflow:hidden;min-width:420px}
.hukum-tabel th{background:#F6F4F0;text-align:left;padding:9px 13px;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;
  border-bottom:1px solid var(--garis)}
.hukum-tabel td{padding:10px 13px;border-bottom:1px solid var(--garis);
  color:var(--ink-soft);vertical-align:top}
.hukum-tabel tr:last-child td{border-bottom:none}
.hukum-kaki{margin-top:36px;padding-top:20px;border-top:1px solid var(--garis)}
.hukum-kaki p{font-size:14px}
.hukum-tautan{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.hukum-tautan a{font-size:14px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--garis)}
.hukum-tautan a:hover{border-color:var(--ink)}
@media (max-width:820px){ .kaki-grid{grid-template-columns:1fr 1fr} }

/* ------------------------------------------------- foto pendamping (besar) */
.talent-atas{display:block;margin:-22px -22px 15px}   /* menembus tepi kartu */
.talent-bingkai{
  display:block;position:relative;overflow:hidden;
  background:var(--blush);
  aspect-ratio:4 / 5;              /* tegak - wajah jadi jauh lebih besar */

  /* width:100% WAJIB menyertai max-height di bawah. Tanpa ini lebarnya ikut
     menyusut: begitu tingginya dibatasi, aspect-ratio menghitung lebar DARI
     tinggi (200 x 4/5 = 160px) dan fotonya jadi kolom sempit di tengah kartu. */
  width:100%;

  /* Batas tinggi foto - permintaan Pak Lionart 19 Agustus: fotonya terlalu
     besar. Rujukannya bicarakan.id, yang memakai max-h 194px pada kartu 228px.

     Sempat dicoba 160px (20 Agustus) karena pada 200px luas fotonya masih 32%
     di atas rujukan - foto kita menembus tepi kartu, foto bicarakan.id tidak.
     Tetapi 160px terlalu kecil menurut Pak Rendi, jadi dikembalikan ke 200px.
     JANGAN dikecilkan lagi tanpa menanyakan ulang.

     Yang dibatasi TINGGINYA, bukan rasionya diganti: lebar kartu ditentukan
     kisi (tetap empat sebaris), sehingga rasio baru akan membuat tinggi ikut
     berubah tiap kali lebar berubah. Dengan batas tetap, tinggi foto sama di
     semua lebar layar dan cukup satu angka bila mau disetel ulang.

     aspect-ratio di atas SENGAJA dipertahankan: ia yang bekerja saat kartunya
     sangat sempit (ponsel), supaya foto tidak pernah jadi garis pipih. */
  max-height:200px;
  /* tanpa border-radius sendiri: kartu yang memotongnya, supaya tepinya bersih */
}
.talent-bingkai::after{                                /* peredup tipis di bawah */
  content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(transparent, rgba(77,54,46,.55));
}
img.talent-foto{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  display:block;transition:transform .35s ease;
  border-radius:0;                 /* fotonya penuh — sudutnya dipotong kartu */
  border:0;
}
.talent-kartu:hover img.talent-foto{transform:scale(1.04)}
img.talent-foto.foto-ganti{object-position:center center}

.talent-nama{
  display:block;position:relative;margin-top:-52px;padding:0 22px;z-index:1;
}
.talent-nama h3{font-size:19.5px;color:var(--ivory);text-shadow:0 1px 6px rgba(77,54,46,.5)}
.talent-nama .talent-jenis{
  color:rgba(244,243,241,.86);margin-bottom:0;
  text-shadow:0 1px 5px rgba(77,54,46,.5);
}
.talent-kartu > *:not(.talent-atas){padding-left:0;padding-right:0}

/* foto pada halaman profil */
img.profil-foto{
  width:240px;height:240px;border-radius:24px;border:1px solid var(--garis);
  flex:none;object-fit:cover;object-position:center 20%;background:var(--blush);
}
img.profil-foto.foto-ganti{object-position:center center}
div.profil-foto{width:240px;height:240px;border-radius:24px;font-size:86px}

@media (max-width:900px){
  img.profil-foto,div.profil-foto{width:190px;height:190px}
}
@media (max-width:560px){
  img.profil-foto,div.profil-foto{width:150px;height:150px;border-radius:20px}
  .talent-bingkai{aspect-ratio:1 / 1}
}

/* ------------------------------------------------------- pilih cara bertemu
   Ditaruh di antara daftar jam dan bilah "Kamu memilih". Sengaja TIDAK di
   dalam bilah gelap: tulisan seperti "WhatsApp video call" membuat bilah itu
   menebal dan sesak di ponsel. */
.media{border:0;padding:0;margin:22px 0 0}
.media legend{padding:0;margin-bottom:11px}

.media-kisi{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}

.media-kartu{
  flex:1 1 190px;                     /* sisa baris terakhir melebar penuh */
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--putih);border:1.5px solid var(--garis);
  border-radius:var(--r-kecil);padding:14px 16px;
  transition:border-color .15s ease, background .15s ease;
}
.media-kartu:hover{border-color:var(--ink-mute)}

/* Radio bawaan disembunyikan; lingkaran digambar sendiri supaya bentuknya
   sama di semua peramban. */
.media-kartu input{position:absolute;opacity:0;width:0;height:0}
.media-tanda{
  flex:none;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--sage);position:relative;transition:border-color .15s ease;
}
.media-tanda::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--ink);transform:scale(0);transition:transform .15s ease;
}
.media-nama{font-size:15px;line-height:1.35}

.media-kartu:has(input:checked){border-color:var(--ink);background:var(--ivory)}
.media-kartu:has(input:checked) .media-tanda{border-color:var(--ink)}
.media-kartu input:checked ~ .media-tanda::after{transform:scale(1)}
.media-kartu:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

@media (max-width:560px){
  .media-kartu{flex-basis:100%;padding:13px 15px}
}

/* --------------------------------------------------------- jendela pilihan
   Muncul saat menekan "Lanjut memesan". Sengaja menghadang sebelum pembayaran
   supaya pilihan cara bertemu tidak terlewat. */
.jendela{
  /* margin:auto ditulis tegas — penyetel ulang `*{margin:0}` di awal berkas
     gaya menghapus margin:auto bawaan peramban, dan tanpa itu jendela modal
     jatuh ke sudut kiri atas, bukan di tengah layar. */
  margin:auto;
  border:0;padding:26px;border-radius:var(--r);
  width:min(92vw, 440px);max-height:88vh;
  background:var(--putih);color:var(--ink);
  box-shadow:0 24px 60px rgba(77,54,46,.28);
}
.jendela::backdrop{background:rgba(77,54,46,.46)}

.jendela-tutup-borang{margin:0;float:right}
.jendela-tutup{
  background:none;border:0;cursor:pointer;font-size:26px;line-height:1;
  color:var(--ink-mute);padding:0 2px;
}
.jendela-tutup:hover{color:var(--ink)}

.jendela-judul{font-size:21px;margin:0 0 4px}
.jendela-waktu{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}
.jendela-waktu b{color:var(--ink)}

.jendela .media-kisi{margin-bottom:14px}
.jendela .kecil{margin-bottom:20px}

.jendela-kaki{display:flex;gap:10px;flex-wrap:wrap}
.jendela-kaki .tbl{flex:1 1 auto;padding:12px 18px;font-size:14.5px}

@media (max-width:520px){
  .jendela{padding:20px;width:min(94vw, 440px)}
  .jendela .media-kartu{flex-basis:100%}
  .jendela-kaki{flex-direction:column-reverse}
}

/* ---------------------------------------------- jam beserta statusnya
   Permintaan 13 Agustus: jadwal ditampilkan utuh, Client melihat mana yang
   masih bisa diambil, mana yang menunggu pembayaran, mana yang sudah terisi.
   Semua slot memakai susunan dua baris supaya tingginya seragam. */
.jam-slot{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}
.jam-angka{font-size:13.5px;font-weight:600}
.jam-tanda{font-size:10px;font-weight:600;letter-spacing:.02em;opacity:.62;text-transform:none}

.jam-slot:disabled{cursor:not-allowed;background:transparent}
.jam-slot:disabled:hover{border-color:var(--garis)}

.jam-terisi{border-style:dashed;opacity:.5}
.jam-terisi .jam-angka{text-decoration:line-through}

.jam-menunggu{border-style:dashed;border-color:var(--terracotta);opacity:.72}
.jam-menunggu .jam-tanda{color:var(--terracotta-dark);opacity:.9}

/* Persentase potongan SEJAJAR dengan harga coret — poin 2.9 meeting
   13 Agustus, ditegaskan lagi 20 Agustus karena ternyata masih turun.

   Aturan ini sejak awal sudah inline-block; yang membuatnya turun adalah
   sempitnya kolom harga di .talent-kaki, bukan aturan di sini. Ukurannya
   dikecilkan sedikit sebagai bagian dari pembebasan ruang itu — lihat
   catatan di .talent-kaki .tbl (landing.css).

   JANGAN menambah white-space:nowrap: bila kelak ada harga yang jauh
   lebih panjang, turun ke baris bawah masih lebih baik daripada
   terpotong, karena .talent-kartu memakai overflow:hidden. */
.tarif-diskon{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:0;
  color:var(--terracotta-dark);background:rgba(181,123,102,.14);
  border-radius:5px;padding:1px 3px;margin-left:3px;vertical-align:1px;
}

/* Pilihan jenis pendamping pada Cari Cepat — poin 2.3 meeting 13 Agustus.
   Radio aslinya disembunyikan tetapi TETAP ADA di pohon dokumen, supaya
   pembaca layar dan papan ketik tetap dapat memakainya seperti biasa. */
.cari-label{
  display:block;font-size:12.5px;font-weight:700;color:var(--soft,#4a5568);
  margin-bottom:6px;
}
.pilih-jenis{display:flex;gap:8px;flex-wrap:wrap}
.jenis-opsi{position:relative;cursor:pointer}
.jenis-opsi input{position:absolute;opacity:0;width:0;height:0}
.jenis-opsi span{
  display:block;padding:9px 16px;border:1.5px solid var(--garis);border-radius:10px;
  background:var(--ivory);font-size:13.5px;font-weight:600;color:var(--ink);
  transition:.15s;white-space:nowrap;
}
.jenis-opsi:hover span{border-color:var(--sage);background:var(--putih)}
.jenis-opsi input:checked + span{
  background:var(--ink);border-color:var(--ink);color:var(--ivory);
}
/* Jejak fokus wajib terlihat — radio aslinya disembunyikan, jadi penanda
   fokusnya harus dipindahkan ke label yang tampak. */
.jenis-opsi input:focus-visible + span{outline:2px solid var(--terracotta);outline-offset:2px}

/* Menu tarik-turun "Pendamping" — poin 1.3 meeting 13 Agustus.
   Murni CSS: dibuka oleh :hover DAN :focus-within, jadi papan ketik tetap bisa
   memakainya tanpa JavaScript sama sekali. */
.nav-turun{position:relative;display:inline-flex;align-items:center}
.nav-turun-utama::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;
}
.nav-turun-isi{
  position:absolute;top:100%;left:-14px;min-width:184px;
  display:flex;flex-direction:column;padding:7px;
  background:var(--putih);border:1px solid var(--garis);border-radius:12px;
  box-shadow:0 12px 30px rgba(42,46,43,.13);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .14s,transform .14s,visibility .14s;z-index:60;
}
/* Jembatan tak terlihat menutup celah antara menu dan daftarnya, supaya
   daftarnya tidak menutup saat tetikus melintasi jarak di antaranya. */
.nav-turun::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
.nav-turun:hover .nav-turun-isi,
.nav-turun:focus-within .nav-turun-isi{opacity:1;visibility:visible;transform:none}
.nav-turun-isi a{
  padding:9px 12px!important;border-radius:8px;font-size:14px!important;
  border-bottom:none!important;white-space:nowrap;
}
.nav-turun-isi a:hover{background:var(--ivory)}

/* Di dalam laci ponsel tidak ada ruang untuk melayang — ditampilkan menjorok
   ke dalam dan selalu terlihat. */
@media (max-width:900px){
  .nav-turun{display:block;width:100%}
  .nav-turun-utama{display:block}
  .nav-turun-isi{
    position:static;opacity:1;visibility:visible;transform:none;
    border:none;box-shadow:none;background:transparent;padding:0;min-width:0;
  }
  .nav-turun-isi a{
    padding:11px 0 11px 18px!important;font-size:15px!important;
    border-bottom:1px solid var(--garis)!important;opacity:.82;
  }
  .nav-turun::after{display:none}
}

/* Ikon cara bertemu — poin 2.5 meeting 13 Agustus.
   Memakai currentColor supaya warnanya selalu mengikuti teks di sebelahnya,
   termasuk saat kartu pilihan sedang tercentang dan warnanya membalik. */
.media-ikon{width:17px;height:17px;flex:none;vertical-align:-3px}
.media-kartu .media-ikon{margin-right:7px}
.media-lencana{display:inline-flex;align-items:center;gap:5px}

/* ------------------------------------------- kartu di halaman hasil pencarian
   Di sini kartu berbagi ruang dengan penyaring selebar 268px, jadi sisanya
   hanya 776px.

   EMPAT KARTU SEBARIS — permintaan Pak Rendi 20 Agustus 2026.
     776 - (3 x jarak 14) = 734  ->  tiap kartu 182px

   Dipakai auto-fill dengan lebar minimum 170px, BUKAN repeat(4,1fr).
   repeat(4,1fr) sempat dicoba dan memaksa empat kolom walau ruangnya kurang:
   pada jendela 950px kartunya menyusut jadi 137px dan isinya berdesakan.

   Dengan minmax(170px,1fr) hasilnya tetap EMPAT pada lebar desktop -- ruang
   kartu di sini tidak pernah melebihi 776px karena wadahnya dibatasi 1120px,
   jadi tidak mungkin menjadi lima -- tetapi turun sendiri ke tiga saat
   jendelanya menyempit, sebelum kartunya sempat berdesakan.

   Penyesuaian ini SENGAJA dibatasi pada .cari-grid saja: susunan di halaman
   depan sudah disetujui dan tidak boleh ikut berubah. */
.cari-grid .talent-baris{
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;
}
.cari-grid .talent-kartu{padding:14px}
/* Foto menembus tepi kartu memakai margin negatif sebesar padding kartu.
   Padding di halaman ini 14px, bukan 22px seperti halaman depan, jadi
   marginnya harus ikut disesuaikan. Tanpa ini fotonya melebihi tepi kartu
   8px di kiri dan kanan lalu terpotong overflow:hidden -- tidak merusak
   tampilan, tetapi 16px gambar terbuang percuma. */
.cari-grid .talent-atas{margin:-14px -14px 13px}

/* KAKI KARTU DITUMPUK — akibat langsung dari kartu 182px.
     isi kartu           182 - 28 (padding) = 154px
     harga + tombol      91 + 8 + 97        = 196px
   196 tidak muat di 154, jadi harga dan tombol tidak mungkin sebaris di sini.
   Harga di atas, tombol selebar kartu di bawahnya. Tombol selebar penuh juga
   lebih mudah disentuh, jadi bukan sekadar jalan terpaksa.

   Di halaman depan kartunya 253px dan keduanya tetap sebaris — jangan
   menyamakan kedua halaman ini. */
.cari-grid .talent-kaki{
  flex-direction:column;align-items:stretch;gap:10px;
}
.cari-grid .talent-kaki .tbl{
  width:100%;padding:10px 12px;font-size:13px;
}
/* Persegi, bukan 4:5 — memangkas tinggi kartu tanpa mengecilkan wajahnya.
   Batas tingginya mengikuti halaman depan (lihat .talent-bingkai). */
.cari-grid .talent-bingkai{aspect-ratio:1 / 1;max-height:200px}
.cari-grid .talent-kartu h3{font-size:16px}

@media (max-width:900px){
  /* Penyaring sudah menumpuk ke atas di lebar ini, jadi kartunya kembali
     memakai ukuran halaman depan. */
  .cari-grid .talent-baris{grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:20px}
  .cari-grid .talent-bingkai{aspect-ratio:4 / 5;max-height:200px}
  .cari-grid .talent-kartu{padding:22px}
}

/* Jarak dalam markah "Paling cepat" — 14 Agustus 2026.
   Aturan `.talent-kartu > *:not(.talent-atas){padding-left:0;padding-right:0}`
   menihilkan jarak kiri-kanan SEMUA anak langsung kartu, dan kotak ini
   termasuk — akibatnya titik hijaunya menempel persis di garis.
   Dikembalikan dengan kekhususan yang setara (dua kelas) dan ditulis
   belakangan, jadi menang tanpa perlu !important. */
.talent-kartu > .kartu-cepat{padding-left:12px;padding-right:12px}

/* Gambar bawaan dijangkarkan ke BAWAH — 14 Agustus 2026.

   Figur pada gambar bawaan sengaja duduk tepat di dasar berkasnya. Pada bingkai
   tegak (halaman depan) berkasnya pas persis, jadi posisinya tidak berpengaruh.
   Tetapi pada bingkai PERSEGI (halaman hasil pencarian) `cover` memotong 80
   piksel dari atas DAN bawah — dan yang di bawah persis bahu figurnya, sehingga
   terlihat terpotong.

   Dengan dijangkarkan ke bawah, pemotongan seluruhnya diambil dari atas, yang
   memang hanya ruang kosong. Berlaku untuk gambar bawaan saja; foto asli tetap
   dijangkarkan ke atas karena wajah biasanya di sana.

   Ditulis paling belakang supaya mengalahkan aturan `center center` terdahulu,
   yang dibuat ketika gambar penggantinya masih figur melayang di tengah. */
/* TITIK POTONG GAMBAR BAWAAN -- disetel ulang 20 Agustus 2026.

   Berkas bawaannya 640x800 dan figurnya mulai pada 33% dari atas; sepertiga
   bagian atas adalah ruang kosong.

   Dulu `center bottom`: SELURUH kelebihan tinggi dipotong dari atas. Pada
   bingkai yang tinggi itu tidak masalah karena yang terpotong memang ruang
   kosong. Sesudah bingkainya dipendekkan jadi 160px, potongannya menjadi
   154px -- melewati batas rambut pada 103px, sehingga rambutnya terpotong.

   `center 55%` mengambil 55% potongan dari atas (85px) dan sisanya dari bawah.
   Rambut tetap utuh dengan sisa ruang 18px di atasnya.

   ANGKA INI TERIKAT PADA TINGGI BINGKAI. Bila tingginya diubah, hitung ulang:
       potong = 314 - tinggi
       syarat 1 (rambut aman) : potong x persen      < 104
       syarat 2 (badan aman)  : potong x (1 - persen) <  45

   Pada tinggi 200px -> potong 114px:
       75%  ->  atas 85px (sisa 18px di atas rambut), bawah 28px   <- DIPAKAI
       85%  ->  atas 97px (sisa  7px)                              mepet
       90%  ->  atas 102px                                          rambut terpotong
       55%  ->  bawah 51px                                          badan terpotong

   Riwayat: 55% dipakai saat bingkai sempat 160px; pada tinggi itu ia menyelamatkan
   rambut tetapi memotong badan. Jangan dipakai lagi di 200px. */
img.foto-ganti,
img.talent-foto.foto-ganti,
img.profil-foto.foto-ganti{
  object-position:center 75%;
}

/* ------------------------------------------------------------------ ulasan
   Ditampilkan di halaman pendamping — 14 Agustus 2026. Sebelumnya ulasan
   tersimpan dan dikurasi, tetapi tidak pernah terlihat siapa pun. */
.bintang-lihat{display:inline-flex;gap:1px;line-height:1;vertical-align:-1px}
.bintang{color:var(--garis);font-size:15px}
.bintang-isi{color:var(--terracotta)}

.nilai-ringkas{
  display:inline-flex;align-items:center;gap:8px;margin:2px 0 10px;
  text-decoration:none;color:var(--ink);
}
.nilai-ringkas b{font-size:15px}
.nilai-ringkas:hover .kecil{text-decoration:underline}

.ulasan-ringkas{
  display:flex;align-items:center;gap:10px;margin:6px 0 18px;
}
.ulasan-ringkas b{font-size:26px;letter-spacing:-.4px}

.ulasan-daftar{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;
}
.ulasan-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-kecil);
  padding:16px 18px;
}
.ulasan-atas{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ulasan-kata{margin:9px 0 10px;font-size:14.4px;line-height:1.62;color:var(--ink)}
.ulasan-nama{margin:0;font-size:12.6px;font-weight:700;color:var(--ink-mute)}

/* Gambar bawaan pada bingkai TEGAK — 14 Agustus 2026.

   Satu berkas dipakai dua bingkai yang berbeda:
     halaman pencarian, bingkai persegi -> figur mengisi ~84% tinggi bingkai
     halaman depan,      bingkai 4:5    -> figur hanya ~67%, terasa kecil

   Bedanya karena bingkai tegak menampilkan seluruh ruang kosong di atas figur,
   sedangkan bingkai persegi memotongnya. Diperbesar khusus di bingkai tegak,
   dijangkarkan ke dasar supaya bahu figur tetap menempel garis bawah.
   Latarnya rata sehingga ikut membesar tanpa terlihat.

   Hanya berlaku pada gambar bawaan; foto asli tidak disentuh. */
/* PEMBESARAN INI DIBATALKAN 20 Agustus 2026.

   Alasannya sudah hilang: bingkai halaman depan tidak lagi tegak 4:5 melainkan
   dibatasi 200px (permintaan Pak Lionart, fotonya terlalu besar). Bingkai yang
   pendek sudah memotong sendiri ruang kosong di atas figur, sehingga tidak ada
   lagi yang perlu ditutupi dengan pembesaran.

   Dibiarkan menyala, kepala figur justru TERPOTONG di tepi atas -- terlihat
   jelas pada kartu Ricky dan Rudi yang masih memakai gambar bawaan.

   Keadaannya kini sama dengan halaman pencarian, yang memang sejak awal tidak
   memakai pembesaran. */
img.talent-foto.foto-ganti{transform:none}

/* Lencana saldo poin di navbar. Dipindahkan ke sini 19 Agustus 2026 — semula
   hanya ada di dasar beranda dan praktis tidak pernah terlihat. Sengaja tetap
   tampil saat saldonya 0, supaya orang tahu fiturnya ada. */
.nav-poin{display:inline-flex;align-items:center;gap:5px;margin-right:4px;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  background:var(--blush,#DECEBF);color:var(--ink,#4D362E);
  font-size:13px;line-height:1;border:1px solid rgba(77,54,46,.10)}
.nav-poin b{font-size:14px;font-weight:800}
@media(max-width:520px){.nav-poin{padding:4px 9px;font-size:12px}}


/* ==========================================================================
   KARTU PENDAMPING DI PONSEL - mendatar, foto kecil di kiri
   20-21 Agustus 2026, dipilih Pak Rendi dari tiga pilihan bergambar.

   KENAPA: foto menembus selebar kartu, dan di ponsel kartunya justru LEBIH
   LEBAR daripada di desktop (327px berbanding 253px). Berkas 640x800
   diperbesar 51% lalu dipotong jadi tinggi 200px, sehingga wajah tampil
   sangat besar dan terpotong ketat.

   Yang menentukan besar wajah adalah LEBAR fotonya, bukan tingginya -
   memendekkan foto tidak menolong sama sekali.

   HASILNYA: tinggi kartu 489px -> +-330px, lebar foto 325px -> 88px,
   dan 2-3 pendamping terlihat sekaligus tanpa menggulir.

   BATAS 574px, DIUKUR bukan dihitung.

   Perhitungan di atas kertas memberi 560px (dua kolom butuh 246*2+20 = 512px
   isi wadah, yaitu layar 560px) - dan angka itu MELESET 14 piksel. Media
   query membandingkan lebar VIEWPORT, sedangkan kisi menghitung dari isi
   wadah sesudah dikurangi jarak tepi dan batang gulir; keduanya tidak sama.

   Akibat kalau memakai 560px: pada 561-574px kartunya MASIH satu per baris
   tetapi susunannya sudah tegak, dan karena kartunya lebar (498px) fotonya
   menjadi 496x200 - letterbox yang jauh lebih buruk daripada keadaan semula.
   Itu benar-benar terjadi saat diuji.

   Diukur sungguhan: dua kolom mulai tepat pada 575px.
   KALAU minmax(246px) DIUBAH, UKUR ULANG - jangan dihitung saja.

   Ditulis paling belakang dengan sengaja: aturan `.cari-grid .talent-bingkai`
   berkekhususan dua kelas, jadi aturan di sini harus datang belakangan supaya
   menang tanpa perlu !important.
   ========================================================================== */
@media (max-width:574px){

  /* Foto tidak lagi menembus tepi kartu; berjajar dengan namanya. */
  .talent-atas,
  .cari-grid .talent-atas{
    display:flex;align-items:center;gap:12px;
    margin:0 0 12px;
  }

  /* Persegi 150px - DISAMAKAN dengan foto di halaman profil.

     Menekan kartu lalu masuk ke profil sebelumnya terasa melompat, karena
     fotonya berubah ukuran, sudut, DAN titik potong sekaligus:
         kartu 180px sudut 14px potong 22%  ->  profil 150px sudut 20px potong 20%
     Ketiganya kini sama, sehingga wajahnya terlihat persis sama sebelum dan
     sesudah ditekan.

     Sempat 180px (permintaan "setengah lebar ponsel"); sesudah dilihat
     berdampingan dengan halaman profil, 150px yang dipilih.

     (!) KALAU UKURAN FOTO PROFIL DIUBAH, UBAH DI SINI JUGA. Aturannya ada di
         media query 560px pada berkas ini:
         img.profil-foto, div.profil-foto{width:150px;height:150px;border-radius:20px}

     aspect-ratio dan max-height bawaan harus DINETRALKAN, kalau tidak
     fotonya tetap melar mengikuti lebar kartu. */
  .talent-bingkai,
  .cari-grid .talent-bingkai{
    width:150px;height:150px;flex:none;
    aspect-ratio:auto;max-height:none;
    border-radius:20px;overflow:hidden;
  }

  /* Peredup gelap hanya berguna saat nama ditumpuk di atas foto. Di sini
     namanya sudah di samping, jadi peredupnya cuma mengotori foto. */
  .talent-bingkai::after,
  .cari-grid .talent-bingkai::after{display:none}

  /* Nama keluar dari atas foto, jadi warnanya kembali gelap dan bayangan
     teksnya dibuang. */
  .talent-nama,
  .cari-grid .talent-nama{
    position:static;margin-top:0;padding:0;min-width:0;
  }
  /* Ruang untuk nama 137px (299 isi kartu - 150 foto - 12 jarak). Segitu
     cukup untuk "HYPNOTHERAPIST" satu baris pada ukuran aslinya
     (14 huruf x ~7,3px = 102px), jadi tidak perlu diperkecil.
     Sempat diperkecil saat fotonya 180px dan ruangnya hanya 107px. */
  .talent-nama h3{
    font-size:17px;color:var(--ink);text-shadow:none;line-height:1.2;
  }
  .talent-nama .talent-jenis{
    color:var(--evergreen);text-shadow:none;margin-bottom:0;
  }

  /* Titik potong disamakan dengan halaman profil (center 20%), bukan 22%
     seperti kartu di desktop - supaya wajahnya benar-benar terlihat sama
     sebelum dan sesudah kartunya ditekan. */
  img.talent-foto{object-position:center 20%}

  /* Gambar bawaan: pada bingkai PERSEGI, figurnya pas tanpa perlu digeser.
     Angka 55% di aturan utama disetel untuk bingkai 251x200 dan tidak
     berlaku di sini. */
  img.talent-foto.foto-ganti,
  .cari-grid img.talent-foto.foto-ganti{object-position:center center}
}