@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&family=Noto+Kufi+Arabic:wght@400;500;600;700;800;900&family=Noto+Naskh+Arabic:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ───────────────────────────────────────────────────── */
:root {
  /* Palette */
  --red:    #5eb0ee;
  --red-2:  #8ecaf5;
  --gold:   #ffd60a;
  --blue:   #0a84ff;
  --purple: #bf5af2;
  --green:  #30d158;

  /* Glow */
  --glow:      rgba(94, 176, 238, 0.5);
  --glow-soft: rgba(94, 176, 238, 0.25);
  --glow-blue: rgba(10, 132, 255, 0.35);

  /* Backgrounds — deep cinema blacks */
  --bg:       #060709;
  --bg-2:     #0b0d14;
  --bg-3:     #10121a;
  --bg-card:  #111320;

  /* Glass surfaces */
  --glass-xs:  rgba(255,255,255,.04);
  --glass:     rgba(255,255,255,.07);
  --glass-md:  rgba(255,255,255,.11);
  --glass-lg:  rgba(255,255,255,.16);
  --glass-dark: rgba(12,14,22,.72);

  /* Borders */
  --border:       rgba(255,255,255,.10);
  --border-md:    rgba(255,255,255,.18);
  --border-bright:rgba(255,255,255,.28);

  /* Text */
  --text:   #f0f1f8;
  --text-2: rgba(240,241,248,.62);
  --text-3: rgba(240,241,248,.36);
  --text-4: rgba(240,241,248,.20);

  /* Radii */
  --r-xl: 28px;
  --r-lg: 20px;
  --r:    14px;
  --r-sm: 10px;
  --r-xs: 7px;

  /* Blur */
  --blur:    blur(40px) saturate(180%);
  --blur-md: blur(60px) saturate(200%);
  --blur-lg: blur(80px) saturate(220%);

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(0,0,0,.4);
  --shadow:    0 12px 40px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.7);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.4),
                  inset 0 1px 0 rgba(255,255,255,.14),
                  inset 0 -1px 0 rgba(0,0,0,.18);
  --shadow-glow:  0 0 40px -10px var(--glow);

  /* Layout */
  --nav-h:   72px;
  --content: 1760px;
  --gap:     max(20px, 5%);

  /* Typography */
  --font-display: 'Noto Kufi Arabic', 'Rubik', system-ui, sans-serif;
  --font-ui:      'Noto Sans Arabic', 'Noto Kufi Arabic', 'Rubik', system-ui, sans-serif;
  --font-body:    'Noto Naskh Arabic', 'Noto Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

/* ── Base ────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  direction: rtl;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "calt" 1, "liga" 1, "kern" 1;
  overflow-x: hidden;
}

/* Cinematic ambient aurora */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(50% 44% at 80% 4%,  rgba(94,176,238,.38)  0%, transparent 65%),
    radial-gradient(44% 42% at 8%  10%, rgba(191,90,242,.26) 0%, transparent 65%),
    radial-gradient(50% 50% at 50% 115%,rgba(10,132,255,.24)  0%, transparent 65%),
    radial-gradient(38% 38% at 98% 72%, rgba(142,202,245,.20) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  animation: auroraDrift 28s ease-in-out infinite alternate,
             auroraHue   36s ease-in-out infinite;
}

/* Film-grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

@keyframes auroraDrift {
  0%   { transform: translate(0, 0)    scale(1);    }
  100% { transform: translate(-2%, 2%) scale(1.07); }
}
@keyframes auroraHue {
  0%,100% { filter: hue-rotate(0deg)   saturate(1.05); }
  50%     { filter: hue-rotate(-14deg) saturate(1.18); }
}

a   { text-decoration: none; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

/* Arabic/Kurdish text: never break letter-spacing */
.hero-title, .row-title, .card-name, .sr-title,
h1, h2, h3, body, input, button, textarea, select {
  letter-spacing: normal !important;
}
input, button, textarea, select { font-family: var(--font-body); }

/* ── Glass utility primitive ─────────────────────────────────────────── */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glass);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, transparent 36%);
}

/* ═══════════ LOGO / WORDMARK ═══════════ */
.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.logo .w-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-inline-end: -1px;
  border-radius: 11px;
  position: relative;
  background: linear-gradient(150deg, #1e2030, #050608);
  box-shadow: 0 6px 20px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 -2px 5px rgba(0,0,0,.55);
  color: #fff;
  font-size: .78em;
  font-weight: 900;
  overflow: hidden;
}
.logo .w-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255,255,255,.28) 0%, transparent 44%);
}
.logo .w-mark .k4 {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: .3em;
  background: var(--gold);
  color: #1a1200;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 900;
  line-height: 1.5;
  z-index: 1;
}
.logo .w-text { color: #fff; }
.logo .w-text b {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════ NAVBAR ═══════════ */
.navbar {
  position: fixed;
  inset-block-start: 12px;
  inset-inline: max(12px, 2.5%);
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--glass-dark);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-md);
  box-shadow: 0 12px 44px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.16),
              inset 0 -1px 0 rgba(0,0,0,.2);
  transition: all .4s cubic-bezier(.25,.9,.3,1);
  will-change: transform;
}
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.18) 0%, transparent 38%);
}
.navbar.scrolled {
  inset-block-start: 0;
  inset-inline: 0;
  border-radius: 0;
  border-inline: none;
  background: rgba(6,7,9,.88);
  box-shadow: 0 1px 0 var(--border), 0 12px 40px rgba(0,0,0,.4);
}
.navbar.scrolled::before { border-radius: 0; }

body.nav-hidden-top .navbar { transform: translateY(-120%); }

.nav-right-group { display: flex; align-items: center; gap: 20px; }
.nav-left-group  { display: flex; align-items: center; gap: 10px; }

/* Desktop center nav links */
.nav-links { display: flex; list-style: none; gap: 2px; margin: 0; padding: 0; }
@media (min-width: 1101px) {
  .nav-links {
    position: fixed;
    inset-block-start: 12px;
    left: 50%;
    transform: translateX(-50%);
    height: var(--nav-h);
    align-items: center;
    z-index: 1001;
    transition: transform .4s cubic-bezier(.25,.9,.3,1), opacity .35s;
    will-change: transform;
  }
  .scrolled-page .nav-links { inset-block-start: 0; }
  body.nav-hidden-top .nav-links {
    transform: translateX(-50%) translateY(-140%);
    opacity: 0;
    pointer-events: none;
  }
}
.nav-links a {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-3);
  padding: 8px 16px;
  border-radius: 999px;
  transition: color .2s, background .2s;
  font-family: var(--font-ui);
}
.nav-links a:hover { color: var(--text); background: var(--glass); }
.nav-links a.active {
  color: #fff;
  background: var(--glass-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* ── Nav user pill ── */
.nav-user-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.nav-user-pill:hover { background: var(--glass-md); border-color: var(--border-md); color: #fff; }

/* ── Sign In — iOS-26 "liquid glass" button (shared across all pages) ── */
.nav-login-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 46%, rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(94,176,238,.55), rgba(142,202,245,.42));
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow:
    0 6px 20px rgba(94,176,238,.30),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(0,0,0,.22);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.34,1.56,.4,1), box-shadow .22s, background .22s;
}
.nav-login-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%);
  opacity: .9;
}
.nav-login-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.nav-login-btn:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 10px 28px rgba(94,176,238,.42),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 6px rgba(0,0,0,.22);
}
.nav-login-btn:hover::after { left: 130%; }
.nav-login-btn:active { transform: translateY(0) scale(.97); }

/* ── Search ── */
.search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.search-wrap input {
  background: var(--glass);
  border: 1px solid var(--border);
  color: #fff;
  padding: 10px 42px 10px 18px;   /* right room for the inline search icon */
  border-radius: 999px;
  font-size: .88rem;
  width: 220px;
  outline: none;
  font-family: var(--font-body);
  transition: width .3s cubic-bezier(.22,.9,.3,1), background .2s, border-color .2s, box-shadow .2s;
}
.search-wrap input:focus {
  width: 290px;
  background: var(--glass-md);
  border-color: rgba(94,176,238,.55);
  box-shadow: 0 0 0 3px rgba(94,176,238,.12);
}
.search-wrap input::placeholder { color: var(--text-3); }

.search-results {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  width: 380px;
  border-radius: var(--r-lg);
  background: rgba(10,12,20,.92);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-md);
  overflow: hidden auto;
  max-height: 68vh;
  display: none;
  z-index: 2000;
  box-shadow: var(--shadow-lg);
}
.search-results.open { display: block; animation: pop .2s cubic-bezier(.2,.9,.3,1.1); }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--border);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--glass); }
.search-result-item img {
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-xs);
  background: var(--bg-3);
  flex-shrink: 0;
}
.sr-title { font-size: .88rem; font-weight: 700; font-family: var(--font-ui); }
.sr-meta  { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.sr-section-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 8px 14px 4px; border-top: 1px solid var(--border); margin-top: 2px; }
.sr-section-label:first-child { border-top: none; margin-top: 0; }

/* ── Search button — flat icon sitting inside the input (no glass circle) ── */
.search-btn {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-3);
  transition: background .2s, color .2s, transform .12s;
  flex-shrink: 0;
}
.search-btn:hover  { background: rgba(255,255,255,.08); color: #fff; }
.search-btn:active { transform: translateY(-50%) scale(.9); }

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  font-size: .82rem;
  color: #fff;
  font-family: var(--font-ui);
  background: linear-gradient(135deg, var(--red), var(--red-2));
  box-shadow: 0 6px 20px -4px var(--glow);
  border: none;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s;
}
.add-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -4px var(--glow); }
.add-btn:active { transform: scale(.96); }
@media (max-width: 640px) { .add-btn span { display: none; } .add-btn { padding: 8px; } }

/* ── Pill button ── */
.pill-btn {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: background .2s, color .2s, transform .16s cubic-bezier(.2,.9,.3,1.3);
}
.pill-btn:hover  { background: var(--glass-md); color: #fff; transform: translateY(-1px); }
.pill-btn:active { transform: scale(.96); }

/* ── Language picker ── */
#wk-lang-picker { display: flex; gap: 4px; align-items: center; margin-inline-start: 8px; }
.wk-lang-opt {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-3);
  cursor: pointer;
  transition: all .18s;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.wk-lang-opt:hover { color: #fff; background: var(--glass-md); }
.wk-lang-opt.active {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px var(--glow-soft);
}

/* ── Language picker in mobile drawer ── */
#wk-lang-picker-drawer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px 20px 8px;
  border-top: 1px solid var(--stroke);
  flex-wrap: wrap;
}

/* ── Hamburger (mobile) ── */
.nav-burger { display: none; }
@media (max-width: 1100px) {
  /* Hide the centered desktop links + inline search earlier so they can never
     overlap each other on mid-width screens (the nav links are centered and a
     long logged-in link list used to crash into the search box). Everything
     stays reachable through the burger drawer. */
  #wk-lang-picker, .wk-lang { display: none !important; }
  .nav-links { display: none !important; }
  body.nav-hidden-top .nav-links { transform: none; opacity: 1; }

  /* Hide glass search pill on mobile — it creates a double-glass artefact
     inside the pill navbar. Search is available in the drawer instead.  */
  .search-wrap { display: none !important; }

  .nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    order: -1;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .15s;
  }
  .nav-burger:hover  { background: rgba(255,255,255,.08); }
  .nav-burger:active { transform: scale(.91); }
}

/* ── Drawer (mobile) ── */
.nav-drawer-dim {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav-drawer-dim.on { opacity: 1; pointer-events: all; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2001;
  width: min(290px, 82vw);
  background: rgba(10,12,20,.95);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-left: 1px solid var(--border-md);
  box-shadow: -20px 0 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateX(100%);
  transition: transform .36s cubic-bezier(.22,.9,.2,1);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.nav-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  position: relative;
  z-index: 2002;
  pointer-events: auto;
}
.nav-drawer-close:hover { background: var(--glass-md); }

/* ── Drawer search (mobile) ── */
.drawer-search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  padding: 0 8px 0 16px;
  position: relative;
}
.drawer-search-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: .88rem;
  padding: 11px 0;
}
.drawer-search-wrap input::placeholder { color: var(--text-3); }
.drawer-search-wrap button {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px 4px;
}
.drawer-search-wrap button:hover { color: #fff; }
.drawer-search-results {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  border-radius: var(--r);
  background: rgba(10,12,20,.96);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-md);
  overflow: hidden auto;
  max-height: 55vh;
  display: none;
  z-index: 3000;
  box-shadow: var(--shadow-lg);
}
.drawer-search-results.open { display: block; }

.nav-drawer-links { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.nav-drawer-links a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-2);
  font-family: var(--font-ui);
  transition: background .2s, color .2s;
}
.nav-drawer-links a:hover { background: var(--glass); color: #fff; }
.nav-drawer-links a.active {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
}

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  height: 68vh;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  padding-block-end: 7vh;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
  background-color: var(--bg-2);
  transform: scale(1.08);
  filter: saturate(1.1);
  transition: opacity .5s ease;
  opacity: .5;
}
.hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg,   var(--bg) 0%, transparent 55%),
    linear-gradient(270deg, rgba(6,7,9,.8) 0%, transparent 52%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gap);
  max-width: 680px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .3px;
  margin-block-end: 18px;
  color: #fff;
  box-shadow: var(--shadow-glass);
  font-family: var(--font-ui);
}
.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--glow);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-weight: 900;
  line-height: 1.05;
  margin-block-end: 16px;
  text-shadow: 0 4px 40px rgba(0,0,0,.8);
}
.hero-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.9;
  margin-block-end: 22px;
  max-width: 560px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: .88rem;
  color: var(--text-2);
  margin-block-end: 26px;
  flex-wrap: wrap;
  font-family: var(--font-ui);
}
.hero-meta .rating { color: var(--gold); font-weight: 800; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── CTA buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  border: none;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 32px var(--glow-soft), inset 0 1px 0 rgba(255,255,255,.38);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s;
  text-decoration: none;
}
.btn-primary:hover  { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 42px var(--glow), inset 0 1px 0 rgba(255,255,255,.38); }
.btn-primary:active { transform: scale(.96); }

.btn-glass {
  background: var(--glass-md);
  border: 1px solid var(--border-md);
  color: #fff;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-glass);
  transition: background .2s, transform .18s cubic-bezier(.2,.9,.3,1.3);
  text-decoration: none;
}
.btn-glass:hover  { background: var(--glass-lg); transform: translateY(-2px); }
.btn-glass:active { transform: scale(.96); }

.ico { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* ═══════════ CONTENT ROWS ═══════════ */
.content {
  padding-block: 20px 70px;
  position: relative;
  z-index: 2;
  max-width: var(--content);
  margin-inline: auto;
}
.row-section {
  margin-block-end: 48px;
  padding-inline: var(--gap);
}
.row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 18px;
}
.row-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.row-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: linear-gradient(180deg, var(--red), var(--red-2));
  border-radius: 3px;
  flex-shrink: 0;
}
.row-wrap { position: relative; }
.card-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-block: 8px 20px;
  scrollbar-width: none;
  cursor: grab;
}
.card-row::-webkit-scrollbar { display: none; }
.card-row.dragging { cursor: grabbing; scroll-behavior: auto; }
.card-row.dragging .card { pointer-events: none; }

.row-arrow {
  position: absolute;
  inset-block: 8px 20px;
  z-index: 10;
  width: 48px;
  border: none;
  cursor: pointer;
  background: var(--glass-dark);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: #fff;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity .22s, background .2s;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}
.row-wrap:hover .row-arrow { opacity: 1; }
.row-arrow:hover { background: var(--glass-md); }
.row-arrow.start { inset-inline-start: -12px; }
.row-arrow.end   { inset-inline-end: -12px; }

/* ═══════════ CARDS ═══════════ */
.card {
  flex: 0 0 auto;
  width: 182px;
  cursor: pointer;
  position: relative;
  border-radius: var(--r-xl);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s;
  transform-style: preserve-3d;
  overflow: hidden; /* needed for ::after lensing */
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: .5px solid var(--border-md);
  box-shadow: var(--shadow), var(--shadow-glass);
}
.card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  z-index: 30;
  border-color: rgba(94,176,238,.35);
}

/* Specular sheen */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 28%, transparent 55%);
  opacity: .8;
  mix-blend-mode: screen;
  z-index: 2;
}
/* Top radial lens */
.card::after {
  content: '';
  position: absolute;
  left: -30%;
  top: -60%;
  width: 160%;
  height: 120%;
  pointer-events: none;
  transform: rotate(6deg);
  background: radial-gradient(62% 42% at 28% 0%, rgba(255,255,255,.12), transparent 72%);
  z-index: 1;
}

.card-inner {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-card);
  aspect-ratio: 2/3;
  transition: box-shadow .32s, border-color .32s;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .3s;
}
.card:hover img { transform: scale(1.07); filter: brightness(1.05) saturate(1.08); }
.card:hover .card-inner { box-shadow: 0 0 0 1px rgba(94,176,238,.3) inset; }

.card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1.6;
  background: linear-gradient(150deg, #181b2a, #0d0f18);
  font-family: var(--font-body);
}
.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 12px;
  opacity: 0;
  transition: opacity .25s;
  background: linear-gradient(0deg, rgba(0,0,0,.96) 0%, transparent 62%);
  z-index: 3;
}
.card:hover .card-overlay { opacity: 1; }
.card:active .card-overlay { opacity: 1; }
/* Hide placeholder text when overlay is showing — prevents name duplication on touch */
.card:hover .card-placeholder,
.card:active .card-placeholder { visibility: hidden; }
.card-play {
  align-self: flex-start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-block-end: 8px;
  background: rgba(255,255,255,.96);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  transition: transform .18s;
}
.card:hover .card-play { transform: scale(1.08); }
.card-name {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
  font-family: var(--font-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-sub {
  font-size: .7rem;
  color: var(--text-2);
  display: flex;
  gap: 7px;
  margin-block-start: 4px;
  align-items: center;
  font-family: var(--font-ui);
}
.card-sub .rating { color: var(--gold); font-weight: 700; }

/* Kurdish subtitle badge */
.sub-tag {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 4;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  font-size: .56rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.38);
  font-family: var(--font-ui);
}

/* Progress bar */
.card-progress { position: absolute; inset-block-end: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,.2); z-index: 4; }
.card-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-2)); border-radius: 2px; }

/* Skeleton */
.skeleton {
  flex: 0 0 auto;
  width: 182px;
  aspect-ratio: 2/3;
  border-radius: var(--r-xl);
  background: linear-gradient(100deg,
    rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.03) 70%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.row-empty { padding: 28px 4px; color: var(--text-3); font-family: var(--font-body); }

/* ═══════════ TAGS / BADGES ═══════════ */
.tag {
  background: var(--glass);
  border: 1px solid var(--border);
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .76rem;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  font-family: var(--font-ui);
  font-weight: 600;
}
.tag.sub {
  background: rgba(94,176,238,.15);
  border-color: rgba(94,176,238,.38);
  color: #a8d8f8;
  font-weight: 800;
}

/* ═══════════ SEASONS / EPISODES ═══════════ */
.season-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-block-end: 16px; }
.season-tab {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-3);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  transition: all .2s;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.season-tab:hover  { color: var(--text); background: var(--glass-md); }
.season-tab.active { background: #fff; color: #000; border-color: #fff; font-weight: 900; }

.episode-grid { display: flex; flex-direction: column; gap: 8px; }
.episode-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .18s, transform .18s, border-color .18s;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.episode-item:hover {
  background: var(--glass-md);
  border-color: var(--border-md);
  transform: translateX(-3px);
}
.episode-num   { min-width: 44px; font-size: .88rem; font-weight: 800; color: var(--text-3); font-family: var(--font-ui); }
.episode-title { flex: 1; font-size: .88rem; font-family: var(--font-body); }
.episode-play  {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--glow-soft);
  transition: transform .18s;
}
.episode-item:hover .episode-play { transform: scale(1.1); }

/* ═══════════ FOOTER ═══════════ */
.footer {
  padding: 52px var(--gap);
  border-block-start: 1px solid var(--border);
  margin-block-start: 40px;
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: var(--content);
  margin-inline: auto;
}
.footer .logo { font-size: 1.45rem; margin-block-end: 12px; }
.footer p {
  font-family: var(--font-body);
  font-size: .84rem;
  color: var(--text-3);
  line-height: 1.85;
  max-width: 580px;
  margin: 0 auto;
}

/* ═══════════ WATCH-TOGETHER SECTION ═══════════ */
.wk-room-section {
  padding: 0 var(--gap) 10px;
  margin-top: 12px;
  max-width: var(--content);
  margin-inline: auto;
}
.wk-room-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  background: linear-gradient(135deg,
    rgba(94,176,238,.1)  0%,
    rgba(191,90,242,.07) 50%,
    rgba(10,132,255,.07) 100%
  );
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-xl);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 14px 44px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.wk-room-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 80% at 90% 50%, rgba(94,176,238,.1), transparent 72%);
  pointer-events: none;
}
.wk-room-icon-col { flex-shrink: 0; }
.wk-eye-wrap {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
  position: relative;
}
.wk-eye-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  animation: wkEyePulse 6s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes wkEyePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.wk-house-wrap {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.wk-house-svg {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.wk-room-content { flex: 1; min-width: 0; }
.wk-room-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
}
.wk-room-desc {
  font-size: .88rem;
  color: var(--text-2);
  margin: 0 0 16px;
  line-height: 1.75;
  font-family: var(--font-body);
}
.wk-room-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wk-btn-room-create {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 7px 20px var(--glow-soft), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
}
.wk-btn-room-create:hover { transform: translateY(-2px); box-shadow: 0 11px 26px var(--glow), inset 0 1px 0 rgba(255,255,255,.32); color: #fff; }
.wk-room-join-row { display: flex; gap: 6px; flex: 1; min-width: 200px; }
.wk-room-code-input {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border-md);
  background: var(--glass);
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: 3px;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  direction: ltr;
  text-align: center;
}
.wk-room-code-input::placeholder {
  letter-spacing: normal;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-3);
}
.wk-room-code-input:focus {
  border-color: rgba(94,176,238,.55);
  background: var(--glass-md);
  box-shadow: 0 0 0 3px rgba(94,176,238,.1);
}
.wk-btn-room-join {
  padding: 11px 18px;
  border-radius: var(--r);
  border: 1px solid var(--border-md);
  background: var(--glass-md);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .16s;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wk-btn-room-join:hover { background: var(--glass-lg); transform: translateY(-1px); }

/* ═══════════ AD BANNER ═══════════ */
#adSlot { padding: 0 var(--gap); margin: 16px 0 6px; max-width: var(--content); margin-inline: auto; }
.ad-banner {
  position: relative;
  width: 100%;
  min-height: 110px;
  max-height: 170px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(94,176,238,.14), rgba(142,202,245,.08));
  border: 1px dashed rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
}
.ad-tag {
  position: absolute;
  top: 8px;
  inset-inline-start: 10px;
  font-size: .65rem;
  font-weight: 800;
  color: var(--text-3);
  background: rgba(0,0,0,.4);
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-ui);
}

/* ═══════════ PLUS / BADGES ═══════════ */
.plus-badge {
  display: inline-block;
  padding: 2px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--red-2));
  color: #1a1200;
  font-weight: 800;
  font-size: .7em;
  vertical-align: middle;
  margin-inline-end: 7px;
  box-shadow: 0 3px 12px rgba(255,214,10,.35);
  font-family: var(--font-ui);
}
.plus-card  { border-color: rgba(255,214,10,.28) !important; }
.plus-list  { margin: 10px 20px; line-height: 2.1; color: var(--text-2); }
.plus-list b { color: var(--gold); }
.plus-stats {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(255,214,10,.1), rgba(142,202,245,.05));
  border: .5px solid rgba(255,214,10,.22);
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-ui);
}
.badge.auto   { background: linear-gradient(135deg, #30d158, #34c759); color: #022; }
.badge.learn  { background: linear-gradient(135deg, var(--gold), var(--red-2)); color: #210; }
.badge.review { background: var(--glass-md); color: var(--text-2); }
.badge.none   { background: rgba(255,69,58,.18); color: #ff9d94; }

/* ═══════════ TELEGRAM BUTTON ═══════════ */
.tg-contact {
  margin-block-start: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--r-lg);
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(160deg, #8ecaf5, var(--red) 55%, #2f8fd8);
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  font-family: var(--font-ui);
  box-shadow: 0 10px 28px var(--glow-soft),
              inset 0 1px 0 rgba(255,255,255,.38),
              inset 0 -3px 7px rgba(0,0,0,.22);
  transition: transform .24s cubic-bezier(.2,.9,.3,1.3), box-shadow .24s;
}
.tg-contact:hover  { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 38px var(--glow), inset 0 1px 0 rgba(255,255,255,.45); }
.tg-contact:active { transform: scale(.97); }
.tg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(160deg, #8ecaf5, #2f8fd8);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.44), inset 0 -3px 5px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.28);
}

/* ═══════════ KEYFRAMES ═══════════ */
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop   { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 8px var(--glow); } 50% { opacity: .35; box-shadow: none; } }

/* ═══════════ BODY PADDING ═══════════ */
body { padding-block-start: calc(var(--nav-h) + 24px); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  body { padding-block-start: 80px; padding-block-end: 0; }

  .navbar {
    inset-block-start: 10px;
    inset-inline: 10px;
    height: 52px;
    border-radius: 26px;
    padding: 0 8px 0 14px;
  }
  .navbar::before { border-radius: 26px; background: linear-gradient(150deg, rgba(255,255,255,.10) 0%, transparent 42%); }
  .navbar.scrolled {
    inset-block-start: 0;
    inset-inline: 0;
    border-radius: 0;
    border-inline: none;
  }
  .nav-right-group { flex: 0 0 auto; gap: 0; }
  .nav-left-group  { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; }
  /* On phones, hide the text label on the user pill — show avatar only */
  .nav-user-name { display: none !important; }
  /* On phones, hide the sign-in button — it's accessible via the drawer */
  .nav-login-btn { display: none !important; }
  .nav-left-group > a, .nav-left-group > button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 108px;
    font-size: .75rem !important;
    padding: 6px 10px !important;
  }
  .search-wrap { flex: 1 1 auto; min-width: 0; }
  .search-wrap input { width: 100% !important; padding: 9px 40px 9px 14px; }
  .search-wrap input:focus { width: 100% !important; }
  .search-btn { width: 28px; height: 28px; }
  .search-results {
    position: fixed;
    inset-inline: 10px;
    inset-block-start: 68px;
    width: auto;
    border-radius: var(--r-lg);
    max-height: 70vh;
  }
  .search-result-item img { width: 36px; height: 52px; }

  .hero { min-height: 76vh; padding-block-end: 30px; }
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.9rem); margin-block-end: 12px; }
  .hero-desc  { font-size: .92rem; -webkit-line-clamp: 4; }
  .hero-meta  { font-size: .8rem; gap: 10px; margin-block-end: 20px; }
  .hero-actions { gap: 9px; }
  .btn-primary, .btn-glass { padding: 12px 22px; font-size: .9rem; }

  .card, .skeleton { width: 142px; border-radius: 18px; }
  .card-inner { min-height: 196px; border-radius: 18px; }
  .card-row   { gap: 10px; padding-block: 6px 16px; }
  .row-section { margin-block-end: 28px; padding-inline: 16px; }
  .row-title  { font-size: 1.1rem; }
  .row-arrow  { display: none; }

  .wk-room-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px; }
  .wk-room-icon-col { align-self: center; }
  .wk-room-actions  { flex-direction: column; width: 100%; }
  .wk-btn-room-create { width: 100%; justify-content: center; }
  .wk-room-join-row { width: 100%; }

  .wk-room-section { padding: 0 16px 10px; }
  #adSlot { padding: 0 16px; }
  #sub span { font-size: clamp(1.1rem, 4vw, 1.8rem) !important; }
}

@media (max-width: 560px) {
  .card, .skeleton { width: 122px; border-radius: 16px; }
  .card-inner { border-radius: 16px; }
  .hero-actions { width: 100%; }
  .btn-primary, .btn-glass { flex: 1; justify-content: center; }
  .hero-content { padding: 0 16px 26px; }
}

@media (max-width: 420px) {
  .wk-eye-wrap { width: 66px; height: 66px; }
  .wk-room-title { font-size: 1.08rem; }
}

/* ═══════════ LANDSCAPE MOBILE — hide pill nav-links, keep burger ═══════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; }
  .navbar {
    inset-block-start: 6px;
    inset-inline: 8px;
    height: 46px;
    border-radius: 23px;
    padding: 0 6px 0 12px;
  }
  .navbar.scrolled {
    inset-block-start: 0;
    inset-inline: 0;
    border-radius: 0;
  }
  body { padding-block-start: 60px; }
}

@media (min-width: 1900px) {
  :root { --nav-h: 84px; }
  .card, .skeleton { width: 228px; }
  .row-title { font-size: 1.65rem; }
  .hero-title { font-size: 5.1rem; }
}
@media (min-width: 2200px) {
  .card, .skeleton { width: 256px; }
  .hero-title { font-size: 6rem; }
}

/* ═══════════ ACCESSIBILITY ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; }
}

/* ── Nav: hide watch page nav ── */
body.page-watch .nav-links { display: none !important; }

/* ── Drop zone (admin) ── */
.drop {
  background: linear-gradient(160deg, var(--glass), var(--glass-xs));
  border: 1.5px dashed var(--border-md);
  border-radius: var(--r-lg);
  transition: border-color .25s, background .25s, transform .2s;
}
.drop.over { border-color: var(--red); background: rgba(94,176,238,.07); transform: scale(1.01); }

/* ── Public rooms (rooms.php fed from index.php) ── */
.pub-rooms-section { padding-inline: var(--gap); max-width: var(--content); margin-inline: auto; }
@media (max-width: 600px) {
  .pub-rooms-section { padding-inline: 16px; }
  .pub-rooms-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pub-room-card  { padding: 12px; border-radius: 14px; }
  .pub-room-name  { font-size: .84rem; }
  .pub-room-movie { font-size: .7rem; }
}
@media (max-width: 380px) {
  .pub-rooms-grid { grid-template-columns: 1fr; }
}
/* ── Card heart (like) ──────────────────────────────────────────────────────── */
.card-inner{position:relative}
.card-heart{position:absolute;top:8px;right:8px;z-index:5;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(255,255,255,.85);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,background .2s}
.card:hover .card-heart,.card-heart.liked{opacity:1;transform:translateY(0)}
.card-heart svg{fill:none;stroke:currentColor;stroke-width:2}
.card-heart:hover{background:rgba(0,0,0,.65);color:#fff}
.card-heart.liked{color:#5eb0ee}
.card-heart.liked svg{fill:#5eb0ee;stroke:#5eb0ee}
.card-heart.pop{animation:heartPop .3s ease}
@keyframes heartPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ── Search type badges (Movie vs TV Show disambiguation) ─────────────────── */
.sr-type-badge {
  display:inline-block;
  font-size:.62rem; font-weight:800; padding:1px 6px; border-radius:5px;
  margin-inline-end:5px; vertical-align:middle; letter-spacing:.3px;
  text-transform:uppercase; position:relative; top:-1px;
}
.sr-type-badge.movie { background:rgba(191,90,242,.22); color:#d9a8f5; border:1px solid rgba(191,90,242,.38); }
.sr-type-badge.show  { background:rgba(10,132,255,.22); color:#70bbff; border:1px solid rgba(10,132,255,.3); }




/* === WK-LOGO-STREAK START (auto-added) === */
/* Calm GPU light streak across the WatchKRD W.
   loop=9.0s  sweep_fraction=0.15  thickness=0.5em  brightness=0.8
   Generated by add_w_shine.py - edit CONFIG and re-run to change. */
.logo .w-mark { position: relative; overflow: hidden; isolation: isolate; }
.logo .w-mark .wk-streak {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 0.5em;
  background: linear-gradient(105deg,
              transparent 0%,
              rgba(255,255,255,0.8) 50%,
              transparent 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(-260%, 0, 0) skewX(-18.0deg);
  animation: wkLogoStreak 9.0s ease-in-out infinite;
}
@keyframes wkLogoStreak {
  0%   { transform: translate3d(-260%, 0, 0) skewX(-18.0deg); opacity: 0; }
  3.0%  { opacity: 1; }
  15.0%  { transform: translate3d(360%, 0, 0) skewX(-18.0deg); opacity: 1; }
  18.0%  { transform: translate3d(360%, 0, 0) skewX(-18.0deg); opacity: 0; }
  100% { transform: translate3d(360%, 0, 0) skewX(-18.0deg); opacity: 0; }
}
/* === WK-LOGO-STREAK END === */


/* ══════════════════════════════════════════════════════
   LIQUID GLASS ENHANCEMENTS + MOBILE ZOOM FIX
   ══════════════════════════════════════════════════════ */

/* ── Mobile: prevent iOS input-focus zoom (font-size ≥ 16px) ── */
@media (max-width: 1024px) {
  input, textarea, select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"] {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}
/* Prevent layout shift on focus — keep width stable */
@media (max-width: 768px) {
  .search-wrap input:focus { width: 220px !important; }
  html, body { touch-action: pan-y; }
  /* Stop video/player going full-screen on orientation */
  video { max-width: 100%; }
}

/* ── Liquid Glass card base ── */
.card,
.movie-card,
.show-card,
.pub-room-card,
.stat-card,
.glass-panel,
.modal,
.modal-inner,
.sheet,
[class*="glass-card"] {
  backdrop-filter: blur(28px) saturate(200%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.05) !important;
}

/* Stronger inner highlight for the glass "top edge" reflection */
.card::before,
.movie-card::before,
.pub-room-card::before,
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.06) 28%,
    transparent 55%
  );
  z-index: 0;
}

/* Liquid glass hover — card lifts + brightens */
.movie-card:hover,
.show-card:hover,
.pub-room-card:hover {
  backdrop-filter: blur(36px) saturate(240%) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(36px) saturate(240%) brightness(1.12) !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.20),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 32px -8px var(--glow-soft) !important;
}

/* Navbar — richer glass when floating */
.navbar:not(.scrolled) {
  backdrop-filter: blur(48px) saturate(220%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.1) !important;
  box-shadow:
    0 12px 44px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

/* Search results dropdown — liquid glass */
.search-results {
  backdrop-filter: blur(56px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(56px) saturate(220%) !important;
  background: rgba(8,10,18,.82) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* Modals & sheets */
.modal-inner,
[class*="modal-box"],
[class*="modal-content"] {
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  background: rgba(10,12,22,.88) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Room cards - extra shimmer */
.pub-room-card {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.14);
  position: relative;
  overflow: hidden;
}

/* Ambient orbs behind cards on hover */
.pub-room-card:hover::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 0%, rgba(94,176,238,.14) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  animation: none;
}

/* Buttons — polished glass */
.btn-primary,
.nav-login-btn,
button[class*="btn-red"],
.add-btn {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Pill badges */
.badge,
[class*="badge"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* ═══════════════════════════════════════════════════════════
   PWA STANDALONE — NAVBAR SAFE-AREA (class-based, JS-driven)
   .pwa-mode is added by pwa-fix.js before first paint
   ═══════════════════════════════════════════════════════════ */

/* Navbar: shift down by the exact status-bar height */
html.pwa-mode .navbar,
html.pwa-mode .navbar.scrolled {
  top:    var(--pwa-safe-top, 44px) !important;
  left:   0 !important;
  right:  0 !important;
  inset-block-start: var(--pwa-safe-top, 44px) !important;
  inset-inline:      0 !important;
  border-radius: 0 0 18px 18px !important;
  border-top:    none !important;
  border-left:   none !important;
  border-right:  none !important;
  background: rgba(6,7,9,.95) !important;
  backdrop-filter: blur(48px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(220%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 8px 28px rgba(0,0,0,.5) !important;
  height: var(--nav-h) !important;
  padding-top: 0 !important;
}
html.pwa-mode .navbar::before { border-radius: 0 0 18px 18px !important; }

/* Body: push content below status bar + full navbar */
html.pwa-mode body {
  padding-top: calc(var(--pwa-safe-top, 44px) + var(--nav-h) + 16px) !important;
  padding-block-start: calc(var(--pwa-safe-top, 44px) + var(--nav-h) + 16px) !important;
}

/* Mobile nav-links dropdown — offset from navbar bottom, not viewport top */
html.pwa-mode .nav-links {
  top: calc(var(--pwa-safe-top, 44px) + var(--nav-h) + 10px) !important;
  inset-block-start: calc(var(--pwa-safe-top, 44px) + var(--nav-h) + 10px) !important;
}

/* Anything pinned to the bottom */
html.pwa-mode .player-bar,
html.pwa-mode .mini-player,
html.pwa-mode .bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ═══════════════════════════════════════════════════════════ */

/* ── Landscape phone navbar fix ─────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body { padding-block-start: 60px; }
  .navbar {
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    border-radius: 0 !important;
    height: 48px !important;
    padding: 0 8px !important;
  }
  .nav-left-group > a, .nav-left-group > button {
    max-width: 72px !important;
    font-size: .7rem !important;
    padding: 5px 7px !important;
  }
  .search-wrap input { max-width: 120px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE 3D SEARCH — floating button + full-screen panel (phones only)
   ════════════════════════════════════════════════════════════════════════ */
#wkSearchFab {
  display: none;
  position: fixed;
  inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 18px;
  z-index: 1800;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  /* 3D look: layered gradient, highlight rim, drop + inner shadow */
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.38), rgba(255,255,255,0) 42%),
    linear-gradient(150deg, var(--accent, #5eb0ee), #8ecaf5);
  box-shadow:
    0 10px 22px rgba(94,176,238,.45),
    0 4px 8px rgba(0,0,0,.35),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -4px 8px rgba(0,0,0,.28);
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .16s;
  -webkit-tap-highlight-color: transparent;
}
#wkSearchFab:active {
  transform: scale(.9) translateY(2px);
  box-shadow:
    0 5px 12px rgba(94,176,238,.4),
    0 2px 4px rgba(0,0,0,.35),
    inset 0 2px 3px rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.3);
}
@media (max-width: 1100px) { #wkSearchFab { display: flex; } }

#wkSearchOverlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  background: rgba(7,8,15,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
}
#wkSearchOverlay.open { display: flex; animation: wkseIn .22s cubic-bezier(.2,.9,.3,1.05); }
@keyframes wkseIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.wkse-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wkse-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 0 12px;
  color: rgba(245,246,250,.6);
}
.wkse-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 1.05rem;   /* ≥16px → no iOS zoom on focus */
  padding: 14px 0;
}
.wkse-bar input::placeholder { color: rgba(245,246,250,.4); }
#wkseClear {
  background: none; border: none; color: rgba(245,246,250,.55);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
#wkseCancel {
  background: none; border: none; color: var(--accent, #5eb0ee);
  font-family: var(--font-body, inherit); font-weight: 800; font-size: .95rem;
  cursor: pointer; flex-shrink: 0; padding: 6px 4px;
}
.wkse-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
/* Reuse the existing .search-result-item styling; just ensure it lays out
   nicely full-width inside the overlay. */
.wkse-results .sr-section-label {
  padding: 12px 6px 6px; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; color: rgba(245,246,250,.4);
}
.wkse-results .search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 12px; cursor: pointer;
}
.wkse-results .search-result-item:active { background: rgba(255,255,255,.06); }
.wkse-results .search-result-item img {
  width: 46px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.05);
}
.wkse-results .sr-title { font-weight: 700; font-size: .95rem; color: #fff; }
.wkse-results .sr-meta  { font-size: .78rem; color: rgba(245,246,250,.45); margin-top: 2px; }
.wkse-hint { text-align: center; color: rgba(245,246,250,.35); font-size: .85rem; padding: 28px 0; }

/* ── Baby-blue theme: dark ink on solid light-accent fills (AA/AAA contrast) ── */
.btn-primary, .add-btn, .wk-btn-room-create, .sub-tag,
.wk-lang-opt.active, .nav-drawer-links a.active, .episode-play { color: #062033; }
.btn-primary svg, .add-btn svg, .wk-btn-room-create svg, .episode-play svg { fill: #062033; }