/* Tombol dan hiasan yang sama dengan homepage (disalin dari index.html). */
:root{--brand-onyx:#14120D;--brand-gold:#C6A253;--brand-gold-bright:#E3C577;--f-mono:"Space Mono",monospace}
:root[data-theme="light"]{--brand-onyx:#3E2E1C}
:root[data-theme="light"] .page-nav-toggle{background:var(--paper-alt);color:var(--ink)}
.wrap{padding-bottom:8px}html{scroll-behavior:smooth}
.deco-strip{overflow:hidden}
  .toolbar-fixed{ position:fixed; top:16px; left:16px; z-index:60; display:flex; align-items:center; gap:6px; }
  .toolbar-fixed.is-bottom{ top:auto; bottom:calc(16px + var(--lift, 0px)); }
  /* Satu paket: grup kiri (terang/gelap, audio) dan kanan (menu, panah) memudar bersama kalau bertumpuk dengan tombol halaman */
  .toolbar-fixed, .page-nav{ transition:opacity .2s; }
  body.dock-fade .toolbar-fixed, body.dock-fade .page-nav{ opacity:0; pointer-events:none; }
  .theme-toggle{
    border-radius:50%;
    border:1px solid var(--line-strong); background:var(--paper-alt);
    color:var(--gold); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .18s, border-color .18s, color .18s, opacity .18s;
    padding:0; width:44px; height:44px; opacity:.5;
  }
  .theme-toggle:hover, .theme-toggle:focus-visible{ opacity:1; border-color:var(--gold); outline:none; }
  .theme-toggle svg{ width:20px; height:20px; }
  .theme-toggle .bulb-rays{ opacity:0; transition:opacity .2s; }
  .theme-toggle .bulb-glass{ fill:none; transition:fill .2s; }
  :root:not([data-theme="light"]) .theme-toggle .bulb-rays{ opacity:1; }
  :root:not([data-theme="light"]) .theme-toggle .bulb-glass{ fill:var(--brand-gold); fill-opacity:.3; }
  @media print{ .toolbar-fixed{ display:none !important; } }
  .deco-notes{ position:absolute; inset:0; z-index:0; pointer-events:none; }
  .deco-notes b{
    position:absolute;
    left:var(--x);
    top:var(--y);
    display:inline-block;
    font-family:"Noto Music", serif;
    font-size:var(--s, 24px);
    line-height:1;
    color:var(--brand-gold);
    opacity:0.15;
    transform:rotate(var(--r, 0deg));
  }
  .deco-strip{ position:relative; height:clamp(80px, 13vw, 130px); }
  /* Ruang sebelum footer: muat panah ke atas + menu 3 garis (2 x 48px + jarak) supaya tidak menimpa tombol Follow */
  .deco-strip--end{ height:max(150px, clamp(80px, 13vw, 130px)); }
  @media (max-width:600px){ .deco-strip{ height:70px; } .deco-strip--end{ height:150px; } }
  .deco-strip .deco-notes b{ opacity:0.15; }
  /* ---- Page nav ---- */
  .page-nav{
    position:fixed;
    bottom:calc(22px + var(--lift, 0px));
    right:22px;
    z-index:200;
  }
  body.lightbox-open .page-nav{ display:none; }
  .page-nav--top{
    top:22px;
    bottom:auto;
  }
  .page-nav--top .page-nav-menu{
    top:56px;
    bottom:auto;
  }
  .page-nav--top #page-nav-top{ display:none; }
  /* Mobile: same top/bottom toggle as desktop (top-right through Hero-Gallery,
     bottom-right after), cushioned by safe-area insets on both edges so neither
     position gets clipped by the browser's address bar or home indicator. */
  @media (max-width:600px){
    .page-nav{
      bottom: calc(env(safe-area-inset-bottom, 0px) + 22px + var(--lift, 0px));
      right:16px;
    }
    .page-nav--top{
      top: calc(env(safe-area-inset-top, 0px) + 20px);
      bottom:auto;
    }
    .page-nav--top .page-nav-menu{ top:56px; bottom:auto; }
  }
  /* Docked: reached the bottom of the page, so stop floating and settle
     inside the footer's own reserved corner instead. */
  .page-nav.is-docked{
    top:auto;
  }
  .page-nav.is-docked .page-nav-menu{ top:auto; bottom:56px; }
  .page-nav.is-docked #page-nav-top{ display:block; }
  /* Panah ke atas: muncul di atas tombol 3 garis setelah halaman mentok di bawah (seperti laman proposal) */
  .page-nav .page-nav-up{ display:none; position:absolute; right:0; bottom:56px; }
  .page-nav-up svg{ width:22px; height:22px; }
  /* Panah ke atas: warna dan efek sama dengan tombol terang/gelap dan audio (bentuk tetap kotak seperti menu) */
  .page-nav .page-nav-up, :root[data-theme="light"] .page-nav .page-nav-up{ background:var(--paper-alt); border:1px solid var(--line-strong); color:var(--gold); opacity:.5; transition:border-color .18s, opacity .18s; }
  .page-nav .page-nav-up:hover, .page-nav .page-nav-up:focus-visible, :root[data-theme="light"] .page-nav .page-nav-up:hover{ opacity:1; border-color:var(--gold); background:var(--paper-alt); color:var(--gold); outline:none; }
  .page-nav .page-nav-up:active{ opacity:1; border-color:var(--gold); background:var(--paper-alt); color:var(--gold); }
  .page-nav--up .page-nav-up{ display:flex; }
  .page-nav-menu:not([hidden]) ~ .page-nav-up{ display:none; }

  .page-nav-toggle{
    width:48px;
    height:48px;
    border:1px solid var(--brand-gold);
    background:var(--brand-onyx);
    color:var(--brand-gold-bright);
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.5;
    transition:background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  }
  .page-nav-toggle:hover, .page-nav-toggle:focus-visible{ opacity:1; }
  @media (hover: hover){
    .page-nav-toggle:hover{ background:var(--brand-gold); color:var(--brand-onyx); }
  }
  .page-nav-toggle:active{ background:var(--brand-gold); color:var(--brand-onyx); }

  .page-nav-menu{
    position:absolute;
    bottom:56px;
    right:0;
    display:flex;
    flex-direction:column;
    min-width:180px;
    border:1px solid var(--line-strong);
    background:var(--paper);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
  }
  .page-nav-menu[hidden]{ display:none; }
  .page-nav-menu a, .page-nav-menu button{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    border-bottom:1px solid var(--line);
    padding:11px 16px;
    font-family:"Space Mono", monospace;
    font-size:0.76rem;
    color:var(--ink);
    text-decoration:none;
    cursor:pointer;
  }
  .page-nav-menu a:last-child, .page-nav-menu button:last-child{ border-bottom:none; }
  .page-nav-menu a:hover, .page-nav-menu button:hover{ background:var(--paper-alt); }
  .page-nav-menu .top-btn{ color:var(--gold-deep); font-weight:700; }


/* Pemilih bahasa: format sama dengan halaman Holiday, diletakkan di kiri tombol menu */
.page-nav .fy-lang{ position:absolute; right:56px; top:4px; }
.fy-lang-btn{ display:inline-flex; align-items:center; gap:7px; background:#000; color:#F1E9D6; border:1px solid #D4B268; border-radius:999px; padding:0 14px; height:40px; font:700 12px "Space Mono",monospace; letter-spacing:.04em; cursor:pointer; line-height:1; }
.fy-lang-btn svg.cv{ width:9px; height:9px; flex:none; }
.fy-lang-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:150px; background:#000; border:1px solid #D4B268; border-radius:12px; padding:5px; margin:0; list-style:none; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.page-nav:not(.page-nav--top) .fy-lang-menu{ top:auto; bottom:calc(100% + 6px); }
.fy-lang-menu[hidden]{ display:none; }
.fy-lang-menu li{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; color:#F1E9D6; font:600 13px "Work Sans",system-ui,sans-serif; cursor:pointer; }
.fy-lang-menu li:hover,.fy-lang-menu li[aria-selected=true]{ background:#1B1710; }

/* ruang di atas supaya tombol melayang tidak menutupi breadcrumb saat halaman masih di paling atas */
.wrap{ padding-top:76px; }

.foto-dlg .btn[hidden]{display:none!important}
