/* Shared presentation for the live Seyir templates. Loaded after page styles. */
.seyir-experience {
    --seyir-dark: #0d1018;
    --seyir-card-bg: #181d29;
    --seyir-gold: #f5bc57;
    --seyir-gray: #bac1ce;
    --seyir-border: #2a303e;
    --page-width: 1400px;
    --page-gutter: clamp(18px, 4vw, 64px);
    --header-height: 80px;
    background: #0d1018;
    color: #f4f5f8;
    color-scheme: dark;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}
.seyir-experience :is(a, button, input, summary):focus-visible {
    outline: 2px solid var(--seyir-gold);
    outline-offset: 4px;
}
.seyir-skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 14px 20px; background: var(--seyir-gold); color: #111; border-radius: 8px; }
.seyir-skip-link:focus { top: 12px; }
.seyir-experience .seyir-header {
    display: block;
    height: var(--header-height) !important;
    background: rgba(13, 16, 24, .96);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.seyir-experience .seyir-header__inner {
    width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
    max-width: var(--page-width);
    gap: clamp(20px, 3vw, 44px);
    padding: 0;
}
.seyir-experience .seyir-header__logo { flex-shrink: 0; }
.seyir-experience .seyir-header__logo img { height: 32px; max-width: 130px; object-fit: contain; }
.seyir-experience .seyir-header__nav { display: flex; align-items: center; gap: 22px; min-width: 0; }
.seyir-experience .seyir-header__nav-link {
    position: relative; display: flex; align-items: center; min-height: 44px;
    font-size: 14px; line-height: 1.4; white-space: nowrap; color: var(--seyir-gray);
}
.seyir-experience .seyir-header__nav-link.active { color: #fff; }
.seyir-experience .seyir-header__nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 22px; height: 2px; background: var(--seyir-gold); }
.seyir-experience .seyir-header__actions { flex-shrink: 0; gap: 12px; }
.seyir-experience .seyir-header__search-btn { min-width: 44px; min-height: 44px; gap: 8px; padding: 10px; border-radius: 10px; color: var(--seyir-gray); }
.seyir-experience .seyir-header__search-btn span { display: inline; font-size: 14px; }
.seyir-experience .seyir-header__search-btn svg { width: 19px; height: 19px; stroke-width: 1.8; }
.seyir-experience .seyir-header__login { width: auto; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--seyir-gold); font-size: 14px; font-weight: 700; color: #161616; white-space: nowrap; }
.seyir-experience .seyir-header__profile-avatar { width: 40px; height: 40px; background: var(--seyir-gold); }
.seyir-experience .seyir-header__profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.seyir-experience .seyir-home { padding-top: calc(var(--header-height) + 24px); }
.seyir-experience .seyir-hero,
.seyir-experience .seyir-content,
.seyir-experience .seyir-footer__inner {
    width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
    max-width: var(--page-width); margin-inline: auto;
}
.seyir-experience .seyir-hero {
    height: clamp(520px, 43vw, 690px); aspect-ratio: auto; border-radius: 20px;
    background: #181d29; margin-block: 0; touch-action: pan-y;
}
.seyir-experience .seyir-hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,12,20,.92), rgba(8,12,20,.55) 48%, rgba(8,12,20,.06) 85%), linear-gradient(0deg, rgba(8,12,20,.8), transparent 65%);
}
.seyir-experience .seyir-hero__content { padding: clamp(28px, 5vw, 72px); }
.seyir-experience .seyir-hero__top { padding: 0; max-width: 640px; }
.seyir-eyebrow { display: block; color: var(--seyir-gold); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 18px; }
.seyir-experience .seyir-hero__title { max-width: 620px; font-size: clamp(32px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -.035em; text-transform: none; text-shadow: none; margin-bottom: 20px; overflow-wrap: anywhere; }
.seyir-experience .seyir-hero__logo { width: clamp(160px, 20vw, 290px); }
.seyir-hero__description { max-width: 490px; color: #d1d5df; font-size: 15px; line-height: 1.75; margin: 0 0 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.seyir-experience .seyir-hero__meta { flex-wrap: wrap; font-size: 12px; line-height: 1.6; gap: 10px; margin-bottom: 16px; }
.seyir-experience .seyir-hero__actions { align-items: center; flex-wrap: wrap; gap: 12px; }
.seyir-experience .seyir-hero__btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 48px; padding: 12px 24px; border-radius: 10px; }
.seyir-experience .seyir-hero__btn span { margin: 0; font-size: 14px; font-weight: 700; }
.seyir-experience .seyir-hero__btn--seyret { background: var(--seyir-gold); color: #111; }
.seyir-experience .seyir-hero__btn--seyret span { color: #111; }
.seyir-experience .seyir-hero__btn--seyret::before { display: none; }
.seyir-experience .seyir-hero__btn--seyret .seyir-hero__play-icon { width: 13px; height: 15px; fill: #111; }
.seyir-experience .seyir-hero__btn--seyret .seyir-hero__play-icon polygon { fill: #111; }
.seyir-experience .seyir-hero__btn--detay { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); }
.seyir-experience .seyir-hero__icon { width: 22px; height: 22px; }
.seyir-experience .seyir-hero__nav { inset: auto 28px 26px auto; transform: none; gap: 8px; }
.seyir-experience :is(.seyir-hero__nav-btn, .seyir-section__nav-btn) { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #1c2230; border: 1px solid #353c4b; opacity: 1; }
.seyir-experience :is(.seyir-hero__nav-btn, .seyir-section__nav-btn) svg { width: 9px; height: 16px; }
.seyir-experience .seyir-hero-dots { gap: 4px; margin: 12px 0 32px; }
.seyir-experience .seyir-hero-dots button { width: 36px; height: 28px; border-radius: 0; background: transparent; display: grid; place-items: center; }
.seyir-experience .seyir-hero-dots button::after { content: ''; width: 20px; height: 3px; border-radius: 3px; background: #454b59; }
.seyir-experience .seyir-hero-dots button.active::after { background: var(--seyir-gold); }
.seyir-experience .seyir-section { margin-bottom: 44px; }
.seyir-experience .seyir-section__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.seyir-experience .seyir-section__title { font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -.025em; }
.seyir-experience .seyir-section__nav { position: static; inset: auto; transform: none; gap: 8px; flex-shrink: 0; }
.seyir-experience .seyir-scroll { gap: 18px; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.seyir-experience :is(.seyir-card-h, .seyir-card-v) { height: auto; flex: 0 0 auto; min-width: 0; border: 1px solid #272e3c; border-radius: 12px; background: #151a25; scroll-snap-align: start; transition: border-color .2s, transform .2s; }
.seyir-experience .seyir-card-h { width: clamp(230px, 24vw, 320px); }
.seyir-experience .seyir-card-v { width: clamp(168px, 17vw, 214px); }
.seyir-experience .seyir-card-h__image { height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.seyir-experience .seyir-card-v__image { height: auto; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 0; }
.seyir-experience :is(.seyir-card-h__image, .seyir-card-v__image) img { width: 100%; height: 100%; object-fit: cover; }
.seyir-card-caption { padding: 14px 16px 16px; }
.seyir-card-caption h3 { font-size: 15px; line-height: 1.45; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seyir-card-caption span { display: block; margin-top: 5px; font-size: 12px; color: #a8b0c0; }
.seyir-experience .seyir-story__image { border-color: #363d4b; background: #1c2230; }
.seyir-experience .seyir-story__name { color: #c8ced9; font-size: 13px; line-height: 1.5; }
.seyir-experience .seyir-footer { padding: 38px 0 30px; background: #0a0d14; border-top: 1px solid #252b38; margin-top: 48px; }
.seyir-experience .seyir-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.seyir-experience .seyir-footer__logo { display: block; }
.seyir-experience .seyir-footer__logo img { height: 28px; width: auto; }
.seyir-footer__tagline { font-size: 14px; color: #a8b0c0; }
.seyir-experience .seyir-footer__links { margin-left: auto; gap: 24px; }
.seyir-experience .seyir-footer__link { font-size: 13px; padding-block: 12px; }
.seyir-experience .seyir-footer__copyright { flex-basis: 100%; margin: 0; padding-top: 20px; border-top: 1px solid #252b38; font-size: 12px; color: #909aaa; }

/* Fluid catalogue and search: replace fixed 340px page gutters. */
.seyir-experience :is(.search-page, .genre-page, .seyir-detail) {
    width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
    margin-inline: auto; padding: calc(var(--header-height) + 48px) 0 40px;
    min-height: 65vh; background: transparent;
}
.seyir-experience :is(.search-page__header, .genre-page__header) { margin-bottom: 32px; }
.seyir-experience :is(.search-page__title, .genre-page__title) { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -.03em; }
.seyir-experience :is(.search-page__query, .genre-page__count) { font-size: 14px; margin-top: 12px; color: #a8b0c0; overflow-wrap: anywhere; }
.seyir-search-form { display: flex; gap: 12px; align-items: center; max-width: 760px; padding: 8px; margin: 28px 0; border: 1px solid #353d4d; border-radius: 14px; background: #171d29; }
.seyir-search-form:focus-within { border-color: var(--seyir-gold); }
.seyir-search-form svg { width: 22px; height: 22px; flex-shrink: 0; margin-left: 12px; color: #a8b0c0; }
.seyir-search-form input { width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; color: #fff; font-size: 16px; padding: 8px; }
.seyir-search-form button { min-height: 44px; padding: 10px 22px; border-radius: 9px; background: var(--seyir-gold); color: #111; font-weight: 700; }
.seyir-experience :is(.search-page__grid, .genre-page__grid) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 24px; }
.seyir-experience :is(.search-card, .genre-card) { min-width: 0; background: #151a25; border: 1px solid #272e3c; border-radius: 12px; transition: border-color .2s, transform .2s; }
.seyir-experience :is(.search-card__info, .genre-card__info) { padding: 16px; }
.seyir-experience :is(.search-card__title, .genre-card__title) { font-size: 16px; line-height: 1.5; }
.seyir-experience :is(.search-card__type, .genre-card__desc) { color: #a8b0c0; }
.seyir-experience :is(.search-page__empty, .no-content) { grid-column: 1 / -1; padding: clamp(32px, 6vw, 80px) 20px; text-align: center; background: #141925; border: 1px dashed #353d4d; border-radius: 16px; }
.seyir-experience .search-page__empty svg { margin-inline: auto; }
.seyir-experience .pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.seyir-experience .pagination .pagination { margin-top: 0; }
.seyir-page-link { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid #353d4d; border-radius: 8px; font-size: 14px; }
.seyir-page-link[aria-current] { background: var(--seyir-gold); color: #111; border-color: var(--seyir-gold); }

/* Detail page keeps its player/tab behavior, with the same spacing and type. */
.seyir-experience .seyir-detail { padding-top: calc(var(--header-height) + 24px); }
.seyir-experience .seyir-detail-hero { height: auto; min-height: 520px; border-radius: 20px; }
.seyir-experience .seyir-detail-hero__content { min-height: 520px; padding: clamp(24px, 5vw, 64px); }
.seyir-experience .seyir-detail-hero__title { max-width: 620px; font-size: clamp(30px, 4vw, 54px); line-height: 1.12; text-transform: none; letter-spacing: -.03em; }
.seyir-experience .seyir-detail-hero__description { max-width: 540px; font-size: 15px; line-height: 1.7; }
.seyir-experience .seyir-detail-hero__actions { flex-wrap: wrap; gap: 16px; }
.seyir-experience .seyir-detail-body { width: 100%; padding: 36px 0; }
.seyir-experience .seyir-detail-tabs { gap: 32px; }
.seyir-experience .seyir-detail-tabs__item { font-size: 18px; min-height: 44px; }
.seyir-experience .seyir-detail-season-tabs { flex-wrap: wrap; gap: 10px; }
.seyir-experience .seyir-detail-season-tabs__item { min-height: 44px; }
.seyir-experience .seyir-detail-episode { padding: 16px; border: 1px solid #272e3c; background: #151a25; border-radius: 14px; gap: 24px; }
.seyir-experience .seyir-detail-episode__content { min-width: 0; }
.seyir-experience .seyir-detail-episode__title { overflow-wrap: anywhere; }
.seyir-experience .seyir-detail-related__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }

.seyir-experience .watch-page { padding-top: var(--header-height); background: #0d1018; }
.seyir-experience :is(.watch-page__info, .watch-page__related) { width: min(1080px, calc(100% - var(--page-gutter) * 2)); max-width: 1080px; padding-inline: 0; }
.seyir-experience .watch-page__meta { flex-wrap: wrap; gap: 12px; }
.seyir-experience .watch-episode-card { background: #151a25; border: 1px solid #272e3c; }
.seyir-experience .watch-episode-card__info { min-width: 0; overflow-wrap: anywhere; }

@media (hover: hover) {
    .seyir-experience :is(.seyir-card-h, .seyir-card-v, .genre-card, .search-card):hover { transform: translateY(-3px); border-color: #80704e; }
    .seyir-experience :is(.seyir-header__nav-link, .seyir-footer__link):hover { color: var(--seyir-gold); }
    .seyir-experience :is(.seyir-hero__nav-btn, .seyir-section__nav-btn):hover { background: #303747; border-color: var(--seyir-gold); }
}
@media (max-width: 1100px) {
    .seyir-experience { --header-height: 116px; }
    .seyir-experience .seyir-header__inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 66px 50px; gap: 0; }
    .seyir-experience .seyir-header__nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; gap: 24px; height: 50px; scrollbar-width: thin; }
    .seyir-experience .seyir-header__actions { grid-column: 2; grid-row: 1; }
    .seyir-experience .seyir-header__nav-link { font-size: 13px; }
    .seyir-experience .seyir-footer__links { margin-left: 0; }
}
@media (max-width: 600px) {
    .seyir-experience .seyir-home { padding-top: calc(var(--header-height) + 16px); }
    .seyir-experience .seyir-header__logo img { height: 28px; }
    .seyir-experience .seyir-header__search-btn span { display: none; }
    .seyir-experience .seyir-header__login { padding-inline: 14px; font-size: 13px; }
    .seyir-experience .seyir-hero { height: 550px; height: clamp(490px, 72svh, 600px); border-radius: 14px; }
    .seyir-experience .seyir-hero__bg-image { object-position: 65% center; }
    .seyir-experience .seyir-hero__bg::after { background: linear-gradient(0deg, rgba(8,12,20,.98), rgba(8,12,20,.7) 42%, rgba(8,12,20,.08) 85%); }
    .seyir-experience .seyir-hero__content { padding: 24px 22px 78px; }
    .seyir-experience .seyir-hero__title { font-size: clamp(28px, 8vw, 40px); }
    .seyir-hero__description { font-size: 14px; -webkit-line-clamp: 2; }
    .seyir-experience .seyir-hero__btn { padding-inline: 18px; }
    .seyir-experience .seyir-hero__nav { right: 20px; bottom: 18px; }
    .seyir-experience .seyir-section { margin-bottom: 30px; }
    .seyir-experience .seyir-scroll { gap: 12px; }
    .seyir-experience .seyir-card-h { width: 74vw; max-width: 290px; }
    .seyir-experience .seyir-card-v { width: 160px; }
    .seyir-experience :is(.search-page, .genre-page) { padding-top: calc(var(--header-height) + 28px); }
    .seyir-experience :is(.search-page__grid, .genre-page__grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .seyir-experience :is(.search-card__info, .genre-card__info) { padding: 12px; }
    .seyir-experience :is(.search-card__title, .genre-card__title) { font-size: 14px; }
    .seyir-search-form { gap: 4px; }
    .seyir-search-form button { padding-inline: 16px; }
    .seyir-experience .seyir-detail-hero__content { padding: 200px 22px 30px; }
    .seyir-experience .seyir-detail-episode { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
    .seyir-experience .seyir-detail-episode__poster { height: auto; aspect-ratio: 16 / 9; }
    .seyir-experience .seyir-footer__inner { gap: 18px; }
    .seyir-footer__tagline { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .seyir-experience *, .seyir-experience *::before, .seyir-experience *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}