*{box-sizing:border-box;margin:0;padding:0}
:root{--green:#00ed20;--green2:#00b91b;--black:#000;--bar:#343434;--bar2:#292929;--white:#f5f5f5;--dim:#aaa;--line:#00b91b;--max:960px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.42}
a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
button,input{font:inherit}.wrap{width:min(var(--max),calc(100% - 24px));margin:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:100;background:#fff;color:#000;padding:8px}

/* utility bar */
.top{background:var(--bar);height:42px}
.top__in{height:42px;display:flex;align-items:center;gap:28px}
.top__nav{display:flex;gap:28px;list-style:none;font-size:14px;font-weight:bold;white-space:nowrap}
.search{display:flex;align-items:center;gap:7px;margin-left:auto}
.search label{font-size:16px;font-weight:bold;color:var(--green)}
.search input{width:153px;height:23px;border:1px solid #777;background:#fff;color:#222;padding:2px 6px;font-size:13px}
.search button{height:24px;border:1px solid #777;background:#eee;color:#111;padding:0 9px;font-size:13px;cursor:pointer}

/* logo field */
.brand{height:96px;display:grid;place-items:center;background:#000}
.brand a{display:flex;align-items:center;gap:8px;color:#009a13;text-decoration:none;font-family:Georgia,"Times New Roman",serif;font-size:43px;font-weight:bold;letter-spacing:-2px;text-shadow:0 0 1px #057512}
.brand__mark{width:28px;height:54px;position:relative;display:block}
.brand__mark:before{content:"";position:absolute;left:13px;top:5px;width:3px;height:43px;background:#74831e;transform:rotate(-8deg)}
.brand__mark i{position:absolute;width:12px;height:5px;border-radius:100% 0 100% 0;background:#88951f;transform:rotate(-25deg)}
.brand__mark i:nth-child(1){left:2px;top:12px}.brand__mark i:nth-child(2){left:14px;top:20px;transform:rotate(25deg)}.brand__mark i:nth-child(3){left:0;top:29px}.brand__mark i:nth-child(4){left:14px;top:37px;transform:rotate(25deg)}

/* alphabet navigation */
.alpha{background:var(--bar);border-top:1px solid #3c3c3c;height:37px}
.alpha__in{height:37px;display:flex;align-items:stretch}
.alpha__menu{display:none}
.alpha__list{list-style:none;display:flex;height:37px}
.alpha__list li{border-right:1px solid #111}
.alpha__list a{height:37px;min-width:50px;padding:0 14px;display:grid;place-items:center;font-size:12px;font-weight:bold}
.mode{margin-left:auto;border:0;background:none;color:var(--green);font-size:11px;font-weight:bold;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0 8px}.sun{font-size:18px;color:#eee;font-weight:normal}

/* page grid */
.grid{display:grid;grid-template-columns:minmax(0,626px) minmax(0,310px);gap:12px;padding:13px 0 35px}
.content{min-width:0;padding:0 12px 0 0}.side{min-width:0;padding-left:3px}
.welcome h1{font-size:19px;line-height:1.25;color:var(--green);text-align:center;margin:1px 0 1px;font-weight:bold}
.home{font-size:20px;vertical-align:-1px;margin-right:5px}.welcome p{font-size:17px;line-height:1.38;text-align:justify;margin:0 0 20px}.welcome .lead{margin-bottom:20px}.welcome .happy{margin:4px 0 38px}
.section-title{font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed;text-transform:uppercase;font-size:14px;color:var(--green);margin:0 0 8px 5px}
.song-list{list-style:none;margin:0 5px 28px}.song-list li{border-bottom:1px dotted var(--line)}
.song-list a{display:block;padding:7px 3px;font-size:14px;font-weight:bold}.song-list a:hover{background:#071708;text-decoration:none;padding-left:7px}
.side .song-list{margin-left:0;margin-right:0}.side .song-list a{padding:5px 2px;font-size:13px}
.side .section-title{margin-left:0;margin-top:3px}
.note{border:1px dotted var(--green2);padding:10px 12px;color:#bbb;font-size:12px;line-height:1.5;margin-top:22px}.note b{color:var(--green)}

/* chords page */
.reader{display:none}.reader.on{display:block}.homeview.off{display:none}
.crumb{font-size:12px;color:#aaa;margin:1px 0 15px}.crumb button{border:0;background:none;color:var(--green);padding:0;cursor:pointer}
.song-title{font-size:21px;color:var(--green);line-height:1.3;margin-bottom:5px}.song-meta{font-size:12px;color:#999;margin-bottom:12px}
.tools{display:flex;align-items:center;gap:6px;background:var(--bar);padding:7px 8px;margin-bottom:17px;position:sticky;top:0;z-index:10}
.tools span{font-size:12px;color:#ddd;margin-right:2px}.tools button{border:1px solid #151515;background:#4a4a4a;color:var(--green);font-weight:bold;min-width:30px;height:27px;cursor:pointer;padding:0 8px}.tools button:hover{background:#555}.tools .play{margin-left:auto;color:#fff}
.chordbox{white-space:pre-wrap;font:16px/1.65 "Courier New",monospace;color:#f1f1f1;min-height:520px}.ch{color:var(--green);font-weight:bold}.demo-label{font-size:11px;color:#a0a0a0;border-left:3px solid var(--green);padding-left:8px;margin:0 0 14px}

/* footer */
.footer{border-top:1px solid #202020;background:#080808;padding:20px 0 35px;text-align:center;color:#888;font-size:12px}.footer__links{margin-bottom:8px}.footer a{color:#bdbdbd;margin:0 4px}.footer a:hover{color:var(--green)}

/* light mode */
body.light{--black:#fff;--white:#222;--bar:#e8e8e8;--bar2:#ddd;background:#fff;color:#222}body.light .brand{background:#fff}body.light .welcome p{color:#222}body.light .alpha{border-color:#ccc}body.light .alpha__list li{border-color:#ccc}body.light .footer{background:#eee;border-color:#ddd;color:#666}body.light .footer a{color:#444}body.light .chordbox{color:#222}body.light .tools{background:#ddd}

@media(max-width:700px){
  .wrap{width:100%}
  .top{height:77px}.top__in{height:77px;display:flex;flex-direction:column-reverse;gap:0;padding:0}
  .search{height:41px;margin:0;justify-content:center;width:100%;gap:5px}.search label{font-size:16px}.search input{width:153px;height:23px}.search button{height:24px}
  .top__nav{height:36px;width:100%;justify-content:space-around;align-items:center;gap:0;padding:0 10px;font-size:13px}.top__nav li{flex:0 auto}
  .brand{height:71px}.brand a{font-size:38px}.brand__mark{height:49px}
  .alpha{height:43px}.alpha__in{height:43px;padding:0 8px;align-items:center}.alpha__list{display:none;position:absolute;left:0;right:0;top:191px;height:auto;background:#353535;z-index:30;flex-wrap:wrap;padding:5px 6px}.alpha__list.on{display:flex}.alpha__list li{width:25%;border:0}.alpha__list a{min-width:0;height:34px}
  .alpha__menu{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--green);font-size:21px;font-weight:bold;cursor:pointer}.alpha__menu small{font-size:11px}
  .mode{margin-left:auto;font-size:10px}.sun{font-size:18px}
  .grid{display:block;padding:7px 12px 30px}.content{padding:0}.side{padding:0;margin-top:30px}
  .welcome h1{font-size:19px;margin:0 0 2px}.welcome p{font-size:17px;line-height:1.38;margin-bottom:21px}.welcome .happy{margin-bottom:37px}
  .side .section-title{margin-left:5px}.side .song-list{margin-left:5px;margin-right:5px}.side .song-list a{padding:7px 3px;font-size:14px}
  .song-title{font-size:20px}.tools{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.chordbox{font-size:14px;line-height:1.67;overflow-x:auto}
}
@media(max-width:370px){.top__nav{font-size:12px;padding:0 5px}.brand a{font-size:34px}.search label{font-size:14px}.search input{width:145px}.tools button{min-width:27px;padding:0 6px}}

/* ---- Tambahan versi PHP ----
   Aturan di atas berasal dari prototipe yang sudah disetujui dan sengaja tidak
   diubah. Yang di bawah hanya melayani elemen baru yang dulu tidak ada. */

/* .chordbox kini elemen <pre>: margin bawaan peramban harus dinolkan, dan
   font-family diwarisi dari aturan di atas supaya akor tetap sejajar. */
.chordbox{margin:0;font-family:"Courier New",monospace}

/* Penanda bagian lagu: [Intro], [Chorus]. */
.part{display:inline-block;margin-top:.35em;color:var(--green);font-weight:700;letter-spacing:.02em}

/* Pesan saat daftar kosong — dibedakan dari tautan lagu supaya tidak terbaca
   sebagai entri yang bisa diklik. */
.kosong{display:block;padding:10px 4px;color:#9a9a9a;font-style:italic}
body.light .kosong{color:#666}

/* Tombol transpose untuk pengunjung tanpa JS. */
.btn-mini{display:inline-block;min-width:30px;padding:3px 9px;margin-right:4px;border:1px solid #444;
          border-radius:4px;color:inherit;text-decoration:none;text-align:center}
.btn-mini:hover{border-color:var(--green)}

/* Tanya Jawab di halaman depan. */
.faq{border-bottom:1px solid rgba(128,128,128,.25);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--green);font-weight:700}
.faq[open] summary::before{content:"− "}
.faq p{margin:8px 0 2px;opacity:.9}

/* Huruf A–Z yang sedang aktif. */
.alpha__list a.on{color:var(--green);font-weight:700}

/* Logo gambar di header. max-height mengunci tinggi tampil; width:auto
   menjaga rasio apa pun ukuran berkas yang diunggah operator nanti.
   display:block membuang celah baseline bawaan inline-image yang bikin
   logo tampak tidak center vertikal di bar. */
.brand__logo{display:block;height:54px;width:auto;max-width:min(78vw,420px);object-fit:contain}
@media(max-width:560px){.brand__logo{height:40px}}