/* Responsif: HP, tablet, laptop, dan layar besar (TV / proyektor).
   Semua ukuran di CSS memakai rem, jadi cukup mengatur ukuran huruf dasar halaman.
   <1400px : 16px (tampilan normal)  |  1920px : ~21px  |  2560px : ~28px  |  4K : ~40px */
html{
  font-size:16px;
  font-size:clamp(16px, calc(16px + (100vw - 1400px) * .01), 40px);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{min-width:0;overflow-wrap:break-word}
img,video,svg,canvas{max-width:100%;height:auto}
svg:not([height]){height:auto}

/* wadah konten memenuhi layar dengan margin yang proporsional */
.tb-in,.ap-main{max-width:min(100%,78rem)}
.wrap{max-width:min(100%,78rem)}
nav.wrap{max-width:none}

/* tabel & isian tidak pernah melebar keluar layar */
.ap-main table{max-width:100%}
.ap-main input,.ap-main select,.ap-main textarea{max-width:100%;min-width:0}
.grid2>*,.fgrid>*,.two>*{min-width:0}

/* tablet */
@media(max-width:1024px){
  .ap-main{padding-left:clamp(1rem,3vw,2rem);padding-right:clamp(1rem,3vw,2rem)}
}
/* HP */
@media(max-width:600px){
  .ap-main{padding:1.25rem .9rem 3rem}
  .card{padding:1rem 1.05rem;border-radius:1rem}
  .ap-h1{font-size:1.35rem}
  .ap-head{align-items:flex-start}
  .ap-stats{gap:.6rem}
  .ap-main .grid2{grid-template-columns:1fr}
  .ap-main td,.ap-main th{padding:.7rem .75rem}
  .btn{min-height:2.5rem}
  dialog{max-width:calc(100vw - 1rem)}
}
/* HP kecil */
@media(max-width:380px){
  .tb-brand b{letter-spacing:.08em;font-size:.92rem}
  .tb-nav a{padding:0 .6rem;font-size:.78rem}
}
/* layar sangat lebar: dialog dan kartu ikut membesar secara proporsional */
@media(min-width:1800px){
  .ap-main table{font-size:.9rem}
}
@media print{html{font-size:16px}}