/* 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}
.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 */
.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;
}
.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;
}
.kartu-cepat b{display:block;color:var(--ink);font-size:13.6px;white-space:nowrap}
.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 */
  /* 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}
}