/* =====================================================
   SIDO — DEMO STATIS (cermin dari SIDO-Global-CSS.md)
   =====================================================
   Ini versi yang sama persis dengan CSS global untuk
   Elementor — ditambah sedikit reset + layout supaya
   demo berjalan mandiri tanpa Elementor.
   ===================================================== */

/* ---------- Reset dasar (demo-only; WordPress pakai theme) ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--sido-text); background:var(--sido-bg);
  line-height:1.5; -webkit-font-smoothing:antialiased; font-size:16px;
}
img,svg{max-width:100%; height:auto; display:block;}
a{color:inherit;}

/* ---------- Design tokens (SAMA dengan SIDO-Global-CSS.md) ---------- */
:root{
  --sido-bg:#ffffff;
  --sido-bg-surface:#f6f7f8;
  --sido-bg-dark:#101418;
  --sido-brand:#ED3237;
  --sido-brand-soft:#FBEDED;
  --sido-text:#0F172A;
  --sido-text-dim:#3F4756;
  --sido-text-faint:#6B7280;
  --sido-border:#E2E5EA;
  --sido-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sido-space:8px;
  --sido-radius:12px;
  --sido-shadow:0 1px 2px rgba(16,20,24,.06),0 4px 12px rgba(16,20,24,.06);
  --sido-maxw:1200px;
}

/* ---------- Buttons (SAMA) ---------- */
.sido-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 24px; border-radius:var(--sido-radius);
  font-weight:600; font-size:16px; line-height:1; text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  cursor:pointer; border:none; font-family:inherit;
}
.sido-btn-primary{background:var(--sido-brand); color:#fff;}
.sido-btn-primary:hover{background:#D22B30; transform:translateY(-1px); box-shadow:var(--sido-shadow);}
.sido-btn-outline{background:transparent; color:var(--sido-text); border:1px solid var(--sido-border);}
.sido-btn-outline:hover{border-color:var(--sido-text-dim); background:var(--sido-bg-surface);}
.sido-btn-outline--on-dark{color:#E6E6E6; border-color:#3F4756;}
.sido-btn-outline--on-dark:hover{color:#fff; border-color:#E6E6E6; background:rgba(255,255,255,.08);}
.sido-btn:focus-visible{outline:2px solid var(--sido-brand); outline-offset:2px;}

/* ---------- Cards (SAMA) ---------- */
.sido-card{
  background:var(--sido-bg-surface); border:1px solid var(--sido-border);
  border-radius:var(--sido-radius); padding:24px;
  box-shadow:var(--sido-shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.sido-card:hover{transform:translateY(-3px); box-shadow:0 4px 8px rgba(16,20,24,.08),0 12px 28px rgba(16,20,24,.1);}
.sido-card-head{font-size:18px; font-weight:600; margin:0 0 8px; color:var(--sido-text);}
.sido-card-body{margin:0; color:var(--sido-text-dim); font-size:15px; line-height:1.55;}
.sido-card--accent{border-top:3px solid var(--sido-brand);}
.sido-card--muted{opacity:.72;}

/* ---------- Sections (SAMA) ---------- */
.sido-section{padding:80px 0;}
.sido-section-sm{padding:56px 0;}
.sido-dark{background:var(--sido-bg-dark); color:#E6E6E6;}
.sido-dark h1,.sido-dark h2,.sido-dark h3{color:#fff;}

/* ---------- Text helpers (SAMA) ---------- */
.sido-kicker{
  text-transform:uppercase; letter-spacing:.12em; font-size:13px;
  font-weight:600; color:var(--sido-brand); margin:0 0 10px;
}
.sido-dim{color:var(--sido-text-dim);}
.sido-center{text-align:center;}
.sido-link{color:var(--sido-brand); font-weight:500; text-decoration:none;}
.sido-link:hover{text-decoration:underline;}

/* ---------- Stats (SAMA) ---------- */
.sido-stat .sido-num{font-variant-numeric:tabular-nums; font-weight:700; font-size:40px; line-height:1.05; color:var(--sido-text);}

/* ---------- Layout (demo-only; Elementor pakai Container) ---------- */
.demo-wrap{max-width:var(--sido-maxw); margin:0 auto; padding:0 24px;}
.demo-hero{min-height:70svh; display:flex; align-items:center;}
.demo-hero-inner{max-width:720px;}
.demo-hero .sido-kicker{color:var(--sido-brand);}
.demo-hero h1{font-size:clamp(44px,7vw,72px); line-height:1.05; font-weight:700; color:#fff; margin:0 0 20px;}
.demo-hero .demo-lead{font-size:18px; color:#C9C9C9; line-height:1.55; max-width:640px; margin:0 0 32px;}
.demo-hero .demo-proof{font-size:13px; color:#8A8A8A; margin-top:24px;}
.demo-cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.demo-grid{display:grid; gap:24px;}
.demo-grid-2{grid-template-columns:1fr 1fr;}
.demo-grid-3{grid-template-columns:repeat(3,1fr);}
.demo-grid-4{grid-template-columns:repeat(4,1fr);}
.demo-grid-5{grid-template-columns:repeat(5,1fr);}
.demo-row{display:flex; gap:32px; align-items:flex-start;}
.demo-col{flex:1 1 0;}
.demo-stat{text-align:center;}
.demo-stat .sido-num{display:block; margin-bottom:6px;}
.demo-stat .demo-stat-label{color:var(--sido-text-dim); font-size:15px;}
.demo-philosophy{color:#C9C9C9;}
.demo-list-item{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--sido-border);}
.demo-list-item:last-child{border-bottom:none;}
.demo-list-num{font-variant-numeric:tabular-nums; font-weight:700; color:var(--sido-brand); min-width:32px;}
.demo-logo{max-height:42px; width:auto; margin-right:12px;}

/* ---------- Navbar (demo; di WP pakai header theme / Menu widget) ---------- */
.demo-nav{position:sticky; top:0; z-index:100; background:rgba(16,20,24,.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08);}
.demo-nav-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px;}
.demo-nav-brand{display:flex; align-items:center; text-decoration:none;}
.demo-nav-name{color:#fff; font-weight:700; font-size:18px; letter-spacing:.02em;}
.demo-nav-links{display:flex; align-items:center; gap:24px;}
.demo-nav-links a{color:#C9C9C9; text-decoration:none; font-size:15px; font-weight:500; padding:8px 0;}
.demo-nav-links a:hover{color:#fff; text-decoration:underline;}
.demo-nav-cta{height:40px; padding:0 16px; font-size:14px;}
@media(max-width:640px){
  .demo-nav-links{display:none;}
}

/* ---------- Responsive (demo-only; Elementor responsive widgets) ---------- */
@media(max-width:1024px){
  .demo-grid-3,.demo-grid-4,.demo-grid-5{grid-template-columns:repeat(2,1fr);}
  .demo-hero{min-height:auto; padding:96px 0;}
}
@media(max-width:640px){
  .demo-grid-2,.demo-grid-3,.demo-grid-4,.demo-grid-5{grid-template-columns:1fr;}
  .demo-row{flex-direction:column;}
}
/* ---------- Reduced motion (SAMA) ---------- */
@media (prefers-reduced-motion: reduce){
  .sido-card,.sido-btn{transition:none; transform:none !important;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;}
}