/* Navbar + footer situs publik Maxy (desain landing-arah/arah-5).
   Dipakai di beranda (layouts.landing) DAN di semua halaman layouts.main, jadi semua aturan di sini dicakup
   ke .lp-nav / .lp-foot / .lp-page supaya tidak bocor ke halaman Bootstrap lama (dan sebaliknya diberi reset sendiri).
   Token: kuning #F5A623 hanya bidang; teks beraksen gold-ink #A16207 (5,0:1 di atas putih). */
.lp-nav, .lp-foot, .lp-page {
  --yellow: #F5A623; --yellow-hi: #FFC85C; --gold-ink: #A16207;
  --navy: #2A3164; --navy-deep: #1A2049; --navy-mid: #3D4788; --navy-pale: #EDEFF8;
  --paper: #fff; --bg: #F7F8FB; --line: #E3E8F2; --line-2: #CBD3E6;
  --ink: #141A33; --ink-2: #4A5478; --ink-3: #6B7599;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Inter Tight", "Inter", system-ui, sans-serif; --text: "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 1160px; --r: 12px; --r-lg: 20px;
  --nav-h: 124px; /* baris utama 68 + baris pil sektor 56 */
}
.lp-nav *, .lp-nav *::before, .lp-nav *::after, .lp-foot *, .lp-foot *::before, .lp-foot *::after { box-sizing: border-box; }
.lp-nav, .lp-foot { font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
.lp-nav a, .lp-foot a { color: inherit; text-decoration: none; }
.lp-nav svg, .lp-foot svg { display: block; flex: none; }
.lp-nav button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.lp-nav ul, .lp-foot ul { list-style: none; margin: 0; padding: 0; }
.lp-foot p, .lp-foot h4, .lp-foot address { margin: 0; font-style: normal; }
.lp-nav :focus-visible { outline: 2px solid var(--navy-deep); outline-offset: 3px; border-radius: 6px; }
.lp-foot :focus-visible, .lp-util :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.lp-wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* tombol & tautan (dipakai juga oleh isi beranda) */
.lp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--text); white-space: nowrap; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.lp-btn:active { transform: scale(.97); }
.lp-btn svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.lp-btn-y { background: var(--yellow); color: var(--navy-deep) !important; }
.lp-btn-n { background: var(--navy-deep); color: #fff !important; }
@media (hover: hover) { .lp-btn-y:hover { background: var(--yellow-hi); } .lp-btn-n:hover { background: var(--navy); } .lp-btn:hover svg { transform: translateX(3px); } }

/* ===== navbar: baris sektor (navy) + baris utama (putih kaca). Tetap (fixed) karena halaman lama sudah memberi ruang atas ±100-130px ===== */
.lp-nav { position: fixed; inset: 0 0 auto; z-index: 1030; }
/* bahasa di baris utama (terang) */
.lp-bar { position: relative; z-index: 2; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow 220ms var(--ease); }
.lp-nav.stuck .lp-bar { box-shadow: 0 1px 0 var(--line); }
/* baris pil sektor: produk Maxy dipajang, "Untuk:" di depan; pil aktif navy dengan ikon kuning */
.lp-cats { position: relative; z-index: 1; height: 56px; background: var(--paper); border-bottom: 1px solid var(--line); transition: transform 260ms var(--ease), opacity 200ms var(--ease); }
.lp-nav.tuck .lp-cats { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.lp-cats-in { height: 100%; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.lp-cats-in::-webkit-scrollbar { display: none; }
.lp-cats-k { flex: none; margin-right: 6px; font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.lp-cats a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 7px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--navy-deep); transition: background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.lp-cats a i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-deep); color: #fff; font: 700 9px/1 var(--mono); font-style: normal; letter-spacing: 0; }
.lp-cats a[aria-current="page"] { background: var(--navy-deep); color: #fff; box-shadow: none; }
.lp-cats a[aria-current="page"] i { background: var(--yellow); color: var(--navy-deep); }
@media (hover: hover) { .lp-cats a:not([aria-current="page"]):hover { background: var(--navy-pale); transform: translateY(-1px); } }
.lp-main { height: 68px; display: flex; align-items: center; gap: 32px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 17px/1 var(--display); letter-spacing: -.02em; color: var(--navy-deep) !important; }
.lp-brand svg { width: 30px; height: 30px; }
.lp-links { display: flex; align-items: center; gap: 4px; margin-right: auto; font-size: 15px; color: var(--ink-2); }
.lp-links > a, .lp-dd > button { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 999px; transition: color 160ms var(--ease), background-color 160ms var(--ease); }
.lp-links [aria-current="page"] { color: var(--navy-deep); font-weight: 600; }
.lp-dd { position: relative; }
/* pilihan bahasa (dropdown di .lp-act): tombol ringkas bola dunia + kode, menu rata kanan supaya tidak keluar layar */
.lp-lang { flex: none; }
.lp-lang > button { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; font: 500 13px/1 var(--mono); color: var(--navy-deep); transition: background-color 160ms var(--ease); }
.lp-lang .lp-globe { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lp-lang > button[aria-expanded="true"] .lp-globe { transform: none; }
.lp-lang .lp-dd-menu { left: auto; right: 0; min-width: 200px; }
.lp-lang .lp-dd-menu a { justify-content: space-between; gap: 16px; }
.lp-lang .lp-dd-menu .mono { font-size: 12px; color: var(--ink-3); }
.lp-lang .lp-dd-menu a[aria-current="true"] { font-weight: 600; color: var(--navy-deep); background: var(--bg); }
@media (hover: hover) { .lp-lang > button:hover { background: var(--bg); } }
.lp-dd > button svg { width: 14px; height: 14px; transition: transform 220ms var(--ease); }
.lp-dd > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.lp-dd-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 240px; padding: 8px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(26, 32, 73, .45); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s 220ms; }
.lp-dd-menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; } /* jembatan supaya hover tidak putus */
.lp-dd-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: 15px; }
.lp-dd.open .lp-dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .lp-links > a:hover, .lp-dd > button:hover { color: var(--navy-deep); background: var(--bg); }
  .lp-dd:hover .lp-dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .lp-dd-menu a:hover { background: var(--bg); color: var(--navy-deep); }
}
.lp-act { display: flex; align-items: center; gap: 16px; font-size: 15px; }
.lp-act .lp-btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.lp-in { min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; color: var(--navy-deep) !important; }
.lp-burger { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: var(--navy-deep); box-shadow: inset 0 0 0 1px var(--line-2); }
.lp-burger svg { width: 20px; height: 20px; }
.lp-burger .x, .lp-nav.menu .lp-burger .m { display: none; } .lp-nav.menu .lp-burger .x { display: block; }

/* menu HP: panel di bawah navbar, semua tautan berkelompok */
.lp-mob { max-height: calc(100svh - var(--nav-h)); overflow-y: auto; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(26, 32, 73, .45); }
.lp-mob-in { padding: 12px 0 24px; display: grid; gap: 20px; }
.lp-mob h4 { margin: 0 0 4px; font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink); }
.lp-mob a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; }
.lp-mob a[aria-current="page"] { color: var(--navy-deep); font-weight: 600; }
.lp-mob-act { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-mob-act .lp-btn { flex: 1; justify-content: center; border-bottom: 0; }

@media (max-width: 1080px) {
  .lp-links, .lp-act .lp-in, .lp-act .lp-btn-n { display: none; }
  .lp-act { margin-left: auto; } .lp-burger { display: grid; }
}
@media (min-width: 1081px) { .lp-mob { display: none !important; } }
@media (max-width: 640px) { .lp-lang { display: none; } .lp-cats { height: 52px; } .lp-cats a { height: 36px; font-size: 13.5px; } }

/* ===== footer: bidang navy sendiri supaya halaman punya akhir yang jelas ===== */
.lp-foot { background: var(--navy-deep); color: rgba(255, 255, 255, .72); padding: 56px 0 28px; font-size: 14px; }
.lp-foot .lp-brand { color: #fff !important; font-size: 18px; } .lp-foot .lp-brand svg { width: 32px; height: 32px; }
.lp-fmain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: 56px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lp-ftag { margin-top: 12px !important; max-width: 22ch; font: 500 16px/1.4 var(--display); letter-spacing: -.01em; color: rgba(255, 255, 255, .86); }
.lp-fwa { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 20px; padding: 0 16px; border-radius: 999px; font: 600 13.5px/1 var(--text); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.lp-fwa svg { width: 14px; height: 14px; }
@media (hover: hover) { .lp-fwa:hover { background: var(--yellow); color: var(--navy-deep); box-shadow: none; } }
.lp-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lp-foot h4 { margin: 0 0 12px; font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--yellow); }
.lp-fgrid a { display: flex; align-items: center; min-height: 32px; transition: color 160ms var(--ease); }
@media (hover: hover) { .lp-fgrid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; } }
.lp-office { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.lp-office address { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .6); }
.lp-office span { display: block; margin-bottom: 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.lp-office b { display: block; margin-bottom: 4px; font: 600 13.5px/1.3 var(--display); color: rgba(255, 255, 255, .9); }
.lp-fbase { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .56); }
@media (max-width: 900px) { .lp-fmain { grid-template-columns: 1fr; gap: 32px; } .lp-fgrid { grid-template-columns: 1fr 1fr; } .lp-office { grid-template-columns: 1fr; gap: 18px; } }

/* skala: user minta seluruh tampilan desktop 88%. HP tetap 100% supaya teks terbaca. */
@media (min-width: 901px) { .lp-nav, .lp-foot, .lp-hubband { zoom: .88; } .lp-nav { --nav-h: 109px; } }
@media (prefers-reduced-motion: reduce) { .lp-nav *, .lp-foot * { transition: none !important; } }

/* pita foto MAXY AI Hub di atas footer (partials/landing/footer). Putih di atas navy-deep 15:1; putih .74 di atas navy-deep 8,7:1. */
.lp-fhub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px; align-items: center; margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: inherit; text-decoration: none; }
.lp-fhub-t { display: grid; gap: 10px; justify-items: start; }
.lp-fhub-t small { font: 500 11px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--yellow); }
.lp-fhub-t b { font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -.03em; color: #fff; max-width: 16ch; }
.lp-fhub-t > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: #fff; }
.lp-fhub-t svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.lp-fhub-ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lp-fhub-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--navy-mid); transition: transform 600ms var(--ease); }
.lp-fhub-ph img:nth-child(even) { transform: translateY(14px); }
.lp-fhub:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; border-radius: 14px; }
@media (hover: hover) { .lp-fhub:hover .lp-fhub-t svg { transform: translateX(4px); } .lp-fhub:hover .lp-fhub-ph img { transform: translateY(-4px); } .lp-fhub:hover .lp-fhub-ph img:nth-child(even) { transform: translateY(10px); } }
@media (max-width: 900px) { .lp-fhub { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; padding-bottom: 40px; } .lp-fhub-ph { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-fhub-ph img:nth-child(even) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-fhub-ph img, .lp-fhub-t svg { transition: none; } }

/* ===== musik latar: tombol kecil kiri bawah (Moxi di kanan bawah). Empat batang bergerak saat musik nyala. ===== */
.lp-music { position: fixed; left: 20px; bottom: 20px; z-index: 40; }
.lp-music:not(.on) button { opacity: .78; }
.lp-music button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--navy-deep); color: #fff; font: 600 13px/1 var(--text); box-shadow: 0 16px 32px -16px rgba(26, 32, 73, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.lp-music button:active { transform: scale(.97); }
.lp-music-bars { display: inline-flex; align-items: flex-end; gap: 3px; width: 18px; height: 16px; }
.lp-music-bars i { flex: 1; height: 30%; border-radius: 2px; background: var(--yellow); transform-origin: bottom; transition: height 200ms var(--ease); }
.lp-music.on .lp-music-bars i { animation: lp-eq 900ms ease-in-out infinite alternate; }
.lp-music.on .lp-music-bars i:nth-child(2) { animation-delay: -300ms; } .lp-music.on .lp-music-bars i:nth-child(3) { animation-delay: -600ms; } .lp-music.on .lp-music-bars i:nth-child(4) { animation-delay: -150ms; }
@keyframes lp-eq { from { height: 25%; } to { height: 100%; } }
@media (hover: hover) { .lp-music button:hover { background: var(--navy); } }
@media (max-width: 640px) { .lp-music { left: 12px; bottom: 12px; } .lp-music-t { display: none; } .lp-music button { padding: 0 13px; } }
@media (prefers-reduced-motion: reduce) { .lp-music.on .lp-music-bars i { animation: none; height: 70%; } }

/* pita MAXY AI Hub = pita terang tersendiri di atas footer (bukan bagian footer). navy-deep di atas bg 14:1; gold-ink di atas bg 4,7:1 */
.lp-hubband { padding: 44px 0; background: var(--bg); border-top: 1px solid var(--line); font: 400 16px/1.6 var(--text); color: var(--ink); -webkit-font-smoothing: antialiased; }
.lp-hubband *, .lp-hubband *::before, .lp-hubband *::after { box-sizing: border-box; }
.lp-hubband a { color: inherit; text-decoration: none; }
.lp-hubband svg { display: block; flex: none; }
.lp-hubband .lp-fhub { margin: 0; padding: 0; border: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lp-hubband .lp-fhub-t small { color: var(--gold-ink); }
.lp-hubband .lp-fhub-t b { color: var(--navy-deep); font-size: clamp(20px, 1.9vw, 24px); }
.lp-hubband .lp-fhub-t > span { color: var(--navy-deep); }
.lp-hubband .lp-fhub-ph img { aspect-ratio: 3 / 2; border-radius: 12px; background: var(--line); }
.lp-hubband :focus-visible { outline: 2px solid var(--navy-deep); outline-offset: 4px; border-radius: 12px; }