/* ============================================================
   SKIN BEAM — gabungan pilihan Cinta (2026-10-24):
   #1 Berkas Cahaya (hero + latar bergerak) ·
   #3 Kaca Vault (panel & tombol kaca) ·
   #11 Panel Sinematik 3D (beberapa panel pilihan)
   Menimpa Skin Mono KHUSUS halaman landing; isi & fungsi tetap.
   ============================================================ */

#landingPage {
  background: #050507;
  color: #f2f2f5;
  color-scheme: dark;
}
#landingPage ::selection { background: rgba(139, 92, 246, .45); }

/* ---------- Kaca Vault: bahasa panel & tombol ---------- */
#landingPage .glass,
#landingPage .model-card,
#landingPage .capability-item,
#landingPage .tool-strip-card,
#landingPage .workflow-step,
#landingPage .intro-visual,
#landingPage .sv-code,
#landingPage .frost-chat {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045) 38%, rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.5), 0 24px 55px rgba(0,0,0,.50);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #ececf1;
}
#landingPage .model-card:hover,
#landingPage .tool-strip-card:hover {
  border-color: rgba(196,181,253,.45);
  transform: translateY(-2px);
}
#landingPage .model-card,
#landingPage .tool-strip-card { transition: transform .25s ease, border-color .25s ease; }
#landingPage .model-label { color: #c4b5fd; }

/* Tombol kaca vault (primer tetap putih solid seperti referensi) */
#landingPage .button-quiet,
#landingPage .header-actions .button {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  border-radius: 999px;
}
#landingPage .button-primary { border-radius: 999px; }

/* Header kaca */
#landingPage .site-header {
  background: rgba(7,7,12,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

/* ---------- HERO: Berkas Cahaya (bergerak) ---------- */
#landingPage .hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 48% at 50% 108%, rgba(139,92,246,.34), transparent 65%),
    radial-gradient(ellipse 42% 30% at 82% -6%, rgba(88,80,236,.16), transparent 70%),
    #050507;
  animation: beamAurora 16s ease-in-out infinite alternate;
}
/* Batang berkas vertikal */
#landingPage .hero-section::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 72%;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255,255,255,.97), rgba(167,139,250,.85) 30%, rgba(167,139,250,.12) 78%, transparent);
  box-shadow: 0 0 22px 5px rgba(167,139,250,.75), 0 0 90px 22px rgba(139,92,246,.35);
  animation: beamPulse 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
/* Garis horizon bercahaya */
#landingPage .hero-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  box-shadow: 0 0 24px rgba(167,139,250,.9);
  pointer-events: none;
  z-index: 0;
}
#landingPage .hero-grid { position: relative; z-index: 1; }
@keyframes beamPulse {
  from { opacity: .72; box-shadow: 0 0 16px 4px rgba(167,139,250,.55), 0 0 64px 16px rgba(139,92,246,.26); }
  to   { opacity: 1;   box-shadow: 0 0 26px 7px rgba(167,139,250,.85), 0 0 110px 28px rgba(139,92,246,.42); }
}
@keyframes beamAurora {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 3% 0, -4% 0, 0 0; }
}

/* Judul hero: gradasi putih → lavender seperti referensi #1 */
#landingPage .hero-copy h1 {
  background: linear-gradient(180deg, #ffffff 22%, #cdbffb 58%, #7c6aa8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#landingPage .hero-copy h1 .headline-italic {
  background: linear-gradient(180deg, #e9e4ff 10%, #a78bfa 60%, #6d5bb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Pil kicker kaca */
#landingPage .hero-eyebrow {
  background: rgba(10,8,20,.55);
  border: 1px solid rgba(167,139,250,.38);
  color: #c4b5fd;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
}
/* Label melayang & indeks seni: chip kaca kecil */
#landingPage .floating-label,
#landingPage .art-index {
  background: rgba(10,9,18,.55);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #d9d4f5;
}

/* ---------- Panel Sinematik 3D (hanya beberapa) ---------- */
/* 1) Visual studio di hero: panggung miring + melayang pelan */
#landingPage .studio-visual {
  perspective: 1400px;
}
#landingPage .studio-visual .sv-photo-wrap {
  transform: rotateX(6deg) rotateY(-7deg) rotateZ(1deg);
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 46px 54px 80px rgba(0,0,0,.75), -18px -12px 50px rgba(139,92,246,.10), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
#landingPage .hero-section:hover .studio-visual .sv-photo-wrap {
  transform: rotateX(2deg) rotateY(-2deg) rotateZ(0deg);
}
#landingPage .frost-chat {
  animation: beamFloat 9s ease-in-out infinite alternate;
}
@keyframes beamFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}
/* 2) Kartu kapabilitas: miring bergantian, menatap datar saat hover */
#landingPage .capability-grid { perspective: 1200px; }
#landingPage .capability-item {
  transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
#landingPage .capability-item:nth-child(odd)  { transform: rotateX(3deg) rotateY(-4deg); }
#landingPage .capability-item:nth-child(even) { transform: rotateX(3deg) rotateY(4deg); }
#landingPage .capability-item:hover {
  transform: rotateX(0) rotateY(0) translateY(-4px);
  border-color: rgba(196,181,253,.45);
}
/* 3) CTA penutup: panel kaca miring halus + berkas mini di belakangnya */
#landingPage .final-cta-section { position: relative; overflow: hidden; }
#landingPage .final-cta-section::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 2px; height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255,255,255,.85), rgba(167,139,250,.5) 35%, transparent);
  box-shadow: 0 0 18px 4px rgba(167,139,250,.55), 0 0 70px 18px rgba(139,92,246,.28);
  animation: beamPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
#landingPage .cta-content {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 60px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: rotateX(3deg);
  padding-left: 22px; padding-right: 22px;
}

/* Footer: hairline kaca */
#landingPage .site-footer {
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

/* Gerakan dikurangi bila pengguna meminta */
@media (prefers-reduced-motion: reduce) {
  #landingPage .hero-section,
  #landingPage .hero-section::before,
  #landingPage .final-cta-section::before,
  #landingPage .frost-chat { animation: none; }
}

/* ============================================================
   SKIN BEAM 2 — perluasan ke seluruh aplikasi (permintaan Cinta
   2026-10-24: "seperti dashboard" di semua bagian).
   Dibatasi ke tema gelap agar tema terang tetap Mono yang bersih.
   DIKECUALIKAN DENGAN SENGAJA: komponen sambutan chat (.chat-welcome
   dan turunannya) — dipin persis foto referensi Cinta, tidak disentuh.
   ============================================================ */

/* ---------- Auth: berkas cahaya + panel kaca ---------- */
html[data-theme="dark"] #authPage {
  background: #050507;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] #authPage::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 2px; height: 46%;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255,255,255,.9), rgba(167,139,250,.7) 35%, transparent);
  box-shadow: 0 0 18px 4px rgba(167,139,250,.6), 0 0 70px 18px rgba(139,92,246,.3);
  animation: beamPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] #authPage .auth-shell { position: relative; z-index: 1; }
html[data-theme="dark"] #authPage .auth-form-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045) 38%, rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.5), 0 26px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] #authPage .auth-form-panel input,
html[data-theme="dark"] #authPage .auth-form-panel select,
html[data-theme="dark"] #authPage .otp-box {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #f2f2f5;
  border-radius: 12px;
}
html[data-theme="dark"] #authPage .auth-form-panel input:focus,
html[data-theme="dark"] #authPage .auth-form-panel select:focus,
html[data-theme="dark"] #authPage .otp-box:focus {
  border-color: rgba(196,181,253,.6);
  box-shadow: 0 0 0 3px rgba(139,92,246,.18);
}
html[data-theme="dark"] #authPage .auth-tabs { border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] #authPage .auth-tabs button.active {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
html[data-theme="dark"] #authPage .forgotLink,
html[data-theme="dark"] #authPage .codeLoginLink,
html[data-theme="dark"] #authPage .auth-back { color: #c4b5fd; }

/* ---------- Shell chat: kaca, pesan & tipografi TIDAK diubah ---------- */
html[data-theme="dark"] .chat-sidebar {
  background: rgba(8,8,14,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(255,255,255,.09);
}
html[data-theme="dark"] .chat-topbar {
  background: rgba(8,8,14,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
html[data-theme="dark"] .chat-model-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  border-radius: 999px;
}
html[data-theme="dark"] .new-chat-button {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
  border-radius: 999px;
}
html[data-theme="dark"] .chat-composer-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 20px 44px rgba(0,0,0,.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] .chat-scroll-area {
  background:
    radial-gradient(ellipse 60% 22% at 50% -4%, rgba(139,92,246,.12), transparent 70%),
    transparent;
}
html[data-theme="dark"] .chat-sidebar .conversation-item:hover,
html[data-theme="dark"] .chat-sidebar .conversation-item.active {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

/* ---------- Tools, Settings, Admin, Voice ---------- */
html[data-theme="dark"] #toolsView .tool-card,
html[data-theme="dark"] #adminView .tool-card {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04) 40%, rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 44px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] .settings-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 40%, rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 26px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] .settings-panel input,
html[data-theme="dark"] .settings-panel select,
html[data-theme="dark"] .settings-panel textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #f2f2f5;
  border-radius: 12px;
}
html[data-theme="dark"] .voice-card {
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 44px rgba(0,0,0,.5);
}
html[data-theme="dark"] .settings-tab.active,
html[data-theme="dark"] .tool-run {
  border-radius: 999px;
}

/* ---------- Halaman legal & FAQ (dokumen statis, selalu gelap) ---------- */
body:has(.legal-doc), body:has(.faq-main) {
  background: #050507;
  position: relative;
}
body:has(.legal-doc)::before, body:has(.faq-main)::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 2px; height: 220px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(167,139,250,.55) 40%, transparent);
  box-shadow: 0 0 18px 4px rgba(167,139,250,.5), 0 0 60px 16px rgba(139,92,246,.25);
  pointer-events: none;
}
.legal-doc, .faq-main {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) 40%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 26px 60px rgba(0,0,0,.5);
}
.legal-updated { color: #c4b5fd; }
.legal-foot-links a, .faq-main a { color: #c4b5fd; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] #authPage::before { animation: none; }
}

/* ============================================================
   SKIN BEAM 3 — sambutan chat disamakan ke dashboard (atas
   permintaan eksplisit Cinta 2026-10-24: "sesuaikan").
   Pin mono10 dicabut untuk tema gelap; tema terang tetap memakai
   tampilan foto referensi lama.
   ============================================================ */

/* Kilau aurora lembut di belakang sambutan */
html[data-theme="dark"] #chatPage .chat-welcome { position: relative; }
html[data-theme="dark"] #chatPage .chat-welcome::before {
  content: "";
  position: absolute;
  left: 50%; top: -40px;
  width: 320px; height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(139,92,246,.22), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] #chatPage .chat-welcome > * { position: relative; z-index: 1; }

/* Orb tetap, ditambah cincin cahaya ungu dashboard */
html[data-theme="dark"] #chatPage .welcome-orb {
  box-shadow: 0 0 34px rgba(139,92,246,.45), 0 0 90px rgba(139,92,246,.20);
}
html[data-theme="dark"] #chatPage .welcome-orb-ring { border-color: rgba(196,181,253,.35); }

/* Pil kicker sambutan ala landing */
html[data-theme="dark"] #chatPage .chat-welcome .eyebrow {
  background: rgba(10,8,20,.55);
  border: 1px solid rgba(167,139,250,.38);
  color: #c4b5fd;
  border-radius: 999px;
  padding: 6px 12px;
}
html[data-theme="dark"] #chatPage .chat-welcome .eyebrow-dot { background: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,.9); }

/* Judul sambutan: gradasi putih → lavender */
html[data-theme="dark"] #chatPage .chat-welcome h1 {
  background: linear-gradient(180deg, #ffffff 22%, #cdbffb 58%, #7c6aa8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] #chatPage .chat-welcome h1 em {
  background: linear-gradient(180deg, #e9e4ff 10%, #a78bfa 60%, #6d5bb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] #chatPage .welcome-description { color: #b0abc9; }

/* Pil saran: kaca vault gelap (bukan lagi kaca terang foto lama) */
html[data-theme="dark"] #chatPage .suggestion-grid button {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 45%, rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  color: #ececf1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 34px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] #chatPage .suggestion-grid button:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  border-color: rgba(196,181,253,.5);
  transform: translateY(-2px);
}
html[data-theme="dark"] #chatPage .suggestion-icon {
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(196,181,253,.30);
  color: #c4b5fd;
}
html[data-theme="dark"] #chatPage .suggestion-arrow { color: #9aa7bc; }

/* Chip sapaan: pil kaca gelap */
html[data-theme="dark"] #chatPage .greeting-chip {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.20);
  color: #c4b5fd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme="dark"] #chatPage .greeting-chip:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-color: rgba(196,181,253,.45);
}

/* Strip peringatan: kaca gelap bernuansa amber (bukan krem lagi) */
html[data-theme="dark"] #chatPage .setup-warning {
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.28);
  color: #f5c97a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="dark"] #chatPage .setup-warning > span { border-color: rgba(251,191,36,.45); color: #f5c97a; }

/* Info model aktif: nama model putih di atas gelap */
html[data-theme="dark"] #chatPage .active-model-label > div > span { color: #9aa7bc; }
html[data-theme="dark"] #chatPage .active-model-label b { color: #ffffff; }