/* =====================================================================
   Tema situs utama INVINESIA (index.html): hitam & abu-abu modern.
   Dimuat setelah landing.css; landing mitra (mitra.html) tetap memakai warna merek mitra.
   ===================================================================== */
:root {
  --bg: #09090b; --bg2: #0f0f12; --kartu: #141417; --ink: #fafafa; --ink2: #d4d4d8; --muted: #a1a1aa;
  --aksen: #e4e4e7; --aksen-gelap: #ffffff; --aksen-lembut: #232328; --garis: #232328;
  --gelap: #050506; --gelap2: #101013; --gelap-garis: #26262b;
  --f-judul: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --bayang: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}
body { background: var(--bg); }
::selection { background: #fafafa; color: #09090b; }

/* latar: kisi halus + cahaya samar */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 75% 0%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%);
}
.progres-gulir { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: linear-gradient(90deg, #52525b, #fafafa); transform: scaleX(0); transform-origin: 0 50%; }

/* tipografi */
.judul, .hero h1, .cta-kotak h2, .nominal, .angka-baris div b, .merek { font-family: var(--f-judul); }
.judul { font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.hero h1 { font-weight: 800; letter-spacing: -.045em; line-height: 1.02; font-size: clamp(40px, 6vw, 72px); }
.judul em, .hero h1 em, .cta-kotak h2 em {
  font-style: normal; color: transparent;
  background: linear-gradient(100deg, #ffffff 10%, #8b8b94 60%, #d4d4d8 90%); -webkit-background-clip: text; background-clip: text;
}
.label-atas { color: var(--muted); letter-spacing: .2em; }
.merek { font-weight: 800; letter-spacing: .02em; font-size: 20px; }
.lead { color: var(--ink2); opacity: 1; }
.sec-alt { background: transparent; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }

/* tombol */
.btn-utama, .btn-emas { background: #fafafa; color: #09090b; box-shadow: 0 0 0 1px #fafafa, 0 10px 30px -10px rgba(255,255,255,.35); }
.btn-utama:hover, .btn-emas:hover { background: #fff; color: #000; transform: translateY(-1px); }
.btn-garis, .btn-garis-terang { color: var(--ink); box-shadow: inset 0 0 0 1px #3f3f46; background: rgba(255,255,255,.02); }
.btn-garis:hover, .btn-garis-terang:hover { background: #18181b; box-shadow: inset 0 0 0 1px #71717a; }
.btn-terang { background: #fafafa; color: #09090b; }

/* navigasi */
.nav { background: rgba(9, 9, 11, .72); }
.nav.bergulir { border-bottom-color: var(--garis); }
.nav-link a { color: var(--ink2); }
.nav-menu { color: var(--ink); }
@media (max-width: 900px) { .nav-link { background: #0c0c0f; } }

/* hero */
.hero::before { background: radial-gradient(closest-side, rgba(255,255,255,.09), transparent 70%); opacity: 1; }
.pil { background: #141417; border-color: #2a2a30; color: var(--ink2); box-shadow: none; }
.pil b { background: #fafafa; color: #09090b; }
.hero-poin, .hero-poin .ik { color: var(--muted); }
.hero-hp { flex-direction: column; align-items: center; gap: 16px; }
.hp { background: linear-gradient(145deg, #3f3f46, #0b0b0d 55%); box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), 0 0 80px -20px rgba(255,255,255,.12); }
.mengambang { background: rgba(20, 20, 23, .78); border-color: rgba(255,255,255,.08); color: var(--ink); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
.mengambang .ik { background: #26262b; color: #fafafa; }
.ganti-tema { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 340px; }
.ganti-tema > span { font-size: 12px; color: var(--muted); margin-right: 2px; }
.ganti-tema button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #2a2a30; background: #121215; color: var(--ink2); border-radius: 999px; padding: 5px 11px 5px 6px; font: 500 12px var(--f-isi); cursor: pointer; transition: all .2s; }
.ganti-tema button i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--b) 50%, var(--a) 50%); box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.ganti-tema button:hover { border-color: #52525b; color: #fff; }
.ganti-tema button.aktif { background: #fafafa; color: #09090b; border-color: #fafafa; }

/* strip angka */
.strip { background: rgba(255,255,255,.015); border-color: var(--garis); }
.angka-baris div b { font-weight: 800; letter-spacing: -.03em; }
.strip-isi ul { font-family: var(--f-isi); font-style: normal; font-size: 15px; color: var(--muted); }
.strip-isi ul li::before { content: '•'; margin-right: 10px; color: #52525b; }

/* kartu fitur + efek sorotan kursor */
.fitur { background: var(--garis); border-color: var(--garis); }
.f, .sorot { position: relative; isolation: isolate; }
.f::after, .sorot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 70%);
}
.f:hover::after, .sorot:hover::after { opacity: 1; }
.f { background: var(--kartu); }
.f:hover { background: #17171b; }
.f .ik, .b2b-fitur .ik, .studio-langkah i { background: #1f1f24; color: #fafafa; box-shadow: inset 0 0 0 1px #2e2e35; }

/* galeri tema */
.saring button { background: #121215; border-color: #2a2a30; color: var(--ink2); }
.saring button:hover { border-color: #52525b; }
.saring button.aktif { background: #fafafa; border-color: #fafafa; color: #09090b; }
.kartu-tema .tema-mini { border-color: rgba(255,255,255,.08); box-shadow: 0 20px 40px -24px rgba(0,0,0,.9); }
.kartu-tema:hover .tema-mini { box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.25); }
.tema-info .lihat { color: var(--ink2); }
.lencana-adat { background: #232328; color: #d4d4d8; }

/* studio & langkah */
.studio-langkah li, .langkah li { background: var(--kartu); border-color: var(--garis); transition: border-color .2s, transform .2s; }
.studio-langkah li:hover, .langkah li:hover { border-color: #3f3f46; transform: translateY(-3px); }
.studio-langkah i { font-family: var(--f-judul); font-style: normal; font-weight: 700; font-size: 16px; }
.langkah li::before { font-family: var(--f-judul); font-style: normal; font-weight: 800; color: #3f3f46; }

/* harga konsumen */
.paket { background: var(--kartu); border-color: var(--garis); }
.paket li { border-color: var(--garis); }
.paket li .ik { color: var(--ink2); }
.nominal { font-weight: 800; letter-spacing: -.04em; }
.paket.unggulan { background: #fafafa; color: #09090b; border-color: #fafafa; box-shadow: 0 30px 80px -30px rgba(255,255,255,.25); }
.paket.unggulan .paket-ket, .paket.unggulan .nominal small { color: #52525b; }
.paket.unggulan li { border-color: #e4e4e7; }
.paket.unggulan li .ik { color: #09090b; }
.paket.unggulan .btn-emas, .paket.unggulan .btn-utama { background: #09090b; color: #fafafa; box-shadow: none; }
.pita-paket { background: #09090b; color: #fafafa; }

/* ---------- untuk bisnis ---------- */
.sec-gelap { background: #050506; color: var(--ink2); border-top: 1px solid var(--garis); }
.sec-gelap::before { background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); }
.sec-gelap .sub, .b2b-fitur p, .b2b-kotak .kecil, .sec-gelap .kecil { color: var(--muted); }
.sec-gelap .label-atas { color: var(--muted); }
.b2b-fitur div { background: #0e0e11; border-color: var(--gelap-garis); }
.b2b-subjudul { margin: 40px 0 16px; font: 700 20px var(--f-judul); color: #fff; letter-spacing: -.02em; }
.b2b-subjudul span { font: 400 14px var(--f-isi); color: var(--muted); margin-left: 8px; }
.kredit-paket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .kredit-paket { grid-template-columns: 1fr; } }
.kp { position: relative; padding: 26px; border-radius: 20px; background: #0e0e11; border: 1px solid var(--gelap-garis); transition: transform .25s, border-color .25s; }
.kp:hover { transform: translateY(-4px); border-color: #3f3f46; }
.kp.unggul { background: linear-gradient(160deg, #1c1c21, #0e0e11); border-color: #52525b; }
.kp-pita { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: #fafafa; color: #09090b; padding: 4px 10px; border-radius: 999px; }
.kp p { margin: 0; }
.kp-nama { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kp-kredit { margin-top: 14px !important; color: var(--muted); }
.kp-kredit b { font: 800 46px/1 var(--f-judul); color: #fff; letter-spacing: -.04em; margin-right: 4px; }
.kp-und { font-size: 14px; color: var(--ink2); margin-top: 4px !important; }
.kp-harga { margin-top: 18px !important; font: 700 22px var(--f-judul); color: #fff; }
.kp-per { font-size: 13px; color: var(--muted); }
.kp-per em { font-style: normal; font-weight: 700; color: #09090b; background: #d4d4d8; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.sec-gelap > .wadah > .kecil { margin: 14px 0 26px; }
.b2b-kotak { background: #0e0e11; border-color: var(--gelap-garis); }

/* kalkulator */
.kalkulator .k-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink2); margin: 14px 0 8px; }
.kalkulator output { font: 700 16px var(--f-judul); color: #fff; }
.kalkulator input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, #fafafa var(--isi, 9%), #2a2a30 var(--isi, 9%)); }
.kalkulator input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid #09090b; box-shadow: 0 0 0 1px #fafafa; }
.kalkulator input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid #09090b; }
.k-rupiah { display: flex; align-items: center; border: 1px solid #2e2e35; border-radius: 12px; background: #09090b; padding: 0 14px; }
.k-rupiah span { color: var(--muted); font-size: 15px; }
.k-rupiah input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 600 18px var(--f-isi); padding: 12px 8px; outline: none; }
.k-rupiah:focus-within { border-color: #a1a1aa; }
.k-hasil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.k-hasil div { background: #09090b; border: 1px solid #222227; border-radius: 14px; padding: 12px 14px; min-width: 0; }
.k-hasil span { display: block; font-size: 12px; color: var(--muted); }
.k-hasil b { display: block; font: 700 18px var(--f-judul); color: #fff; margin-top: 2px; overflow-wrap: anywhere; }
.k-hasil small { display: block; font-size: 11.5px; color: #71717a; margin-top: 2px; }
.k-hasil .k-untung { grid-column: 1 / -1; background: #fafafa; border-color: #fafafa; }
.k-hasil .k-untung span { color: #52525b; }
.k-hasil .k-untung b { color: #09090b; font-size: 28px; letter-spacing: -.03em; }
.k-hasil .k-untung b.minus { color: #b91c1c; }

/* pilihan alamat */
.opsi-alamat { display: grid; gap: 10px; }
.oa { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid #222227; background: #09090b; color: var(--ink2); font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.oa:hover { border-color: #3f3f46; }
.oa b { color: #fff; font-size: 15px; }
.oa code { grid-column: 1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.oa span { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.oa.aktif { border-color: #fafafa; background: #141417; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.oa.aktif code { color: #fff; }

/* FAQ, CTA, kaki */
.faq details { border-color: var(--garis); transition: background .2s; }
.faq summary { color: var(--ink); }
.faq summary::after { border-color: #3f3f46; filter: invert(1); }
.faq details[open] summary { color: #fff; }
.cta-kotak { background: linear-gradient(135deg, #1f1f24 0%, #09090b 70%); border: 1px solid #2a2a30; }
.cta-kotak::before { opacity: .06; }
.kaki { border-color: var(--garis); }
.kaki h4, .kaki .merek, .kaki a:hover { color: var(--ink); }
.kaki-bawah { border-color: var(--garis); }
.wa-mengambang { box-shadow: 0 12px 28px -8px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .kp, .studio-langkah li, .langkah li { transition: none; } }

/* logo garis "in" (putih) tanpa kotak */
.merek img.logo-garis { width: auto; height: 30px; border-radius: 0; object-fit: contain; }
.kaki .merek img.logo-garis { height: 34px; }

/* ===================== Landing ala gowedding ===================== */
/* navigasi transparan di atas hero, solid saat digulir */
.nav.nav-transparan { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .3s, border-color .3s; }
.nav.nav-transparan.solid { background: rgba(9, 9, 11, .82); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--garis); }
.nav-transparan .nav-link a { color: #fff; opacity: .85; }
@media (max-width: 900px) { .nav-transparan .nav-link { background: #0c0c0f; } }

/* hero foto sinematik */
.hero-sinema { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding: 110px 0 90px; text-align: center; color: #fff; }
.hs-latar, .hs-latar span { position: absolute; inset: 0; }
.hs-latar span { background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 8s ease; }
.hs-latar span.aktif { opacity: 1; transform: scale(1); }
.hero-sinema::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 40%, rgba(9,9,11,.92) 100%); }
.hs-isi { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero-sinema .pil { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #e4e4e7; backdrop-filter: blur(10px); }
.hs-kicker { margin: 4px 0 6px; font: 600 13px var(--f-isi); letter-spacing: .4em; text-transform: uppercase; color: #d4d4d8; }
.hero-sinema h1 { max-width: 900px; margin: 0 0 6px; }
.hs-putar { margin: 0 0 18px; font: 500 clamp(20px, 2.6vw, 30px) var(--f-judul); color: #d4d4d8; }
.hs-putar b { display: inline-block; color: #fff; font-weight: 800; border-bottom: 2px solid rgba(255,255,255,.5); }
.hs-putar b.ganti { animation: hs-ganti .5s ease; }
@keyframes hs-ganti { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-sinema .lead { max-width: 640px; margin-left: auto; margin-right: auto; color: #d4d4d8; }
.hero-sinema .hero-cta, .hero-sinema .hero-poin { justify-content: center; }
.hs-gulir { position: absolute; z-index: 1; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.5); }
.hs-gulir span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: hs-gulir 1.8s ease-in-out infinite; }
@keyframes hs-gulir { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .hs-gulir span, .hs-putar b.ganti { animation: none; } .hs-latar span { transition: none; } }

/* layanan */
.lay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .lay-grid { grid-template-columns: 1fr; } }
.lay-kartu { position: relative; min-height: 420px; border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; color: #fff; isolation: isolate; border: 1px solid var(--garis); }
.lay-foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .8s ease; }
.lay-kartu::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.85) 100%); }
.lay-kartu:hover .lay-foto { transform: scale(1.06); }
.lay-isi { display: grid; gap: 8px; padding: 26px; }
.lay-isi b { font: 800 26px/1.15 var(--f-judul); letter-spacing: -.02em; }
.lay-isi > span { color: #d4d4d8; font-size: 15px; }
.lay-isi em { font-style: normal; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.lay-isi em .ik { width: 16px; height: 16px; transition: transform .2s; }
.lay-kartu:hover .lay-isi em .ik { transform: translateX(4px); }
.lay-tambahan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 900px) { .lay-tambahan { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lay-tambahan { grid-template-columns: 1fr; } }
.lay-mini { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--kartu); border: 1px solid var(--garis); }
.lay-mini .ik { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: #1f1f24; color: #fafafa; flex: none; }
.lay-mini b { display: block; font-size: 15px; }
.lay-mini span { font-size: 13px; color: var(--muted); }

/* coba langsung di HP */
.coba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.coba-grid > * { min-width: 0; }
@media (max-width: 900px) { .coba-grid { grid-template-columns: 1fr; } }
.ganti-besar { justify-content: flex-start; max-width: none; gap: 8px; }
.ganti-besar button { padding: 8px 14px 8px 8px; font-size: 13px; }
.ganti-besar button i { width: 18px; height: 18px; }
.ganti-besar > span { width: 100%; margin-bottom: 2px; }

/* layanan detail: buku tamu & photobooth */
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ld-grid > * { min-width: 0; }
@media (max-width: 900px) { .ld-grid { grid-template-columns: 1fr; gap: 36px; } .ld-balik > :first-child { order: 2; } }
.ld-poin { list-style: none; padding: 0; margin: -18px 0 28px; display: grid; gap: 10px; }
.ld-poin li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink2); }
.ld-poin .ik { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #fafafa; }
.ld-visual { position: relative; padding-bottom: 40px; }
.mock-tv { border-radius: 18px; padding: 10px; background: linear-gradient(145deg, #3f3f46, #111114); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.mock-tv-layar { aspect-ratio: 16 / 9; border-radius: 10px; display: grid; place-content: center; text-align: center; gap: 4px; color: #fff;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65)), url("https://images.unsplash.com/photo-1606216794079-73f85bbd57d5?w=900&q=70&auto=format&fit=crop") center/cover; }
.mock-tv-layar small { font-size: 11px; letter-spacing: .35em; text-transform: uppercase; opacity: .85; }
.mock-tv-layar b { font: 500 clamp(28px, 4vw, 46px) 'Cormorant Garamond', serif; }
.mock-tv-layar span { font-size: 12px; opacity: .75; }
.mock-scan { position: absolute; right: -6px; bottom: 0; width: 150px; padding: 12px; border-radius: 22px; background: #0e0e11; border: 1px solid #2a2a30; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); text-align: center; font-size: 12px; color: #86efac; }
.mock-qr { aspect-ratio: 1; border-radius: 10px; margin-bottom: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v7H0zM14 0h7v7h-7zM0 14h7v7H0z' fill='%23000'/%3E%3Cpath d='M1 1h5v5H1zM15 1h5v5h-5zM1 15h5v5H1z' fill='%23fff'/%3E%3Cpath d='M2 2h3v3H2zM16 2h3v3h-3zM2 16h3v3H2zM8 1h1v2H8zM10 0h2v1h-2zM9 3h3v1H9zM8 5h2v2H8zM11 6h2v2h-2zM8 8h3v1H8zM0 8h2v1H0zM3 9h2v2H3zM6 8h1v3H6zM12 9h3v1h-3zM16 8h2v2h-2zM19 9h2v3h-2zM8 11h2v2H8zM11 12h3v1h-3zM15 11h1v3h-1zM17 12h2v2h-2zM8 14h1v3H8zM10 15h3v2h-3zM14 15h2v1h-2zM17 15h4v1h-4zM9 18h4v1H9zM14 17h2v4h-2zM17 18h2v3h-2zM20 17h1v2h-1zM8 20h4v1H8z' fill='%23000'/%3E%3C/svg%3E") center/86% no-repeat; }
.booth-langkah { list-style: none; padding: 0; margin: -18px 0 28px; display: grid; gap: 10px; }
.booth-langkah li { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--kartu); border: 1px solid var(--garis); }
.booth-langkah i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--f-judul); font-style: normal; background: #fafafa; color: #09090b; }
.booth-langkah b { font-size: 15px; }
.booth-langkah span { color: var(--muted); font-size: 14px; }
#photobooth .hp { height: 620px; }

/* testimoni */
.testi-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.testi { margin: 0; padding: 24px; border-radius: 20px; background: var(--kartu); border: 1px solid var(--garis); display: flex; flex-direction: column; gap: 12px; }
.testi-bintang { color: #fbbf24; letter-spacing: .1em; }
.testi blockquote { margin: 0; color: var(--ink2); font-size: 15px; flex: 1; }
.testi figcaption { font-weight: 700; }
.testi figcaption span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }

/* B2B: kartu contoh website mitra */
.contoh-situs { display: block; text-decoration: none; color: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #2a2a30; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); transition: transform .3s; }
.contoh-situs:hover { transform: translateY(-4px); }
.cs-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #18181b; }
.cs-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3f3f46; }
.cs-bar b { margin-left: 10px; font-size: 12px; font-weight: 500; color: #a1a1aa; background: #0e0e11; padding: 3px 12px; border-radius: 999px; }
.cs-layar { aspect-ratio: 16 / 10; display: grid; place-content: center; text-align: center; gap: 8px; padding: 20px;
  background: linear-gradient(rgba(0,0,0,.45), rgba(9,9,11,.85)), url("https://images.unsplash.com/photo-1460978812857-470ed1c77af0?w=1000&q=70&auto=format&fit=crop") center/cover; }
.cs-layar small { font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: #d4d4d8; }
.cs-layar strong { font: 800 clamp(20px, 2.6vw, 30px)/1.15 var(--f-judul); letter-spacing: -.03em; }
.cs-layar em { font-style: normal; font-size: 13px; color: #e4e4e7; }

/* B2B: paket undangan & pilihan paket di kalkulator */
.paket-und { margin-bottom: 8px; }
.kp-fitur { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 13px; color: #d4d4d8; }
.kp-fitur li::before { content: '✓  '; color: #a1a1aa; }
.k-pilih { width: 100%; margin: 6px 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid #3f3f46; background: #0e0e11; color: #fff; font: inherit; }