/* ======================================================================
   Seyir — spacing & rhythm system (loaded after app.css; overrides by cascade)

   One scale for every gap, padding and radius so the whole site breathes the same way:
     --sp-1 4  --sp-2 8  --sp-3 12  --sp-4 16  --sp-5 24  --sp-6 32  --sp-7 48  --sp-8 64
   Pages start at --page-top below the header, sections are --section apart, headings sit
   --sp-4 above their content. Phones tighten by one step; TVs widen by one.
   ====================================================================== */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --section: var(--sp-7);                 /* between rails / sections */
  --page-top: calc(var(--header) + var(--sp-6));
  --page-bottom: var(--sp-8);
  --radius-xs: 6px; --radius-sm: 12px; --radius: 16px; --radius-lg: 20px; --radius-xl: 24px;
  --content: 1400px;                      /* reading width of list pages */
  --shadow-1: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .45);
}
@media (max-width: 600px) {
  :root { --section: var(--sp-6); --page-top: calc(var(--header) + var(--sp-4)); --page-bottom: var(--sp-7); --radius: 14px; --radius-lg: 18px; }
}
.tv { --section: var(--sp-8); --page-top: var(--sp-7); --page-bottom: var(--sp-8); }

/* ---------- page shells: same top/bottom everywhere ---------- */
.page { padding-top: var(--page-top); }
.view { padding-bottom: var(--page-bottom); }
.profile-page, .login-page, .legal-page, .app-page { padding-top: var(--page-top); padding-bottom: var(--sp-6); }
.tv .app-page, .tv .legal-page, .tv .login-page, .tv .profile-page { padding-top: var(--page-top); }
.page-head { margin-bottom: var(--sp-5); gap: var(--sp-4); }
.page-head h1, .legal h1, .app-head h1, .profile-head h1, .login-main h1 { letter-spacing: -.02em; line-height: 1.1; }

/* ---------- sections & rails: one rhythm ---------- */
.rail { margin: 0 0 var(--section); }
.rail-head, .section-head { margin-bottom: var(--sp-4); gap: var(--sp-3); }
.rail-head h2, .section-head h2, .people-section h2, .profile-page h2, .facts-section h2 { margin: 0; }
.discover { margin-top: var(--sp-6); padding-top: var(--sp-6); }
.details-sections > section + section, .details-sections > .rail { margin-top: var(--section); }
.details-sections > section { margin-bottom: 0; }
.comments-section { margin-top: var(--section); }
.chips { margin-bottom: var(--sp-4); gap: var(--sp-2); }
.chips.genres { margin-bottom: var(--sp-5); }
.grid { gap: var(--sp-5) var(--sp-4); }
.episodes { gap: var(--sp-3); }
.facts { gap: var(--sp-3); }
.mini-grid { gap: var(--sp-3); }

/* ---------- cards & panels: shared radius and border ---------- */
.card { border-radius: var(--radius-sm); }
.card-poster, .card .poster, .genre-tile { border-radius: var(--radius-sm); }
.card-title { margin-top: var(--sp-2); }
.fact, .pstat, .comment, .benefit, .tier, .app-card, .video-ad, .setting-row, .episode { border-radius: var(--radius); }
.card-panel, .login-shell, .install-card, .auth-card, .prefs-card, .lock-card { border-radius: var(--radius-lg); }
.card-panel { padding: var(--sp-5); margin-bottom: var(--sp-4); }
.card-panel > h2 { margin-bottom: var(--sp-3); }
.auth-card, .fb-card { padding: var(--sp-6) var(--sp-5); }

/* ---------- buttons: three sizes, same shape ---------- */
.btn { height: 42px; padding: 0 var(--sp-4); gap: var(--sp-2); font-size: 14px; }
.btn-sm { height: 34px; padding: 0 var(--sp-3); font-size: 13px; }
.btn-lg { height: 50px; padding: 0 var(--sp-5); font-size: 16px; }
.details-actions, .inline, .app-btns, .fb-actions, .contact-side { gap: var(--sp-2) var(--sp-3); }
.details-actions { margin-top: var(--sp-4); }

/* Header: the "Uygulama" link was an icon stacked over its label; make it a proper pill. */
.topbar .app-link {
  display: inline-flex; flex-direction: row; align-items: center; gap: var(--sp-2);
  width: auto; height: 38px; padding: 0 var(--sp-3) 0 var(--sp-3); border-radius: 99px;
  color: var(--muted); font-size: 13px; font-weight: 700; border: 1px solid transparent;
}
.topbar .app-link:hover { color: var(--text); background: rgba(255, 255, 255, .08); border-color: var(--border); }
.topbar .app-link i { font-size: 15px; }
@media (max-width: 760px) { .topbar .app-link { width: 40px; padding: 0; justify-content: center; } }

/* ---------- title page ---------- */
.details-main > * + * { margin-top: var(--sp-3); }
.details-main .meta-row { margin-top: var(--sp-3); }
.details-main .genre-list { margin-top: var(--sp-3); }
.details-main .tagline { margin: var(--sp-4) 0 0; }
.details-main .overview { margin: var(--sp-3) 0 0; max-width: 70ch; }
.details-main .credit-line { margin-top: var(--sp-2); }
.providers { margin: var(--sp-4) 0 0; gap: var(--sp-2); }
.providers-label { margin-bottom: var(--sp-1); }
.provider { border-radius: var(--radius-sm); }

/* ---------- profile ---------- */
.profile-stats { gap: var(--sp-3); margin: var(--sp-5) 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 600px) { .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .pstat { padding: var(--sp-3); } .pstat b { font-size: 20px; } .pstat span { font-size: 11.5px; } }
.profile-head { gap: var(--sp-4); }

/* ---------- footer & banners ---------- */
.site-footer { margin-top: var(--section); padding-top: var(--sp-5); }
.site-footer nav { gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.contact-banner { margin-bottom: var(--sp-5); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); }

/* ---------- forms: one control height ---------- */
.auth-form input, .fb-form input, .fb-form textarea, .cm-search, .so-bar { border-radius: var(--radius-sm); }
.auth-form { gap: var(--sp-3); }
.auth-tabs { margin: 0 0 var(--sp-4); }

/* ---------- lists / empty states ---------- */
.empty-state { padding: var(--sp-8) var(--sp-5); gap: var(--sp-2); }
.empty-state h3 { margin-top: var(--sp-2); }

/* ---------- phones: tighter but not cramped ---------- */
@media (max-width: 600px) {
  .card-panel { padding: var(--sp-4); }
  .auth-card, .fb-card { padding: var(--sp-5) var(--sp-4); }
  .grid { gap: var(--sp-4) var(--sp-3); }
  .details-actions .btn { flex: 1 1 auto; justify-content: center; }
  .app-card { padding: var(--sp-4); }
}

/* ---------- TV: bigger targets, more air, 10-ft readability ---------- */
.tv body, body.tv { font-size: 17px; }
.tv .btn { height: 50px; padding: 0 var(--sp-5); font-size: 16px; }
.tv .btn-lg { height: 58px; font-size: 18px; }
.tv .rail-head h2, .tv .section-head h2 { font-size: 24px; }
.tv .card-title { font-size: 16px; }
.tv .grid { gap: var(--sp-6) var(--sp-5); }
.tv .container { padding-left: var(--sp-7); padding-right: var(--sp-7); }
.tv .site-footer { display: none; }

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

/* ---------- focus: one visible ring everywhere (keyboard / remote) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: inherit; }

/* ---------- promo bar: thin strip fixed under the header, on every page ---------- */
:root { --promo: 40px; }
.promo-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; height: var(--promo);
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--gutter);
  background: rgba(16, 12, 14, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 110, 60, .28); font-size: 13px; color: var(--muted);
  padding-bottom: env(safe-area-inset-bottom);
}
.promo-text { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-text i { color: var(--accent-2); }
.promo-text b { color: var(--text); }
.promo-bar .btn-sm { height: 28px; padding: 0 var(--sp-3); font-size: 12.5px; }
.promo-bar .live-counters { margin-left: auto; height: 28px; padding: 0 var(--sp-3); gap: var(--sp-3); font-size: 10px; background: rgba(255, 255, 255, .05); }
.promo-bar .live-counters b { font-size: 12px; }
.promo-bar .live-counters small { font-size: 9.5px; }
.promo-bar .live-counters .lc { min-width: 30px; }
/* Pages start below the bar; full-bleed heroes just run underneath it. */
body.has-promo .view { padding-bottom: calc(var(--page-bottom) + var(--promo)); }
body.has-promo .site-footer { padding-bottom: calc(var(--sp-6) + var(--promo)); }
@media (max-width: 760px) {
  .promo-sub, .promo-bar .lc-wide, .promo-report { display: none; }
  .promo-bar { gap: var(--sp-2); }
  .promo-bar .live-counters { padding: 0 var(--sp-2); gap: var(--sp-2); }
}
/* Phones: above the tab bar; hidden while watching. */
@media (max-width: 760px) {
  .promo-bar { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 0; height: 38px; }
  body.has-promo .view { padding-bottom: calc(90px + 38px + env(safe-area-inset-bottom)); }
  body.on-watch .promo-bar { display: none; }
}
.tv .promo-bar { display: none; }
.tv body, body.tv { --page-top: var(--sp-7); }
.promo-short { display: none; }
@media (max-width: 760px) { .promo-long { display: none; } .promo-short { display: inline; } }

/* Phones: the rows overlap the hero's bottom 40 px — keep the carousel controls above that. */
@media (max-width: 900px) {
  .hero-controls { bottom: 62px; }
  .hero-content { bottom: 112px; }
}
/* Bottom sheets: the page behind doesn't scroll or pull-to-refresh; the sheet itself scrolls. */
html.sheet-open, html.sheet-open body { overflow: hidden; overscroll-behavior: none; }
.prefs-sheet { overscroll-behavior: contain; }
.prefs-card { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Promo bar: text + one button, nothing else. */
.promo-bar { justify-content: space-between; }

/* Already the app: no "download the app" links anywhere. */
.is-app .app-link, .is-app .site-footer a[href="/uygulama"], .is-app .install-bar { display: none !important; }