/* ============================================================
       Ekstensi: pengalih bahasa, foto, galeri, balon FAQ
       Dipakai oleh versi Indonesia (/) dan Inggris (/en/)
       ============================================================ */

    /* ---------- Pengalih bahasa ---------- */

    .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(10, 43, 75, .5);
    }

    .lang-switch a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      padding: 5px 8px;
      border-radius: 999px;
      color: var(--muted-2);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .1em;
      line-height: 1;
      text-transform: uppercase;
      transition: background .2s ease, color .2s ease;
    }

    .lang-switch a:hover {
      color: var(--text-soft);
      background: rgba(255, 255, 255, .05);
    }

    .lang-switch a[aria-current="true"] {
      background: rgba(142, 216, 255, .16);
      color: #fff;
      box-shadow: inset 0 0 0 1px rgba(142, 216, 255, .3);
    }

    .header-lang { margin-left: 10px; }

    /* Menjaga 8 tautan navigasi + pengalih bahasa + CTA tetap satu baris */
    .site-nav { flex-shrink: 0; }

    .nav-link {
      padding: 10px 8px;
      font-size: 12px;
      white-space: nowrap;
    }

    .header-cta,
    .site-nav .nav-cta { white-space: nowrap; }

    @media (min-width: 981px) {
      .header-inner { gap: 20px; }
    }

    @media (min-width: 981px) and (max-width: 1080px) {
      .nav-link { padding: 10px 6px; font-size: 11.5px; }
      .header-lang { margin-left: 0; }
    }

    .site-nav .nav-lang {
      display: none;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .site-nav .nav-lang span {
      color: var(--muted-2);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .site-nav .nav-lang .lang-switch { background: rgba(255, 255, 255, .03); }

    /* ---------- Foto besar ---------- */

    .photo-band {
      position: relative;
      margin-top: 52px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #08243f;
    }

    .photo-band img {
      display: block;
      width: 100%;
      height: clamp(240px, 40vw, 520px);
      object-fit: cover;
    }

    .photo-band figcaption {
      position: absolute;
      inset: auto 0 0 0;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 14px;
      padding: 44px 26px 22px;
      background: linear-gradient(180deg, rgba(3, 14, 26, 0) 0%, rgba(3, 14, 26, .9) 62%, rgba(3, 14, 26, .97) 100%);
      color: var(--text-soft);
      font-size: 11.5px;
      line-height: 1.6;
    }

    .photo-band figcaption strong {
      color: #fff;
      font-size: 12.5px;
      font-weight: 600;
    }

    .photo-band figcaption span { color: var(--muted-2); }

    /* ---------- Galeri ---------- */

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .gallery-item {
      position: relative;
      display: block;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #08243f;
      isolation: isolate;
    }

    .gallery-item img {
      display: block;
      width: 100%;
      height: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      transition: transform .6s var(--ease);
    }

    .gallery-item--wide { grid-column: span 2; }

    .gallery-item--full { grid-column: 1 / -1; }

    .gallery-item--full img { aspect-ratio: 21 / 8; }

    .gallery-item::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(3, 14, 26, 0) 45%, rgba(3, 14, 26, .88) 100%);
      transition: opacity .3s ease;
    }

    .gallery-item:hover img { transform: scale(1.045); }
    .gallery-item:hover::after { opacity: .82; }

    .gallery-item:focus-visible {
      outline: 2px solid var(--brand-light);
      outline-offset: 3px;
    }

    .gallery-caption {
      position: absolute;
      inset: auto 0 0 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 18px 18px 16px;
      pointer-events: none;
    }

    .gallery-caption strong {
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -.01em;
    }

    .gallery-caption span {
      color: rgba(214, 233, 246, .72);
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .gallery-zoom {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 9px;
      background: rgba(4, 20, 38, .6);
      color: #fff;
      opacity: 0;
      transition: opacity .25s ease, background .25s ease;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .gallery-zoom svg { width: 14px; height: 14px; }

    .gallery-item:hover .gallery-zoom,
    .gallery-item:focus-visible .gallery-zoom { opacity: 1; }

    /* Offset agar butir FAQ tidak tertutup header + tab bar */
    .faq-item { scroll-margin-top: 200px; }

    /* ---------- Lightbox ---------- */
    .lightbox {
      width: min(1120px, calc(100vw - 32px));
      max-width: none;
      max-height: calc(100dvh - 32px);
      padding: 0;
      border: 1px solid rgba(158, 207, 241, .22);
      border-radius: 18px;
      background: #041426;
      color: var(--text);
      overflow: hidden;
      box-shadow: 0 40px 90px rgba(0, 4, 10, .7);
    }

    .lightbox::backdrop {
      background: rgba(1, 8, 16, .82);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .lightbox img {
      display: block;
      width: 100%;
      max-height: calc(100dvh - 140px);
      object-fit: contain;
      background: #020b14;
    }

    .lightbox-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-top: 1px solid var(--line);
    }

    .lightbox-bar p {
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.5;
    }

    .lightbox-bar strong {
      display: block;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 600;
    }

    .lightbox-close {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: rgba(255, 255, 255, .04);
      color: var(--text-soft);
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

    .lightbox-close:hover {
      border-color: rgba(142, 216, 255, .4);
      background: rgba(142, 216, 255, .12);
      color: #fff;
    }

    .lightbox-close svg { width: 16px; height: 16px; }

    /* ---------- Balon FAQ ---------- */

    .faq-bubble {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 95;
    }

    .faq-bubble-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 12px 18px 12px 15px;
      border: 1px solid rgba(142, 216, 255, .34);
      border-radius: 999px;
      background: linear-gradient(140deg, #17547f 0%, #0b3153 72%);
      color: #fff;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .06em;
      line-height: 1;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(0, 8, 18, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
      transition: transform .22s var(--ease), box-shadow .22s ease, border-color .22s ease;
    }

    .faq-bubble-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(142, 216, 255, .6);
      box-shadow: 0 22px 42px rgba(0, 8, 18, .58), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .faq-bubble-btn svg { width: 16px; height: 16px; }

    .faq-bubble-btn .faq-bubble-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 4px rgba(143, 240, 213, .16);
      animation: breathe 3s ease-in-out infinite;
    }

    .faq-bubble-btn[aria-expanded="true"] .faq-bubble-dot {
      background: #ffd166;
      box-shadow: 0 0 0 4px rgba(255, 209, 102, .18);
    }

    .faq-bubble-panel {
      position: absolute;
      right: 0;
      bottom: calc(100% + 14px);
      width: min(372px, calc(100vw - 32px));
      max-height: min(70dvh, 560px);
      overflow-y: auto;
      padding: 18px;
      border: 1px solid rgba(158, 207, 241, .22);
      border-radius: 18px;
      background: rgba(5, 24, 44, .98);
      box-shadow: 0 30px 70px rgba(0, 6, 12, .6);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      backdrop-filter: blur(16px) saturate(140%);
      animation: bubble-in .26s var(--ease) both;
    }

    @keyframes bubble-in {
      from { opacity: 0; transform: translateY(10px) scale(.98); }
      to { opacity: 1; transform: none; }
    }

    .faq-bubble-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .faq-bubble-head span {
      display: block;
      color: var(--brand-light);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .faq-bubble-head strong {
      display: block;
      margin-top: 6px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -.01em;
    }

    .faq-bubble-close {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .04);
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      transition: background .2s ease, color .2s ease;
    }

    .faq-bubble-close:hover { background: rgba(255, 255, 255, .09); color: #fff; }

    .faq-bubble-list {
      display: grid;
      gap: 2px;
      margin-top: 10px;
    }

    .faq-bubble-list a {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) 14px;
      gap: 11px;
      align-items: start;
      padding: 11px 10px;
      border-radius: 10px;
      color: var(--text-soft);
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.5;
      transition: background .2s ease, color .2s ease;
    }

    .faq-bubble-list a:hover {
      background: rgba(142, 216, 255, .08);
      color: #fff;
    }

    .faq-bubble-list .q-num {
      padding-top: 1px;
      color: var(--brand-light);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .faq-bubble-list svg {
      width: 12px;
      height: 12px;
      margin-top: 3px;
      color: var(--muted-2);
      transition: transform .2s var(--ease), color .2s ease;
    }

    .faq-bubble-list a:hover svg { transform: translateX(2px); color: var(--brand-light); }

    .faq-bubble-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .faq-bubble-foot p {
      color: var(--muted-2);
      font-size: 9.5px;
      line-height: 1.5;
    }

    .faq-bubble-foot a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--brand-light);
      font-size: 10.5px;
      font-weight: 600;
      border-bottom: 1px solid rgba(142, 216, 255, .3);
    }

    .faq-bubble-foot a:hover { border-bottom-color: var(--brand-light); }
    .faq-bubble-foot a svg { width: 12px; height: 12px; }

    /* ---------- Responsif ---------- */

    @media (max-width: 1080px) {
      .header-lang { margin-left: 4px; }
    }

    @media (max-width: 980px) {
      .header-lang { display: none; }

      .site-nav .nav-lang { display: flex; }
      .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .gallery-item--wide { grid-column: span 2; }
      .gallery-item--full img { aspect-ratio: 16 / 9; }
      .faq-item { scroll-margin-top: 185px; }
    }

    @media (max-width: 760px) {
      .photo-band { margin-top: 38px; border-radius: 18px; }
      .photo-band img { height: clamp(220px, 62vw, 340px); }
      .photo-band figcaption { padding: 36px 18px 18px; font-size: 10.5px; }
      .photo-band figcaption strong { font-size: 11.5px; }

      .gallery-grid { gap: 10px; }
      .gallery-caption { padding: 14px 14px 13px; }
      .gallery-caption strong { font-size: 11px; }
      .gallery-caption span { font-size: 8.5px; }
      .gallery-zoom { display: none; }

      .faq-bubble { right: 16px; bottom: 16px; }
      .faq-bubble-btn { padding: 11px 16px 11px 13px; font-size: 10.5px; }
    }

    @media (max-width: 540px) {
      .gallery-grid { grid-template-columns: 1fr; }
      .gallery-item--wide,
      .gallery-item--full { grid-column: auto; }
      .gallery-item--full img { aspect-ratio: 4 / 3; }
      .gallery-caption strong { font-size: 11.5px; }
      .faq-item { scroll-margin-top: 170px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-bubble-panel { animation: none; }
      .gallery-item img { transition: none; }
      .faq-bubble-btn .faq-bubble-dot { animation: none; }
    }