:root{
  --orange:#ff7a18;
  --dark:#0f172a;
  --gray:#64748b;
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,sans-serif;}
body{color:var(--dark);background:#fff;}

/* ================= HEADER ================= */
header{
  position:sticky;
  top:0;
  z-index:1000;
  height:56px;
  background:#fff;
  border-bottom:1px solid #f1f5f9;
}
.header-inner{
  max-width:1280px;
  height:100%;
  margin:auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{font-size:26px;font-weight:800;}
.logo span{color:var(--orange);}
nav{display:flex;gap:32px;font-size:14px;font-weight:500;}
.actions{display:flex;gap:18px;align-items:center;font-size:14px;}
.start{
  background:#0f172a;color:#fff;height:32px;
  padding:0 14px;display:flex;align-items:center;
  border-radius:8px;font-weight:600;
  cursor:pointer;
}

/* ===== HAMBURGER ===== */
.hamburger{display:none;width:24px;height:18px;position:relative;cursor:pointer;}
.hamburger span{
  position:absolute;width:100%;height:2px;background:#0f172a;
  left:0;transition:.3s;
}
.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:8px;}
.hamburger span:nth-child(3){top:16px;}
.hamburger.active span:nth-child(1){transform:rotate(45deg);top:8px;}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg);top:8px;}

/* ===== MOBILE MENU ===== */
.mobile-menu{
  position:fixed;top:56px;left:0;width:100%;
  background:#fff;max-height:0;overflow:hidden;
  transition:max-height .35s ease;border-bottom:1px solid #e5e7eb;
  z-index:9999999;
}
.mobile-menu.open{max-height:420px;}
.mobile-menu a{
  display:block;padding:14px 24px;
  border-top:1px solid #f1f5f9;font-size:14px;
}

/* ================= HERO ================= */
.hero-bg{
  background:
    radial-gradient(circle at top left,#fff1e6 0%,transparent 45%),
    radial-gradient(circle at top right,#eef6ff 0%,transparent 45%),
    #ffffff;
}
.hero{
  max-width:900px;margin:auto;
  padding:80px 24px;text-align:center;
}
.hero h1{
  font-size:52px;font-weight:800;line-height:1.15;margin-bottom:22px;
}
.hero p{
  max-width:720px;margin:0 auto 34px;
  font-size:18px;color:#475569;line-height:1.7;
}
.cta{
  background:var(--orange);color:#fff;
  padding:18px 34px;border-radius:12px;
  font-weight:700;display:inline-block;
  box-shadow:0 18px 35px rgba(255,122,24,.35);
}

/* ================= FEATURES (PIXEL MATCH) ================= */
.features{
  max-width:1280px;
  margin:0 auto;
  padding:140px 24px 160px;   /* 🔥 BIG vertical space */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:80px;                   /* 🔥 wider spacing */
  text-align:center;
}

/* Individual item */
.feature{
  max-width:320px;
  margin:auto;
}

/* Icon circle */
.icon{
  width:120px;               /* 🔥 MUCH bigger */
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 36px;
  font-size:28px;
  font-weight:700;
}

/* Colors */
.icon.ai{
  background:#fff3e8;
  color:#ff8a2b;
}

.icon.signal{
  background:#eef5ff;
  color:#3b82f6;
}

.icon.risk{
  background:#effaf3;
  color:#22c55e;
}

/* Title */
.feature h3{
  font-size:22px;            /* 🔥 bigger title */
  font-weight:700;
  margin-bottom:16px;
}

/* Text */
.feature p{
  font-size:16px;
  line-height:1.75;
  color:#64748b;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .features{
    grid-template-columns:1fr;
    padding:100px 24px;
    gap:72px;
  }
}

/* ================= BOTTOM SECTION ================= */
.bottom-section{
  background:#ffffff;              /* PURE WHITE */
  border-top:1px solid #f1f5f9;    /* subtle divider like image */
}

.bottom-inner{
  max-width:1200px;
  margin:auto;
  padding:48px 24px 72px;
}

/* ===== Risk ===== */
.risk-area{
  max-width:100%;
}

.risk-area h4{
  font-size:15px;
  font-weight:600;
  margin-bottom:10px;
}

.risk-area p{
  font-size:14px;
  line-height:1.7;
  color:#64748b;
}

/* ===== Divider ===== */
.divider{
  margin:40px 0;
  height:1px;
  background:#e5e7eb;
}

/* ===== Footer ===== */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:48px;
  font-size:14px;
  cursor:pointer;
}

.footer-grid h4{
  font-size:14px;
  font-weight:600;
  margin-bottom:14px;
}

.footer-grid a{
  display:block;
  margin-bottom:10px;
  color:#64748b;
}

.brand{
  font-size:20px;
  font-weight:800;
  margin:8px 0 4px;
}
.brand span{color:#ff7a18;}

.muted{
  font-size:13px;
  color:#64748b;
}

/* ===== Responsive ===== */
@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:480px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}

/* ================= HEADER RESPONSIVE FIX ================= */
@media (max-width: 900px){

  nav,
  .actions{
    display:none;
  }

  .hamburger{
    display:block;
  }

}

/* ===== Mobile Menu Buttons ===== */
.mobile-actions{
  padding:16px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mobile-login{
  text-align:center;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-weight:600;
}

.mobile-start{
  text-align:center;
  padding:12px;
  border-radius:10px;
  font-weight:700;
  background:#0f172a;
  color:#fff;
}

/* ===== PAGE SECTIONS ===== */
.page-section{
  display:none;
  background: linear-gradient(180deg, #faf7f4 0%, #f3f6fb 100%);
}

.page-section.active{
  display:block;
}

/* ===== NAV ACTIVE STATE ===== */
nav a{
  position:relative;
  cursor:pointer;
  color:#64748b;
}

nav a.active{
  color:#0f172a;
  font-weight:600;
}

nav a.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-18px;
  width:100%;
  height:2px;
  background:#ff7a18;
  border-radius:2px;
}

/* ===== PAGE TRANSITION ===== */
.page-section{
  display:none;
  opacity:0;
  transform:translateY(20px);
}

.page-section.active{
  display:block;
  animation:pageIn .45s ease forwards;
}

@keyframes pageIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ================= PAGE TRANSITIONS ================= */
.page-section{
  display:none;
  opacity:0;
}

/* --- Animations --- */
.page-fade{
  animation:fadeIn .45s ease forwards;
}

.page-up{
  animation:slideUp .45s ease forwards;
}

.page-left{
  animation:slideLeft .45s ease forwards;
}

.page-right{
  animation:slideRight .45s ease forwards;
}

.page-zoom{
  animation:zoomIn .45s ease forwards;
}

/* --- Keyframes --- */
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes slideUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}

@keyframes slideLeft{
  from{opacity:0;transform:translateX(-30px);}
  to{opacity:1;transform:none;}
}

@keyframes slideRight{
  from{opacity:0;transform:translateX(30px);}
  to{opacity:1;transform:none;}
}

@keyframes zoomIn{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:scale(1);}
}

/* ================= STRATEGI ================= */
.strategi-bg{
  background:
    radial-gradient(circle at top left,#fff3ec 0%,transparent 55%),
    radial-gradient(circle at top right,#eef5ff 0%,transparent 55%),
    #f8fafc;
}

/* Container */
.strategi-wrap{
  max-width:100%;
  margin:auto;
  padding:160px 24px 180px;
  text-align:center;
}

/* Title */
.strategi-wrap h2{
  font-size:42px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:14px;
}

/* Subtitle */
.strategi-wrap .subtitle{
  font-size:16px;
  color:#64748b;
  max-width:640px;
  margin:0 auto 84px;
}

/* Grid */
.strategi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}

/* Card */
.strategi-card{
  background:#ffffff;
  border-radius:28px;
  padding:32px 30px 26px;
  text-align:left;
  box-shadow:0 40px 80px rgba(15,23,42,.08);
}

/* Card text */
.strategi-card h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:6px;
}

.strategi-card p{
  font-size:14px;
  color:#64748b;
  margin-bottom:22px;
}

/* SVG */
.strategi-card svg{
  width:100%;
  height:160px;
}

.strategi-card path{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
}

/* Colors */
.guardian h3{color:#3b82f6;}
.guardian path{stroke:#3b82f6;}

.odyssey h3{color:#f97316;}
.odyssey path{stroke:#f97316;}

.titan h3{color:#ef4444;}
.titan path{stroke:#ef4444;}

/* Responsive */
@media(max-width:900px){
  .strategi-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}


/* ===== CARD FOCUS BOUNCE ===== */
.strategi-card{
  transition:
    transform .35s ease,
    box-shadow .35s ease;
  will-change: transform;
  cursor: pointer;
}

/* Focus / hover state */
.strategi-card:hover,
.strategi-card:focus-within{
  animation:cardBounce .45s ease;
  transform:translateY(-10px);
  box-shadow:0 55px 110px rgba(15,23,42,.14);
  z-index:2;
}

/* Bounce animation */
@keyframes cardBounce{
  0%   {transform:translateY(0)}
  40%  {transform:translateY(-14px)}
  70%  {transform:translateY(-8px)}
  100% {transform:translateY(-10px)}
}

/* ================= PERFORMA ================= */
#performa {
  padding: 96px 24px 120px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* HEADER */
.section-title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 14px;
  color: #6b7280;
  max-width: 520px;
  margin: 0 auto 56px;
  line-height: 1.6;
}

/* STATS */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.stat-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.stat-card span {
  font-size: 13px;
  color: #6b7280;
}

.stat-card h2 {
  margin: 10px 0 0;
  font-size: 30px;
  font-weight: 900;
}

.positive { color: #16a34a; }

/* CHART CARD */
.chart-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 28px 24px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
  text-align: left;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

canvas {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .section-title { font-size: 26px; }
  .chart-card { padding: 20px; }
}


/* ================= HARGA SECTION (ISOLATED) ================= */

.harga-wrap{
  padding:120px 0 140px;
}

.harga-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:64px;
}

.harga-card{
  background:#ffffff;
  border-radius:28px;
  padding:36px 32px;
  box-shadow:0 20px 50px rgba(15,23,42,.08);
  text-align:left;
}

.harga-card h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:6px;
}

.harga-desc{
  font-size:14px;
  color:#64748b;
  margin-bottom:28px;
}

.harga-price{
  font-size:42px;
  font-weight:800;
  margin-bottom:28px;
}

.harga-price span{
  font-size:14px;
  color:#64748b;
  font-weight:500;
}

.harga-list{
  list-style:none;
  padding:0;
  margin:0 0 36px;
}

.harga-list li{
  margin-bottom:14px;
}

.harga-btn{
  width:100%;
  height:44px;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  font-weight:700;
  border:none;
  cursor:pointer;
}

/* ===== POPULAR CARD ===== */

.harga-popular{
  background:linear-gradient(180deg,#0f172a,#020617);
  color:#ffffff;
  border-radius:32px;
  padding:42px 34px;
  box-shadow:0 40px 90px rgba(15,23,42,.35);
  position:relative;
  transform:translateY(-14px);
}

.harga-popular h3{
  color:#ff7a18;
}

.harga-popular .harga-desc,
.harga-popular .harga-price span{
  color:#cbd5f5;
}

.harga-badge{
  position:absolute;
  top:-14px;
  right:28px;
  background:#ff7a18;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:6px 12px;
  border-radius:999px;
}

.harga-btn-primary{
  background:#ff7a18;
  height:46px;
  border-radius:14px;
  font-weight:800;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .harga-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .harga-popular{
    transform:none;
  }
}

/* ================= TENTANG SECTION (ISOLATED) ================= */

#tentang{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.tentang-wrap{
  padding:120px 0 140px;
  text-align:center;
  margin-top:-20px;
}

.tentang-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:12px;
}

.tentang-subtitle{
  max-width:720px;
  margin:0 auto 72px;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

.tentang-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.tentang-card{
  background:#ffffff;
  border-radius:28px;
  padding:36px 30px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.tentang-card h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:14px;
}

.tentang-card p{
  font-size:14px;
  color:#64748b;
  line-height:1.6;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .tentang-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* ================= BLOG SECTION (ISOLATED) ================= */

#blog{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.blog-wrap{
  padding:120px 0 140px;
  text-align:center;
  margin-top:-20px;
}

.blog-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:12px;
}

.blog-subtitle{
  max-width:720px;
  margin:0 auto 72px;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.blog-card{
  background:#ffffff;
  border-radius:28px;
  padding:26px;
  text-align:left;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.blog-thumb{
  height:160px;
  border-radius:20px;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:700;
  color:#cbd5e1;
  margin-bottom:22px;
}

.blog-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
}

.blog-card p{
  font-size:14px;
  color:#64748b;
  line-height:1.6;
  margin-bottom:18px;
}

.blog-link{
  font-size:14px;
  font-weight:600;
  color:#ff7a18;
  text-decoration:none;
}

.blog-link:hover{
  text-decoration:underline;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .blog-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* ================= KARIR SECTION (ISOLATED) ================= */

#karir{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.karir-wrap{
  padding:120px 0 140px;
  text-align:center;
  margin-top:-20px;
}

.karir-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:12px;
}

.karir-subtitle{
  max-width:620px;
  margin:0 auto 70px;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

.karir-card{
  max-width:760px;
  margin:0 auto;
  background:#ffffff;
  border-radius:26px;
  padding:26px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  margin-top:20px;
}

.karir-info h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

.karir-info span{
  font-size:14px;
  color:#64748b;
}

.karir-btn{
  background:#1f2937;
  color:#ffffff;
  border:none;
  padding:10px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.karir-btn:hover{
  background:#111827;
}

/* ===== RESPONSIVE ===== */
@media(max-width:700px){
  .karir-card{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
}

/* ================= ACARA SECTION (ISOLATED) ================= */

#acara{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.acara-wrap{
  padding:120px 0 160px;
  text-align:center;
  margin-top:-20px;
}

.acara-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:12px;
}

.acara-subtitle{
  max-width:620px;
  margin:0 auto 80px;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

.acara-card{
  max-width:420px;
  margin:0 auto;
  background:#ffffff;
  border-radius:26px;
  padding:28px 28px 30px;
  text-align:left;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.acara-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:#ff7a18;
  margin-bottom:10px;
}

.acara-card h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
}

.acara-desc{
  font-size:14px;
  color:#64748b;
  line-height:1.6;
  margin-bottom:18px;
}

.acara-date{
  font-size:13px;
  font-weight:600;
  margin-bottom:18px;
  color:#0f172a;
}

.acara-btn{
  width:100%;
  background:#ff7a18;
  color:#ffffff;
  border:none;
  padding:12px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.acara-btn:hover{
  background:#e86a0f;
}

/* ===== RESPONSIVE ===== */
@media(max-width:700px){
  .acara-wrap{
    padding:100px 0 130px;
  }
}


/* ================= KONSULTASI SECTION (ISOLATED) ================= */

#konsultasi{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.konsul-wrap{
  padding:120px 0 160px;
  text-align:center;
  margin-top:-20px;
}

.konsul-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:10px;
}

.konsul-subtitle{
  max-width:620px;
  margin:0 auto 64px;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

.konsul-card{
  max-width:480px;
  margin:0 auto;
  background:#ffffff;
  border-radius:28px;
  padding:34px 34px 30px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  text-align:left;
}

.konsul-group{
  margin-bottom:18px;
}

.konsul-group label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
  color:#0f172a;
}

.konsul-group input,
.konsul-group textarea{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:12px 14px;
  font-size:14px;
  outline:none;
  resize:none;
}

.konsul-group textarea{
  height:110px;
}

.konsul-group input:focus,
.konsul-group textarea:focus{
  border-color:#ff7a18;
}

.konsul-btn{
  margin-top:14px;
  width:100%;
  background:#ff7a18;
  color:#ffffff;
  border:none;
  padding:14px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.konsul-btn:hover{
  background:#e86a0f;
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .konsul-wrap{
    padding:100px 0 130px;
  }

  .konsul-card{
    padding:28px 26px;
  }
}

/* ================= FAQ SECTION (ISOLATED) ================= */

#faq{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.faq-wrap{
  padding:120px 0 160px;
  text-align:center;
  margin-top:-20px;
}

.faq-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:10px;
}

.faq-subtitle{
  max-width:640px;
  margin:0 auto 64px;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

.faq-list{
  max-width:720px;
  margin:0 auto;
  text-align:left;
}

.faq-item{
  background:#ffffff;
  border-radius:18px;
  padding:22px 24px;
  margin-bottom:18px;
  box-shadow:0 14px 36px rgba(15,23,42,.08);
  cursor:pointer;
}

.faq-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:15px;
  font-weight:700;
  color:#0f172a;
}

.faq-icon{
  font-size:18px;
  font-weight:700;
  transition:transform .25s ease;
}

.faq-body{
  margin-top:14px;
  font-size:14px;
  line-height:1.65;
  color:#64748b;
  display:none;
}

.faq-item.active .faq-body{
  display:block;
}

.faq-item.active .faq-icon{
  transform:rotate(180deg);
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .faq-wrap{
    padding:100px 0 130px;
  }

  .faq-title{
    font-size:28px;
  }
}


/* ================= KETENTUAN LAYANAN (ISOLATED) ================= */

#ketentuan{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.terms-wrap{
  padding:120px 0 160px;
  margin-top:-20px;
}

.terms-box{
  max-width:720px;
  margin:0 auto;
}

.terms-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:6px;
}

.terms-date{
  font-size:13px;
  color:#64748b;
  margin-bottom:36px;
}

.terms-content{
  font-size:14px;
  line-height:1.75;
  color:#475569;
}

.terms-content h4{
  font-size:15px;
  font-weight:700;
  margin:28px 0 10px;
  color:#0f172a;
}

.terms-content p{
  margin-bottom:14px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .terms-wrap{
    padding:100px 0 130px;
  }

  .terms-title{
    font-size:28px;
  }
}


/* ================= KEBIJAKAN PRIVASI (ISOLATED) ================= */

#privasi{
  background:linear-gradient(180deg,#faf7f4 0%, #f5f7fb 100%);
}

.privacy-wrap{
  padding:120px 0 160px;
  margin-top:-20px;
}

.privacy-box{
  max-width:720px;
  margin:0 auto;
}

.privacy-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:6px;
}

.privacy-date{
  font-size:13px;
  color:#64748b;
  margin-bottom:36px;
}

.privacy-content{
  font-size:14px;
  line-height:1.75;
  color:#475569;
}

.privacy-content h4{
  font-size:15px;
  font-weight:700;
  margin:28px 0 10px;
  color:#0f172a;
}

.privacy-content p{
  margin-bottom:14px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .privacy-wrap{
    padding:100px 0 130px;
  }

  .privacy-title{
    font-size:28px;
  }
}

 /* ============================ LIVE TRADING ======================== */

#livetrade{
  background:linear-gradient(180deg,#faf7f4,#f5f7fb);
}

.lt-wrap{
  padding:120px 0 150px;
  margin-top:-20px;
}

.lt-header{
  text-align:center;
  max-width:640px;
  margin:0 auto 60px;
}

.lt-header h2{
  font-size:34px;
  font-weight:800;
}

.lt-header p{
  color:#64748b;
  font-size:14px;
}

.lt-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
}

.lt-card{
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 20px 40px rgba(0,0,0,.05);
}

.lt-chart h4,
.lt-table h4{
  font-size:16px;
  margin-bottom:12px;
}

.lt-side{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.lt-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.lt-badge{
  background:#ffedd5;
  color:#ea580c;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
}

.lt-muted{
  font-size:13px;
  color:#64748b;
}

.lt-status{
  font-size:13px;
  font-weight:600;
}

.lt-status span{
  color:#16a34a;
  margin-left:6px;
}

.lt-table{
  margin-top:40px;
}

.lt-table table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.lt-table th{
  text-align:left;
  color:#64748b;
  font-weight:600;
  padding:10px 0;
}

.lt-table td{
  padding:12px 0;
  border-top:1px solid #f1f5f9;
}

.lt-buy{ color:#2563eb; font-weight:700; }
.lt-sell{ color:#dc2626; font-weight:700; }
.lt-pl-pos{ color:#16a34a; font-weight:700; }
.lt-pl-neg{ color:#dc2626; font-weight:700; }

.lt-open{
  background:#dbeafe;
  color:#2563eb;
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
}

.lt-closed{
  background:#e5e7eb;
  color:#334155;
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .lt-grid{ grid-template-columns:1fr; }
}


/* ===== LIVE CHART FULL WIDTH FIX ===== */
#ltChart{
  width:100%;
  height:400px;   /* adjust if needed */
  display:block;
}


/* ===== OVERLAY ===== */
.bep-auth-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.bep-auth-overlay.active{
  display:flex;
}

/* ===== CARD ===== */
.bep-auth-card{
  width:420px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.2);
  position:relative;
  animation:fadeUp .25s ease;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:none}
}

/* ===== CLOSE ===== */
.bep-auth-close{
  position:absolute;
  right:16px;
  top:14px;
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
}

/* ===== TABS ===== */
.bep-auth-tabs{
  display:flex;
  border-bottom:1px solid #e5e7eb;
}

.bep-auth-tabs button{
  flex:1;
  padding:16px 0;
  font-weight:600;
  background:none;
  border:none;
  cursor:pointer;
}

.bep-auth-tabs button.active{
  color:#f97316;
  border-bottom:3px solid #f97316;
}

/* ===== BODY ===== */
.bep-auth-body{
  padding:32px;
  display:none;
}

.bep-auth-body.active{
  display:block;
}

.bep-auth-body h2{
  text-align:center;
  margin-bottom:24px;
}

/* ===== INPUT ===== */
.bep-auth-body label{
  font-size:14px;
  display:block;
  margin-bottom:6px;
}

.bep-auth-body input{
  width:100%;
  padding:14px;
  border-radius:10px;
  border:1px solid #d1d5db;
  margin-bottom:18px;
  background:#eff6ff;
}

/* ===== BUTTON ===== */
.bep-auth-btn {
  width: 100%;
  padding: 16px;
  background: #f97316;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease; /* smooth animation */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* subtle shadow */
}

/* Hover effect */
.bep-auth-btn:hover {
  background: #fb7a29; /* slightly lighter on hover */
}

/* Click / active effect */
.bep-auth-btn:active {
  transform: scale(0.96); /* shrink slightly */
  box-shadow: 0 2px 3px rgba(0,0,0,0.2); /* smaller shadow to simulate press */
}



.bep-pass-wrap{
  position: relative;
}

.bep-pass-wrap input{
  width: 100%;
  height: 46px;          /* match your input height */
  padding-right: 46px;
}

.bep-pass-toggle{
  position: absolute;
  right: 12px;
  top: 40%;
  height: 46px;         /* SAME as input height */
  display: flex;
  align-items: center; /* TRUE vertical center */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transform: translateY(-50%);
}


.bep-pass-toggle i{
  font-size: 18px;
  color: #64748b;
}

.bep-pass-toggle .fa-eye-slash{
  display: none;
}

.bep-pass-toggle.active .fa-eye{
  display: none;
}

.bep-pass-toggle.active .fa-eye-slash{
  display: inline;
}


.bep-wa-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;

  background: #000;
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  z-index: 9999;
  transition: transform .2s ease, box-shadow .2s ease;
}

.bep-wa-float i{
  font-size: 22px;
}

.bep-wa-float span{
  line-height: 1.2;
}

.bep-wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

#openLogin:hover{
  text-decoration: none;
  opacity: .85;
  color:#FF6600;
}

#openLogin{
  text-decoration: none;
  color:#000000;
}

.bep-note {
  display: block;
  margin-top: 0px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #888;
}


/* Forgot password link */
.bep-forgot-link {
  margin-top: 12px;
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  font-size: 14px;
}

.bep-forgot-link:hover {
  text-decoration: underline;
}

/* Modal overlay */
.bep-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal box */
.bep-modal {
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.bep-modal h3 {
  margin-bottom: 10px;
}

.bep-modal p {
  font-size: 14px;
  margin-bottom: 16px;
  color: #555;
}

.bep-modal input {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
}

/* Modal actions */
.bep-modal-actions {
  display: flex;
  gap: 10px;
}

.bep-modal-close {
  background: #e5e7eb;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.bep-forgot-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;            /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.bep-forgot-modal.active {
  display: flex;            /* SHOW MODAL */
}

/* Label */
.bep-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

/* Input wrapper (optional, future-proof for icons) */
.bep-input-wrap {
  position: relative;
  margin-bottom: 18px;
}

/* Input */
.bep-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  transition: all 0.2s ease;
  outline: none;
}

/* Hover */
.bep-input:hover {
  border-color: #9ca3af;
}

/* Focus */
.bep-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Placeholder */
.bep-input::placeholder {
  color: #9ca3af;
  font-size: 14px;
}


/* FULL PAGE */
.chat-ai{
  width:100%;
  height:calc(100vh - 70px); /* adjust header+footer height */
  padding:20px;
  display:flex;
}

/* CARD */
.chat-card{
  flex:1;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:20px;
  padding:24px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}

/* HEADER */
.chat-card h2{
  text-align:center;
  font-size:24px;
  font-weight:700;
}

.subtitle{
  text-align:center;
  color:#64748b;
  margin-bottom:12px;
}

/* CHAT AREA */
.chat-box{
  flex:1;
  background:#f8fafc;
  border-radius:14px;
  padding:16px;
  overflow-y:auto;
  margin-bottom:12px;
}

/* MESSAGE */
.chat-message{
  max-width:75%;
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:10px;
  font-size:14px;
  line-height:1.4;
}

.chat-user{
  color:#1e3a8a;
  margin-left:auto;
  border-bottom-right-radius:4px;
  text-align:right;
}

.chat-ai-msg{
  color: #0f172a;
  border-bottom-left-radius: 4px;
  text-align: left;
  max-width: 100%;

  white-space: pre-line;  
  word-wrap: break-word;  
  line-height: 1.6;      
}

/* IMAGE MESSAGE */
.chat-image{
  max-width:200px;
  border-radius:12px;
  margin-top:6px;
  display:block;
}

/* TYPING */
.typing{
  display:flex;
  gap:4px;
}
.typing span{
  width:6px;
  height:6px;
  background:#64748b;
  border-radius:50%;
  animation:blink 1.4s infinite both;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{
  0%,80%,100%{opacity:.3}
  40%{opacity:1}
}

/* INPUT BAR */
.chat-input{
  display:flex;
  align-items:flex-end;
  gap:8px;
  background:#f1f5f9;
  border-radius:16px;
  padding:10px;
}

/* LEFT ICONS */
.chat-actions-left{
  display:flex;
  gap:6px;
}

.icon-btn{
  background:#e2e8f0;
  border:none;
  width:38px;
  height:38px;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.icon-btn:hover{background:#c7d2fe}

/* TEXTAREA */
.chat-input textarea{
  flex:1;
  border:none;
  resize:none;
  background:transparent;
  padding:10px;
  font-size:15px;
  outline:none;
  min-height:40px;
  max-height:120px;
}

/* SEND */
.send-btn{
  background:#ff7a18;
  border:none;
  width:44px;
  height:44px;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  transition:.2s;
}

.send-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(255,122,24,.45);
}

.send-btn:disabled{
  background:#cbd5e1;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* PREVIEW */
.preview-bar{
  display:flex;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.preview-img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e2e8f0;
}

/* MOBILE */
@media(max-width:768px){
  .chat-ai{
    height:calc(100vh - 110px);
    padding:12px;
	max-width:100%;
  }

  .chat-card{
    padding:16px;
	max-width:100%;
  }

  .chat-message{
    max-width:100%;
  }
}


.totp-digit {
	width: 48px !important;
	height: 48px !important;

	padding: 0 !important;              /* remove bootstrap padding */
	margin: 0 4px !important;

	font-size: 26px !important;
	font-weight: bold;
	text-align: center;

	border: 2px solid #ccc !important;
	border-radius: 8px !important;

	line-height: 48px !important;       /* center text vertically */
}


.totp-digit:focus {
	border-color: #007bff;
	outline: none;
	box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

.loader-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}

.loader-dots div {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff6600;
  animation: bounce 0.6s infinite alternate;
}

.loader-dots div:nth-child(2) { animation-delay: 0.1s; background:#ff8800; }
.loader-dots div:nth-child(3) { animation-delay: 0.2s; background:#ff3399; }
.loader-dots div:nth-child(4) { animation-delay: 0.3s; background:#cc00ff; }
.loader-dots div:nth-child(5) { animation-delay: 0.4s; background:#9900ff; }

@keyframes bounce {
  to {
	transform: translateY(-10px);
	opacity: 0.7;
  }
}


.bep-swal-popup {
  box-shadow: none !important;
}

.bep-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo style */
.bep-loading .logo {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  font-family: inherit;
}

.bep-loading .logo .bep {
  color: #1D2951; 
}

.bep-loading .logo span:last-child {
  color: #f97316;
}

/* Pulse animation */
.logo.pulse {
  animation: pulseLogo 1.4s ease-in-out infinite;
}

@keyframes pulseLogo {
  0%   { transform: scale(0.95); opacity: 0.6; }
  50%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.6; }
}

a {
  text-decoration: none;
}


.cv-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Modal Box */
.cv-modal-box {
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.cv-modal-box h3 {
  margin-bottom: 10px;
  color: #222;
}

.cv-modal-box p {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

/* Buttons */
.cv-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cv-modal-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

/* Cancel */
#cancelBtncv {
  background: #ddd;
  color: #333;
}

/* Send */
#sendBtncv {
  background: #25D366;
  color: white;
}

#sendBtncv:hover {
  background: #1ebe5c;
}

/* Background */
.form-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Box */
.form-modal-box {
  background: #fff;
  padding: 25px 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.form-modal-box h3 {
  margin-bottom: 5px;
}

.form-modal-box p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

/* Inputs */
#applyForm input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

#applyForm input:focus {
  border-color: #25D366;
  outline: none;
}

/* Buttons */
.form-actions {
  display: flex;
  gap: 10px;
}

.form-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

/* Cancel */
#cancelBtnevent {
  background: #ddd;
  color: #333;
}

/* Submit */
#submitBtnevent {
  background: #25D366;
  color: white;
}

#submitBtnevent:hover {
  background: #1ebe5c;
}

/* Modal Background */
.article-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 15000;
}

/* Modal Box */
.article-modal-box {
  background: #fff;
  padding: 25px 30px;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* Close Button */
.article-close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
}

.article-close:hover {
  color: red;
}

/* Content */
#articleTitle {
  margin-bottom: 15px;
}

#articleContent {
  line-height: 1.6;
  color: #444;
}

.blog-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;     
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-clamp: 2;            
}
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 350px;     
}

.price-label{
  position:absolute;
  right:12px;
  padding:6px 10px;
  background:#ff9f43;
  color:#fff;
  font-weight:700;
  font-size:13px;
  border-radius:6px;
  transform:translateY(-50%);
  pointer-events:none;
  box-shadow:0 6px 16px rgba(255,159,67,.35);
}

/* ------------------ TOP LOADING BAR ------------------ */
#topLoader {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #ff7a2d, #ffb47a, #ff7a2d);
  z-index: 999999;
  pointer-events: none;
  display: none;
}


.bep-swal-popup {
  background: white !important;
  border-radius: 16px !important;
  padding: 10px !important;

  /* Let popup fit content */
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;

  height: auto !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  box-shadow: 
    0 8px 24px rgba(0,0,0,0.15),
    0 2px 6px rgba(0,0,0,0.1);
}