:root {
      --primary: #1A6BCC; --primary-dark: #0D4A9E; --primary-light: #EBF2FF;
      --secondary: #F5A623; --secondary-dark: #D4880A;
      --neutral: #F8F9FB; --text: #1A1F36; --text-muted: #6B7280;
      --white: #ffffff; --border: #E5E7EB;
      --hero-gradient: linear-gradient(135deg, #1A6BCC 0%, #0D4A9E 100%);
      --starter-color: #E65100; --starter-light: #FFF3E0;
      --bisnis-color: #1A6BCC; --bisnis-light: #EBF2FF;
      --font-heading: 'Poppins', sans-serif;
      --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
      --shadow-md: 0 4px 16px rgba(0,0,0,.10);
      --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
      --navbar-height: 68px; --container: 1100px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

    /* NAVBAR */
    .navbar {
      position: sticky; top: 0; z-index: 100;
      height: var(--navbar-height); background: var(--white);
      border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
    }
    .navbar-inner {
      display: flex; align-items: center; justify-content: space-between; height: 100%;
    }
    .navbar-logo { display: flex; align-items: center; gap: 10px; }
    .logo-icon {
      width: 38px; height: 38px; background: var(--hero-gradient);
      border-radius: var(--radius-md); display: flex; align-items: center;
      justify-content: center; font-family: var(--font-heading);
      font-weight: 800; font-size: 18px; color: var(--white);
    }
    .logo-text { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--text); }
    .logo-text span { color: var(--primary); }
    .navbar-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); transition: color .2s; }
    .navbar-back:hover { color: var(--primary); }

    /* HERO MINI */
    .hero-mini { background: var(--hero-gradient); padding: 56px 0 48px; text-align: center; }
    .hero-mini h1 {
      font-family: var(--font-heading); font-weight: 800;
      font-size: clamp(24px, 3.5vw, 40px); color: var(--white);
      line-height: 1.25; margin-bottom: 12px;
    }
    .hero-mini p { font-size: 16px; color: rgba(255,255,255,.8); margin-bottom: 28px; }
    .hero-anchors { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .anchor-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 24px; border-radius: 50px;
      font-size: 14px; font-weight: 700; font-family: var(--font-heading);
      transition: all .2s; cursor: pointer; border: 2px solid rgba(255,255,255,.5);
      color: var(--white); background: rgba(255,255,255,.1);
    }
    .anchor-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.8); }
    .anchor-btn.starter { border-color: var(--secondary); background: rgba(245,166,35,.15); }
    .anchor-btn.bisnis  { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.15); }

    /* FILTER BAR */
    .filter-bar {
      position: sticky; top: var(--navbar-height); z-index: 90;
      background: var(--white); border-bottom: 1px solid var(--border);
      padding: 12px 0; box-shadow: var(--shadow-sm);
    }
    .filter-bar-inner {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .filter-label { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
    .filter-cats { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
    .cat-btn {
      padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border);
      font-size: 13px; font-weight: 500; cursor: pointer;
      background: var(--white); color: var(--text-muted); transition: all .2s;
    }
    .cat-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
    .cat-btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }

    /* PAKET SECTION */
    .paket-section { padding: 56px 0; }
    .paket-section.starter-section { background: var(--neutral); }
    .paket-section.bisnis-section  { background: var(--white); }

    .paket-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
    }
    .paket-header-left { display: flex; flex-direction: column; gap: 8px; }
    .paket-badge-big {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; padding: 5px 14px;
      border-radius: 20px; width: fit-content; letter-spacing: .04em;
    }
    .paket-badge-big.starter { background: var(--starter-light); color: var(--starter-color); }
    .paket-badge-big.bisnis  { background: var(--bisnis-light);  color: var(--bisnis-color);  }
    .paket-header h2 {
      font-family: var(--font-heading); font-weight: 800;
      font-size: clamp(20px, 2.5vw, 28px); color: var(--text); line-height: 1.3;
    }
    .paket-header p { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 480px; }
    .paket-header-right { flex-shrink: 0; }
    .paket-price-tag {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 16px 20px; text-align: center;
      box-shadow: var(--shadow-sm);
    }
    .paket-price-tag .price {
      font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--primary);
    }
    .paket-price-tag .price-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .paket-features-quick {
      display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
    }
    .feat-tag {
      font-size: 11px; padding: 3px 10px; border-radius: 20px;
      background: var(--neutral); color: var(--text-muted); border: 1px solid var(--border);
    }

    /* TEMPLATE GRID */
    .templates-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }

    /* TEMPLATE CARD */
    .template-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-xl); overflow: hidden;
      transition: box-shadow .25s, transform .25s, border-color .25s;
    }
    .template-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--primary); }
    .template-card.hidden { display: none; }

    /* Thumbnail */
    .card-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; cursor: pointer; }
    .thumb-placeholder {
      width: 100%; height: 100%; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 6px; padding: 16px;
    }
    /* Starter thumbnails — warna lebih warm/muted */
    .ph-str-kul { background: linear-gradient(135deg, #FF8A65, #E64A19); }
    .ph-str-tok { background: linear-gradient(135deg, #AB47BC, #7B1FA2); }
    .ph-str-jas { background: linear-gradient(135deg, #66BB6A, #2E7D32); }
    .ph-str-cpr { background: linear-gradient(135deg, #42A5F5, #1565C0); }
    /* Bisnis thumbnails — lebih rich/deep */
    .ph-bsn-kul { background: linear-gradient(135deg, #BF360C, #6D1C04); }
    .ph-bsn-tok { background: linear-gradient(135deg, #4A148C, #1A0033); }
    .ph-bsn-jas { background: linear-gradient(135deg, #1B5E20, #003300); }
    .ph-bsn-cpr { background: linear-gradient(135deg, #0D47A1, #001A4D); }

    .ph-icon { font-size: 28px; }
    .ph-title { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.95); text-align: center; }
    .ph-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
    .ph-tag { font-size: 10px; background: rgba(255,255,255,.2); color: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 10px; }

    /* Hover overlay */
    .card-overlay {
      position: absolute; inset: 0; background: rgba(26,31,54,.72);
      display: flex; align-items: center; justify-content: center; gap: 10px;
      opacity: 0; transition: opacity .25s;
    }
    .card-thumb:hover .card-overlay { opacity: 1; }
    .overlay-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 9px 16px; border-radius: var(--radius-md);
      font-size: 12px; font-weight: 700; font-family: var(--font-heading);
      cursor: pointer; border: none; transition: all .2s;
    }
    .overlay-btn.preview { background: var(--white); color: var(--text); }
    .overlay-btn.preview:hover { background: var(--neutral); }
    .overlay-btn.pesan { background: var(--secondary); color: var(--text); }
    .overlay-btn.pesan:hover { background: var(--secondary-dark); }

    /* Card body */
    .card-body { padding: 16px 18px; }
    .card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
    .badge-paket { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
    .badge-starter { background: var(--starter-light); color: var(--starter-color); }
    .badge-bisnis  { background: var(--bisnis-light);  color: var(--bisnis-color); }
    .badge-kategori { font-size: 10px; color: var(--text-muted); background: var(--neutral); padding: 3px 9px; border-radius: 20px; }
    .card-id { font-size: 10px; color: #B0B7C3; font-family: monospace; margin-left: auto; }
    .card-name { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
    .card-cta {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      padding-top: 12px; border-top: 1px solid var(--border);
    }
    .btn-preview {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      padding: 8px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600;
      background: var(--white); color: var(--primary); border: 1.5px solid var(--primary);
      cursor: pointer; transition: background .2s;
    }
    .btn-preview:hover { background: var(--primary-light); }
    .btn-pesan {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      padding: 8px; border-radius: var(--radius-md); font-size: 12px; font-weight: 700;
      font-family: var(--font-heading); background: var(--secondary); color: var(--text);
      border: none; cursor: pointer; transition: background .2s;
    }
    .btn-pesan:hover { background: var(--secondary-dark); }

    /* Empty state per section */
    .empty-state {
      grid-column: 1 / -1; text-align: center; padding: 48px 24px; display: none;
    }
    .empty-state.show { display: block; }
    .empty-icon { font-size: 40px; margin-bottom: 12px; }
    .empty-state h3 { font-family: var(--font-heading); font-size: 16px; color: var(--text); margin-bottom: 6px; }
    .empty-state p { font-size: 13px; color: var(--text-muted); }

    /* DIVIDER */
    .section-divider {
      display: flex; align-items: center; gap: 16px;
      max-width: var(--container); margin: 0 auto; padding: 0 24px;
    }
    .divider-line { flex: 1; height: 1px; background: var(--border); }
    .divider-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

    /* BOTTOM CTA */
    .bottom-cta { background: var(--neutral); padding: 64px 0; text-align: center; border-top: 1px solid var(--border); }
    .bottom-cta-inner { max-width: 520px; margin: 0 auto; padding: 0 24px; }
    .bottom-cta h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(18px, 2.5vw, 26px); color: var(--text); margin-bottom: 10px; line-height: 1.3; }
    .bottom-cta p { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.7; }
    .btn-wa {
      display: inline-flex; align-items: center; gap: 8px;
      background: #25D366; color: var(--white);
      font-size: 15px; font-weight: 700; font-family: var(--font-heading);
      padding: 13px 28px; border-radius: var(--radius-md); transition: opacity .2s;
    }
    .btn-wa:hover { opacity: .85; }

    /* RESPONSIVE */
    @media (max-width: 900px) { .templates-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) {
      .templates-grid { grid-template-columns: 1fr; }
      .paket-header { flex-direction: column; }
      .paket-header-right { width: 100%; }
      .paket-price-tag { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .hero-mini { padding: 40px 0 32px; }
      .filter-bar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    /* ── FOOTER ── */
    .footer { background: var(--text); color: rgba(255,255,255,.85); padding: 56px 0 0; }
    .footer-inner {
      display: grid; grid-template-columns: 2fr 1fr 1fr;
      gap: 48px; padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .footer-brand .logo-text { color: var(--white); }
    .footer-brand .logo-text span { color: var(--secondary); }
    .footer-tagline { font-size: 14px; color: rgba(255,255,255,.6); margin: 12px 0 20px; line-height: 1.6; max-width: 280px; }
    .footer-wa {
      display: inline-flex; align-items: center; gap: 8px;
      background: #25D366; color: var(--white); font-size: 13px; font-weight: 700;
      padding: 10px 18px; border-radius: var(--radius-md); transition: opacity .2s;
    }
    .footer-wa:hover { opacity: .85; }
    .footer-col h4 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 16px; }
    .footer-col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; }
    .footer-col ul li a { font-size: 14px; color: rgba(255,255,255,.6); transition: color .2s; text-decoration: none; }
    .footer-col ul li a:hover { color: var(--secondary); }
    .footer-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 10px; }
    .footer-contact-item span:first-child { flex-shrink: 0; }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 0; font-size: 13px; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: 8px;
    }
    @media (max-width: 768px) {
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 500px) {
      .footer-inner { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }