/* =========================
   MISI KURUS — FINAL BRAND CSS
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --mk-primary:#2EC28A;        /* Hijau segar */
  --mk-primary-dark:#104911;   /* Hijau gelap */
  --mk-secondary:#4BB3FD;      /* Biru lembut */
  --mk-accent:#FFD449;         /* Kuning CTA */
  --mk-text:#111827;           /* Neutral dark */
  --mk-muted:#6B7280;          /* Muted */
  --mk-bg:#FFFFFF;
  --mk-bg-soft:#F9FAFB;

  --mk-radius:18px;
  --mk-shadow:0 8px 24px rgba(0,0,0,.08);
  --mk-container:1100px;

  --mk-h1:clamp(28px, 3.2vw, 40px);
  --mk-h2:clamp(22px, 2.6vw, 32px);
  --mk-h3:clamp(18px, 2vw, 24px);
  --mk-body:16px;
  --mk-small:14px;

  --mk-ease:cubic-bezier(.22,1,.36,1);
  --mk-fast:160ms;
  --mk-med:220ms;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--mk-text);
  background:var(--mk-bg);
  font-size:var(--mk-body);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
.container{width:100%;max-width:var(--mk-container);margin-inline:auto;padding-inline:20px;}
.section{padding:56px 0;}
.section-title{font-size:var(--mk-h2);line-height:1.2;margin:0 0 18px;color:var(--mk-text);}
.center{text-align:center;}
.center-list{margin-inline:auto;max-width:850px;}
p{margin:0 0 14px;}
ul{margin:0 0 14px 18px;}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:80;
  background:var(--mk-primary);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.12);
}
.header-inner{
  display:grid; align-items:center;
  grid-template-columns:40px 1fr auto; /* hamburger | logo center | nav desktop */
  gap:10px;
  height:64px;
  position:relative;
}
.logo{
  justify-self:center;
  font-weight:700; font-size:20px; color:#fff; white-space:nowrap; line-height:1;
}
.desktop-nav{justify-self:end; align-self:center;}
.nav-list{list-style:none;display:flex;align-items:center;gap:18px;margin:0;padding:0;}
.nav-list a{padding:10px 12px;color:#fff;line-height:1;}
.nav-list .btn-buy{
  background:var(--mk-accent); color:#111; border-radius:999px;
  box-shadow:var(--mk-shadow); font-weight:600;
}

/* Hamburger (mobile) */
.hamburger{
  background:transparent;border:0;cursor:pointer;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:0;
}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:3px 0;border-radius:2px;transition:transform var(--mk-fast) var(--mk-ease),opacity var(--mk-fast) var(--mk-ease);}
.hamburger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* Drawer Mobile */
.mobile-drawer{
  position:fixed; inset:64px 0 0 auto; width:72%;
  background:#fff; color:var(--mk-text);
  transform:translateX(100%); transition:transform var(--mk-med) var(--mk-ease);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  padding:18px;
}
.mobile-drawer.open{transform:none;}
.mobile-drawer ul{list-style:none;margin:0;padding:0;}
.mobile-drawer li{border-bottom:1px solid #eef0f3;}
.mobile-drawer a{display:block;padding:14px 8px;font-weight:600;}
.mobile-drawer .btn-buy{background:var(--mk-accent);color:#111;border-radius:999px;margin-top:12px;text-align:center;}

/* ===================== BUTTONS ===================== */
.btn-cta,.btn-buy{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px;
  background:var(--mk-accent); color:#111; font-weight:600;
  transition:transform var(--mk-fast) var(--mk-ease), box-shadow var(--mk-fast) var(--mk-ease), filter var(--mk-fast) var(--mk-ease);
  box-shadow:var(--mk-shadow);
}
.btn-cta:hover,.btn-buy:hover{transform:translateY(-1px);}
.btn-cta:active,.btn-buy:active{transform:scale(.98);}
.btn-buy.big{padding:14px 22px; font-size:18px;}

/* ===================== HERO ===================== */
.hero{padding:72px 0 40px;}
.hero-grid{
  display:grid; gap:28px;
  grid-template-columns:2fr 1fr; align-items:stretch;
}
.hero-copy{align-self:center;}
.hero-title{font-size:var(--mk-h1);margin:12px 0 14px; line-height:1.18;}
.hero-title .u{border-bottom:4px solid var(--mk-secondary); box-decoration-break:clone;}
.prehead{color:#fff;background:var(--mk-primary);display:inline-block;padding:6px 10px;border-radius:999px;margin:0 0 8px;font-weight:600;}
.blink{animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}

.hero-sub{max-width:50ch;}
.hero-bullets{list-style:none;margin:12px 0;padding:0;}
.hero-bullets li{margin:6px 0;}
.hero-media{
  display:flex; align-items:center; justify-content:center;
}
.hero-media img{
  max-height:420px; object-fit:contain;
  border-radius:var(--mk-radius); box-shadow:var(--mk-shadow);
}

/* ===================== PAIN POINTS ===================== */
.pain{background:var(--mk-bg-soft);}
.list-bullets{list-style:none;margin:16px 0;padding:0;}
.list-bullets li{
  background:#fff; border:1px solid #eef0f3; border-radius:var(--mk-radius);
  padding:12px 14px; margin:10px 0; box-shadow:var(--mk-shadow); position:relative;
}
.list-bullets.checks li{padding-left:42px;}
.list-bullets.checks li::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px;height:20px; border-radius:4px;
  background:conic-gradient(from 0deg at 50% 50%, #2EC28A, #3dd8ab);
  -webkit-mask:url('../icons/check.svg') no-repeat center/18px 18px; 
  mask:url('../icons/check.svg') no-repeat center/18px 18px;
}

/* ===================== SOLUTION INTRO ===================== */
.list-cross{list-style:none;padding:0;margin:16px 0;}
.list-cross li{position:relative;padding-left:28px;margin:10px 0;}
.list-cross li::before{content:"✖";position:absolute;left:0;top:0;color:#E11D48;font-weight:700;}
.section-desc strong{font-weight:700}

/* ===================== PRODUCT ===================== */
.product{background:var(--mk-primary); color:#fff;}
.product-grid{
  display:grid; gap:28px; grid-template-columns:1fr 2fr; align-items:stretch;
}
.product-media img{
  border-radius:var(--mk-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  height:100%; object-fit:contain; background:#fff;
}
.pillars{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:1fr 1fr;}
.panel{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.25);border-radius:16px;transition:transform var(--mk-fast) var(--mk-ease), background var(--mk-fast) var(--mk-ease), opacity var(--mk-med) var(--mk-ease);}
.panel:hover{transform:translateY(-2px); background:rgba(0,0,0,.28);}
.panel-inner{padding:14px 16px;}
.panel-inner span{opacity:.95;display:block;margin-top:4px}

/* ===================== AUTHORITY ===================== */
.authority-grid{display:grid;gap:28px;grid-template-columns:1fr 1.6fr;align-items:center;}
.authority-media img{
  width:100%; max-width:360px; border-radius:999px; border:4px solid var(--mk-primary); box-shadow:var(--mk-shadow);
}
.author-id{margin-top:10px;text-align:center;}
.author-id span{color:var(--mk-muted);}

/* ===================== TRANSITION ===================== */
.transition{padding:36px 0 8px;}
.transition-line{text-align:center;max-width:70ch;margin:8px auto;}
.transition-line em{color:var(--mk-muted);}

/* ===================== AUDIENCE ===================== */
.audience{background:var(--mk-bg-soft);}
.cards{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px;}
.cards.bullets li,.card{background:#fff;border:1px solid #eef0f3;border-radius:var(--mk-radius);padding:14px 16px;box-shadow:var(--mk-shadow);}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ===================== MODULES ===================== */
.module-boxes .box{background:#fff;border:1px solid #eef0f3;border-radius:16px;box-shadow:var(--mk-shadow);padding:16px;transition:opacity var(--mk-med) var(--mk-ease),transform var(--mk-med) var(--mk-ease);}
.box-title{font-weight:700;margin-bottom:6px;}

/* ===================== BONUS ===================== */
.bonus{background:var(--mk-secondary); color:#fff;}
.bonus-head{position:relative;display:inline-block;}
.draw-title{position:relative;z-index:2;}
.draw-circle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:.7; z-index:1; stroke-dasharray:450; stroke-dashoffset:450;
}
.bonus .card.dark{
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.22);
}
.total-value.big{margin-top:14px;text-align:center;font-size:var(--mk-h3);}
.blink-strong{animation:blink 1.3s infinite; font-weight:700;}

/* ===================== PRICING ===================== */
.pricing .pricing-card{
  background:#fff; border:1px solid #eef0f3; border-radius:var(--mk-radius);
  box-shadow:var(--mk-shadow); padding:20px; max-width:720px; margin:0 auto;
}
.pricing-includes{list-style:none;padding:0;margin:0 0 14px;}
.pricing-includes li{margin:8px 0;}
.price-stack .line{margin:6px 0;color:var(--mk-muted);}
.price-original{text-decoration:line-through;}
.price-total{font-weight:600;}
.price-now{font-size:var(--mk-h3);font-weight:700;margin:10px 0 6px;}
.quota{margin:12px 0;}
.quota-bar{--h:10px;position:relative;height:var(--h);background:#eef0f3;border-radius:999px;overflow:hidden;border:1px solid #e5e7eb;}
.quota-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,var(--mk-primary) 0%,#3dd8ab 100%);border-radius:999px;transition:width var(--mk-med) var(--mk-ease);}
.pricing-cta{text-align:center;margin-top:14px;}

/* ===================== FAQ ===================== */
.faq .faq-item{border-bottom:1px solid #eef0f3;padding:10px 0;}
.faq .faq-q{
  width:100%; text-align:left; background:#fff; border:1px solid #eef0f3;
  border-radius:var(--mk-radius); padding:16px 16px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:10px; font-size:18px;
}
.faq .faq-q .symbol{display:inline-block;width:22px;text-align:center;font-weight:700;font-size:20px;}
.faq .faq-q[aria-expanded="true"] .symbol{content:"–"; transform:rotate(45deg);}
.faq .faq-a{padding:10px 12px 4px 12px;}
.faq .faq-a[hidden]{display:none;}

/* ===================== CLOSING CTA ===================== */
.closing-green{background:var(--mk-primary); color:#fff; text-align:center; padding:60px 0;}
.title-shadow{color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25);}
.closing .btn-buy.big{font-size:18px;}
.closing .arrow{margin-right:8px;}

/* ===================== FOOTER ===================== */
.site-footer{background:#111827;color:#e5e7eb;padding:28px 0;}
.footer-inner{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.footer-nav a{color:#e5e7eb;margin-right:12px;font-size:var(--mk-small);}

/* ===================== REVEAL (for JS) ===================== */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--mk-med) var(--mk-ease),transform var(--mk-med) var(--mk-ease);}
.in-view{opacity:1;transform:none;}

/* ===================== RESPONSIVE ===================== */
/* Desktop tweak */
@media (max-width: 1200px){
  .header-inner{grid-template-columns:40px 1fr auto;}
}

/* Tablet: hide desktop nav, keep logo center, drawer active */
@media (max-width: 1024px){
  .desktop-nav{display:none;}
  .header-inner{grid-template-columns:40px 1fr 40px;}
}

/* Narrow desktop / large tablet layout */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1.6fr 1fr;}
}

/* Tablet & mobile layout */
@media (max-width: 768px){
  .section{padding:48px 0;}
  .hero-grid{grid-template-columns:1fr;gap:20px;}
  .hero-media img{max-height:360px;}

  /* Product: gambar keluar dahulu, kemudian teks */
  .product-grid{grid-template-columns:1fr;}
  .product-media{order:1;}
  .product-copy{order:2; margin-top:8px;}

  /* Authority: gambar dahulu, kemudian penerangan */
  .authority-grid{grid-template-columns:1fr;}
  .authority-media{order:1;}
  .authority-copy{order:2;}

  /* Cards */
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cards.two{grid-template-columns:1fr;}
}

/* Mobile kecil */
@media (max-width: 520px){
  .logo{font-size:18px;}
  .btn-cta,.btn-buy{width:100%;}
  .cards.four{grid-template-columns:1fr;}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal,.in-view,.blink,.blink-strong{animation:none;transition:none;}
}