/* =========================================================================
   tajam.css - lapisan penajam TemanCerita
   Dimuat paling akhir di <head>, sesudah style.css dan sesudah blok tema biru
   di header.php, jadi aturan di sini yang menang tanpa perlu !important.

   Isinya tiga hal: memperbaiki cacat yang memang salah (huruf tebal palsu,
   kartu yang tak terlihat), menyeragamkan yang tadinya acak (radius, garis,
   bayangan), dan menambah detail yang bikin tampilan terasa dikerjakan
   (fokus keyboard, transisi, ikon garis pengganti emoji).
   ========================================================================= */

:root {
    /* Skala sudut. Sebelumnya 14, 16, dan 20 dipakai tanpa pola. */
    --tj-r-kecil: 10px;
    --tj-r: 16px;
    --tj-r-besar: 22px;

    /* Garis dan permukaan dibuat dari putih transparan, bukan warna solid,
       supaya kartunya tetap enak dilihat di pita gelap maupun terang. */
    --tj-garis: rgba(255, 255, 255, .10);
    --tj-garis-kuat: rgba(255, 255, 255, .20);
    --tj-permukaan: rgba(255, 255, 255, .045);
    --tj-permukaan-hover: rgba(255, 255, 255, .075);

    --tj-bayang: 0 1px 2px rgba(3, 12, 42, .5), 0 16px 36px -20px rgba(3, 12, 42, .9);
    --tj-bayang-naik: 0 2px 4px rgba(3, 12, 42, .55), 0 30px 60px -26px rgba(3, 12, 42, 1);

    --tj-lentur: 220ms cubic-bezier(.2, .7, .3, 1);
    --tj-emas: #F6C445;
}

/* ── Tipografi ───────────────────────────────────────────────────────────
   DM Serif Display cuma punya satu ketebalan (400). Judul di situs ini
   meminta 700, jadi browser mengarang sendiri versi tebalnya dengan cara
   menebalkan piksel. Hasilnya batang hurufnya kotor dan sedikit buram,
   dan itu yang bikin judul terasa murah. Dikembalikan ke 400. */
h1, h2, h3, h4,
.sec-title, .hero h1, .ajakan-box h2 {
    font-weight: 400;
    font-synthesis: none;
}

h1, h2, h3, .sec-title {
    text-wrap: balance;
}

.hero h1 {
    font-size: clamp(34px, 5.1vw, 60px);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.sec-title {
    font-size: clamp(27px, 3.4vw, 42px);
    line-height: 1.16;
    letter-spacing: -.015em;
}

.sec-label {
    letter-spacing: .16em;
    opacity: .9;
}

/* Kalimat pengantar seksi cuma satu sampai dua baris. 'balance' membagi
   katanya rata antar baris, jadi tidak ada baris kedua berisi dua kata. */
.sec-sub {
    text-wrap: balance;
}

.hero-sub, .lay-card > p, .kenapa-item p, .testi-text {
    text-wrap: pretty;
}

.sec-sub {
    max-width: 46ch;
}

/* Angka dan harga pakai lebar digit yang sama supaya kolom tarif rata. */
.talent-rate, .h-stat strong, .om-price, .pl-harga {
    font-variant-numeric: tabular-nums;
}

/* ── Ikon ────────────────────────────────────────────────────────────────
   Menggantikan emoji. Mewarisi warna teks induk, jadi satu ikon bisa dipakai
   di latar mana pun tanpa versi terang dan gelap terpisah. */
.tc-ikon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.14em;
    flex: none;
}

.tc-ikon-kotak {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    border: 1px solid var(--tj-garis);
    color: #A9C8FF;
    margin-bottom: 14px;
    transition: color var(--tj-lentur), border-color var(--tj-lentur), transform var(--tj-lentur);
}

.tc-ikon-kotak .tc-ikon {
    width: 23px;
    height: 23px;
}

.tc-ikon-sisip {
    width: 15px;
    height: 15px;
    opacity: .75;
    margin-right: 2px;
}

/* Ikon kecil di dalam tombol. Diberi jarak sendiri supaya tidak menempel
   ke hurufnya seperti emoji dulu. */
.tc-ikon-tombol {
    width: 16px;
    height: 16px;
    margin-left: 7px;
    opacity: .9;
}

/* ── Bintang penilaian ───────────────────────────────────────────────── */
.tc-bintang {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--tj-emas);
    line-height: 1;
}

.tc-bintang svg {
    width: 15px;
    height: 15px;
}

.tc-bintang.besar svg {
    width: 18px;
    height: 18px;
}

/* ── Emoji yang tertanam di CSS ──────────────────────────────────
   Tiga emoji dipasang lewat content: di berkas tema. Diganti jadi gambar yang
   diwarnai lewat mask, jadi warnanya ikut teks dan bentuknya tetap sama di
   perangkat mana pun. */
.hero-tag::before,
.aturan-boleh h4::before,
.aturan-tidak h4::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.14em;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hero-tag::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.8c0 3.9-3.8 7.1-8.5 7.1-.9 0-1.8-.12-2.7-.35L4.2 20.2l1.4-3.4a6.7 6.7 0 0 1-2.1-5c0-3.9 3.8-7.1 8.5-7.1s8.5 3.2 8.5 7.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.8c0 3.9-3.8 7.1-8.5 7.1-.9 0-1.8-.12-2.7-.35L4.2 20.2l1.4-3.4a6.7 6.7 0 0 1-2.1-5c0-3.9 3.8-7.1 8.5-7.1s8.5 3.2 8.5 7.1Z'/%3E%3C/svg%3E");
}

.aturan-boleh h4::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.5 4.9-5.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.5 4.9-5.1'/%3E%3C/svg%3E");
    color: #9DB8FF;
}

.aturan-tidak h4::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
    color: #FF8A8A;
}

/* Pembungkus lama bintang penilaian. Isinya sekarang SVG, jadi jarak antar
   huruf dan warna teksnya tidak lagi berpengaruh. */
.stars-static, .stars {
    display: inline-flex;
    align-items: center;
    letter-spacing: normal;
    color: var(--tj-emas);
}

/* ── Kartu ───────────────────────────────────────────────────────────────
   Empat jenis kartu di beranda tadinya punya latar, radius, dan garis yang
   berbeda-beda. Kartu langkah malah berlatar sama persis dengan halaman,
   jadi praktis tidak kelihatan sebagai kartu. Semua disamakan di sini. */
.kenapa-item,
.lay-card,
.step-card,
.talent-card,
.testi-card,
.aturan-kartu,
.daftar-card,
.faq-item {
    background: var(--tj-permukaan);
    border: 1px solid var(--tj-garis);
    border-radius: var(--tj-r);
    box-shadow: var(--tj-bayang);
    transition: transform var(--tj-lentur), border-color var(--tj-lentur), background var(--tj-lentur), box-shadow var(--tj-lentur);
}

.lay-card,
.daftar-card {
    border-radius: var(--tj-r-besar);
}

.kenapa-item:hover,
.lay-card:hover,
.step-card:hover,
.testi-card:hover {
    transform: translateY(-3px);
    background: var(--tj-permukaan-hover);
    border-color: var(--tj-garis-kuat);
    box-shadow: var(--tj-bayang-naik);
}

.kenapa-item:hover .tc-ikon-kotak,
.lay-card:hover .tc-ikon-kotak {
    color: #fff;
    border-color: var(--tj-garis-kuat);
}

.talent-card:hover {
    transform: translateY(-3px);
    border-color: var(--tj-garis-kuat);
    box-shadow: var(--tj-bayang-naik);
}

/* Kartu layanan unggulan tetap menonjol, tapi lewat warna, bukan ukuran. */
.lay-unggulan {
    background: linear-gradient(165deg, rgba(107, 150, 224, .22), rgba(255, 255, 255, .05));
    border-color: rgba(169, 200, 255, .32);
}

/* ── Langkah 1-2-3 ───────────────────────────────────────────────────── */
.step-card {
    padding: 30px 26px;
}

.step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(160deg, #4B7BEF, #2B4FA8);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px rgba(0, 0, 0, .9);
    margin-bottom: 16px;
}

/* ── Titik online ────────────────────────────────────────────────────────
   Dulu emoji lingkaran hijau. Sekarang titik yang berdenyut pelan, jadi
   terbaca sebagai penanda status, bukan hiasan. */
.tc-titik {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7FB0FF;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(45, 212, 167, .6);
    animation: tj-denyut 2.4s ease-out infinite;
}

@keyframes tj-denyut {
    0%   { box-shadow: 0 0 0 0 rgba(45, 212, 167, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(45, 212, 167, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 212, 167, 0); }
}

/* ── Manfaat jadi talent ─────────────────────────────────────────────── */
.benefit {
    align-items: flex-start;
    gap: 14px;
}

.benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--tj-garis);
    color: #A9C8FF;
    font-size: 0;
    flex: none;
}

.benefit-icon .tc-ikon {
    width: 19px;
    height: 19px;
}

/* ── Kaki kartu talent ────────────────────────────────────────
   Tarif dan tombol berebut ruang. Untuk talent dengan tarif enam digit,
   tulisan tombolnya sampai pecah jadi dua baris. Tombolnya dikunci satu baris
   dan tarifnya yang mengalah. */
.talent-bottom {
    gap: 10px;
    align-items: center;
}

.talent-rate {
    min-width: 0;
    white-space: nowrap;
}

.btn-chat {
    white-space: nowrap;
    flex: none;
}

@media (max-width: 400px) {
    .btn-chat {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tc-ikon-tombol {
        margin-left: 5px;
    }
}

/* ── Saringan dan tombol ─────────────────────────────────────────────── */
.gender-tab, .service-tab, .filter-btn, .verif-tab {
    transition: background var(--tj-lentur), border-color var(--tj-lentur), color var(--tj-lentur), transform var(--tj-lentur);
}

.gender-tab:active, .service-tab:active, .filter-btn:active, .verif-tab:active {
    transform: scale(.97);
}

.gender-tab .tc-ikon {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    opacity: .85;
}

.btn, .btn-chat, .lay-btn, .ajakan-tombol .btn {
    transition: transform var(--tj-lentur), box-shadow var(--tj-lentur), background var(--tj-lentur);
}

.btn:active, .btn-chat:active, .lay-btn:active {
    transform: translateY(1px);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer-sosial {
    margin-top: 14px;
}

.footer-sosial a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--tj-garis);
    background: var(--tj-permukaan);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    transition: background var(--tj-lentur), border-color var(--tj-lentur), transform var(--tj-lentur);
}

.footer-sosial a:hover {
    background: var(--tj-permukaan-hover);
    border-color: var(--tj-garis-kuat);
    transform: translateY(-1px);
}

.footer-sosial .tc-ikon {
    width: 17px;
    height: 17px;
}

/* ── Tombol WhatsApp melayang ────────────────────────────────────────── */
.wa-float {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0;
}

.wa-float svg {
    width: 27px;
    height: 27px;
}

/* ── Fokus keyboard ──────────────────────────────────────────────────────
   Sebelumnya tidak ada penanda fokus sama sekali, jadi orang yang menelusuri
   halaman pakai Tab tidak tahu sedang di mana. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #9EC1FF;
    outline-offset: 3px;
    border-radius: var(--tj-r-kecil);
}

/* ── Hormati pengaturan perangkat ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Layar kecil ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tc-ikon-kotak {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .step-num {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .sec-sub {
        max-width: 34ch;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Lapisan 2: merek, gerak, dan detail yang membedakan situs yang
   dikerjakan dari situs yang sekadar jadi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logo di navbar dan footer ───────────────────────────────────────────
   Dulu logonya cuma tulisan. Tulisan saja tidak punya bentuk yang bisa
   diingat orang, dan tidak bisa dipakai jadi ikon aplikasi atau foto profil.
   Sekarang ada lambangnya, dan lambang itu berkas yang sama persis dengan
   yang dipakai jadi favicon, jadi tidak mungkin berbeda. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-mark {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    display: block;
    transition: transform var(--tj-lentur);
}

.logo:hover .logo-mark {
    transform: rotate(-6deg) scale(1.05);
}

.logo-kata {
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.logo-kata b {
    font-weight: 700;
    color: var(--accent);
}

/* style.css memaksa .footer-brand .logo jadi display:block dengan kekhususan
   yang lebih tinggi, jadi lambang dan tulisannya bertumpuk. Ditimpa di sini
   dengan kekhususan yang sama persis, bukan dengan !important. */
.footer-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

footer .logo-mark {
    width: 34px;
    height: 34px;
}

@media (max-width: 480px) {
    .logo-mark { width: 30px; height: 30px; }
}

/* ── Tombol customer service ─────────────────────────────────────────────
   Diubah jadi putih dengan ikon biru. Di latar biru tua situs ini, tombol
   hijau WhatsApp justru tenggelam; putih yang menonjol. */
.wa-float {
    background: #FFFFFF !important;
    color: var(--blue-dark, #070F26) !important;
    border: 1px solid rgba(15, 45, 138, .10);
    box-shadow: 0 6px 18px -6px rgba(3, 12, 42, .55), 0 18px 40px -20px rgba(3, 12, 42, .8);
    transition: transform var(--tj-lentur), box-shadow var(--tj-lentur);
}

.wa-float:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 26px -8px rgba(3, 12, 42, .6), 0 26px 56px -24px rgba(3, 12, 42, .9);
}

/* Warna ikon harus lewat fill, bukan color saja. Lambang WhatsApp-nya
   memakai <path> tanpa atribut fill, jadi tanpa baris fill di bawah ini
   browser memakai hitam bawaan dan ikonnya tampil hitam di atas putih. */
.wa-float svg {
    color: #1E4BD0;
    fill: #1E4BD0;
}
.wa-float svg path {
    fill: currentColor;
}

/* Cincin berdenyut supaya tombolnya menarik mata tanpa berisik. */
.wa-float::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .45);
    animation: tj-cincin 3s ease-out infinite;
    pointer-events: none;
}

@keyframes tj-cincin {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .40); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


/* ── Gerak masuk ─────────────────────────────────────────────────────────
   Isi hero tidak muncul sekaligus. Tiap bagian naik dan menajam berurutan
   dengan jeda kecil, jadi mata pengunjung digiring dari judul ke tombol,
   bukan disuruh memindai satu layar penuh sendiri.

   Semua dijalankan CSS murni. Tidak ada pustaka animasi yang ditambahkan,
   karena satu berkas JS 40 KB demi efek yang bisa dibuat dengan 10 baris
   itu harga yang tidak masuk akal untuk pengunjung berjaringan lambat. */
@keyframes tj-naik {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes tj-naik-halus {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.tj-masuk {
    opacity: 0;
    animation: tj-naik .7s cubic-bezier(.2, .7, .3, 1) forwards;
}

.tj-masuk-1 { animation-delay: .05s; }
.tj-masuk-2 { animation-delay: .15s; }
.tj-masuk-3 { animation-delay: .25s; }
.tj-masuk-4 { animation-delay: .35s; }
.tj-masuk-5 { animation-delay: .45s; }
.tj-masuk-6 { animation-delay: .58s; }

/* Judul hero naik per baris, bukan sekaligus. Bedanya kecil tapi terasa. */
.hero h1 .tj-baris {
    display: block;
    opacity: 0;
    animation: tj-naik .8s cubic-bezier(.2, .7, .3, 1) forwards;
}

.hero h1 .tj-baris:nth-child(1) { animation-delay: .12s; }
.hero h1 .tj-baris:nth-child(2) { animation-delay: .24s; }
.hero h1 .tj-baris:nth-child(3) { animation-delay: .36s; }

/* ── Kata yang mengambang ────────────────────────────────────────────────
   Satu kata di judul dibuat naik turun pelan. Bukan untuk gaya-gayaan:
   mata manusia otomatis mengikuti benda yang bergerak, jadi kata yang
   paling ingin diingat orang yang menaruhnya di sana. */
@keyframes tj-apung {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.tj-apung {
    display: inline-block;
    animation: tj-apung 4.5s ease-in-out infinite;
    animation-delay: 1.1s;
}

/* ── Cahaya yang bergeser pelan di latar ─────────────────────────────── */
@keyframes tj-geser {
    0%   { transform: translate3d(-2%, 0, 0) scale(1); }
    100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Hero dijadikan acuan posisi sekaligus pembatas. Tanpa dua baris ini,
   cahaya latar di bawah meluber keluar layar dan memunculkan gulir mendatar
   di seluruh halaman, cacat yang gampang lolos karena tidak kelihatan
   sampai ada yang menggeser layar ke samping. */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 18% 22%, rgba(107, 150, 224, .22), transparent 70%),
        radial-gradient(34% 38% at 82% 68%, rgba(45, 212, 167, .12), transparent 70%);
    animation: tj-geser 18s ease-in-out infinite alternate;
}

.hero > .container,
.hero-inner {
    position: relative;
    z-index: 1;
}

/* ── Pita kata berjalan ──────────────────────────────────────────────────
   Deretan kata yang bergerak mendatar tanpa henti. Isinya kata yang memang
   dicari orang di Google, jadi pita ini bukan cuma hiasan: ia memberi tahu
   pengunjung baru, dalam dua detik, situs ini tentang apa saja. */
.tj-pita {
    position: relative;
    overflow: hidden;
    padding: 16px 0;
    border-top: 1px solid var(--tj-garis);
    border-bottom: 1px solid var(--tj-garis);
    background: rgba(255, 255, 255, .03);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tj-pita-jalan {
    display: flex;
    width: max-content;
    animation: tj-jalan 38s linear infinite;
}

.tj-pita:hover .tj-pita-jalan {
    animation-play-state: paused;
}

@keyframes tj-jalan {
    to { transform: translateX(-50%); }
}

.tj-pita-isi {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
    white-space: nowrap;
}

.tj-pita-isi span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .62);
}

.tj-pita-isi i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent, #9DB8FF);
    opacity: .7;
    flex: none;
}

@media (max-width: 640px) {
    .tj-pita { padding: 13px 0; }
    .tj-pita-isi { gap: 24px; padding-right: 24px; }
    .tj-pita-isi span { font-size: 12.5px; }
}

/* ── Muncul saat digulir ─────────────────────────────────────────────────
   Kelas .reveal sudah dipakai situs ini sejak lama dan dinyalakan JS.
   Di sini gerakannya dibuat lebih halus dan diberi jeda berurutan untuk
   elemen yang bersebelahan, supaya kartu tidak muncul serempak. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.2, .7, .3, 1), transform .65s cubic-bezier(.2, .7, .3, 1);
}

.reveal.tampil,
.reveal.visible,
.reveal.show,
.reveal.in {
    opacity: 1;
    transform: none;
}

.kenapa-grid .reveal:nth-child(2),
.steps .reveal:nth-child(2),
.lay-grid .reveal:nth-child(2),
.testi-grid .reveal:nth-child(2) { transition-delay: .08s; }

.kenapa-grid .reveal:nth-child(3),
.steps .reveal:nth-child(3),
.lay-grid .reveal:nth-child(3),
.testi-grid .reveal:nth-child(3) { transition-delay: .16s; }

.kenapa-grid .reveal:nth-child(4) { transition-delay: .24s; }

/* Kalau JS mati atau gagal dimuat, isinya tetap harus terbaca. Tanpa ini,
   pengunjung dengan JS dimatikan melihat halaman yang kosong melompong. */
.no-js .reveal,
.no-js .tj-masuk,
.no-js .hero h1 .tj-baris {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Perangkat yang minta gerakan dikurangi sudah dihormati di bagian atas
   berkas ini, tapi animasi berulang seperti pita dan kata mengambang perlu
   dimatikan tegas, bukan sekadar dipercepat. */
@media (prefers-reduced-motion: reduce) {
    .tj-pita-jalan,
    .tj-apung,
    .hero::after,
    .wa-float::after {
        animation: none !important;
    }

    .tj-masuk,
    .hero h1 .tj-baris {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   Lapisan 3: sisa hijau dan beberapa perbaikan kecil.

   Palet dasarnya sengaja TIDAK ditimpa di sini. Warna situs ditentukan oleh
   blok <style id="blue-theme-permanent"> di includes/header.php, dan lapisan
   ini hanya mengurus dua hal: tempat yang dulu hijau, dan detail kecil yang
   memang perlu dirapikan.

   Sempat ada percobaan mengganti seluruh palet jadi navy yang jauh lebih
   gelap. Hasilnya situsnya terasa mati, jadi dikembalikan. Catatan ini
   ditinggalkan supaya tidak ada yang mencoba hal yang sama lagi tanpa tahu
   pernah dicoba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Yang dulu hijau ──────────────────────────────────────────────────── */
.aturan-boleh {
    background: linear-gradient(160deg, #1B4198 0%, #14357F 100%);
    border-color: #4A7FD8;
}

.aturan-boleh li::before,
.aturan-boleh h4::before {
    color: #BFD2FF;
}

/* Lencana Terverifikasi. Biru pucat, bukan hijau. Artinya tetap jelas karena
   ada ikon perisai bercentang dan tulisannya, bukan karena warnanya. */
.lencana-verif,
.talent-card .lencana-verif,
.identitas .lencana-verif {
    color: #BFD2FF;
    background: rgba(107, 149, 255, .18);
    border-color: rgba(107, 149, 255, .42);
}

/* Namanya masih .btn-green karena dipakai di banyak tempat, tapi warnanya
   biru. Mengganti nama kelasnya berarti menyentuh belasan berkas untuk
   keuntungan nol. */
.btn-green {
    background: var(--blue);
    color: #fff;
}

.btn-green:hover {
    background: #3A69DE;
}

/* Titik daring dan titik pemisah di pita kata. */
.tc-titik {
    background: #8FBCFF;
    box-shadow: 0 0 10px rgba(143, 188, 255, .9);
}

/* Bagian "cerita" pada tulisan merek. Tetap dibedakan, tapi dengan biru
   pucat. Dua warna dalam satu kata hanya bekerja kalau keduanya masih satu
   keluarga, dan biru dengan hijau bukan satu keluarga. */
.logo-kata b {
    color: #BFD2FF;
    font-weight: 700;
}

/* Label unggulan. Emas dipertahankan: bintang emas sudah dipahami semua
   orang sebagai penilaian. Yang dibuang cuma hijaunya. */
.lay-badge,
.pilih-tanda {
    background: linear-gradient(160deg, #F3C15C, #D9A038);
    color: #2A1B00;
    box-shadow: 0 6px 16px -8px rgba(217, 160, 56, .8);
}

/* ── Lambang di navbar ──────────────────────────────────────────────────
   Berkas logonya kotak rata tanpa sudut membulat, sesuai berkas asli.
   Pembulatan hanya ditambahkan di tampilan, tidak diubah di berkasnya,
   supaya ikon aplikasi dan favicon tetap sama persis dengan aslinya. */
.logo-mark {
    border-radius: 9px;
}

/* ── Isian formulir ─────────────────────────────────────────────────── */
input,
textarea,
select {
    border: 1px solid #D6DEF2 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--blue) !important;
}

/* ── Cahaya latar hero ──────────────────────────────────────────────────
   Dikurung di dalam kotak hero lewat overflow:hidden di Lapisan 2, supaya
   tidak meluber keluar layar dan memunculkan gulir mendatar. */
.hero::after {
    background:
        radial-gradient(40% 44% at 16% 20%, rgba(150, 185, 255, .18), transparent 70%),
        radial-gradient(34% 38% at 84% 70%, rgba(199, 215, 245, .10), transparent 70%);
}

/* ── Kartu talent yang lebih ramping ──────────────────────────────────────
   Kartu lama 337 x 435 piksel dan cuma tiga yang muat sebaris di layar
   desktop. Waktu talent yang tampil cuma dua orang, ukuran itu tidak terasa.
   Sekarang ada 170-an orang, dan kartu sebesar itu berarti pengunjung harus
   menggulir lama sebelum menemukan yang cocok. Yang paling banyak makan
   ruang adalah bio, karena panjangnya bebas dan sebagian talent menulis
   sampai sepuluh baris.

   Jadi: kotaknya dikecilkan, bio dipotong tiga baris dengan tombol untuk
   membuka, dan jam aktif diperkecil. Tidak ada informasi yang hilang, cuma
   dilipat. */

.talent-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px;
}

.talent-top { padding: 13px 16px 6px; gap: 10px; }
.talent-ava { width: 44px; height: 44px; font-size: 16px; flex: none; }

/* Nama dibatasi satu baris. Kolom kanan kartu cuma sekitar 165 piksel, dan
   nama panjang yang dibiarkan turun ke baris kedua menambah tinggi SEMUA
   kartu di baris yang sama, bukan cuma kartunya sendiri. Nama penuh tetap
   bisa dibaca di jendela pesan waktu tombolnya diklik. */
/* h3 ini kotak flex, dan di flex yang menentukan turun baris bukan
   white-space melainkan flex-wrap. Sempat dipasang nowrap pada teksnya saja
   dan namanya tetap turun ke baris kedua. */
.talent-info h3 {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 1px;
    flex-wrap: nowrap;
}
.talent-info h3 .talent-nama {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.talent-info h3 .gender-badge,
.talent-info h3 .lencana-verif { flex: none; }

.talent-handle { font-size: 11px; margin-bottom: 4px; }
.talent-tags { margin-top: 2px; }
.talent-tags .tag { font-size: 10.5px; padding: 2px 7px; }

/* Bintang dan angka rating dipaksa satu baris. Sebelumnya keduanya tidak muat
   berdampingan di kolom sesempit ini dan turun jadi dua baris. */
.talent-rating { margin-top: 3px; flex-wrap: nowrap; gap: 5px; }
.talent-rating .stars-static svg { width: 12px; height: 12px; }
.talent-rating .rating-num { font-size: 10.5px; white-space: nowrap; }

.talent-mid { padding: 0 16px 10px; }
.talent-hobbies { font-size: 12px; line-height: 1.45; }

/* Hobi dipotong satu baris. Ini keterangan pendukung, bukan yang bikin orang
   memilih; yang bikin memilih ada di bio. Dipotong satu baris supaya tinggi
   yang terpakai kaki kartu untuk tombol bisa diganti dari sini. */
.talent-hobbies {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.t-bio-bungkus { margin-top: 6px; }

.t-bio {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* line-clamp dilepas dengan none, bukan unset. Sebagian peramban lama
   mengembalikan unset ke nilai bawaan dan tulisannya tetap terpotong. */
.t-bio.terbuka {
    -webkit-line-clamp: none;
    overflow: visible;
}

.t-bio-lagi {
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tj-aksen, #4A7FD8);
    cursor: pointer;
}
.t-bio-lagi:hover { text-decoration: underline; }
.t-bio-lagi:focus-visible { outline: 2px solid var(--tj-aksen, #4A7FD8); outline-offset: 2px; border-radius: 3px; }

/* Daftar layanan dibatasi dua baris. Talent yang menerima semua jenis layanan
   punya tujuh cip, dan kalau dibiarkan turun terus, satu kartu itu bisa
   menambah 80 piksel ke seluruh baris kartu di sebelahnya. Layanan lengkapnya
   tetap kelihatan di jendela pesan waktu tombolnya diklik, dan saringan
   layanan di atas daftar tetap bekerja untuk semuanya. */
.t-layanan {
    gap: 5px;
    margin-top: 8px;
    max-height: 44px;
    overflow: hidden;
}
.t-chip { font-size: 10.5px; padding: 2px 7px; }

/* Jam aktif sering panjang karena talent menulis catatan sendiri di
   belakangnya. Dipotong dua baris supaya tidak mendorong tombol pesan turun. */
.t-jam {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Kaki kartu: tarif dan tombol ────────────────────────────────────────
   Setelah kartunya dipersempit jadi 253 piksel, tarif dan tombol tidak lagi
   muat berdampingan dan saling menabrak. Tarif termahal butuh 107 piksel,
   tombolnya 155, sementara ruang yang ada cuma 219.

   Diperbaiki dari dua sisi. Keduanya diperkecil supaya tarif yang normal
   muat sebaris, dan kakinya diizinkan membungkus supaya tarif yang panjang
   mendorong tombolnya turun ke baris sendiri, bukan menindihnya.

   Tulisan tombolnya sengaja tidak dipendekkan jadi "Ngobrol" saja, karena
   kata "Sekarang" itu yang bikin tombolnya terasa mendesak, dan bagian Cara
   Kerja di halaman ini menyebut nama tombolnya persis. */
.talent-bottom {
    padding: 9px 16px;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.talent-rate { flex: 0 0 auto; }
.talent-rate strong { font-size: 13px; }

.btn-chat {
    font-size: 11px;
    padding: 7px 11px;
    gap: 5px;
    flex: 1 1 auto;
    justify-content: center;
}
.btn-chat .tc-ikon-tombol { width: 13px; height: 13px; }

/* Di layar HP kartu selalu satu kolom, jadi ruangnya lebih lega dan bio boleh
   sedikit lebih panjang sebelum dipotong. */
@media (max-width: 640px) {
    .talent-grid { grid-template-columns: 1fr; gap: 12px; }
    .t-bio { -webkit-line-clamp: 4; }
}

/* ═══ Foto talent diperbesar dan bisa diklik ════════════════════════════

   Foto adalah hal pertama yang dinilai orang di kartu talent, dan 44 piksel
   terlalu kecil untuk menilai apa pun. Dinaikkan ke 58 piksel, sementara
   padding samping dikurangi 2 piksel supaya kolom nama di sebelahnya nyaris
   tidak berkurang.

   Diukur di 153 kartu sebelum dipasang: tinggi kartu naik 2 piksel saja,
   karena kolom kanan memang sudah lebih tinggi dari fotonya. Nama yang
   terpotong bertambah dari 36 ke 43 dari 153. Ukuran 64 piksel sempat
   dicoba dan membuat 50 nama terpotong, tidak sebanding dengan tambahan
   6 piksel foto.

   Untuk melihat foto dengan jelas, fotonya diklik. Jendelanya kecil, bukan
   satu layar penuh, supaya daftar talent di belakangnya tetap kelihatan.
   ══════════════════════════════════════════════════════════════════════ */

.talent-top { padding: 13px 14px 6px; gap: 9px; }
.talent-ava { width: 58px; height: 58px; font-size: 21px; flex: none; }

/* Tombol punya gaya bawaan browser. Semuanya dinolkan supaya lingkarannya
   persis sama dengan lingkaran foto yang bukan tombol, tidak ada garis tipis
   atau latar abu-abu yang muncul sendiri. */
button.talent-ava {
    padding: 0;
    border: 0;
    position: relative;
    cursor: zoom-in;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    /* Lingkaran foto aslinya memakai overflow hidden untuk memotong gambar
       jadi bulat. Di tombol, pemotongan itu ikut memakan kaca pembesar di
       pojoknya sampai tinggal sepotong kecil. Gambarnya sendiri sudah punya
       border-radius, jadi pemotongan di tombolnya memang tidak diperlukan. */
    overflow: visible;
}

/* Kaca pembesar kecil di pojok foto. Tanpa penanda ini tidak ada yang tahu
   fotonya bisa diklik, dan fitur yang tidak kelihatan sama saja dengan
   tidak ada. */
.ava-kaca {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* Putih dengan ikon biru, sama seperti tombol CS. Isian var(--white)
       sempat dipakai, tapi di tema gelap nilainya biru tua, jadi lencananya
       biru di atas biru dan nyaris tidak kelihatan. Putih betulan aman di
       atas foto apa pun dan di kartu warna apa pun. */
    background: #FFFFFF;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: transform .18s ease;
}
.ava-kaca svg { width: 12px; height: 12px; }
button.talent-ava:hover .ava-kaca,
button.talent-ava:focus-visible .ava-kaca { transform: scale(1.14); }
button.talent-ava:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Jendela foto ───────────────────────────────────────────────────── */

/* Isi jendela bertambah (hobi, layanan, tarif), jadi di layar pendek bisa
   lebih tinggi dari layarnya. overflow hidden saja berarti bagian bawahnya
   terpotong dan tombol Ngobrol tidak bisa dijangkau sama sekali. Sumbu
   tegaknya dibuat bisa digulir, sumbu datarnya tetap dipotong supaya sudut
   membulatnya rapi. */
.foto-box {
    max-width: 330px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 40px);
}
@supports (height: 100dvh) {
    /* Bilah alamat di browser HP ikut terhitung di vh tapi tidak di dvh, jadi
       tanpa ini jendelanya bisa lebih tinggi dari layar yang benar-benar
       kelihatan. */
    .foto-box { max-height: calc(100dvh - 40px); }
}
.foto-bingkai {
    position: relative;
    background: #0d1420;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
/* contain, bukan cover. Yang diminta itu melihat fotonya dengan jelas, dan
   cover memotong bagian atas atau bawah foto potret. Lebih baik ada ruang
   gelap di sisi kiri kanan daripada wajahnya kepotong. */
.foto-bingkai img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(46vh, 340px);
    object-fit: contain;
}
.foto-box .modal-close {
    color: #fff;
    top: 8px;
    right: 12px;
    z-index: 2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.foto-isi { padding: 15px 18px 18px; }
.foto-nama {
    font-size: 18px;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.foto-ket { font-size: 13px; color: var(--text2); margin: 0 0 10px; }
.foto-hobi { font-size: 13px; color: var(--text2); margin: 0 0 10px; line-height: 1.45; }

/* Tidak memakai kelas .t-layanan dari kartu. Di kartu tingginya sengaja
   dipotong 44 piksel supaya kartunya rata, dan di jendela pemotongan itu
   justru menyembunyikan layanan yang mau dilihat orang. */
.foto-layanan { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }

.foto-tarif { font-size: 17px; font-weight: 700; margin: 0 0 13px; }

/* Widget chat mengambang punya z-index hampir setinggi-tingginya, jadi dia
   duduk di atas semua jendela, termasuk jendela pesanan yang sudah ada dari
   dulu. Di layar pendek tombol Tutup jadi ketutupan ikon chat dan tidak bisa
   dipencet. Selama ada jendela terbuka, widgetnya disembunyikan dan muncul
   lagi begitu jendelanya ditutup.

   :has() dipakai supaya satu aturan ini mengurus dua-duanya, jendela foto dan
   jendela pesanan, tanpa menyentuh kode jendela pesanan sama sekali. Kelas
   jendela-terbuka disiapkan sebagai cadangan untuk browser lama yang belum
   mengerti :has(). */
body:has(.modal-overlay.open) #tc,
body.jendela-terbuka #tc { display: none; }
.foto-aksi { display: flex; gap: 8px; align-items: stretch; }
.foto-aksi .btn-chat { flex: 1 1 auto; justify-content: center; }
.foto-tutup-teks {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text2);
    cursor: pointer;
}
/* Putih tembus pandang, bukan abu-abu muda. Di tema gelap latar abu-abu muda
   bikin tombolnya berkedip terang waktu disentuh kursor. */
.foto-tutup-teks:hover { background: rgba(127, 127, 127, .14); }

@media (max-width: 640px) {
    /* Di HP kartunya selebar layar, jadi ruangnya banyak dan fotonya bisa
       lebih besar lagi tanpa menekan kolom nama sama sekali. */
    .talent-ava { width: 68px; height: 68px; font-size: 24px; }
    .talent-top { padding: 14px 16px 6px; gap: 12px; }
    .ava-kaca { width: 22px; height: 22px; }
    .ava-kaca svg { width: 13px; height: 13px; }
    .foto-box { max-width: 100%; }
}

/* ═══ Panel saringan talent ═════════════════════════════════════════════

   Empat deretan tombol yang melipat sendiri ke bawah dan rata tengah bikin
   tepi tiap baris tidak pernah sejajar, dan tinggi seluruh blok berubah tiap
   kali ada layanan atau minat baru ditambahkan. Dari layar kelihatan seperti
   tumpukan tombol, bukan alat saring.

   Sekarang: satu baris per kelompok, tidak pernah melipat, diberi nama di
   kirinya, digeser mendatar kalau tombolnya kebanyakan. Tinggi panelnya tetap
   berapa pun jumlah pilihannya.
   ═════════════════════════════════════════════════════════════════════ */

.saring-panel {
    max-width: 880px;
    margin: 0 auto 30px;
    padding: 6px 0;
    text-align: left;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.saring-baris {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 9px 0;
}
.saring-baris + .saring-baris { border-top: 1px solid var(--border); }

.saring-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text3, var(--text2));
    white-space: nowrap;
}

/* Baris yang bisa digeser.

   minmax(0, 1fr) di kolom induknya penting. Tanpa itu kolom grid melebar
   mengikuti isinya dan barisnya tetap memanjang keluar layar, jadi overflow
   di sini tidak pernah kepakai. */
.saring-panel .saring-geser {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 4px;
    /* Ruang di kanan supaya tombol terakhir tidak mepet ke tepi dan tidak
       tertutup bayangan penanda geser. */
    padding: 3px 44px 3px 1px;
}
/* Batang gulir bawaan dibuang. Di baris setinggi 40 piksel batang gulir
   setebal 15 piksel memakan sepertiga tingginya dan kelihatan seperti cacat. */
.saring-panel .saring-geser::-webkit-scrollbar { display: none; }

/* Tombolnya tidak boleh menyusut waktu barisnya kepenuhan. Kalau menyusut,
   tulisan di dalamnya terpotong dan orang tidak tahu itu tombol apa. */
.saring-panel .saring-geser > button { flex: 0 0 auto; }

/* Ukuran tombol diseragamkan. Sebelumnya baris minat memakai tombol yang
   lebih kecil dari tiga baris lainnya, dan bedanya kelihatan seperti tidak
   sengaja, bukan seperti pilihan. */
.saring-panel .gender-tab,
.saring-panel .filter-btn,
.saring-panel .verif-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-width: 1px;
    line-height: 1.25;
}

/* Garis pemisah sebelum saklar terverifikasi. */
.saring-pisah {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--border);
}

/* Penanda masih ada yang bisa digeser. Tanpa ini orang mengira tombolnya
   memang cuma yang kelihatan, dan pilihan di ujung kanan tidak pernah
   ditemukan sama sekali. */
.saring-baris { position: relative; }
.saring-baris::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 56px;
    pointer-events: none;
    /* Warnanya mengikuti latar halaman, jadi ujungnya benar-benar memudar,
       bukan tertutup kotak berwarna. Lebarnya 56 piksel supaya tulisan di
       tombol terakhir memudar bertahap, tidak terpotong mendadak di tengah
       huruf seperti waktu masih 34 piksel. */
    background: linear-gradient(to right, rgba(15, 45, 138, 0), var(--bg, #0F2D8A) 72%);
    opacity: 0;
    transition: opacity .18s ease;
}
.saring-baris.bisa-geser::after { opacity: 1; }

@media (max-width: 640px) {
    /* Label dipendekkan, bukan ditumpuk di atas barisnya. Menumpuk berarti
       empat baris tambahan di layar yang tingginya sudah pas-pasan. */
    .saring-baris { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
    .saring-label { font-size: 10px; letter-spacing: .06em; }
    .saring-panel { margin-bottom: 22px; }
    .saring-panel .gender-tab,
    .saring-panel .filter-btn,
    .saring-panel .verif-tab { padding: 7px 14px; font-size: 12.5px; }
}

/* ═══ Tuas umur ═════════════════════════════════════════════════════════

   Umur itu rentang, dan rentang yang dipecah jadi tombol selalu salah buat
   sebagian orang: yang mau 19 sampai 23 terpaksa menekan 18-21 lalu kehilangan
   yang 22 dan 23. Dua tuas, batasnya ditentukan sendiri.

   Dibuat beda bentuknya dari tiga baris di atasnya supaya jelas cara pakainya
   memang beda: yang di atas diklik, yang ini digeser.
   ═════════════════════════════════════════════════════════════════════ */

.saring-baris-umur { padding: 13px 0 14px; }
.umur-geser { display: flex; align-items: center; gap: 14px; }

/* Angka batas dan relnya satu kesatuan. Di HP wadah ini yang turun ke bawah
   lencana, bukan tiga isinya turun sendiri-sendiri. */
.umur-jalur { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }

.umur-rel { position: relative; flex: 1 1 auto; min-width: 0; height: 26px; }

.umur-batas {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text3, var(--text2));
    font-variant-numeric: tabular-nums;
}
.umur-dasar,
.umur-isi {
    position: absolute;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    pointer-events: none;
}
.umur-dasar {
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .13);
    /* Garis tipis di dalam relnya supaya tidak kelihatan seperti balok datar */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
}
.umur-isi {
    background: linear-gradient(90deg, var(--blue), #8FB6FF);
    box-shadow: 0 0 10px rgba(74, 127, 216, .45);
}

/* Lencana, bukan tulisan lepas. Bentuknya sama dengan tombol di tiga baris di
   atasnya, dan ikut terisi waktu saringannya sedang dipakai, jadi sekali lihat
   ketahuan baris ini sedang menyaring atau tidak. */
.umur-teks {
    flex: 0 0 auto;
    min-width: 118px;
    text-align: center;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    /* Angka selebar sama supaya tulisannya tidak bergeser-geser waktu tuasnya
       ditarik. Lebar angka yang berubah bikin barisnya kelihatan bergetar. */
    font-variant-numeric: tabular-nums;
}

/* Dua input range ditumpuk di tempat yang sama.

   pointer-events none di input, auto di tuasnya. Tanpa itu input yang di atas
   menutupi seluruh lebar input yang di bawah, dan tuas bawah tidak pernah bisa
   diraih sama sekali. */
.umur-tuas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    /* Ada aturan sesitus input, textarea, select { background: #FFF !important }
       dari waktu situs ini dibuat bertema gelap, supaya kolom isian tetap
       terbaca. Aturan itu ikut kena ke tuas ini dan menggambar balok putih
       selebar barisnya menutupi relnya. Ditimpa khusus di sini saja, kolom
       isian yang lain tidak tersentuh. */
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}
.umur-tuas::-webkit-slider-runnable-track { height: 26px; background: none; border: 0; }
.umur-tuas::-moz-range-track { height: 26px; background: none; border: 0; }

.umur-tuas::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid var(--blue);
    /* Lingkaran cahaya tipis yang melebar waktu disentuh. Ini yang bikin
       tuasnya terasa bisa dipegang, bukan cuma gambar bulat di atas garis. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 0 rgba(143, 182, 255, .3);
    cursor: grab;
    transition: box-shadow .18s ease, transform .12s ease;
}
.umur-tuas::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid var(--blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 0 rgba(143, 182, 255, .3);
    cursor: grab;
    transition: box-shadow .18s ease, transform .12s ease;
}
.umur-tuas:hover::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 7px rgba(143, 182, 255, .2); }
.umur-tuas:hover::-moz-range-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 7px rgba(143, 182, 255, .2); }
.umur-tuas:active::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 0 10px rgba(143, 182, 255, .26); }
.umur-tuas:active::-moz-range-thumb { transform: scale(1.08); box-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 0 10px rgba(143, 182, 255, .26); }
.umur-tuas:active::-webkit-slider-thumb { cursor: grabbing; }
.umur-tuas:active::-moz-range-thumb { cursor: grabbing; }
.umur-tuas:focus-visible::-webkit-slider-thumb { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.umur-tuas:focus-visible::-moz-range-thumb { outline: 2px solid #FFFFFF; outline-offset: 2px; }

@media (max-width: 640px) {
    /* Di HP tulisannya dinaikkan ke atas tuasnya. Kalau tetap di samping,
       tuasnya cuma kebagian sekitar 140 piksel untuk 40-an tahun, dan tiap
       tahun jadi kurang dari 4 piksel, terlalu halus untuk jempol. */
    .umur-geser { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
    .umur-teks { align-self: flex-start; min-width: 0; padding: 5px 11px; font-size: 11.5px; }
}


/* ═══ Warna label minat ══════════════════════════════════════════════════

   Dua label tidak terbaca: Musik dan Kuliner. Empat label lainnya memakai
   warna yang ditulis langsung, jadi latarnya tetap terang waktu situs ini
   dibuat bertema gelap. Dua ini memakai var(--blue-light) dan
   var(--accent-light), dan dua peubah itu ikut berubah jadi biru tua waktu
   temanya diganti. Hasilnya tulisan biru di atas biru tua.

   Kuliner dipindah ke biru kehijauan, bukan hijau. Hijau sudah dibuang dari
   seluruh wajah situs dan ada uji yang menjaganya tetap begitu.
   ═════════════════════════════════════════════════════════════════════ */

.tag-blue { background: #E4EDFD; color: #1B3FA8; }
.tag-green { background: #E0F5F7; color: #0E5A66; }

/* Lencana rentang menyala waktu saringannya sedang dipakai. */
.umur-teks.aktif {
    background: var(--blue);
    border-color: var(--blue);
    color: #FFFFFF;
}


/* ── Tarif per layanan (23 Sep 2026) ─────────────────────────────────────
   Satu talent sekarang boleh punya tarif berbeda tiap layanan, jadi angka
   tunggal di kartu diganti "mulai <termurah>", dan jendela foto memuat
   rincian per layanan alih-alih satu baris harga. */

.talent-rate .rate-mulai {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text3);
    margin-right: 3px;
}

/* .foto-tarif dulu satu baris tebal. Sekarang isinya daftar, jadi ukurannya
   dikembalikan ke ukuran teks biasa dan yang tebal cuma angkanya. */
.foto-tarif {
    font-size: 13.5px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.foto-tarif-baris {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    color: var(--text2);
}
/* Garis putus-putus penghubung nama layanan dan harganya. Tanpa itu, di baris
   yang namanya pendek, mata harus melompati ruang kosong yang lebar. */
.foto-tarif-baris::before {
    content: "";
    order: 1;
    flex: 1 1 auto;
    height: 0;
    border-bottom: 1px dotted var(--border);
    transform: translateY(-3px);
    min-width: 12px;
}
.foto-tarif-baris span { order: 0; flex: 0 0 auto; }
.foto-tarif-baris b { order: 2; flex: 0 0 auto; color: #FFFFFF; font-weight: 700; }

/* ---------- Rating & ulasan di jendela foto (assets/js/ulasan.js) ---------- */
.foto-ulasan { margin: -4px 0 12px; }
.foto-ulasan[hidden] { display: none; }
.u-bintang {
  position: relative; display: inline-block; line-height: 1;
  font-size: 15px; letter-spacing: 1px; color: rgba(255, 255, 255, .22);
  white-space: nowrap; flex: none;
}
.u-bintang-isi {
  position: absolute; inset: 0 auto 0 0; overflow: hidden;
  color: #F4C86A; white-space: nowrap;
}
.u-bintang-redup { color: rgba(255, 255, 255, .18); }
.u-bintang-kecil { font-size: 12px; }
.u-ringkas {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  width: 100%; padding: 9px 12px; margin: 0;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; color: inherit; font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer; transition: background .15s, border-color .15s;
}
.u-ringkas:hover { background: rgba(255, 255, 255, .11); }
.u-ringkas:focus-visible { outline: 2px solid #F4C86A; outline-offset: 2px; }
.u-ringkas.terbuka { border-color: rgba(244, 200, 106, .55); }
.u-angka { font-size: 15px; font-weight: 700; }
.u-jumlah { color: var(--text2); }
.u-lihat { margin-left: auto; font-weight: 600; color: #F4C86A; }
.u-lihat::after { content: ' \203A'; display: inline-block; transition: transform .15s; }
.u-ringkas.terbuka .u-lihat::after { transform: rotate(90deg); }
.u-kosong { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text2); }
.u-daftar { margin-top: 10px; }
.u-daftar[hidden] { display: none; }
.u-status { font-size: 13px; color: var(--text2); margin: 6px 0; }
.u-coba, .u-lagi {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: #F4C86A; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.u-lagi { display: block; margin: 10px auto 2px; font-size: 13px; }
.u-sebaran { display: grid; gap: 4px; margin: 0 0 12px; }
.u-sebaran-baris { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.u-sebaran-jalur { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.u-sebaran-isi { display: block; height: 100%; border-radius: 3px; background: #F4C86A; }
.u-sebaran-n { text-align: right; }
.u-list { list-style: none; margin: 0; padding: 0; }
.u-item { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.u-kepala { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.u-nama { font-weight: 700; }
.u-tanggal { margin-left: auto; color: var(--text2); font-size: 12px; }
.u-komentar {
  margin: 5px 0 0; font-size: 13.5px; line-height: 1.5;
  overflow-wrap: anywhere; white-space: pre-line;
}

/* ---------- Halaman bernomor daftar talent (assets/js/halaman-talent.js) ---------- */
.talent-card.hal-lain { display: none !important; }
.hal-pager { margin: 28px auto 8px; text-align: center; }
.hal-pager[hidden] { display: none; }
.hal-baris { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.hal-angka { display: flex; align-items: center; gap: 6px; }
.hal-tombol {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: inherit; font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.hal-tombol:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.hal-tombol:active:not(:disabled) { transform: scale(.96); }
.hal-tombol:focus-visible { outline: 2px solid #F4C86A; outline-offset: 2px; }
.hal-tombol.aktif {
  background: #fff; border-color: #fff; color: #0F2D8A; cursor: default;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.hal-tombol:disabled { opacity: .35; cursor: default; }
.hal-panah { font-size: 20px; line-height: 1; margin-top: -2px; }
.hal-sela { min-width: 18px; text-align: center; color: var(--text2); letter-spacing: 1px; }
.hal-info { margin: 12px 0 0; font-size: 13px; color: var(--text2); }
@media (max-width: 640px) {
  .hal-pager { margin-top: 22px; }
  .hal-baris { gap: 5px; }
  .hal-angka { gap: 4px; }
  .hal-tombol { min-width: 38px; height: 40px; padding: 0 8px; font-size: 14px; border-radius: 10px; }
  .hal-arah-teks { display: none; }
  .hal-arah { min-width: 40px; }
}
@media (max-width: 420px) {
  .hal-tombol { min-width: 34px; height: 38px; padding: 0 6px; }
  .hal-arah { min-width: 36px; }
  .hal-sela { min-width: 14px; }
}

/* ── Bilah atas di HP saat sudah masuk (30 Sep 2026) ───────────────────────
   Nama akun, tombol Logout, dan tombol menu lebih lebar dari layar 360 sampai
   400 piksel, sehingga halaman bisa digeser ke samping. Logout di bilah atas
   disembunyikan karena sudah ada di menu garis tiga, nama yang panjang
   dipotong dengan elipsis, dan di layar yang sangat sempit hanya ikonnya yang
   tampil. Nama lengkapnya tetap terbaca oleh pembaca layar. */
@media (max-width: 560px) {
  .nav-right .nav-user-chip + .btn-ghost { display: none; }
  .nav-user-chip { display: inline-block; max-width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .nav-user-chip .tc-ikon { vertical-align: -2px; margin-right: 6px; }
}
@media (max-width: 380px) {
  .nav-user-chip { font-size: 0; max-width: none; padding: 9px 11px; }
  .nav-user-chip .tc-ikon { margin: 0; opacity: .9; }
}

/* ── Tombol bahasa ID/EN (30 Sep 2026) ─────────────────────────────────────
   Dua pilihan berbentuk pil di bilah atas dan di menu HP. Bahasa yang sedang
   dipakai berwarna biru penuh, satunya redup. Ukurannya sengaja lebih kecil
   dari tombol Masuk/Daftar supaya tidak bersaing dengan ajakan utama. */
.bahasa-pilih {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  padding: 3px; border-radius: 50px;
  border: 1px solid rgba(146, 176, 236, .35); background: rgba(255, 255, 255, .04);
}
.bahasa-pilih a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 9px; border-radius: 50px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  color: #9DB5E6; text-decoration: none; transition: color .2s, background-color .2s;
}
.bahasa-pilih a:hover { color: #FFFFFF; }
.bahasa-pilih a.aktif { background: #4A7FD8; color: #FFFFFF; box-shadow: 0 1px 6px rgba(10, 31, 95, .35); }
.bahasa-pilih a:focus-visible { outline: 2px solid #9DB5E6; outline-offset: 2px; }
.nav-right .bahasa-nav { margin-right: 4px; }

.mobile-menu .bahasa-menu { align-self: flex-start; margin: 4px 0 10px; }
.mobile-menu .bahasa-pilih a { width: auto; height: 34px; padding: 0 16px; font-size: 13px; color: #9DB5E6; }
.mobile-menu .bahasa-pilih a:hover { background: transparent; color: #FFFFFF; }
.mobile-menu .bahasa-pilih a.aktif { background: #4A7FD8; color: #FFFFFF; }

/* Di HP yang sudah masuk, bilah atas sudah penuh oleh nama akun dan tombol
   menu. Pilihan bahasa cukup di dalam menu garis tiga. */
@media (max-width: 560px) {
  .nav-right:has(.nav-user-chip) .bahasa-nav { display: none; }
}
/* Di layar 340 piksel ke bawah bilah atas tidak cukup untuk logo, pilihan
   bahasa, dan tombol menu sekaligus. Pilihannya tetap ada di menu. */
@media (max-width: 340px) {
  .nav-right .bahasa-nav { display: none; }
}