/* JELITA v5 — lapisan responsif tambahan untuk halaman aplikasi lama. */
html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.app-main,
.login-panel,
.report-panel { min-width: 0; }
.app-topbar { gap: 18px; }
.app-topbar > div:first-child { min-width: 0; }
.app-page-title { overflow-wrap: anywhere; }
.surface,
.action-card,
.metric-card,
.report-card { transform-style: preserve-3d; will-change: transform; }
.action-icon { transition: transform .3s cubic-bezier(.2,.75,.2,1); }
.action-card:hover .action-icon,
.surface:hover .action-icon { transform: translateY(-3px) rotate(3deg); }
.form-control { max-width: 100%; }
textarea.form-control { resize: vertical; }
.report-page { min-height: 100svh; }
.report-vector { pointer-events: none; }
[style*="stroke-dasharray"] { stroke-dasharray: none !important; }
.border-dashed { border-style: solid !important; }

@media (max-width: 1100px) {
  .app-main { padding-inline: clamp(18px, 4vw, 34px); }
  .app-topbar { align-items: flex-start; flex-wrap: wrap; }
  .app-topbar > div:last-child { margin-left: auto; }
  .report-page { grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); }
  .report-art { padding: 32px; }
  .report-vector { width: min(520px, 90%); }
}

@media (max-width: 900px) {
  .report-page { display: block; }
  .report-art { min-height: 580px; padding: 26px 22px 72px; }
  .report-panel { padding: 0 16px 42px; }
  .report-card { width: min(760px, 100%); margin: -42px auto 0; border-radius: 30px; }
  .report-vector { right: -80px; bottom: -38px; opacity: .74; }
}

@media (max-width: 767px) {
  .app-main { width: 100%; padding: 18px 14px calc(102px + env(safe-area-inset-bottom)); }
  .app-topbar { margin-bottom: 22px; }
  .app-topbar > div:last-child { width: 100%; justify-content: flex-end; }
  .app-topbar [data-install] { margin-right: auto; }
  .app-page-title { font-size: clamp(30px, 9vw, 44px) !important; line-height: .96 !important; }
  .surface,
  .action-card,
  .metric-card { border-radius: 24px !important; }
  .app-bottom-nav { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; border-radius: 24px; }
  .report-art { min-height: 540px; }
  .report-art h1 { font-size: clamp(42px, 12vw, 62px) !important; }
  .report-art p { font-size: 13px; }
  .report-stat { padding: 12px 8px; }
  .report-stat strong { font-size: 18px; }
  .report-stat span { font-size: 8px; }
  .report-panel { padding-inline: 10px; }
  .report-card { margin-top: -30px; padding: 22px 16px !important; border-radius: 26px; }
  .report-card h2 { font-size: clamp(34px, 10vw, 48px) !important; }
  .report-tabs { grid-template-columns: 1fr 1fr; }
  .report-tab { min-width: 0; padding-inline: 10px; font-size: 10px; }
  .upload-control { min-height: 70px; }
}

@media (pointer: coarse) {
  .action-icon { animation: jelita-icon-float 5.4s ease-in-out infinite; }
  .action-card:nth-child(even) .action-icon { animation-delay: -2.7s; }
  @keyframes jelita-icon-float { 50% { transform: translateY(-6px) rotate(2deg); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}