:root { --ink:#172033; --muted:#667085; --brand:#f97316; --brand-dark:#c2410c; --soft:#fff7ed; }
html { scroll-behavior:smooth; }
body { color:var(--ink); background:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.navbar-brand { color:var(--ink); }
.brand-mark { display:inline-grid; place-items:center; width:34px; height:34px; margin-right:8px; border-radius:10px; background:var(--brand); color:#fff; }
.nav-link { color:#475467; font-weight:600; }
.nav-link:hover { color:var(--brand-dark); }
.btn-brand { border-color:var(--brand); background:var(--brand); color:#fff; font-weight:700; }
.btn-brand:hover { border-color:var(--brand-dark); background:var(--brand-dark); color:#fff; }
.language-switch { display:flex; gap:2px; padding:3px; border:1px solid #e4e7ec; border-radius:999px; }
.language-switch button { width:38px; height:32px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:12px; font-weight:800; }
.language-switch button.active { background:var(--ink); color:#fff; }
.hero-section { overflow:hidden; background:linear-gradient(145deg,#fff 15%,#fff7ed 100%); }
.min-vh-75 { min-height:75vh; padding-top:70px; padding-bottom:70px; }
.section-label { color:var(--brand-dark); font-size:.78rem; font-weight:800; letter-spacing:.14em; }
.hero-image-wrap { position:relative; max-width:590px; margin-inline:auto; padding:18px; border-radius:32px; background:#fff; box-shadow:0 28px 70px rgba(124,45,18,.16); transform:rotate(1.5deg); }
.hero-image { border-radius:22px; }
.price-badge { position:absolute; right:18px; bottom:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:154px; height:154px; padding:12px; border:8px solid #fff; border-radius:50%; background:var(--brand); color:#fff; box-shadow:0 14px 34px rgba(194,65,12,.32); transform:rotate(-7deg); }
.price-badge small { margin-bottom:4px; font-size:.75rem; font-weight:800; letter-spacing:.13em; line-height:1; }
.price-badge strong { max-width:100%; font-size:clamp(1.65rem,3vw,2.2rem); font-weight:850; line-height:1.05; letter-spacing:-.04em; white-space:nowrap; }
.py-lg-6 { padding-top:6rem; padding-bottom:6rem; }
.sample-card { position:relative; display:block; width:100%; overflow:hidden; padding:0; border:0; border-radius:22px; background:#fff; box-shadow:0 8px 28px rgba(16,24,40,.08); text-align:left; }
.sample-card img { width:100%; aspect-ratio:1; object-fit:cover; transition:transform .35s ease; }
.sample-card span { position:absolute; right:14px; bottom:14px; padding:8px 12px; border-radius:999px; background:rgba(23,32,51,.86); color:#fff; font-size:.75rem; font-weight:700; opacity:0; transform:translateY(6px); transition:.25s ease; }
.sample-card:hover img { transform:scale(1.025); }
.sample-card:hover span { opacity:1; transform:none; }
.section-intro { max-width:680px; }
.step-card { padding:32px; border:1px solid #eaecf0; border-radius:20px; background:#fff; }
.step-card > span { display:inline-block; margin-bottom:28px; color:var(--brand); font-size:2rem; font-weight:800; }
.step-card h3 { font-size:1.25rem; font-weight:750; }
.step-card p { margin:0; color:var(--muted); line-height:1.7; }
.order-bg { background:var(--ink); }
.pricing-card,.checkout-card { padding:38px; border-radius:24px; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.12); }
.price { font-size:5rem; line-height:1; font-weight:850; letter-spacing:-.06em; }
.price sup { margin-right:5px; font-size:1.15rem; letter-spacing:0; vertical-align:top; }
.price-idr { margin:8px 0 14px; color:var(--brand-dark); font-size:1.65rem; font-weight:800; }
.pricing-card li { font-weight:600; }
.btn-whatsapp { border-color:#16a34a; background:#16a34a; color:#fff; font-weight:700; }
.btn-whatsapp:hover { border-color:#15803d; background:#15803d; color:#fff; }
.manual-payments { padding-top:20px; border-top:1px solid #eaecf0; }
.payment-method { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #eaecf0; }
.payment-method > div { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; min-width:0; }
.payment-method small { color:var(--muted); font-size:.72rem; }
.payment-method strong { grid-column:2; font-size:1rem; letter-spacing:.02em; }
.payment-method .account-name { grid-column:2; margin-top:2px; }
.payment-method .payment-amount { grid-column:2; display:inline-block; width:max-content; margin-top:6px; padding:4px 8px; border-radius:7px; background:#fff7ed; color:var(--brand-dark); font-size:.78rem; font-weight:800; }
.payment-logo { grid-row:1 / span 3; display:grid; place-items:center; width:54px; height:38px; border-radius:9px; color:#fff; font-size:.72rem; font-weight:850; }
.payment-logo.gopay { background:#00aed6; }
.payment-logo.dana { background:#118eea; }
.payment-logo.bca { background:#075ba7; }
.payment-logo.qris { background:#111827; }
.payment-copy { flex:0 0 auto; }
.qris-payment { margin-bottom:14px; padding:16px; border:1px solid #d0d5dd; border-radius:16px; background:#f9fafb; }
.qris-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.qris-heading > div { display:flex; align-items:center; gap:11px; }
.qris-heading > div > div { display:grid; }
.qris-heading small { color:var(--muted); font-size:.7rem; }
.qris-heading b { color:var(--brand-dark); }
.qris-image { display:block; width:100%; max-width:320px; margin:0 auto 12px; border-radius:14px; box-shadow:0 6px 20px rgba(16,24,40,.1); }
.qris-modal-image { width:auto; max-width:100%; max-height:78vh; }
@media (max-width:575.98px) { .qris-heading { align-items:flex-start !important; } .qris-heading .payment-logo { width:46px; } }
@media (max-width:991.98px) { .min-vh-75 { min-height:auto; } .navbar-collapse { background:#fff; } .price-badge { right:14px; bottom:18px; width:130px; height:130px; border-width:7px; } .price-badge strong { font-size:1.8rem; } .py-lg-6 { padding-top:4rem; padding-bottom:4rem; } }
@media (max-width:575.98px) { .display-3 { font-size:2.7rem; } .hero-image-wrap { padding:10px; border-radius:22px; } .hero-image { border-radius:15px; } .price-badge { right:10px; bottom:12px; width:112px; height:112px; border-width:6px; } .price-badge small { font-size:.62rem; } .price-badge strong { font-size:1.5rem; } .sample-grid .col-6 { padding-left:6px; padding-right:6px; } .sample-card { border-radius:14px; } .sample-card span { display:none; } .pricing-card,.checkout-card { padding:26px; } }