/* =============================================================
   BOOTSTRAP 5 INTEGRATION LAYER
   Dimuat SETELAH style.css agar desain asli tetap utuh.
   Isi:
   1. Penetralisir class Bootstrap yang namanya bentrok
   2. Scroll progress bar (memakai komponen .progress Bootstrap)
   3. Penyempurnaan visual yang halus
   ============================================================= */

/* -------------------------------------------------------------
   1. GUARD — class yang sama dengan Bootstrap
   style.css memakai .container, .btn, .nav, dan .toast. Tanpa
   guard ini, aturan Bootstrap bisa mengubah ukuran, warna, atau
   bahkan menyembunyikan elemen (toast) di website.
   ------------------------------------------------------------- */

/* .container */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* .btn */
.btn{
  line-height:1.7;
  vertical-align:middle;
}
.btn:hover,
.btn:active{
  background-color:var(--btn-bg);
  color:var(--btn-fg);
  border-color:var(--btn-bd);
}
/* Bootstrap .btn:focus-visible memakai warna hover biru bawaan.
   Kembalikan ke warna tombol custom + outline fokus website. */
.btn:focus-visible{
  background-color:var(--btn-bg);
  color:var(--btn-fg);
  border-color:var(--btn-bd);
  box-shadow:none;
  outline:3px solid var(--orange-deep);
  outline-offset:3px;
}

/* .nav — Bootstrap memakai flex-wrap:wrap. Pada menu mobile
   (flex-direction:column) itu bisa memecah menu jadi beberapa
   kolom. Kita kembalikan ke nowrap. */
.nav{flex-wrap:nowrap;}
@media (min-width:1025px){
  .nav{display:block;}
}
.nav-link:focus:not(:hover){
  color:var(--ink-2);
}

/* .toast — Bootstrap memberi width 350px, border, dan aturan
   .toast:not(.show){display:none} yang akan menyembunyikan toast
   buatan script.js. Guard ini mengembalikannya. */
.toast{
  width:auto;
  max-width:min(92vw,560px);
  border:0;
  background-clip:border-box;
  pointer-events:none;
}
.toast:not(.show){
  display:flex;
}

/* -------------------------------------------------------------
   2. SCROLL PROGRESS — memakai .progress / .progress-bar Bootstrap
   ------------------------------------------------------------- */
.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  z-index:990;
  height:4px;
  pointer-events:none;
}
.scroll-progress .progress{
  height:4px;
  background:transparent;
  border-radius:0;
  overflow:visible;
}
.scroll-progress .progress-bar{
  width:0;
  height:4px;
  background:linear-gradient(90deg,
    var(--yellow) 0%,
    var(--orange) 45%,
    var(--c-pink) 72%,
    var(--c-blue) 100%);
  box-shadow:0 1px 10px rgba(247,154,77,.55);
  transition:width .08s linear;
}

/* -------------------------------------------------------------
   3. LOGO WHATSAPP RESMI — GAYA GARIS MINIMALIS
   Memakai path outline resmi WhatsApp dari Phosphor Icons agar
   bentuknya benar tetapi tetap tipis dan tidak berat.
   ------------------------------------------------------------- */
svg.wa-icon,
svg.wa-icon path{
  fill:currentColor;
  stroke:none;
}
.topbar-wa svg.wa-icon path{fill:#25D366;}

/* Ukuran dibuat lebih kecil dari ikon bawaan agar terasa ringan */
.topbar-wa svg.wa-icon{width:14px;height:14px;}
.btn svg.wa-icon{width:16px;height:16px;}
.contact-ico svg.wa-icon{width:18px;height:18px;}
.social-wa svg.wa-icon{width:18px;height:18px;}
.wa-float svg.wa-icon{width:20px;height:20px;}

/* -------------------------------------------------------------
   4. PENYEMPURNAAN VISUAL
   ------------------------------------------------------------- */

/* Tipografi: heading lebih seimbang, paragraf tidak menggantung */
h1,h2,h3,h4{text-wrap:balance;}
p{text-wrap:pretty;}

/* Kilau tipis di tombol solid agar terasa lebih hidup */
.btn-primary,
.btn-accent,
.btn-wa{
  background-image:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);
}

/* Kartu harga: bayangan lembut mengikuti warna paket */
@media (hover:hover){
  .price-card:hover{
    border-color:color-mix(in srgb, var(--accent) 45%, var(--cream-400));
    box-shadow:0 30px 60px -28px color-mix(in srgb, var(--accent) 42%, rgba(74,58,38,.34));
  }

  .testi-card{
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .testi-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
  }
}

/* Hero terasa hidup: blob bergerak sangat pelan */
@media (prefers-reduced-motion:no-preference){
  .blob-1{animation:blobDrift 18s ease-in-out infinite;}
  .blob-2{animation:blobDrift 24s ease-in-out infinite reverse;}

  @keyframes blobDrift{
    0%,100%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(18px,-14px,0) scale(1.06);}
  }
}

/* Form di layar kecil: tombol jadi selebar kolom */
@media (max-width:480px){
  .form-actions{flex-direction:column;}
  .form-actions .btn{width:100%;}
}

/* Hormati preferensi reduce motion */
@media (prefers-reduced-motion:reduce){
  .scroll-progress .progress-bar{transition:none;}
  .blob-1,.blob-2{animation:none;}
  .testi-card{transition:none;}
}

/* Jangan tampilkan progress bar saat halaman dicetak */
@media print{
  .scroll-progress{display:none !important;}
}