/* =========================
   BITNEWS — Clean CSS (Purple Theme)
   No redundancy, 1 root, 1 header/footer system
   ========================= */

:root{
  --bg:#ffffff;
  --soft:#f7f8ff;
  --card:#ffffff;

  --text:#0b1220;
  --muted:#5b6476;
  --line: rgba(15,23,42,.10);

  --primary:#6d28d9;  /* purple */
  --primary2:#4f46e5; /* indigo */
  --accent:#22c55e;

  --shadow: 0 18px 42px rgba(15,23,42,.14);
  --shadow2: 0 10px 24px rgba(15,23,42,.10);
}

/* RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 18px}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn-primary{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border: 0;
  color: #fff;
}
.btn-outline{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color:#fff;
}
.btn-outline:hover{background: rgba(255,255,255,.18)}
.btn-ghost{
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.88);
}
.btn-ghost:hover{border-color: rgba(255,255,255,.22); color:#fff; box-shadow:none}
.w100{width:100%}

/* HEADER (gradient + readable text) */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 38px rgba(79,70,229,.18);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{
  width:40px; height:40px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}
.brand-logo svg{width:40px; height:40px; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-weight:900; letter-spacing:.2px; color:#fff}
.brand-text span{font-size:12px; color: rgba(255,255,255,.78)}

.nav{display:flex; gap:18px}
.nav a{color: rgba(255,255,255,.85); font-weight:700}
.nav a:hover{color:#fff; text-decoration: underline}

.actions{display:flex; gap:10px; align-items:center}

/* HERO */
.hero{
  position:relative;
  padding: 56px 0 36px;
  background:
    radial-gradient(180px 180px at 12% 35%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(240px 240px at 78% 18%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(340px 340px at 92% 68%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(90deg, var(--primary), var(--primary2));
  color:#fff;
  overflow:hidden;
}
.hero-grid{
  display:grid; gap:22px;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
}
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.92);
  font-weight:900;
  font-size:13px;
}
h1{
  margin: 14px 0 10px;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -.4px;
  color:#fff;
}
.lead{
  margin: 0 0 16px;
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  font-size: 16px;
}

/* SEARCH (fix: placeholder terlihat) */
.search{
  display:flex; gap:10px; align-items:center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}
.search-icon{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(109,40,217,.10);
  border: 1px solid rgba(109,40,217,.18);
  color: #3b1a78;
  font-weight: 900;
}
.search input{
  flex:1;
  border:0; outline:0;
  font-size:15px;
  color: var(--text);
  background: transparent;
}
.search input::placeholder{color: rgba(15,23,42,.55)}

.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}

/* HERO STATS */
.stats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 12px;
}
.stat-num{font-size:18px; font-weight:900; color:#fff}
.stat-label{font-size:13px; color: rgba(255,255,255,.80); margin-top:4px}

.hero-right{display:flex; justify-content:center}
.hero-art{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 18px 42px rgba(0,0,0,.20);
}
.hero-img{border-radius:18px; display:block; max-width:100%; height:auto}

/* OPTIONAL: WAVE separator */
.wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height: 90px;
}
.wave svg{width:100%; height:100%; display:block}

/* TRUST */
.trust{
  background:#fff;
  padding: 18px 0 12px;
}
.trust-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.trust-item{
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  display:flex; gap:12px; align-items:flex-start;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.ti-icon{
  width:40px; height:40px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
}
.ti-title{font-weight:900; color: var(--text)}
.ti-desc{color: var(--muted); font-size:13px; margin-top:4px}

/* SECTIONS */
.section{padding: 46px 0; background:#fff}
.section.soft{background: var(--soft)}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
h2{margin:0; font-size:30px; letter-spacing:-.2px}
.muted{color: var(--muted); margin:6px 0 0; line-height:1.6}

.grid{display:grid; gap:14px}

/* Cards (kategori/steps/profiles/reviews) */
.card, .step-card, .profile-card, .review-card{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover, .step-card:hover, .profile-card:hover, .review-card:hover{
  transform: translateY(-2px);
  border-color: rgba(79,70,229,.22);
  box-shadow: 0 22px 46px rgba(15,23,42,.12);
}

/* CATEGORY */
.cards{grid-template-columns: repeat(3, 1fr)}
.card-icon{
  width:44px; height:44px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(109,40,217,.10);
  border: 1px solid rgba(109,40,217,.16);
  margin-bottom:10px;
  font-size:18px;
}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted); line-height:1.6}
.card-foot{margin-top:12px; font-weight:900; color:#2f1a72}
.card-link{display:block}

/* STEPS */
.steps{grid-template-columns: repeat(4, 1fr)}
.step-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.step-badge{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(109,40,217,.12);
  border: 1px solid rgba(109,40,217,.18);
  font-weight:900;
  color:#2f1a72;
}
.step-icon{
  width:42px; height:42px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(79,70,229,.12);
  border: 1px solid rgba(79,70,229,.18);
  font-size:18px;
}
.step-card h3{margin:0 0 6px}
.step-card p{margin:0; color:var(--muted); line-height:1.6}

/* PROFILES */
.profiles{grid-template-columns: repeat(4, 1fr)}
.pc-top{display:flex; gap:12px; align-items:flex-start}
.avatar{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(109,40,217,.12);
  border: 1px solid rgba(109,40,217,.18);
  font-weight:900;
  color:#2f1a72;
}
.pc-name{font-weight:900}
.pc-sub{color:var(--muted); font-size:13px; margin-top:4px}
.pc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  color: var(--muted);
  font-weight:700;
}
.pc-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:12px 0 10px;
  color: var(--muted);
  font-weight:700;
}
.price{color: var(--text); font-weight:900}

/* REVIEWS */
.reviews{grid-template-columns: repeat(3, 1fr)}
.rc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.stars{color:#fbbf24; letter-spacing:1px; font-weight:900}
.rc-tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(109,40,217,.10);
  border: 1px solid rgba(109,40,217,.16);
  color:#2f1a72;
  font-weight:900;
}
.review-card p{margin:0; color:var(--muted); line-height:1.65}
.rc-foot{margin-top:12px; font-weight:900; color: var(--text)}

/* FOOTER (gradient + readable text) */
.footer{
  padding: 34px 0;
  background:
    radial-gradient(260px 260px at 12% 20%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(340px 340px at 90% 65%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(90deg, var(--primary), var(--primary2));
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.90);
}
.footer-grid{
  display:grid; gap:14px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.footer h4{margin:0 0 10px; color:#fff}
.footer a{display:block; color: rgba(255,255,255,.82); margin:7px 0; font-weight:700}
.footer a:hover{color:#fff}
.footer p{color: rgba(255,255,255,.92); line-height:1.7}
.footer .muted{color: rgba(255,255,255,.85)}
.foot-brand{margin-bottom:10px}

.copyright{
  margin-top:18px; padding-top:14px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.75);
  font-size:14px;
}

/* Floating chat */
.chat-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 20px 42px rgba(79,70,229,.30);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.chat-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 50px rgba(79,70,229,.34);
}
.chat-icon{
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.chat-text{font-size:14px}

/* RESPONSIVE */
@media (max-width: 1100px){
  .profiles{grid-template-columns: repeat(2, 1fr)}
  .steps{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr}
  .trust-grid{grid-template-columns: repeat(2, 1fr)}
  .cards{grid-template-columns: 1fr}
  .reviews{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr}
  .nav{display:none}
  h1{font-size:34px}
}
@media (max-width: 520px){
  .stats{grid-template-columns: 1fr}
  .trust-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
}