/* ARBA International Grup website, shared styles for every page.
   Type: Apple's San Francisco through the system stack (Regular 400, Bold 700). */
:root {
  --canvas: #FFFFFF;
  --block: #F2F3F5;
  --inset: #F4F5F8;
  --ink: #15161C;
  --ink-soft: #2B2E38;
  --muted: #5B6070;
  --line: #E5E7EB;
  --blue: #4458A2;
  --blue-soft: #5468B4;
  --blue-deep: #384692;
  --blue-tint: #EEF0F8;
  --navy: #0E1330;
  --navy-2: #161C42;
  --on-navy: #B9C0DE;
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sf: var(--font-sf);
  /* Weight roles, adjustable from Control Center > Tipografi */
  --w-display: 300; --w-strong: 800; --w-title: 700; --w-body: 400;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sf); font-weight: var(--w-body); -webkit-font-smoothing: antialiased; }
html[data-font="inter"] { --sf: var(--font-inter); font-optical-sizing: auto; }
b, strong { font-weight: var(--w-strong); }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.container { max-width: 1160px; margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Navigation */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; background: var(--canvas); }
.nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 80; padding-block: 12px; }
.nav { display: flex; align-items: center; gap: 12px; max-width: 1160px; margin: 0 auto; padding: 6px 6px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: 0 10px 30px rgba(20, 28, 55, .08), inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 1.5px rgba(20, 28, 55, .05); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: #FFFFFF; } }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); white-space: nowrap; padding-right: 6px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; display: block; }
.brand span { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.nav__links { display: none; margin: 0 auto; padding: 0; list-style: none; gap: 2px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; white-space: nowrap; border-radius: 999px; color: var(--muted); font-size: 14.5px; text-decoration: none; transition: background 180ms var(--ease), color 180ms var(--ease); }
.nav__links a:hover { color: var(--ink); background: rgba(255, 255, 255, .9); }
.nav__links a[aria-current="page"] { color: #FFFFFF; font-weight: 700; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); box-shadow: 0 6px 14px rgba(56, 70, 146, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nav__menu { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.nav__menu svg { width: 20px; height: 20px; fill: currentColor; }
.drawer { max-width: 1160px; margin: 8px auto 0; padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .9); box-shadow: 0 20px 40px rgba(20, 28, 55, .14), inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* Semua item menu harus terjangkau dan bisa diklik: daftar bisa digulir di layar pendek, dan berada di atas banner cookie serta tombol melayang saat terbuka */
.drawer { max-height: calc(100vh - 100px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.drawer-open .nav-wrap { z-index: 96; }
.drawer a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 18px; text-decoration: none; color: var(--ink); font-size: 16px; }
.drawer a[aria-current="page"] { background: var(--blue-tint); color: var(--blue); font-weight: 700; }
@media (min-width: 1024px) { .nav__links { display: flex; } .nav__menu, .drawer { display: none !important; } }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; font: 700 15px/1 var(--sf); text-decoration: none; cursor: pointer; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn--primary { color: #FFFFFF; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); box-shadow: 0 8px 18px rgba(56, 70, 146, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { color: var(--ink); background: #FFFFFF; box-shadow: 0 2px 8px rgba(20, 28, 55, .06), inset 0 0 0 1px var(--line); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 700; text-decoration: none; }
.link svg { width: 16px; height: 16px; fill: currentColor; transition: transform 180ms var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* Page header */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 110px) clamp(40px, 6vw, 80px); text-align: center; }
.page-hero::before { content: ""; position: absolute; left: 50%; top: -30%; width: 1100px; height: 640px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(68, 88, 162, .13), transparent 70%); pointer-events: none; }
.crumbs { position: relative; display: inline-flex; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #B6BAC6; }
.page-hero h1 { position: relative; margin: 0 auto; max-width: 18ch; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.06; font-weight: var(--w-display); letter-spacing: -0.025em; text-wrap: balance; }
.page-hero h1 b { color: var(--blue); }
.page-hero p { position: relative; margin: 20px auto 0; max-width: 60ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--muted); text-wrap: balance; }
.page-hero .actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.reveal { animation: up 800ms var(--ease) both; }
.reveal:nth-child(2) { animation-delay: 90ms; } .reveal:nth-child(3) { animation-delay: 180ms; } .reveal:nth-child(4) { animation-delay: 270ms; }
@keyframes up { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Sections */
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--block { background: var(--block); }
.head { max-width: 640px; margin: 0 0 clamp(28px, 4vw, 44px); }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: var(--w-display); letter-spacing: -0.02em; text-wrap: balance; }
.head h2 .q { color: #7E8494; }
.head h2 b { color: var(--blue); }
.head p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Cards */
.tile-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 26px; border-radius: 28px; background: #FFFFFF; box-shadow: 0 14px 34px rgba(20, 28, 55, .08), inset 0 0 0 1px var(--line); overflow: hidden; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.tile-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20, 28, 55, .12), inset 0 0 0 1px var(--line); }
.tile-card::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-200%) skewX(-18deg); pointer-events: none; }
.tile-card:hover::after { transition: transform 900ms var(--ease); transform: translateX(480%) skewX(-18deg); }
.tile-card h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: var(--w-title); letter-spacing: -0.01em; }
.tile-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; color: #FFFFFF; background: linear-gradient(135deg, #A6ADD6 0%, #6C77BA 34%, #3F4C9E 68%, #313E8C 100%); box-shadow: 0 10px 20px rgba(56, 70, 146, .26), inset 0 1px 0 rgba(255, 255, 255, .45); }
.ico svg { width: 26px; height: 26px; fill: currentColor; }
.brand-card { padding: 0; }
.brand-card__logo { display: grid; place-items: center; aspect-ratio: 5 / 2; border-radius: 22px; margin: 8px; overflow: hidden; }
.brand-card__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-card__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 24px 26px; }
.tag { align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.steps { counter-reset: s; }
.steps .tile-card { padding-top: 22px; }
.step-no { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: .08em; }
.values { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.values li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.values .letter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: var(--blue-tint); color: var(--blue); font-weight: 700; font-size: 18px; }

/* Empty state */
.empty { display: grid; justify-items: center; gap: 14px; padding: clamp(36px, 6vw, 64px) 24px; border-radius: 32px; text-align: center; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.empty h3 { margin: 0; font-size: 22px; font-weight: var(--w-title); letter-spacing: -0.01em; }
.empty p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; color: var(--ink); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }

/* Contact */
.contact { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact .tile-card { gap: 6px; }
.contact .label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact .value { font-size: 16px; line-height: 1.5; color: var(--ink); user-select: all; overflow-wrap: anywhere; }

/* Footer */
.footer { position: relative; overflow: hidden; margin-top: clamp(40px, 6vw, 80px); background: radial-gradient(80% 120% at 80% 0%, #24306E 0%, var(--navy) 60%); color: #FFFFFF; }
.footer__inner { display: grid; gap: 36px; padding-block: clamp(44px, 6vw, 72px) 28px; }
.footer__top { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.footer h4 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); font-weight: 700; }
.footer p, .footer li { margin: 0; font-size: 14.5px; line-height: 1.7; color: #E6E9F5; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer a { text-decoration: none; color: #E6E9F5; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer :focus-visible { outline-color: #FFFFFF; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer__brand img { width: 44px; height: 44px; border-radius: 12px; }
.footer__brand span { font-size: 17px; font-weight: 700; }
.footer__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin: 0; padding: 26px 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__logos img { display: block; height: 44px; width: auto; opacity: .92; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--on-navy); }
.footer__base > span:nth-of-type(2) { letter-spacing: .12em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Official social icons */
.soc { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; color: #FFFFFF; }
.soc svg { width: 18px; height: 18px; fill: currentColor; }
.soc--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.soc--tiktok { background: #000000; }
.soc--tiktok svg { filter: drop-shadow(-1.2px -1px 0 #25F4EE) drop-shadow(1.2px 1px 0 #FE2C55); }
.soc--mail, .soc--phone, .soc--web { background: var(--blue); }
.footer .social { display: grid; gap: 10px; }
.footer .social li, .footer .social a { display: flex; align-items: center; gap: 12px; }
.footer .soc--mail, .footer .soc--phone, .footer .soc--web { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.footer .sel { user-select: all; overflow-wrap: anywhere; }
.contact .soc { margin-bottom: 6px; }
@media (max-width: 560px) { .footer__logos { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 22px 12px; } }

/* Social row and brand colors */
.soc--facebook { background: #0866FF; } .soc--youtube { background: #FF0000; } .soc--linkedin { background: #0A66C2; } .soc--whatsapp { background: #25D366; }
.footer .soc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.footer .soc-row .soc { transition: transform 180ms var(--ease); }
.footer .soc-row .soc:hover { transform: translateY(-2px); text-decoration: none; }

/* Schemes and MIC */
.schemes .tile-card h3 { margin-top: 2px; }
.mic { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: clamp(26px, 4vw, 44px); background: radial-gradient(90% 140% at 100% 0%, #24306E 0%, var(--navy) 65%); color: #FFFFFF; box-shadow: 0 24px 50px rgba(14, 19, 48, .25); }
.mic .eyebrow { color: #B9C0DE; }
.mic h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: var(--w-display); letter-spacing: -0.02em; }
.mic h2 b { color: #FFFFFF; }
.mic p { margin: 12px 0 0; color: #D6DAEC; font-size: 16px; line-height: 1.6; max-width: 52ch; }
.mic .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mic :focus-visible { outline-color: #FFFFFF; }
.mic__art { justify-self: center; width: min(220px, 60%); aspect-ratio: 1; border-radius: 28%; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .15); animation: floaty 6s ease-in-out infinite; }
.mic__art img { width: 100%; height: 100%; display: block; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
@media (max-width: 720px) { .mic { grid-template-columns: 1fr; } .mic__art { width: 140px; order: -1; justify-self: start; } }

/* Forms */
.lead-form { display: grid; gap: 22px; padding: clamp(22px, 3vw, 34px); }
.lead-form:hover { transform: none; }
.lead-form::after { display: none; }
.lead-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; min-width: 0; }
.lead-form legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.fgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--inset); color: var(--ink); font: 400 16px/1.4 var(--sf); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 160ms, background 160ms; }
.field input[type="file"] { padding: 11px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--blue); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B42318; background: #FFFFFF; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.form-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FBEAE8; color: #B42318; font-size: 14px; font-weight: 700; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.form-done { justify-items: start; }
.form-done h3 { font-size: 22px; }

/* Fix: social tiles in the footer kept the row's flex layout, which pushed the glyph to the edge */
.footer .social .soc-row a.soc { display: inline-grid; place-items: center; gap: 0; width: 38px; height: 38px; padding: 0; line-height: 0; }
.footer .social .soc-row a.soc svg { width: 19px; height: 19px; flex: none; }
.footer .social .soc-row a.soc:hover { text-decoration: none; }
.footer__logos img.is-wide { height: 30px; }
@media (max-width: 560px) { .footer__logos li:nth-last-child(-n+2) { grid-column: span 1; } }
@media (max-width: 560px) { .footer__logos { grid-template-columns: repeat(4, 1fr); gap: 20px 10px; } .footer__logos img { height: 34px; } .footer__logos img.is-wide { height: 22px; } }

/* ---------- Nav tools: language and contact ---------- */
.nav__tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.nav__links { margin: 0 0 0 auto; }
.lang-btn { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; height: 40px; padding: 3px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font: 700 12.5px var(--sf); letter-spacing: .04em; }
.lang-btn span { position: relative; z-index: 1; display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 999px; color: var(--muted); transition: color 220ms var(--ease); }
.lang-btn::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: 34px; border-radius: 999px; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); box-shadow: 0 4px 10px rgba(56, 70, 146, .3); transition: transform 260ms var(--ease); }
html[lang="en"] .lang-btn::before { transform: translateX(100%); }
html:not([lang="en"]) .lang-btn span:first-child, html[lang="en"] .lang-btn span:last-child { color: #FFFFFF; }
.lang-btn:focus-visible, .nav__cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav__cta { display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; }
.nav__cta[aria-current="page"] { background: var(--blue); }
.nav__menu { margin-left: 0; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }
@media (min-width: 1024px) and (max-width: 1599px) { .nav__links { display: none; } .nav__menu { display: inline-flex !important; } .drawer:not([hidden]) { display: block !important; } }
@media (min-width: 1600px) { .nav { max-width: 1440px; } .nav__links { margin: 0 auto; } .nav__tools { margin-left: 0; } }
.drawer .drawer__sep { height: 1px; margin: 6px 12px; background: var(--line); }

/* ---------- Floating WhatsApp ---------- */
:root { --fab-lift: 0px; }
.wa-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + var(--fab-lift) + env(safe-area-inset-bottom, 0px)); z-index: 70; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: linear-gradient(180deg, #2FD46B, #1DAA55); color: #FFFFFF; font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px rgba(18, 120, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform 200ms var(--ease); animation: up 700ms var(--ease) 1.2s both; }
.wa-fab svg { width: 24px; height: 24px; fill: currentColor; }
.wa-fab:hover { transform: translateY(-2px); }
@media (max-width: 639px) { .wa-fab { width: 54px; padding: 0; justify-content: center; } .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
body.has-consent .wa-fab { visibility: hidden; }
.intro:not([hidden]) ~ .wa-fab { display: none; }

/* ---------- Cookie consent ---------- */
.consent { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; justify-content: flex-start; pointer-events: none; animation: up 600ms var(--ease) both; }
.consent__in { pointer-events: auto; width: min(100%, 460px); display: grid; gap: 10px; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, .985); box-shadow: 0 24px 60px rgba(20, 28, 55, .2), inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.consent__in > b { font-size: 16px; }
.consent__in p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.consent__in a { color: var(--blue); }
.consent__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.consent__set { display: grid; gap: 8px; }
.consent__row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--inset); font-size: 14px; }
.consent__row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.consent__row small { display: block; color: var(--muted); font-size: 13px; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Consent checkbox in forms ---------- */
.agree { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.agree input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue); }
.agree a { color: var(--blue); }
.agree input[aria-invalid="true"] { outline: 2px solid #B42318; outline-offset: 2px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__cat { margin: 28px 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.faq__cat:first-child { margin-top: 0; }
.faq__item { border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms var(--ease); }
.faq__item[open] { box-shadow: 0 14px 30px rgba(20, 28, 55, .08), inset 0 0 0 1px var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; list-style: none; cursor: pointer; font-size: 16.5px; font-weight: 700; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-tint); }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--blue); transition: transform 220ms var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); }
.faq__item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 20px; }
.faq__a { padding: 0 20px 18px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
.faq__a p { margin: 0 0 .7em; }
.faq__a ul { margin: 0 0 .7em; padding-left: 20px; }

/* ---------- Contact page ---------- */
.reach { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.reach a, .reach div.tile-card { text-decoration: none; color: inherit; }
.reach .tile-card b { font-size: 18px; }
.reach .tile-card span.sub { color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; }
.reach .ico--wa { background: linear-gradient(180deg, #2FD46B, #1DAA55) !important; color: #FFFFFF !important; }
.reach .ico--wa svg { fill: #FFFFFF; }

/* ---------- Long-form documents (privacy) ---------- */
.doc { max-width: 760px; margin: 0 auto; font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); }
.doc h2 { margin: 1.8em 0 .5em; font-size: 22px; line-height: 1.25; color: var(--ink); letter-spacing: -0.015em; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc .updated { display: inline-flex; margin-bottom: 8px; font-size: 13.5px; color: var(--muted); }

/* ---------- Media kit ---------- */
.kit-hero { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 860px) { .kit-hero { grid-template-columns: minmax(0, 1fr); } }
.profile-card { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 22px; min-height: 280px; padding: clamp(24px, 3vw, 36px); border-radius: 30px; color: #FFFFFF; background: radial-gradient(120% 90% at 85% 0%, rgba(120, 140, 220, .55), transparent 55%), linear-gradient(160deg, #4458A2, #26327A 55%, #0E1330); box-shadow: 0 24px 50px rgba(20, 28, 80, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.profile-card::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 26%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(-200%) skewX(-18deg); animation: shine 5.5s var(--ease) 1s infinite; pointer-events: none; }
@keyframes shine { 0%, 60% { transform: translateX(-200%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }
.profile-card h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: var(--w-display); letter-spacing: -0.02em; }
.profile-card h2 b { font-weight: var(--w-strong); }
.profile-card p { margin: 10px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6; }
.profile-card .btn--light { color: var(--ink); background: #FFFFFF; box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }
.profile-card .btn.is-off { opacity: .55; pointer-events: none; }
.profile-card .note-sm { font-size: 13px; color: rgba(255, 255, 255, .72); }
.profile-card .note-sm a { color: #FFFFFF; }
.profile-card img { position: absolute; right: -20px; bottom: -30px; width: 200px; opacity: .14; }
.logo-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.logo-card { display: grid; gap: 0; border-radius: 24px; overflow: hidden; background: #FFFFFF; box-shadow: 0 10px 26px rgba(20, 28, 55, .06), inset 0 0 0 1px var(--line); }
.logo-card__pv { display: grid; grid-template-columns: 1fr 1fr; }
.logo-card__pv span { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 18px; }
.logo-card__pv span:first-child { background: #F5F6FA; }
.logo-card__pv span:last-child { background: #1A2150; }
.logo-card__pv img { max-width: 100%; max-height: 64px; }
.logo-card__ft { display: grid; gap: 10px; padding: 14px 16px 16px; }
.logo-card__ft b { font-size: 14.5px; }
.logo-card__ft div { display: flex; gap: 6px; }
.dl { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.dl:hover { background: var(--blue); color: #FFFFFF; }
.dl svg { width: 14px; height: 14px; fill: currentColor; }
.swatches { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.swatch { display: grid; gap: 0; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #FFFFFF; text-align: left; cursor: pointer; font: inherit; color: inherit; box-shadow: inset 0 0 0 1px var(--line); }
.swatch i { display: block; height: 96px; }
.swatch span { display: grid; gap: 2px; padding: 12px 14px; }
.swatch small { color: var(--muted); font-size: 12.5px; }
.swatch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
.rules li { display: flex; gap: 12px; padding: 16px 18px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.5; }
.rules li svg { flex: none; width: 22px; height: 22px; fill: var(--blue); }
.rules li.no svg { fill: #B42318; }
.boiler { padding: clamp(22px, 3vw, 32px); border-radius: 28px; background: var(--blue-tint); font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.boiler p { margin: 0 0 .8em; }
.boiler p:last-child { margin: 0; }

/* ---------- 404 ---------- */
.nf { display: grid; justify-items: center; gap: 16px; padding-block: clamp(60px, 10vw, 140px); text-align: center; }
.nf b.code { font-size: clamp(96px, 18vw, 200px); line-height: .9; font-weight: var(--w-strong); letter-spacing: -0.06em; background: linear-gradient(180deg, var(--blue-soft), #1A2150); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer .linkbtn { color: inherit; text-decoration: none; font-size: inherit; opacity: .92; }
.footer .linkbtn:hover { text-decoration: underline; }

@media (max-width: 459px) { .nav .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Lowongan di halaman Career (diisi dari Control Center) */
.jobs { display: grid; gap: 16px; margin-bottom: 8px; }
.job { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; justify-content: space-between; padding: 24px; }
.job h3 { margin: 0 0 6px; font-size: 20px; }
.job__meta { margin: 0; color: var(--muted, #5B6070); font-size: 14px; }
.job__desc { margin-top: 12px; font-size: 15px; }
.job__desc p { margin: 0 0 8px; }
.job__desc ul, .job__desc ol { margin: 0 0 8px; padding-left: 1.3em; } .job__desc li { margin: 2px 0; }
.rt-s { font-size: .85em; } .rt-l { font-size: 1.2em; } .rt-xl { font-size: 1.5em; }
.job__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.job__links-t { font-size: 13px; color: #6B7280; }
.job__ext { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.job__ext:hover { box-shadow: inset 0 0 0 1px var(--blue); } .job__ext:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.job__ext svg { color: var(--pc, #4458A2); flex: none; }
.job__cta { flex: none; }
@media (max-width: 640px) { .job { flex-direction: column; } }

/* ===== Apa Kata Mereka: deck review owner ===== */
.rv { --rc: clamp(190px, 44vw, 270px); max-width: 760px; margin: 0 auto; }
@media (max-width: 820px) { .rv__stage { overflow-x: clip; overflow-y: visible; } }
.rv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rv__label { font-size: clamp(18px, 2vw, 22px); font-weight: var(--w-title); letter-spacing: -0.01em; }
.rv__count { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--muted); }
.rv__stage { position: relative; padding: 10px 0 18px; perspective: 1300px; outline: none; touch-action: pan-y; }
.rv__stage:focus-visible { box-shadow: 0 0 0 3px var(--blue-tint); border-radius: 24px; }
.rv__deck { position: relative; height: var(--rc); }
.rv__card { position: absolute; left: 50%; top: 0; width: var(--rc); height: var(--rc); margin-left: calc(var(--rc) / -2); padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--blue-tint); cursor: pointer; box-shadow: 0 14px 30px rgba(20, 28, 55, .16); transition: transform 460ms var(--ease), opacity 460ms var(--ease), box-shadow 260ms var(--ease); -webkit-tap-highlight-color: transparent; }
.rv__card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.rv__card.is-active { box-shadow: 0 0 0 2px var(--blue), 0 24px 54px rgba(20, 28, 55, .24); }
.rv__card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.rv__ini { display: grid; place-items: center; width: 100%; height: 100%; font-size: calc(var(--rc) / 3.2); font-weight: var(--w-strong); color: var(--blue); }
.rv__fx { position: absolute; left: 50%; top: 0; width: var(--rc); height: var(--rc); margin-left: calc(var(--rc) / -2); pointer-events: none; z-index: 40; }
.rv__float { position: absolute; bottom: 18%; width: 34px; height: 34px; margin-left: -17px; color: #E5484D; opacity: 0; filter: drop-shadow(0 6px 12px rgba(229, 72, 77, .35)); animation: rvFloat 1.5s var(--ease) forwards; }
.rv__float svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes rvFloat { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -190px) rotate(var(--rot)) scale(var(--s)); } }
.rv__nav { position: absolute; top: calc(10px + var(--rc) / 2); z-index: 50; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; background: var(--blue); color: #FFFFFF; cursor: pointer; box-shadow: 0 10px 24px rgba(68, 88, 162, .32); transition: transform 180ms var(--ease), background 180ms; }
.rv__nav:hover { background: var(--blue-deep); transform: scale(1.06); }
.rv__nav:focus-visible { outline: 3px solid var(--blue-tint); outline-offset: 2px; }
.rv__nav svg { width: 20px; height: 20px; fill: currentColor; }
.rv__nav--prev { left: 0; } .rv__nav--next { right: 0; }
.rv__info { display: grid; justify-items: center; gap: 10px; min-height: 190px; text-align: center; transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.rv__info.is-out { opacity: 0; transform: translateY(6px); }
.rv__who { display: grid; gap: 2px; }
.rv__who b { font-size: 17px; }
.rv__who span { font-size: 14px; color: var(--muted); }
.rv__stars { display: inline-flex; gap: 3px; }
.rv__stars span { width: 17px; height: 17px; color: #CDD1DC; }
.rv__stars span.on { color: #E9A23B; }
.rv__stars svg { width: 100%; height: 100%; fill: currentColor; }
.rv__quote { margin: 4px 0 0; max-width: 54ch; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.rv__heart { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--inset); color: var(--ink); font: 600 14px/1 var(--sf); cursor: pointer; transition: background 180ms, color 180ms; }
.rv__heart svg { width: 18px; height: 18px; fill: #B5BAC8; transition: fill 180ms, transform 260ms var(--ease); }
.rv__heart em { font-style: normal; color: var(--muted); font-weight: 400; }
.rv__heart.is-on svg { fill: #E5484D; transform: scale(1.12); }
.rv__heart:hover { background: var(--blue-tint); }
.rv__heart:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.rv-empty { max-width: 520px; margin: 0 auto; text-align: center; color: var(--muted); }
@media (max-width: 560px) { .rv__nav { width: 40px; height: 40px; margin-top: -20px; } .rv__nav--prev { left: -6px; } .rv__nav--next { right: -6px; } }

/* ===== Panel Founder (About) ===== */
.fd { --cw: clamp(250px, 64vw, 330px); position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 80px) clamp(40px, 5vw, 64px); background-color: #F4F5F8; background-image: linear-gradient(90deg, rgba(14, 19, 48, .04) 1px, transparent 1px), linear-gradient(0deg, rgba(14, 19, 48, .04) 1px, transparent 1px); background-size: 120px 120px; background-position: center top; }
.fd__head { max-width: 640px; margin: 0 auto clamp(22px, 3vw, 34px); text-align: center; }
.fd__head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: var(--w-display); letter-spacing: -0.02em; }
.fd__head h2 .q { color: #7E8494; } .fd__head h2 b { color: var(--blue); }
.fd__stage { position: relative; height: var(--ch, calc(var(--cw) * 1.37)); perspective: 1400px; outline: none; touch-action: pan-y; }
.fd__stage:focus-visible .fd__card.is-active { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--blue), 0 30px 70px rgba(14, 19, 48, .3); }
.fd__card { --d: 0; --a: 0; position: absolute; left: 50%; top: 0; width: var(--cw); height: var(--ch, calc(var(--cw) * 1.37)); margin-left: calc(var(--cw) / -2); border-radius: 34px; overflow: hidden; color: #FFFFFF; background: linear-gradient(165deg, #0E1330 0%, #1C2660 52%, #4458A2 100%); box-shadow: 0 26px 60px rgba(14, 19, 48, .28); transform: translateX(calc(var(--d) * 66%)) rotateY(calc(var(--d) * -24deg)) scale(calc(1 - var(--a) * .17)); z-index: calc(10 - var(--a)); opacity: clamp(0, calc(2 - var(--a)), 1); cursor: pointer; transition: transform 640ms var(--ease), opacity 520ms var(--ease), filter 700ms var(--ease); }
.fd__card.is-active { cursor: default; }
.fd__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 80% 100%, rgba(120, 140, 230, .45), transparent 60%), radial-gradient(90% 60% at 10% 0%, rgba(255, 255, 255, .08), transparent 60%); pointer-events: none; }
.fd__card::after { content: ""; position: absolute; inset: 0; background: #5E6170; opacity: 0; transition: opacity 760ms var(--ease); pointer-events: none; z-index: 1; }
.fd__card--path { background: linear-gradient(170deg, #0E1330 0%, #121A45 70%, #24306F 100%); }
.fd__card--sign { background: linear-gradient(200deg, #0E1330 0%, #1C2660 55%, #384692 100%); }
.fd__in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 26px 24px 24px; }
.fd__mark { display: block; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .7); }
.fd__kick { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B9C0DE; text-align: center; }
.fd__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: opacity 700ms var(--ease); user-select: none; }
.fd__card--id .fd__in::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 19, 48, 0) 38%, rgba(14, 19, 48, .55) 62%, rgba(14, 19, 48, .92) 100%); }
.fd__mono { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; padding-bottom: 30%; font-size: calc(var(--cw) / 2.6); font-weight: var(--w-strong); letter-spacing: -0.04em; color: rgba(255, 255, 255, .14); }
.fd__id { display: grid; gap: 4px; margin-top: auto; text-align: center; }
.fd__id .fd__mark { margin-bottom: 8px; }
.fd__id b { font-family: var(--fd-nf, inherit); font-style: var(--fd-ni, normal); font-weight: var(--fd-nw, var(--w-strong, 700)); font-size: calc(clamp(24px, 2.6vw, 30px) * var(--fd-ns, 1)); line-height: 1.1; letter-spacing: var(--fd-nls, -0.02em); }
.fd--tu .fd__id span:not(.fd__mark) { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.fd__id span:not(.fd__mark) { font-size: 14px; color: #C9CFEA; }
.fd__id span:last-child:not(:first-of-type) { margin-top: 6px; align-self: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #FFFFFF; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Pengukuran tinggi alami kartu agar teks panjang tidak terpotong (diatur motion-cards.js) */
.fd__stage.is-measure .fd__card { height: auto; }
.fd__stage.is-measure .fd__in { height: auto; }
.fd__stage.is-measure .fd__ms { overflow: visible; }
.fd__card--quote blockquote { overflow-wrap: anywhere; margin: auto 0; font-family: var(--fd-qf, inherit); font-style: var(--fd-qs, normal); font-size: calc(clamp(19px, 2vw, 23px) * var(--fd-qz, 1)); line-height: 1.35; font-weight: var(--fd-qw, var(--w-title)); letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
.fd__sign { text-align: center; font-size: 13px; color: #B9C0DE; }
.fd__ms { display: grid; gap: 14px; margin: 18px 0 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid rgba(120, 140, 230, .45); overflow: hidden; }
.fd__ms li { position: relative; display: grid; gap: 2px; }
.fd__ms li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #7C8EE6; box-shadow: 0 0 0 3px #0E1330; }
.fd__ms b { font-size: 15px; } .fd__ms span { font-size: 13.5px; line-height: 1.45; color: #C9CFEA; }
.fd__card--sign .fd__in { justify-content: center; align-items: center; text-align: center; gap: 10px; }
.fd__card--sign .fd__mark { position: absolute; top: 26px; left: 0; right: 0; }
.fd__card--sign .fd__kick { position: absolute; top: 40px; left: 0; right: 0; }
.fd__sig { max-width: 82%; max-height: 120px; object-fit: contain; filter: brightness(0) invert(1); user-select: none; }
.fd__soc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.fd__soc a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 180ms; }
.fd__soc a:hover { background: rgba(255, 255, 255, .22); }
.fd__soc a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.fd__soc svg { width: 16px; height: 16px; fill: currentColor; }
.fd__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; opacity: 0; transition: opacity 400ms var(--ease); }
.fd.is-ready .fd__dots { opacity: 1; }
.fd__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #C5C9D6; cursor: pointer; transition: width 260ms var(--ease), background 260ms; }
.fd__dots button[aria-selected="true"] { width: 26px; background: var(--blue); }
.fd__dots button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* Intro: kartu muncul dari blur gerak, abu-abu, lalu gradasi, lalu kartu lain keluar dari belakang */
.fd__stage:is(.is-p0, .is-p1, .is-p2) .fd__card:not(.is-active) { transform: translateX(0) scale(.8); opacity: 0; }
.fd__stage.is-p0 .fd__card.is-active { opacity: 0; filter: blur(18px); transform: scaleX(1.4) scaleY(.94); }
.fd__stage:is(.is-p0, .is-p1) .fd__card.is-active::after { opacity: 1; }
.fd__stage:is(.is-p0, .is-p1) .fd__card.is-active .fd__photo { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rv__card, .rv__info, .fd__card, .fd__dots, .fd__photo, .fd__card::after { transition: none !important; } .rv__float { display: none; } }

/* ---------- Peta Ekspansi (About) ---------- */
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --z { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dx { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --dy { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.xp { position: relative; overflow: hidden; padding-block: clamp(48px, 6vw, 88px); color: #FFFFFF; background: radial-gradient(70% 90% at 15% 0%, #24306E 0%, rgba(36, 48, 110, 0) 70%), radial-gradient(60% 80% at 100% 100%, rgba(68, 88, 162, .45) 0%, rgba(68, 88, 162, 0) 70%), var(--navy); }
.xp__in { max-width: 1240px; margin: 0 auto; }
.xp__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(20px, 3vw, 32px); opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.xp.is-in .xp__head { opacity: 1; transform: none; }
.xp__head .eyebrow { color: #9FB2FF; }
.xp__head h2 { margin: 0; max-width: 620px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; font-weight: var(--w-display); letter-spacing: -0.02em; }
.xp__head p { margin: 12px 0 0; max-width: 560px; color: #B9C0DE; font-size: 16.5px; line-height: 1.6; }
.xp__stats { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.xp__stats li { display: grid; gap: 2px; min-width: 96px; padding: 12px 16px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .18); color: #B9C0DE; font-size: 13px; }
.xp__stats b { color: #FFFFFF; font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.xp__stage { --tiltA: 50deg; position: relative; height: clamp(380px, 46vw, 600px); border-radius: 34px; overflow: hidden; background: radial-gradient(60% 70% at 50% 40%, #1A2457 0%, #0B0F27 100%); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .14), 0 30px 70px rgba(0, 0, 0, .35); outline: none; }
.xp__stage:focus-visible { box-shadow: inset 0 0 0 2px #9FB2FF, 0 30px 70px rgba(0, 0, 0, .35); }
.xp__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 15, 39, .75) 0%, rgba(11, 15, 39, 0) 22%, rgba(11, 15, 39, 0) 70%, rgba(11, 15, 39, .8) 100%); }
.xp__view { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 20%; opacity: 0; filter: blur(14px); transform: scale(.94); transition: opacity 1100ms var(--ease), filter 1100ms var(--ease), transform 1400ms var(--ease); }
.xp__stage.is-in .xp__view { opacity: 1; filter: none; transform: none; }
.xp__plane { --tilt: 0deg; --z: 1; --dx: 0%; --dy: 0%; position: absolute; left: 50%; top: 50%; width: min(84%, 1040px); aspect-ratio: 1000 / 378; transform: translate(-50%, -50%) rotateX(var(--tilt)) scale(var(--z)) translate(var(--dx), var(--dy)); transform-style: preserve-3d; transition: --tilt 1600ms var(--ease), --z 1500ms cubic-bezier(.65, 0, .35, 1), --dx 1500ms cubic-bezier(.65, 0, .35, 1), --dy 1500ms cubic-bezier(.65, 0, .35, 1); }
.xp__stage.is-in .xp__plane { --tilt: var(--tiltA); }
.xp__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp__grid { opacity: 0; transition: opacity 1600ms var(--ease) 500ms; }
.xp__stage.is-in .xp__grid { opacity: 1; }
.xp__nb { fill: rgba(159, 178, 255, .07); }
.xp__coast { fill: none; stroke: #6F86E8; stroke-opacity: .35; stroke-width: 5; stroke-linejoin: round; }
.xp__land { fill: url(#xpLand); stroke: #A9B8F5; stroke-opacity: .75; stroke-width: .7; stroke-linejoin: round; }
.xp__arc { fill: none; stroke: url(#xpArc); stroke-width: 1.8; stroke-linecap: round; opacity: .35; transition: opacity 600ms var(--ease); }
.xp__arc.is-on { opacity: .9; }
.xp__comet { fill: #FFFFFF; opacity: 0; filter: drop-shadow(0 0 4px #9FB2FF); }
.xp__comet.is-on { opacity: 1; }
.xp__halo { opacity: 0; transition: opacity 600ms var(--ease); }
.xp__halo.is-on { opacity: .8; }
.xp__base { fill: #D7DEFF; opacity: .25; transition: opacity 400ms var(--ease); }
.xp__base.is-on { opacity: 1; }
.xp__ring { fill: none; stroke: #CFD8FF; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xp__ring.is-active { animation: xpRing 2400ms cubic-bezier(.2, .7, .2, 1) infinite; }
.xp__ring--2.is-active { animation-delay: 1200ms; }
@keyframes xpRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.4); } }
.xp__pins { position: absolute; inset: 0; transform-style: preserve-3d; }
.xp__pin { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; }
.xp__up { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; transform: translateX(-50%) rotateX(calc(var(--tilt) * -1)) scale(calc(1 / var(--z))); pointer-events: none; }
.xp__pin:focus-visible { outline: none; }
.xp__pin:focus-visible .xp__dot { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #9FB2FF; }
.xp__stem { display: block; width: 2px; height: 46px; border-radius: 2px; background: linear-gradient(180deg, #FFFFFF, rgba(159, 178, 255, .1)); transform-origin: 50% 100%; transform: scaleY(0); transition: transform 380ms var(--ease) 80ms; }
.xp__dot { display: block; width: 18px; height: 18px; margin-bottom: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #DDE4FF 35%, #4458A2 100%); box-shadow: 0 0 0 4px rgba(159, 178, 255, .28), 0 0 22px rgba(159, 178, 255, .9); transform: scale(0); transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1) 260ms, box-shadow 260ms var(--ease); pointer-events: auto; }
.xp__label { margin-bottom: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(14, 19, 48, .78); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .3); color: #FFFFFF; font-size: 14px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease), transform 260ms var(--ease), background 260ms var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: auto; }
.xp__pin.is-on .xp__stem { transform: scaleY(.55); }
.xp__pin.is-on .xp__dot { transform: scale(.8); }
.xp__pin.is-active .xp__stem { transform: scaleY(1); }
.xp__pin.is-active .xp__dot { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(159, 178, 255, .35), 0 0 34px #9FB2FF; }
.xp__pin.is-active .xp__label { opacity: 1; transform: none; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); }
.xp__stage.is-done .xp__pin.is-on .xp__label, .xp__pin.is-on:hover .xp__label { opacity: 1; transform: none; }
.xp__stage.is-done .xp__pin .xp__label { font-size: 12.5px; padding: 4px 10px; }
.xp__stage.is-done .xp__pin.is-on .xp__label.is-hide { opacity: 0; }
.xp__stage.is-done .xp__pin.is-on:hover .xp__label.is-hide, .xp__stage.is-done .xp__pin.is-on:focus-visible .xp__label.is-hide { opacity: 1; }
.xp__card { position: absolute; left: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 30px); z-index: 2; display: grid; gap: 4px; min-width: 230px; max-width: calc(100% - 140px); padding: 16px 20px; border-radius: 24px; background: rgba(14, 19, 48, .72); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .22), 0 18px 40px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); }
.xp__card.is-on { animation: xpCard 380ms var(--ease) both; }
@keyframes xpCard { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.xp__card b { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.xp__card span { color: #B9C0DE; font-size: 14px; }
.xp__card .xp__count { color: #9FB2FF; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.xp__ctl { position: absolute; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 30px); z-index: 2; display: flex; gap: 8px; }
.xp__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .3); color: #FFFFFF; cursor: pointer; transition: background 180ms var(--ease), transform 180ms var(--ease); }
.xp__btn:hover { background: var(--blue); }
.xp__btn:active { transform: scale(.94); }
.xp__btn:focus-visible { outline: 2px solid #9FB2FF; outline-offset: 2px; }
.xp__btn svg { width: 18px; height: 18px; fill: currentColor; }
.xp__rail { position: relative; display: flex; gap: 6px; margin: 18px 0 0; padding: 14px 4px 6px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.xp__rail::-webkit-scrollbar { display: none; }
.xp__rail::before { content: ""; position: absolute; left: 4px; right: 4px; top: 14px; height: 2px; border-radius: 2px; background: rgba(159, 178, 255, .16); min-width: calc(100% - 8px); }
.xp__bar { position: absolute; left: 4px; top: 14px; height: 2px; pointer-events: none; }
.xp__bar i { display: block; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #4458A2, #FFFFFF); transition: width 900ms var(--ease); }
.xp__rail button { position: relative; display: grid; gap: 2px; min-width: 112px; padding: 16px 12px 8px; border: 0; border-radius: 16px; background: none; color: #8C94B8; font: inherit; text-align: left; cursor: pointer; transition: color 260ms var(--ease), background 180ms var(--ease); }
.xp__rail button::before { content: ""; position: absolute; left: 12px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #2A3466; box-shadow: 0 0 0 3px var(--navy); transition: background 260ms var(--ease), transform 260ms var(--ease); }
.xp__rail button span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.xp__rail button b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.xp__rail button.is-on { color: #DDE3FF; }
.xp__rail button.is-on::before { background: #9FB2FF; }
.xp__rail button[aria-current] { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.xp__rail button[aria-current]::before { background: #FFFFFF; transform: scale(1.3); }
.xp__rail button:hover { color: #FFFFFF; }
.xp__rail button:focus-visible { outline: 2px solid #9FB2FF; outline-offset: -2px; }
@media (max-width: 720px) {
  .xp__stage { --tiltA: 42deg; height: 400px; border-radius: 26px; }
  .xp__plane { width: 116%; top: 44%; }
  .xp__card { left: 12px; right: 12px; bottom: 12px; min-width: 0; max-width: none; padding: 12px 16px; border-radius: 20px; }
  .xp__label { font-size: 13px; padding: 5px 10px; }
  .xp__ctl { top: 14px; bottom: auto; right: 14px; }
  .xp__btn { width: 40px; height: 40px; }
  .xp__stats { width: 100%; }
  .xp__stats li { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .xp__head, .xp__view, .xp__plane, .xp__stem, .xp__dot, .xp__label, .xp__grid, .xp__bar i { transition: none !important; }
  .xp__ring.is-active, .xp__card.is-on { animation: none; opacity: 1; transform: none; }
}

/* ---------- Board of Directors (bawah panel Founder) ---------- */
.bod { max-width: 1160px; margin: clamp(40px, 6vw, 72px) auto 0; }
.bod__head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(18px, 3vw, 28px); }
.bod__head .eyebrow { margin: 0; white-space: nowrap; }
.bod__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(68, 88, 162, 0), rgba(68, 88, 162, .35)); }
.bod__line:last-child { background: linear-gradient(90deg, rgba(68, 88, 162, .35), rgba(68, 88, 162, 0)); }
.bod__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); justify-content: center; gap: clamp(14px, 2vw, 22px); }
.bod__card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; color: #FFFFFF; background: linear-gradient(165deg, #0E1330 0%, #1C2660 55%, #4458A2 100%); box-shadow: 0 18px 44px rgba(14, 19, 48, .2); opacity: 0; transform: translateY(26px) scale(.97); filter: blur(8px); transition: opacity 700ms var(--ease) calc(var(--i) * 90ms), transform 700ms var(--ease) calc(var(--i) * 90ms), filter 700ms var(--ease) calc(var(--i) * 90ms), box-shadow 260ms var(--ease); }
.bod.is-in .bod__card { opacity: 1; transform: none; filter: none; }
.bod.is-in .bod__card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(14, 19, 48, .3); transition-delay: 0ms; }
.bod__ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.bod__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.bod__card:hover .bod__ph img { transform: scale(1.05); }
.bod__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 19, 48, 0) 55%, rgba(14, 19, 48, .85) 100%); }
.bod__mono { display: grid; place-items: center; width: 100%; height: 100%; font-size: 54px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .85); }
.bod__glow { position: absolute; z-index: 1; left: -30%; top: -40%; width: 160%; height: 60%; background: radial-gradient(closest-side, rgba(159, 178, 255, .35), rgba(159, 178, 255, 0)); opacity: 0; transition: opacity 380ms var(--ease); pointer-events: none; }
.bod__card:hover .bod__glow { opacity: 1; }
.bod__body { position: relative; display: grid; gap: 4px; margin-top: -54px; padding: 0 20px 20px; z-index: 2; }
.bod__body b { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.bod__body span { color: #B9C0DE; font-size: 13.5px; font-weight: 600; }
.bod__body p { margin: 8px 0 0; color: #DDE3FF; font-size: 14px; line-height: 1.5; }
.bod__body a { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFFFFF; transition: background 180ms var(--ease); }
.bod__body a:hover { background: var(--blue); }
.bod__body a svg { width: 16px; height: 16px; fill: currentColor; }
.bod__body:has(a) b, .bod__body:has(a) span { padding-right: 44px; }
.fd--board .fd__head { margin-bottom: 0; }
.fd--board .bod { margin-top: clamp(20px, 3vw, 32px); }
@media (max-width: 520px) { .bod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bod__body { padding: 0 14px 14px; } .bod__body b { font-size: 16px; } .bod__body p { display: none; } .bod__body a { width: 30px; height: 30px; right: 10px; bottom: 10px; } .bod__body:has(a) b, .bod__body:has(a) span { padding-right: 34px; } }
@media (prefers-reduced-motion: reduce) { .bod__card { transition: none; opacity: 1; transform: none; filter: none; } }

/* ---------- Peta Ekspansi: tema putih ---------- */
.xp--light { color: var(--ink); background-color: #F4F5F8; background-image: linear-gradient(90deg, rgba(14, 19, 48, .04) 1px, transparent 1px), linear-gradient(0deg, rgba(14, 19, 48, .04) 1px, transparent 1px); background-size: 120px 120px; }
.xp--light .xp__head .eyebrow { color: var(--blue); }
.xp--light .xp__head p { color: var(--muted); }
.xp--light .xp__stats li { background: #FFFFFF; box-shadow: 0 8px 22px rgba(14, 19, 48, .06), inset 0 0 0 1px rgba(68, 88, 162, .12); color: var(--muted); }
.xp--light .xp__stats b { color: var(--blue); }
.xp--light .xp__stage { background: radial-gradient(60% 70% at 50% 40%, #FFFFFF 0%, #E6EAF6 100%); box-shadow: inset 0 0 0 1px rgba(68, 88, 162, .14), 0 24px 60px rgba(14, 19, 48, .1); }
.xp--light .xp__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--blue), 0 24px 60px rgba(14, 19, 48, .1); }
.xp--light .xp__stage::after { background: linear-gradient(180deg, rgba(244, 245, 248, .8) 0%, rgba(244, 245, 248, 0) 22%, rgba(244, 245, 248, 0) 70%, rgba(230, 234, 246, .85) 100%); }
.xp--light .xp__nb { fill: rgba(68, 88, 162, .07); }
.xp--light .xp__coast { stroke: #4458A2; stroke-opacity: .18; }
.xp--light .xp__land { stroke: #4458A2; stroke-opacity: .55; }
.xp--light .xp__comet { fill: #4458A2; filter: drop-shadow(0 0 4px rgba(68, 88, 162, .6)); }
.xp--light .xp__base { fill: #4458A2; }
.xp--light .xp__ring { stroke: #4458A2; }
.xp--light .xp__stem { background: linear-gradient(180deg, #4458A2, rgba(68, 88, 162, .1)); }
.xp--light .xp__dot { background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #9FB2FF 35%, #384692 100%); box-shadow: 0 0 0 4px rgba(68, 88, 162, .18), 0 6px 16px rgba(68, 88, 162, .45); }
.xp--light .xp__pin.is-active .xp__dot { box-shadow: 0 0 0 6px rgba(68, 88, 162, .22), 0 8px 26px rgba(68, 88, 162, .6); }
.xp--light .xp__label { background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 6px 16px rgba(14, 19, 48, .1), inset 0 0 0 1px rgba(68, 88, 162, .18); }
.xp--light .xp__pin.is-active .xp__label { color: #FFFFFF; }
.xp--light .xp__card { background: rgba(255, 255, 255, .86); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(68, 88, 162, .16), 0 18px 40px rgba(14, 19, 48, .12); }
.xp--light .xp__card span { color: var(--muted); }
.xp--light .xp__card .xp__count { color: var(--blue); }
.xp--light .xp__btn { background: #FFFFFF; color: var(--ink); box-shadow: 0 6px 16px rgba(14, 19, 48, .1), inset 0 0 0 1px rgba(68, 88, 162, .16); }
.xp--light .xp__btn:hover { background: var(--blue); color: #FFFFFF; }
.xp--light .xp__rail::before { background: rgba(68, 88, 162, .16); }
.xp--light .xp__bar i { background: linear-gradient(90deg, #9FB2FF, #4458A2); }
.xp--light .xp__rail button { color: #8C94A8; }
.xp--light .xp__rail button::before { background: #D3D9EC; box-shadow: 0 0 0 3px #F4F5F8; }
.xp--light .xp__rail button.is-on { color: var(--ink-soft, #3A4058); }
.xp--light .xp__rail button.is-on::before { background: #9FB2FF; }
.xp--light .xp__rail button[aria-current] { color: var(--ink); background: #FFFFFF; box-shadow: 0 6px 16px rgba(14, 19, 48, .06); }
.xp--light .xp__rail button[aria-current]::before { background: var(--blue); }
.xp--light .xp__rail button:hover { color: var(--ink); }

/* ---------- Kampanye: modal umum ---------- */
.cm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.cm__bg { position: absolute; inset: 0; background: rgba(14, 19, 48, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 260ms var(--ease); }
.cm.is-in .cm__bg { opacity: 1; }
.cm > div:not(.cm__bg) { position: relative; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 380ms var(--ease), transform 380ms var(--ease); }
.cm.is-in > div:not(.cm__bg) { opacity: 1; transform: none; }
html.cm-open { overflow: hidden; }
.pop { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 30px; background: #FFFFFF; box-shadow: 0 30px 80px rgba(14, 19, 48, .4); }
.pop__img { display: block; width: 100%; max-height: 62dvh; object-fit: cover; }
.pop__b { display: grid; gap: 10px; padding: 20px 22px 22px; }
.pop__b h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.pop__b p { margin: 0; color: var(--muted); line-height: 1.55; }
.pop__b small { color: var(--muted); font-size: 12.5px; }
.pop__tag { justify-self: start; padding: 5px 12px; border-radius: 999px; background: #F2B84B; color: #0E1330; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pop__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(14, 19, 48, .2); cursor: pointer; }
.pop__x svg { width: 18px; height: 18px; fill: var(--ink); }

/* ---------- Our Guaranteed ---------- */
.gt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.gt__c { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; border-radius: 28px; color: #FFFFFF; background: linear-gradient(160deg, #0E1330 0%, #1C2660 55%, #4458A2 100%); box-shadow: 0 20px 48px rgba(14, 19, 48, .18); opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease) calc(var(--i) * 110ms), transform 600ms var(--ease) calc(var(--i) * 110ms); }
.gt.is-in .gt__c { opacity: 1; transform: none; }
.gt__c::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 178, 255, .3), rgba(159, 178, 255, 0)); }
.gt__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .3); }
.gt__ic svg { width: 26px; height: 26px; color: #FFFFFF; }
.gt__n { position: absolute; right: 22px; top: 18px; color: rgba(255, 255, 255, .22); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.gt__c h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.25; }
.gt__c p { margin: 0; color: #C9D0EA; line-height: 1.6; font-size: 15px; }

/* ---------- Promo ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.pc, .pmh, .ac { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease) calc(var(--i) * 80ms), transform 600ms var(--ease) calc(var(--i) * 80ms), box-shadow 220ms var(--ease); }
.is-in .pc, .is-in .pmh, .is-in .ac { opacity: 1; transform: none; }
.pc { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(14, 19, 48, .08), inset 0 0 0 1px var(--line); }
.pc__img { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #0E1330, #4458A2) center / cover; }
.pc__tag { position: absolute; left: 14px; top: 14px; padding: 7px 14px; border-radius: 999px; background: #F2B84B; color: #0E1330; font-size: 13px; font-weight: 800; letter-spacing: .03em; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.pc__b { display: grid; gap: 10px; padding: 18px 20px 20px; }
.pc__b h3 { margin: 0; font-size: 19px; }
.pc__b p { margin: 0; color: var(--muted); line-height: 1.55; }
.pc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.pc__code { padding: 6px 12px; border: 1.5px dashed var(--blue); border-radius: 10px; background: var(--blue-tint); color: var(--blue); font: 700 13px/1 var(--font, inherit); letter-spacing: .06em; cursor: pointer; }
.pc__code.is-ok { border-style: solid; background: #E7F6EE; border-color: #16794C; color: #16794C; }
.pc .btn { justify-self: start; }
.promo-hotels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pmh { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 22px; background: #FFFFFF; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.pmh:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.pmh__img { position: relative; width: 92px; height: 72px; flex: none; overflow: hidden; border-radius: 16px; background: center / cover; }
.pmh__b { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pmh__b small { color: var(--muted); }
.pmh > svg { width: 18px; height: 18px; fill: var(--blue); flex: none; }
.ribbon { position: absolute; left: -2px; top: 10px; padding: 4px 10px 4px 8px; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #E5484D, #F2B84B); color: #FFFFFF; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; box-shadow: 0 4px 12px rgba(229, 72, 77, .35); white-space: nowrap; }
.hcard .ribbon { top: 54px; left: 0; padding: 7px 14px 7px 12px; font-size: 13px; }
.price-was { display: block; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: line-through; }

/* ---------- Our Activities ---------- */
.act-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.act-filter button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); font: inherit; font-size: 14px; cursor: pointer; }
.act-filter button.is-on { background: var(--blue); color: #FFFFFF; box-shadow: none; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ac { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 0; border-radius: 26px; background: #FFFFFF; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 14px 36px rgba(14, 19, 48, .08), inset 0 0 0 1px var(--line); }
.is-in .ac:hover { transform: translateY(-4px); transition-delay: 0ms; box-shadow: 0 22px 48px rgba(14, 19, 48, .14); }
.ac__img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #0E1330, #4458A2) center / cover; }
.ac__cat { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--blue); font-size: 12px; font-weight: 700; }
.ac__b { display: grid; gap: 6px; padding: 16px 18px 20px; }
.ac__b small { color: var(--muted); font-size: 12.5px; }
.ac__b b { font-size: 18px; line-height: 1.3; }
.ac__b span { color: var(--muted); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.actd { width: min(720px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 30px; background: #FFFFFF; }
.actd__gal { display: grid; gap: 6px; padding: 6px 6px 0; }
.actd__main { position: relative; aspect-ratio: 16 / 10; border-radius: 24px 24px 12px 12px; overflow: hidden; background: #0E1330; }
.actd__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actd__nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.actd__nav svg { width: 18px; height: 18px; }
.actd__nav--p { left: 10px; } .actd__nav--p svg { transform: rotate(180deg); } .actd__nav--n { right: 10px; }
.actd__cnt { position: absolute; right: 12px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(14,19,48,.65); color: #fff; font-size: 12px; }
.actd__th { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.actd__th::-webkit-scrollbar { display: none; }
.actd__th button { flex: 0 0 76px; height: 56px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: .6; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .2s; }
.actd__th button.is-on { opacity: 1; outline-color: var(--blue); }
.actd__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actd__t p { margin: 0 0 8px; line-height: 1.7; color: var(--ink-soft); }
.actd__t ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink-soft); line-height: 1.7; }
.actd__t strong { color: var(--ink); }
.actd__b { display: grid; gap: 10px; padding: 20px 24px 26px; }
.actd__b h2 { margin: 0; font-size: 26px; }
.actd__b small { color: var(--muted); }

/* ---------- Reels gaya story ---------- */
.reels { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.rl { display: grid; justify-items: center; gap: 8px; flex: none; width: 92px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; opacity: 0; transform: scale(.8); transition: opacity 420ms var(--ease) calc(var(--i) * 70ms), transform 420ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 70ms); }
.reels.is-in .rl { opacity: 1; transform: none; }
.rl__ring { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #F2B84B, #E5484D, #4458A2, #9FB2FF, #F2B84B); transition: transform 180ms var(--ease); }
.rl:hover .rl__ring { transform: scale(1.05); }
.rl.is-seen .rl__ring { background: #CDD2E0; }
.rl__img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #FFFFFF; background: #EEF0F8 center / cover; overflow: hidden; }
.rl__img img { width: 46%; }
.rl__t { max-width: 92px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm--story .cm__bg { background: rgba(6, 8, 20, .92); }
.igst { width: min(420px, 100%); height: min(780px, calc(100dvh - 24px)); display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; color: #FFFFFF; }
.igst__bars { display: flex; gap: 4px; }
.igst__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.igst__bars i.is-done { background: #FFFFFF; }
.igst__bars i.is-cur::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform-origin: left; animation: storyBar 600ms var(--ease) both; }
@keyframes storyBar { from { transform: scaleX(0); } to { transform: none; } }
.igst__top { display: flex; align-items: center; gap: 10px; }
.igst__av { width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; }
.igst__av img { width: 60%; }
.igst__t { flex: 1; font-size: 14px; }
.igst__x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); cursor: pointer; }
.igst__x svg { width: 18px; height: 18px; fill: #FFFFFF; }
.igst__frame { min-height: 0; overflow: hidden; border-radius: 22px; background: #000; opacity: 0; transform: scale(.97); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.igst__frame.is-in { opacity: 1; transform: none; }
.igst__frame iframe { width: 100%; height: 100%; border: 0; background: #FFFFFF; }
.igst__frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.igst__bars i.is-cur::after { transform: scaleX(1); width: var(--p, 100%); }
.igst__nav { position: absolute; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); cursor: pointer; transform: translateY(-50%); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.igst__nav svg { width: 20px; height: 20px; fill: var(--ink); }
.igst__nav--p { left: -62px; } .igst__nav--p svg { transform: rotate(180deg); }
.igst__nav--n { right: -62px; }
.igst__ig { justify-self: center; color: #DDE3FF; font-size: 13px; }
@media (max-width: 560px) { .igst__nav--p { left: 6px; } .igst__nav--n { right: 6px; } .igst__nav { width: 40px; height: 40px; background: rgba(255, 255, 255, .75); } }

/* ---------- Company Video ---------- */
.cv { perspective: 1400px; }
.cv__poster, .cv__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; border-radius: 32px; background: #0E1330; box-shadow: 0 30px 70px rgba(14, 19, 48, .28); }
.cv__poster { cursor: pointer; opacity: 0; filter: blur(12px); transform: rotateX(10deg) scale(.94); transform-origin: 50% 100%; transition: opacity 900ms var(--ease), filter 900ms var(--ease), transform 1100ms var(--ease); }
.cv.is-in .cv__poster { opacity: 1; filter: none; transform: none; }
.cv__poster img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1600ms var(--ease); }
.cv.is-in .cv__poster img { transform: none; }
.cv__poster:hover img { transform: scale(1.03); }
.cv__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 19, 48, .1) 30%, rgba(14, 19, 48, .85) 100%), linear-gradient(90deg, rgba(68, 88, 162, .35), rgba(68, 88, 162, 0) 60%); }
.cv__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); box-shadow: 0 14px 36px rgba(56, 70, 146, .5); }
.cv__play svg { position: relative; width: 32px; height: 32px; margin-left: 5px; fill: #FFFFFF; }
.cv__play i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: cvPulse 2400ms cubic-bezier(.2, .7, .2, 1) infinite; }
.cv__play i + i { animation-delay: 1200ms; }
@keyframes cvPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.cv__cap { position: absolute; left: clamp(18px, 3vw, 34px); bottom: clamp(16px, 3vw, 30px); display: grid; gap: 4px; color: #FFFFFF; text-align: left; }
.cv__cap small { color: #B9C0DE; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.cv__cap b { font-size: clamp(20px, 2.6vw, 32px); letter-spacing: -0.01em; }
.cv__frame iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .cv__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } .cv__poster, .cv__frame { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .gt__c, .pc, .pmh, .ac, .rl, .cv__poster, .cv__poster img { transition: none; opacity: 1; transform: none; filter: none; } .cv__play i { animation: none; } }

/* ---------- About: kartu ekosistem ringkas ---------- */
.eco-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.eco-tech .tile-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-content: start; padding: 18px 20px; border-radius: 20px; }
.eco-tech .tile-card .ico { grid-row: span 2; }
.eco-tech .tile-card h3 { margin: 2px 0 4px; font-size: 16px; }
.eco-tech .tile-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.eco-tech .ico { flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(68, 88, 162, .15); }
.eco-tech .ico svg { width: 22px; height: 22px; fill: currentColor; }
.eco-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.eco-values li { padding: 14px 16px; border-radius: 18px; font-size: 14.5px; box-shadow: 0 8px 22px rgba(20, 28, 55, .05), inset 0 0 0 1px var(--line); }
.eco-values .letter { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); color: #FFFFFF; }
@media (max-width: 860px) { .eco-tech, .eco-values { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Kartu ekosistem ARBA: bingkai navy berkilau + panel warna brand ---------- */
.eco-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.ecx { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 7px 7px 0; border-radius: 22px; color: #FFFFFF;
  background: radial-gradient(120% 70% at 0% 0%, rgba(122, 142, 230, .55) 0%, rgba(122, 142, 230, 0) 55%), radial-gradient(90% 80% at 100% 100%, rgba(68, 88, 162, .9) 0%, rgba(68, 88, 162, 0) 70%), linear-gradient(160deg, #2C3880 0%, #18215A 55%, #0E1330 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 1px rgba(14, 19, 48, .35), 0 22px 44px -18px rgba(14, 19, 48, .55), 0 40px 70px -40px rgba(68, 88, 162, .6);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.ecx::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 46%, transparent 52%), linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, .08) 63%, transparent 68%); }
.ecx::after { content: ""; position: absolute; z-index: 3; top: -40%; bottom: -40%; left: 0; width: 34%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: translateX(-260%) skewX(-18deg); }
.ecx:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 1px rgba(14, 19, 48, .35), 0 30px 54px -18px rgba(14, 19, 48, .6), 0 50px 80px -40px rgba(68, 88, 162, .7); }
.ecx:hover::after { animation: ecxSweep 1.1s var(--ease) 1; }
@keyframes ecxSweep { to { transform: translateX(420%) skewX(-18deg); } }
.ecx__in { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 18px; border-radius: 16px; color: var(--ink, #15161C); background: linear-gradient(140deg, var(--b1), var(--b2)); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 12px 26px -14px rgba(0, 0, 0, .5); }
.ecx__in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%), linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, .22) 62%, transparent 70%); }
.ecx__in.is-dark::before { background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%), linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, .1) 62%, transparent 70%); }
.ecx__in > * { position: relative; }
.ecx__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ecx__seg { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ecx__seg i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.ecx__st { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, .55); color: #146C3A; box-shadow: 0 0 0 1px rgba(20, 108, 58, .18) inset; }
.ecx__in.is-dark .ecx__st { background: rgba(255, 255, 255, .14); color: #CFF5DC; box-shadow: 0 0 0 1px rgba(207, 245, 220, .3) inset; }
.ecx__logo { display: flex; align-items: center; height: 76px; }
.ecx__logo img { display: block; height: 100%; width: auto; max-width: 78%; object-fit: contain; object-position: left center; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.ecx__logo b { font-size: 22px; letter-spacing: .12em; }
.ecx__desc { margin: 0; font-size: 14px; line-height: 1.55; opacity: .86; min-height: 3.1em; }
.ecx__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: #FFFFFF; background: linear-gradient(180deg, #2A2F45, #0E1330); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 20px -8px rgba(14, 19, 48, .7); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.ecx__in.is-dark .ecx__btn { color: #0E1330; background: linear-gradient(180deg, #FFFFFF, #E6E9F5); box-shadow: 0 1px 0 #FFFFFF inset, 0 10px 20px -8px rgba(0, 0, 0, .55); }
.ecx__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.ecx__btn:hover { transform: translateY(-1px); }
.ecx__btn:hover svg { transform: translateX(3px); }
.ecx__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.ecx__pts { list-style: none; margin: 0; padding: 16px 12px 18px; display: grid; gap: 10px; }
.ecx__pts li, .ecx__foot { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.ecx__pts svg, .ecx__foot svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ecx__foot { margin: 0; padding: 14px 12px 16px; }
/* Kartu teknologi MANTRA */
.ecx-tech { gap: clamp(14px, 1.6vw, 22px); }
.ecx--tech .ecx__in { flex: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: start; }
.ecx--tech .ico { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #FFFFFF; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 8px 16px -8px rgba(0, 0, 0, .6); }
.ecx--tech .ico svg { width: 22px; height: 22px; fill: currentColor; }
.ecx--tech.has-img .ecx__in { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.ecx__img { display: block; margin-bottom: 8px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 10px 22px -12px rgba(0, 0, 0, .6); }
.ecx__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ecx--tech h3 { margin: 2px 0 0; font-size: 16.5px; color: #FFFFFF; }
.ecx--tech .ecx__in p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
@media (max-width: 1100px) { .eco-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .eco-brands { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ecx, .ecx__btn, .ecx__btn svg { transition: none; } .ecx:hover { transform: none; } .ecx:hover::after { animation: none; } }
/* Video di akhir Article dan Tips */
.art__video { max-width: var(--read, 760px); margin: clamp(28px, 4vw, 44px) auto 0; }
.art__vf { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: #0E1330; box-shadow: 0 20px 48px rgba(14, 19, 48, .2); }
.art__vf iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.art__yt { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #0E1330 center / cover no-repeat; }
.art__yt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 19, 48, 0) 40%, rgba(14, 19, 48, .45)); transition: background 220ms var(--ease); }
.art__yt:hover::before { background: rgba(14, 19, 48, .25); }
.art__play { position: relative; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 16px 40px rgba(14, 19, 48, .45); transition: transform 220ms var(--ease); }
.art__play::after { content: ""; position: absolute; left: 32px; top: 26px; border-left: 22px solid var(--blue); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.art__yt:hover .art__play { transform: scale(1.08); }
.art__yt:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.art__fig { margin: 1.6em 0; } .art__fig img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 34px rgba(14, 19, 48, .14); } .art__fig figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.art__video figcaption { margin-top: 10px; color: var(--muted); font-size: 13.5px; text-align: center; }

/* ---------- Pencarian website ---------- */
.srch-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; transition: box-shadow 200ms var(--ease), color 200ms var(--ease); }
.srch-btn svg { width: 18px; height: 18px; fill: currentColor; }
.srch-btn:hover { color: var(--blue); box-shadow: inset 0 0 0 1px rgba(68, 88, 162, .45); }
.srch-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.srch { position: fixed; inset: 0; z-index: 1000; display: grid; justify-items: center; align-items: start; padding: max(9vh, 16px) 16px 16px; }
.srch[hidden] { display: none; }
html.srch-open { overflow: hidden; }
.srch__bg { position: absolute; inset: 0; background: rgba(14, 19, 48, .5); }
.srch__p { position: relative; width: min(680px, 100%); max-height: min(76vh, 680px); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #FFFFFF; box-shadow: 0 40px 90px rgba(14, 19, 48, .4), 0 0 0 1px rgba(14, 19, 48, .06); animation: srchIn 220ms var(--ease) both; }
@keyframes srchIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.srch__in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.srch__in > svg { width: 22px; height: 22px; fill: var(--blue); flex: none; }
.srch__in input { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: none; background: none; font: inherit; font-size: 17px; color: var(--ink); }
.srch__in input::-webkit-search-cancel-button { display: none; }
.srch__x { flex: none; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; color: var(--muted); font: 600 12px/1.4 inherit; cursor: pointer; }
.srch__list { overflow: auto; padding: 6px 10px 12px; overscroll-behavior: contain; }
.srch__h { margin: 12px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.srch__o { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.srch__o[aria-selected="true"], .srch__o:hover { background: var(--blue-tint, #EEF1FA); }
.srch__img, .srch__ic { width: 40px; height: 40px; border-radius: 11px; background: center / cover no-repeat #E6E9F4; }
.srch__ic { background: linear-gradient(160deg, #2C3880, #0E1330); position: relative; }
.srch__ic::after { content: ""; position: absolute; inset: 11px; background: #FFFFFF; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.srch__ic--page { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM152,88V44l44,44Z'/%3E%3C/svg%3E"); }
.srch__ic--hotel { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,72H32V48a8,8,0,0,0-16,0V208a8,8,0,0,0,16,0V176H240v32a8,8,0,0,0,16,0V112A40,40,0,0,0,216,72ZM32,88h72v72H32Z'/%3E%3C/svg%3E"); }
.srch__ic--post, .srch__ic--tips { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM184,168H72a8,8,0,0,1,0-16H184a8,8,0,0,1,0,16Zm0-32H72a8,8,0,0,1,0-16H184a8,8,0,0,1,0,16Zm0-32H72a8,8,0,0,1,0-16H184a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E"); }
.srch__ic--brand, .srch__ic--act { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E"); }
.srch__ic--promo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63ZM84,96A12,12,0,1,1,96,84,12,12,0,0,1,84,96Z'/%3E%3C/svg%3E"); }
.srch__ic--faq { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z'/%3E%3C/svg%3E"); }
.srch__tx { display: grid; min-width: 0; }
.srch__t { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch__s { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch mark { background: rgba(68, 88, 162, .18); color: inherit; border-radius: 3px; padding: 0 1px; }
.srch__empty { padding: 30px 14px; text-align: center; color: var(--muted); font-size: 14.5px; }
.srch__empty b { display: block; margin-bottom: 4px; color: var(--ink); }
.srch__ft { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.srch__ft kbd { margin-right: 3px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; font: 600 11px/1.5 inherit; }
@media (max-width: 640px) { .srch { padding: 10px; } .srch__p { max-height: calc(100dvh - 20px); border-radius: 18px; } .srch__ft { display: none; } .srch-btn { width: 38px; height: 38px; } }

/* ---------- Mode ringan (perangkat lama, hemat data, atau dipilih pengunjung) ---------- */
.lite-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; color: var(--on-navy); font: inherit; font-size: 12.5px; cursor: pointer; }
.lite-btn svg { width: 13px; height: 13px; fill: currentColor; }
.lite-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.lite-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .nav, html.lite .drawer { background: rgba(255, 255, 255, .97) !important; }
html.lite .card { -webkit-box-reflect: unset !important; will-change: transform, opacity !important; }
html.lite .card__gloss, html.lite .tile::after, html.lite .intro__sheen, html.lite .ecx::after, html.lite .ecx::before, html.lite .profile-card::after, html.lite .detail__logo::after { display: none !important; }
html.lite .card__glare { mix-blend-mode: normal !important; opacity: .25 !important; }
html.lite .intro__light i { animation: none !important; filter: blur(32px) !important; }
html.lite .welcome .gloss { animation: none !important; background-position: 0 0 !important; }
html.lite .tile__art, html.lite .tile__custom i, html.lite .xp__ring.is-active, html.lite .cv__play i { animation: none !important; }
html.lite .ecx, html.lite .ecx__in, html.lite .card__body::before, html.lite .tile { box-shadow: 0 8px 18px rgba(14, 19, 48, .14) !important; }
html.lite .ecx__logo img { filter: none !important; }
html.lite .srch__p { animation: none; }

/* ---------- SMOZA: percakapan (halaman dan panel melayang) ---------- */
.smzc-msg { max-width: 92%; padding: 11px 14px; border-radius: 16px 16px 16px 6px; font-size: 14.5px; line-height: 1.55; color: #E6EEFF; background: linear-gradient(160deg, rgba(47, 107, 255, .22), rgba(92, 192, 255, .08)); box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .22); }
.smzc-msg p { margin: 0 0 .5em; } .smzc-msg p:last-child { margin-bottom: 0; }
.smzc-msg ul { margin: .3em 0 .6em; padding-left: 18px; } .smzc-msg li { margin: .2em 0; }
.smzc-msg a { color: #8FDCFF; font-weight: 600; text-underline-offset: 3px; }
.smzc-msg b { color: #FFFFFF; }
.smzc-msg--you { justify-self: end; border-radius: 16px 16px 6px 16px; background: #2F4FC9; box-shadow: none; color: #FFFFFF; }
.smzc-msg--you.is-voice::before { content: "🎙 "; }
.smzc-msg.is-note { background: rgba(255, 196, 0, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 0, .3); }
.smzc-msg.is-new { animation: smzcIn 420ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes smzcIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.smzc-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.smzc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8FDCFF; animation: smzcDot 1s ease-in-out infinite; }
.smzc-dots i:nth-child(2) { animation-delay: .15s; } .smzc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes smzcDot { 50% { opacity: .25; transform: translateY(-3px); } }
.smzc-chip { padding: 8px 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #DCE6FF; font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .25); transition: background 180ms var(--ease), color 180ms var(--ease); }
.smzc-chip:hover, .smzc-chip:focus-visible { background: rgba(92, 192, 255, .2); color: #FFFFFF; outline: none; }
.smz-cards { display: grid; gap: 8px; margin: 6px 0; }
.smz-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: inherit !important; text-decoration: none; font-weight: 400 !important; }
.smz-card:hover { background: rgba(255, 255, 255, .12); }
.smz-card__img { width: 56px; height: 44px; border-radius: 9px; background: center / cover #1A2A6C; }
.smz-card__b { display: grid; min-width: 0; } .smz-card__b small { font-size: 12px; color: #A9B8E2; }
.smz-card:not(:has(.smz-card__img)) { grid-template-columns: minmax(0, 1fr); }

/* tombol melayang */
.smzf { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(84px + var(--fab-lift) + env(safe-area-inset-bottom, 0px)); z-index: 75; }
body[data-no-fab] .smzf, body:not(.has-wa) .smzf { bottom: calc(16px + var(--fab-lift) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) { body.has-consent .smzf { visibility: hidden; opacity: 0; pointer-events: none; } }
@media (max-width: 639px) { .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
.smzf__btn { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 30%, #1E3A9A, #0A1440 70%); box-shadow: 0 12px 28px -8px rgba(14, 19, 48, .7), inset 0 0 0 1px rgba(140, 180, 255, .35); transition: transform 220ms var(--ease); }
.smzf__btn:hover { transform: translateY(-2px) scale(1.04); }
.smzf__btn:focus-visible { outline: 3px solid #5CC0FF; outline-offset: 3px; }
.smzf__face { width: 50px; height: 50px; display: grid; place-items: center; }
.smzf__face .smz { width: 50px; height: 50px; }
.smzf__ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(92, 192, 255, .6); animation: smzpMic 2.4s ease-out infinite; pointer-events: none; }
.smzf.is-open .smzf__ring { display: none; }
@keyframes smzpMic { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.smzf__panel { position: absolute; right: 0; bottom: 72px; width: min(380px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 180px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 10px; padding: 14px; border-radius: 24px; color: #E6EEFF; background: radial-gradient(90% 60% at 20% 0%, #1A2E7A, rgba(26, 46, 122, 0) 70%), #0A1238; box-shadow: 0 30px 70px -20px rgba(5, 10, 36, .8), inset 0 0 0 1px rgba(140, 180, 255, .22); transform-origin: 90% 100%; animation: smzfIn 260ms cubic-bezier(.2, .7, .2, 1) both; }
.smzf__panel[hidden] { display: none; }
@keyframes smzfIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.smzf__head { display: flex; align-items: center; gap: 6px; }
.smzf__av { width: 44px; height: 44px; flex: none; }
.smzf__av .smz { width: 44px; height: 44px; }
.smzf__ttl { flex: 1; display: grid; min-width: 0; line-height: 1.2; }
.smzf__ttl b { letter-spacing: .12em; font-size: 14px; color: #FFFFFF; }
.smzf__ttl small { font-size: 11.5px; color: #9FB0D8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smzf__ic { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #E6EEFF; font: 700 11.5px/1 inherit; cursor: pointer; text-decoration: none; }
.smzf__ic svg { width: 16px; height: 16px; fill: currentColor; }
.smzf__ic:hover { background: rgba(92, 192, 255, .2); }
.smzf__log { display: grid; align-content: start; gap: 8px; min-height: 140px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(140, 180, 255, .3) transparent; }
.smzf__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.smzf__chips .smzc-chip { flex: none; white-space: nowrap; font-size: 12.5px; padding: 7px 11px; }
.smzf__form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px; border-radius: 999px; background: rgba(4, 10, 36, .8); box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .28); }
.smzf__form input { min-width: 0; border: 0; outline: none; background: none; color: #FFFFFF; font: inherit; font-size: 16px; padding: 8px 2px; }
.smzf__form input::placeholder { color: #8C9BC8; }
.smzf__mic, .smzf__send { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; color: #FFFFFF; cursor: pointer; background: rgba(255, 255, 255, .1); }
.smzf__mic { background: linear-gradient(160deg, #5CC0FF, #2F6BFF); }
.smzf__mic svg, .smzf__send svg { width: 17px; height: 17px; fill: currentColor; }
.smzf__mic.is-on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(92, 192, 255, .8); animation: smzpMic 1.2s ease-out infinite; }
.smzf__mic.is-na { opacity: .45; }
.smzf__note { margin: 0; font-size: 11px; color: #8796C4; text-align: center; }
@media (max-width: 560px) { .smzf__btn { width: 54px; height: 54px; } .smzf__panel { bottom: 66px; max-height: calc(100dvh - 160px); } }
html.lite .smzf__ring, html.lite .smzc-msg.is-new { animation: none; }
@media (prefers-reduced-motion: reduce) { .smzf__ring, .smzc-dots i, .smzc-msg.is-new, .smzf__panel { animation: none; } }
/* SMOZA di toolbar menu */
.smzn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px; background: linear-gradient(135deg, #1E2A5A, #2F3F86); color: #FFFFFF; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-decoration: none; box-shadow: 0 6px 18px rgba(30, 42, 90, .28), inset 0 0 0 1px rgba(255, 255, 255, .14); position: relative; overflow: hidden; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.smzn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); animation: smznShine 5s ease-in-out infinite; pointer-events: none; }
.smzn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30, 42, 90, .36), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.smzn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.smzn__face { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3B4FA0, #121A3E); overflow: hidden; }
.smzn__face > * { width: 30px !important; height: 30px !important; }
.smzn__face svg { width: 100%; height: 100%; }
@keyframes smznShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
html.lite .smzn::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .smzn::after { animation: none; display: none; } }
@media (max-width: 1100px) { .smzn { padding: 0 5px; } .smzn__tx { display: none; } }
/* Toolbar presisi: 5 tautan + Lainnya, tombol kanan seragam 40px dengan jarak 8px */
.nav { gap: 8px; }
.nav__tools { gap: 8px; }
.nav__links > li:nth-child(n+6):not(.nav__more) { display: none; }
.nav__links.is-ready > li { display: flex; }
.nav__links a { padding: 0 14px; }
.nav__more { position: relative; display: flex; }
.nav__morebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background 180ms var(--ease), color 180ms var(--ease); }
.nav__morebtn svg { width: 13px; height: 13px; fill: currentColor; transition: transform 200ms var(--ease); }
.nav__morebtn:hover, .nav__more.is-open .nav__morebtn { color: var(--ink); background: rgba(255, 255, 255, .9); }
.nav__more.is-open .nav__morebtn svg { transform: rotate(180deg); }
.nav__morebtn[data-current] { color: #FFFFFF; font-weight: 700; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); }
.nav__morebtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav__sub { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 220px; margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: #FFFFFF; box-shadow: 0 18px 40px rgba(20, 28, 55, .14), inset 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms; z-index: 60; }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__more.is-open .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__sub li { display: block !important; }
.nav__sub a { display: flex; width: 100%; min-height: 40px; padding: 0 14px; border-radius: 12px; color: var(--ink); }
.nav__sub a:hover { background: var(--bg, #F3F5FA); }
.nav__sub a[aria-current="page"] { box-shadow: none; }
@media (min-width: 1200px) { .nav__links { display: flex !important; margin: 0 auto; } .nav__menu { display: none !important; } .drawer, .drawer:not([hidden]) { display: none !important; } .nav__tools { margin-left: 0; } .nav { max-width: 1280px; } }
@media (min-width: 1600px) { .nav { max-width: 1440px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .nav__links { display: none !important; } .nav__menu { display: inline-flex !important; } .drawer:not([hidden]) { display: block !important; } }
.smzn { height: 40px; }

/* Gelar Founder: font, ukuran, tebal, miring dari CC */
.fd__id span:not(.fd__mark) { font-family: var(--fd-tf, inherit); font-style: var(--fd-ti, normal); font-weight: var(--fd-tw, 400); font-size: calc(14px * var(--fd-tz, 1)); }
.fd__id span:last-child:not(:first-of-type) { font-family: var(--fd-tf, inherit); font-style: var(--fd-ti, normal); font-size: calc(12.5px * var(--fd-tz, 1)); }
.fd--tu .fd__id span:not(.fd__mark) { font-size: calc(12px * var(--fd-tz, 1)); }
.fd__card--quote blockquote b { font-weight: 800; }
.fd__card--quote blockquote u { text-underline-offset: .18em; text-decoration-thickness: 1.5px; }

/* Simulator skema (halaman Partnership) */
.sim__tabs { display: inline-flex; margin: 4px 0 16px; border-radius: 999px; padding: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sim__tab { border: 0; background: none; height: 38px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sim__tab[aria-pressed="true"] { background: var(--blue); color: #fff; }
.sim__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.sim__form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sim__form input { height: 46px; padding: 0 14px; border-radius: 14px; border: 0; background: #F4F6FB; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 17px; font-weight: 600; color: inherit; min-width: 0; }
.sim__form input:disabled { opacity: .7; }
.sim__hint, .sim__note { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.sim__rev { margin: 4px 0 12px; font-size: 15px; color: var(--muted); }
.sim__grid { margin-bottom: 14px; }
.sim__res { display: grid; gap: 2px; margin-top: 4px; padding: 14px 16px; border-radius: 18px; background: #F4F6FB; }
.sim__res small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.sim__res strong { font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -.02em; }
.sim__res strong.is-low { color: #B42318; }
.sim__res span { font-size: 13.5px; color: var(--muted); }
.sim__res em { font-size: 13px; font-style: normal; color: #B42318; }
.sim__arba { font-size: 13.5px; color: var(--muted); }
@media (max-width: 720px) { .sim__form { grid-template-columns: 1fr; } .sim__tab { padding: 0 14px; } }
.sim__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
@media (max-width: 720px) { .sim__grid { grid-template-columns: 1fr; } }

/* Simulator: panel navy premium, sebahasa dengan kartu "Kenapa owner memilih ARBA" */
.simx { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px, 4vw, 52px); border-radius: 32px; color: #FFFFFF; background: linear-gradient(160deg, #0E1330 0%, #1C2660 55%, #4458A2 100%); box-shadow: 0 30px 70px rgba(14, 19, 48, .24), inset 0 1px 0 rgba(255, 255, 255, .12); }
.simx::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 178, 255, .32), rgba(159, 178, 255, 0)); pointer-events: none; }
.simx::after { content: ""; position: absolute; z-index: -1; left: -160px; bottom: -200px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 200, 245, .14), rgba(92, 200, 245, 0)); pointer-events: none; }
.simx .head .eyebrow { color: #9FB4FF; }
.simx .head h2 { color: #FFFFFF; }
.simx .head h2 .q { color: rgba(255, 255, 255, .62); }
.simx .head h2 b { color: #9FB4FF; }
.simx .head p, .simx .sim__hint, .simx .sim__note, .simx .sim__rev, .simx .sim__arba { color: #C9D0EA; }
.simx .sim__rev b { color: #FFFFFF; }
.simx .sim__tabs { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .26); }
.simx .sim__tab { color: #C9D0EA; }
.simx .sim__tab[aria-pressed="true"] { background: #FFFFFF; color: #1C2660; box-shadow: 0 6px 16px rgba(14, 19, 48, .3); }
.simx .tile-card { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.simx .sim__form label { color: #C9D0EA; }
.simx .sim__form input { background: rgba(14, 19, 48, .35); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .3); }
.simx .sim__form input:focus { outline: 2px solid #9FB4FF; outline-offset: 2px; }
.simx .sim__card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 178, 255, .26), rgba(159, 178, 255, 0)); pointer-events: none; }
.simx .sim__card h3 { color: #FFFFFF; }
.simx .sim__card h3 b { color: #9FB4FF; }
.simx .sim__card p { color: #C9D0EA; }
.simx .tag { background: rgba(159, 178, 255, .18); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .3); }
.simx .sim__res { background: rgba(14, 19, 48, .42); box-shadow: inset 0 0 0 1px rgba(159, 178, 255, .18); }
.simx .sim__res small { color: #9FB4FF; }
.simx .sim__res strong { color: #FFFFFF; }
.simx .sim__res strong.is-low { color: #FF9C94; }
.simx .sim__res span { color: #C9D0EA; }
.simx .sim__res em { color: #FFB4AB; }
.simx .btn--primary { color: #1C2660; background: linear-gradient(180deg, #FFFFFF, #E4E9FA); box-shadow: 0 10px 24px rgba(14, 19, 48, .35), inset 0 1px 0 #FFFFFF; }
@media (max-width: 720px) { .simx { border-radius: 26px; padding: 24px 16px; } }

/* ---------- Apa Kata Mereka: kartu owner berwarna + panel cerita (owner-stories.js) ---------- */
.ak { --cw: 252px; --ch: 292px; --gap: 30px; --lift: 128px; --fw: 172px; --fh: 212px; --navy-f: #0E1330; max-width: 1180px; margin: 0 auto; }
.ak__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ak__label { font-size: clamp(18px, 2vw, 22px); font-weight: var(--w-title); letter-spacing: -0.01em; }
.ak__count { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--muted); }
.ak__stage { position: relative; overflow: hidden; margin: 0 -16px; padding: 0 16px; transition: height .55s var(--ease); touch-action: pan-y; outline: none; }
.ak__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 24px; }
.ak__track { display: flex; gap: var(--gap); padding: var(--lift) 0 64px; transition: transform .7s cubic-bezier(.34, 1.22, .5, 1); will-change: transform; }
.ak.is-wait .ak__card { opacity: 0; }
.ak__card { position: relative; flex: none; width: var(--cw); height: var(--ch); border-radius: 26px; background-color: var(--c); background-image: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%); box-shadow: 0 34px 46px -24px var(--sh), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14); transition: transform .45s cubic-bezier(.34, 1.4, .5, 1), box-shadow .45s var(--ease); }
.ak__card:hover, .ak__card:focus-within { transform: translateY(-8px); box-shadow: 0 44px 56px -26px var(--sh), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18); }
.ak__card::before, .ak__bg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.05) 52%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: akShine 7.5s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0s); }
@keyframes akShine { 0%, 62% { background-position: 130% 0; } 92%, 100% { background-position: -30% 0; } }
.ak__ph { position: absolute; left: 50%; top: calc(var(--lift) * -1 + 8px); width: var(--fw); height: var(--fh); margin-left: calc(var(--fw) / -2); cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ak__frame { position: relative; display: block; width: 100%; height: 100%; border-radius: 24px; padding: 7px; transform-origin: 0 0; background: linear-gradient(160deg, rgba(68, 88, 162, .8) 0%, rgba(38, 50, 122, .8) 45%, rgba(14, 19, 48, .82) 100%); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 24px 40px -18px rgba(14, 19, 48, .5), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.ak__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(120deg, rgba(255, 255, 255, .18) 0%, transparent 30%); }
.ak__frame::before { content: ""; position: absolute; inset: 7px; z-index: 1; border-radius: 17px; pointer-events: none; background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.22), transparent 50%), linear-gradient(100deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%); background-size: 100% 100%, 300% 100%; background-position: 0 0, 150% 0; background-repeat: no-repeat; mix-blend-mode: soft-light; animation: akSheen 5.5s cubic-bezier(.4,0,.2,1) infinite 600ms; }
@keyframes akSheen { 0%, 55% { background-position: 0 0, 150% 0; } 85%, 100% { background-position: 0 0, -50% 0; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ak__frame { background: linear-gradient(160deg, #4458A2, #1A2366 60%, #0E1330); } }
.ak__frame--big { padding: 9px; border-radius: 30px; }
.ak__frame--big::before { inset: 9px; border-radius: 22px; }
.ak__frame img, .ak__ini { display: block; width: 100%; height: 100%; border-radius: 17px; object-fit: cover; object-position: 50% 22%; background: #1C2350; user-select: none; -webkit-user-drag: none; }
.ak__frame--big img, .ak__frame--big .ak__ini { border-radius: 22px; }
.ak__ini { display: grid; place-items: center; color: #fff; font-size: clamp(34px, 5vw, 56px); font-weight: var(--w-strong); letter-spacing: .04em; background: radial-gradient(120% 90% at 30% 20%, #2A3576, #0E1330); }
.ak__card:hover .ak__frame img { transform: scale(1.035); }
.ak__frame img { transition: transform .6s var(--ease); }
.ak__mono { position: absolute; z-index: 2; right: -10px; bottom: -10px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #4458A2 0%, #26327A 45%, #0E1330 100%); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(14,19,48,.35); }
.ak__frame--big .ak__mono { width: 58px; height: 58px; font-size: 16px; right: -14px; bottom: -14px; }
.ak__mono i { font-style: normal; display: block; animation: akBlink 4.6s infinite; transform-origin: 50% 55%; }
.ak__mono::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c, #4458A2); opacity: 0; animation: akRing 4.6s infinite; }
@keyframes akBlink { 0%, 86%, 100% { transform: none; opacity: 1; } 88% { transform: scaleY(.08); opacity: .7; } 90% { transform: none; opacity: 1; } 92% { transform: scaleY(.08); opacity: .7; } 94% { transform: none; } }
@keyframes akRing { 0%, 84% { opacity: 0; transform: scale(1); } 88% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
.ak__pop { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.ak__pop { z-index: 5; }
.ak__frame--big .ak__pop { width: 128px; height: 128px; margin: -64px 0 0 -64px; }
.ak__like .ak__cnt, .ak__heart .ak__cnt { overflow: hidden; min-width: 1ch; }
.ak__pop svg { width: 100%; height: 100%; fill: url(#akHeartG); }
.ak__heart svg, .ak__lh svg { transform-origin: 50% 55%; }
.ak__cnt { display: inline-block; }
.ak__fx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.ak__fx > * { position: absolute; left: 0; top: 0; }
.ak__fh { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.ak__fh svg { width: 100%; height: 100%; fill: var(--hc, #FF4D6D); filter: drop-shadow(0 3px 6px rgba(255,77,109,.35)); }
.ak__ring { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid #FF6B86; }
.ak__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hc, #FF4D6D); }
.ak__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 22px; border: 0; border-radius: inherit; background: none; color: #fff; text-align: left; font: inherit; cursor: pointer; }
.ak__body:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.ak__name { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.ak__body small { font-size: 12.5px; opacity: .82; }
.ak__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.ak__more svg { width: 12px; height: 12px; fill: currentColor; }
.ak__card:hover .ak__more, .ak__card:focus-within .ak__more { opacity: .95; transform: none; }
.ak__like { position: absolute; top: calc(var(--fh) - var(--lift) + 22px); right: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.ak__lh svg { width: 13px; height: 13px; fill: #fff; display: block; }
.ak__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.ak__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ak__hint svg { width: 14px; height: 14px; fill: #FF4D6D; }
.ak__nav { display: flex; gap: 6px; margin-left: auto; }
.ak__btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, opacity .2s; }
.ak__btn svg { width: 15px; height: 15px; fill: currentColor; }
.ak__btn:hover:not(:disabled) { background: var(--inset); }
.ak__btn:disabled { opacity: .3; cursor: default; }
/* Panel cerita */
.ak__detail { position: absolute; left: 16px; right: 16px; top: 0; display: grid; grid-template-columns: 9% minmax(220px, 28%) 1fr; align-items: start; padding: 12px 0 28px; }
.ak__detail[hidden] { display: none; }
.ak__bg { position: absolute; left: 15%; right: 0; top: 76px; bottom: 0; border-radius: 56px 30px 30px 30px; background-color: var(--c); background-image: radial-gradient(110% 90% at 0% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%); box-shadow: 0 40px 60px -34px var(--sh), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12); transition: background-color .5s var(--ease); }
.ak__close { position: absolute; top: 34px; right: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ak__close svg { width: 14px; height: 14px; fill: currentColor; }
.ak__close:hover { background: var(--inset); }
.ak__side { grid-column: 1; align-self: stretch; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 110px 0 4px; }
.ak__vcur, .ak__vnext { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 210px; overflow: hidden; text-overflow: ellipsis; }
.ak__vcur { font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.ak__vnext { border: 0; background: none; padding: 4px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.ak__vnext:hover { color: var(--ink); }
.ak__down { margin-top: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.ak__down svg { width: 16px; height: 16px; fill: currentColor; }
.ak__down:hover { background: var(--inset); }
.ak__dph { grid-column: 2; position: relative; z-index: 2; margin-top: 18px; aspect-ratio: 4 / 5; max-height: 480px; }
.ak__dph .ak__frame { box-shadow: 0 34px 50px -22px rgba(14,19,48,.6); }
.ak__dtx { grid-column: 3; position: relative; z-index: 2; color: #fff; padding: 118px 7% 0 7%; min-width: 0; }
.ak__dname { margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.02em; font-weight: var(--w-strong); }
.ak__dmeta { margin: 8px 0 0; font-size: 14px; opacity: .85; }
.ak__stars { display: inline-flex; gap: 3px; margin-top: 12px; }
.ak__stars span { width: 16px; height: 16px; }
.ak__stars svg { width: 100%; height: 100%; fill: rgba(255,255,255,.3); }
.ak__stars .on svg { fill: #FFD66B; }
.ak__quote { margin: 16px 0 0; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; color: rgba(255,255,255,.94); max-width: 60ch; }
.ak__heart { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.ak__heart svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 18; }
.ak__heart.is-on svg { fill: #FF4D6D; stroke: #FF4D6D; }
.ak__heart:hover { background: rgba(255,255,255,.26); }
.ak__heart:active { transform: scale(.96); }
.ak__heart span { font-variant-numeric: tabular-nums; }
.ak__heart em { font-style: normal; opacity: .85; }
.ak__gal { margin-top: 24px; }
.ak__galhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; opacity: .9; }
.ak__galhead a { display: inline-flex; align-items: center; gap: 3px; color: #fff; font-weight: 600; text-decoration: none; }
.ak__galhead a svg { width: 12px; height: 12px; fill: currentColor; }
.ak__galhead a:hover { text-decoration: underline; }
.ak__strip { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.ak__strip::-webkit-scrollbar { display: none; }
.ak__th { flex: none; width: 112px; height: 76px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; scroll-snap-align: start; background: rgba(255,255,255,.12); box-shadow: 0 10px 20px -12px rgba(0,0,0,.5); }
.ak__th img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ak__th:hover img { transform: scale(1.06); }
.ak__th:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ak-lb { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; padding: 24px; background: rgba(9,12,30,.92); animation: akFade .25s; }
@keyframes akFade { from { opacity: 0; } }
.ak-lb figure { margin: 0; display: grid; gap: 10px; justify-items: center; grid-column: 2; }
.ak-lb img { max-width: 100%; max-height: 80vh; border-radius: 16px; }
.ak-lb figcaption { color: #C9CEE6; font-size: 14px; }
.ak-lb button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ak-lb button svg { width: 18px; height: 18px; fill: currentColor; }
.ak-lb__x { position: absolute; top: 18px; right: 18px; }
.ak-lb__p { grid-column: 1; } .ak-lb__n { grid-column: 3; }
@media (max-width: 900px) {
  .ak { --cw: 220px; --ch: 262px; --gap: 22px; --lift: 116px; --fw: 152px; --fh: 190px; }
  .ak__detail { grid-template-columns: 0 minmax(0, 44%) 1fr; }
  .ak__side { display: none; }
  .ak__dph { margin-left: 4%; }
  .ak__bg { left: 0; }
  .ak__dtx { padding-top: 104px; }
}
@media (max-width: 640px) {
  .ak { --cw: 62vw; --ch: 72vw; --gap: 16px; --lift: 112px; --fw: 40vw; --fh: 50vw; }
  .ak__name { font-size: 19px; }
  .ak__body { padding: 18px; }
  .ak__detail { grid-template-columns: 1fr; padding-bottom: 20px; }
  .ak__bg { top: 34vw; border-radius: 40px 24px 24px 24px; }
  .ak__dph { grid-column: 1; width: 54vw; margin-left: 6%; }
  .ak__dtx { grid-column: 1; padding: 22px 22px 0; }
  .ak__close { top: 22vw; right: 4px; }
  .ak__hint { font-size: 12px; }
  .ak__btn span { display: none; }
  .ak__btn { width: 40px; padding: 0; justify-content: center; }
  .ak-lb { grid-template-columns: 1fr; padding: 60px 12px; }
  .ak-lb__p, .ak-lb__n { position: absolute; bottom: 18px; } .ak-lb__p { left: 30%; } .ak-lb__n { right: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .ak__mono i, .ak__mono::after, .ak__card::before, .ak__bg::before, .ak__frame::before { animation: none; }
  .ak__track, .ak__card, .ak__stage { transition: none; }
}

/* T-12: halaman hotel (/hotels/<slug>) dan brand (/brands/<kunci>), gaya OTA */
.ht { padding-block: 4px 56px; }
.ht__head { display: grid; justify-items: start; gap: 8px; margin: 4px 0 18px; }
.ht__head h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: var(--w-display); letter-spacing: -0.025em; line-height: 1.08; }
.ht__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ht__chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 13px; font-weight: 700; }
.ht__gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(250px, 42vw, 440px); border-radius: 26px; overflow: hidden; }
.ht__gal a { display: block; min-height: 0; background: #EEF0F8 center / cover no-repeat; cursor: zoom-in; transition: filter 180ms var(--ease); }
.ht__gal a:hover { filter: brightness(1.06); }
.ht__gal a:first-child { grid-row: 1 / 3; }
.ht__gal--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ht__gal--2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.ht__gal--2 a:first-child { grid-row: auto; }
.ht__gal--3 { grid-template-columns: 2fr 1fr; }
.ht__gal--4 a:last-child { grid-column: 2 / 4; }
.ht__gal--0 { display: grid; place-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr; background: linear-gradient(135deg, #2A3370, #121838); color: #FFFFFF; font-size: clamp(22px, 3vw, 34px); font-weight: var(--w-title); }
.ht__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; margin-top: 26px; align-items: start; }
@media (max-width: 900px) { .ht__cols { grid-template-columns: minmax(0, 1fr); } .ht__gal, .ht__gal--3, .ht__gal--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; height: clamp(260px, 62vw, 380px); } .ht__gal a:first-child { grid-row: auto; grid-column: 1 / 3; } .ht__gal a:nth-child(n+4) { display: none; } .ht__gal--4 a:last-child { grid-column: auto; } }
.ht__main h2 { margin: 32px 0 12px; font-size: 22px; font-weight: var(--w-title); letter-spacing: -0.01em; }
.ht__main h2:first-child { margin-top: 0; }
.ht__desc { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.ht__amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; font-size: 14.5px; }
.ht__side { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); }
.ht__from { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ht__from b { font-size: 30px; font-weight: var(--w-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ht__from small { color: var(--muted); font-size: 13px; }
.ht__rooms { display: grid; gap: 12px; }
.ht__room { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 16px; padding: 10px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.ht__room__ph { min-height: 100px; border-radius: 14px; background: #EEF0F8 center / cover no-repeat; }
.ht__room__b h3 { margin: 2px 0 4px; font-size: 16px; }
.ht__room__m { margin: 0; color: var(--muted); font-size: 13px; }
.ht__room__t { display: flex; gap: 6px; margin-top: 8px; }
.ht__room__t a { width: 44px; height: 34px; border-radius: 8px; background: #EEF0F8 center / cover no-repeat; cursor: zoom-in; }
.ht__room__p { display: grid; align-content: center; justify-items: end; gap: 6px; text-align: right; }
.ht__room__p b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ht__room__p small { margin-top: -6px; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .ht__room { grid-template-columns: 96px minmax(0, 1fr); } .ht__room__p { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: start; text-align: left; } .ht__room__p small { margin: 0; } }
.ht__gh { margin: 18px 0 8px; font-size: 15px; }
.ht__gg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ht__gg a { aspect-ratio: 3 / 2; border-radius: 12px; background: #EEF0F8 center / cover no-repeat; cursor: zoom-in; }
.ht__rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ht__rel--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ht__relc { display: grid; gap: 4px; padding: 8px 8px 12px; border-radius: 20px; background: #FFFFFF; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform 200ms var(--ease); }
.ht__relc:hover { transform: translateY(-3px); }
.ht__relc__ph { aspect-ratio: 4 / 3; border-radius: 14px; background: #EEF0F8 center / cover no-repeat; }
.ht__relc b { padding: 6px 6px 0; font-size: 15px; }
.ht__relc small { padding: 0 6px; color: var(--muted); font-size: 12.5px; }
.hb { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: clamp(18px, 4vw, 44px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 30px; }
.hb__logo { display: grid; place-items: center; min-height: 120px; }
.hb__logo img { max-width: 100%; max-height: 120px; }
.hb__logo span { font-size: 24px; font-weight: var(--w-strong); letter-spacing: .14em; }
.hb__cat { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.hb__t h1 { margin: 6px 0 10px; font-size: clamp(30px, 4.4vw, 52px); font-weight: var(--w-display); letter-spacing: -0.03em; line-height: 1.05; }
.hb__t p { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; opacity: .94; }
@media (max-width: 640px) { .hb { grid-template-columns: minmax(0, 1fr); text-align: left; } .hb__logo { justify-items: start; min-height: 0; } }
.hb__pts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.hb__pts li { padding: 8px 16px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 14px; font-weight: 700; }
.hb__act { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.hb__h2 { margin: 38px 0 14px; font-size: 22px; font-weight: var(--w-title); }

/* Alat bantu kemitraan (partner-tools.js) */
.pt__tabs { display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; margin: 6px 0 18px; padding: 4px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.pt__tab { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft, #3B4152); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pt__tab[aria-selected="true"] { background: var(--blue); color: #FFFFFF; }
.pt__tab:focus-visible, .pt__pill input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pt__panel { display: grid; gap: 16px; }
.pt__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt__form label { display: grid; gap: 6px; align-content: start; font-size: 13px; font-weight: 600; color: var(--muted); }
.pt__form input, .pt__form select { height: 46px; width: 100%; padding: 0 14px; border: 0; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 16px; }
.pt__form input:focus-visible, .pt__form select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.pt__form input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B03A2E; }
.pt__err { font-size: 12.5px; font-weight: 500; color: #B03A2E; }
.pt__hint { margin: 0; font-size: 14px; color: var(--muted); }
.pt__stats, .pt__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt__cats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pt__stat, .pt__cat { display: grid; gap: 4px; padding: 16px; border-radius: 20px; background: var(--blue-tint, #E9ECF7); }
.pt__stat small, .pt__cat small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pt__stat strong { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pt__stat span, .pt__cat span { font-size: 13px; color: var(--muted); }
.pt__stat--up strong { color: #1E7B45; } .pt__stat--down strong { color: #B03A2E; }
.pt__cat strong { font-size: 17px; } .pt__cat--ready strong { color: #1E7B45; } .pt__cat--attn strong { color: #9A6A00; } .pt__cat--prio strong { color: #B03A2E; } .pt__cat--data strong { color: #50566A; }
.pt__asm summary { cursor: pointer; font-weight: 600; font-size: 14px; } .pt__asm ul, .pt__need ul { margin: 8px 0 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; line-height: 1.55; }
.pt__rec { display: grid; gap: 6px; padding: 20px; border-radius: 22px; background: linear-gradient(160deg, #1C2660, #3A4A9A); color: #FFFFFF; }
.pt__rec small { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #C9CFEA; } .pt__rec h3 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); } .pt__rec h3 b { color: #BFD0FF; }
.pt__rec p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #E6EAFB; } .pt__rec .pt__why { color: #C9CFEA; } .pt__rec--none { background: #50566A; }
.pt__tbl .is-rec td { background: var(--blue-tint, #E9ECF7); font-weight: 600; } .pt__tbl td, .pt__tbl th { padding: 10px 12px; text-align: left; } .pt__tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.pt__grp { display: grid; gap: 14px; margin: 0; padding: 18px; border: 0; } .pt__grp legend { padding: 0; font-weight: 700; font-size: 16px; float: left; width: 100%; margin-bottom: 4px; } .pt__grp legend + * { clear: both; }
.pt__q p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; } .pt__ans { display: flex; flex-wrap: wrap; gap: 8px; }
.pt__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pt__pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.pt__pill input:checked + span { background: var(--blue); color: #FFFFFF; box-shadow: none; }
.pt__todo { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 14.5px; } .pt__todo ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--muted); }
@media (max-width: 760px) { .pt__form, .pt__stats { grid-template-columns: minmax(0, 1fr); } .pt__tabs { border-radius: 18px; } .pt__tab { flex: 1 1 auto; } }

/* Apa Kata Mereka: panel video utama, strip angka, ajakan mitra */
.rmx { display: block; }
.rmx__player { display: none; }
.rmx__stats, .rmx__cta { margin-top: 18px; }
.rmx__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 22px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.rmx__num { display: grid; gap: 0; }
.rmx__num b { font-size: 26px; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.rmx__num span { font-size: 12.5px; color: var(--muted); }
.rmx__props { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; flex: 1 1 260px; }
.rmx__props li { padding: 5px 12px; border-radius: 999px; background: var(--blue-tint, #E9ECF7); color: var(--blue); font-size: 12.5px; font-weight: 600; }
.rmx__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border-radius: 24px; background: linear-gradient(160deg, #4458A2, #1A2366 60%, #0E1330); color: #FFFFFF; }
.rmx__cta b { display: block; font-size: 18px; }
.rmx__cta span { font-size: 14px; opacity: .85; }
.rmx__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rmx__cta .btn--ghost { color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); background: transparent; }
@media (min-width: 980px) {
  .rmx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 28px; align-items: start; }
  .rmx .reels { flex-wrap: wrap; overflow: visible; gap: 22px 18px; justify-content: flex-start; }
  .rmx__player { display: block; position: relative; aspect-ratio: 9 / 14; max-height: 560px; width: 100%; border-radius: 28px; overflow: hidden; background: #0E1330; box-shadow: 0 24px 50px rgba(20, 28, 55, .18); }
  .rmx__player video, .rmx__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
  .rmx__poster { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: #1C2350 center / cover no-repeat; color: #FFFFFF; text-align: left; }
  .rmx__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,19,48,0) 45%, rgba(14,19,48,.82)); }
  .rmx__poster .cv__play { position: absolute; left: 50%; top: 46%; translate: -50% -50%; }
  .rmx__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 2px; }
  .rmx__cap small { opacity: .8; font-size: 12.5px; }
  .rmx__cap b { font-size: 18px; }
  .rl.is-cur .rl__ring { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--blue); }
}
@media (min-width: 980px) {
  .rmx .reels { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 0; }
  .rmx .rl { width: 100%; grid-template-columns: 84px minmax(0, 1fr); justify-items: start; align-items: center; gap: 0 16px; padding: 10px 16px 10px 10px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .2s; }
  .rmx .rl:hover { box-shadow: inset 0 0 0 1px var(--blue), 0 10px 24px rgba(20,28,55,.08); }
  .rmx .rl.is-cur { box-shadow: inset 0 0 0 2px var(--blue); }
  .rmx .rl .rl__ring { box-shadow: none !important; }
  .rmx .rl__t { max-width: none; font-size: 16px; font-weight: 600; white-space: normal; }
}
.job__ext--img { padding: 0; overflow: hidden; background: #E60278; box-shadow: none; } .job__ext--img img { display: block; height: 40px; width: auto; }

/* Tombol Bagikan */
.shr { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + 52px + 12px + var(--fab-lift) + env(safe-area-inset-bottom, 0px)); z-index: 69; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shr__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .12); background: #fff; color: #3A4A8C; box-shadow: 0 6px 18px rgba(15, 23, 42, .14); display: inline-grid; place-items: center; cursor: pointer; }
.shr__btn svg { width: 20px; height: 20px; }
.shr__menu { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); border: 1px solid rgba(15, 23, 42, .08); }
.shr__menu[hidden] { display: none; }
.shr__i { font: 600 14px/1 var(--sf, inherit); color: #1B2559; background: transparent; border: 0; padding: 12px 16px; border-radius: 10px; text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap; }
.shr__i:hover { background: #EEF1FA; }
@media (max-width: 639px) { .shr { bottom: calc(16px + 54px + 12px + var(--fab-lift) + env(safe-area-inset-bottom, 0px)); } }
body.has-consent .shr { visibility: hidden; }
.intro:not([hidden]) ~ .shr { display: none; }
body:has(.smzf) .shr { bottom: calc(150px + var(--fab-lift) + env(safe-area-inset-bottom, 0px)); }