/* Seyir web: shared discovery, library and viewing experience. */
.seyir-experience { --seyir-dark:#0b0d11; --seyir-dark-2:#13161b; --seyir-card-bg:#171a20; --seyir-border:#2a2e36; --seyir-gray:#aeb2bc; --seyir-gold:#ffc34b; --page-width:1440px; --page-gutter:clamp(20px,4vw,72px); --header-height:84px; background:#0b0d11; color:#f6f6f5; }
.seyir-experience button,.seyir-experience input,.seyir-experience textarea,.seyir-experience select { font:inherit; }
.seyir-experience [hidden] { display:none!important; }
.seyir-experience :focus-visible { outline:2px solid var(--seyir-gold); outline-offset:5px; }
.seyir-experience .seyir-header { background:rgba(11,13,17,.94); border-bottom:1px solid #ffffff0e; backdrop-filter:blur(22px); }
.seyir-experience .seyir-header__nav { gap:28px; }
.seyir-experience .seyir-header__nav-link { font-size:13px; font-weight:500; }
.seyir-experience .seyir-header__login { border-radius:100px; background:#ffffff0d; border:1px solid #ffffff24; color:#fff; }
.seyir-experience .seyir-header__logo img { max-width:100px; }
.seyir-experience .seyir-home { padding-top:calc(var(--header-height) + 28px); }
.seyir-experience .seyir-hero { border:1px solid #ffffff13; border-radius:24px; height:clamp(510px,44vw,720px); }
.seyir-experience .seyir-hero__bg-image { object-position:center 30%; }
.seyir-experience .seyir-hero__bg::after { background:linear-gradient(90deg,#090b10f0 0%,#090b10a6 42%,#090b1010 80%),linear-gradient(0deg,#090b10c9,transparent 70%); }
.seyir-experience .seyir-hero__title { font-weight:700; letter-spacing:-.055em; font-size:clamp(40px,5vw,76px); line-height:1.03; }
.seyir-experience .seyir-hero__description { color:#c4c6cc; max-width:470px; }
.seyir-experience .seyir-hero__btn { border-radius:100px; min-height:50px; }
.seyir-experience .seyir-section { margin-block:46px; }
.seyir-experience .seyir-section__title { font-size:clamp(22px,2vw,30px); letter-spacing:-.035em; }
.seyir-experience .seyir-section__header { margin-bottom:22px; gap:16px; }
.seyir-experience .seyir-detail-hero { border-bottom:1px solid #ffffff10; }
.seyir-experience .seyir-detail-hero__actions { flex-wrap:wrap; gap:14px; }
.seyir-experience .seyir-detail-btn,.seyir-experience .seyir-detail-icon-btn { border-radius:100px; }
.seyir-experience .seyir-detail-body { display:flex; flex-direction:column; }
.seyir-experience .seyir-detail-body>.vod-comments { order:5; }
.seyir-experience .seyir-footer { background:#090b0f; border-top:1px solid #ffffff10; margin-top:64px; }
.vod-icon { width:22px; height:22px; flex:none; vertical-align:middle; }
.vod-muted { color:#aeb2bc; font-size:13px; line-height:1.7; }
.vod-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.vod-page { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); margin:auto; padding-top:calc(var(--header-height) + 64px); min-height:72vh; }
.vod-page-heading { margin-bottom:38px; max-width:840px; }
.vod-page-heading h1 { font-size:clamp(34px,4.5vw,64px); letter-spacing:-.055em; line-height:1.12; font-weight:600; margin:0 0 18px; }
.vod-page-heading p { color:#aeb2bc; font-size:16px; line-height:1.8; }
.vod-page-heading .seyir-eyebrow { display:flex; gap:10px; align-items:center; }
.vod-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:12px 22px; border-radius:100px; border:1px solid transparent; background:var(--seyir-gold); color:#17120b; cursor:pointer; font-weight:600; font-size:14px; transition:background .2s,transform .2s; text-align:center; }
.vod-button:hover { background:#ffcf71; transform:translateY(-1px); }
.vod-button--secondary { background:#ffffff08; border-color:#ffffff24; color:#f5f5f5; }
.vod-button--secondary:hover { background:#ffffff15; }
.vod-button--danger { background:#3a2023; color:#ffc3c3; }
.vod-button:disabled { opacity:.45; cursor:default; transform:none; }
.vod-text-link { display:inline-flex; align-items:center; gap:8px; color:#c9cbd1; white-space:nowrap; font-size:13px; }
.vod-discover { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:22px 0 46px; padding:20px 0; border-block:1px solid #ffffff12; }
.vod-discover>span { margin-right:auto; color:#aeb2bc; font-size:13px; }
.vod-discover a { border:1px solid #ffffff18; background:#ffffff05; padding:10px 17px; border-radius:100px; font-size:13px; display:inline-flex; align-items:center; gap:8px; }
.vod-discover a:hover { border-color:var(--seyir-gold); color:var(--seyir-gold); }
.vod-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff6f69; box-shadow:0 0 0 4px #ff6f6918; }
.vod-live-preview { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }.vod-live-preview-card { display:flex; align-items:center; gap:16px; border:1px solid #ffffff15; border-radius:14px; background:#14171c; padding:20px; }.vod-live-preview-card img { width:48px; height:48px; object-fit:contain; border-radius:9px; background:#fff; }.vod-live-preview-card div { flex:1; }.vod-live-preview-card strong { font-size:14px; }.vod-live-preview-card p { color:#9298a4; font-size:12px; margin-top:5px; }.vod-live-player { overflow:hidden; border-radius:20px; background:#000; aspect-ratio:16/9; }
.seyir-experience .genre-page,.seyir-experience .seyir-search { padding-top:calc(var(--header-height) + 40px); }
.vod-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 20px; }
.vod-rail { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 2px 18px; scrollbar-width:thin; scrollbar-color:#4a4b50 transparent; }
.vod-rail .vod-card { flex:0 0 clamp(150px,16vw,218px); scroll-snap-align:start; }
.vod-card { min-width:0; position:relative; }
.vod-card__link { display:block; }
.vod-card__poster { position:relative; aspect-ratio:2/3; border-radius:13px; background:linear-gradient(135deg,#222731,#14171d); overflow:hidden; border:1px solid #ffffff10; }
.vod-card__poster img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.vod-card__link:hover img { transform:scale(1.035); }
.vod-card h3 { font-size:14px; font-weight:500; margin:13px 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vod-card p { color:#8d929e; font-size:12px; }
.vod-card__play { position:absolute; inset:0; display:grid; place-items:center; background:#0004; opacity:0; transition:opacity .2s; }
.vod-card__play .vod-icon { box-sizing:content-box; background:var(--seyir-gold); padding:14px; border-radius:50%; color:#15100a; }
.vod-card__link:hover .vod-card__play,.vod-card__link:focus-visible .vod-card__play { opacity:1; }
.vod-card__rank { position:absolute; bottom:8px; left:12px; font-size:68px; line-height:1; font-weight:800; color:#fff; text-shadow:0 2px 12px #000c; letter-spacing:-.07em; z-index:1; }
.vod-tag { display:inline-flex; padding:5px 10px; border-radius:5px; background:#ffc34b21; color:#ffcd6b; font-size:11px; line-height:1.4; font-weight:600; }
.vod-card__poster>.vod-tag { position:absolute; top:10px; left:10px; background:#17130bd9; }
.vod-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; padding-bottom:24px; border-bottom:1px solid #ffffff15; }
.vod-tabs a { padding:10px 15px; border-radius:100px; color:#aeb2bc; font-size:13px; }
.vod-tabs a[aria-current],.vod-tabs a:hover { background:#ffc34b16; color:var(--seyir-gold); }
.vod-library-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.vod-library-tile { display:flex; align-items:center; gap:22px; padding:30px; border:1px solid #ffffff13; background:linear-gradient(115deg,#1a1e25,#12151a); border-radius:18px; transition:border-color .2s; }
.vod-library-tile:hover { border-color:#ffc34b77; }
.vod-tile-icon { display:grid; place-items:center; width:58px; height:58px; flex:none; border-radius:16px; background:#ffc34b12; color:var(--seyir-gold); }
.vod-tile-copy { flex:1; }.vod-tile-copy h2 { font-size:19px; font-weight:500; margin-bottom:8px; }.vod-tile-copy p { font-size:13px; color:#9298a4; line-height:1.7; }
.vod-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:18px 0; margin-bottom:18px; }.vod-toolbar label { display:flex; gap:10px; align-items:center; }
.vod-toolbar input,.vod-history-select { accent-color:var(--seyir-gold); width:18px; height:18px; }
.vod-history-select { position:absolute; top:12px; right:12px; z-index:2; }
.vod-card-remove { margin-top:10px; border:0; color:#ffb7b7; background:#ffffff08; padding:9px 12px; border-radius:8px; cursor:pointer; font-size:12px; }
.vod-empty { grid-column:1/-1; border:1px dashed #ffffff20; border-radius:18px; padding:65px 24px; text-align:center; }.vod-empty h2 { font-size:24px; margin-bottom:12px; }.vod-empty p { color:#aeb2bc; margin-bottom:24px; }
.vod-notice { color:#b9bdc7; font-size:14px; line-height:1.8; margin-block:20px; }.vod-notice:empty { display:none; }
.vod-pagination { display:flex; justify-content:center; padding-top:30px; gap:12px; }
.vod-form { display:grid; gap:18px; background:#15181e; border:1px solid #ffffff12; padding:28px; border-radius:18px; margin-bottom:30px; max-width:820px; }.vod-form h2 { font-size:24px; font-weight:500; }.vod-form label { display:grid; gap:8px; font-size:13px; color:#b4bac7; }
.vod-form :is(input,textarea,select) { width:100%; min-width:0; border:1px solid #ffffff20; border-radius:10px; background:#0d1015; color:#f4f4f4; padding:13px; }.vod-form textarea { resize:vertical; }.vod-form button { justify-self:start; }
.vod-comments { width:100%; padding-block:44px; margin-top:35px; border-top:1px solid #ffffff16; }.vod-comments h2 { font-size:clamp(24px,3vw,36px); letter-spacing:-.04em; margin-bottom:8px; }.vod-comments .vod-form { margin-top:24px; }
.vod-comment { border-bottom:1px solid #ffffff12; padding:20px 0; max-width:820px; }.vod-comment p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; }.vod-comment time { display:block; color:#9298a4; font-size:12px; margin-top:10px; }
.vod-ticket { grid-column:1/-1; padding:26px; border:1px solid #ffffff16; border-radius:16px; }.vod-ticket p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; margin-top:12px; }.vod-ticket h2 { font-size:20px; }.vod-ticket-reply { background:#ffc34b0b; padding:18px; border-left:2px solid var(--seyir-gold); margin-top:18px; }
.vod-live-grid { display:grid; gap:22px; grid-template-columns:repeat(2,minmax(0,1fr)); }.vod-channel { background:#13161b; border:1px solid #ffffff13; border-radius:18px; padding:26px; }.vod-channel-heading { display:flex; align-items:center; gap:18px; }.vod-channel-heading img { width:64px; height:64px; object-fit:contain; border-radius:12px; background:#fff; }.vod-channel-heading>div { flex:1; }.vod-channel-heading h2 { font-size:20px; }
.vod-schedule { list-style:none; margin-top:25px; }.vod-schedule li { display:flex; align-items:start; gap:16px; padding:18px 0; border-top:1px solid #ffffff10; color:#9ba3b2; }.vod-schedule time { font-variant-numeric:tabular-nums; font-size:13px; }.vod-schedule strong { color:#eceef2; font-size:14px; }.vod-schedule p { font-size:12px; margin-top:6px; }.vod-schedule .is-now time { color:var(--seyir-gold); }
.vod-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:10000; max-width:min(90vw,600px); border:1px solid #ffffff30; background:#242831; color:#fff; border-radius:12px; padding:16px 22px; box-shadow:0 16px 60px #0008; font-size:14px; }
.vod-shorts-page { display:grid; grid-template-columns:minmax(200px,1fr) minmax(280px,440px) minmax(120px,1fr); align-items:center; gap:40px; max-width:1200px; margin:auto; padding:calc(var(--header-height) + 28px) 28px 20px; }.vod-shorts-intro h1 { font-size:clamp(32px,4vw,54px); line-height:1.1; letter-spacing:-.04em; margin-bottom:24px; }.vod-shorts-intro p { color:#aeb2bc; margin-bottom:18px; }
.vod-shorts-feed { height:calc(100dvh - 138px); max-height:850px; min-height:440px; overflow-y:auto; scroll-snap-type:y mandatory; border-radius:20px; background:#030405; scrollbar-width:none; }.vod-short { position:relative; height:100%; scroll-snap-align:start; overflow:hidden; }.vod-short video { width:100%; height:100%; object-fit:contain; }.vod-short-meta { position:absolute; left:20px; bottom:35px; right:92px; pointer-events:none; text-shadow:0 2px 8px #000; }.vod-short-meta h2 { font-size:19px; line-height:1.4; }.vod-short-meta p { margin-top:10px; font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vod-short-actions { position:absolute; right:12px; bottom:38px; display:grid; gap:12px; }.vod-short-actions button { background:#17191fbc; color:#fff; border:1px solid #ffffff30; border-radius:100px; min-width:54px; min-height:46px; padding:10px; cursor:pointer; font-size:12px; }.vod-short-actions button[aria-pressed=true] { color:var(--seyir-gold); border-color:var(--seyir-gold); }.vod-short [data-short-toggle] { position:absolute; top:16px; left:16px; background:#17191fbc; color:white; border:1px solid #ffffff25; border-radius:100px; padding:10px 16px; cursor:pointer; }
.vod-dialog { border:1px solid #ffffff22; border-radius:20px; background:#13161b; color:#fff; padding:30px; width:min(90vw,640px); max-height:85dvh; margin:auto; overflow:auto; }.vod-dialog::backdrop { background:#000b; backdrop-filter:blur(6px); }.vod-dialog .vod-form { padding:18px; }.vod-dialog h2 { margin-bottom:20px; }
@media(min-width:1500px) { .vod-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:1050px) { .seyir-experience .seyir-header__nav { gap:18px; }.vod-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.vod-shorts-page { grid-template-columns:1fr minmax(280px,420px); }.vod-shorts-state { grid-column:2; }.vod-channel-heading { flex-wrap:wrap; } }
@media(max-width:760px) {
    .seyir-experience { --header-height:116px; --page-gutter:20px; }.seyir-experience .seyir-header__inner { flex-wrap:wrap; height:auto; min-height:112px; gap:0 12px; padding-top:10px; }.seyir-experience .seyir-header__logo { margin-right:auto; }.seyir-experience .seyir-header__nav { display:flex; order:3; width:100%; justify-content:space-between; gap:10px; overflow:auto; padding-top:8px; }.seyir-experience .seyir-header__nav-link { font-size:12px; min-height:42px; }.seyir-experience .seyir-header__search-btn span { display:none; }.seyir-experience .seyir-header__actions { gap:7px; }.seyir-experience .seyir-header__login { padding:0 12px; font-size:12px; height:36px; }.seyir-experience .seyir-header__profile-avatar { width:34px; height:34px; }
    .seyir-experience .seyir-home { padding-top:132px; }.seyir-experience .seyir-hero { min-height:490px; height:66vh; max-height:630px; border-radius:18px; }.seyir-experience .seyir-hero__content { padding:26px; align-items:end; }.seyir-experience .seyir-hero__bg::after { background:linear-gradient(0deg,#090b10f5 4%,#090b10aa 48%,#090b1020); }.seyir-experience .seyir-hero__title { font-size:40px; }.seyir-experience .seyir-hero__btn { padding:12px 18px; }.seyir-experience .seyir-hero__nav { display:none; }.vod-discover>span { width:100%; margin-bottom:4px; }.vod-discover a { font-size:12px; padding:9px 13px; }
    .vod-page { padding-top:calc(var(--header-height) + 34px); }.vod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }.vod-library-tiles,.vod-live-grid { grid-template-columns:1fr; }.vod-library-tile { padding:22px; gap:16px; }.vod-tile-icon { width:44px; height:44px; border-radius:12px; }.vod-tile-copy h2 { font-size:17px; }.vod-tabs { flex-wrap:nowrap; overflow:auto; }.vod-tabs a { white-space:nowrap; }.vod-form { padding:20px; }.vod-card__rank { font-size:54px; }
    .vod-shorts-page { display:block; padding:calc(var(--header-height) + 12px) 12px 0; max-width:470px; }.vod-shorts-intro { display:none; }.vod-shorts-feed { height:calc(100dvh - var(--header-height) - 30px); min-height:400px; border-radius:14px; }.vod-shorts-state { text-align:center; padding:12px; }.vod-shorts-page~.seyir-footer { display:none; }.vod-channel { padding:20px; }.vod-channel-heading .vod-button { padding:10px 16px; }.vod-toolbar { gap:12px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .seyir-experience *, .seyir-experience *::before, .seyir-experience *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
