/* ------------------------------------------------------------------
   Tambahan kecil di atas main.css indoav.com.
   HANYA memakai design token yang sudah ada (--card, --border,
   --radius, --muted-foreground) supaya modal & toast terasa satu
   bahasa dengan tema, dan main.css tidak perlu diedit sama sekali.
   ------------------------------------------------------------------ */

/* ---- modal preview gambar (perilaku model lama) ---- */
.iav-modal{
  padding:0;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background-color:hsl(var(--card));
  color:hsl(var(--card-foreground));
  width:calc(100% - 2rem);
  max-width:44rem;
  box-shadow:0 20px 25px -5px rgb(0 0 0 / .25), 0 8px 10px -6px rgb(0 0 0 / .25);
}
.iav-modal::backdrop{background:rgb(0 0 0 / .65)}
.iav-modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  padding:.875rem 1rem;
  border-bottom:1px solid hsl(var(--border));
}
.iav-modal__title{
  margin:0;font-size:1rem;line-height:1.35;font-weight:800;
}
.iav-modal__x{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border:none;background:transparent;border-radius:calc(var(--radius) - 2px);
  color:hsl(var(--muted-foreground));font-size:1.25rem;line-height:1;
}
.iav-modal__x:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.iav-modal__body{padding:1rem;max-height:74vh;overflow-y:auto}
.iav-modal__thumb{
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;
  border-radius:calc(var(--radius) - 2px);
  background-color:hsl(var(--muted));
}
.iav-modal__thumb img{height:100%;width:100%;object-fit:cover;display:block}
.iav-modal__meta{
  margin:.75rem 0 0;font-size:.8125rem;color:hsl(var(--muted-foreground));
}
.iav-modal__stats{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;
}
.iav-modal__stat{
  display:inline-flex;align-items:center;gap:.25rem;
  border:1px solid hsl(var(--border));border-radius:9999px;
  padding:.125rem .625rem;font-size:.75rem;line-height:1rem;
  color:hsl(var(--muted-foreground));
}
.iav-modal__stat b{color:hsl(var(--foreground));font-weight:700}
.iav-modal__desc{
  margin:.75rem 0 0;font-size:.875rem;line-height:1.6;
  color:hsl(var(--muted-foreground));
}
.iav-modal__foot{
  display:flex;gap:.5rem;justify-content:flex-end;
  padding:.875rem 1rem;border-top:1px solid hsl(var(--border));
}

/* ---- toast ---- */
.iav-toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,.5rem);
  z-index:9999;
  background-color:hsl(var(--foreground));color:hsl(var(--background));
  padding:.6875rem 1.1875rem;border-radius:calc(var(--radius) - 2px);
  font-size:.8125rem;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.iav-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* kartu dipicu JS: jaga agar tetap terasa bisa diklik */
.video-card__link{cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .iav-toast{transition:none}
}


/* ---- halaman tonton (/video/<slug>/) ----
   Token yang sama dengan main.css, jadi halaman detail terasa satu situs
   dengan beranda tanpa mengedit main.css. */
.iav-crumb{
  margin-bottom:.75rem;font-size:.8125rem;color:hsl(var(--muted-foreground));
}
.iav-crumb a{color:inherit}
.iav-crumb a:hover{color:hsl(var(--primary))}
.iav-crumb span{margin:0 .35rem}

.iav-player{
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;
  border-radius:var(--radius);
  background:#000;
  border:1px solid hsl(var(--border));
}
.iav-player iframe,.iav-player video{
  display:block;width:100%;height:100%;border:0;
}
.iav-player__none{
  display:flex;align-items:center;justify-content:center;height:100%;
  padding:1.5rem;text-align:center;
  color:hsl(var(--muted-foreground));font-size:.875rem;
}

.iav-servers{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.625rem}
.iav-srv{
  display:inline-flex;align-items:center;height:2.125rem;padding:0 .875rem;
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);
  background-color:hsl(var(--card));
  color:hsl(var(--muted-foreground));
  font-size:.8125rem;font-weight:700;cursor:pointer;
  transition:color .15s,border-color .15s,background-color .15s;
}
.iav-srv:hover{color:hsl(var(--foreground));background-color:hsl(var(--accent))}
.iav-srv:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}
.iav-srv.is-on{
  border-color:hsl(var(--primary));
  background-color:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
}

.iav-vmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:.8125rem;color:hsl(var(--muted-foreground));
}
.iav-vdesc{
  margin-top:.75rem;font-size:.875rem;line-height:1.6;
  color:hsl(var(--muted-foreground));
}

/* === pratinjau trailer === */
.video-card__thumbnail{position:relative;overflow:hidden}

/* Lapisan pratinjau menimpa gambar sampul, memakai kotak yang sama persis
   supaya tidak ada pergeseran tata letak saat muncul atau hilang. */
.iav-preview{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity .22s ease;
  pointer-events:none;z-index:2;background:#000;
}
.iav-preview.is-on{opacity:1}

/* Ikon play disembunyikan saat pratinjau berjalan: gambarnya sudah bergerak,
   tanda play di atasnya hanya menutupi isi. */
.video-card.iav-playing .video-card__overlay{opacity:0;transition:opacity .2s ease}

@media (prefers-reduced-motion: reduce){
  .iav-preview{transition:none}
}

/* === tata letak halaman tayang: dua kolom + slot iklan === */

/* Pemutar dibatasi tinggi, bukan dipaksa 16/9.
 *
 * Sebelumnya .iav-player memakai aspect-ratio:16/9 dengan lebar penuh, jadi di
 * layar 1280px kotaknya menjadi ~1246x700 — memenuhi hampir seluruh layar. Untuk
 * sumber potret (banyak video di katalog ini 404x720) hasilnya makin buruk:
 * kotak lebar dengan pita hitam kiri-kanan yang sangat besar.
 *
 * max-height mengikat sisi yang selama ini bebas. Nilai 78vh dipilih supaya
 * judul dan meta masih terlihat tanpa menggulir pada laptop 900px.
 */
.iav-player{
  aspect-ratio:16/9;
  max-height:78vh;
  margin-inline:auto;
}
/* Ikat anak ke kotaknya. Tanpa inset:0 eksplisit, height:100% pada video di
   dalam kotak yang tingginya dibatasi bisa menghitung ulang ke rasio sumber
   dan meluber — overflow:hidden lalu memotongnya tanpa pesan galat apa pun. */
.iav-player iframe,.iav-player video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}

/* Kerangka dua kolom: konten + rel iklan kanan. */
.iav-watch{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
  align-items:start;
}
@media (min-width:1024px){
  /* Kolom kanan dipatok 300px — ukuran banner baku, supaya materi iklan tidak
     perlu diskalakan. Kolom kiri memakai minmax(0,1fr) agar boleh menyusut;
     1fr saja menolak mengecil di bawah konten terlebarnya dan membuat grid
     meluber ke kanan.

     Hanya berlaku bila ada iklan: tanpa penanda --ads, memesan kolom kedua
     menyisakan lubang 300px di samping konten pada situs yang slotnya kosong. */
  .iav-watch--ads{
    grid-template-columns:minmax(0,1fr) 300px;
  }
}

.iav-watch__main{min-width:0}

.iav-ads{
  display:flex;flex-direction:column;gap:1rem;
}
@media (min-width:1024px){
  /* Rel mengikuti gulir supaya slot kedua tidak hilang di layar pendek. */
  .iav-ads{position:sticky;top:1rem}
}

.iav-ad{
  display:block;
  width:300px;max-width:100%;
  margin-inline:auto;
  border-radius:var(--radius);
  overflow:hidden;
}
/* Ruang dipesan lebih dulu: memberi tinggi pada slot mencegah konten di
   bawahnya melompat ketika materi iklan selesai dimuat. */
.iav-ad--300x250{min-height:250px}
.iav-ad img,.iav-ad iframe{display:block;width:100%;height:auto;border:0}

/* Penanda slot kosong hanya untuk operator; pengunjung tidak melihat apa pun
   karena slot tanpa isi tidak pernah dicetak oleh video.php. */
.iav-ad--empty{
  display:flex;align-items:center;justify-content:center;
  min-height:250px;
  border:1px dashed hsl(var(--border));
  color:hsl(var(--muted-foreground));
  font-size:.8125rem;
}


/* === Jumlah kolom kartu ===
   main.css melompat dari 2 kolom langsung ke 4, sehingga di layar laptop
   (1024-1399px) kartu terbagi empat dan thumbnail jadi sempit. Tangga
   kolomnya dilengkapi: 3 kolom untuk laptop, 4 hanya ketika lebar halaman
   benar-benar memungkinkan (>=1400px, sama dengan batas .container).

   Tanpa !important: berkas ini dimuat SETELAH main.css dengan kekhususan
   yang sama, jadi aturan terakhir yang menang. */
@media (min-width: 1024px) {
  .videos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sengaja TIDAK ada tingkat 4 kolom. Lebar kartu tetap wajar di layar besar
   karena .container sudah dibatasi 1400px, sehingga 3 kolom pada layar 1920px
   menghasilkan kartu ~445px dan bukan selebar layar. */