/* ==========================================================================
   Playflix — design tokens
   Arah visual: sinema gelap, aksen amber-emas (bukan merah Netflix).
   Skala 4px, radius hierarkis, kontras WCAG AA.
   ========================================================================== */

:root {
  /* --- Warna: permukaan --- */
  --bg:            #0a0a0c;
  --bg-elevated:   #121216;
  --bg-card:       #17171d;
  --bg-hover:      #1f1f27;
  --bg-inset:      #0d0d11;

  /* --- Warna: teks --- */
  --text:          #f2f2f5;
  --text-secondary:#a8a8b8;
  --text-muted:    #6e6e80;

  /* --- Aksen: amber sinema --- */
  --accent:        #e8b44a;
  --accent-hover:  #f4c65f;
  --accent-press:  #d19f38;
  --accent-ink:    #1a1405;

  /* --- Semantik --- */
  --danger:        #e5484d;
  --success:       #46a758;
  --border:        #26262f;
  --border-strong: #35353f;

  /* --- Tipografi --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", var(--font-sans);

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.5rem;    /* 40 */
  --fs-3xl:  3.75rem;   /* 60 */

  /* --- Spasi 4px --- */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;

  /* --- Radius hierarkis --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* --- Bayangan hemat --- */
  --shadow-card: 0 2px 8px rgba(0,0,0,.4);
  --shadow-pop:  0 12px 32px rgba(0,0,0,.6);
  --shadow-hero: 0 24px 64px rgba(0,0,0,.7);

  /* --- Gerak --- */
  --ease: cubic-bezier(.32,.72,0,1);
  --dur-fast: 140ms;
  --dur: 240ms;

  --nav-h: 60px;
  --content-max: 1680px;
  --gutter: var(--s4);
}

@media (min-width: 768px)  { :root { --gutter: var(--s8);  --nav-h: 68px; } }
@media (min-width: 1280px) { :root { --gutter: var(--s12); } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img, picture, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Scrollbar halus */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--bg-inset); }
::-webkit-scrollbar-thumb:hover { background: #4a4a57; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s4); z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s3) var(--s5); border-radius: var(--r-md);
  font-weight: 600; transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--s3); }

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