/* ------------------------------------------------------------------
   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));
}