/* ============================================================
   skorika.com — css/tema.css
   TEMA "BIRU KORPORAT" (opsi 8) — 10 Okt 2026, pilihan Richar dari
   10 opsi di skorika-opsi-tema.html.

   BERLAKU HANYA di halaman yang memakai warna homepage: keluarga publik
   (beranda, about, guides, help, legal, login/daftar/lupa sandi, cv,
   panduan, langganan, 404, verify) dan /join. Konsol admin, owner, Drive,
   exam, dan layar permainan (play/waiting/podium/result) TIDAK memuat
   berkas ini — warnanya tetap seperti semula.

   CARA KERJA
   Halaman-halaman ini mengambil warnanya dari variabel tokens.css
   (--plum latar, --teks tulisan, --pink tombol, --biru-muda kartu, …).
   Di sini variabel itu ditulis ulang pada <body>, jadi halaman terang
   bertulisan gelap. Bilah atas (<header>, .join-top) dan kartu footer
   tetap biru tua: di dalamnya variabel dikembalikan ke versi "di atas
   latar gelap". Sisa warna yang ditulis langsung di berkas halaman
   ditimpa di bagian bawah.

   Dimuat SESUDAH berkas halaman, TEPAT SEBELUM logo.css.

   PALET (dari opsi 8)
     latar halaman  #F8F7F5   navigasi      #1F1F1F   logo nav  #FFFFFF
     teks utama     #1F1F1F   teks sekunder #5C5C5C
     tombol utama   #C62F55   tombol kedua  #FFFFFF + garis #E5E0D7
     kartu          #FFFFFF   garis kartu   #EBE7DF
     kolom isian    #FCFBFA   garis isian   #DDD6C9   tautan    #C62F55
     lencana        #FEF3C7 / #92400E
     sudut tombol 4px · sudut kartu 6px
   HURUF (10 Okt 2026, opsi 1 font): judul Plus Jakarta Sans 800,
   isi Inter — keduanya didaftarkan di css/fonts.css untuk seluruh situs.
   ============================================================ */

/* ---------- 1. Variabel: halaman terang ---------- */
body{
  /* 16 Okt 2026 — palet diselaraskan dengan beranda (tema anggur):
     navy -> hitam lembut, biru aksen -> anggur, biru muda -> krem. */
  --tm-bg:#F8F7F5; --tm-nav:#1F1F1F; --tm-teks:#1F1F1F; --tm-teks2:#5C5C5C;
  --tm-aksen:#AC2849; --tm-aksen-gelap:#8A2340; --tm-garis:#E5E0D7;
  --tm-kartu:#FFFFFF; --tm-garis-kartu:#EBE7DF; --tm-isian:#FCFBFA; --tm-garis-isian:#DDD6C9;
  --tm-cincin:rgba(172,40,73,.15); --tm-logo-nav:#FFFFFF;
  --tm-huruf:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tm-judul:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --plum:var(--tm-bg); --plum-2:var(--tm-bg); --pd-plum:var(--tm-bg);
  --plum-3:var(--tm-kartu);
  --header:var(--tm-nav); --pd-header:var(--tm-nav);
  --teks:var(--tm-teks); --teks-dim:var(--tm-teks2); --teks-dim2:rgba(40,40,40,.66);
  /* --cream = latar PANEL krem (kartu /cv dll.), bukan warna tulisan. */
  --cream:var(--tm-kartu); --pd-cream:var(--tm-kartu);
  --cream-dim:var(--tm-teks2); --cream-dim2:rgba(40,40,40,.66);
  --pink:var(--tm-aksen); --pd-pink:var(--tm-aksen); --pink-dark:var(--tm-aksen-gelap);
  --biru-muda:var(--tm-kartu);
  --line:var(--tm-garis); --pd-line:var(--tm-garis);
  /* --peach dulu aksen hangat untuk TULISAN di latar gelap (label kecil di
     atas judul, "Read guide →", nomor bagian). Di latar terang perannya
     diambil biru aksen; latar lencana kuning ditulis langsung (bagian 4). */
  --peach:var(--tm-aksen); --pd-peach:var(--tm-aksen);
  --ink-soft:var(--tm-teks2); --ink-line:var(--tm-garis-isian);
  --logo-pink:var(--tm-aksen);
  --r:4px;
  --font:var(--tm-huruf);
  background:var(--tm-bg); color:var(--tm-teks);
  font-family:var(--tm-huruf);
}
/* Isi Inter, judul Plus Jakarta Sans. Judul utama tebal (800) dan rapat
   seperti contoh opsi 1. */
body, body button, body input, body select, body textarea, .lang button{font-family:var(--tm-huruf)}
body h1, body h2, body h3, body h4, .brand, .brand .dot-id{font-family:var(--tm-judul)}
body h1{font-weight:800;letter-spacing:-.025em}

/* ---------- 2. Bilah atas & footer: tetap biru tua ----------
   Dua model footer: .foot-band > .foot-card (beranda, help, legal, masuk)
   dan footer.foot (about, guides, privacy-center, panduan, langganan, 404). */
header, .join-top, footer.foot{
  --teks:#FFFFFF; --teks-dim:rgba(255,255,255,.8); --teks-dim2:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.22); --plum:var(--tm-nav); --peach:#FCD34D;
  --logo-ink:var(--tm-logo-nav); --logo-dot:var(--tm-nav);
}
header{background:var(--tm-nav);border-bottom:1px solid var(--tm-nav)}
header .brand, .join-top .auth-logo, footer.foot .foot-brand svg.mark,
footer.foot .brand{color:var(--tm-logo-nav);--mark-dot:var(--tm-nav)}
footer.foot{background:var(--tm-nav);color:#FFFFFF}
footer.foot .foot-base{color:rgba(255,255,255,.55)}

/* Footer model .foot-band > .foot-card — 11 Okt 2026, permintaan Richar:
   PITA selebar layar jadi biru tua, KARTU di dalamnya jadi biru muda latar
   halaman (dulu kebalikannya). Batas halaman–footer: garis biru aksen 6px
   yang RATA (mendatar); tepi atas KARTU tetap MIRING (clip-path dari
   components.css, naik ke kanan). */
.foot-band{background:var(--tm-nav);border-top:6px solid var(--tm-aksen)}
.foot-card{background:var(--tm-bg);color:var(--tm-teks);
  --teks:var(--tm-teks); --teks-dim:var(--tm-teks2); --teks-dim2:var(--tm-teks2);
  --line:var(--tm-garis); --logo-ink:var(--tm-aksen); --logo-dot:#FFFFFF}
.foot-card .brand, .foot-card .foot-brand svg.mark{color:var(--tm-aksen);--mark-dot:#FFFFFF}
.foot-card .foot-col a:hover{color:var(--tm-aksen)}
.foot-card .foot-base{color:rgba(40,40,40,.6)}
/* Halaman pendek / layar tinggi: sisa kanvas di bawah footer ikut biru tua,
   bukan jalur biru muda. Latar <html> tidak menimpa <body> yang berlatar sendiri. */
html:has(.foot-band){background:#1F1F1F}   /* = --tm-nav; variabelnya hidup di body, tak terbaca di sini */
.lang button.on, body.ref .lang button.on{background:#FFFFFF;color:var(--tm-nav)}

/* /join: 16 Okt 2026 — latar gradien anggur (gambar yang sama dengan
   versi awal hero beranda, img/latar-anggur.jpg). Bilah atasnya transparan
   di atas gradien seperti bilah atas beranda; kartu putih tetap. */
/* 17 Okt 2026 — semua langkah /join memakai latar yang sama dengan hero
   beranda: lanskap padang merah img/latar-hero3.jpg, kini diganti latar-polos.jpg, tanpa foto orang dan
   tanpa lapisan gelap (permintaan Richar). */
/* 17 Okt 2026: hanya bagian air polos dari lanskap (img/latar-polos.jpg), tanpa pohon/rumput; diregangkan penuh supaya gradasinya utuh. */
  /* 17 Okt 2026: /join pakai gradien merah bata (img/latar-join-bata.jpg; sebelumnya latar-join-rosa.jpg, latar-join-merah.jpg, latar-join-polos.jpg), permintaan Richar. */
  body.ref{background:#9A5450 url(../img/latar-join-bata.jpg) center/cover no-repeat fixed;
  color:var(--tm-teks)}
body.ref::before{display:none}
body.ref .join-top{background:transparent;border-bottom:0;
  padding:12px clamp(12px,3vw,20px)}
/* Kolom penjelasan langkah masuk (.auth-say) duduk langsung di atas gradien,
   jadi tulisannya putih; kata <mark> merah muda terang supaya tetap menonjol. */
/* 16 Okt 2026: ukuran & gaya disamakan persis dengan judul dan subjudul
   hero beranda (css/page/index.css + css/tema-anggur.css): judul 38–86px
   bobot 800, subjudul 22px bobot 400, semuanya putih termasuk <mark>. */
body.ref .auth-say h1{font-size:clamp(38px,4.6vw,86px);font-weight:800;line-height:1.08;
  letter-spacing:-.025em;max-width:14ch;color:#FFFFFF}
body.ref .auth-say h1 mark{background:transparent;color:#FFFFFF}
body.ref .auth-say .lede{margin-top:18px;max-width:48ch;font-size:22px;font-weight:400;
  line-height:1.55;color:#FFFFFF}
/* Lebar penuh seperti hero beranda (.main di css/page/index.css): tanpa
   ini kolomnya dikunci 1120px oleh join.css dan judul 86px pecah satu
   kata per baris. */
body.ref .auth-main.si-mode{max-width:1893px;
  grid-template-columns:minmax(0,1fr) minmax(360px,470px);gap:clamp(24px,3vw,50px);
  padding:clamp(34px,7vh,86px) clamp(16px,3vw,44px) clamp(40px,8vh,96px)}
/* Langkah kode & nama (bukan .si-mode): kartu di TENGAH layar — 17 Okt 2026,
   permintaan Richar (latar sekarang lanskap tanpa orang, jadi tak perlu ke kanan). */
body.ref .auth-main:not(.si-mode){justify-content:center}
@media(max-width:960px){
  body.ref .auth-main.si-mode{grid-template-columns:minmax(0,1fr);gap:22px;max-width:520px;padding-top:28px}
  body.ref .auth-say h1{font-size:clamp(30px,8vw,44px);max-width:none}
  body.ref .auth-say .lede{font-size:17px;max-width:none}
}
body.ref .btn-auth{background:var(--tm-aksen)}
body.ref .btn-auth:hover{background:var(--tm-aksen-gelap)}
body.ref .loading .spin{border-top-color:var(--tm-aksen)}

/* ---------- 3. Tombol ---------- */
.btn-primary, .btn-auth, .join-btn{background:var(--tm-aksen);color:#FFFFFF}
.btn-primary:hover, .btn-auth:hover:not(:disabled), .join-btn:hover{background:var(--tm-aksen-gelap)}
.btn-auth:disabled{background:rgba(172,40,73,.45);color:#FFFFFF}
.btn-ghost{background:#FFFFFF;color:var(--tm-teks);box-shadow:inset 0 0 0 1px var(--tm-garis)}
.btn-ghost:hover{background:var(--tm-isian)}
header .btn-ghost, .join-top .btn-ghost{box-shadow:none}

/* ---------- 4. Kartu ---------- */
.card, .legal-wrap, .auth-card, body.ref .auth-card, body.ref .auth-card.si-mode, .cc, .ribbon{
  background:var(--tm-kartu);border:1px solid var(--tm-garis-kartu);border-radius:6px}
.tab, #warn .warn, body.ref .auth-card.si-mode .si-tag{background:#FEF3C7;color:#92400E}
.tab .d{background:#92400E}
.legal-wrap, .legal-wrap h1, .legal-wrap p, .legal-wrap li{color:var(--tm-teks)}

/* ---------- 5. Kolom isian ---------- */
.pin-cell, .form-input, .code-input, body.ref .form-input, body.ref .fld input, body.ref .code-input{
  background:var(--tm-isian)!important;border:1px solid var(--tm-garis-isian)!important;color:var(--tm-teks)}
.pin-cell:focus, .form-input:focus, .code-input:focus,
body.ref .form-input:focus, body.ref .fld input:focus, body.ref .code-input:focus{
  border-color:var(--tm-aksen)!important;box-shadow:0 0 0 3px var(--tm-cincin)!important;outline:none}

/* ---------- 6. Tautan & sisa warna yang ditulis langsung ---------- */
.browse a, .legal-wrap a, .hint .link, .forgot, .link-strong, .foot-note a,
.link, .divider a, .cs-mail, .cv-link{color:var(--tm-aksen)}
body.ref .divider .link{color:var(--tm-aksen)}
.next .d.w{background:#D97706}
.pin-error{color:#B91C1C}
.plan-side{background:var(--tm-isian)}          /* /subscription: dulu bayangan gelap */

/* ---------- 7. Banner cookie (gayanya disuntikkan js/cookie-consent.js) ----------
   Selektor diawali "body" supaya menang dari <style> suntikan itu. */
body #cookie-consent{font-family:var(--tm-huruf)}
body #cookie-consent .cc-card{background:var(--tm-nav);border-color:rgba(255,255,255,.14);border-radius:6px}
body #cookie-consent .cc-text a{color:var(--tm-logo-nav)}
body #cookie-consent .cc-accept{background:var(--tm-aksen)}
body #cookie-consent .cc-accept:hover{background:var(--tm-aksen-gelap)}
body #cookie-consent .cc-decline{background:#FFFFFF;color:var(--tm-nav)}
body #cookie-consent .cc-decline:hover{background:var(--tm-isian)}