/* ============================================================
   skorika.com — css/page/index.css
   Gaya khas /index.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   54 aturan.
   ============================================================ */

/* ============================================================
   skorika.com — css/page/index.css
   Gaya khas /index.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   54 aturan.
   ============================================================ */
/* Nilai warna di bawah diambil per-piksel dari gambar acuan perbaikan_2
   (image2.png untuk header/hero, image4.png untuk footer), bukan dikira-kira:
     latar plum        #3B1429   bilah pengumuman  #FFC48A
     krem              #F4EFDB   tombol utama      #FF319E
     offset tombol     #FE95CE   kartu footer      #3B1429
   Offset tombol pada acuan jatuh ke KIRI-BAWAH, bukan kanan-bawah. */
*{box-sizing:border-box}
/* Huruf: ujung goresan pada acuan SEMUANYA potongan rata — 't' berhenti
   datar tanpa ekor melengkung, 'y' dipotong lurus, 'l' batang polos,
   'o' lingkaran penuh, 'a' dua tingkat. Nunito dipakai sebelumnya dan
   ujungnya membulat, itu yang terlihat berbeda. Diganti Outfit: sans
   geometris dengan ujung potong rata.
   Ingin mencoba padanan lain? Ganti nama keluarga di sini DAN di tautan
   Google Fonts pada <head>: Figtree atau Montserrat, keduanya juga
   berujung rata. Jangan kembali ke Nunito/Quicksand/Comfortaa/Baloo —
   keempatnya berujung bulat. */
body{margin:0;background:var(--plum);color:var(--cream);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* Latar acuan RATA #3D172D. Pemindaian 7x11 titik pada acuan hanya
   menghasilkan warna latar, teks, dan tombol — tidak ada gradien, pendar,
   atau bentuk membulat. Lapisan hias sebelumnya dihapus seluruhnya. */
.z{position:relative}
/* ===== Tombol — bentuk acuan: sudut 6px, tinggi 44px, offset keras 4px
   ke kiri-bawah. Kelas .btn/.btn-primary/.btn-sm/.nav-link-plain WAJIB
   dipertahankan: skrip navActions di bawah menyuntikkan tombol dengan
   kelas-kelas itu saat pengguna sudah masuk. ===== */
/* Tombol dua baris ala acuan: label kecil huruf besar + label utama */
.nav-link-plain{font-size:17px;font-weight:700;color:var(--cream)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:2px}
.lang button{border:none;background:transparent;border-radius:4px;padding:5px 10px;cursor:pointer;
  font:800 14px/1 'Outfit',sans-serif;color:var(--cream-dim)}
.lang button.on{background:var(--cream);color:var(--header)}
/* ===== Header: bilah pengumuman krem-peach + baris navigasi ===== */
/* Nama merek memakai warna yang sama dengan mark — pada acuan, mark dan
   tulisan sama-sama #FF319F, tidak ada warna kedua. Dipakai di dua tempat
   saja: bilah atas (latar --header) dan kartu footer (latar --plum). */
.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:900;letter-spacing:-.015em;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Ukuran mark. Halaman ini berdiri sendiri — tidak memuat /css/base.css —
   jadi aturan .mark harus ada di sini juga, kalau tidak SVG-nya tampil
   sebesar kotak induknya.
   Mark 10% lebih tinggi dari tinta teks: tinta "Skorika" pada Outfit 900
   = 0,727em, target 1,10 x 0,727 = 0,800em. SVG ini tintanya 28/32 kotak
   (rect y=2..30), jadi kotaknya 0,800 / (28/32) = 0,914em. */
/* ===== Hero ===== */
.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,470px);
  gap:clamp(24px,3vw,50px);align-items:start;max-width:1893px;margin:0 auto;
  padding:clamp(34px,7vh,86px) clamp(16px,3vw,44px) clamp(40px,8vh,96px)}
/* Bobot judul diukur, bukan dikira. Rasio lebar-batang : tinggi-ascender
   pada acuan = 11/57 = 0.193. Versi sebelumnya (Outfit 800) = 16/63 =
   0.254, yaitu 1,32x terlalu tebal. Target lebar batang pada tinggi yang
   sama = 63 x 0.193 = 12,2 px, jatuh di sekitar bobot 600.
   Cara memeriksa pada tangkapan layar berikutnya: ukur lebar batang 'l'
   dan tinggi ascender-nya; hasilnya harus mendekati 0,193. */
h1{font-size:clamp(38px,4.6vw,86px);font-weight:600;line-height:1.08;letter-spacing:-.02em;
  color:var(--cream);max-width:14ch}
h1 mark{background:transparent;color:var(--pink)}
/* Subjudul acuan juga 1,33x lebih tipis dari versi sebelumnya (600).
   Pengukurannya kasar (tinggi hanya 16 px, selisih 1 px = 33%), jadi
   angka ini kepercayaannya lebih rendah daripada judul di atas. */
.lede{margin-top:18px;max-width:48ch;font-size:22px;font-weight:400;color:var(--cream-dim)}
.cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.chips{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.chip{border:1px solid var(--line);border-radius:var(--r);
  padding:12px 18px;font-size:14px;font-weight:700;color:var(--cream-dim)}
/* ===== Kartu kode gabung ===== */
.card{background:var(--cream);color:var(--header);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);box-shadow:none}
.card h2{font-size:32px;font-weight:900;letter-spacing:-.015em;line-height:1.14}
.card .sub{font-size:16px;font-weight:600;color:rgba(59,20,42,.7);margin:6px 0 20px}
.tab{display:inline-flex;align-items:center;gap:8px;background:var(--peach);color:var(--header);
  border-radius:var(--r);padding:5px 12px;font-size:13px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:12px}
.pin-row{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:12px}
.pin-cell{height:64px;width:100%;min-width:0;padding:0;border:1px solid rgba(59,20,42,.2);
  border-radius:var(--r);background:#FFFDF6;font-family:inherit;font-weight:900;font-size:26px;
  text-align:center;color:var(--header);text-transform:uppercase;box-shadow:none}
.pin-cell:focus{outline:none;border-color:var(--pink)}
.pin-error{font-size:14px;font-weight:800;color:#C11B62;min-height:20px;margin-bottom:8px}
.join-btn{width:100%;background:var(--pink);color:#fff;font-size:20px;box-shadow:none}
.browse{margin-top:14px;text-align:center;font-size:16px;font-weight:600;color:rgba(59,20,42,.7)}
.browse a{color:#C11B62;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.next{margin-top:18px;border-top:1px solid rgba(59,20,42,.15);padding-top:14px;display:flex;
  flex-direction:column;gap:9px;font-size:14px;font-weight:600;color:rgba(59,20,42,.7)}
.next div{display:flex;align-items:center;gap:9px}
.next .d{width:8px;height:8px;border-radius:50%;background:var(--pink);flex-shrink:0}
.next .d.w{background:#FFB25E}
/* ===== Footer — model acuan image4: pita krem, lalu kartu plum yang
   tepi atasnya miring naik ke kanan (diukur 2,3° dari gambar acuan). ===== */
@media(max-width:960px){
  .main{grid-template-columns:1fr;padding-top:28px}
  .card{order:-1}
  h1{font-size:clamp(30px,8vw,44px);max-width:none}
  .lede{font-size:17px}
  .btn{height:52px;font-size:17px}
  .btn-duo .lbl{font-size:17px}
  .btn-duo .cap{font-size:11px}
  .pin-cell{height:54px;font-size:22px}
}
@media(max-width:560px){
  .chips{gap:8px}
  .chip{padding:10px 14px}
  .btn-duo{width:100%}
  .pin-row{gap:6px}
  .pin-cell{height:48px;font-size:22px}
}
