/* ===== mobile.css — khusus halaman Mobile =====
   Tidak mengubah token global index.css
*/

html, body{ background:#f5f7fb; }

.mlp-mobile{ padding: clamp(32px, 4vw, 56px) 0 clamp(72px, 7vw, 112px); }

.app-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:clamp(20px, 5vw, 48px);
}

/* === Visual perangkat: tanpa frame, tanpa bayangan, transparan === */
.app-visual .phones{
  display:grid; 
  place-items:center;
  background:transparent;      /* sebelumnya gradient */
  border-radius:0;             /* hilangkan sudut */
  padding:0;                   /* hilangkan padding */
  box-shadow:none;             /* hilangkan bayangan */
}
.app-visual .phones img{
  width:100%; 
  max-width:520px; 
  height:auto; 
  display:block;
  border-radius:0;             /* gambar tanpa sudut membulat */
  box-shadow:none;
  background:transparent;
}

/* Judul & subjudul */
.app-copy h1{
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.15; margin:0 0 10px; letter-spacing:.2px;
  background:linear-gradient(90deg, var(--g1, #057fc5), var(--g4, #11d9df));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.app-copy .sub{
  font-size:clamp(15px, 1.5vw, 18px);
  color:var(--muted, #667085);
  margin:6px 0 18px;
}

/* Checklist */
.checklist{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:10px;
}
.checklist li{
  display:grid; grid-template-columns:24px 1fr; align-items:start; gap:10px;
  background:#fff; border-radius:12px; padding:10px 12px;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.checklist .chk{
  display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:6px;
  background:linear-gradient(135deg, var(--g1, #057fc5), var(--g4, #11d9df));
  box-shadow:0 4px 10px rgba(5,127,197,.25);
}
.checklist .chk svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:3; }

/* Responsif */
@media (max-width: 980px){
  .app-grid{ grid-template-columns:1fr; }
  .app-visual{ order:-1; }  /* gambar DI ATAS saat layar HP */
  .app-copy{ order:0; }
}
@media (max-width: 560px){
  .checklist li{ padding:9px 10px; }
}