/* ============================================================
   style.css — yt4downloader.net
   Desain: profesional, minimalis, aksen merah (sesuai logo).
   Tema diatur via CSS variables (lihat :root & .dark) supaya
   konsisten di HTML maupun markup yang dibuat oleh JS.
   ============================================================ */

:root {
  --brand: 225 29 42;        /* #E11D2A — merah brand */
  --brand-700: 185 28 34;    /* hover    */
  --bg: 250 250 251;         /* latar    */
  --surface: 255 255 255;    /* kartu    */
  --surface-2: 244 244 245;  /* nested   */
  --border: 228 228 231;     /* garis    */
  --text: 24 24 27;          /* teks     */
  --muted: 113 113 122;      /* teks redup */
  --shadow: 220 38 38;       /* basis shadow halus */
}

.dark {
  --bg: 9 9 11;
  --surface: 24 24 27;
  --surface-2: 32 32 36;
  --border: 39 39 42;
  --text: 244 244 245;
  --muted: 161 161 170;
  --shadow: 0 0 0;
}

/* ---------- Dasar ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: rgb(var(--bg));
  color: rgb(var(--text));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
}

/* Latar belakang: satu glow merah sangat halus di atas (tidak ramai) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60rem 26rem at 50% -10rem, rgb(var(--brand) / 0.07), transparent 70%);
}
.dark body::before {
  background: radial-gradient(60rem 26rem at 50% -10rem, rgb(var(--brand) / 0.12), transparent 70%);
}

/* ---------- Header sticky ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgb(var(--surface) / 0.8);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgb(var(--border));
}

/* ---------- Permukaan / kartu ---------- */
.surface {
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
}
.surface-2 { background-color: rgb(var(--surface-2)); }

/* ---------- Teks ---------- */
.text-muted { color: rgb(var(--muted)); }
.text-brand { color: rgb(var(--brand)); }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease, color .15s ease;
  cursor: pointer;
}
.btn-primary { background-color: rgb(var(--brand)); color: #fff; border: 1px solid transparent; }
.btn-primary:hover:not(:disabled) { background-color: rgb(var(--brand-700)); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary { background-color: rgb(var(--surface)); border: 1px solid rgb(var(--border)); color: rgb(var(--text)); }
.btn-secondary:hover:not(:disabled) { background-color: rgb(var(--surface-2)); }

/* Tautan navigasi */
.nav-link {
  color: rgb(var(--muted));
  border-radius: .5rem;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: rgb(var(--text)); background-color: rgb(var(--surface-2)); }

/* Tombol ikon (mis. toggle tema) */
.icon-btn {
  display: grid;
  place-items: center;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: .625rem;
  transition: background-color .15s ease;
}
.icon-btn:hover { background-color: rgb(var(--surface-2)); }

/* ---------- Tab / segmented control ---------- */
.tab-btn {
  color: rgb(var(--muted));
  border-radius: 0.625rem;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tab-btn:hover { color: rgb(var(--text)); }
.tab-btn.tab-active {
  color: rgb(var(--text));
  background-color: rgb(var(--surface));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.dark .tab-btn.tab-active { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }

/* ---------- Ad slots (kosong, siap AdSense/Adsterra) ----------
   Mereservasi ruang agar tidak terjadi CLS saat iklan dimuat.
   Placeholder bertuliskan "Ruang Iklan" hanya penanda saat belum diisi. */
.ad-slot {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed rgb(var(--border));
  border-radius: 0.75rem;
  background-color: rgb(var(--surface-2));
  color: rgb(var(--muted));
}
.ad-slot .ad-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.ad-horizontal { min-height: 100px; max-width: 728px; } /* responsive / leaderboard */
.ad-rectangle  { min-height: 280px; max-width: 336px; } /* medium rectangle */

/* Setelah iklan asli dipasang, tambahkan class "is-filled" pada slot agar
   tampilan placeholder (border & latar) hilang dan ruang mengikuti iklan. */
.ad-slot.is-filled { border: 0; background-color: transparent; min-height: 0; }
.ad-slot.is-filled .ad-label { display: none; }

/* Untuk menyembunyikan SEMUA slot yang masih kosong sekaligus,
   tambahkan class "hide-empty-ads" pada <body>. */
body.hide-empty-ads .ad-slot:not(.is-filled) { display: none; }

/* ---------- FAQ accordion ---------- */
.faq-q { cursor: pointer; }
.faq-icon { transition: transform .2s ease; }
.faq-item.faq-open .faq-icon { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

/* ---------- Kotak ikon kecil (lingkaran/rounded) ---------- */
.ic-brand { background-color: rgb(var(--brand) / 0.10); color: rgb(var(--brand)); }
.ic-muted { background-color: rgb(var(--surface-2)); color: rgb(var(--muted)); }

/* Badge kecil (mis. kualitas pada riwayat) */
.badge {
  background-color: rgb(var(--brand) / 0.10);
  color: rgb(var(--brand));
  font-weight: 700;
}

/* ---------- Search bar focus ---------- */
.search-wrap { transition: border-color .15s ease, box-shadow .15s ease; }
.search-wrap:focus-within {
  border-color: rgb(var(--brand) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--brand) / 0.12);
}

/* ---------- Kartu kualitas (selectable) ---------- */
.q-card {
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border));
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
  cursor: pointer;
}
.q-card:hover { border-color: rgb(var(--brand) / 0.5); transform: translateY(-1px); }
.q-card.selected { border-color: rgb(var(--brand)); background-color: rgb(var(--brand) / 0.07); }
.q-card .q-check { opacity: 0; transition: opacity .15s ease; }
.q-card.selected .q-check { opacity: 1; }

/* ---------- Progress bar (solid, satu warna) ---------- */
.progress-track {
  background-color: rgb(var(--border));
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background-color: rgb(var(--brand));
  border-radius: 9999px;
  transition: width .3s ease;
}
/* Indeterminate: garis bergerak halus saat ukuran belum diketahui */
.progress-bar.indeterminate {
  width: 35% !important;
  animation: indet 1.15s ease-in-out infinite;
}
@keyframes indet {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

/* ---------- Spinner ---------- */
.spinner {
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: spin .6s linear infinite;
  opacity: .9;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Animasi masuk (halus) ---------- */
.reveal { opacity: 0; transform: translateY(10px); animation: reveal .5s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* ---------- Toast ---------- */
.toast { animation: toastIn .25s ease both; }
.toast.hide { animation: toastOut .2s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- Utilitas kecil ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--muted) / 0.35);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--muted) / 0.55); background-clip: content-box; }

/* ---------- Hormati reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}