html{max-width:100%;overflow-x:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%;height:auto}
.table-wrap,table.data{display:block;width:100%;overflow-x:auto}
.btn,.kt-ghost,.chip,.pay-cta{min-height:40px}
@media (max-width:1100px){
  .app-shell{grid-template-columns:220px 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .kasir-grid{grid-template-columns:1fr 340px}
  .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:20;max-height:42vh;overflow:auto}
  .topbar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}
  .content{padding:14px}
  .g-4,.g-3,.g-2,.hero,.auth-grid,.kasir-grid{grid-template-columns:1fr}
  .kasir-top{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1,.top-title h1{font-size:28px}
  .value,.stat .value{font-size:24px}
}
@media (max-width:480px){
  .prod-grid{grid-template-columns:1fr 1fr}
}