/*
 * megamenu.css
 *
 * Berkas TERPISAH, bukan tambahan di typingscenes.css. Berkas itu sudah dua
 * kali kehilangan blok karena disusun ulang dari salinan lama, dan seluruh
 * aturan di sini hanya dipakai satu komponen.
 *
 * Dimuat di layouts/main.php, bukan per halaman, karena header ada di setiap
 * halaman.
 */

/* Bilah menu di dalam .ts-wrap */
.ts-mega__bar {
  align-items: center;
  gap: 1.25rem;
  margin-left: .5rem;
}

/*
 * GARIS BIRU DILUCUTI DARI SELURUH BARIS DI BILAH INI.
 *
 * .ts-nav__home di typingscenes.css memasang border-bottom biru TANPA
 * SYARAT. Selama hanya ada satu tautan Beranda, itu terlihat seperti penanda
 * halaman aktif, padahal sebenarnya hiasan tetap: Beranda tetap bergaris
 * biru walau pengunjung sedang membuka katalog.
 *
 * Sekarang bilahnya berisi banyak baris, jadi garisnya harus berarti sesuatu.
 * Dinetralkan di sini lalu dipasang kembali hanya pada .is-current, yang
 * ditentukan di server. Berkas typingscenes.css sendiri tidak disentuh.
 */
.ts-mega__bar .ts-nav__home {
  border-bottom-color: transparent;
  color: var(--ts-slate);

  /*
   * Bobot 600, bukan 500 atau 400.
   *
   * Chakra Petch dimuat hanya pada bobot 600 dan 700, lihat tautan Google
   * Fonts di layouts/main.php. Meminta bobot yang tidak dimuat membuat
   * peramban mengarangnya sendiri dengan menipiskan bentuk aslinya, dan
   * hasilnya terlihat kabur di layar biasa. Jadi yang tidak aktif memakai
   * 600 dan yang aktif memakai 700, dua bobot yang benar-benar tersedia.
   */
  font-weight: 600;

  /*
   * font-weight TIDAK diikutkan ke transition. Menganimasikan bobot huruf
   * memaksa peramban mengukur ulang teksnya di setiap bingkai, dan baris
   * menu di sebelahnya ikut bergeser selama animasi berjalan.
   */
  transition: border-color .16s ease, color .16s ease;
}

/*
 * Baris yang sedang dibuka: lebih tebal DAN lebih gelap.
 *
 * Bobot saja terlalu samar pada huruf berukuran kecil dan huruf besar
 * semua, dan warna saja hilang bagi pembaca yang sulit membedakan warna.
 * Ditambah garis di bawahnya, ada tiga penanda yang saling menopang.
 */
.ts-mega__bar .ts-nav__home.is-current {
  border-bottom-color: var(--ts-blue);
  color: var(--ts-ink);
  font-weight: 700;
}

/*
 * Melayang hanya mengubah warna, tidak mengubah bobot.
 *
 * Kalau bobotnya ikut berubah saat kursor melintas, lebar teksnya berubah
 * dan seluruh baris menu di sebelahnya bergeser. Itu terasa seperti
 * antarmuka yang tidak stabil, dan pada bilah yang berisi banyak baris,
 * pergeseran itu bisa menarik baris lain menjauh dari kursor tepat saat
 * hendak diklik.
 */
.ts-mega__bar .ts-nav__home:hover {
  color: var(--ts-ink);
  border-bottom-color: var(--ts-line);
}

/*
 * Baris aktif mempertahankan garis birunya saat dilewati kursor. Tanpa ini,
 * melintasi baris yang sedang dibuka akan membuatnya terlihat seperti
 * kehilangan status aktifnya.
 */
.ts-mega__bar .ts-nav__home.is-current:hover {
  border-bottom-color: var(--ts-blue);
}

/*
 * Kartu di dalam panel yang menunjuk halaman yang sedang dibuka.
 *
 * Ditandai lebih tegas daripada sekadar bingkai biru, karena panel ini
 * muncul di atas halaman yang isinya sudah dilihat pengunjung dan penanda
 * yang samar hanya akan terlewat.
 */
.ts-mega__card.is-current {
  border-color: var(--ts-blue);
  background: #fff;
  box-shadow: inset 3px 0 0 var(--ts-blue);
}

/* Baris aktif di laci mobile */
.ts-drawer a.is-current,
.ts-drawer__menu a.is-current {
  color: var(--ts-blue);
  font-weight: 700;
}

/*
 * Pemicu panel adalah <button>, jadi seluruh gaya bawaan tombol harus
 * dilucuti dulu. Tanpa ini ia akan tampil berlatar abu dengan bingkai,
 * sama sekali tidak seperti tautan di sebelahnya.
 */
.ts-mega__trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
}

.ts-mega__trigger i {
  font-size: .75rem;
  transition: transform .18s ease;
}

/*
 * Panel yang sedang terbuka juga bergaris, tapi memakai warna yang lebih
 * redup daripada penanda halaman aktif. Kalau keduanya dibuat sama, membuka
 * panel akan terlihat seperti sudah berpindah halaman padahal belum.
 */
.ts-mega__bar .ts-mega__trigger[aria-expanded="true"] {
  border-bottom-color: var(--ts-slate);
}

.ts-mega__bar .ts-mega__trigger[aria-expanded="true"].is-current {
  border-bottom-color: var(--ts-blue);
}

.ts-mega__trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/*
 * Panel selebar layar.
 *
 * left dan right nol, bukan width 100 persen, supaya lebarnya mengikuti
 * elemen acuan apa pun yang dipakai dan tidak ikut menghitung bilah gulir.
 */
.ts-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1029;
  background: #fff;
  border-bottom: 1px solid var(--ts-line);
  box-shadow: 0 18px 40px rgba(11, 18, 32, .12);
  padding: 1.6rem 0 1.9rem;
  animation: tsMegaMasuk .16s ease-out;
}

@keyframes tsMegaMasuk {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/*
 * Yang lebih memilih gerak berkurang tetap mendapat panelnya, tanpa
 * animasi. Menghapus animasinya tidak menghilangkan fungsinya.
 */
@media (prefers-reduced-motion: reduce) {
  .ts-mega {
    animation: none;
  }

  .ts-mega__trigger i {
    transition: none;
  }
}

.ts-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem 1.5rem;
}

.ts-mega__col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ts-mega__title {
  margin: 0 0 .2rem;
  font-family: "Chakra Petch", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ts-slate);
}

.ts-mega__card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--ts-line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ts-ink);
  background: var(--ts-mist);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ts-mega__card:hover,
.ts-mega__card:focus-visible {
  border-color: var(--ts-blue);
  background: #fff;
  transform: translateY(-2px);
  color: var(--ts-ink);
}

@media (prefers-reduced-motion: reduce) {

  .ts-mega__card:hover,
  .ts-mega__card:focus-visible {
    transform: none;
  }
}

.ts-mega__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--ts-line);
  color: var(--ts-blue);
  font-size: 1.15rem;
}

.ts-mega__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.ts-mega__text b {
  font-family: "Chakra Petch", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.ts-mega__text span {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ts-slate);
}

/*
 * Panah dorong ke kanan dengan margin auto, bukan dengan lebar tetap pada
 * teks. Kalau lebarnya dikunci, deskripsi yang panjang akan mendorong
 * panahnya keluar kartu.
 */
.ts-mega__go {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--ts-slate);
}

.ts-mega__card:hover .ts-mega__go {
  color: var(--ts-blue);
}

/* Label kelompok di laci mobile */
.ts-drawer__label {
  display: block;
  margin: .6rem 0 .1rem;
  font-family: "Chakra Petch", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-slate);
}

/*
 * Di bawah 992px bilah dan panelnya tidak dipakai sama sekali, isinya sudah
 * diratakan ke dalam laci. Disembunyikan lewat display none, bukan lewat
 * hidden pada elemennya, supaya panel yang kebetulan tertinggal terbuka saat
 * jendela diperkecil tidak menutupi halaman.
 */
@media (max-width: 991.98px) {

  .ts-mega,
  .ts-mega__bar {
    display: none !important;
  }
}

/*
 * Ikon sosial berupa SVG khusus.
 *
 * Ukurannya dipaksa mengikuti ukuran huruf induknya, sama seperti ikon
 * Bootstrap di sebelahnya. Tanpa ini, SVG yang punya width dan height sendiri
 * akan tampil jauh lebih besar dan merusak barisnya, dan itu terjadi pada
 * hampir semua SVG yang diambil dari press kit.
 */
.ts-social__svg {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

.ts-social__svg svg {
  width: 100%;
  height: 100%;

  /*
   * currentColor supaya ikon mengikuti warna teks footer. SVG press kit
   * biasanya membawa warna merek yang tidak terbaca di latar navy.
   */
  fill: currentColor;
}

/*
 * Kartu paket saat pemesanan sedang ditutup.
 *
 * Daftarnya tetap ditampilkan supaya pengunjung dan peninjau penyedia bisa
 * melihat katalog beserta harganya, tapi tidak boleh TERLIHAT bisa diklik.
 * .ts-option bawaan memakai cursor pointer dan efek terangkat saat disentuh
 * kursor, dan keduanya adalah janji bahwa ada sesuatu yang terjadi kalau
 * ditekan. Janji yang tidak ditepati lebih membingungkan daripada kartu yang
 * sejak awal terlihat pasif.
 *
 * Ditaruh di megamenu.css, bukan catalog.css, karena berkas itu tidak boleh
 * disentuh: sudah dua kali kehilangan blok saat disusun ulang dari salinan
 * lama.
 */
.ts-option--static {
  cursor: default;
}

.ts-option--static .ts-option__box {
  background: var(--ts-mist);
  opacity: .75;
}

/*
 * Efek angkat dinetralkan dengan menargetkan aturan yang sama persis,
 * bukan dengan !important. Selektor ini lebih spesifik karena memuat dua
 * kelas, jadi ia menang tanpa perlu memaksa.
 */
.ts-option--static:hover .ts-option__box {
  border-color: var(--ts-line);
  transform: none;
}