/*
 * landing.css — Styles khusus halaman landing page
 * Requires: sipond.css
 */

/* ── HERO ── */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f6ff 0%, #eef0fe 60%, #e8eafd 100%);
  position: relative; overflow: hidden; padding-top: 80px;
}
.hero-blob1 {
  position: absolute; top: -120px; right: -80px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,110,245,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-blob2 {
  position: absolute; bottom: -100px; left: 30%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,191,.1) 0%, transparent 70%);
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 100px;
  background: white; border: 1px solid var(--sp-border);
  box-shadow: 0 4px 24px rgba(91,110,245,.13);
  font-size: 12px; font-weight: 700; color: var(--sp-blue);
  animation: fadeUp .6s ease both;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-blue); animation: pulse 2s infinite; flex-shrink: 0; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.hero-title { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; animation: fadeUp .6s .1s ease both; }
.hero-title .accent { color: var(--sp-blue); }
.hero-title .cursive { font-family: 'Amiri', serif; font-style: italic; color: var(--sp-purple); }
.hero-sub { font-size: 16px; color: var(--sp-text-mid); line-height: 1.75; animation: fadeUp .6s .2s ease both; }
.hero-actions { animation: fadeUp .6s .3s ease both; }
.hero-note { font-size: 12px; color: var(--sp-text-muted); animation: fadeUp .6s .35s ease both; }
.hero-stats { border-top: 1px solid var(--sp-border); animation: fadeUp .6s .4s ease both; }
.stat-num { font-size: 24px; font-weight: 800; color: var(--sp-text); letter-spacing: -1px; }
.stat-num em { color: var(--sp-blue); font-style: normal; }
.stat-label { font-size: 12px; color: var(--sp-text-muted); }

/* hero buttons */
.btn-hero-solid { font-size: 15px; font-weight: 700; background: var(--sp-blue); color: white !important; border: none; border-radius: 10px; padding: 13px 26px; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-hero-solid:hover { background: var(--sp-blue-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(91,110,245,.4); }
.btn-hero-outline { font-size: 15px; font-weight: 700; background: white; color: var(--sp-text) !important; border: 1.5px solid var(--sp-border); border-radius: 10px; padding: 13px 26px; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 24px rgba(91,110,245,.13); }
.btn-hero-outline:hover { border-color: var(--sp-blue); color: var(--sp-blue) !important; }

/* ── DASHBOARD MOCKUP ── */
.dashboard-card { background: white; border-radius: 16px; border: 1px solid var(--sp-border); box-shadow: 0 20px 60px rgba(91,110,245,.15); overflow: hidden; animation: fadeUp .6s .2s ease both; }
.dc-topbar { background: white; border-bottom: 1px solid var(--sp-border); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.dc-topbar-title { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.dc-topbar-sub { font-size: 11px; color: var(--sp-text-muted); }
.dc-body { padding: 14px; }
.dc-stat { border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.dc-stat-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dc-stat-icon svg { width: 20px; height: 20px; stroke: white; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.dc-stat-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .5px; }
.dc-stat-val { font-size: 22px; font-weight: 800; color: white; letter-spacing: -.5px; line-height: 1.1; }
.dc-stat-sub { font-size: 10px; color: rgba(255,255,255,.7); margin-top: 1px; }
.dc-stat.purple { background: var(--sp-bg-deep); }
.dc-stat.blue   { background: #3b8fe8; }
.dc-stat.teal   { background: #1a9e7a; }
.dc-stat.red    { background: #e05050; }
.float-badge { position: absolute; top: -16px; right: -16px; background: white; border: 1px solid var(--sp-border); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(91,110,245,.18); display: flex; align-items: center; gap: 8px; z-index: 2; }
.fb-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--sp-pale); display: flex; align-items: center; justify-content: center; }
.fb-text strong { display: block; font-weight: 700; color: var(--sp-text); font-size: 13px; }
.fb-text span { color: var(--sp-text-muted); font-size: 11px; }

/* ── TRUST BAR ── */
.trust-section { background: var(--sp-pale2); border-top: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border); }
.trust-pill { font-size: 13px; font-weight: 600; color: var(--sp-text-mid); background: white; border: 1px solid var(--sp-border); padding: 6px 16px; border-radius: 100px; }

/* ── FEATURES ── */
.features-section { padding: 100px 0; }
.feat-card { background: white; border: 1px solid var(--sp-border); border-radius: 20px; padding: 26px; height: 100%; transition: all .25s; }
.feat-card:hover { border-color: rgba(91,110,245,.35); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(91,110,245,.1); }
.feat-card.hl { background: var(--sp-bg-deep); border-color: var(--sp-bg-deep); }
.feat-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--sp-pale); display: flex; align-items: center; justify-content: center; }
.feat-card.hl .feat-icon { background: rgba(255,255,255,.15); }
.feat-icon svg { width: 22px; height: 22px; stroke: var(--sp-blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat-card.hl .feat-icon svg { stroke: white; }
.feat-title { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.feat-card.hl .feat-title { color: white; }
.feat-desc { font-size: 13px; color: var(--sp-text-mid); line-height: 1.65; }
.feat-card.hl .feat-desc { color: rgba(255,255,255,.75); }

/* ── HOW IT WORKS ── */
.how-section { background: var(--sp-pale2); padding: 100px 0; overflow: hidden; }
.step-connector { position: relative; }
.step-connector::before { content:''; position:absolute; top:28px; left:calc(50% + 28px); right:calc(-50% + 28px); height:1.5px; background:linear-gradient(90deg, var(--sp-blue), var(--sp-purple)); z-index:0; }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: white; border: 2px solid var(--sp-blue); display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 17px; font-weight: 800; color: var(--sp-blue); box-shadow: 0 4px 16px rgba(91,110,245,.2); position: relative; z-index: 1; }
.step-last .step-num { background: var(--sp-blue); color: white; }
.step-title { font-size: 14px; font-weight: 700; color: var(--sp-text); }
.step-desc { font-size: 12px; color: var(--sp-text-muted); line-height: 1.6; }

/* ── PRICING (landing) ── */
.pricing-section { padding: 100px 0; }
.pkg-card { border-radius: 20px; padding: 28px; }
.pop-tag { top: -13px; font-size: 11px; padding: 4px 14px; }
.pkg-price { font-size: 32px; }
.pkg-feats li { font-size: 13px; margin-bottom: 9px; }
.pkg-feats li svg { width: 15px; height: 15px; }
.btn-pkg { width: 100%; padding: 11px; font-size: 14px; font-weight: 700; border-radius: 9px; cursor: pointer; font-family: inherit; transition: all .2s; }
.btn-pkg-def { background: white; color: var(--sp-text); border: 1.5px solid var(--sp-border); }
.btn-pkg-def:hover { border-color: var(--sp-blue); color: var(--sp-blue); background: var(--sp-pale); }
.btn-pkg-main { background: var(--sp-blue); color: white; border: none; }
.btn-pkg-main:hover { background: var(--sp-blue-dark); box-shadow: 0 4px 16px rgba(91,110,245,.35); }

/* ── TESTIMONIALS ── */
.testi-section { background: var(--sp-pale2); padding: 100px 0; }
.testi-card { background: white; border: 1px solid var(--sp-border); border-radius: 20px; padding: 24px; height: 100%; }
.testi-q { font-family: 'Amiri', serif; font-size: 36px; color: var(--sp-blue); line-height: 1; }
.testi-text { font-size: 13px; color: var(--sp-text-mid); line-height: 1.75; }
.testi-av { width: 36px; height: 36px; border-radius: 50%; background: var(--sp-pale); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--sp-blue); flex-shrink: 0; }
.testi-name { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.testi-role { font-size: 11px; color: var(--sp-text-muted); }
.stars { color: #f5a623; font-size: 12px; }

/* ── CTA ── */
.cta-section { padding: 0 0 100px; }
.cta-box { background: var(--sp-bg-deep); border-radius: 24px; padding: 72px 5%; text-align: center; position: relative; overflow: hidden; }
.cta-box::before { content:''; position:absolute; top:-100px; right:-100px; width:360px; height:360px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.cta-box::after  { content:''; position:absolute; bottom:-120px; left:-80px; width:400px; height:400px; border:1px solid rgba(255,255,255,.06); border-radius:50%; }
.cta-arabic { font-family:'Amiri',serif; font-size:20px; color:rgba(255,255,255,.5); direction:rtl; }
.cta-title { font-size:clamp(24px,3.5vw,38px); font-weight:800; color:white; letter-spacing:-.8px; position:relative; z-index:1; }
.cta-sub { font-size:15px; color:rgba(255,255,255,.7); position:relative; z-index:1; }
.btn-cta-white { padding:13px 26px; font-size:15px; font-weight:700; border-radius:10px; cursor:pointer; font-family:inherit; text-decoration:none; transition:all .2s; display:inline-block; }
.btn-cta-solid { background:white; color:var(--sp-blue) !important; border:none; }
.btn-cta-solid:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.btn-cta-ghost { background:transparent; color:white !important; border:1.5px solid rgba(255,255,255,.35); }
.btn-cta-ghost:hover { background:rgba(255,255,255,.1); border-color:white; }

/* ── FOOTER ── */
.sp-footer { border-top: 1px solid var(--sp-border); }
.footer-brand { font-size: 15px; font-weight: 800; color: var(--sp-text); }
.footer-links a { font-size: 13px; color: var(--sp-text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--sp-blue); }
.footer-copy { font-size: 13px; color: var(--sp-text-muted); }

/* ── MOBILE RESPONSIVE (≤ 767px) ── */
@media (max-width: 767.98px) {
  /* Hero: hapus min-height agar tidak terlalu tinggi di mobile */
  .hero-section {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 48px;
  }
  .hero-sub { font-size: 14px; }

  /* Hero buttons: full width & stack vertikal */
  .hero-actions { flex-direction: column; }
  .btn-hero-solid,
  .btn-hero-outline {
    width: 100%;
    justify-content: center;
  }

  /* Sections: kurangi padding 100px → 60px */
  .features-section,
  .how-section,
  .pricing-section,
  .testi-section { padding: 60px 0; }
  .cta-section { padding: 0 0 60px; }

  /* How it works: sembunyikan garis konektor (layout 2×2, garis tidak relevan) */
  .step-connector::before { display: none; }

  /* Pricing card: padding & font sedikit dikecilkan */
  .pkg-card { padding: 20px; }
  .pkg-price { font-size: 26px; }

  /* CTA box */
  .cta-box { padding: 48px 20px; }
  .btn-cta-white { width: 100%; text-align: center; }
}