/* ══════════════════════════════════════════════════════════════════════════
   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}
header nav a{font:400 11.5px/1 var(--sans);letter-spacing:.08em;color:var(--abu);
             text-decoration:none;margin-left:20px}
header nav a:hover{color:var(--terang)}

/* ── 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}
.isyarat{margin-top:44px;font:400 10.5px/1 var(--sans);letter-spacing:.2em;
         text-transform:uppercase;color:var(--abu);text-decoration:none;
         display:inline-flex;flex-direction:column;align-items:center;gap:12px}
.isyarat i{width:1px;height:30px;background:linear-gradient(var(--emas),transparent);
           display:block;font-style:normal}

/* ── 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 ── */
.kat a,.kat span{display:flex;justify-content:space-between;align-items:baseline;
    gap:16px;padding:22px 0;border-bottom:1px solid var(--rambut);
    text-decoration:none;color:inherit}
.kat a:first-child,.kat span:first-child{border-top:1px solid var(--rambut)}
.kat .nm{font-family:var(--serif);font-weight:300;font-size:clamp(21px,3vw,26px)}
.kat .st{font:400 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
         color:var(--abu);white-space:nowrap}
.kat a .st{color:var(--emas)}
.kat span{opacity:.45}
.kat a:hover .nm{color:var(--emas)}

/* ── 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)}
.tautan-kuat{display:inline-block;margin-top:32px;font:500 11px/1 var(--sans);
        letter-spacing:.2em;text-transform:uppercase;color:var(--emas);
        text-decoration:none;border-bottom:1px solid rgba(201,162,75,.45);padding-bottom:7px}
.tautan-kuat:hover{border-bottom-color:var(--emas)}

/* ── 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}
}