/* =========================================================================
   LANDING PAGE + AUTH + LEGAL — disamakan dengan dashboard clipper & brand
   19 Sep 2026, kode 248 dari Arip.

   PATOKAN (diukur live dari /clipper/dashboard, bukan tebakan):
     latar       : rgb(0,0,0)
     kartu       : #0c0c11, border 1px #22222c
     teks        : #f6f6fa ; sekunder #a1a1aa ; redup #71717a
     aksen utama : linear-gradient(135deg,#ff043e,#d70656,#b40589,#8f04c4,#7202ff)
     aksen pendek: linear-gradient(90deg,#ff2e6a,#b40589)
     wordmark    : ClyporaWord (Poppins SemiBold 600), huruf kecil
     ikon logo   : 23px

   YANG DIGANTI DI SINI (semuanya terukur di halaman, bukan dari baca CSS):
     #FC5810 / #ff8400  oranye LP        -> gradien merah-ungu
     #6558e8 / #8b7bff  ungu-biru auth   -> gradien merah-ungu
     #6f7890            abu-biru teks    -> #a1a1aa
     #1e3a5f #06b6d4    cover biru-cyan  -> merah-magenta
     #2d1b69            cover biru-ungu  -> ungu logo
     rgb(45,160,255)    avatar biru      -> gradien logo
   ========================================================================= */

/* ---------- 1. AKSEN: semua tombol utama ikut gradien dashboard ---------- */
.lp-btn-primary,
.pub-btn-signup,
.lp-cta .lp-btn-primary,
.auth-page .btn,
.auth-card .btn.wide{
  background:linear-gradient(135deg,#ff043e 0%,#d70656 26%,#b40589 55%,#8f04c4 78%,#7202ff 100%) !important;
  color:#fff !important;
  border:0 !important;
}
.lp-btn-primary:hover,
.pub-btn-signup:hover,
.auth-page .btn:hover{
  filter:brightness(1.08);
}

/* tombol sekunder: kaca netral, bukan biru */
.lp-btn-secondary{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#f6f6fa !important;
}

/* ---------- 2. TEKS AKSEN & LINK ---------- */
.lp-accent,.lp-payout,
.lp-eyebrow,
.auth-card .eyebrow{
  background:linear-gradient(90deg,#ff2e6a,#b40589) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  border-color:#b40589 !important;
}
.auth-page a,
.auth-card a,
.auth-foot a,
.legal-toc a,
.legal-body a,
.legal-footer a{
  color:#ff5c8a !important;
}
.auth-page a:hover,.legal-toc a:hover,.legal-body a:hover{color:#ff89ab !important;}

/* ---------- 3. TEKS SEKUNDER: buang abu-biru ---------- */
.auth-card p,
.auth-card small,
.auth-foot,
.legal-updated,
.legal-page .page-crumb,
.legal-page .page-crumb span,
.legal-header p,
.legal-toc b{
  color:#a1a1aa !important;
}

/* isi halaman legal: seluruh paragraf & daftar ikut palet dashboard.
   Sebelumnya mewarisi --muted:#6f7890 (abu-biru) dari app.css. */
.legal-page,
.legal-body,
.legal-body p,
.legal-body li,
.legal-body td,
.legal-body strong,
.legal-def,
.legal-def-grid,
.legal-data-row,
.legal-data-table td,
.legal-footer{
  color:#c9c9d2 !important;
}
.legal-body h2,.legal-body h3,.legal-header h1{color:#f6f6fa !important;}
.legal-page{background:#000 !important;}
.legal-toc,.legal-data-table,.legal-def-grid{
  background:#0c0c11 !important;
  border-color:#22222c !important;
}

/* ---------- 4. BADGE LEGAL ---------- */
.legal-badge{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
}

/* ---------- 5. KARTU COVER CAMPAIGN: buang biru/cyan ---------- */
.cc-1{background:linear-gradient(135deg,#ff043e,#d70656) !important;}
.cc-2{background:linear-gradient(135deg,#b40589,#7202ff) !important;}
.cc-3{background:linear-gradient(135deg,#8f04c4,#ff2e6a) !important;}

/* avatar berhuruf (span) yang masih biru -> gradien logo.
   CATATAN 19 Sep (koreksi Arip): .lp-cc-av DIKELUARKAN dari daftar ini —
   dia <img> berisi ikon Clypora asli, jadi kalau diberi background
   gradien, ikonnya terlihat menempel di atas kotak berwarna. */
.lp-avatar-sm,.lp-avatar-lg,.lp-tc-avatar{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
  color:#fff !important;
}
/* ikon merek di kartu campaign: logo saja, tanpa kotak latar */
.lp-cc-av{
  background:none !important;
  background-image:none !important;
  border-radius:0 !important;
  object-fit:contain !important;
}

/* ---------- 6. WORDMARK: samakan dengan sidebar dashboard ----------
   Sebelum: LP pakai Inter 800 18.4px + ikon 28px; auth pakai
   ui-sans-serif 850 + ikon 24px. Dashboard: Poppins SemiBold + ikon 23px. */
.pub-logo,
.auth-page .brand{
  font-family:'ClyporaWord','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-style:normal !important;
  font-weight:600 !important;
  font-size:20px !important;
  letter-spacing:-.005em !important;
  text-transform:lowercase !important;
  color:#f6f6fa !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  line-height:1 !important;
}
.pub-logo-img,
.auth-page .brand .brand-mark{
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  object-fit:contain !important;
  border-radius:0 !important;
  background:none !important;
}

/* ---------- 7. KARTU AUTH: samakan dengan kartu dashboard ---------- */
.auth-card{
  background:#0c0c11 !important;
  border:1px solid #22222c !important;
  border-radius:12px !important;
}
.auth-page{background:#000 !important;}

/* pilihan peran Kreator/Brand saat aktif */
.role-picker input:checked + span{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.role-picker span{color:#d6d2da !important;}

/* ---------- 8. NAV PUBLIK ---------- */
.pub-nav{background:rgba(0,0,0,.86) !important;}
.pub-links{background:#0c0c11 !important;}
.pub-nav-login{color:#f6f6fa !important;}

/* ---------- 10. SISA ORANYE LP: variabel & mock ----------
   Terukur live: .lp-mock-btn ("Daftar Sekarang", "Ikut Campaign",
   "Submit Video") masih rgb(252,88,16) karena memakai --lp-accent.
   Variabel LP disetel ulang ke palet logo, bukan diganti satu-satu. */
.lp-hero,.lp-section,.lp-cta,.lp-footer,.pub-nav,.lp-marquee{
  --lp-accent:#ff2e6a !important;
  --lp-accent2:#b40589 !important;
  --lp-muted:#a1a1aa !important;
}
.lp-mock-btn,
.lp-step-mock .lp-mock-btn{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
  color:#fff !important;
}
.lp-mb-dot,.lp-mini-badge,.lp-badge-ok{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
  color:#fff !important;
}
.lp-payout{
  color:#ff2e6a !important;
}
.lp-rank-active,.lp-rf-1,.lp-rf-2{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
}

/* ---------- 11. SISA ORANYE GELOMBANG 2 (terukur live) ----------
   .lp-mock-tag, .lp-rank-bonus, .lp-rank-connector, .lp-rank-item
   masih rgb(252,88,16) karena aturan lama di app.css memakai nilai
   oranye langsung, bukan var(--lp-accent). */
.lp-mock-tag,
.lp-rank-bonus,
.lp-cc-tag,
.lp-leader-chip{
  background:linear-gradient(135deg,#ff043e,#8f04c4) !important;
  border-color:transparent !important;
  color:#fff !important;
}
.lp-rank-connector{
  background:linear-gradient(90deg,#ff2e6a,#b40589) !important;
}
.lp-rank-item.lp-rank-active,
.lp-rank-item[class*=active]{
  border-color:#b40589 !important;
}
.lp-hero-stat b,
.lp-hero-stat strong{
  color:#ff2e6a !important;
}

/* badge "Pending" LP masih amber (245,158,11); dashboard sudah pink */
.lp-badge-wait{
  background:rgba(255,158,194,.15) !important;
  color:#ff9ec2 !important;
}
.lp-badge-ok{
  background:rgba(180,5,137,.18) !important;
  color:#ff89ab !important;
}

/* cahaya latar CTA masih oranye */
.lp-cta-glow,
.lp-hero-glow{
  background:radial-gradient(60% 70% at 50% 30%,rgba(180,5,137,.30),rgba(114,2,255,0) 70%) !important;
}

.auth-card .alert.success{
  background:rgba(255,4,62,.10) !important;
  border:1px solid rgba(180,5,137,.45) !important;
  color:#ffd9e5 !important;
  border-radius:10px !important;
}
.auth-card .alert.error{
  background:rgba(207,68,88,.12) !important;
  border:1px solid rgba(207,68,88,.45) !important;
  color:#ffc9d2 !important;
  border-radius:10px !important;
}

/* ---------- 12. POPUP "SELAMAT DATANG" (tombol Mulai Sekarang) ----------
   Meniru alur konten.com (diukur live 19 Sep 2026):
     layar penuh hitam, logo kiri-atas, judul 24px/500, sub 14px,
     2 kartu 175x256 berdampingan, kaki "Sudah punya akun?".
   Bedanya: palet memakai gradien logo Clypora, bukan oranye. */
.lp-welcome{
  position:fixed; inset:0; z-index:200;
  background:#050507;
  overflow-y:auto;
  display:flex; flex-direction:column;
  padding:20px 20px 40px;
  animation:lpw-masuk .22s ease-out;
}
.lp-welcome[hidden]{display:none;}
@keyframes lpw-masuk{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.lp-welcome-x{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; line-height:1;
  font-size:26px; color:#a1a1aa;
  background:rgba(255,255,255,.06); border:0; border-radius:10px;
  cursor:pointer;
}
.lp-welcome-x:hover{color:#fff;background:rgba(255,255,255,.12);}

.lp-welcome-logo{
  display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start; text-decoration:none;
}
.lp-welcome-logo img{width:23px;height:23px;object-fit:contain;}
.lp-welcome-logo .brand-word{
  font-family:'ClyporaWord','Poppins',system-ui,sans-serif;
  font-weight:600; font-size:20px; color:#f6f6fa;
  text-transform:lowercase; letter-spacing:-.1px;
}

.lp-welcome-inti{
  margin:auto 0; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.lp-welcome-inti h2{
  margin:0 0 6px; font-size:24px; font-weight:500; color:#fff;
}
.lp-welcome-sub{
  margin:0 0 26px; font-size:14px; color:#a1a1aa;
}

.lp-welcome-pilih{
  display:flex; gap:12px; justify-content:center;
  width:100%; max-width:380px;
}
.lp-wcard{
  flex:1 1 0; min-width:0; max-width:175px;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 12px 20px;
  background:#0c0c11;
  border:1px solid #22222c; border-radius:14px;
  text-decoration:none; cursor:pointer;
  transition:border-color .18s, transform .18s;
}
.lp-wcard:hover{transform:translateY(-2px);}
.lp-wcard-creator{border-color:rgba(180,5,137,.55);}
.lp-wcard-creator:hover{border-color:#ff2e6a;}
.lp-wcard-brand:hover{border-color:#7202ff;}

.lp-wcard-gbr{
  display:grid; place-items:center;
  width:100%; aspect-ratio:1/1; max-height:132px;
  margin-bottom:14px; border-radius:10px;
}
.lp-wcard-creator .lp-wcard-gbr{
  background:radial-gradient(70% 70% at 50% 40%,rgba(255,4,62,.22),rgba(114,2,255,.10));
}
.lp-wcard-brand .lp-wcard-gbr{
  background:radial-gradient(70% 70% at 50% 40%,rgba(114,2,255,.20),rgba(255,4,62,.08));
}
.lp-wcard-gbr img{width:58%;height:58%;object-fit:contain;}

.lp-wcard h3{
  margin:0 0 4px; font-size:16px; font-weight:500; color:#fff;
}
.lp-wcard p{
  margin:0; font-size:11px; color:#a1a1aa; line-height:1.35;
}

.lp-welcome-kaki{
  margin:26px 0 0; font-size:16px; color:#a1a1aa;
}
.lp-welcome-kaki a{
  color:#ff2e6a; text-decoration:none; font-weight:500;
}

@media(min-width:520px){
  .lp-welcome-pilih{gap:16px;max-width:400px;}
  .lp-welcome-inti h2{font-size:28px;}
}

/* ---------- 13. KARTU PILIHAN PERAN (koreksi Arip 19 Sep, kode 248) ----------
   ATURAN TETAP: logo Clypora di KEDUA kartu tampil NORMAL & berwarna
   penuh. DILARANG grayscale / opacity / brightness pada logo merek
   (percobaan meniru konten.com ditolak: "ini terlalu parah" — konten.com
   meredupkan FOTO, bukan logo merek).

   Pembeda yang diminta Arip:
     - garis tepi Kreator = merah-oranye warna logo
     - garis tepi Brand   = putih
     - latar Brand benar-benar gelap, Kreator lebih terang
   Struktur: kotak luar = garis (padding 2px), ::before = isi kartu. */
.lp-wcard{
  border:0 !important;
  border-radius:12px !important;
  padding:2px !important;
  overflow:hidden;
  position:relative;
  outline:none !important;
}
.lp-wcard::before{
  content:"";
  position:absolute; inset:2px;
  border-radius:10px;
  z-index:0;
}
.lp-wcard > *{position:relative; z-index:1;}
.lp-wcard-gbr{border-radius:8px !important;}
/* logo NORMAL di kedua kartu — dikunci, jangan diutak-atik lagi */
.lp-wcard .lp-wcard-gbr img{filter:none !important; opacity:1 !important;}

/* --- KREATOR: garis merah-oranye logo, latar lebih terang --- */
.lp-wcard-creator{
  /* KOREKSI Arip 19 Sep: garis WAJIB warna LOGO, bukan merah polos.
     Warna diambil dari piksel clypora-icon.png (bukan tebakan):
       biru  #319ef1  (n=7771)
       ungu  #965ada  (n=7312)
       magenta #c93acb (n=7995)
     Arah 135deg mengikuti arah gradien di dalam logo. */
  background:linear-gradient(135deg,#31a0f2 0%,#8f5cdb 48%,#c93acb 100%) !important;
}
.lp-wcard-creator::before{background:#15151c !important;}
.lp-wcard-creator .lp-wcard-gbr{
  background:radial-gradient(70% 70% at 50% 40%,rgba(255,46,106,.22),rgba(0,0,0,0) 72%),#1b1b23 !important;
}
.lp-wcard-creator h3{color:#fff !important;}
.lp-wcard-creator p{color:#b9b4bf !important;}
.lp-wcard-creator:hover{filter:brightness(1.12);}

/* --- BRAND: garis putih, latar hitam pekat --- */
.lp-wcard-brand{
  background:#ffffff !important;
}
.lp-wcard-brand::before{background:#000 !important;}
.lp-wcard-brand .lp-wcard-gbr{background:#050507 !important;}
.lp-wcard-brand h3{color:#fff !important;}
.lp-wcard-brand p{color:#8a8490 !important;}
.lp-wcard-brand:hover::before{background:#0b0b10 !important;}

/* ---------- 14. TOMBOL "LANJUTKAN DENGAN GOOGLE" ----------
   Ukuran & gaya disalin dari konten.com (terukur live):
   tinggi 44px, radius 12px, gap 12px, teks putih 14px/400, logo 20x20. */
.btn-google{
  display:flex; align-items:center; justify-content:center;
  gap:12px; width:100%; height:44px;
  margin:0;
  border-radius:12px;
  background:#141414;
  border:1px solid #22222c;
  color:#fff; font-size:14px; font-weight:400;
  text-decoration:none;
  transition:background .18s,border-color .18s;
}
.btn-google:hover{background:#1b1b22;border-color:#33333f;}
.btn-google .g-logo{width:20px;height:20px;flex:0 0 20px;}

/* pemisah "Atau lanjutkan dengan" */
.auth-pisah{
  display:flex; align-items:center; gap:12px;
  margin:14px 0 12px;
  color:#8a8490; font-size:12px;
}
.auth-pisah::before,.auth-pisah::after{
  content:""; flex:1; height:1px; background:#22222c;
}

/* ---------- 15. TEMUAN LIVE: isian tanpa type= masih PUTIH ----------
   `<input name="name">` tidak punya atribut type, jadi lolos dari aturan
   ui-sama.css yang hanya menyasar input[type=text|email|password].
   Yang kena cuma aturan lama app.css (tema terang) -> latar putih,
   teks putih = tidak terbaca. Field email & password sudah gelap,
   jadi tampak belang. Diseragamkan di sini. */
.auth-card input:not([type]),
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="tel"]{
  background:#0a0a0e !important;
  color:#f5f8ff !important;
  border:1px solid #22222c !important;
  border-radius:10px !important;
  width:100%;
  padding:12px 14px !important;
  margin-top:6px;
}
.auth-card input:focus{
  outline:none !important;
  border-color:#ff2e6a !important;
}
.auth-card input::placeholder{color:#6f6a76 !important;}
/* input tersembunyi jangan sampai memakan ruang/menggambar kotak */
.auth-card input[type="hidden"]{display:none !important;}

/* teks tombol Google WAJIB putih (pedoman merek Google),
   bukan warna aksen. Sempat mewarisi warna link kartu auth. */
.btn-google,
.btn-google span{color:#fff !important;}

/* ---------- 16. KEPALA KARTU AUTH: dirapikan (koreksi Arip 19 Sep) ----------
   Keluhan: eyebrow + "Daftar akun" + tagline terlihat NUMPUK.
   Sebab terukur live (ukur_kepala.py):
     - eyebrow display:inline -> tidak punya baris sendiri
     - h1 16px w400  = UKURAN & TEBAL SAMA dengan tagline 16px w400
       -> tidak ada hierarki, mata membaca 3 baris kembar
     - jarak tagline->h1 cuma 5px, tagline->tombol Google 0px (menempel)
   Perbaikan: beri irama 3 tingkat (kecil-besar-sedang) + napas. */
.auth-card .eyebrow{
  display:block !important;
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  /* eyebrow MILIK judul -> dekatkan ke judul; napas justru di bawah judul */
  margin:0 0 6px !important;
}
.auth-card h1{
  font-size:26px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  margin:0 0 11px !important;
  color:#fff !important;
}
.auth-card h1 + p{
  font-size:14px !important;
  line-height:1.55 !important;
  color:#9d97a3 !important;   /* dinaikkan dari #8a8490: lebih terbaca, hierarki tetap */
  margin:0 0 22px !important;
}
/* napas sebelum & sesudah tombol Google */
.auth-card .btn-google{margin:0 0 4px !important;}
.auth-card .auth-pisah{margin:16px 0 14px !important;}
/* label isian jangan terlalu rapat ke kotak sebelumnya */
.auth-card label{margin:16px 0 0 !important; font-size:13px !important;}
.auth-card label:first-of-type{margin-top:0 !important;}

/* ---------- 17. KARTU PERAN: napas bawah + sub dipertegas ----------
   Keluhan Arip: teks kecil di bawah "Sebagai Kreator/Brand" menempel
   ke garis kotak. Terukur live: jarak sub -> garis bawah cuma 2px
   (kartu padding 2px itu GARIS, jadi isi memang mepet).
   Juga: sub Kreator #b9b4bf vs Brand #8a8490 -> belang. Disamakan
   dan dinaikkan supaya tegas terbaca. */
.lp-wcard h3{
  margin:0 0 5px !important;
  padding:0 12px !important;
  font-size:13px !important;
  line-height:1.25 !important;
}
.lp-wcard p{
  margin:0 !important;
  /* padding kiri-kanan dikecilkan supaya "Mulai viralin brand kamu"
     muat 1 baris seperti sub Kreator. Kalau pecah 2 baris, baris kedua
     memakan napas bawah (terukur: 19px vs 35px = terlihat nempel). */
  padding:0 6px 25px !important;
  font-size:11px !important;
  line-height:1.4 !important;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* warna sub SAMA di kedua kartu, lebih tegas dari sebelumnya */
/* netral terang, BUKAN keunguan: aksen warna cukup dipegang garis +
   logo. #cbc6d3 sebelumnya terbaca redup di font 11px. */
.lp-wcard-creator p,
.lp-wcard-brand p{color:#dcd9e3 !important;}
.lp-wcard-creator:hover p,
.lp-wcard-brand:hover p{color:#ffffff !important;}