/* =============================================================================
   TEMA LILIN — identitas visual CAPROX (dipilih 2026-11-06)
   Dimuat PALING AKHIR di setiap halaman, sesudah style.css / index.css / dst.
   Hanya mengubah warna, cahaya, logo, dan latar. Susunan halaman TIDAK diubah.

   Isi:
   1. Token warna Lilin (menimpa token lama hitam-emas)
   2. Tombol utama "warna lilin" dengan cahaya api
   3. Logo lilin menyala (menggantikan gambar logo; hapus blok 3 bila ingin logo lama)
   4. Latar tetap: wajah AI + lilin + kota sinyal (dibuat oleh js/latar-lilin.js)
   5. Cahaya lilin berkedip di pojok, bara api (khusus beranda)
   ============================================================================= */

/* ---------- 1. Token warna ---------- */
:root{
  --bg:#0D0B09;
  --bg-panel:#16120F;
  --bg-panel-2:#1E1813;
  --line:#2E261F;
  --gold:#FF6A3D;          /* api — aksen utama (dulu emas) */
  --gold-bright:#FFB27A;   /* api terang */
  --wheat:#F3EADB;         /* teks: warna lilin */
  --sage:#A39886;          /* teks redup hangat */
  --green:#5FD39A;
  --green-chart:#5FD39A;
  --amber:#FFB547;
  --lilin:#F3EADB;
  --lilin-tekan:#DCCFB8;
  --api-cahaya:rgba(255,106,61,.55);
}
body{
  background-color:var(--bg);
  background-image:radial-gradient(50% 42% at 10% 0%, rgba(255,106,61,.10), transparent 70%),
                   radial-gradient(40% 36% at 96% 8%, rgba(255,190,120,.05), transparent 70%);
  background-size:auto;
  background-attachment:fixed;
}
::selection{ background:rgba(255,106,61,.35); color:#FFF6E8; }

/* ---------- 2. Tombol utama: warna lilin + cahaya api di bawahnya ---------- */
.btn:not(.secondary):not(.danger),
.save-btn:not(.saved),
.navcta,
.btn-primary,
.ea-klik-btn,
.broker-cta{
  background:var(--lilin) !important;
  color:#140F0A !important;
  box-shadow:0 0 0 1px rgba(243,234,219,.25), 0 10px 26px -10px var(--api-cahaya);
  transition:background .15s, box-shadow .2s, transform .08s;
}
.btn:not(.secondary):not(.danger):hover,
.save-btn:not(.saved):hover,
.navcta:hover,
.btn-primary:hover,
.ea-klik-btn:hover,
.broker-cta:hover{
  background:#FFF6E8 !important;
  box-shadow:0 0 0 1px rgba(255,208,138,.55), 0 12px 34px -8px rgba(255,106,61,.8);
}
.btn:not(.secondary):not(.danger):active,
.save-btn:not(.saved):active,
.navcta:active,
.btn-primary:active,
.ea-klik-btn:active,
.broker-cta:active{
  background:var(--lilin-tekan) !important;
  transform:scale(.98);
  box-shadow:none;
}
.btn:disabled, .save-btn:disabled{ box-shadow:none !important; opacity:.55; }
.btn-masuk-header:hover{ background:var(--lilin); color:#140F0A; border-color:var(--lilin); }

/* ---------- 3. Logo ---------- */
/* LOGO TIDAK DIUBAH (2026-11-06, atasan melarang mengganti logo): logo lilin
   dihapus -> gambar logo CAPROX asli tampil lagi, tulisan "CAPROX" kembali
   bergradasi emas seperti sebelum tema Lilin. */
.brand span{
  background:linear-gradient(180deg, #FBEFC2 0%, #E8C468 42%, #C9A227 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
}

/* ---------- 4. Latar tetap (wajah AI + lilin + kota) ---------- */
.latar-lilin{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  opacity:.16;
  contain:strict; /* lapisan ini tidak memengaruhi tata letak halaman -> browser tidak menghitung ulang halaman saat latar bergerak */
}
/* Mode hemat (HP / perangkat lemah / hemat data / sinyal 2G-3G, lihat js/latar-lilin.js):
   latar tetap tampil tapi DIAM — tidak ada animasi yang dihitung setiap frame. */
.latar-lilin.diam *, .latar-lilin-cahaya.diam{ animation:none !important; }
.latar-lilin.penuh{ opacity:.5; }
@media (max-width:760px){ .latar-lilin{ opacity:.12; } .latar-lilin.penuh{ opacity:.32; } }
.latar-lilin .ll-kota{ position:absolute; left:0; right:0; bottom:0; height:46%; }
.latar-lilin .ll-holo{ position:absolute; left:50%; top:9%; height:74%; aspect-ratio:400 / 520; transform:translateX(-50%); max-width:96vw; }
.latar-lilin svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.latar-lilin.penuh .ll-figur{ animation:llKedip 7s steps(1,end) infinite; }
@keyframes llKedip{ 0%,38%{opacity:1} 39%{opacity:.45} 40%{opacity:1} 41%{opacity:.55} 42%,77%{opacity:1} 78%{opacity:.7} 79%{opacity:1} }

/* animasi bagian-bagian latar */
.ll-paket{ stroke-width:1.8; stroke-linecap:round; stroke-dasharray:9 100; stroke-dashoffset:109; animation:llPaket 2.6s linear infinite; }
@keyframes llPaket{ to{ stroke-dashoffset:0 } }
.ll-untai{ stroke-dasharray:14 100; stroke-dashoffset:114; animation:llPaket 4s linear infinite; }
.ll-denyut{ transform-box:fill-box; transform-origin:center; animation:llDenyut 2.6s ease-out infinite; }
@keyframes llDenyut{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(4); opacity:0 } }
.ll-mata{ transform-box:fill-box; transform-origin:center; animation:llMata 5.5s ease-in-out infinite; }
@keyframes llMata{ 0%,91%,100%{ transform:scaleY(1) } 94%{ transform:scaleY(.08) } 97%{ transform:scaleY(1) } }
.ll-sinar-mata{ animation:llSinar 2.8s ease-in-out infinite; }
@keyframes llSinar{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
.ll-halo{ transform-box:view-box; transform-origin:200px 150px; animation:llPutar 70s linear infinite; }
.ll-halo2{ transform-box:view-box; transform-origin:200px 150px; animation:llPutar 45s linear infinite reverse; }
@keyframes llPutar{ to{ transform:rotate(360deg) } }
.ll-pindai{ animation:llPindai 1.2s linear infinite; }
@keyframes llPindai{ to{ transform:translateY(4px) } }
.ll-cincin{ transform-box:fill-box; transform-origin:center; animation:llCincin 2.8s ease-out infinite; }
@keyframes llCincin{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(5); opacity:0 } }
.ll-api{ transform-box:view-box; transform-origin:200px 364px; animation:llApiBesar 1.7s ease-in-out infinite; }
@keyframes llApiBesar{ 0%,100%{ transform:scale(1,1) rotate(-1.5deg) } 17%{ transform:scale(.93,1.12) rotate(2.5deg) translateX(.6px) } 36%{ transform:scale(1.07,.92) rotate(-3deg) } 54%{ transform:scale(.96,1.14) rotate(1deg) translateX(-.5px) } 73%{ transform:scale(1.04,.95) rotate(-2deg) } 88%{ transform:scale(.98,1.06) rotate(1.5deg) } }
.ll-api-dalam{ transform-box:fill-box; transform-origin:50% 100%; animation:llApiDalam 1.1s ease-in-out infinite; }
@keyframes llApiDalam{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(.9,1.12) } 70%{ transform:scale(1.06,.94) } }
.ll-halo-lilin{ transform-box:fill-box; transform-origin:center; animation:llHaloLilin 2.3s ease-in-out infinite; }
@keyframes llHaloLilin{ 0%,100%{ opacity:.85; transform:scale(1) } 20%{ opacity:1; transform:scale(1.06) } 45%{ opacity:.75; transform:scale(.97) } 70%{ opacity:.95; transform:scale(1.04) } }
.ll-asap{ stroke-dasharray:22 100; stroke-dashoffset:122; opacity:.35; animation:llAsap 3.4s linear infinite; }
@keyframes llAsap{ 0%{ stroke-dashoffset:122; opacity:0 } 20%{ opacity:.4 } 100%{ stroke-dashoffset:0; opacity:0 } }

/* ---------- 4b. Panel gelap transparan di belakang teks beranda ----------
   Supaya tulisan hero tetap jelas di atas latar wajah AI & kota.
   Pakai ::before + inset negatif, jadi posisi teks TIDAK bergeser. */
.hero-grid > div:first-child{ position:relative; isolation:isolate; }
.hero-grid > div:first-child::before{
  content:""; position:absolute; inset:-30px -34px; z-index:-1; pointer-events:none;
  border-radius:22px;
  /* sengaja TANPA backdrop-filter blur: blur di atas latar yang bergerak berat untuk HP */
  background:linear-gradient(135deg, rgba(13,11,9,.9), rgba(20,15,12,.82));
  border:1px solid rgba(243,234,219,.08);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,200,150,.06);
}
@media (max-width:760px){
  .hero-grid > div:first-child::before{ inset:-18px -12px; border-radius:16px; }
}

/* ---------- 5. Cahaya lilin di pojok + bara api (beranda) ---------- */
.latar-lilin-cahaya{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(38% 32% at 9% 2%, rgba(255,150,80,.13), transparent 72%);
  animation:llKerlip 4.6s ease-in-out infinite;
}
@keyframes llKerlip{ 0%,100%{ opacity:.65 } 22%{ opacity:1 } 30%{ opacity:.8 } 55%{ opacity:.95 } 78%{ opacity:.7 } }
.latar-bara{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.latar-bara i{
  position:absolute; bottom:-14px; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 45% 40%, #FFF4CC 0 18%, #FFB547 45%, #FF6A3D 80%);
  box-shadow:0 0 12px 3px rgba(255,120,60,.55), 0 0 26px 6px rgba(255,90,40,.22);
  animation:llBara 7s ease-out infinite;
}
@keyframes llBara{
  0%{ transform:translate(0,0) scale(1); opacity:0 }
  10%{ opacity:1 }
  45%{ transform:translate(calc(var(--dx) * -.6), calc(var(--naik) * .45)) scale(.9) }
  75%{ opacity:.6 }
  100%{ transform:translate(var(--dx), var(--naik)) scale(.35); opacity:0 }
}

/* Hormati pengaturan "kurangi gerakan" + hemat baterai */
@media (prefers-reduced-motion: reduce){
  .brand::after, .latar-lilin *, .latar-lilin-cahaya, .latar-bara i{ animation:none !important; }
  .latar-bara{ display:none; }
}