@media (max-width: 991.98px){
/* soft-ui: hanya gaya visual (radius & bayangan). Hapus <link>-nya untuk membatalkan. */

/* Kartu pengalaman */
.pe-card{
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.pe-card-img,
.pe-card-overlay{
  border-radius: inherit;
}
.pe-card-client-icon{
  border-radius: 14px !important;
}

/* Kartu hero "Profil Perusahaan" */
.hh-hero .hh-card,
.hh-card{
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Tombol bentuk pil */
.hh-btn,
.hh-card .hh-btn{
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Tombol scroll-to-top dan tombol menu HP */
.back-to-top{
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.navbar-toggler{
  border-radius: 14px !important;
}

/* ===== Tahap 2: elemen umum (radius & bayangan saja) ===== */

/* Kartu / item konten */
.card,
.service-item,
.team-item,
.testimonial-item,
.blog-item,
.faq-item,
.accordion-item{
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Gambar di dalam kartu saja (logo & ikon tidak ikut) */
.card img,
.service-item img,
.team-item img,
.blog-item img{
  border-radius: 18px;
}

/* Input & form */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
  border-radius: 16px !important;
}

/* Tombol umum (kecuali tombol topbar) */
.btn:not(.btn-square):not(.btn-sm-square):not(.btn-md-square):not(.btn-lg-square){
  border-radius: 999px !important;
}

/* Dropdown, modal, menu HP yang terbuka */
.dropdown-menu,
.modal-content{
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.navbar-collapse{
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Titik indikator hero tetap bulat */
.hh-dot{
  border-radius: 50% !important;
}

/* ===== Tahap 3: halaman Profil, Tim, Testimoni, FAQ, Kontak (radius & bayangan saja) ===== */

/* Kartu putih di halaman Profil */
.about-item-content,
.bg-white.rounded.p-5.h-100,
.about-portrait-card{
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Gambar profil */
.about-img-wrap,
.about-img-wrap img,
.img-fluid.rounded,
.img-fluid.rounded.w-100,
.img-fluid.h-100.rounded{
  border-radius: 22px !important;
}

/* Kotak angka / counter */
.counter-item{
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Kartu tim */
.team-item{
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}
.team-img,
.team-img img,
.img-fluid.rounded-top{
  border-radius: 24px 24px 0 0 !important;
}
.team-icon a,
.team-icon .btn{
  border-radius: 50% !important;
}

/* Testimoni */
.testimonial-carousel .testimonial-item,
.testimonial-carousel .rounded{
  border-radius: 24px !important;
}
.testimonial-carousel .testimonial-item{
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* FAQ accordion */
.accordion-item{
  border-radius: 22px !important;
  overflow: hidden;
}
.accordion-button,
.accordion-button.collapsed,
.accordion-body{
  border-radius: 0 !important;
}

/* Form kontak & pendaftaran */
.form-control.bg-light.border-0{
  border-radius: 18px !important;
}
.contact-img-inner,
.contact-img-inner img{
  border-radius: 24px !important;
}

/* ===== Tahap 3: bayangan lebih terasa (radius & bayangan saja) ===== */
.hh-hero .hh-card,
.hh-card{
  border-radius: 32px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.12);
}
.hh-btn,
.hh-card .hh-btn{
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.back-to-top{
  border-radius: 20px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.navbar-toggler{
  border-radius: 18px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.navbar-collapse{
  border-radius: 28px !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.22);
}
.pe-card{
  border-radius: 28px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

/* ===== Tahap 4: spesifisitas lebih tinggi (radius & bayangan saja) ===== */
html body .about-item-content,
html body .about-portrait-card,
html body .bg-white.rounded.p-5.h-100{
  border-radius: 28px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.14) !important;
}
html body .counter-item{
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
}
html body .about-img-wrap,
html body .about-img-wrap img,
html body .img-fluid.rounded,
html body .img-fluid.rounded.w-100,
html body .img-fluid.h-100.rounded{
  border-radius: 22px !important;
}
html body .team-item{
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
}
html body .accordion-item{
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}
html body .form-control.bg-light.border-0{
  border-radius: 18px !important;
}
html body .btn.btn-primary{
  border-radius: 999px !important;
}
html body .pe-card{
  border-radius: 28px !important;
}

/* ===== Tahap 5: menimpa global.css (radius & bayangan saja) ===== */
html body .about .about-item-content.bg-white,
html body .about .bg-white.rounded,
html body .servicedetail .about-item-content.bg-white,
html body .bg-white.rounded,
html body .bg-light.rounded:not(.form-control){
  border-radius: 28px !important;
  box-shadow: 0 12px 32px rgba(13,43,94,.14) !important;
}
html body .form-control.bg-light.rounded{
  border-radius: 18px !important;
}
html body .counter-item.bg-light.rounded{
  border-radius: 22px !important;
}

/* ===== Tahap 6: gaya referensi (radius & bayangan saja) ===== */

/* Hero: sudut bawah besar seperti banner di referensi */
html body .hh-hero{
  border-radius: 0 0 32px 32px !important;
  overflow: hidden;
}

/* Bar navbar: sudut bawah membulat + bayangan lembut */
html body .navbar{
  border-radius: 0 0 28px 28px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

/* Kotak ikon (Alamat, Email, WhatsApp, dll) seperti deretan kategori */
html body .btn-xl-square,
html body .btn-lg-square,
html body .btn-md-square,
html body .btn-sm-square,
html body .btn-square{
  border-radius: 18px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

/* Tombol sosial tim tetap bulat penuh */
html body .team-icon a,
html body .team-icon .btn{
  border-radius: 50% !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.15) !important;
}

/* Kolom input bentuk pil seperti kotak pencarian */
html body .form-control,
html body .form-select,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"]{
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}
html body textarea.form-control,
html body textarea{
  border-radius: 24px !important;
}

/* Menu HP yang terbuka dan item di dalamnya */
html body .navbar-nav .nav-link{
  border-radius: 14px !important;
}

}
/* ===== Tahap 9: topbar jadi deretan kapsul (tampilan saja, HP saja) ===== */
@media (max-width: 991.98px){
  html body .container-fluid.topbar{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html body .container-fluid.topbar .row.gx-0{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    row-gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html body .container-fluid.topbar .row.gx-0::-webkit-scrollbar{ display: none; }

  html body .container-fluid.topbar .row.gx-0 > .col-lg-8,
  html body .container-fluid.topbar .row.gx-0 > .col-lg-4,
  html body .container-fluid.topbar .col-lg-8 > .d-flex,
  html body .container-fluid.topbar .col-lg-4 > .d-flex{
    display: contents !important;
  }

  html body .container-fluid.topbar .col-lg-8 .border-end,
  html body .container-fluid.topbar .col-lg-8 .ps-3,
  html body .container-fluid.topbar .col-lg-4 .d-flex.border-end,
  html body .container-fluid.topbar .col-lg-4 .dropdown.ms-3{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,.10) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  }
  html body .container-fluid.topbar .col-lg-4 .d-flex.border-end{
    gap: 16px !important;
  }
}

/* ===== Tahap 10: topbar teks polos, tanpa latar (tampilan saja, HP saja) ===== */
@media (max-width: 991.98px){
  html body .container-fluid.topbar .col-lg-8 .border-end,
  html body .container-fluid.topbar .col-lg-8 .ps-3,
  html body .container-fluid.topbar .col-lg-4 .d-flex.border-end,
  html body .container-fluid.topbar .col-lg-4 .dropdown.ms-3{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
  }
  html body .container-fluid.topbar .row.gx-0{
    gap: 6px !important;
  }
}

/* ===== Tahap 11: HP lebih rapat (jarak, padding, bentuk saja) ===== */
@media (max-width: 767.98px){

  /* Jarak antar section */
  html body .py-5{
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
  html body .pb-5{ padding-bottom: 26px !important; }
  html body .pt-5{ padding-top: 20px !important; }
  html body .mb-5{ margin-bottom: 18px !important; }
  html body .mp-sec{
    margin-bottom: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Jarak antar kartu dalam baris */
  html body .row.g-5,
  html body .row.g-4,
  html body .row.g-3{
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
  html body .pe-grid{ gap: 12px !important; }

  /* Padding dalam kartu */
  html body .p-5,
  html body .about-item-content,
  html body .about .about-item-content.about-portrait-card,
  html body .about .about-right-card{
    padding: 18px 16px !important;
  }
  html body .p-4{ padding: 14px !important; }
  html body .display-5{ margin-bottom: 10px !important; }

  /* Bentuk kartu seragam, bayangan tipis, garis atas lebih tipis */
  html body .about .about-item-content.bg-white,
  html body .about .bg-white.rounded,
  html body .bg-white.rounded,
  html body .counter-item,
  html body .team-item,
  html body .accordion-item{
    border-radius: 22px !important;
    box-shadow: 0 6px 18px rgba(11,42,91,.12) !important;
  }
  html body .about .about-item-content.bg-white,
  html body .about .bg-white.rounded,
  html body .bg-white.rounded{
    border-top-width: 3px !important;
  }
  html body .counter-item{ padding: 12px !important; }
}

/* ===== Tahap 12: fokus foto slide 2 hero (HP saja) ===== */
@media (max-width: 767.98px){
  html body .hh-hero .hh-slides > .hh-slide:nth-child(2) .hh-slide-img,
  html body .hh-hero .hh-slides > .hh-slide:nth-child(2) img.hh-slide-img{
    object-position: 62% center !important;
    background-position: 62% center !important;
  }
}