/* WRE - desain contoh halaman utama (hanya dipakai index-contoh.php) */

/* ---------- Umum ---------- */
html{scroll-behavior:smooth}
.hero .btn:focus-visible,.btn:focus-visible,.nav .cta:focus-visible,.ticket button:focus-visible,
.nav-social:focus-visible,.nav-mode:focus-visible,.nav-lang:focus-visible{
  outline:3px solid #ffd166;outline-offset:2px}

/* Judul bagian: lebih rapi dan konsisten */
.section-head{margin-bottom:44px}
.kicker{
  background:rgba(225,29,43,.08);padding:6px 14px;border-radius:999px;
  letter-spacing:1.6px;font-size:12px}
.section-head h2{line-height:1.2}
.section-head p{line-height:1.7}

/* Kartu: bayangan halus + efek angkat saat disentuh */
.service,.step,.why-card{
  border-radius:20px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.service:hover,.step:hover,.why-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(26,63,184,.12)}
.service h3,.step h3,.why-card h3{font-size:18px;margin-bottom:6px}
.service p,.step p,.why-card p{line-height:1.65}

/* Kotak cek status lebih menonjol */
.ticket{border-radius:20px;padding:26px 28px}
.ticket h4{font-weight:700}

/* Hero: teks lebih terbaca di atas gambar */
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero p.lead{line-height:1.7;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero .badges{gap:10px}
.hero .badges span{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  padding:7px 14px;border-radius:999px;font-size:13.5px;opacity:1}

/* Blok ajakan di bawah */
.cta-block{border-radius:28px}

/* Footer */
footer{margin-top:72px}
footer p,footer a{color:#c6d1e8}
footer a:hover{color:#fff}
footer .bottom{opacity:.85}

/* ---------- Dark mode: kontras teks ---------- */
html[data-home-mode="dark"] .section-head p,
html[data-home-mode="dark"] .service p,
html[data-home-mode="dark"] .step p,
html[data-home-mode="dark"] .why-card p{color:#b9c6da}
html[data-home-mode="dark"] .kicker{background:rgba(255,107,120,.12);color:#ff8a94}
html[data-home-mode="dark"] .service,
html[data-home-mode="dark"] .step,
html[data-home-mode="dark"] .why-card{background:#111c33;border:1px solid #243452}
html[data-home-mode="dark"] .service:hover,
html[data-home-mode="dark"] .step:hover,
html[data-home-mode="dark"] .why-card:hover{
  border-color:#3b82f6;box-shadow:0 14px 34px rgba(0,0,0,.4)}
html[data-home-mode="dark"] .hero .badges span{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
html[data-home-mode="dark"] .ticket input::placeholder{color:#7f8da6}

/* ---------- Tablet & HP ---------- */
@media (max-width:900px){
  .section-head{margin-bottom:32px}
}
@media (max-width:768px){
  /* Hero lebih pendek di HP */
  .hero{padding:28px 0 64px}
  .hero .inner{gap:22px}
  .hero h1{font-size:clamp(26px,7.4vw,32px);line-height:1.2;margin-bottom:12px}
  .hero p.lead{font-size:15px;margin-bottom:18px;line-height:1.6}
  .hero .badges{gap:8px}
  .hero .badges span{font-size:12.5px;padding:6px 11px}
  .hero .logo-card{padding:16px 14px 18px;border-radius:20px}
  .vs-stage{height:280px;max-width:176px}
  .hero .logo-card h3{font-size:16px;margin-top:10px}
  .hero .logo-card p{font-size:12.5px}

  /* Kotak cek status: input dan tombol mudah disentuh */
  .ticket{padding:20px 16px;margin-top:-40px}
  .ticket form{display:flex;gap:8px}
  .ticket input{min-height:48px;font-size:16px}
  .ticket button{min-height:48px;padding:0 18px;border-radius:12px;font-weight:700}

  /* Jarak antar bagian lebih rapat */
  .services,.steps,.why{padding-top:44px;padding-bottom:44px}
  .section-head h2{font-size:24px}
  .service,.step,.why-card{padding:22px 18px}
  .cta-block{padding:34px 20px;border-radius:22px}

  /* Ruang untuk bar tombol bawah supaya footer tidak tertutup */
  footer{padding-bottom:88px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .service,.step,.why-card{transition:none}
  .service:hover,.step:hover,.why-card:hover{transform:none}
}