/* === RESET DASAR === */
body{
  font-family:Arial,sans-serif;margin:0;padding:0;background:#f7f8fc;padding-top:120px;
}
section{padding:2rem;background:#fff;margin:1rem;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);}
footer{text-align:center;padding:1rem;background:#222;color:#fff;font-size:.9rem}

/* === WHATSAPP FLOATING === */
.wa-wrapper{position:fixed;bottom:20px;right:20px;z-index:999;text-align:right}
.wa-toggle{background:#25d366;color:#fff;padding:10px 15px;border-radius:30px;display:flex;align-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.wa-toggle img{width:20px;height:20px;margin-right:10px}
.wa-list{display:none;flex-direction:column;gap:10px;margin-top:10px}
.wa-list.show{display:flex}
.wa-btn{background:#25d366;color:#fff;padding:8px 12px;border-radius:30px;text-decoration:none;display:flex;align-items:center;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.wa-btn img{width:28px;height:28px;border-radius:50%;margin-right:8px;object-fit:cover}

/* === HEADER GLASS + SHADOW ORANGE === */
.main-header{position:fixed;top:20px;left:0;right:0;margin:auto;max-width:1200px;height:60px;padding:.6rem 1.5rem;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50px;border-bottom:2px solid #fc9031;z-index:1000;transition:.3s;display:flex;justify-content:space-between;align-items:center}
.scrolled-header{background:rgba(255,255,255,.75)}

/* === CONTAINER === */
.main-header .container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.5rem;width:100%;gap:1.5rem}

/* === LOGO === */
.logo-left{display:flex;align-items:center}
.desktop-logo{width:250px;height:auto}
.mobile-logo{display:none;width:180px;height:auto}

/* === NAVIGATION === */
.nav-menu{display:flex;align-items:center}
.nav-links{display:flex;gap:1px;list-style:none;margin:0;padding:0}

/* [HAPUS CSS LAMA UNTUK .cek-tarif-btn] */

/* Style baru */
.new-menu-item {
  position: relative;
  margin-left: 10px;
}

.new-menu-item .nav-link {
  position: relative;
  padding-right: 25px; /* Ruang untuk badge */
}

.new-badge {
  position: absolute;
  top: -10px;
  right: 0;
  background: #fc9031;
  color: white;
  font-size: 0.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: bold;
}

/* Style hover normal seperti menu lain */
.new-menu-item .nav-link:hover {
  color: #fc9031 !important;
  background: transparent !important;
}

/* Responsive */
@media (max-width: 768px) {
  .new-menu-item {
    margin-left: 0;
  }
  
  .new-badge {
    top: -8px;
    right: 5px;
  }
}

/* === DROPDOWN MENU === */
.nav-links li.dropdown {
  position: relative;
}

.nav-links .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  z-index: 1000;
  min-width: 220px;
}

.nav-links li.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 0.5rem 1rem;
  color: #16486c;
  white-space: nowrap;
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;
}

.dropdown-menu li:hover {
  background: #f2f2f2;
  color: #fc9031;
}

.dropdown-menu .has-submenu {
  position: relative;
}

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  min-width: 200px;
}

.dropdown-menu .has-submenu:hover .dropdown-submenu {
  display: block;
}

.nav-links li a{color:#16486c;text-decoration:none;font-size:15px;padding:.5rem 1rem;border-radius:50px;transition:.3s;font-weight:500}
.nav-links li :hover{color:#fc9031!important}
.nav-links li a:hover{color:#fc9031;background:transparent}
.nav-links li .login-link:hover{background:#fc9031;color:#fff!important}
.menu-toggle{display:none;font-size:1.5rem;cursor:pointer;padding-left:1rem;color:#16486c}

/* === HERO SECTION === */
.hero{background:#fff}
.hero-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:auto;gap:2rem;flex-wrap:wrap}
.hero-text{flex:1;animation:fadeInUp 1s ease}
.hero-tagline{font-size:2rem;color:#fc9031;border:2px solid #fc9031;padding:6px 12px;border-radius:20px;font-weight:600;display:inline-block;margin-bottom:1rem}
.hero-text h1{font-size:2rem;margin-bottom:1rem;line-height:1.4}
.hero-text h1 .biru{color:#16486c}
.hero-text h1 .orange{color:#fc9031}
.hero-lead{font-size:1.05rem;color:#16486c;line-height:1.6}

/* === Tambahan ukuran & warna sesuai arahan === */
.hero-subheadline{
  font-size:1.8rem;          /* sedikit lebih besar */
  color:#16486c;             /* biru sesuai logo */
  line-height:1.6;
  margin-top:1.2rem;
}
.hero-subtext{
  font-size:1.25rem;
  color:#fc9031;             /* oranye sesuai logo */
  line-height:1.6;
  margin-top:.8rem;
}

.hero-image{flex:1;text-align:center}
.hero-image img{max-width:100%;height:auto;animation:fadeIn 1.5s ease}

/* Animasi Fade */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* === TENTANG KAMI (Dua Kolom) DESKTOP === */
.tentang-section {background: #fff;padding: 3rem 1rem;}
.tentang-container {max-width: 1200px;margin: auto;}
.tentang-row {display: flex;align-items: center;gap: 2rem;flex-wrap: wrap;}
.tentang-image {flex: 1;text-align: center;}
.tentang-image img {max-width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.tentang-content {flex: 1;}
.tentang-content h2 {font-size: 2rem;color: #16486c;margin-bottom: 1rem;}
.tentang-content p {font-size: 1rem;line-height: 1.7;color: #444;}

/* Tombol */
.tentang-buttons {margin-top: 1.5rem;display: flex;flex-wrap: wrap;gap: 1rem;}
.btn {display: inline-flex;align-items: center;padding: 0.75rem 1.25rem;font-size: 0.95rem;border: none;border-radius: 6px;text-decoration: none;font-weight: 500;transition: 0.3s ease;}
.btn i {margin-right: 0.5rem;}
.btn.konsultasi {background-color: #40dd10;color: #fff;}
.btn.cek-tarif {background-color: #fc9031;color: #fff;}

/* === KEUNGGULAN (ikon horizontal) === */
.keunggulan-section {margin-top: 3rem;}
.keunggulan-container {display: flex;justify-content: center;gap: 2rem;flex-wrap: wrap;text-align: center;}
.keunggulan-box {flex: 1 1 250px;background: #f9f9f9;border-radius: 12px;padding: 1.5rem;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);}
.keunggulan-box i {font-size: 2.5rem;color: #fc9031;margin-bottom: 1rem;}
.keunggulan-box h4 {font-size: 1.2rem;color: #16486c;margin-bottom: 0.5rem;}
.keunggulan-box p {font-size: 0.95rem;color: #555;}

/* === LAYANAN TERSTRUKTUR === */
.layanan {
  background: #f9f9f9;
  padding: 3rem 1rem;
}

.layanan h2 {
  text-align: center;
  color: #16486c;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.layanan-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.layanan-kategori {
  margin-bottom: 3rem;
}

.layanan-kategori h3 {
  color: #fc9031;
  border-bottom: 2px solid #fc9031;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.layanan-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.layanan-box {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.layanan-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-bottom:2px solid #fc9031;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:none;
}

.layanan-content {
  padding: 1.5rem;
}

.layanan-box h4 {
  color: #16486c;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.layanan-box p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.btn-selengkapnya {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  background: #fc9031;
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.btn-selengkapnya:hover {
  background: #16486c;
  transform: translateX(5px);
}

.btn-selengkapnya i {
  margin-left: 6px;
  font-size: 0.8rem;
}

.layanan-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(252, 144, 49, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .layanan-group {
    grid-template-columns: 1fr;
  }
  
  .layanan-img {
    height: 150px;
  }
}

/* === STYLE KONTAK === */
.kontak-section {
  background: #f9f9f9;
  padding: 3rem 1rem;
}

.kontak-section h2 {
  color: #16486c;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.orange-icon {
  color: #fc9031;
  margin-right: 10px;
}

.kontak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 2rem;
}

.kontak-box {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.kontak-box:hover {
  transform: translateY(-5px);
}

.kontak-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.kontak-header h3 {
  color: #16486c;
  margin: 0;
}

.kontak-alamat {
  display: flex;
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.kontak-alamat:hover {
  color: #fc9031;
}

.kontak-alamat p {
  margin: 0;
  line-height: 1.5;
}

.kontak-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.kontak-item {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem;
  background: white;
  border-radius: 50px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.kontak-item:hover {
  background: #fc9031;
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .kontak-grid {
    grid-template-columns: 1fr;
  }
  
  .kontak-info {
    flex-direction: column;
    align-items: center;
  }
}

/* === TARIF SECTION === */
.tarif-section {
  padding: 3rem 1rem;
  background: #f9f9f9;
}

.tarif-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.show-entries {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.show-entries select {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  min-width: 250px;
}

.search-box button {
  background: #fc9031;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.table-responsive {
  overflow-x: auto;
}

.tarif-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.tarif-table th, 
.tarif-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.tarif-table th {
  background: #16486c;
  color: white;
  font-weight: 500;
}

.tarif-table tr:hover {
  background: #f5f5f5;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
}

.page-numbers {
  display: flex;
  gap: 0.5rem;
}

.page-numbers a, 
.page-nav {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #16486c;
}

.page-numbers a.active {
  background: #fc9031;
  color: white;
  border-color: #fc9031;
}

.page-nav.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.showing-entries {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  .tarif-controls {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-box {
    width: 100%;
  }
  
  .search-box input {
    min-width: unset;
    width: 100%;
  }
}

/* === ANIMASI SAAT SCROLL === */
[data-animate]{opacity:0;transform:translateY(20px);transition:.8s}
[data-animate].active{opacity:1;transform:translateY(0)}
html{scroll-behavior:smooth}

/* === RESPONSIVE NAV & HERO === */
@media(max-width:768px){
  .main-header{padding:.5rem 1rem;top:30px;width:87%}
  .scrolled-header{background:rgba(255,255,255,.75)}
  .hero-image{order:-1}
  .hero-text{order:0}
  .main-header .container{padding:.5rem 1rem}
  .logo-left{margin-left:.5px}
  .nav-links{position:absolute;top:80px;right:10px;background:#fff;flex-direction:column;width:180px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.1);display:none;padding:1rem}
  .nav-links.show{display:flex}
  .nav-links li{padding:.7rem 1rem}
  .nav-links li a{padding:.7rem 1rem}
  .menu-toggle{display:block}
  .desktop-logo{display:none}
  .mobile-logo{display:block}

  /* HERO mobile */
  .hero-container{flex-direction:column;text-align:center}
  .hero-image img{max-width:280px}
}

/* === TENTANG KAMI (mobile) === */
.tentang-content {
  max-width: 800px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}
.tentang-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.icon-box {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  width: 250px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.icon-box i {
  font-size: 2.5rem;
  color: #fc9031;
  margin-bottom: 1rem;
}
.icon-box h4 {
  color: #fc9031;
  margin-bottom: 0.5rem;
}
.icon-box p {
  font-size: 0.95rem;
  color: #555;
}



/* === ANIMASI SAAT SCROLL === */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}
[data-animate].active {
  opacity: 1;
  transform: translateY(0);
}
html {
  scroll-behavior: smooth;
}

/* ========= PERBAIKAN DROPDOWN MOBILE ========= */
@media (max-width: 768px) {
  /* Perbaikan utama untuk dropdown */
  .dropdown-menu {
    position: static !important;
    width: 100% !important;
    left: 0 !important;
    box-shadow: none;
    background: transparent;
    padding-left: 15px;
    animation: none !important;
    display: none !important;
  }

  /* Tampilkan dropdown saat aktif */
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu {
    display: block !important;
  }

  /* Style untuk submenu */
  .dropdown-submenu {
    position: static !important;
    width: 100%;
    margin-left: 15px;
    border-left: 2px solid #fc9031;
    padding-left: 10px;
  }

  /* Perbaikan tampilan item */
  .dropdown-menu li {
    padding: 8px 0 !important;
    white-space: normal;
  }

  /* Indikator dropdown */
  .dropdown > a::after {
    content: '+';
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s;
  }
  
  .dropdown:hover > a::after {
    transform: rotate(45deg);
  }


  /* Gaya baru untuk bagian blog */
.blog-section {
  background: #f9f9f9;
  padding: 3rem 1rem;
}
.blog-date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 0.8rem;
}


  /* === TENTANG RESPONSIVE (MOBILE & TABLET) ERROR === */
@media (max-width: 768px) {
.tentang-row {flex-direction: column;text-align: center;}
.tentang-content {padding: 0 1rem;}
.tentang-buttons {justify-content: center;}
.keunggulan-container {flex-direction: column;gap: 1.5rem;}
.tentang-image{order:-1}


/* === FIX OVERFLOW MOBILE HORIZONTAL SCROLL === */
body, html {
  max-width: 100%;
  overflow-x: hidden;
}

.main-header {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}