/* ==========================================================
   Cangkang situs: tombol aksi header, popover bahasa, tombol menu
   melayang, notifikasi (toast), banner persetujuan analitik,
   peralihan tema, huruf per bahasa, ukuran teks, cetak.
   Drawer ada di bagian bawah berkas ini.
   ========================================================== */

/* ---------- Tombol aksi di header ---------- */
.hdr-actions{grid-area:actions;display:flex;align-items:center;gap:.55rem}
.ibtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:2.65rem;height:2.65rem;padding:0 .55rem;
  font:700 .82rem/1 var(--font-body);letter-spacing:.03em;
  color:var(--ink);background:var(--paper-hi);
  border:2px solid var(--ink);border-radius:0;box-shadow:3px 3px 0 var(--accent);cursor:pointer;
  transition:transform .15s,box-shadow .15s,background-color .2s,color .2s;
  -webkit-tap-highlight-color:transparent;
}
.ibtn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--accent)}
.ibtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent)}
.ibtn[aria-expanded="true"]{background:var(--ink);color:var(--paper-hi)}
.ico-sun{display:none}
html[data-theme="dark"] .ico-sun{display:block}
html[data-theme="dark"] .ico-moon{display:none}
/* tombol backsound: ikon speaker menyala hanya saat musik benar-benar terdengar */
.ico-vol-on{display:none}
html[data-bgm="on"] .ico-vol-on{display:block}
html[data-bgm="on"] .ico-vol-off{display:none}
.no-bgm #btn-bgm,.no-bgm .setrow--bgm{display:none}

/* popover bahasa */
.langpop{position:relative}
.langpop__menu{
  position:absolute;right:0;top:calc(100% + .7rem);z-index:60;
  min-width:12.5rem;margin:0;padding:.35rem;list-style:none;
  background:var(--paper-hi);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--accent);
  animation:pop-in .18s var(--ease);
}
.langpop__menu[hidden]{display:none}
.langpop__menu button{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  padding:.62rem .7rem;font:600 1rem/1.2 var(--font-body);color:var(--ink);
  background:transparent;border:0;text-align:left;cursor:pointer;
}
.langpop__menu button:hover,.langpop__menu button:focus-visible{background:var(--paper-lo);outline-offset:-3px}
.langpop__menu button[aria-checked="true"]{font-weight:800;color:var(--accent-text)}
.langpop__menu small{margin-left:auto;font:700 .72rem var(--font-body);letter-spacing:.07em;color:var(--ink-2)}
.langpop__menu .ck{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.langpop__menu [aria-checked="true"] .ck{visibility:visible}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* tombol menu melayang: muncul saat header sudah tergulir lewat */
.menu-fab{
  position:fixed;z-index:26;top:calc(.8rem + env(safe-area-inset-top));right:max(.9rem,env(safe-area-inset-right));
  visibility:hidden;opacity:0;transform:translateY(-160%);
  transition:transform .3s var(--ease),opacity .2s,visibility 0s .3s,box-shadow .15s;
}
html.show-fab .menu-fab{visibility:visible;opacity:1;transform:none;transition-delay:0s}
html.show-fab .menu-fab:hover{transform:translate(-1px,-1px)}

/* ---------- Notifikasi singkat ---------- */
.toast{
  position:fixed;z-index:140;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));
  max-width:min(92vw,26rem);padding:.75rem 1.1rem;
  font:600 .95rem/1.4 var(--font-body);color:var(--paper-hi);background:var(--ink);
  border-left:5px solid var(--accent);box-shadow:4px 4px 0 rgba(var(--ink-rgb),.25);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease),opacity .25s;
}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ---------- Banner persetujuan analitik ---------- */
.consent{
  position:fixed;z-index:45;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));
  width:min(26rem,calc(100vw - 2rem));padding:1rem 1.1rem 1.1rem;
  background:var(--paper-hi);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--accent);
  animation:chat-in .45s var(--ease) 1.2s backwards;
}
.consent[hidden]{display:none}
.consent h2{margin:0 0 .35rem;font:800 1.35rem/1 var(--font-display)}
.consent p{margin:0 0 .85rem;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.consent .actions{margin:0;gap:.6rem}
.consent .btn{padding:.6rem 1rem;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.consent__more{align-self:center;font-weight:700;font-size:.88rem;background:none;border:0;padding:.3rem;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Peralihan tema yang halus ---------- */
html.theming,html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease,box-shadow .35s ease !important;
}
/* sembunyikan halaman sebentar sampai terjemahan siap (anti-kedip) */
html.i18n-wait body{visibility:hidden}

/* ---------- Mode gelap: penyesuaian ---------- */
html[data-theme="dark"] body::before{opacity:.5;filter:invert(1)}
html[data-theme="dark"] .map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) grayscale(.7) brightness(.85) contrast(.95)}
html[data-theme="dark"] .hero__photo img,html[data-theme="dark"] .brand img{filter:brightness(.94)}
html[data-theme="dark"] ::selection{background:var(--accent);color:var(--on-accent)}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline-color:var(--ink)}
.fld :focus-visible{outline-color:var(--accent)}

/* ---------- Huruf per bahasa ---------- */
html[data-lang="ja"]{
  --font-display:"Big Shoulders","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo","Noto Sans JP","Noto Sans CJK JP","IPAexGothic",sans-serif;
  --font-body:"Overpass","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo","Noto Sans JP","Noto Sans CJK JP","IPAexGothic",system-ui,sans-serif;
}
html[data-lang="zh"]{
  --font-display:"Big Shoulders","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif;
  --font-body:"Overpass","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",system-ui,sans-serif;
}
html[data-lang="ja"] body,html[data-lang="zh"] body{line-height:1.8;line-break:strict}
html[data-lang="ja"] :is(h1,h2,h3,.hero__name,.sheet-title,.level,.brand span),
html[data-lang="zh"] :is(h1,h2,h3,.hero__name,.sheet-title,.level,.brand span){line-height:1.15;letter-spacing:.02em;font-weight:700}
html[data-lang="ja"] .sheet-title,html[data-lang="zh"] .sheet-title{font-size:clamp(2.6rem,8vw,5.6rem)}
html[data-lang="ja"] .site-nav a,html[data-lang="zh"] .site-nav a{letter-spacing:.02em}
html[data-lang="de"] :is(p,li,dd,h2,h3){hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3,p,li,dd,dt,label{overflow-wrap:break-word}
html[data-lang="de"] .sheet-title,html[data-lang="en"] .sheet-title{font-size:clamp(2.7rem,8.4vw,6rem)}
html[data-lang="de"] .sheet-title{hyphens:auto;-webkit-hyphens:auto}

/* ---------- Ukuran teks (dari drawer) ---------- */
html[data-fs="s"]{font-size:92%}
html[data-fs="l"]{font-size:112.5%}
html[data-fs="xl"]{font-size:125%}

/* ---------- Kurangi gerak (pilihan di drawer) ---------- */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{
  animation-duration:1ms !important;animation-delay:0s !important;
  transition-duration:1ms !important;scroll-behavior:auto !important;
}

/* ---------- Cetak ---------- */
@media print{
  .hdr-actions,.site-nav,.menu-fab,.drawer,.drawer-backdrop,.chat-fab,.chat,.consent,.toast,.skip,.truss,.game-only{display:none !important}
  body::before,body::after{display:none !important}
  :root,html[data-theme="dark"]{--paper:#fff;--paper-hi:#fff;--paper-lo:#eee;--ink:#000;--ink-2:#333;--line:#999;--ink-rgb:0,0,0}
  body{background:#fff;font-size:11pt}
  .plate::before{display:none}
  *{animation:none !important;transition:none !important}
  a{color:#000}
  .site-header{padding-top:0}
}

/* ---------- Tablet dan layar sedang ---------- */
@media (min-width:52.01rem) and (max-width:70rem){
  .site-nav a{padding:.65rem .5rem;font-size:.9rem}
  .site-nav a::after{left:.5rem;right:.5rem}
  .hero__name{font-size:clamp(3.6rem,10.2vw,6.4rem)}      /* kolom nama lebih sempit di tablet: jangan sampai kata terpotong */
}
@media (max-width:52rem){
  html[data-lang="ja"] .site-nav a{font-size:.68rem;letter-spacing:0}       /* "プロフィール" dll. harus muat dalam satu kolom */
  .hdr-actions{gap:.45rem}
  .ibtn{min-width:2.5rem;height:2.5rem}
  .toast{bottom:calc(5.6rem + env(safe-area-inset-bottom))}
  .consent{bottom:calc(5rem + env(safe-area-inset-bottom));left:.75rem;width:calc(100vw - 1.5rem)}
}
@media (max-width:30rem){
  .brand{gap:.55rem}
  .brand span{font-size:1.15rem;line-height:.95;max-width:8.4rem}
  .brand img{width:34px;height:34px}
  .hdr-actions{gap:.35rem}
  .ibtn{min-width:2.4rem;height:2.4rem;padding:0 .4rem}
  .ibtn--lang .ibtn__code{display:none}
}
/* layar sangat sempit (320 px): empat tombol header + nama harus muat tanpa saling menimpa */
@media (max-width:22.5rem){
  .hdr-actions{gap:.28rem}
  .ibtn{min-width:2.2rem;height:2.2rem;padding:0 .25rem}
  .brand{gap:.45rem}
  .brand span{font-size:1.08rem}
  .brand img{width:32px;height:32px}
}

/* ==========================================================
   Drawer (menu samping)
   ========================================================== */
html{scrollbar-gutter:stable}
html.drawer-open{overflow:hidden}
.drawer-backdrop{
  position:fixed;inset:0;z-index:80;background:rgba(8,12,17,.58);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s;
}
.drawer-backdrop.on{opacity:1}
.drawer-backdrop[hidden],.drawer[hidden]{display:none}
.drawer{
  position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(26rem,92vw);
  display:flex;flex-direction:column;
  color:var(--ink);background:var(--paper-hi);
  border-left:2px solid var(--ink);box-shadow:-10px 0 0 var(--accent);
  transform:translateX(108%);transition:transform .38s var(--ease);
  overscroll-behavior:contain;
}
.drawer.on{transform:none}
.drawer:focus{outline:none}
.drawer__head{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem .9rem 1.1rem;color:var(--paper-hi);background:var(--ink)}
.drawer__head img{flex:none;width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--accent)}
.drawer__head h2{flex:1;margin:0;font:800 1.7rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.drawer__head .ibtn{color:var(--paper-hi);background:transparent;border-color:var(--paper-hi);box-shadow:none}
.drawer__head .ibtn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:none}
/* mode gelap: kepala menu tetap gelap (bukan bilah putih), dengan garis warna tema di bawahnya */
html[data-theme="dark"] .drawer__head{color:var(--ink);background:var(--paper-lo);box-shadow:inset 0 -3px 0 var(--accent)}
html[data-theme="dark"] .drawer__head img{box-shadow:0 0 0 2px var(--paper-lo),0 0 0 4px var(--accent)}
html[data-theme="dark"] .drawer__head .ibtn{color:var(--ink);border-color:var(--ink)}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.drawer__foot{display:flex;flex-wrap:wrap;gap:.1rem .55rem;padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));border-top:2px solid var(--ink);font-size:.8rem;line-height:1.4;color:var(--ink-2)}

/* tab di drawer */
.dtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--paper-lo);border-bottom:2px solid var(--ink)}
.dtabs button{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;min-width:0;
  padding:.7rem .15rem .55rem;margin-bottom:-2px;
  font:700 .72rem/1.15 var(--font-body);text-align:center;color:var(--ink-2);
  background:transparent;border:0;border-bottom:4px solid transparent;border-radius:0;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.dtabs button span{max-width:100%;overflow-wrap:anywhere}
.dtabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dtabs button:hover{color:var(--ink)}
.dtabs button[aria-selected="true"]{color:var(--ink);background:var(--paper-hi);border-bottom-color:var(--accent)}
.dtabs button:focus-visible{outline-offset:-3px}
.dpanel{padding:1.1rem 1.1rem 1.4rem;animation:fade-up .3s var(--ease)}
.dpanel[hidden]{display:none}
.dh{
  display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 .7rem;
  font:800 1.2rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em;
}
.dh:first-child{margin-top:0}
.dh::after{content:"";flex:1;height:1.5px;background:var(--line)}

/* baris pengaturan */
.setrow{margin-top:1.1rem}
.setrow:first-child{margin-top:0}
.setrow__head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.setrow__head h3{margin:0}
.setrow h3{margin:0 0 .5rem;font:700 .76rem/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4rem}
.seg button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  min-height:3.2rem;padding:.5rem .3rem;font:700 .88rem/1.15 var(--font-body);text-align:center;
  color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background-color .2s,color .2s;
}
.seg button:hover{transform:translateY(-2px)}
.seg button[aria-pressed="true"]{color:var(--paper-hi);background:var(--ink);box-shadow:3px 3px 0 var(--accent)}
.seg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.seg--lang{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.seg--lang button{flex-direction:row;justify-content:flex-start;gap:.6rem;padding:.6rem .7rem;text-align:left}
.seg--lang button:last-child:nth-child(odd){grid-column:1/-1}
.seg--lang small{flex:none;min-width:1.9rem;padding:.2rem .3rem;font:800 .7rem/1 var(--font-body);letter-spacing:.05em;text-align:center;color:var(--paper-hi);background:var(--ink-2)}
.seg--lang button[aria-pressed="true"] small{color:var(--on-accent);background:var(--accent)}
.seg--fs button{font-family:var(--font-display);font-weight:800}
.seg--fs button:nth-child(1){font-size:1rem}
.seg--fs button:nth-child(2){font-size:1.3rem}
.seg--fs button:nth-child(3){font-size:1.65rem}

.swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem}
.sw{
  position:relative;width:100%;max-width:2.9rem;aspect-ratio:1;padding:0;background:var(--c);
  border:2px solid var(--ink);border-radius:0;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.sw:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.sw svg{position:absolute;inset:0;margin:auto;width:20px;height:20px;fill:none;stroke:var(--on);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sw[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:3px}
.sw[aria-pressed="true"] svg{opacity:1}
.swatch-name{font-size:.85rem;font-weight:700;color:var(--accent-text)}

/* saklar */
.switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid var(--line);font-weight:600;line-height:1.3;cursor:pointer}
.switch small{display:block;margin-top:.15rem;font-weight:400;font-size:.8rem;color:var(--ink-2)}
.switch input{position:absolute;width:1px;height:1px;opacity:0}
.switch__track{position:relative;flex:none;width:3.1rem;height:1.75rem;background:var(--paper-lo);border:2px solid var(--ink);transition:background-color .2s}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:1.15rem;height:1.15rem;background:var(--ink);transition:transform .2s var(--ease),background-color .2s}
.switch input:checked + .switch__track{background:var(--accent)}
.switch input:checked + .switch__track::after{transform:translateX(1.3rem);background:var(--on-accent)}
.switch input:focus-visible + .switch__track{outline:3px solid var(--ink);outline-offset:2px}

/* kunjungan */
.vcard{display:grid;place-items:center;min-height:5.2rem;padding:.7rem;background:var(--paper-hi);border:2px solid var(--ink)}
.vcard img{display:block;max-width:100%;height:auto}
.vcard a{display:block;max-width:100%}
.vnote{margin:.6rem 0 0;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.vstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:.9rem 0 0;background:var(--ink);border:2px solid var(--ink)}
.vstats > div{padding:.5rem .6rem;background:var(--paper-hi)}
.vstats dt{font-size:.7rem;line-height:1.2;color:var(--ink-2)}
.vstats dd{margin:.1rem 0 0;font:800 1.3rem/1.1 var(--font-display);overflow-wrap:anywhere}
.vstats dd.sm{font-size:1rem}

/* daftar tautan */
.dlinks{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.dlinks a,.dlinks button{
  display:flex;align-items:center;gap:.75rem;width:100%;padding:.62rem .7rem;
  font:600 1rem/1.25 var(--font-body);text-align:left;text-decoration:none;color:var(--ink);
  background:transparent;border:0;border-left:4px solid transparent;border-radius:0;cursor:pointer;
}
.dlinks a:hover,.dlinks button:hover,.dlinks a:focus-visible,.dlinks button:focus-visible{background:var(--paper-lo);border-left-color:var(--accent);outline-offset:-3px}
.dlinks a[aria-current="page"]{color:var(--accent-text);background:var(--paper-lo);border-left-color:var(--accent)}
.dlinks svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dlinks--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dlinks--grid a{padding:.6rem .55rem}
.dlinks small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-2)}
.dlinks .dgrow{flex:1;min-width:0}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.dgrid a{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .2rem;
  font:700 .78rem/1.15 var(--font-body);text-align:center;text-decoration:none;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);transition:transform .15s,box-shadow .15s;
}
.dgrid a:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--accent)}
.dgrid svg{width:24px;height:24px;fill:none;stroke:var(--accent-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dnote{margin:.6rem 0 0;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.dactions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.btn--sm{padding:.55rem .9rem;font-size:.9rem;box-shadow:3px 3px 0 var(--ink)}
.btn--sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.dstat{display:flex;align-items:center;gap:.55rem;margin:.8rem 0 0;font-weight:600;font-size:.92rem;line-height:1.35}
.dstat i{flex:none;width:.7rem;height:.7rem;background:var(--ink-2);transform:rotate(45deg)}
.dstat.ok i{background:#1B9A55}

.btn svg.ico-s{width:18px;height:18px;flex:none;margin-right:.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}