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

/* ============================================================
   skorika.com — css/page/join.css
   Gaya khas /join.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   42 aturan.
   ============================================================ */
/* ================= SKIN ACUAN — halaman input nama peserta =================
   Nilai diambil per-piksel dari image8.png (perbaikan_2):
     latar atas #31105B  latar bawah #15032C  pendar puncak #4D1696
     kartu rgba putih .045   tombol utama #00A06A   kolom isian #FFFFFF
   Semua aturan diikat ke body.ref supaya css/auth.css yang dipakai
   bersama oleh login/register/forgot tidak ikut berubah. */
body.ref{background:#240848;
  background-image:
    radial-gradient(760px 300px at 50% -4%,rgba(77,22,150,.62),transparent 70%),
    linear-gradient(180deg,#31105B 0%,#25074C 22%,#210744 45%,#1C0639 68%,#15032C 100%);
  background-attachment:fixed;color:#F4EFDB}
/* Bentuk-bentuk samar pada latar acuan */
body.ref::before{content:'';position:fixed;inset:-10% -20%;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(closest-side,transparent 0 78%,rgba(255,255,255,.05) 78% 79%,transparent 80%) -10% 26%/58% 70% no-repeat,
    radial-gradient(closest-side,transparent 0 80%,rgba(255,255,255,.04) 80% 81%,transparent 82%) 112% 8%/54% 62% no-repeat}
/* ---------- bilah atas ---------- */
body.ref .join-top{position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px clamp(12px,3vw,20px) 0}
body.ref .join-top .right{margin-left:auto;display:flex;align-items:center;gap:9px}
body.ref .auth-logo{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:22px;font-weight:900;gap:9px}
body.ref .auth-logo .mark,body.ref .auth-logo svg{width:.914em;height:.914em}
body.ref .trainer-link{font-size:12.5px;font-weight:700;color:rgba(244,239,219,.62)}
body.ref .trainer-link:hover{color:#F4EFDB;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
body.ref .lang{display:inline-flex;border:1px solid rgba(255,255,255,.14);border-radius:6px;
  background:rgba(255,255,255,.06);padding:2px;box-shadow:none}
body.ref .lang button{border:none;background:transparent;border-radius:4px;padding:4px 9px;cursor:pointer;
  font-weight:800;font-size:11.5px;line-height:1;color:rgba(244,239,219,.62)}
body.ref .lang button.on{background:#F4EFDB;color:#25143B}
/* ---------- kartu tengah ---------- */
/* Kartu ditengahkan secara vertikal. Sebelumnya aturan ini memaksa
   align-items:flex-start plus padding atas, sehingga kartu menempel ke
   bagian atas walau .auth-main dasar sudah menengahkan. Sekarang
   perataan dasar dari css/auth.css yang dipakai. */
body.ref .auth-main{position:relative;z-index:2}
/* Kotak kartu: lebar 480px, tinggi 513px (naik 50% dari 342px, perintah
   putaran sebelumnya). Tinggi kartu = isi + padding tegak, jadi begitu
   isinya diperbesar 30% paddingnya harus ikut menyusut supaya tinggi
   kotaknya tetap 513px:
     isi lama 286px  ->  x1,30  ->  372px
     padding tegak   =  513 - 372 - 2 garis = 139px
     dibagi menurut perbandingan lama 26:28 -> 67px atas, 72px bawah
   Dua angka yang mengendalikan ukuran kotak: max-width (lebar) dan
   padding tegak (tinggi). */
body.ref .auth-card{max-width:480px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:10px;box-shadow:none;padding:67px 26px 72px;text-align:left;transform:none}
body.ref .auth-card h1{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;
  color:rgba(244,239,219,.62);text-align:left;margin:0 0 10.4px;text-transform:none}
body.ref .auth-card .sub{font-size:16px;font-weight:600;color:rgba(244,239,219,.5);text-align:left;
  margin:0 0 18.2px;max-width:none}
body.ref .fld label,body.ref .join-label{font-size:15px;font-weight:700;letter-spacing:.02em;
  color:rgba(244,239,219,.62);margin-bottom:9.1px}
/* Kolom isian. Nilai acuan (sudut 5px, tinggi 34px, huruf 13.5px) dikalikan
   1,30 atas permintaan pemilik. */
body.ref .form-input,body.ref .fld input{height:44.2px;padding:0 15.6px;border:none!important;border-radius:6px;
  background:#FFFFFF!important;color:#1D1B20;font-size:18px;font-weight:600;box-shadow:none!important;
  transform:none!important}
body.ref .form-input::placeholder,body.ref .fld input::placeholder{color:#8A8791;font-weight:600}
body.ref .form-input:focus,body.ref .fld input:focus{box-shadow:0 0 0 2px rgba(0,160,106,.75)!important}
/* Kolom kode: bentuknya sama, hanya diperbesar supaya enam karakternya
   terbaca. Warna & sudut mengikuti kolom isian acuan. */
body.ref .code-input{width:100%;height:72.8px;padding:0 18.2px;text-align:center;
  font-family:inherit;font-size:32px;font-weight:900;letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;color:#1D1B20;background:#FFFFFF;border:none;border-radius:6px;
  outline:none;transition:box-shadow .13s}
body.ref .code-input::placeholder{font-size:18px;font-weight:700;letter-spacing:0;text-indent:0;
  color:#8A8791;text-transform:none}
body.ref .code-input:focus{box-shadow:0 0 0 2px rgba(0,160,106,.75)}
/* Tombol utama hijau ala acuan. */
body.ref .btn-auth{height:49.4px;border-radius:6px;background:#00A06A;color:#fff;border:none;
  font-family:inherit;font-size:18px;font-weight:400;box-shadow:none;transform:none}
body.ref .btn-auth:hover{background:#00915F;transform:none;box-shadow:none}
body.ref .btn-auth:active{background:#008254;transform:none;box-shadow:none}
body.ref .btn-auth:disabled{background:rgba(255,255,255,.12);color:rgba(244,239,219,.45);box-shadow:none}
/* Chip kode terpilih — mengikuti chip kode di pojok kanan atas acuan. */
body.ref .code-chip{display:flex;align-items:center;justify-content:center;gap:13px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:11.7px 15.6px;margin-bottom:20.8px;font-size:14px;font-weight:700;letter-spacing:.02em;
  color:rgba(244,239,219,.62);text-transform:uppercase}
body.ref .code-chip strong{font-family:inherit;font-size:22px;font-weight:900;
  letter-spacing:.22em;color:#F4EFDB;text-transform:none}
body.ref .row-2{display:flex;gap:10.4px;margin-top:20.8px;align-items:stretch}
body.ref .btn-back{width:49.4px;flex-shrink:0;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);border-radius:6px;cursor:pointer;font-size:20px;color:#F4EFDB;
  display:flex;align-items:center;justify-content:center;font-family:inherit;box-shadow:none;
  transition:background .13s}
body.ref .btn-back:hover{background:rgba(255,255,255,.16);transform:none;box-shadow:none}
body.ref .btn-back:active{transform:none;box-shadow:none}
body.ref .row-2 .btn-auth{flex:1}
body.ref .alert{border:none;border-radius:6px;padding:11.7px 15.6px;font-size:16px;font-weight:700}
body.ref .alert-error{background:rgba(216,25,65,.18);color:#FFB3C2}
body.ref .divider{margin:23.4px 0 0;padding-top:18.2px;border-top:1px solid rgba(255,255,255,.10);
  font-size:16px;font-weight:600;color:rgba(244,239,219,.5)}
body.ref .divider .link{color:#F4EFDB;font-weight:800}
body.ref .loading{text-align:center;padding:28.6px 0}
body.ref .loading .spin{width:39px;height:39px;margin:0 auto 15.6px;border:3px solid rgba(255,255,255,.16);
  border-top-color:#00A06A;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  body.ref .loading .spin{animation:none}
}
@media(max-width:520px){
  body.ref .join-top{padding:10px 12px 0}
  body.ref .code-input{height:65px;font-size:26px}
}

/* ============================================================
   MASUK DENGAN AKUN + POPUP — 26 Agu 2026.
   Homework menuntut peserta masuk dengan Google/Microsoft, jadi
   halaman ini kadang menampilkan pilihan akun, bukan kotak nama.
   Kartunya bertema gelap (body.ref), jadi tombolnya dibuat terang
   supaya lambang penyedia tetap terbaca — sama seperti tombol serupa
   di aplikasi lain.
   ============================================================ */
body.ref .idp-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
body.ref .idp-btn{display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 18px;border:1.5px solid rgba(244,239,219,.16);border-radius:10px;
  background:#FFF;color:#191024;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:700;text-align:left;
  transition:box-shadow .15s,transform .05s,opacity .15s}
body.ref .idp-btn span{flex:1}
body.ref .idp-btn svg{flex:0 0 auto}
body.ref .idp-btn:hover:not(:disabled){box-shadow:0 4px 16px rgba(0,0,0,.35)}
body.ref .idp-btn:active:not(:disabled){transform:translateY(1px)}
body.ref .idp-btn:disabled{opacity:.6;cursor:not-allowed}
body.ref .idp-note{margin:20px 0 0;font-size:12px;line-height:1.6;
  color:rgba(244,239,219,.5);font-weight:600;text-align:center}

/* Popup: kuota penuh dan kegagalan masuk. */
.join-modal-bg{position:fixed;inset:0;background:rgba(12,6,20,.82);z-index:60;
  display:none;align-items:center;justify-content:center;padding:20px}
.join-modal-bg.show{display:flex}
.join-modal{width:100%;max-width:420px;background:#1B0F2B;color:#F4EFDB;
  border:1px solid rgba(244,239,219,.14);border-radius:14px;padding:26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.join-modal h3{margin:0 0 10px;font-size:20px;font-weight:900;letter-spacing:-.015em}
.join-modal p{margin:0 0 20px;font-size:14.5px;line-height:1.6;
  color:rgba(244,239,219,.74);font-weight:600}

/* ============================================================
   LAYAR MASUK PESERTA — KARTU TERANG, 27 Agustus 2026.

   Permintaan pemilik: layar ini harus berkarakter sama dengan kartu
   sign-in trainer di /login — kartu krem, judul besar, teks rata kiri —
   bukan kotak gelap dengan judul 15px yang terbaca seperti label.

   Kenapa hanya langkah ini yang berubah warna, bukan seluruh halaman:
   langkah "kode" dan "nama" adalah pintu masuk sekilas yang menyatu
   dengan latar gelap halaman, sedangkan layar ini adalah tempat orang
   BERHENTI dan MEMBACA — ada nama produk, ada penjelasan hak akses, dan
   ada keputusan akun mana yang dipakai. Latar terang dengan teks gelap
   memberi kontras jauh lebih tinggi untuk paragraf sepanjang itu.

   Penandanya .si-mode dipasang langkah() pada .auth-card.
   ============================================================ */
body.ref .auth-card.si-mode{background:var(--cream);color:var(--header);
  border:1px solid rgba(37,20,59,.10);padding:40px 34px 34px}

/* Label produk di atas judul, meniru .tab pada kartu login trainer:
   yang pertama dibaca orang adalah NAMA LAYANANNYA, baru perintahnya. */
body.ref .auth-card.si-mode .si-tag{display:inline-flex;align-items:center;
  background:var(--peach);color:var(--header);border-radius:var(--r);
  padding:6px 13px;margin-bottom:14px;
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* Judul: sebesar judul kartu login (32px), diturunkan sedikit agar
   "Sign in to start" tetap satu baris di ponsel sempit. */
body.ref .auth-card.si-mode h1{font-family:inherit;font-size:30px;font-weight:700;
  letter-spacing:-.015em;line-height:1.14;color:var(--header);
  text-align:left;margin:0 0 12px;text-transform:none}

/* Paragraf penjelas: 17px, rata kiri, lebar dibatasi ~46 karakter supaya
   mata tidak kehilangan baris saat berpindah ke kiri. */
body.ref .auth-card.si-mode .si-sub{font-size:17px;font-weight:400;line-height:1.55;
  color:var(--ink-soft);text-align:left;margin:0 0 22px;max-width:46ch}

body.ref .auth-card.si-mode .code-chip{background:#FFFDF6;
  border:1px solid rgba(37,20,59,.14);color:rgba(37,20,59,.62)}
body.ref .auth-card.si-mode .code-chip strong{color:var(--header)}

/* Tombol penyedia: di atas krem, tombol putih tanpa garis akan hilang
   bentuknya — garisnya dipertegas dan diberi bayangan tipis. */
body.ref .auth-card.si-mode .idp-btn{border:1.5px solid rgba(37,20,59,.16);
  box-shadow:0 1px 2px rgba(37,20,59,.06)}
body.ref .auth-card.si-mode .idp-btn:hover:not(:disabled){box-shadow:0 4px 14px rgba(37,20,59,.14)}

/* KETERANGAN EMAIL — 12px ke 15px, rata kiri, warna dipekatkan.
   Peserta pelatihan sertifikasi ini banyak yang berusia 40-50 tahun ke
   atas; ukuran lama hanya nyaman bagi yang sudah tahu isinya. */
body.ref .auth-card.si-mode .idp-note{font-size:15px;line-height:1.6;font-weight:400;
  color:var(--ink-soft);text-align:left;margin:22px 0 0;max-width:46ch}

body.ref .auth-card.si-mode .divider{border-top-color:rgba(37,20,59,.12);
  color:var(--ink-soft);font-size:15px}
body.ref .auth-card.si-mode .divider .link{color:var(--header);font-weight:800}

body.ref .auth-card.si-mode .alert{background:#FFDAD6;border:1px solid #FFB4AB;color:#93000A}

@media(max-width:520px){
  body.ref .auth-card.si-mode{padding:28px 22px 26px}
  body.ref .auth-card.si-mode h1{font-size:25px}
  body.ref .auth-card.si-mode .si-sub{font-size:16px}
  /* Keterangan email TIDAK ikut mengecil di ponsel: justru di layar
     kecil ia paling sering dibaca sambil berjalan, dan pemilik meminta
     ukurannya dinaikkan tepat karena banyak peserta berusia 40-50 ke
     atas. Yang boleh mengecil hanya judul dan paragraf pengantar. */
}

/* ------------------------------------------------------------
   DUA KOLOM untuk langkah masuk — 27 Agustus 2026.

   Angkanya DISALIN PERSIS dari .auth-main di css/page/login.css, bukan
   dikira-kira sendiri: lebar 1120px, kolom 1fr + 460px, jarak dan
   padding yang sama, dan — yang paling terlihat — align-items:start.

   align-items:center sempat dipakai di sini dan itu SALAH: teks kiri
   melayang di tengah sementara kartu kanan berangkat dari atas, jadi
   batas atas keduanya tidak pernah bertemu. /login dan /register
   memakai start supaya baris pertama teks dan tepi atas kartu mulai
   dari garis yang sama.

   Judul dan tanda <mark> TIDAK ditulis ulang di sini: .auth-say h1
   sudah ada di css/components.css dan itulah yang dipakai /login dan
   /register. Menyalinnya ke berkas ini berarti dua sumber untuk satu
   tampilan, dan yang kedua pasti menyimpang cepat atau lambat — itu
   persis yang membuat judul di sini sempat berbobot 800 sementara
   halaman lain 600. Yang tersisa hanya .lede, karena nilainya memang
   masih tinggal di login.css dan belum jadi milik bersama. */
body.ref .auth-main.si-mode{max-width:1120px;margin:0 auto;width:100%;
  padding:clamp(34px,6vh,74px) clamp(16px,3vw,44px) clamp(50px,8vh,90px);
  display:grid;grid-template-columns:minmax(0,1fr) 460px;
  gap:clamp(30px,5vw,72px);align-items:start}
body.ref .auth-main.si-mode .auth-card{max-width:none}
body.ref .auth-say .lede{margin-top:18px;max-width:44ch;
  font-size:20px;font-weight:400;color:var(--cream-dim)}

/* Ambang 960px, sama dengan ambang .auth-say h1 di components.css:
   dua ambang yang berbeda membuat judul mengecil di lebar yang berbeda
   dari saat kolomnya menumpuk. */
@media(max-width:960px){
  body.ref .auth-main.si-mode{grid-template-columns:minmax(0,1fr);gap:22px;max-width:520px}
  body.ref .auth-say .lede{font-size:17px;max-width:none}
}

/* ============================================================
   SATU HURUF, DAN HURUFNYA IKUT HALAMAN PUBLIK — 27 Agustus 2026.

   Halaman ini mewarisi body{font-family:'Nunito'} dari css/auth.css,
   sementara homepage, /login, dan /register memakai 'Outfit' — masing-
   masing menyetelnya sendiri di css/page/index.css, login.css, dan
   register.css. Peserta yang datang dari halaman depan karena itu
   melihat huruf berganti bentuk di tengah jalan.

   CATATAN PENTING supaya tidak terulang: var(--font) di tokens.css
   BUKAN huruf halaman publik. Nilainya 'Inter', dan itu huruf halaman
   ADMIN (yang memuat css/base.css). Sempat dipakai di sini dan hasilnya
   tetap tidak sama dengan /login. Yang benar adalah 'Outfit'.

   Diperbaiki di tingkat halaman, BUKAN dengan mengubah css/auth.css:
   berkas itu dipakai bersama halaman Drive dan reset-password.
   ============================================================ */
body.ref{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}

/* Aturan berdasarkan TINGGI layar, disalin dari login.css (baris 114 dan
   133 di sana). Tanpa ini, layar pendek — laptop 1366x768 yang bilah
   perambannya memakan ruang — memberi hero yang lebih besar daripada
   /login pada layar yang sama persis. Terlihat waktu keduanya diuji
   berdampingan: paragraf 20px di sini lawan 18px di sana. */
@media (max-height:900px){
  body.ref .auth-main.si-mode{padding-top:18px;padding-bottom:34px}
  body.ref .auth-say .lede{font-size:18px;margin-top:14px}
}
@media (max-height:700px){
  body.ref .auth-main.si-mode{padding-top:10px;padding-bottom:26px}
}