/* ============================================================
   LANDING V2 — scanmenu.id
   Tambahan di atas design-system.css + saas.css.
   Semua warna/font/radius pakai token yang sama, gak ada
   palet baru — biar identitas Nota Dapur tetap konsisten.
   ============================================================ */

/* ── Section rhythm helper ─────────────────────────────────── */
.landing-eyebrow-center { text-align:center; }
.section-kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color: var(--brand-primary);
  background: rgba(31,77,62,0.08); border:1px solid rgba(31,77,62,0.18);
  padding:5px 12px; border-radius: var(--radius-full); margin-bottom:14px;
}

/* ============================================================
   SCROLL REVEAL — variants (fade / slide / zoom)
   ============================================================ */
.reveal-fade { opacity:0; transition: opacity .7s cubic-bezier(.16,1,.3,1); }
.reveal-fade.in-view { opacity:1; }
.reveal-left { opacity:0; transform: translateX(-32px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-left.in-view { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform: translateX(32px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-right.in-view { opacity:1; transform:translateX(0); }
.reveal-zoom { opacity:0; transform: scale(0.94); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-zoom.in-view { opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal-fade, .reveal-left, .reveal-right, .reveal-zoom { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   TRUST / SECURITY BADGES (di bawah hero)
   ============================================================ */
.trust-badges-row {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;
}
.trust-badge {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color: var(--text-secondary);
  background: var(--bg-card); border:1px solid var(--border-subtle);
  padding:7px 13px; border-radius: var(--radius-full);
}
.trust-badge svg { color: var(--brand-primary); flex-shrink:0; }

/* ============================================================
   CARA KERJA — 4 STEPS
   ============================================================ */
.steps-section { max-width: 1080px; margin: 0 auto; }
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;
  position:relative;
}
.steps-grid::before {
  content:''; position:absolute; top:34px; left:12%; right:12%; height:2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
  z-index:0;
}
.step-card {
  position:relative; z-index:1; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.step-num-circle {
  width:68px; height:68px; border-radius:50%;
  background: var(--bg-surface); border:2px solid var(--brand-primary);
  color: var(--brand-primary);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:22px; font-weight:700;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.step-card:hover .step-num-circle { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step-title { font-family: var(--font-display); font-size:16px; font-weight:700; }
.step-desc { font-size:13px; color: var(--text-secondary); line-height:1.6; max-width:220px; }
@media (max-width:860px) {
  .steps-grid { grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .steps-grid::before { display:none; }
}
@media (max-width:520px) {
  .steps-grid { grid-template-columns:1fr; }
}

/* ============================================================
   DEMO SECTION — CTA row on top of revived demo-window
   ============================================================ */
.demo-intro { text-align:center; max-width:640px; margin:0 auto 8px; }
.demo-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin: 20px 0 36px; }
.demo-note { text-align:center; font-size:12.5px; color: var(--text-tertiary); margin-top:18px; }

/* ============================================================
   SCREENSHOT CAROUSEL
   ============================================================ */
.carousel-section { max-width: 1080px; margin: 0 auto; }
.carousel-wrap { position:relative; margin-top:40px; }
.carousel-viewport { overflow:hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.carousel-track { display:flex; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.carousel-slide { min-width:100%; position:relative; background: var(--bg-card); }
.carousel-slide img { width:100%; display:block; }
.carousel-slide-placeholder {
  aspect-ratio: 16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  color:#fff;
}
.carousel-slide-placeholder svg { opacity:.85; }
.carousel-slide-placeholder span { font-size:13px; font-weight:600; opacity:.85; }
.carousel-caption {
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(27,36,32,0.82), transparent);
  color:#fff; padding: 40px 24px 18px;
  display:flex; align-items:center; gap:10px;
}
.carousel-caption .cc-num { font-family: var(--font-mono); font-size:12px; font-weight:700; opacity:.7; }
.carousel-caption .cc-title { font-family: var(--font-display); font-weight:700; font-size:15px; }
.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border-default);
  background: var(--bg-card); color: var(--text-primary); cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}
.carousel-btn:hover { background: var(--brand-primary); color:#fff; border-color: var(--brand-primary); }
.carousel-btn-prev { left:-20px; }
.carousel-btn-next { right:-20px; }
@media (max-width:700px) {
  .carousel-btn-prev { left:6px; } .carousel-btn-next { right:6px; }
}
.carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background: var(--border-strong); border:none; cursor:pointer; padding:0; transition: all var(--transition-fast); }
.carousel-dot.active { background: var(--brand-primary); width:22px; border-radius: var(--radius-full); }

/* ============================================================
   CLIENT LOGOS BAR
   ============================================================ */
.client-logos-section { text-align:center; padding: 32px 24px 8px; }
.client-logos-label { font-size:12.5px; color: var(--text-tertiary); font-weight:600; margin-bottom:22px; letter-spacing:.03em; }
.client-logos-row {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 28px;
  max-width:960px; margin:0 auto;
}
.client-logo-tag {
  font-family: var(--font-display); font-weight:700; font-size:15px;
  color: var(--text-tertiary); letter-spacing:.01em;
  opacity:.7; transition: opacity var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
}
.client-logo-tag:hover { opacity:1; color: var(--brand-primary); }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-section { max-width: 900px; margin: 0 auto; }
.compare-table-wrap { margin-top:36px; overflow-x:auto; border-radius: var(--radius-xl); border:1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.compare-table { width:100%; border-collapse:collapse; background: var(--bg-card); min-width:560px; }
.compare-table th, .compare-table td { padding:16px 18px; text-align:center; border-bottom:1px solid var(--border-subtle); }
.compare-table th { font-family: var(--font-display); font-size:14px; }
.compare-table td:first-child, .compare-table th:first-child { text-align:left; font-weight:600; font-size:13.5px; color: var(--text-secondary); }
.compare-table thead th { background: var(--bg-hover); font-size:13px; padding-top:20px; padding-bottom:20px; }
.compare-table thead th.compare-highlight { background: var(--brand-primary); color:#fff; }
.compare-table tbody tr:last-child td { border-bottom:none; }
.compare-table td.compare-highlight { background: rgba(31,77,62,0.05); }
.compare-yes { color: var(--success); font-weight:700; }
.compare-no { color: var(--text-tertiary); }

/* ============================================================
   VIDEO DEMO
   ============================================================ */
.video-section { max-width: 880px; margin: 0 auto; text-align:center; }
.video-frame-wrap {
  position:relative; margin-top:36px; border-radius: var(--radius-xl); overflow:hidden;
  box-shadow: var(--shadow-lg); aspect-ratio:16/9; background:#0f1512;
  cursor:pointer;
}
.video-frame-wrap img { width:100%; height:100%; object-fit:cover; opacity:.55; }
.video-frame-wrap.video-placeholder {
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--brand-primary-dark), #10251d);
}
.video-play-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background: var(--bg-card); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color: var(--brand-primary);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35); transition: transform var(--transition-fast);
  z-index:2;
}
.video-play-btn:hover { transform: translate(-50%,-50%) scale(1.08); }
.video-duration-tag {
  position:absolute; bottom:16px; right:16px; background: rgba(0,0,0,0.6); color:#fff;
  font-family: var(--font-mono); font-size:12px; padding:4px 10px; border-radius: var(--radius-sm); z-index:2;
}
.video-frame-embed { width:100%; height:100%; border:none; }

/* ============================================================
   FULL FEATURE GRID (10 fitur, icon cards)
   ============================================================ */
.feature-grid-full {
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:40px;
}
.feature-card-full {
  background: var(--bg-card); border:1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 24px 18px; text-align:left; transition: all var(--transition-fast);
}
.feature-card-full:hover { border-color: var(--border-brand); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-card-full-icon {
  width:42px; height:42px; border-radius: var(--radius-md); background: rgba(31,77,62,0.09);
  color: var(--brand-primary); display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.feature-card-full-title { font-family: var(--font-display); font-weight:700; font-size:14.5px; margin-bottom:6px; }
.feature-card-full-desc { font-size:12.5px; color: var(--text-secondary); line-height:1.55; }
@media (max-width:1100px) { .feature-grid-full { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .feature-grid-full { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px) { .feature-grid-full { grid-template-columns:1fr; } }

/* ============================================================
   FAQ SEARCH (buat versi FAQ yang lebih panjang, opsional filter)
   ============================================================ */
.faq-section-wide { max-width: 820px; }
.faq-category-label { font-family: var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-tertiary); margin: 28px 0 10px; }
.faq-category-label:first-of-type { margin-top:32px; }

/* ============================================================
   STICKY CTA BAR (muncul saat scroll)
   ============================================================ */
.sticky-cta-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background: var(--bg-surface); border-top:1px solid var(--border-default);
  box-shadow: 0 -4px 20px rgba(27,36,32,0.10);
  padding: 12px 20px; display:flex; align-items:center; justify-content:center; gap:16px;
  transform: translateY(120%); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.sticky-cta-bar.show { transform: translateY(0); }
.sticky-cta-text { font-size:13.5px; font-weight:600; color: var(--text-primary); }
.sticky-cta-text span { color: var(--text-secondary); font-weight:400; display:none; }
@media (min-width:560px) { .sticky-cta-text span { display:inline; } }
@media (max-width:420px) { .sticky-cta-bar { padding:10px 14px; gap:10px; } }

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.wa-float-btn {
  position:fixed; right:22px; bottom:88px; z-index:399;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45); text-decoration:none;
  transition: transform var(--transition-fast);
}
.wa-float-btn:hover { transform: scale(1.08); }
@keyframes wa-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}
.wa-float-btn::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  animation: wa-pulse-ring 2.2s infinite;
}
@media (max-width:600px) { .wa-float-btn { right:14px; bottom:78px; width:50px; height:50px; } }
body.has-sticky-cta .wa-float-btn { bottom:96px; }

/* ============================================================
   IMAGE LOAD SKELETON (fade-in premium feel)
   ============================================================ */
.img-lazy-wrap { position:relative; overflow:hidden; background: var(--bg-hover); }
.img-lazy-wrap img { opacity:0; transition: opacity .5s ease; display:block; width:100%; }
.img-lazy-wrap img.loaded { opacity:1; }
.img-lazy-wrap:not(:has(img.loaded)) { background: linear-gradient(90deg, var(--bg-hover) 25%, #F8F8F4 50%, var(--bg-hover) 75%); background-size:200% 100%; animation: shimmer 1.4s infinite; }

/* ============================================================
   FOOTER — FULL (multi-column)
   ============================================================ */
.footer-full {
  background: var(--bg-surface); border-top:1px solid var(--border-subtle);
  padding: 56px 24px 24px; margin-top:0;
}
.footer-full-inner { max-width:1100px; margin:0 auto; }
.footer-grid {
  display:grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap:32px; margin-bottom:40px;
}
.footer-brand-col img { height:34px; margin-bottom:14px; }
.footer-brand-desc { font-size:13px; color: var(--text-secondary); line-height:1.7; max-width:260px; }
.footer-col-title { font-family: var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-tertiary); margin-bottom:16px; }
.footer-col a {
  display:block; font-size:13.5px; color: var(--text-secondary); text-decoration:none;
  margin-bottom:11px; transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--brand-primary); }
.footer-status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--success); margin-right:6px; animation: pulse-dot 2s infinite; }
.footer-bottom {
  border-top:1px solid var(--border-subtle); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color: var(--text-tertiary);
}
.footer-bottom-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom-links a { color: var(--text-tertiary); text-decoration:none; }
.footer-bottom-links a:hover { color: var(--brand-primary); }
@media (max-width:900px) {
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .footer-brand-col { grid-column: 1/-1; }
}
@media (max-width:560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SIMPLE CONTENT PAGES (blog / docs / privacy / terms / status / about)
   ============================================================ */
.content-page-hero {
  background: var(--bg-surface); border-bottom:1px solid var(--border-subtle);
  padding: 64px 24px 48px; text-align:center;
}
.content-page-hero h1 { font-family: var(--font-display); font-size: clamp(26px,4vw,38px); font-weight:800; margin-bottom:12px; }
.content-page-hero p { color: var(--text-secondary); max-width:560px; margin:0 auto; }
.content-shell { max-width: 860px; margin: 0 auto; padding: 56px 24px 100px; }
.content-shell h2 { font-family: var(--font-display); font-size:22px; font-weight:700; margin: 36px 0 14px; }
.content-shell h2:first-child { margin-top:0; }
.content-shell p, .content-shell li { color: var(--text-secondary); font-size:14.5px; line-height:1.8; }
.content-shell ul, .content-shell ol { padding-left:20px; margin-bottom:14px; }

/* Blog cards */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1080px; margin: 0 auto; padding: 0 24px 100px; }
.blog-card { background: var(--bg-card); border:1px solid var(--border-default); border-radius: var(--radius-lg); overflow:hidden; transition: all var(--transition-fast); text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-brand); }
.blog-card-img { aspect-ratio:16/10; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); display:flex; align-items:center; justify-content:center; color:#fff; }
.blog-card-body { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-tag { font-family: var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--brand-primary); }
.blog-card-title { font-family: var(--font-display); font-size:16px; font-weight:700; line-height:1.35; }
.blog-card-excerpt { font-size:13px; color: var(--text-secondary); line-height:1.6; flex:1; }
.blog-card-meta { font-size:12px; color: var(--text-tertiary); margin-top:6px; }
@media (max-width:860px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .blog-grid { grid-template-columns:1fr; } }

/* Docs / help center */
.docs-shell { max-width:1080px; margin:0 auto; padding: 56px 24px 100px; display:grid; grid-template-columns: 240px 1fr; gap:40px; }
.docs-nav { position:sticky; top:24px; align-self:start; display:flex; flex-direction:column; gap:4px; }
.docs-nav a { font-size:13.5px; color: var(--text-secondary); text-decoration:none; padding:7px 10px; border-radius: var(--radius-sm); }
.docs-nav a:hover, .docs-nav a.active { background: var(--bg-hover); color: var(--brand-primary); font-weight:600; }
.docs-cat-card { background: var(--bg-card); border:1px solid var(--border-default); border-radius: var(--radius-lg); padding:22px; margin-bottom:18px; }
.docs-cat-title { display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:16px; margin-bottom:14px; }
.docs-cat-icon { width:34px; height:34px; border-radius: var(--radius-md); background: rgba(31,77,62,0.09); color: var(--brand-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.docs-article-link { display:block; font-size:13.5px; color: var(--text-secondary); text-decoration:none; padding:8px 0; border-bottom:1px solid var(--border-subtle); }
.docs-article-link:last-child { border-bottom:none; }
.docs-article-link:hover { color: var(--brand-primary); }
@media (max-width:820px) { .docs-shell { grid-template-columns:1fr; } .docs-nav { position:static; flex-direction:row; overflow-x:auto; } }

/* Status page */
.status-overall { max-width:700px; margin:0 auto; padding: 56px 24px 20px; text-align:center; }
.status-overall-badge { display:inline-flex; align-items:center; gap:10px; background: var(--success-bg); color: var(--success); border:1px solid rgba(91,140,62,0.3); padding:10px 22px; border-radius: var(--radius-full); font-weight:700; font-size:14px; }
.status-list { max-width:700px; margin: 32px auto 100px; padding: 0 24px; display:flex; flex-direction:column; gap:2px; }
.status-row { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background: var(--bg-card); border:1px solid var(--border-subtle); }
.status-row:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.status-row:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.status-row + .status-row { border-top:none; }
.status-row-name { font-size:14px; font-weight:600; }
.status-row-ok { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--success); font-weight:600; }

@media (max-width: 768px) {
  .footer-full { padding: 44px 20px 20px; }
}