/* kutenang.id — gaya dasar
   Palet Yayasan: Ivory & Blush dominan; Sage, Terracotta, Evergreen aksen kecil.
   Warna teks memakai coklat dari logo (#4D362E) — kontras 10,06 di atas Ivory. */

:root{
  /* Sage dan terracotta disesuaikan dengan lembar merek "Kutenang.id R1"
     yang dikirim Pak Lionart 14 Agustus — keduanya kotak yang beliau
     centang. Nilai lama lebih pucat dan tidak sama dengan lembar itu.
     Arah perubahannya menggelapkan, jadi kontras teks selalu membaik,
     tidak pernah memburuk. */
  --ivory:#F4F3F1;  --blush:#DECEBF;  --sage:#87937B;
  --terracotta:#A56549;  --evergreen:#68756D;
  /* Dipakai beberapa berkas lain lewat nilai cadangan; dijadikan resmi
     supaya tidak ada dua sumber kebenaran. */
  --terracotta-dark:#7C4D3C;
  --ink:#4D362E;          /* coklat logo — teks utama */
  --ink-soft:#6E5A50;     /* teks sekunder */
  --ink-mute:#9A8B82;
  --putih:#FFFFFF;
  --garis:#E5DDD2;
  --galat:#B03030;  --awas:#B8860B;  --oke:#3E7A4E;
  --r:18px;  --r-kecil:12px;
  --bayang:0 1px 2px rgba(77,54,46,.04), 0 8px 24px rgba(77,54,46,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--ivory); color:var(--ink);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wadah{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- tipografi */
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(32px,5.5vw,54px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:19px}
.lead{font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft)}
.kecil{font-size:13.5px;color:var(--ink-mute)}

/* ------------------------------------------------------------------ tombol */
.tbl{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid transparent;border-radius:99px;
  padding:13px 26px;font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;                 /* jangan pernah pecah jadi dua baris */
}
.tbl-utama{background:var(--ink);color:var(--ivory)}
.tbl-utama:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(77,54,46,.22)}
.tbl-garis{background:transparent;border-color:var(--ink);color:var(--ink)}
.tbl-garis:hover{background:rgba(77,54,46,.05)}
.tbl-lembut{background:var(--blush);color:var(--ink)}
.tbl-lembut:hover{transform:translateY(-1px)}
.tbl-lebar{width:100%}

/* ------------------------------------------------------------------- kartu */
.kartu{
  background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--r);padding:22px;box-shadow:var(--bayang);
}

/* ------------------------------------------------------------------- utilitas */
.pusat{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ------------------------------------------------------------------ navbar */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(244,243,241,.86);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav.turun{border-bottom-color:var(--garis)}
.nav-isi{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-logo img{height:32px}
.nav-menu{display:flex;align-items:center;gap:30px}
.nav-menu a{font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:color .15s}
/* Dua tautan ini hanya untuk laci ponsel — di layar lebar tugasnya sudah
   dipegang tombol di .nav-aksi, jadi bila ikut tampil menjadi ganda. */
.nav-menu .menu-tbl{display:none}
.nav-menu a:hover{color:var(--ink)}
.nav-aksi{display:flex;align-items:center;gap:10px}
.nav-aksi .tbl{padding:10px 20px;font-size:14px}
.nav-tombol{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-tombol span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:4px 0;transition:.25s}
.nav-tombol.buka span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-tombol.buka span:nth-child(2){opacity:0}
.nav-tombol.buka span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------------- hero */
.hero{padding:76px 0 64px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 420px at 78% 12%, rgba(222,206,191,.62), transparent 64%),
    radial-gradient(560px 340px at 6% 88%, rgba(161,167,158,.2), transparent 62%);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--terracotta)}
.hero .lead{max-width:452px;margin-bottom:28px}
.hero-aksi{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-aksi .tbl{flex:0 0 auto}
/* Tiga janji singkat di bawah tombol. Dulu tiap kalimat diawali titik sage;
   sekarang titik itu dipindah MENJADI pemisah antar kalimat, supaya
   terbaca mengalir sebagai satu baris, bukan seperti daftar. Sengaja
   inline (bukan flex) agar membungkus seperti kalimat biasa di layar
   sempit, dan pemisah tidak pernah menggantung di awal baris. */
.hero-catat{font-size:13.2px;color:var(--ink-mute);line-height:2}
.hero-catat span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--sage);margin:0 10px;vertical-align:middle}

/* kotak cari cepat */
.cari{
  background:var(--putih);border:1px solid var(--garis);border-radius:24px;
  padding:26px;box-shadow:0 2px 4px rgba(77,54,46,.03),0 22px 56px rgba(77,54,46,.09);
}
.cari h3{font-size:16.5px;margin-bottom:3px}
.cari p{font-size:13.2px;color:var(--ink-mute);margin-bottom:19px}
.cari-tab{display:flex;gap:6px;background:var(--ivory);border-radius:99px;padding:4px;margin-bottom:18px}
.cari-tab button{
  flex:1;border:none;background:none;border-radius:99px;padding:9px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.18s;
}
.cari-tab button.aktif{background:var(--putih);color:var(--ink);box-shadow:0 1px 3px rgba(77,54,46,.1)}
.cari-kolom{margin-bottom:13px}
.cari-kolom label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.cari-kolom select,.cari-kolom input{
  width:100%;border:1.5px solid var(--garis);border-radius:12px;padding:11px 13px;
  font:inherit;font-size:14.5px;background:#FCFBF9;color:var(--ink);
}
.cari-kolom select:focus,.cari-kolom input:focus{outline:none;border-color:var(--sage);background:var(--putih)}
.cari-dua{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* ------------------------------------------------------------------ bagian */
.bagian{padding:72px 0}
.bagian-abu{background:linear-gradient(180deg, transparent, rgba(222,206,191,.24) 22%, rgba(222,206,191,.24) 78%, transparent)}
.bagian-kepala{max-width:600px;margin-bottom:38px}
.bagian-kepala .tanda{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--evergreen);margin-bottom:11px;
}
/* Judul kecil yang memuat logo, bukan hanya tulisan. Dipakai
   "Kenapa <logo>" di bagian keunggulan. */
.bagian-kepala .tanda-logo{display:inline-flex;align-items:center;gap:8px}
/* Tinggi 19px, jauh di atas tulisan 11px di sebelahnya: pada ukuran
   tulisan itu wordmark-nya tidak terbaca. */
.bagian-kepala .tanda-merek{height:19px;width:auto;display:block;
  position:relative;top:-1px}
@media(max-width:640px){.bagian-kepala .tanda-merek{height:17px}}

.bagian-kepala h2{margin-bottom:11px}

/* keunggulan */
/* Empat kartu. Di layar 1120px tiap kartu jadi ~253px, jadi jarak dan
   padding dirapatkan sedikit supaya teksnya tidak terlalu sempit.
   Breakpoint 900px sudah menurunkannya ke 2 kolom (2x2), 640px ke 1. */
.unggul{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.unggul-item{padding:24px 21px;border-radius:var(--r);background:var(--putih);border:1px solid var(--garis)}
.unggul-item .ikon{
  width:42px;height:42px;border-radius:13px;background:var(--ivory);
  display:grid;place-items:center;margin-bottom:15px;font-size:19px;
}
.unggul-item h3{font-size:16.5px;margin-bottom:7px}
.unggul-item p{font-size:14px;color:var(--ink-soft)}

/* talent */
.talent-baris{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:20px}
.talent-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:22px;transition:transform .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;          /* tinggi kartu jadi seragam */
  overflow:hidden;                             /* sudut foto ikut terpotong rapi */
}
.talent-kartu:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(77,54,46,.1)}
/* Aturan kartu versi lama (foto lingkaran 64px di sudut) DIBUANG.
   Tampilan foto kartu sepenuhnya diatur .talent-bingkai / img.talent-foto
   di tambahan.css. Menyisakan aturan lama di sini pernah membuat fotonya
   tampil sebagai elips, karena border-radius:50% tidak ikut tertimpa. */
.talent-kartu h3{font-size:16px;margin-bottom:2px}
.talent-jenis{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--evergreen);margin-bottom:11px}
/* Deretan tag bidang.

   Aturan dasarnya MEMBUNGKUS - dipakai halaman profil pendamping, yang
   menampilkan seluruh bidang tanpa batas dan memang perlu turun ke baris
   berikutnya. */
.talent-bidang{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px}
.talent-bidang span{
  font-size:11.5px;background:var(--ivory);border:1px solid var(--garis);
  border-radius:99px;padding:2px 9px;color:var(--ink-soft);
}

/* SATU BARIS, KHUSUS DI KARTU - 20 Agustus 2026.

   (!) Perhatikan awalan `.talent-kartu`. Kelas .talent-bidang dipakai TIGA
       templat, bukan satu:
         _kartu-talent.tpl:47   kartu pendamping         <- yang dimaksud
         _talent.tpl:33         daftar bidang di profil
         _talent.tpl:252        "Cara bertemu" di profil
       Tanpa awalan itu, nowrap ikut terpakai di halaman profil - dan karena
       di sana bidangnya ditampilkan seluruhnya, deretannya melebar sampai
       552px. Tag anaknya yang white-space:nowrap juga membesarkan lebar
       MINIMUM wadahnya, sehingga kolom kisi 1fr tidak dapat menyusut dan
       SELURUH halaman meluber. Terukur pada viewport 375px: isi 576px,
       meluber 201px. Itu benar-benar terjadi hari ini.

   RIWAYAT percobaan yang gagal, supaya tidak diulang:
     a. dibiarkan membungkus lalu dibatasi dua baris -> lencana "+n" terdorong
        ke baris ketiga lalu terpotong pada nama bidang yang panjang
     b. lebar tiap tag dibatasi separuh kartu -> semua tag terpotong, bahkan
        yang pendek ("Kecemas...", "Mainten..."). Tidak terbaca.

   Yang dipakai: satu baris, dan yang MENYUSUT adalah tagnya. Tag berukuran
   wajar tetap utuh; hanya yang benar-benar kepanjangan yang berakhir
   titik-titik. Lencana "+n" tidak pernah menyusut sehingga selalu terbaca. */
.talent-kartu .talent-bidang{flex-wrap:nowrap;overflow:hidden}
.talent-kartu .talent-bidang span{
  min-width:0;flex:0 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Lencana "+n" TIDAK boleh menyusut - justru itu yang harus selalu terbaca. */
.talent-kartu .talent-bidang span.lagi{flex:none}
/* DUA BARIS SAJA - 20 Agustus 2026.

   Dipotong dengan line-clamp, bukan dengan memperpendek truncate di templat:
   dengan line-clamp SEMUA kartu punya tinggi teks yang sama berapa pun panjang
   naskahnya. Itu penting karena kartu dalam satu baris kisi selalu setinggi
   yang tertinggi -- satu naskah panjang saja cukup untuk memanjangkan seluruh
   barisnya.

   TANPA flex:1 -- ini penting. flex:1 meregangkan kotaknya mengikuti sisa
   ruang kartu, sehingga kartu yang tag bidangnya cuma satu baris punya kotak
   teks lebih tinggi dan baris ketiga ikut terlihat walau sudah dipangkas.
   Terukur: Ricky 73px sedangkan yang lain 45px.

   Mendorong harga dan tombol ke dasar kartu sudah menjadi tugas
   `.talent-kaki{margin-top:auto}`, jadi flex:1 di sini memang berlebihan. */
.talent-kata{
  font-size:13.5px;color:var(--ink-soft);margin-bottom:15px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.talent-kaki{
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  padding-top:14px;border-top:1px solid var(--garis);
}
/* margin-top:auto SENGAJA TIDAK di sini lagi - dipindah ke .kartu-cepat
   (tambahan.css) supaya kotak "Paling cepat" ikut menempel ke dasar kartu
   bersama harga, bukan mengambang di bawah teks perkenalan. */
/* Tombol sedikit dirampingkan supaya kolom harga di sebelahnya cukup lebar
   untuk menaruh badge potongan SEJAJAR dengan harga coret, bukan di
   bawahnya. Lihat catatan di .tarif-diskon (tambahan.css). */
.talent-kaki .tbl{flex:none;padding:9px 10px;font-size:12.5px;white-space:nowrap}
.talent-tarif{min-width:0}
.talent-tarif s{color:var(--ink-mute);font-size:11.5px;font-weight:400}
/* Harga dan "per jam" SATU baris - 20 Agustus 2026. Semula <b> memakai
   display:block sehingga "per jam" turun sendiri dan memakan satu baris
   tambahan di tiap kartu. Hanya kartu yang diubah; .profil-tarif di halaman
   profil tetap bertingkat karena hurufnya jauh lebih besar. */
.talent-tarif b{display:inline;font-size:16px;margin-right:4px}
.talent-tarif small{font-size:11.5px;color:var(--ink-mute);font-weight:400}
/* Harga dan "per jam" satu kesatuan - lihat catatan di templat kartu.
   Dijadikan blok supaya SELALU turun ke barisnya sendiri, tidak
   bergantung pada kebetulan lebar kartu. */
.talent-tarif .tarif-kini{display:block}

/* langkah */
.langkah{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:l}
.langkah-item{position:relative;padding-top:46px}
.langkah-item::before{
  counter-increment:l;content:counter(l);
  position:absolute;top:0;left:0;font-size:38px;font-weight:800;
  color:var(--blush);line-height:1;z-index:0;
}
.langkah-item h3{font-size:15.5px;margin-bottom:6px;position:relative}
.langkah-item p{font-size:13.6px;color:var(--ink-soft);position:relative}

/* faq */
.faq{max-width:760px}
.faq-item{border-bottom:1px solid var(--garis)}
.faq-tanya{
  width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:19px 40px 19px 0;font:inherit;font-size:16px;font-weight:600;color:var(--ink);
  position:relative;
}
.faq-tanya::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq-item.buka .faq-tanya::after{transform:translateY(-30%) rotate(-135deg)}
.faq-jawab{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-jawab div{padding:0 0 19px;font-size:14.6px;color:var(--ink-soft)}
.faq-item.buka .faq-jawab{max-height:1400px}

/* ajakan */
.ajakan{
  background:var(--ink);color:var(--ivory);border-radius:28px;
  padding:52px 44px;text-align:center;
}
.ajakan h2{margin-bottom:11px}
.ajakan p{color:rgba(244,243,241,.76);max-width:440px;margin:0 auto 26px;font-size:15.5px}
.ajakan .tbl-lembut{background:var(--ivory);color:var(--ink)}

/* kaki */
.kaki{padding:52px 0 34px;border-top:1px solid var(--garis);margin-top:72px}
.kaki-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
.kaki-logo img{height:30px;margin-bottom:13px}
.kaki p{font-size:13.6px;color:var(--ink-soft);max-width:290px}
.kaki h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:13px}
.kaki ul{list-style:none}
.kaki li{margin-bottom:8px}
.kaki li a{font-size:14px;color:var(--ink-soft)}
.kaki li a:hover{color:var(--ink)}
.kaki-bawah{border-top:1px solid var(--garis);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.8px;color:var(--ink-mute)}

/* ------------------------------------------------ laci menu ponsel */
.nav-scrim{
  position:fixed;inset:0;z-index:39;background:rgba(77,54,46,.42);
  opacity:0;transition:opacity .28s ease;
}
.nav-scrim.tampil{opacity:1}
body.laci-terbuka{overflow:hidden}

@media (max-width:900px){
  .hero{padding:40px 0 52px}          /* semula 76px - terlalu jauh di ponsel */
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .unggul,.langkah{grid-template-columns:1fr 1fr}
  .kaki-grid{grid-template-columns:1fr 1fr}
  /* backdrop-filter menjadikan .nav sebagai acuan bagi keturunan position:fixed,
     sehingga laci hanya setinggi header. Di lebar ponsel efek buram itu tidak
     diperlukan — dimatikan supaya laci diukur terhadap layar. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ivory)}

  /* Laci menggeser dari tepi KIRI. z-index 40 — di bawah .nav (50) supaya
     tombol hamburger tetap dapat ditekan untuk menutupnya kembali. */
  .nav-menu{
    position:fixed;top:0;left:0;bottom:0;z-index:40;
    width:min(82vw, 320px);
    background:var(--ivory);flex-direction:column;
    align-items:stretch;gap:0;padding:90px 24px 28px;
    border-right:1px solid var(--garis);
    box-shadow:8px 0 28px rgba(77,54,46,.10);
    transform:translateX(-100%);transition:transform .28s ease;
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav-menu.buka{transform:translateX(0)}
  .nav-menu a{padding:13px 0;border-bottom:1px solid var(--garis);font-size:16px}
  .nav-menu .menu-tbl{
    display:block;
    margin-top:14px;border-bottom:none;background:var(--ink);color:var(--ivory);
    border-radius:99px;text-align:center;padding:13px;font-weight:600;
  }
  .nav-menu .menu-tbl:last-child{margin-top:9px;background:transparent;color:var(--ink);
    border:1.5px solid var(--ink)}
  .nav-tombol{display:block}
  .nav-aksi .sembunyi-hp{display:none}
}
@media (max-width:560px){
  .hero{padding:26px 0 44px}
  .hero-aksi{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
    gap:10px;
  }
  .hero-aksi .tbl{width:100%;padding:13px 14px;font-size:14.2px}
  .nav-isi{height:62px}
  .nav-logo img{height:27px}
  /* Di layar sempit tombol ini berdesakan dengan logo dan hamburger sampai
     pecah dua baris. Disembunyikan saja - ajakan yang sama sudah ada
     tepat di bawahnya pada hero, dan juga di dalam menu. */
  .nav-aksi .tbl-utama{display:none}
  .unggul,.langkah,.cari-dua{grid-template-columns:1fr}
  .kaki-grid{grid-template-columns:1fr}
  .ajakan{padding:38px 24px;border-radius:22px}
  .bagian{padding:54px 0}
}

/* Pemberitahuan saat tanggal yang diminta di luar jangkauan pemesanan. */
.tgl-ditolak{background:#fbf3e0;border:1px solid #eeddb5;color:#7a5c11;
  padding:11px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px}