/* ============================================================
   theme-modern.css
   Lapisan penyegaran tampilan di atas style.css bawaan template.
   Dimuat SETELAH style.css. Tidak ada berkas vendor yang diubah,
   sehingga seluruh perubahan di sini mudah dibatalkan.
   ============================================================ */

:root {
  /* --- Tipografi --- */
  --tp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- Warna --- */
  --tp-primary: #2a93c9;          /* biru utama, identitas lama dipertahankan */
  --tp-primary-dark: #1c6f9a;
  --tp-primary-light: #55bbeb;
  --tp-primary-tint: #eaf5fb;

  /* Warna pendukung agar tidak didominasi satu biru saja. */
  --tp-teal: #12a594;
  --tp-teal-tint: #e6f6f4;
  --tp-amber: #f0a202;
  --tp-amber-tint: #fdf3e0;

  /* --- Netral --- */
  --tp-ink: #1f2937;
  --tp-body: #4b5563;
  --tp-muted: #9ca3af;
  --tp-line: #e5e7eb;
  --tp-surface: #f8fafc;

  /* --- Radius, konsisten di seluruh situs --- */
  --tp-radius-sm: 8px;
  --tp-radius: 12px;
  --tp-radius-lg: 16px;
  --tp-radius-xl: 24px;
  --tp-radius-pill: 9999px;

  /* --- Bayangan --- */
  --tp-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --tp-shadow: 0 6px 18px rgba(31, 41, 55, .07);
  --tp-shadow-lg: 0 12px 28px -10px rgba(42, 147, 201, .38);
}

/* ------------------------------------------------------------
   1. Tipografi
   Selektor sengaja dibatasi pada elemen teks. <span> TIDAK
   disertakan, karena ikon memakai <span class="mdi ...">
   dan aturan seperti `.wrapper span` akan mengalahkan `.mdi`
   sehingga glyph ikon hilang.
   ------------------------------------------------------------ */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, dt, dd, td, th, label, legend, blockquote, figcaption,
input, select, textarea, button,
.btn, .button, .rd-nav-link, .rd-dropdown-link, .breadcrumbs-custom-path {
  font-family: var(--tp-font);
}

body {
  color: var(--tp-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tp-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------
   2. Perlindungan font ikon
   Ditegaskan ulang dengan spesifisitas tinggi supaya tidak
   pernah tertimpa oleh aturan tipografi mana pun di masa depan.
   ------------------------------------------------------------ */
[class*="mdi-"]::before,
[class*="mdi-"]::after {
  font-family: "Material Design Icons" !important;
}

.fa::before, .fa::after,
[class*="fa-"]::before,
[class*="fa-"]::after {
  font-family: 'FontAwesome' !important;
}

[class*="flaticon"]::before,
[class*="flaticon"]::after {
  font-family: "Flaticon" !important;
}

/* ------------------------------------------------------------
   3. Komponen: radius & bayangan yang seragam
   ------------------------------------------------------------ */
.button,
.btn,
button.button,
input[type="submit"] {
  border-radius: var(--tp-radius);           /* 12px */
  font-weight: 600;
  letter-spacing: .01em;
  /* Bayangan tipis saat diam: cukup untuk mengangkat tombol dari latar,
     belum cukup untuk terbaca sebagai elemen melayang. */
  box-shadow: 0 1px 2px rgba(16, 34, 48, .08), 0 2px 6px rgba(16, 34, 48, .06);
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease;
}

.button:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(16, 34, 48, .18), 0 2px 6px rgba(16, 34, 48, .08);
}

/* Ditekan: turun kembali agar terasa ada respons fisik. */
.button:active,
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 34, 48, .10);
  transition-duration: .06s;
}

/* Fokus keyboard tetap terlihat jelas — penting untuk navigasi tanpa tetikus. */
.button:focus-visible,
.btn:focus-visible,
button.button:focus-visible,
input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 147, 201, .35), 0 2px 6px rgba(16, 34, 48, .08);
}

/* Sebagian pengguna menonaktifkan animasi di setelan sistem. */
@media (prefers-reduced-motion: reduce) {
  .button,
  .btn,
  button.button,
  input[type="submit"] {
    transition: box-shadow .18s ease, background-color .2s ease;
  }

  .button:hover,
  .btn:hover {
    transform: none;
  }
}

.form-input,
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-radius: var(--tp-radius-sm);
  border-color: var(--tp-line);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-input:focus,
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 0 3px rgba(42, 147, 201, .14);
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   4. Pemilih bahasa
   Widget bawaan Google Translate disembunyikan sepenuhnya; yang
   tampil adalah tombol ID | EN. Terjemahannya tetap dikerjakan
   Google, hanya tampilannya yang diganti.
   ------------------------------------------------------------ */

/* Sembunyikan widget dan banner bawaan Google. */
#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget,
iframe.skiptranslate {
  display: none !important;
}

/* Google menggeser <body> ke bawah untuk banner-nya; batalkan. */
body {
  top: 0 !important;
  position: static !important;
}

.lang-bar {
  background: var(--tp-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lang-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 34px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--tp-radius-pill);
  background: rgba(255, 255, 255, .08);
}

.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: var(--tp-radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.lang-opt:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.lang-opt.aktif {
  background: var(--tp-primary);
  color: #fff;
}

.lang-flag {
  width: 16px;
  height: 11px;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  flex: 0 0 auto;
}

.lang-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .18);
}

@media (max-width: 575px) {
  .lang-bar-inner { justify-content: center; }
}

/* ------------------------------------------------------------
   5. Hero / breadcrumb halaman  (komponen <x-hero>)
   Menggantikan blok breadcrumb lama yang judul & jalurnya kosong.
   Tingginya dikurangi agar konten utama lebih cepat terlihat.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: 110px 0 60px;
  background-position: center;
  background-size: cover;
}

/* Navbar utama diposisikan absolut di atas section ini, jadi di desktop
   dibutuhkan ruang atas yang cukup agar judul tidak tertutup menu. */
@media (min-width: 1200px) {
  .hero { padding: 210px 0 64px; }
}

@media (max-width: 767px) {
  .hero { padding: 84px 0 44px; }
}

/* Gambar latar hero adalah foto tim, jadi overlay dibuat setipis mungkin di
   bagian atas agar wajah tetap terlihat. Bagian bawah digelapkan lebih kuat
   karena di situlah judul, subjudul, dan breadcrumb berada. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 55, 78, .10) 0%,
    rgba(15, 55, 78, .14) 55%,
    rgba(11, 37, 54, .50) 100%
  );
}

.hero-inner { position: relative; z-index: 2; }

/* Bayangan halus menjaga teks tetap terbaca meski overlay ditipiskan,
   termasuk saat foto latar diganti dengan yang lebih terang. */
.hero-title {
  margin: 0 0 12px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -.5px;
  text-shadow: 0 2px 12px rgba(8, 30, 44, .55);
}

.hero-subtitle {
  max-width: 620px;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(8, 30, 44, .5);
}

.hero-path { margin: 0; text-shadow: 0 1px 8px rgba(8, 30, 44, .5); }
.hero-path li,
.hero-path li a { color: rgba(255, 255, 255, .85); }
.hero-path li a:hover { color: #fff; }
.hero-path li.active { color: #fff; font-weight: 600; }

@media (max-width: 767px) {
  .hero-title { font-size: 28px; }
  .hero-subtitle { font-size: 14px; }
}

/* ------------------------------------------------------------
   6. Judul bagian  (komponen <x-section-head>)
   ------------------------------------------------------------ */
.sec-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.sec-head.is-left { margin-left: 0; text-align: left; }

.sec-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 16px;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-primary-tint);
  color: var(--tp-primary-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.sec-title {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 700;
  color: var(--tp-ink);
  letter-spacing: -.5px;
}

.sec-subtitle { margin: 0; color: var(--tp-body); font-size: 15px; line-height: 1.75; }

@media (max-width: 575px) {
  .sec-title { font-size: 26px; }
}

/* Kartu bawaan template dibuat lebih minimalis. */
.box-minimal,
.post-classic,
.thumbnail-classic,
.card {
  border-radius: var(--tp-radius-lg);
  overflow: hidden;
}

/* ------------------------------------------------------------
   7. Hierarki latar: halaman bernapas, kartu menonjol
   ------------------------------------------------------------
   Sebelumnya seluruh halaman rata putih, sehingga tidak ada yang
   membedakan "alas" dari "isi" — semua elemen terasa sama datar.

   Susunannya sekarang tiga lapis:
     halaman  -> #F8FAFC  (--tp-surface)
     kartu    -> #FFFFFF  + bayangan halus
     aksen    -> hijau, dipakai hemat sebagai penekan

   Biru brand #2a93c9 sengaja TIDAK diganti: warna itu selaras
   dengan logo, dan tertulis 197 kali di style.css sehingga
   penggantiannya akan menghasilkan tampilan belang.
   ------------------------------------------------------------ */

:root {
  --tp-accent: #16a34a;
  --tp-accent-tint: #e9f7ef;
}

body {
  background-color: var(--tp-surface);
}

/* Section bawaan template memaksa putih. Dibuat transparan agar warna
   halaman terlihat; yang putih cukup kartunya saja. */
section.bg-default,
.section.bg-default {
  background: transparent;
}

/* Kartu: satu-satunya elemen yang putih, jadi mata langsung tertuju ke sana. */
.box-minimal,
.post-modern-classic,
.thumbnail-josip,
.quote-classic,
.card {
  background: #fff;
  border-radius: var(--tp-radius-lg);
  box-shadow: var(--tp-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}

.box-minimal:hover,
.post-modern-classic:hover,
.thumbnail-josip:hover {
  box-shadow: var(--tp-shadow);
  transform: translateY(-3px);
}

/* Garis pemisah ikut dilembutkan supaya tidak memotong terlalu keras. */
hr,
.divider {
  border-color: var(--tp-line);
}

/* --- Aksen hijau, dipakai hemat --- */
.text-accent-green { color: var(--tp-accent); }

.badge-accent {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-accent-tint);
  color: var(--tp-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   8. Footer empat kolom
   ------------------------------------------------------------
   Sebelumnya tiga kolom dengan banyak ruang kosong di kanan.
   Sekarang: identitas | jelajahi | kontak & jam | buletin & peta.
   ------------------------------------------------------------ */
.tp-footer {
  padding-top: 64px;
  padding-bottom: 0;
}

.tp-footer-grid { row-gap: 40px; }

.tp-footer-brand img {
  max-width: 190px;
  width: auto;
  height: auto;
}

.tp-footer-tagline {
  margin: 18px 0 20px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.7;
}

.tp-footer-head {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.tp-footer-head-2 { margin-top: 32px; }

/* --- Daftar tautan --- */
.tp-footer-links,
.tp-footer-kontak,
.tp-footer-jam {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-footer-links li { margin-bottom: 9px; }

.tp-footer-links a {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  transition: color .2s ease, padding-left .2s ease;
}

.tp-footer-links a:hover {
  color: #fff;
  padding-left: 5px;
}

/* --- Kontak --- */
.tp-footer-kontak li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
  font-size: 14px;
  line-height: 1.6;
}

.tp-footer-kontak img {
  flex: 0 0 auto;
  width: 17px;
  margin-top: 3px;
}

.tp-footer-kontak a { color: rgba(255, 255, 255, .78); }
.tp-footer-kontak a:hover { color: #fff; }
.tp-footer-kontak small { color: rgba(255, 255, 255, .55); }

/* --- Jam operasional --- */
.tp-footer-jam li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
  font-size: 14px;
}

.tp-footer-jam li:last-child { border-bottom: 0; }
.tp-footer-jam span { color: rgba(255, 255, 255, .72); }
.tp-footer-jam b { color: #fff; font-weight: 600; white-space: nowrap; }

/* --- Media sosial --- */
.tp-footer-social { margin: 0; }
.tp-footer-social li { margin-right: 6px; }

/* --- Buletin --- */
.tp-footer-form { margin-bottom: 4px; }

/* --- Peta --- */
.tp-footer-map {
  border-radius: var(--tp-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  line-height: 0;
}

.tp-footer-map iframe {
  width: 100%;
  height: 150px;
  border: 0;
  display: block;
  /* Peta berwarna terang mencolok di footer gelap; sedikit diredam. */
  filter: grayscale(.35) contrast(.95);
}

/* --- Baris hak cipta --- */
.tp-footer-bawah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 48px;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
}

.tp-footer-bawah,
.tp-footer-bawah a { color: rgba(255, 255, 255, .62); }
.tp-footer-bawah a:hover { color: #fff; }

@media (max-width: 767px) {
  .tp-footer { padding-top: 48px; text-align: left; }
  .tp-footer-bawah { justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------
   9. Radius seragam
   ------------------------------------------------------------
   style.css bawaan memakai 2, 3, 4, 5, 6, 10, 15, 20, 23, 29 px
   bercampur. Di sini disatukan ke dua ukuran saja:
     12px  -> elemen kecil & sedang (tombol, input, gambar, badge)
     16px  -> wadah besar (kartu, panel, blok media)

   Ditulis per komponen, BUKAN sebagai aturan menyeluruh, karena
   selektor global akan ikut merusak elemen yang memang harus
   bundar (.icon-circle, avatar) atau berbentuk pil.
   ------------------------------------------------------------ */
.form-input,
.form-control,
.form-wrap input,
.form-wrap textarea,
.form-wrap select,
.input-group .form-input,
.badge,
.tag,
img.rounded,
.thumbnail-classic img,
.post-media img {
  border-radius: var(--tp-radius);           /* 12px */
}

.box-minimal,
.box-icon-classic,
.post-classic,
.post-modern,
.post-modern-classic,
.thumbnail-classic,
.thumbnail-josip,
.thumbnail-big,
.quote-classic,
.card,
.panel,
.modal-content,
.rd-navbar-dropdown,
.rd-menu {
  border-radius: var(--tp-radius-lg);        /* 16px */
}

/* Elemen yang memang harus tetap bundar/pil — ditegaskan agar tidak
   ikut tertimpa aturan di atas bila kelasnya bertumpuk. */
.icon-circle,
.avatar,
.rounded-circle {
  border-radius: 50% !important;
}

/* ------------------------------------------------------------
   10. Kedalaman kartu
   ------------------------------------------------------------ */
.box-minimal,
.post-modern-classic,
.thumbnail-josip,
.quote-classic,
.card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.box-minimal:hover,
.post-modern-classic:hover,
.thumbnail-josip:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
  transform: translateY(-4px);
}

/* ------------------------------------------------------------
   11. Micro-interaction
   ------------------------------------------------------------ */

/* --- Scroll halus antar anchor --- */
html { scroll-behavior: smooth; }

/* --- Muncul perlahan saat masuk layar ---
   Kelas .tp-reveal HANYA dipasang oleh JavaScript. Tanpa JS, atau
   bila pengguna menonaktifkan animasi, konten tampil normal apa
   adanya — tidak ada risiko halaman kosong. */
.tp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.tp-reveal.tp-reveal-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .tp-reveal,
  .tp-reveal.tp-reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .box-minimal:hover,
  .post-modern-classic:hover,
  .thumbnail-josip:hover {
    transform: none;
  }
}