/* Kompatibilitas perangkat sentuh, iPhone/iPad, Android, dan layar kecil. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;min-width:280px}
img,svg,video,canvas{max-width:100%}
video{display:block;background:#061d33}
button,input,select,textarea{font:inherit}
button,.btn,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.page,.panel,.learning-content,.film-panel,.film-overview{min-width:0}
.student-table-wrap,.ranking-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.video-stage{width:100%;height:auto;aspect-ratio:16/9}
.video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

@supports(height:100dvh){.login-shell,.sidebar{min-height:100dvh;height:100dvh}}
@supports(padding:max(0px)){.topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.page{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right));padding-bottom:max(36px,env(safe-area-inset-bottom))}.sidebar{padding-bottom:max(18px,env(safe-area-inset-bottom))}}

@media(pointer:coarse){button,.btn,input,select{min-height:44px}.lesson-link{min-height:48px}.option,.mini-choices button{min-height:56px}}

@media(max-width:950px){
  .sidebar{width:min(280px,84vw);box-shadow:12px 0 35px #001c3c55}
  .topbar{height:62px;padding-inline:14px;gap:8px}
  .global-nav{margin-left:4px;gap:5px}.global-nav button{padding:8px}
  .top-actions{gap:7px}.user-chip b{max-width:110px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-banner{min-height:230px;overflow:hidden}.character-pair{max-width:46%}
  .film-layout,.studio .learning-layout{min-width:0}
}

@media(max-width:620px){
  .crumb,.bell{display:none}.topbar{justify-content:flex-start}.top-actions{margin-left:auto}
  .page-head{align-items:flex-start}.page-head h2{font-size:21px}
  .hero-banner{padding:20px;min-height:245px}.hero-banner h1{font-size:25px}.character-pair{opacity:.55;max-width:70%;right:-12%}
  .quick-grid,.two-col,.stat-grid,.teacher-stats{grid-template-columns:1fr!important}
  .film-toolbar{align-items:stretch;gap:8px;flex-direction:column}.film-toolbar .btn{width:100%}
  .video-cue{max-width:88%;width:max-content;bottom:12%}
  .lesson-actions,.result-actions{gap:9px;flex-direction:column}.lesson-actions .btn,.result-actions .btn{width:100%}
  .modal{padding:10px}.modal-card{max-height:92dvh;overflow:auto;padding:20px}
  .certificate{padding:30px 18px}.certificate h1{font-size:29px}.certificate h2{font-size:23px}
}

@media(max-width:380px){.avatar-sm{display:none}.global-nav button{width:36px}.page{padding-top:16px}.studio h1{font-size:24px}.video-cue{display:none}}
@media(orientation:landscape) and (max-height:520px){.topbar{position:relative}.sidebar{overflow-y:auto}.login-panel{padding-block:20px}.video-stage{max-height:76vh}}