/* tampilan-umum-26okt — logo brand, menu ☰ HP, rapi HP / tablet / PC.
   Dimuat SETELAH app.css, jadi hanya menimpa yang perlu. */

/* ---------- Logo brand ---------- */
.brand{min-width:0}
.brand-logo{height:34px;width:auto;max-width:140px;object-fit:contain;border-radius:8px;display:block;flex:none}
.brand-nama{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Menu garis tiga (HP) ---------- */
.menu-hp{display:none}
@media (max-width:720px){
  .topbar .inner{flex-wrap:nowrap;height:60px;padding-top:0;padding-bottom:0;gap:12px}
  .brand{font-size:1.02rem}
  .menu-hp{
    display:inline-flex;flex:none;margin-left:auto;width:44px;height:44px;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    border:1px solid var(--line-kuat,rgba(255,255,255,.15));border-radius:11px;
    background:var(--surface-2,rgba(255,255,255,.065));cursor:pointer;padding:0;
  }
  .menu-hp span{display:block;width:20px;height:2px;border-radius:2px;background:var(--gold,#F0BE63);transition:transform .2s,opacity .2s}
  .topbar.buka .menu-hp span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topbar.buka .menu-hp span:nth-child(2){opacity:0}
  .topbar.buka .menu-hp span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .topbar .nav{
    display:none;position:absolute;top:100%;left:0;right:0;width:auto;margin:0;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;
    padding:10px 16px 16px;background:rgba(8,9,13,.97);
    border-bottom:1px solid var(--line,rgba(255,255,255,.09));
    box-shadow:0 18px 40px -12px rgba(0,0,0,.8);
    max-height:calc(100vh - 60px);overflow-x:hidden;overflow-y:auto;
  }
  .topbar.buka .nav{display:flex}
  .topbar .nav a{padding:13px 14px;font-size:1rem;white-space:normal}
  .topbar .nav form{display:block !important}
  .topbar .nav form .btn,.topbar .nav a.btn{width:100%;justify-content:center;text-align:center;margin-top:6px}
}

/* ---------- Rapi di semua ukuran ---------- */
html,body{overflow-x:clip}
.grid > *,.inline > *{min-width:0}
.card,.alert,.tiket{overflow-wrap:break-word}
input,select,textarea{max-width:100%}

/* Tablet */
@media (min-width:721px) and (max-width:1024px){
  .wrap{padding-left:24px;padding-right:24px}
  .topbar .nav a{padding:7px 9px;font-size:.86rem}
}

/* HP */
@media (max-width:720px){
  /* Tabel lebar digulir di dalam kotaknya, bukan mendorong halaman ke samping. */
  main :not(.table-wrap) > table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Huruf 16px mencegah iPhone memperbesar layar saat kolom diketuk. */
  input,select,textarea{font-size:16px}
  .inline{flex-wrap:wrap}
}