/* =========================================================================
   Typing Scenes - banner slider beranda

   Berkas terpisah, dan itu disengaja. typingscenes.css sudah dua kali
   kehilangan blok karena disusun ulang dari salinan lama. Aturan baru yang
   hanya dipakai satu halaman ditaruh di berkasnya sendiri dan dimuat lewat
   section styles, jadi berkas besar itu tidak perlu dibuka sama sekali.

   Token warna diwarisi dari :root milik typingscenes.css, yang selalu
   dimuat lebih dulu oleh layout.
   ========================================================================= */

.ts-bnr {
  position: relative;
  background: var(--ts-ink);
}

.ts-bnr__swiper {
  width: 100%;
  overflow: hidden;
}

/* ---- Bentuk 1: banner gambar, ditampilkan utuh ------------------------- */

/*
 * Gambar dirender sebagai elemen biasa, bukan latar belakang.
 *
 * Sebelumnya slide diberi tinggi tetap dan gambarnya object-fit: cover,
 * yang berarti dipotong. Itu benar untuk foto latar yang teksnya ditumpuk
 * dari HTML, dan salah untuk banner yang teksnya sudah didesain di dalam
 * gambarnya: bagian yang terpotong adalah bagian desain yang hilang. Di
 * layar sempit potongannya sampai 60% lebar.
 *
 * Dengan height auto, tinggi slide mengikuti rasio gambar, jadi tidak ada
 * sisi yang hilang di lebar layar mana pun. Harganya: seluruh banner harus
 * dibuat dengan rasio yang sama, kalau tidak tinggi slidernya berubah tiap
 * berpindah.
 */
.ts-bnr__full {
  display: block;
  width: 100%;
  height: auto;
}

.ts-bnr__link {
  display: block;
  line-height: 0;
}

/* Slide harus boleh setinggi isinya, bukan setinggi slide tertinggi. */
.ts-bnr .swiper-slide {
  height: auto;
}

/* ---- Bentuk 2: banner teks, dipakai slide tanpa gambar ----------------- */

.ts-bnr__slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 40vw, 560px);
  overflow: hidden;
}

/*
 * Lapisan peneduh.
 *
 * Hanya dipakai bentuk teks. Pada banner bergambar, lapisan ini tidak
 * dirender sama sekali: menggelapkan banner yang sudah didesain hanya
 * membuat warnanya meleset dari yang dilihat perancangnya.
 */
.ts-bnr__shade {
  position: absolute;
  inset: 0;
}

.ts-bnr__slide--dark .ts-bnr__shade {
  background:
    linear-gradient(90deg, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .72) 42%, rgba(11, 18, 32, .18) 78%, rgba(11, 18, 32, .05) 100%),
    linear-gradient(0deg, rgba(11, 18, 32, .35), transparent 55%);
}

.ts-bnr__slide--light .ts-bnr__shade {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 44%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .04) 100%);
}

/* Slide tanpa gambar tetap harus punya latar, bukan kotak hitam polos. */
.ts-bnr__slide--dark {
  background:
    radial-gradient(60% 90% at 8% 0%, rgba(22, 104, 255, .38), transparent 62%),
    radial-gradient(52% 78% at 92% 20%, rgba(255, 155, 18, .3), transparent 64%),
    var(--ts-ink);
}

.ts-bnr__slide--light {
  background:
    radial-gradient(58% 88% at 8% 0%, rgba(22, 104, 255, .16), transparent 62%),
    radial-gradient(50% 76% at 92% 18%, rgba(255, 155, 18, .18), transparent 64%),
    var(--ts-paper);
}

.ts-bnr__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 5vw, 72px);
}

.ts-bnr__box {
  max-width: 46rem;
}

.ts-bnr__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

.ts-bnr__eyebrow::before {
  content: "//";
  color: var(--ts-amber);
}

.ts-bnr__title {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-style: italic;
  line-height: 1.04;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.ts-bnr__body {
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 0 1.6rem;
}

.ts-bnr__slide--dark .ts-bnr__eyebrow { color: var(--ts-cyan); }
.ts-bnr__slide--dark .ts-bnr__title   { color: #fff; }
.ts-bnr__slide--dark .ts-bnr__body    { color: rgba(255, 255, 255, .82); }

.ts-bnr__slide--light .ts-bnr__eyebrow { color: var(--ts-blue-dark); }
.ts-bnr__slide--light .ts-bnr__title   { color: var(--ts-ink); }
.ts-bnr__slide--light .ts-bnr__body    { color: var(--ts-slate); }

.ts-bnr__cta {
  --ts-cut: 10px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ts-ink);
  background: var(--ts-hot);
  clip-path: polygon(var(--ts-cut) 0, 100% 0, 100% calc(100% - var(--ts-cut)),
      calc(100% - var(--ts-cut)) 100%, 0 100%, 0 var(--ts-cut));
  transition: transform .18s ease, filter .18s ease;
}

.ts-bnr__cta:hover {
  color: var(--ts-ink);
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* ---- Kendali ------------------------------------------------------------ */

.ts-bnr__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 18, 32, .45);
  backdrop-filter: blur(6px);
  transition: background .18s ease;
}

.ts-bnr__nav:hover { background: rgba(11, 18, 32, .75); }
.ts-bnr__nav--prev { left: clamp(10px, 2vw, 26px); }
.ts-bnr__nav--next { right: clamp(10px, 2vw, 26px); }

/*
 * Kendali disembunyikan saat hanya ada satu slide.
 * Swiper memasang kelas ini sendiri lewat opsi disabledClass.
 */
.ts-bnr__nav.is-off { display: none; }

.ts-bnr .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 1.8vw, 24px);
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: .5rem;
}

.ts-bnr .swiper-pagination-bullet {
  width: 26px;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  transition: background .18s ease, width .18s ease;
}

.ts-bnr .swiper-pagination-bullet-active {
  width: 40px;
  background: var(--ts-gold);
}

@media (max-width: 767.98px) {
  .ts-bnr__slide { min-height: 380px; }
  .ts-bnr__nav   { display: none; }

  /* Di layar sempit gradasi dari samping tidak cukup, jadi diratakan. */
  .ts-bnr__slide--dark .ts-bnr__shade  { background: rgba(11, 18, 32, .78); }
  .ts-bnr__slide--light .ts-bnr__shade { background: rgba(255, 255, 255, .86); }

  /*
   * Banner gambar di layar sempit menjadi sangat pendek, sekitar 150 piksel
   * untuk rasio 2,5:1. Titik penanda dikecilkan supaya tidak memakan bagian
   * bawah desain.
   */
  .ts-bnr .swiper-pagination { bottom: 8px; gap: .35rem; }
  .ts-bnr .swiper-pagination-bullet { width: 16px; height: 3px; }
  .ts-bnr .swiper-pagination-bullet-active { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-bnr__cta { transition: none; }
  .ts-bnr__cta:hover { transform: none; }
}