/* Epankila Creative: halaman Undangan Digital
   Tambahan untuk hub.css (muat setelah hub.css). hub.css sendiri tidak diubah. */

/* ---------- ponsel ---------- */
.hero-visual{display:grid;justify-items:center;gap:16px;margin:0}
.phone{width:min(100%,290px);padding:9px;background:var(--panel);border:1px solid var(--line);border-radius:40px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.phone img{display:block;width:100%;height:auto;aspect-ratio:560/1212;border-radius:32px;background:#123c37}
.phone-cap{font-size:.92rem;color:var(--mute);text-align:center;max-width:32ch}

/* ---------- tampilan di HP tamu ---------- */
.screens{padding:96px 0 40px}
.screens h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:800;color:#fff;margin-bottom:14px;max-width:28ch}
.screens-lead{color:var(--mute);max-width:54ch;margin-bottom:44px}
.screens-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.screen{margin:0;display:grid;justify-items:center;gap:16px}
.screen .phone{width:min(100%,270px)}
.screen figcaption{text-align:center}
.screen figcaption strong{display:block;font-family:var(--display);font-size:1.1rem;font-weight:700;color:#fff;line-height:1.25}
.screen figcaption span{display:block;max-width:28ch;margin:4px auto 0;font-size:.92rem;color:var(--mute)}

/* ---------- cara memesan ---------- */
.process{background:var(--paper);color:var(--ink);padding:88px 0}
.process h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin-bottom:36px;max-width:20ch}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid #d5dcea;counter-reset:langkah}
.step{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:baseline;padding:26px 4px;border-bottom:1px solid #d5dcea;counter-increment:langkah}
.step::before{content:counter(langkah);font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--blue-2);background:rgba(37,99,235,.1);border-radius:8px;text-align:center;padding:7px 0}
.step strong{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.25;color:var(--ink)}
.step span{color:var(--ink-mute)}

/* ---------- pertanyaan umum ---------- */
.faq{padding:96px 0 40px}
.faq h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:800;color:#fff;margin-bottom:36px;max-width:22ch}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4px;cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.3;color:#fff;transition:background .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:rgba(255,255,255,.025)}
.qa summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(148,163,184,.35);border-radius:50%;font-family:var(--body);font-weight:500;font-size:1.2rem;line-height:1;color:var(--mute)}
.qa details[open] summary::after{content:"\2212";color:var(--teal);border-color:var(--teal)}
.qa details p{max-width:64ch;padding:0 4px 24px;color:var(--mute)}

/* ---------- penutup ---------- */
.legal .body{color:var(--mute)}

/* ---------- responsif ---------- */
@media (max-width:960px){
  .screens{padding:68px 0 28px}
  .screens-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:4px 18px 16px}
  .screen{flex:0 0 min(72vw,270px);scroll-snap-align:center}
  .process{padding:68px 0}
  .step{grid-template-columns:44px 1fr;gap:6px 18px;align-items:center}
  .step span{grid-column:2}
  .faq{padding:68px 0 28px}
}
@media (max-width:600px){
  .qa summary{font-size:1.05rem;padding:18px 4px}
}