/* ══════════════════════════════════════════════════════════════════════════
   KODELAHIR — beranda merek.
   Langit malam, huruf berkait ramping, emas hanya untuk ornamen.
   Halaman ini WAJAH MEREK, bukan halaman jualan: tidak ada harga di layar
   pertama, tidak ada tombol beli berulang, katalog duduk di bawah.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --malam:#08090C; --terang:#EDE8DF; --abu:#8F8879;
  --emas:#C9A24B; --rambut:rgba(237,232,223,.10); --rambut2:rgba(237,232,223,.18);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--malam);color:var(--terang);
     font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
.b{max-width:840px;margin:0 auto;padding:0 26px}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--emas);outline-offset:4px}

/* ── kepala ── */
header{padding:24px 0;position:relative;z-index:3}
header .b{display:flex;justify-content:space-between;align-items:center;gap:14px}
/* 4 Sep 2026: Deswin minta SELURUH isi kepala berbentuk tombol kotak — tidak
   ada lagi tautan teks polos. "Pertanyaan" dan "Enam kode" ikut memakai pil
   bergaris yang sama dengan "Masuk"; yang EMAS tetap satu saja ("Baca
   kodemu") supaya masih jelas mana tindakan utamanya. */
header nav a{display:inline-flex;align-items:center;white-space:nowrap;
             border:1px solid rgba(237,232,223,.32);border-radius:99px;
             padding:12px 19px;margin-left:12px;
             font:600 11.5px/1 var(--sans);letter-spacing:.16em;
             text-transform:uppercase;color:var(--terang);text-decoration:none;
             transition:border-color .2s,background .2s,color .2s}
header nav a:hover{border-color:var(--emas);color:var(--emas);
             background:rgba(201,162,75,.08)}
/* "Masuk" itu tindakan, bukan sekadar penunjuk — jadi diberi bentuk tombol.
   Bidang sentuhnya dilebarkan lewat ::after supaya nyaman ditekan jempol
   (minimal 44px) tanpa membuat tajuk halaman jadi tinggi. */
/* peran sunyi: kelihatan bisa ditekan, tapi tidak menyaingi tombol utama.
   Garisnya sengaja dinaikkan dari .18 ke .32 — di .18 ia nyaris tak terlihat
   sebagai tombol di layar ponsel yang terang. */
header nav a.nav-tombol{position:relative;border:1px solid rgba(237,232,223,.32);
             padding:12px 19px;color:var(--terang);margin-left:16px}
header nav a.nav-tombol:hover{border-color:var(--emas);color:var(--emas)}
header nav a.nav-tombol::after{content:"";position:absolute;inset:-6px -4px}
/* Di ponsel, tiga tautan + tombol tidak muat: menunya melipat dua baris dan
   menabrak tombol Masuk. Tautan lompat-bagian disembunyikan; isinya tetap
   bisa dicapai dengan menggulir, dan tombol Masuk tetap ada. */
/* Tombol beli di kepala — 4 Sep 2026. Emas penuh supaya jelas ia tindakan
   utama, sementara "Masuk" tetap peran sunyi (cuma bergaris). Dua tombol
   berdampingan: yang emas untuk pengunjung baru, yang bergaris untuk yang
   sudah beli. */
header nav a.nav-beli{position:relative;margin-left:16px;padding:12px 19px;
  background:var(--emas);color:#0B0C10;font-weight:600;letter-spacing:.16em;
  border:1px solid var(--emas);white-space:nowrap}
header nav a.nav-beli:hover{filter:brightness(1.08);color:#0B0C10}
header nav a.nav-beli::after{content:"";position:absolute;inset:-6px -4px}

/* Sampai 859px: logo + empat tombol tidak muat satu baris. Ambangnya
   dinaikkan dari 767px ke 859px setelah "Pertanyaan"/"Enam kode" berubah
   dari tautan teks jadi tombol berpadding — di 768px dan 800px kepalanya
   terbukti pecah dua baris. Yang dikorbankan tautan lompat-bagian; isinya
   tetap bisa dicapai dengan menggulir, sementara kedua tombol tetap utuh. */
@media (max-width:859px){
  header .b nav a:not(.nav-beli):not(.nav-tombol){display:none}
}

@media (max-width:560px){
  /* Pakai `header .b nav` (bukan `header nav`) supaya kekhususannya di atas
     aturan tombol bersama di bawah — ".tautan-kuat,.isyarat,header nav
     a.nav-tombol{display:inline-flex}" ada SETELAH blok ini, dan dengan
     kekhususan setara ia yang menang. Sempat begitu: tombolnya tetap muncul
     dan kepala halaman pecah dua baris di ponsel. */
  header .b nav a:not(.nav-beli){display:none}
  /* Di layar sempit logo + dua tombol tidak muat satu baris — sempat pecah
     jadi dua baris dan terlihat berantakan. Yang dipertahankan tombol BELI
     (pengunjung iklan, mayoritas trafik). "Masuk" disembunyikan DI SINI SAJA
     karena kaki halaman tetap memuat tautan "Sudah punya pesanan" ke pintu
     pembeli — jadi pembeli lama tidak kehilangan jalan masuk. */
  header nav a.nav-beli{margin-left:0;padding:11px 16px;font-size:12px}
  header .b{gap:10px}
  .kata{font-size:16px;letter-spacing:.13em}
  .gembok .tanda-svg{width:21px;height:21px}
}
header nav a.nav-tombol:hover{border-color:var(--emas);background:rgba(201,162,75,.08)}

/* ── logo: tanda + kata ── */
.gembok{display:flex;align-items:center;gap:10px;text-decoration:none}
.gembok .tanda-svg{width:25px;height:25px;flex:none;color:var(--emas)}
.kata{font-family:var(--serif);font-size:19px;letter-spacing:.19em;
      line-height:1;color:var(--terang);white-space:nowrap}
.kata i{font-style:normal;font-weight:300}
.kata b{font-weight:500}

/* ── hero ── */
.hero{position:relative;padding:64px 0 74px;overflow:hidden}
#bintang{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .b{position:relative;z-index:1;display:flex;flex-direction:column;
         align-items:center;text-align:center}
.segel{width:min(196px,44vw);height:auto;margin-bottom:38px}
.segel [data-garis]{stroke:var(--emas);fill:none;
      stroke-dasharray:1;stroke-dashoffset:1;animation:gambar 1.7s ease forwards}
@keyframes gambar{to{stroke-dashoffset:0}}
.segel circle[data-titik]{fill:var(--emas);stroke:none;opacity:0;
      animation:muncul .55s ease forwards;
      transform-box:fill-box;transform-origin:center}
@keyframes muncul{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.segel circle[data-inti]{fill:var(--emas);stroke:none;opacity:0;
      animation:muncul .6s ease forwards 2.5s;
      transform-box:fill-box;transform-origin:center}

.eyebrow{font:500 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
         color:var(--emas);margin-bottom:15px}
.moto{font-family:var(--serif);font-weight:400;font-style:italic;
      font-size:clamp(15.5px,2.5vw,20px);line-height:1.5;color:var(--emas);
      max-width:30ch;margin-bottom:26px;opacity:0;
      animation:naik .9s ease forwards 1.1s}
@keyframes naik{from{opacity:0;transform:translateY(7px)}
                to{opacity:.92;transform:none}}
.hero h1{font-family:var(--serif);font-weight:300;
         font-size:clamp(33px,6.6vw,60px);line-height:1.1;letter-spacing:.005em;
         max-width:15ch;text-wrap:balance}
.hero .sub{margin-top:20px;color:var(--abu);font-size:15px;max-width:44ch}
/* ══════════════ SATU SISTEM TOMBOL ══════════════
   Sebelumnya tiap tombol berdiri sendiri: dua pil + satu kotak, tiga ukuran
   huruf, tiga bobot, nol bayangan. Hasilnya terlihat seperti tiga benda yang
   tidak saling kenal. Sekarang semuanya berbagi satu bentuk (pil), satu skala
   huruf, dan satu ukuran sentuh — yang membedakan hanya BOBOT PERANNYA:
     .tautan-kuat  utama   -> emas penuh, ada kedalaman
     .isyarat      kedua   -> bergaris emas
     .nav-tombol   sunyi   -> bergaris tipis
   ═══════════════════════════════════════════════ */
.tautan-kuat,.isyarat,header nav a.nav-tombol{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:99px;text-decoration:none;white-space:nowrap;
  font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  transition:transform .16s ease, box-shadow .16s ease,
             background .2s ease, border-color .2s ease;
}
.tautan-kuat:active,.isyarat:active,header nav a.nav-tombol:active{
  transform:translateY(1px)}

/* peran kedua: mengajak turun, bukan membeli */
.isyarat{margin-top:42px;padding:16px 28px;
         border:1px solid rgba(201,162,75,.5);color:var(--emas);background:transparent}
.isyarat:hover{border-color:var(--emas);background:rgba(201,162,75,.09)}
.isyarat i{width:0;height:0;font-style:normal;display:block;flex:none;
           border-left:4px solid transparent;border-right:4px solid transparent;
           border-top:5px solid var(--emas)}

/* ── bagian ── */
section{padding:84px 0;border-top:1px solid var(--rambut);position:relative}
.tanda{font:500 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
       color:var(--emas);margin-bottom:16px}
.antar{color:var(--abu);max-width:52ch;line-height:1.8;margin-bottom:34px}

/* ── daftar pertanyaan ── */
.tanya{border-top:1px solid var(--rambut)}
.t{display:block;padding:26px 0;border-bottom:1px solid var(--rambut);
   text-decoration:none;color:inherit;position:relative;transition:padding-left .28s ease}
.t::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;
           background:var(--emas);transition:width .28s ease;transform:translateY(-50%)}
.t:hover{padding-left:26px}
.t:hover::before{width:16px}
.t .q{font-family:var(--serif);font-weight:300;
      font-size:clamp(21px,3.6vw,32px);line-height:1.26;max-width:23ch;
      transition:color .25s ease}
.t:hover .q{color:var(--emas)}
.t .a{margin-top:11px;font-size:13px;color:var(--abu);display:flex;
      gap:10px;align-items:center;flex-wrap:wrap}
.t .a b{font-weight:500;color:var(--terang)}
.cap{font:400 9.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
     border:1px solid var(--rambut2);border-radius:99px;padding:4px 10px;color:var(--abu)}
.cap.siap{border-color:rgba(201,162,75,.5);color:var(--emas)}
.t.belum .q{opacity:.62}
.sesudah{margin-top:34px;font-family:var(--serif);font-weight:300;
         font-size:clamp(19px,2.8vw,25px);line-height:1.55;max-width:30ch;
         color:var(--terang)}

/* ── enam kode ── */
.lensa{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:28px}
.lensa div{border-top:1px solid var(--rambut2);padding-top:15px}
.lensa h3{font-family:var(--serif);font-weight:400;font-size:21px;margin-bottom:5px}
.lensa p{font-size:13.5px;color:var(--abu);line-height:1.6}

/* ── tiga langkah ── */
.cara{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
      background:var(--rambut);border:1px solid var(--rambut);margin-top:6px}
.cara div{background:var(--malam);padding:24px 22px}
.cara .n{font-family:var(--serif);font-weight:300;font-size:34px;color:var(--emas);
         line-height:1;margin-bottom:12px}
.cara h3{font-size:13.5px;font-weight:500;margin-bottom:7px}
.cara p{font-size:13.5px;color:var(--abu);line-height:1.6}

/* ── katalog: tiga kartu bacaan ──
   19 Sep 2026, permintaan Deswin: "tatanan untuk produk di kodelahir.com
   rapikan… perlu ada gambaran juga… agar lebih cantik designnya."

   Sebelumnya katalog cuma empat baris teks berjajar — benar isinya, tapi tiga
   bacaan yang berbeda jauh terlihat seperti satu daftar yang sama.

   Tiap kartu membawa SATU warna aksen lewat `--aksen`, diambil dari laporan
   PDF produknya masing-masing: emas (Arti), mawar (Pasangan), bara (Karier).
   Warna itu cuma menyentuh lambang, garis atas, dan nama waktu disentuh —
   latar kartunya tetap malam, supaya halaman ini tetap satu merek dan tidak
   berubah jadi tiga merek yang kebetulan bertetangga. */
/* ⚠️ Jumlah kolom WAJIB membagi habis jumlah kartu — jangan pernah `auto-fit`.
   Sisa pembagian muncul sebagai sel kosong menganga di kanan bawah, tanpa
   galat apa pun, dan cuma kelihatan di lebar layar tertentu.

   Dengan EMPAT kartu (sejak Kode Lahir Anak, 20 Sep 2026) yang sah cuma
   4, 2, atau 1 kolom. Tiga kolom sekarang JUSTRU yang berlubang — kebalikan
   dari aturan waktu kartunya masih tiga. */
.rak{display:grid;grid-template-columns:repeat(4,1fr);
     gap:1px;background:var(--rambut);border:1px solid var(--rambut)}
@media (max-width:959px){.rak{grid-template-columns:repeat(2,1fr)}}
@media (max-width:539px){.rak{grid-template-columns:1fr}}
.rk{position:relative;display:flex;flex-direction:column;align-items:flex-start;
    background:var(--malam);padding:32px 26px 28px;
    text-decoration:none;color:inherit;
    transition:background .3s ease}
/* Garis aksen di tepi atas: tumbuh dari kiri waktu kartunya disentuh. Ini
   satu-satunya tempat warna produk muncul sebagai bidang, bukan sebagai
   goresan — cukup untuk membedakan, terlalu tipis untuk berisik. */
.rk::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
    background:var(--aksen);transition:width .42s cubic-bezier(.2,.7,.3,1)}
a.rk:hover{background:rgba(237,232,223,.022)}
a.rk:hover::before{width:100%}

.lambang{width:62px;height:62px;margin-bottom:22px;flex:none;
    stroke:var(--aksen);fill:var(--aksen);opacity:.78;
    transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.lambang circle[r="3.417"],.lambang circle[r="5.552"]{stroke:none}
a.rk:hover .lambang{opacity:1;transform:translateY(-3px)}

.rk .nm{font-family:var(--serif);font-weight:300;font-size:clamp(23px,3vw,28px);
    line-height:1.15;margin-bottom:10px;transition:color .25s ease}
a.rk:hover .nm{color:var(--aksen)}
.rk .ket{font-size:13.5px;line-height:1.7;color:var(--abu);margin-bottom:20px}
.rk .st{margin-top:auto;font:400 9.5px/1 var(--sans);letter-spacing:.16em;
    text-transform:uppercase;color:var(--abu);white-space:nowrap;
    border:1px solid var(--rambut2);border-radius:99px;padding:5px 11px}
.rk .st.siap{border-color:color-mix(in srgb,var(--aksen) 52%,transparent);
    color:var(--aksen)}
/* Bacaan yang belum bisa dibeli tetap ditampilkan, tapi diredupkan — supaya
   "belum siap" terbaca sebagai keadaan, bukan sebagai tautan yang rusak. */
.rk.belum{opacity:.42}
.rk.belum .lambang{opacity:.5}

.rak-lagi{margin-top:26px;font-size:13.5px;line-height:1.7;color:var(--abu)}
.rak-lagi b{font-weight:500;color:var(--terang)}

@media (max-width:560px){
  .rk{padding:26px 22px 24px}
  .lambang{width:52px;height:52px;margin-bottom:18px}
}

/* ── muncul saat digulir ──
   Keadaan tersembunyi dipasang oleh JS, bukan ditulis di sini. Kalau JS gagal
   jalan, seluruh isi tetap terbaca — tidak ada halaman kosong. */
.masuk{opacity:0;transform:translateY(16px);
       transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1)}
.masuk.tampil{opacity:1;transform:none}

/* ── tutup ── */
.tutup{text-align:center;padding:104px 0 112px}
.tutup p{font-family:var(--serif);font-weight:300;
         font-size:clamp(22px,3.6vw,32px);line-height:1.45;max-width:24ch;margin:0 auto}
.segel-tutup{width:74px;height:74px;margin:0 auto 34px;display:block}
.segel-tutup [data-garis]{stroke:var(--emas);fill:none;
      stroke-dasharray:1;stroke-dashoffset:1}
.segel-tutup circle[data-titik],.segel-tutup circle[data-inti]{
      fill:var(--emas);stroke:none;opacity:0;
      transform-box:fill-box;transform-origin:center}
.segel-tutup.jalan [data-garis]{animation:gambar 1.5s ease forwards}
.segel-tutup.jalan circle[data-titik]{animation:muncul .5s ease forwards}
.segel-tutup.jalan circle[data-inti]{animation:muncul .55s ease forwards 2.1s}
.rentang{width:min(280px,60%);height:1px;margin:36px auto 0;
         background:linear-gradient(90deg,transparent,var(--emas),transparent);
         transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.rentang.tampil{transform:scaleX(1)}
/* peran utama: satu-satunya tombol emas penuh di halaman ini.
   Diberi cahaya lembut supaya punya kedalaman — tanpa itu ia cuma balok
   emas datar yang seperti ditempel. */
.tautan-kuat{margin-top:34px;padding:18px 36px;
        border:1px solid var(--emas);background:var(--emas);color:var(--malam);
        box-shadow:0 6px 20px rgba(201,162,75,.20)}
.tautan-kuat:hover{transform:translateY(-2px);
        box-shadow:0 12px 30px rgba(201,162,75,.34)}

/* ── kaki ── */
footer{border-top:1px solid var(--rambut);padding:40px 0 72px;
       font-size:12.5px;color:var(--abu);line-height:1.85}
footer a{color:var(--abu)}
.kaki-atas{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.kaki-atas .tanda-svg{width:20px;height:20px;flex:none;color:var(--emas);opacity:.8}
.kaki-atas .kata{font-size:15px;letter-spacing:.17em;color:var(--abu)}
.moto-kaki{font-family:var(--serif);font-style:italic;font-weight:400;
           font-size:15.5px;line-height:1.5;color:var(--emas);opacity:.88;
           margin:0 0 18px;max-width:34ch}

/* ── hormati pengguna yang mematikan animasi ──
   Tanpa blok ini, mematikan animasi membuat pembuka DAN penutup halaman
   hilang sama sekali: garis tak pernah tergambar, titik tetap tembus. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .segel [data-garis],.segel-tutup [data-garis]{stroke-dashoffset:0!important}
  .segel circle[data-titik],.segel circle[data-inti],
  .segel-tutup circle[data-titik],.segel-tutup circle[data-inti]{
      opacity:1!important;transform:none!important}
  .moto{opacity:.92!important;transform:none!important}
  .rentang{transform:none!important}
  .masuk{opacity:1!important;transform:none!important}
}