/* ==========================================================================
   VIRA SUZUKI — GADING SERPONG
   Arah desain: "warung showroom". Merah-merah hangat seperti spanduk
   dealer Sweeney, huruf sans tebal, kartu rounded lembut, dan satu aksen
   kuning-krem untuk hal yang bisa diklik. Ramah, bukan korporat kaku —
   Vira posisinya sales supervisor yang approachable.

   Token
   --------------------------------------------------------------------------
   Merah utama #c74343 dipakai pada latar besar, bukan teks kecil,
   supaya tidak pernah jadi讀 legibility. Teks merah selalu di atas putih
   dengan ukuran >= 18px atau weight >= 600.
   Aksen kuning-krem #f5c518 hanya untuk CTA sekunder dan highlight,
   dipakai dengan teks gelap di atasnya.
   ========================================================================== */

:root {
    --v-red: #c74343;
    --v-red-deep: #a53232;
    --v-red-ink: #7d2424;
    --v-red-soft: #fdf2f2;
    --v-cream: #f5c518;
    --v-cream-ink: #3a2c00;

    --v-bg: #fffdfb;
    --v-card: #ffffff;
    --v-ink: #1a1a1a;
    --v-body: #45403c;
    --v-mute: #6b6460;
    --v-line: #e8e2dc;
    --v-line-2: #f2ede7;

    --v-wa: #25d366;
    --v-wa-deep: #128c7e;

    --v-r-sm: 10px;
    --v-r-md: 16px;
    --v-r-lg: 24px;

    --v-gutter: clamp(1rem, 4vw, 2rem);
    --v-sec-y: clamp(3rem, 6.5vw, 5.25rem);

    --v-ease: cubic-bezier(.25, .7, .3, 1);
    --v-dur: 220ms;
    --v-ease-reveal: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 84px;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--v-body);
    background: var(--v-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--v-ink);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, select, input, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--v-cream);
    outline-offset: 3px;
    border-radius: var(--v-r-sm);
}

::selection { background: var(--v-red); color: #fff; }

.container { width: min(100% - var(--v-gutter) * 2, 1200px); margin-inline: auto; }

/* ---------------------------------------------------------------- header */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--v-red);
    box-shadow: 0 2px 12px rgba(90, 26, 26, .18);
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 66px;
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}
.nav__logo i { color: var(--v-cream); }
.nav__list { display: flex; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; }
.nav__link {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    font-size: .93rem;
    padding-block: .4rem;
    border-radius: var(--v-r-sm);
    transition: color var(--v-dur) var(--v-ease);
}
.nav__link:hover, .nav__link.active { color: var(--v-cream); }

/* ------------------------------------------------------------------ hero */
.home {
    position: relative;
    overflow: hidden;
    min-height: min(88vh, 720px);
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(26, 26, 26, .74), rgba(26, 26, 26, .78)),
        url('../img/background.webp') center / cover no-repeat;
    color: #fff;
    text-align: center;
    padding: clamp(3.5rem, 10vh, 6rem) 0 clamp(3rem, 8vh, 5rem);
}
.home__title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    margin-bottom: .9rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}
.home__subtitle {
    display: inline-block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-cream);
    margin-bottom: 1.1rem;
}
.home__tagline {
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    color: rgba(255, 255, 255, .92);
    max-width: 48ch;
    margin: 0 auto 2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .9rem 2rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    font-size: .97rem;
    cursor: pointer;
    transition: transform var(--v-dur) var(--v-ease),
                background var(--v-dur) var(--v-ease),
                border-color var(--v-dur) var(--v-ease),
                color var(--v-dur) var(--v-ease);
}
.button--primary { background: var(--v-cream); color: var(--v-cream-ink); }
.button--primary:hover { background: #e0b215; transform: translateY(-2px); }
.button--secondary { background: transparent; border-color: #fff; color: #fff; }
.button--secondary:hover { background: #fff; color: var(--v-red); }

/* ---------------------------------------------------------------- section */
.section { padding-block: var(--v-sec-y); }
.section__title {
    text-align: center;
    font-size: clamp(1.6rem, 3.8vw, 2.35rem);
    font-weight: 800;
    color: var(--v-ink);
    margin-bottom: .7rem;
}
.section__subtitle {
    text-align: center;
    color: var(--v-mute);
    font-size: 1rem;
    max-width: 58ch;
    margin: 0 auto 2.5rem;
}

/* ------------------------------------------------------------------ promo */
.promo__filters { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.25rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--v-body);
    cursor: pointer;
    transition: border-color var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease);
}
.filter__item:hover { border-color: var(--v-red); color: var(--v-red); }
.filter__item.active { background: var(--v-red); border-color: var(--v-red); color: #fff; }

.promo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
}
.promo__card {
    display: flex;
    flex-direction: column;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-lg);
    overflow: hidden;
    transition: transform var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
}
.promo__card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(90, 26, 26, .12); }
.card__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__content { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.card__header h3 { font-size: 1.1rem; font-weight: 700; }
.price { font-size: 1.2rem; font-weight: 800; color: var(--v-red); font-variant-numeric: tabular-nums; }
.variant { font-size: .87rem; color: var(--v-mute); }

.badge {
    flex: 0 0 auto;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #fff;
}
.badge--best { background: var(--v-red); }
.badge--populer, .badge--limited { background: var(--v-cream); color: var(--v-cream-ink); }
.badge--promo { background: var(--v-wa-deep); }

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    margin-top: auto;
    background: var(--v-wa);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    transition: background var(--v-dur) var(--v-ease);
}
.btn-whatsapp:hover { background: var(--v-wa-deep); }

/* ------------------------------------------------------------- price table */
.price-table {
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-md);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.price-table tr { border-bottom: 1px solid var(--v-line-2); }
.price-table tr:last-child { border-bottom: 0; }
.price-table td, .price-table th { padding: .95rem 1.2rem; text-align: left; font-size: .94rem; }
.price-table td:last-child { text-align: right; font-weight: 800; color: var(--v-red); }

/* --------------------------------------------------------------- gallery */
.rounded { border-radius: var(--v-r-md); }

/* ------------------------------------------------------------ testimonial */
.testi__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.1rem;
}
.tcard {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.4rem 1.3rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-md);
}
.tcard__stars { color: var(--v-cream); font-size: .1rem; letter-spacing: .1em; }
.tcard__quote { font-size: .92rem; line-height: 1.75; color: var(--v-body); font-style: italic; }
.tcard__who b { display: block; color: var(--v-ink); font-size: .95rem; }
.tcard__who span { display: block; color: var(--v-mute); font-size: .82rem; }

/* ------------------------------------------------------------------ area */
.area-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.area-chip {
    padding: .6rem 1.2rem;
    background: var(--v-red-soft);
    border: 1px solid #f2d4d4;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--v-red-ink);
}
.area-chip span { font-size: .82rem; opacity: .75; }

/* --------------------------------------------------------------- contact */
.contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.contact__item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-lg);
}
.contact__item i { font-size: 2.6rem; color: var(--v-red); margin-bottom: .9rem; display: block; }
.contact__item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.contact__item p { font-size: .92rem; color: var(--v-mute); }
.contact__item iframe { width: 100%; border: 0; border-radius: var(--v-r-md); margin-top: 1rem; }

.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: .9rem;
    padding: .7rem 1.4rem;
    background: var(--v-red);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    transition: background var(--v-dur) var(--v-ease);
}
.btn-contact:hover { background: var(--v-red-deep); }
.btn--secondary { background: transparent; border: 2px solid var(--v-red); color: var(--v-red); }
.btn--secondary:hover { background: var(--v-red); color: #fff; }

/* ----------------------------------------------------------- social media */
.social-icons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 190px;
    padding: 1.5rem 1.6rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-md);
    transition: border-color var(--v-dur) var(--v-ease);
}
.social-link:hover { border-color: var(--v-red); }
.icon-circle {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: var(--v-red-soft);
    border-radius: 50%;
    color: var(--v-red);
    font-size: 1.7rem;
    margin-bottom: .3rem;
}
.platform-name { color: var(--v-ink); font-weight: 700; font-size: .92rem; }
.follow-text { color: var(--v-mute); font-size: .78rem; }

/* ------------------------------------------------------------- trust band */
.trustband { background: var(--v-red); color: #fff; }
.trustband__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .2);
}
.trustband__grid > div { background: var(--v-red); padding: 1.4rem 1rem; text-align: center; }
.trustband b {
    display: block;
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: .2rem;
}
.trustband small { font-size: .84rem; color: rgba(255, 255, 255, .9); }

.tstat { font-variant-numeric: tabular-nums; }
.countdown-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    background: var(--v-cream);
    color: var(--v-cream-ink);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- cta */
.cta-band { background: var(--v-red); color: #fff; }
.cta-links { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ quiz */
.qz-box {
    max-width: 620px;
    margin-inline: auto;
    padding: 1.7rem 1.55rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-lg);
}
.qz-label {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--v-mute);
    margin: 1rem 0 .35rem;
}
.qz-select {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--v-bg);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-sm);
}
.qz-btn {
    width: 100%;
    margin-top: 1.4rem;
    border: 0;
    background: var(--v-wa);
    color: #fff;
    min-height: 52px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
}
.qz-btn:hover { background: var(--v-wa-deep); }
.qz-out {
    display: none;
    margin-top: 1.25rem;
    padding: 1.05rem 1.15rem;
    background: var(--v-red-soft);
    border-radius: var(--v-r-md);
    font-size: .92rem;
    line-height: 1.85;
    color: var(--v-ink);
}

/* ---------------------------------------------------------- spesifikasi */
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.1rem; }
.vs-card {
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-lg);
    padding: 1.5rem 1.4rem;
}
.vs-card h3 { font-size: 1.12rem; margin-bottom: .6rem; }
.vs-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.vs-list li::before { content: '+ '; color: var(--v-red); font-weight: 800; }
.vs-note { margin-top: .9rem; font-size: .78rem; color: var(--v-mute); }
.vs-bonus {
    margin-top: 1rem;
    padding: .9rem 1.05rem;
    background: #fffbe9;
    border: 1px solid #f2e4ac;
    border-radius: var(--v-r-md);
}
.vs-bonus b {
    display: block;
    margin-bottom: .5rem;
    color: var(--v-red);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vs-bonus ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; }
.vs-bonus ul li::before { content: '+ '; color: var(--v-red); font-weight: 700; }
.vs-tag {
    display: inline-block;
    padding: .3rem .75rem;
    background: var(--v-red-soft);
    border: 1px solid #f2d4d4;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--v-red-ink);
    margin-bottom: .7rem;
}
.vs-hero {
    background: linear-gradient(135deg, var(--v-red), var(--v-red-deep));
    color: #fff;
    border-radius: var(--v-r-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.vs-hero h2 { color: #fff; font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: .6rem; }
.vs-hero p { color: rgba(255, 255, 255, .92); }
.vs-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.vs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: .8rem 1.6rem;
    background: var(--v-cream);
    color: var(--v-cream-ink);
    border-radius: 999px;
    font-weight: 700;
    font-size: .94rem;
    transition: background var(--v-dur) var(--v-ease);
}
.vs-btn:hover { background: #e0b215; }
.vs-btn--ghost { background: transparent; border: 2px solid #fff; color: #fff; }
.vs-btn--ghost:hover { background: #fff; color: var(--v-red); }
.vs-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.vs-chips span {
    padding: .5rem 1.05rem;
    background: var(--v-red-soft);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--v-red-ink);
}
.vs-seo {
    margin-top: 1rem;
    padding-left: .9rem;
    border-left: 2px solid var(--v-line);
    font-size: .87rem;
    color: var(--v-mute);
    line-height: 1.7;
}
.vs-foot { background: var(--v-ink); color: #9b948f; padding: 2.2rem 0; font-size: .85rem; }
.vs-foot a { color: #d8d2cd; }
.vs-foot a:hover { color: var(--v-cream); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--v-ink); color: #9b948f; padding: 2.4rem 0; text-align: center; font-size: .87rem; }
.footer .quote { font-style: italic; margin-top: .5rem; color: var(--v-cream); }

/* ------------------------------------------------------- overlay & slider */
.harga-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(20, 20, 20, .92);
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.harga-overlay.active { display: flex; }
.harga-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 20;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--v-red);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
}
.promo-slider { position: relative; max-width: 92%; max-height: 88vh; overflow: hidden; border-radius: var(--v-r-md); min-height: 200px; }
.promo-slider .slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .5s ease;
}
.promo-slider .slide.active { opacity: 1; }
.promo-slider .slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
}
.promo-slider .slide-btn.prev { left: 10px; }
.promo-slider .slide-btn.next { right: 10px; }
.promo-slider .slide-dots {
    position: absolute;
    bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center;
    gap: 8px;
    z-index: 2;
}
.promo-slider .slide-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    border: 0;
    padding: 0;
}
.promo-slider .slide-dots span.active { background: #fff; }

.promo-popup {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 9998;
    width: 320px; max-width: 88vw; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--v-ink);
    border-radius: var(--v-r-lg);
    overflow: hidden;
    animation: vSlideUp .5s var(--v-ease) both;
}
.promo-popup img { width: 100%; }
.popup-close {
    position: absolute; top: 10px; right: 10px;
    z-index: 20;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--v-red); color: #fff;
    border: 0; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer;
}
.popup-footer { padding: 1.1rem; text-align: center; background: linear-gradient(135deg, var(--v-cream), #e0b215); }
.btn-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
    background: #fff;
    color: var(--v-red);
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
}
.btn-book:hover { background: #f6f2ee; }
.promo-trigger {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 9997;
    display: none;
    align-items: center;
    gap: .5rem;
    width: 58px; height: 58px;
    justify-content: center;
    background: var(--v-cream);
    color: var(--v-cream-ink);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(199, 67, 67, .4);
    cursor: pointer;
}
.promo-trigger.show { display: flex; }
@keyframes vSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- utilities */
.rounded { border-radius: 16px; max-height: 50vh; }
.lead { font-size: 1.08rem; color: var(--v-body); }
.note { font-size: .84rem; color: var(--v-mute); }

/* ------------------------------------------ tombol CTA di cta-band (harga) */
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .92); }
.btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .9rem 2rem;
    background: var(--v-cream);
    color: var(--v-cream-ink);
    border-radius: 999px;
    font-weight: 800;
    font-size: .97rem;
    transition: background var(--v-dur) var(--v-ease);
}
.btn-light:hover { background: #e0b215; }
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .9rem 2rem;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .97rem;
    transition: background var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease);
}
.btn-ghost:hover { background: #fff; color: var(--v-red); }

/* -------------------------------------- bonus di kartu promo (halaman promo) */
.bonus__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--v-red);
    font-size: .86rem;
    letter-spacing: .04em;
    margin: 1rem 0 .6rem;
}
.bonus__note {
    font-size: .78rem;
    color: var(--v-mute);
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--v-line-2);
}

/* --------------------------------------------- kalkulator (halaman harga) */
.page { padding-block: var(--v-sec-y); }
.calc {
    max-width: 640px;
    margin-inline: auto;
    padding: 1.7rem 1.55rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-lg);
}
.calc label {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--v-mute);
    margin: 1rem 0 .35rem;
}
.calc input, .calc select {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--v-bg);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-sm);
    transition: border-color var(--v-dur) var(--v-ease);
}
.calc input:focus, .calc select:focus { border-color: var(--v-red); }
.calc .btn-whatsapp { width: 100%; margin-top: 1.4rem; border: 0; cursor: pointer; }
.calc-out {
    display: none;
    margin-top: 1.25rem;
    padding: 1.05rem 1.15rem;
    background: var(--v-red-soft);
    border-radius: var(--v-r-md);
    font-size: .92rem;
    line-height: 1.85;
    color: var(--v-ink);
    font-variant-numeric: tabular-nums;
}
.calc-out.show { display: block; }

/* ------------------------------------------------- thumb harga (promo page) */
.harga-thumb {
    max-width: 460px;
    margin: 1.5rem auto 2.5rem;
    border-radius: var(--v-r-md);
    cursor: pointer;
    transition: transform var(--v-dur) var(--v-ease);
}
.harga-thumb:hover { transform: scale(1.02); }
.close-harga { font-size: 1.4rem; }
.promo-trigger:hover { background: #e0b215; }
.filter__item:hover:not(.active) { background: var(--v-red-soft); }

/* --------------------------------------------- tombol WA di halaman spesifikasi */
.vs-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 1.5rem;
    background: var(--v-wa);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    transition: background var(--v-dur) var(--v-ease);
}
.vs-wa:hover { background: var(--v-wa-deep); }

/* ------------------------------------------------------------ scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--v-ink); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v-red), var(--v-red-deep));
    border-radius: 6px;
    border: 2px solid var(--v-ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--v-red); }
::-webkit-scrollbar-corner { background: var(--v-ink); }

/* --------------------------------------- filter MixItUp (kelas utilitas) */
.mix, .best, .populer { margin: 0; padding: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .nav__list { display: none; }
    .nav__more {
        display: grid;
        place-items: center;
        width: 44px; height: 44px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        font-size: 1.6rem;
        border-radius: var(--v-r-sm);
        cursor: pointer;
    }
    .nav__drop {
        display: none;
        position: fixed;
        top: 66px; left: 0; right: 0;
        background: var(--v-red-deep);
        padding: .5rem var(--v-gutter) 1rem;
        box-shadow: 0 14px 30px rgba(90, 26, 26, .3);
        z-index: 999;
    }
    .nav__drop.open { display: block; }
    .nav__drop a { display: block; padding: .85rem 0; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .15); }
}

@media (max-width: 640px) {
    .promo__grid { grid-template-columns: 1fr; }
    .section__subtitle { font-size: .95rem; }
    .contact__item { padding: 1.6rem 1.2rem; }
    .harga-overlay { padding: 1rem .75rem; }
}

/* ==========================================================================
   A11Y
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .button:hover, .promo__card:hover { transform: none; }
}

@media print {
    .header, .v-appbar, .wa-float, .promo-popup, .promo-trigger { display: none !important; }
    body { background: #fff; color: #000; }
    .home { background: none; color: #000; min-height: 0; }
}