/* Omera Music | Header responsif. Hanya mempengaruhi .portal-header & mobile nav. */
.portal-header .headwrap{display:flex;align-items:center;gap:14px;justify-content:space-between;min-height:76px}
.portal-header .brand{flex:0 0 auto}
.portal-header .brand .omera-brand-name{font-size:19px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.portal-header .brand-icon{width:43px;height:43px;transition:transform .2s ease,box-shadow .2s ease}
.portal-header .brand:hover .brand-icon{transform:rotate(-7deg) scale(1.05);box-shadow:0 5px 20px #29b69d35}
.omera-header-search{display:flex;align-items:center;gap:10px;flex:1 1 320px;max-width:380px;min-width:0;min-height:44px;border:1px solid var(--line,#364555);border-radius:999px;padding:0 15px;background:var(--white,#1c2630);color:var(--muted,#a6b6c5);transition:box-shadow .2s ease,border-color .2s ease}
.omera-header-search:focus-within{border-color:var(--green,#74deb3);box-shadow:0 0 0 3px #65cfa92c}
.omera-header-search svg{flex:0 0 auto}
.omera-header-search input{width:100%;min-width:0;min-height:42px;outline:none;border:0;background:transparent;color:var(--text,#e8edf5);font:inherit;font-size:13px;line-height:1.3;padding:0;appearance:none}
html .portal-header .omera-header-search input[type="search"]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;color:var(--text,#e8edf5)!important;outline:0!important}
.omera-header-search input::placeholder{color:var(--muted,#9caebb);opacity:.85}
.omera-header-search input::-webkit-search-cancel-button{cursor:pointer}
.portal-header .nav{flex:0 0 auto;gap:0;white-space:nowrap}
.portal-header .nav a{padding:9px 9px}
.omera-menu-backdrop,.omera-menu-panel{display:none}
@media(max-width:1240px){
 .portal-header .headwrap{gap:14px}
 .portal-header .nav{display:none!important}
 .portal-header .menu-btn{display:grid;flex:0 0 44px;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line,#354352);border-radius:12px;background:var(--white,#1c2630);color:var(--text,#e8edf5);font-size:24px;line-height:1;transition:background .15s,border-color .15s}
 .portal-header .menu-btn:hover{border-color:var(--green,#74deb3)}
 .omera-header-search{max-width:none}
 .omera-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:rgba(2,9,17,.64);z-index:1099;opacity:0;transition:opacity .3s ease}
 .omera-menu-backdrop.is-open{opacity:1}
 .omera-menu-panel{display:block;position:fixed;top:0;left:0;right:0;z-index:1100;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;pointer-events:none;transform:translateY(-105%);transition:transform .34s cubic-bezier(.22,.85,.25,1),visibility 0s linear .34s;background:var(--white,#1c2630);color:var(--text,#e8edf5);border-bottom:1px solid var(--line,#354352);border-radius:0 0 22px 22px;box-shadow:0 20px 55px #0006}
 .omera-menu-panel.is-open{visibility:visible;pointer-events:auto;transform:translateY(0);transition:transform .34s cubic-bezier(.22,.85,.25,1),visibility 0s}
 .omera-menu-inner{width:min(100% - 32px,720px);margin:0 auto;padding:16px 0 24px}
 .omera-menu-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 0 16px;border-bottom:1px solid var(--line,#354352)}
 .omera-menu-top strong{font-size:17px;letter-spacing:.04em;color:var(--text,#e8edf5)}
 .omera-menu-top strong span{color:var(--green,#74deb3);font-size:24px}
 .omera-menu-top button{width:42px;height:42px;border-radius:11px;border:1px solid var(--line,#354352);background:transparent;color:var(--text,#e8edf5);font-size:28px;line-height:1;cursor:pointer}
 #omeraMenuLinks{display:flex;flex-direction:column;gap:5px;padding:13px 0 5px}
 #omeraMenuLinks a{display:flex;align-items:center;min-height:49px;padding:11px 15px;border-radius:11px;color:var(--text,#e8edf5);font-size:15px;font-weight:650;transition:background .2s,padding-left .2s}
 #omeraMenuLinks a:hover,#omeraMenuLinks a:focus-visible,#omeraMenuLinks a[aria-current="page"]{background:color-mix(in srgb,var(--green,#74deb3) 14%,transparent);padding-left:20px;color:var(--text,#e8edf5)}
 .omera-menu-caption{font-size:12px;color:var(--muted,#a6b6c5);margin:9px 14px 0}
 body.omera-nav-open{overflow:hidden}
}
@media(max-width:680px){
 .portal-header .headwrap{min-height:66px;gap:10px}
 .portal-header .brand{flex:0 0 auto;gap:0}
 .portal-header .brand>span:last-child{display:none}
 .portal-header .brand-icon{width:41px;height:41px;border-radius:11px}
 .portal-header .menu-btn{width:42px;height:42px;flex-basis:42px}
 .omera-header-search{height:42px;min-height:42px;padding:0 12px;gap:8px}
 .omera-header-search input{font-size:12px;min-height:40px}
}
@media(max-width:355px){.portal-header .headwrap{gap:7px}.omera-header-search{padding:0 9px;gap:6px}.omera-header-search svg{width:17px;height:17px}.omera-header-search input{font-size:11px}}
@media(prefers-reduced-motion:reduce){.omera-menu-panel,.omera-menu-backdrop,.portal-header .brand-icon{transition:none!important}}

/* Konsistensi header dan footer dengan beranda, tanpa memengaruhi isi halaman. */
.portal-header .wrap,.portal-footer .wrap{width:min(1180px,calc(100% - 40px))}
.portal-header .brand-icon{background:#152e48;color:#75dfb2;border-radius:10px}
.portal-header .brand small{letter-spacing:.1em}
.portal-header .nav a{border-radius:8px;font-size:13px;padding:9px 9px}
.portal-footer .footer-flex{align-items:start}
.portal-footer .footlinks{max-width:500px;display:flex;gap:11px 24px}
@media(max-width:730px){.portal-header .wrap,.portal-footer .wrap{width:min(100% - 28px,1180px)}}

/* Omera header/footer baseline — scoped only to shared public chrome.
   All public pages use the same markup as website/index.html, and should
   render identically whether portal.css is present or not. */
.portal-header .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portal-header .brand-icon{display:grid;place-items:center;font-size:23px;line-height:1}
.portal-header .brand .omera-brand-name{font-weight:900}
.portal-footer{line-height:1.5}
.portal-footer .footer-flex{display:flex;justify-content:space-between;gap:35px;align-items:flex-start}
.portal-footer .footer-flex>div{max-width:440px}
.portal-footer .footlinks{flex-wrap:wrap;align-content:flex-start}
@media(max-width:680px){
 .portal-footer .footer-flex{display:block}
 .portal-footer .footlinks{margin-top:20px}
 /* The database song reader must use the same header height/icon as the homepage. */
 .song-page .portal-header .headwrap{min-height:66px!important}
 .song-page .portal-header .brand-icon{width:41px;height:41px;font-size:23px}
 .song-page .portal-header .brand{font-size:20px}
 .song-page .portal-header .menu-btn{width:42px;height:42px;font-size:24px}
}
/* The song reader formerly applied a different header background. */
html:not([data-theme="light"]) .song-page .portal-header{background:#19232e!important;border-color:#354352!important}
html[data-theme="light"] .song-page .portal-header{background:#fff!important;border-color:#e0e8e5!important}
html[data-theme="light"] .song-page .portal-header .brand-icon{background:#152e48!important;color:#75dfb2!important}
/* Match the homepage brand/nav ink when the song reader is in light mode. */
html[data-theme="light"] .song-page .portal-header .brand{color:#1b283b!important}
html[data-theme="light"] .song-page .portal-header .brand small{color:#80939e!important}
html[data-theme="light"] .song-page .portal-header .nav a{color:#3e5266!important}

/* Navigasi teks Omera Music: tanpa bidang/kotak seperti versi sebelumnya.
   Dipakai bersama oleh semua halaman yang memuat header-responsive.css. */
html:not([data-theme="light"]) body .portal-header nav.nav,
html[data-theme="light"] body .portal-header nav.nav{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html .portal-header .nav a{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  transition:color .18s ease;
}
html .portal-header .nav a:hover,
html .portal-header .nav a:focus-visible,
html .portal-header .nav a.active,
html .portal-header .nav a[aria-current="page"]{
  background:transparent!important;
}
/* Identitas mint Omera Music untuk menu aktif dan hover. */
html:not([data-theme="light"]) .portal-header .nav a:is(.active,[aria-current="page"],:hover,:focus-visible),
html:not([data-theme="light"]) body.song-page .portal-header .nav a:is(.active,[aria-current="page"],:hover,:focus-visible){
  color:#8fddba!important;
}
html[data-theme="light"] .portal-header .nav a:is(.active,[aria-current="page"],:hover,:focus-visible),
html[data-theme="light"] body.song-page .portal-header .nav a:is(.active,[aria-current="page"],:hover,:focus-visible){
  color:#126955!important;
}
/* Pada menu HP, penanda halaman aktif juga hanya warna teks. */
@media(max-width:1240px){
  #omeraMenuLinks a:is(.active,[aria-current="page"],:hover,:focus-visible){
    background:transparent!important;
    padding-left:15px!important;
  }
  html:not([data-theme="light"]) #omeraMenuLinks a:is(.active,[aria-current="page"],:hover,:focus-visible){
    color:#8fddba!important;
  }
  html[data-theme="light"] #omeraMenuLinks a:is(.active,[aria-current="page"],:hover,:focus-visible){
    color:#126955!important;
  }
}