/* ============ SETARA - Layanan Page Styles ============ */

.card-transition{ transition: box-shadow .2s ease, border-color .2s ease; }

.hero-gradient{
  background: radial-gradient(130% 90% at 80% 20%, #FFF4DA 0%, #E6EEF7 50%, #F8F9FA 100%);
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#F1F5F9; }
::-webkit-scrollbar-thumb{ background:#DEE2E6; border-radius:4px; }

/* Tab bar sticky: background solid + di atas konten katalog.
   Nilai top diatur ulang oleh JS (adjustStickyTabPosition) mengikuti
   posisi header yang sebenarnya saat scroll. */
#serviceTabsSection{
  position: sticky;
  top: 0; /* fallback sebelum JS jalan */
  z-index: 30;
  background: #fff;
}

.tab-btn{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:10px 16px; border-radius:12px; font-size:13px; font-weight:600; border:1px solid #DEE2E6; color:#495057; background:#fff; transition:.15s ease; }
.tab-btn:hover{ border-color:#40698F; color:#0D1B2A; }
.tab-btn.active{ background:#0D1B2A; border-color:#0D1B2A; color:#fff; }
.tab-btn .count{ font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; background:#F1F3F5; color:#495057; }
.tab-btn.active .count{ background:rgba(255,255,255,0.15); color:#fff; }
.tab-btn svg{ flex-shrink:0; }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* SETARA — Search bar (disamakan dengan landing-page.html) */
.search-bar{
  display:flex; align-items:center; gap:12px;
  background:#FFFFFF;
  border:1px solid #DEE2E6;
  border-radius:8px;
  padding:6px 6px 6px 18px;
  max-width:520px;
  box-shadow:0 1px 2px rgba(13,27,42,0.06), 0 1px 3px rgba(13,27,42,0.08);
}
.search-bar input{
  border:none; outline:none; flex:1;
  font-family:inherit; font-size:14px; color:#212529;
  background:transparent;
}
.search-bar input::placeholder{ color:#ADB5BD; }
.search-bar .icon{ width:20px; height:20px; flex-shrink:0; color:#ADB5BD; }
.search-bar .btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
  padding:12px 24px;
  border-radius:8px;
  background:#102A43; color:#fff;
  white-space:nowrap;
  transition:background-color .15s ease;
}
.search-bar .btn:hover{ background:#0D1B2A; }

/* ---------------------------------------------------------------------
   Dropdown filter (Semua Metode / Urutkan): reset appearance browser,
   pasang panah kustom, dan ring/focus hanya muncul saat select difokus.
--------------------------------------------------------------------- */
#methodSelect,
#sortSelect{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23495057'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 34px;
  border: 1px solid #DEE2E6;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

#methodSelect:hover,
#sortSelect:hover{
  border-color: #40698F;
}

#methodSelect:focus,
#sortSelect:focus{
  border-color: #1E3A5F;
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.25);
}

#methodSelect:not(:focus),
#sortSelect:not(:focus){
  box-shadow: none;
}