*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --black:    #0a0a0a;
      --dark:     #111418;
      --coal:     #1c2026;
      --steel:    #2b3240;
      --yellow:   #f5a623;
      --yellow-lt:#fbb94a;
      --yellow-dk:#d4891c;
      --white:    #ffffff;
      --off:      #f8f7f4;
      --gray-lt:  #e8eaed;
      --gray-mid: #8b9199;
      --gray-dim: #555c67;
      --font-h:   'Poppins', sans-serif;
      --font-b:   'Inter', sans-serif;
      --rad:      8px;
    }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-b); background: var(--off); color: var(--dark); -webkit-font-smoothing: antialiased; }

    /* ── Layout ── */
    .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
    .section { padding: 88px 0; }
    .bg-dark  { background: var(--dark); }
    .bg-coal  { background: var(--coal); }
    .bg-white { background: var(--white); }
    .bg-off   { background: var(--off); }

    .label {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-h); font-size: 11.5px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 12px;
    }
    .label::before { content: ''; width: 24px; height: 2px; background: var(--yellow); border-radius: 2px; }
    .title { font-family: var(--font-h); font-size: clamp(28px,3.5vw,42px); font-weight: 800; line-height: 1.15; color: var(--dark); letter-spacing: -.02em; }
    .title.light { color: var(--white); }
    .title span  { color: var(--yellow); }
    .subtitle { font-size: 16px; line-height: 1.75; color: var(--gray-dim); max-width: 620px; margin-top: 14px; }
    .subtitle.light { color: var(--gray-mid); }

    /* Buttons */
    .btn-y { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-h); font-size: 14px; font-weight: 700; color: var(--black); background: var(--yellow); text-decoration: none; padding: 13px 26px; border-radius: var(--rad); transition: background .2s, transform .15s, box-shadow .2s; white-space: nowrap; }
    .btn-y:hover { background: var(--yellow-lt); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,166,35,.35); }
    .btn-outline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-h); font-size: 14px; font-weight: 600; color: var(--dark); background: transparent; border: 2px solid rgba(0,0,0,.18); text-decoration: none; padding: 11px 24px; border-radius: var(--rad); transition: border-color .2s, background .2s; white-space: nowrap; }
    .btn-outline:hover { border-color: var(--dark); background: rgba(0,0,0,.04); }

    /* ══ PAGE HERO ══ */
    .page-hero { background: var(--dark); padding: 76px 0 68px; position: relative; overflow: hidden; }
    .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,166,35,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245,166,35,.05) 1px, transparent 1px); background-size: 60px 60px; }
    .page-hero::after  { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--yellow); }
    .hero-inner { position: relative; z-index: 2; }
    .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-mid); margin-bottom: 20px; }
    .breadcrumb a { color: var(--gray-mid); text-decoration: none; }
    .breadcrumb a:hover { color: var(--yellow); }
    .hero-h1 { font-family: var(--font-h); font-size: clamp(34px,5vw,56px); font-weight: 900; color: var(--white); letter-spacing: -.03em; line-height: 1.08; margin-bottom: 16px; }
    .hero-h1 span { color: var(--yellow); }
    .hero-sub { font-size: 16px; color: var(--gray-mid); line-height: 1.7; max-width: 600px; margin-bottom: 28px; }
    .hero-pills { display: flex; flex-wrap: wrap; gap: 10px; }
    .pill { font-size: 12px; font-weight: 600; color: var(--gray-mid); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 5px 14px; border-radius: 20px; }

    /* ══ DISCLAIMER BANNER ══ */
    .disclaimer {
      background: rgba(245,166,35,.1);
      border: 1px solid rgba(245,166,35,.3);
      border-radius: var(--rad); padding: 16px 22px;
      display: flex; align-items: flex-start; gap: 14px;
      margin-bottom: 48px;
    }
    .disclaimer svg { flex-shrink: 0; color: var(--yellow); margin-top: 2px; }
    .disclaimer-text { font-size: 13.5px; color: var(--gray-dim); line-height: 1.65; }
    .disclaimer-text strong { color: var(--dark); }

    /* ══ PRICE TABLE SECTION ══ */
    .price-section { margin-bottom: 64px; }
    .price-section-head {
      display: flex; align-items: center; gap: 16px;
      padding-bottom: 16px; border-bottom: 2px solid rgba(0,0,0,.08);
      margin-bottom: 24px;
    }
    .price-icon { width: 48px; height: 48px; background: var(--dark); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .price-section-title { font-family: var(--font-h); font-size: 20px; font-weight: 800; color: var(--dark); }
    .price-section-title span { color: var(--yellow-dk); }
    .price-section-sub { font-size: 13.5px; color: var(--gray-mid); margin-top: 3px; }

    /* Responsive table wrapper */
    .table-wrap { overflow-x: auto; border-radius: var(--rad); border: 1px solid rgba(0,0,0,.08); }
    table.price-tbl { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 14px; }
    .price-tbl thead tr { background: var(--dark); }
    .price-tbl th { padding: 14px 18px; text-align: left; font-family: var(--font-h); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-lt); white-space: nowrap; }
    .price-tbl td { padding: 14px 18px; color: var(--gray-dim); border-bottom: 1px solid rgba(0,0,0,.05); line-height: 1.5; vertical-align: top; }
    .price-tbl tr:last-child td { border-bottom: none; }
    .price-tbl tr:nth-child(even) td { background: rgba(0,0,0,.018); }
    .price-tbl td:first-child { font-weight: 600; color: var(--dark); }
    .price-val { font-family: var(--font-h); font-weight: 800; color: var(--dark); white-space: nowrap; }
    .price-val.highlight { color: var(--yellow-dk); }
    .badge-pop { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: var(--yellow); color: var(--black); padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
    .badge-new { background: #10b981; color: #fff; }

    /* ══ PAKET CARDS ══ */
    .paket-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
    .paket-card { background: var(--white); border: 1px solid rgba(0,0,0,.09); border-radius: 12px; padding: 28px 22px; position: relative; transition: transform .25s, box-shadow .25s; }
    .paket-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--yellow); border-radius: 12px 12px 0 0; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
    .paket-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
    .paket-card:hover::before { transform: scaleX(1); }
    .paket-card.featured { background: var(--dark); border-color: var(--yellow); border-width: 2px; }
    .featured-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--yellow); color: var(--black); font-family: var(--font-h); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 14px; border-radius: 20px; white-space: nowrap; }
    .paket-letter { font-family: var(--font-h); font-size: 42px; font-weight: 900; color: rgba(0,0,0,.06); line-height: 1; margin-bottom: 10px; letter-spacing: -.04em; }
    .paket-card.featured .paket-letter { color: rgba(255,255,255,.08); }
    .paket-name { font-family: var(--font-h); font-size: 14px; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
    .paket-card.featured .paket-name { color: var(--yellow); }
    .paket-desc { font-size: 13px; color: var(--gray-dim); margin-bottom: 16px; line-height: 1.5; }
    .paket-card.featured .paket-desc { color: var(--gray-mid); }
    .paket-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
    .paket-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--gray-dim); line-height: 1.45; }
    .paket-card.featured .paket-list li { color: var(--gray-mid); }
    .paket-check { width: 17px; height: 17px; background: rgba(245,166,35,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
    .paket-check svg { color: var(--yellow-dk); }
    .paket-num { font-family: var(--font-h); font-size: 13px; font-weight: 800; color: var(--yellow-dk); flex-shrink: 0; }
    .paket-cta { margin-top: 20px; }
    .paket-cta a { display: block; text-align: center; font-family: var(--font-h); font-size: 13px; font-weight: 700; text-decoration: none; padding: 10px; border-radius: 6px; transition: background .2s; }
    .paket-card:not(.featured) .paket-cta a { background: rgba(245,166,35,.12); color: var(--yellow-dk); }
    .paket-card:not(.featured) .paket-cta a:hover { background: rgba(245,166,35,.22); }
    .paket-card.featured .paket-cta a { background: var(--yellow); color: var(--black); }
    .paket-card.featured .paket-cta a:hover { background: var(--yellow-lt); }

    /* ══ FAKTOR HARGA ══ */
    .faktor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
    .faktor-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 28px 22px; text-align: center; }
    .faktor-icon { width: 56px; height: 56px; background: rgba(245,166,35,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
    .faktor-name { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
    .faktor-desc { font-size: 13.5px; color: var(--gray-mid); line-height: 1.65; }

    /* ══ KALKULATOR ESTIMASI ══ */
    .calc-wrap { background: var(--white); border: 1px solid rgba(0,0,0,.09); border-radius: 12px; padding: 40px; }
    .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .form-group { margin-bottom: 20px; }
    .form-label { display: block; font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 7px; }
    .form-select, .form-input {
      width: 100%; padding: 12px 16px;
      border: 1.5px solid rgba(0,0,0,.14); border-radius: 6px;
      font-family: var(--font-b); font-size: 14px; color: var(--dark);
      background: var(--off); transition: border-color .2s;
      -webkit-appearance: none; appearance: none;
    }
    .form-select:focus, .form-input:focus { outline: none; border-color: var(--yellow); }
    .select-wrap { position: relative; }
    .select-wrap::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--gray-mid); font-size: 13px; }
    .result-box { background: var(--dark); border-radius: 10px; padding: 28px; }
    .result-title { font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--gray-mid); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; }
    .result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .result-row:last-of-type { border-bottom: none; }
    .result-key { font-size: 13px; color: var(--gray-mid); }
    .result-val { font-family: var(--font-h); font-size: 14px; font-weight: 700; color: var(--white); }
    .result-total { background: var(--yellow); border-radius: 8px; padding: 16px 20px; margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
    .result-total-key { font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--black); }
    .result-total-val { font-family: var(--font-h); font-size: 22px; font-weight: 900; color: var(--black); letter-spacing: -.02em; }
    .result-note { font-size: 12px; color: var(--gray-mid); margin-top: 12px; line-height: 1.6; }
    .calc-cta { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

    /* ══ FAQ ══ */
    .faq-list { max-width: 800px; margin: 48px auto 0; }
    .faq-item { border-bottom: 1px solid rgba(0,0,0,.08); }
    .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-h); font-size: 15px; font-weight: 600; color: var(--dark); }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-question svg { flex-shrink: 0; transition: transform .3s; color: var(--yellow); }
    details[open] .faq-question svg { transform: rotate(45deg); }
    .faq-answer { font-size: 14.5px; line-height: 1.75; color: var(--gray-dim); padding: 0 0 20px; max-width: 680px; }

    /* ══ CTA BOTTOM ══ */
    .cta-bottom { text-align: center; max-width: 640px; margin: 0 auto; }
    .cta-bottom-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 1024px) { .paket-grid { grid-template-columns: repeat(2, 1fr); } .faktor-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 768px) { .calc-grid { grid-template-columns: 1fr; } .section { padding: 64px 0; } .calc-wrap { padding: 24px; } }
    @media (max-width: 560px) { .paket-grid { grid-template-columns: 1fr; } .faktor-grid { grid-template-columns: 1fr; } }