/* Gaya bersama halaman turunan Bonafest (timetable, artist): kotak tegas tanpa radius, JetBrains Mono. */
:root { --bg-color:#fff; --text-primary:#0a0a0a; --text-secondary:#555; --border-color:#eaeaea; --accent-color:#000; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--bg-color); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; }
main { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 80px; }
.bp-wrap { width: 100%; max-width: 1200px; padding: 0 24px; }
.bp-head { margin: 40px 0 32px; display: flex; align-items: center; gap: 20px; }
.bp-head img { max-width: 110px; height: auto; display: block; }
.bp-head h1 { font-size: 0.9rem; font-weight: 700; letter-spacing: .5px; line-height: 1.3; text-transform: uppercase; }
.bp-back { display: inline-block; margin-bottom: 20px; color: var(--text-secondary); text-decoration: none; font-weight: 700; }
.bp-back:hover { color: var(--accent-color); }

/* Tombol/tab kotak */
.bp-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--border-color); margin-bottom: 24px; }
.bp-tab { flex: 1 1 0; padding: 16px 12px; background: #fff; border: 0; border-right: 1px solid var(--border-color); font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); cursor: pointer; transition: background .2s, color .2s; }
.bp-tab:last-child { border-right: 0; }
.bp-tab:hover { background: rgba(0,0,0,.03); color: var(--accent-color); }
.bp-tab[aria-selected="true"] { background: var(--accent-color); color: #fff; }

/* Timetable: tiap baris = tiga kotak (jam | acara | area) yang menyatu */
.tt-day[hidden] { display: none; }
.tt-date { font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.tt-list { border: 1px solid var(--border-color); border-bottom: 0; }
.tt-row { display: grid; grid-template-columns: 140px 1fr 170px; border-bottom: 1px solid var(--border-color); transition: background .2s; }
.tt-row:hover { background: rgba(0,0,0,.03); }
.tt-row[hidden] { display: none; }
.tt-time, .tt-title, .tt-area { padding: 18px 16px; }
.tt-time { border-right: 1px solid var(--border-color); font-weight: 700; white-space: nowrap; }
.tt-title { border-right: 1px solid var(--border-color); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.tt-area { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; display: flex; align-items: center; }
.tt-row.all .tt-title { background: #fafafa; }
.tt-empty { padding: 24px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.bp-note { margin-top: 20px; color: var(--text-secondary); line-height: 1.8; }


footer { width: 100%; background: #fafafa; border-top: 1px solid var(--border-color); padding: 48px 24px; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-copy { font-size: .85rem; color: #999; text-align: center; }
.credit { display: inline-flex; flex-wrap: wrap; justify-content: center; }
.credit-sep { white-space: pre; }
.credit a { color: #666; text-decoration: underline; text-decoration-color: #ccc; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .bp-head { margin: 24px 0 20px; }
}
@media (max-width: 600px) {
  .bp-wrap { padding: 0 16px; }
  .tt-row { grid-template-columns: 1fr; }
  .tt-time, .tt-title { border-right: 0; }
  .tt-time, .tt-area { padding: 12px 16px 0; }
  .tt-title { padding: 6px 16px; }
  .tt-area { padding: 0 16px 14px; }
  footer { padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); margin-top: 24px; }
  .credit { flex-direction: column; align-items: center; gap: 2px; }
  .credit-sep { display: none; }
}