:root { --bg: #05070b; --bg-soft: #0a0f18; --panel: rgba(16, 23, 35, 0.92); --panel-2: #101827; --card: #0d1420; --card-hover: #121c2d; --line: rgba(255, 255, 255, 0.08); --text: #f8fafc; --muted: #93a4bb; --blue: #3b82f6; --blue-2: #60a5fa; --danger: #fb7185; --green: #22c55e; --radius: 18px; --shadow: 0 24px 80px rgba(0, 0, 0, 0.38); } * { box-sizing: border-box; } html { background: var(--bg); color-scheme: dark; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% -10%, rgba(59,130,246,.18), transparent 30%), radial-gradient(circle at -10% 30%, rgba(37,99,235,.09), transparent 28%), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } button, input, select { font: inherit; } button { color: inherit; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; } [hidden] { display: none !important; } .app-shell { min-height: 100vh; } .boot-screen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 16px; color: var(--muted); } .boot-screen strong { color: #fff; font-size: 20px; letter-spacing: -.03em; } .boot-spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--blue); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .brand-mark { width: 48px; height: 48px; border-radius: 14px; background: #020305; position: relative; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06); } .brand-mark span { font-weight: 950; font-size: 31px; letter-spacing: -.08em; margin-left: -2px; } .brand-mark i { position:absolute; width: 11px; height:11px; background:var(--blue); border-radius:50%; right:7px; top:7px; box-shadow:0 0 22px rgba(59,130,246,.8); } .layout { display:grid; grid-template-columns: 250px minmax(0,1fr); min-height:100vh; } .sidebar { position: sticky; top:0; height:100vh; padding: 24px 18px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(9,13,21,.97), rgba(5,7,11,.94)); border-right:1px solid var(--line); backdrop-filter: blur(24px); z-index: 20; display:flex; flex-direction:column; } .sidebar-brand { display:flex; align-items:center; gap:12px; padding: 0 8px 22px; } .sidebar-brand .brand-mark { width:42px;height:42px;border-radius:12px; } .sidebar-brand .brand-mark span { font-size:27px; } .sidebar-brand strong { font-size:19px; letter-spacing:-.03em; } .nav-list { display:flex; flex-direction:column; gap:5px; } .nav-button { appearance:none; border:0; background:transparent; color:#9aabc0; min-height:46px; border-radius:13px; padding:0 13px; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left; transition:.18s ease; } .nav-button:hover { background:rgba(255,255,255,.05); color:#fff; } .nav-button.active { background:rgba(59,130,246,.14); color:#fff; box-shadow: inset 3px 0 0 var(--blue); } .nav-button .nav-icon { width:22px; display:grid; place-items:center; font-size:17px; } .nav-button .nav-label { font-weight:650; } .sidebar-footer { margin-top:auto; padding:16px 8px 0; display:grid; gap:10px; } .source-pill { background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:14px; padding:12px; min-width:0; } .source-pill small { color:var(--muted); display:block; margin-bottom:3px; } .source-pill strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .main { min-width:0; } .topbar { height:84px; position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:14px; padding: max(18px, env(safe-area-inset-top)) 28px 14px; background:linear-gradient(180deg, rgba(5,7,11,.94) 0%, rgba(5,7,11,.78) 70%, rgba(5,7,11,0) 100%); backdrop-filter: blur(18px); } .mobile-brand { display:none; } .page-heading { min-width:0; } .page-heading h1 { margin:0; font-size:28px; letter-spacing:-.04em; line-height:1.1; } .page-heading p { margin:5px 0 0; color:var(--muted); font-size:13px; } .top-actions { margin-left:auto; display:flex; gap:9px; } .search-box { width:min(420px,42vw); position:relative; } .search-box input { width:100%; height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(16,24,39,.82); color:#fff; padding:0 42px 0 15px; outline:none; transition:.18s ease; } .search-box input:focus { border-color:rgba(96,165,250,.55); box-shadow:0 0 0 4px rgba(59,130,246,.09); } .search-box span { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; } .content { padding: 8px 28px 56px; } .hero { min-height:310px; border-radius:26px; position:relative; overflow:hidden; margin-bottom:32px; background:linear-gradient(120deg,#0c1729,#09101a 55%,#05070b); border:1px solid var(--line); box-shadow:var(--shadow); } .hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 44%, rgba(59,130,246,.22), transparent 34%); } .hero-art { position:absolute; inset:0 0 0 40%; background-size:cover; background-position:center; opacity:.45; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%); mask-image:linear-gradient(90deg,transparent 0%,#000 42%); } .hero-copy { position:relative; z-index:1; max-width:640px; padding:58px 52px; } .hero-kicker { color:var(--blue-2); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.13em; } .hero h2 { margin:10px 0 10px; font-size:clamp(32px,4vw,56px); line-height:.96; letter-spacing:-.055em; } .hero p { margin:0 0 24px; max-width:540px; color:#b7c4d5; line-height:1.6; } .hero-actions { display:flex; gap:10px; flex-wrap:wrap; } .section-block { margin: 0 0 34px; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; } .section-head h2 { margin:0; font-size:20px; letter-spacing:-.03em; } .section-head p { margin:4px 0 0; color:var(--muted); font-size:13px; } .section-head button { border:0;background:transparent;color:var(--blue-2);cursor:pointer;font-weight:700; } .media-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap:20px 15px; } .media-grid.live-grid { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); } .media-card { min-width:0; position:relative; cursor:pointer; border-radius:16px; transition: transform .18s ease, background .18s ease; outline:none; } .media-card:hover, .media-card:focus-visible { transform:translateY(-4px); } .poster { aspect-ratio: 2/3; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#111c2d,#080c13); position:relative; border:1px solid rgba(255,255,255,.07); box-shadow:0 12px 28px rgba(0,0,0,.22); } .live-card .poster { aspect-ratio: 16/8.5; } .poster img { width:100%;height:100%;object-fit:cover;display:block; } .live-card .poster img { object-fit:contain; padding:20px; } .poster-fallback { width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:18px;color:#c3d0df;font-weight:800;background:radial-gradient(circle at 75% 20%,rgba(59,130,246,.18),transparent 30%); } .poster::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.48));pointer-events:none; } .card-badge { position:absolute; top:9px; left:9px; z-index:2; background:rgba(2,4,8,.78); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); border-radius:999px; padding:5px 8px; font-size:10px; font-weight:850; letter-spacing:.05em; } .downloaded-badge { left:auto; right:9px; color:#b7f7cc; } .card-play { position:absolute; inset:0; display:grid;place-items:center; opacity:0; z-index:2; transition:.18s ease; background:rgba(2,5,10,.28); } .media-card:hover .card-play, .media-card:focus-visible .card-play { opacity:1; } .card-play span { width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#05070b;font-size:18px;padding-left:2px;box-shadow:0 8px 24px rgba(0,0,0,.35); } .card-meta { padding:9px 4px 0; } .card-title { font-weight:750; font-size:14px; line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .card-subtitle { color:var(--muted);font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .progress-track { height:3px;border-radius:9px;background:rgba(255,255,255,.11);overflow:hidden;margin-top:9px; } .progress-track i { display:block;height:100%;background:var(--blue);border-radius:inherit; } .category-row { display:flex;gap:9px;overflow:auto;padding:2px 0 12px;scrollbar-width:none; } .category-row::-webkit-scrollbar { display:none; } .chip { white-space:nowrap; border:1px solid var(--line); background:rgba(255,255,255,.035); color:#b6c4d5; padding:9px 13px;border-radius:999px;cursor:pointer;transition:.18s ease; } .chip:hover,.chip.active { color:#fff;background:rgba(59,130,246,.14);border-color:rgba(96,165,250,.28); } .empty-state { min-height:320px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:40px; } .empty-state .empty-icon { font-size:42px;margin-bottom:14px;filter:grayscale(.2); } .empty-state strong { display:block;color:#fff;font-size:19px;margin-bottom:7px; } .empty-state p { max-width:480px;line-height:1.55;margin:0 auto; } .primary-button,.secondary-button,.danger-button { appearance:none;border:0;border-radius:13px;min-height:42px;padding:0 16px;font-weight:800;cursor:pointer;transition:.18s ease; display:inline-flex;align-items:center;justify-content:center;gap:8px; } .primary-button { background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(59,130,246,.22); } .primary-button:hover { background:#4b8df8;transform:translateY(-1px); } .primary-button.compact { min-height:36px;padding:0 12px;font-size:12px;border-radius:10px; } .secondary-button { background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.08); } .secondary-button:hover { background:rgba(255,255,255,.12); } .danger-button { background:rgba(251,113,133,.12); color:#ff9aab; border:1px solid rgba(251,113,133,.18); } .icon-button { appearance:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center; } .icon-button.glass { background:rgba(8,12,18,.56);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1); } .icon-button.bare { background:transparent; } .icon-button:hover { background:rgba(255,255,255,.12); } /* REV3.2 — görünür ve gerçek tam ekran düğmesi */ .fullscreen-button { appearance:none; border:1px solid rgba(255,255,255,.16); background:rgba(8,12,18,.58); color:#fff; min-width:112px; height:38px; padding:0 12px; border-radius:11px; display:inline-flex !important; align-items:center; justify-content:center; gap:7px; cursor:pointer; font:inherit; font-size:12px; font-weight:800; letter-spacing:.01em; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; position:relative; z-index:6; -webkit-tap-highlight-color:transparent; } .fullscreen-button:hover { background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24); } .fullscreen-button:focus-visible { outline:2px solid rgba(55,160,255,.95);outline-offset:2px; } .fullscreen-glyph { font-size:18px;line-height:1;transform:translateY(-1px); } .fullscreen-label { white-space:nowrap; } .player:fullscreen, .player:-webkit-full-screen { width:100vw !important; height:100vh !important; max-width:none !important; max-height:none !important; inset:0 !important; right:auto !important; bottom:auto !important; aspect-ratio:auto !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:#000 !important; } .player:fullscreen video, .player:-webkit-full-screen video { width:100%;height:100%;object-fit:contain; } body.native-player-fullscreen { overflow:hidden; } /* REV3.4 — true browser fullscreen + iOS native fullscreen */ html:fullscreen, html:-webkit-full-screen { width:100% !important; height:100% !important; background:#000 !important; } html:fullscreen body, html:-webkit-full-screen body { width:100% !important; height:100% !important; margin:0 !important; overflow:hidden !important; background:#000 !important; } html:fullscreen .player-layer, html:-webkit-full-screen .player-layer { position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; z-index:2147483646 !important; pointer-events:auto !important; background:#000 !important; } html:fullscreen .player-layer .player, html:-webkit-full-screen .player-layer .player { inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; aspect-ratio:auto !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } html::backdrop { background:#000; } .login-page { min-height:100vh; display:grid; grid-template-columns: minmax(0,1.1fr) minmax(420px,.9fr); } .login-visual { position:relative;overflow:hidden;padding:clamp(34px,6vw,92px);display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;background:linear-gradient(145deg,#08101d,#05070b 58%); } .login-visual::before { content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 32% 35%,rgba(59,130,246,.28),transparent 22%),radial-gradient(circle at 70% 16%,rgba(30,64,175,.18),transparent 24%);filter:blur(8px); } .login-grid-art { position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,#000,transparent 88%); } .login-copy { position:relative;max-width:760px; } .login-copy .brand-row { display:flex;gap:13px;align-items:center;margin-bottom:34px; } .login-copy h1 { font-size:clamp(46px,7vw,96px);line-height:.88;letter-spacing:-.065em;margin:0 0 22px; } .login-copy p { max-width:620px;color:#9fb0c6;font-size:17px;line-height:1.65; } .feature-pills { display:flex;flex-wrap:wrap;gap:9px;margin-top:24px; } .feature-pills span { border:1px solid var(--line);background:rgba(255,255,255,.035);padding:8px 11px;border-radius:999px;color:#c6d2e1;font-size:12px; } .login-panel { min-height:100vh;display:grid;place-items:center;padding:40px;background:rgba(8,11,17,.82);backdrop-filter:blur(20px);border-left:1px solid var(--line); } .login-card { width:min(480px,100%); } .login-card h2 { font-size:30px;letter-spacing:-.04em;margin:0 0 8px; } .login-card > p { color:var(--muted);line-height:1.55;margin:0 0 26px; } .segmented { display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.05);padding:4px;border-radius:13px;margin-bottom:18px; } .segmented button { border:0;background:transparent;color:var(--muted);height:38px;border-radius:10px;cursor:pointer;font-weight:750; } .segmented button.active { background:#172234;color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2); } .form-field { display:grid;gap:7px;margin-bottom:14px; } .form-field label { color:#b7c5d5;font-size:12px;font-weight:750; } .form-field input,.form-field select { width:100%;height:48px;border-radius:13px;border:1px solid var(--line);background:#0c121d;color:#fff;padding:0 14px;outline:none; } .form-field input:focus,.form-field select:focus { border-color:rgba(96,165,250,.55);box-shadow:0 0 0 4px rgba(59,130,246,.08); } .form-help { font-size:12px;color:var(--muted);line-height:1.5;margin:3px 0 18px; } .form-error { background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.2);color:#ff9bab;padding:11px 13px;border-radius:12px;font-size:13px;margin-bottom:14px; } .login-submit { width:100%;height:48px; } .offline-entry { margin-top:14px;width:100%; } .settings-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; } .settings-card { background:rgba(13,20,32,.8);border:1px solid var(--line);border-radius:18px;padding:20px; } .settings-card h3 { margin:0 0 6px;font-size:16px; } .settings-card p { color:var(--muted);line-height:1.5;font-size:13px;margin:0 0 16px; } .setting-row { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-top:1px solid var(--line); } .setting-row:first-of-type { border-top:0; } .switch { position:relative;width:48px;height:28px;flex:0 0 auto; } .switch input { opacity:0;width:0;height:0; } .switch span { position:absolute;inset:0;background:#293140;border-radius:999px;transition:.2s;cursor:pointer; } .switch span::after { content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.35); } .switch input:checked + span { background:var(--blue); } .switch input:checked + span::after { transform:translateX(20px); } .storage-meter { height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0 7px; } .storage-meter i { display:block;height:100%;background:linear-gradient(90deg,var(--blue),#8b5cf6);border-radius:inherit; } .storage-caption { font-size:12px;color:var(--muted); } .download-row { display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:13px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025);margin-bottom:10px; } .download-thumb { width:76px;aspect-ratio:16/10;background:#101827;border-radius:10px;overflow:hidden;display:grid;place-items:center; } .download-thumb img { width:100%;height:100%;object-fit:cover; } .download-info { min-width:0; } .download-info strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .download-info small { display:block;color:var(--muted);margin-top:4px; } .download-progress { height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:8px; } .download-progress i { display:block;height:100%;background:var(--blue); } .player-layer { position:fixed;inset:0;z-index:1000;pointer-events:none;background:transparent; } .player-backdrop { position:absolute;inset:0;background:rgba(0,0,0,.86);opacity:0;pointer-events:none;transition:opacity .2s ease; } .player { position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:min(520px,calc(100vw - 36px));height:auto;aspect-ratio:16/9;background:#000;overflow:hidden;user-select:none;pointer-events:auto;border-radius:18px;border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 80px rgba(0,0,0,.58);transition:width .22s ease,height .22s ease,right .22s ease,bottom .22s ease,border-radius .22s ease; } .player video { width:100%;height:100%;object-fit:contain;background:#000;display:block; } .player-layer.expanded { pointer-events:auto;background:#000; } .player-layer.expanded .player-backdrop { opacity:1;pointer-events:auto; } .player-layer.expanded .player { inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none; } body.player-expanded { overflow:hidden; } .player-layer:not(.expanded) .player-topbar { padding:10px 11px;gap:8px; } .player-layer:not(.expanded) .player-title { font-size:13px; } .player-layer:not(.expanded) .eyebrow { font-size:9px;margin-bottom:1px; } .player-layer:not(.expanded) .player-top-actions #audioButton, .player-layer:not(.expanded) .player-top-actions #subtitleButton, .player-layer:not(.expanded) .player-top-actions #pipButton { display:none; } .player-layer:not(.expanded) .player-center-controls .secondary, .player-layer:not(.expanded) .player-center-controls .episode-control { display:none !important; } .player-layer:not(.expanded) .round-control.primary { width:54px;height:54px;font-size:21px; } .player-layer:not(.expanded) .player-bottombar { padding:7px 10px 8px; } .player-layer:not(.expanded) .player-bottom-actions { min-height:30px;margin-top:0; } .player-layer:not(.expanded) .volume-wrap { display:none; } .player-layer:not(.expanded) .time-label { font-size:9px;width:38px; } .player-layer:not(.expanded) .live-badge { font-size:9px; } .player-shade { position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.58),transparent 30%,transparent 58%,rgba(0,0,0,.72));opacity:0;transition:opacity .25s ease; } .player-controls { position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .2s ease; } .player-controls.visible { opacity:1;pointer-events:auto; } .player:has(.player-controls.visible) .player-shade { opacity:1; } .player-topbar { position:absolute;top:0;left:0;right:0;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:14px; } .player-title-wrap { min-width:0;flex:1; } .player-title { font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .eyebrow { color:#c2cedd;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:3px; } .player-top-actions { display:flex;gap:8px; } .player-center-controls { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:18px;align-items:center; } .round-control { border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px);transition:.15s ease; } .round-control:hover { transform:scale(1.06); } .round-control.primary { width:74px;height:74px;background:#fff;color:#05070b;font-size:27px;box-shadow:0 12px 34px rgba(0,0,0,.35); } .round-control.secondary,.round-control.episode-control { width:50px;height:50px;background:rgba(12,18,27,.58);color:#fff;border:1px solid rgba(255,255,255,.11);font-weight:800; } .round-control.episode-control { width:46px;height:46px;font-size:18px; } .round-control:disabled { opacity:.26;cursor:default;transform:none; } .player-bottombar { position:absolute;left:0;right:0;bottom:0;padding:18px max(20px,env(safe-area-inset-right)) max(18px,calc(env(safe-area-inset-bottom) + 8px)) max(20px,env(safe-area-inset-left)); } .timeline-row { display:flex;align-items:center;gap:11px; } .time-label { width:54px;font-size:11px;color:#d6dfeb;font-variant-numeric:tabular-nums; } .time-label:last-child { text-align:right; } .seek-bar,.volume-bar { accent-color:var(--blue);cursor:pointer; } .seek-bar { width:100%; } .player-bottom-actions { display:flex;align-items:center;gap:10px;min-height:40px;margin-top:5px; } .volume-wrap { display:flex;align-items:center;gap:2px; } .volume-bar { width:90px; } .spacer { flex:1; } .live-badge { display:flex;align-items:center;gap:7px;font-size:11px;font-weight:900;letter-spacing:.07em; } .live-badge i { width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 12px rgba(239,68,68,.8); } .player-loading,.player-error { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;gap:12px;z-index:3; } .player-error { max-width:420px;padding:24px; } .player-error strong { font-size:20px; } .player-error p { color:#aab8c9;line-height:1.5;margin:0; } .track-menu { position:absolute;top:74px;right:20px;width:min(320px,calc(100vw - 40px));background:rgba(11,16,24,.94);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.11);border-radius:15px;box-shadow:0 20px 60px rgba(0,0,0,.42);padding:7px;z-index:5;max-height:55vh;overflow:auto; } .track-menu button { width:100%;border:0;background:transparent;color:#c7d3e2;padding:11px 12px;border-radius:10px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:12px; } .track-menu button:hover,.track-menu button.active { background:rgba(59,130,246,.13);color:#fff; } .next-up { position:absolute;right:22px;bottom:100px;background:rgba(10,15,23,.92);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px);border-radius:14px;padding:13px;min-width:250px;box-shadow:var(--shadow);z-index:4; } .next-up span { color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:850;display:block; } .next-up strong { display:block;margin:4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px; } .modal-layer,.context-layer { position:fixed;inset:0;z-index:800;display:grid;place-items:center;padding:24px; } .modal-backdrop,.context-backdrop { position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(9px); } .modal-card { width:min(980px,100%);max-height:min(88vh,900px);overflow:auto;position:relative;background:#0b111b;border:1px solid rgba(255,255,255,.11);border-radius:24px;box-shadow:0 35px 110px rgba(0,0,0,.58); } .modal-close { position:absolute;top:14px;right:14px;z-index:5; } .detail-hero { min-height:390px;position:relative;overflow:hidden;border-radius:24px 24px 0 0;background:#0a1019; } .detail-backdrop { position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5; } .detail-backdrop::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b111b 0%,rgba(11,17,27,.7) 46%,rgba(11,17,27,.32)),linear-gradient(0deg,#0b111b,transparent 55%); } .detail-copy { position:relative;z-index:2;display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:end;padding:62px 42px 34px;min-height:390px; } .detail-poster { width:180px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#111b2a;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 42px rgba(0,0,0,.36); } .detail-poster img { width:100%;height:100%;object-fit:cover; } .detail-title { font-size:clamp(30px,5vw,54px);letter-spacing:-.055em;line-height:.95;margin:0 0 12px; } .detail-meta { display:flex;flex-wrap:wrap;gap:8px;color:#b4c1d0;font-size:12px;margin-bottom:13px; } .detail-meta span { padding-right:8px;border-right:1px solid rgba(255,255,255,.17); } .detail-meta span:last-child { border:0; } .detail-plot { color:#c0cbd9;line-height:1.6;max-width:680px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } .detail-actions { display:flex;gap:9px;flex-wrap:wrap;margin-top:20px; } .detail-body { padding:12px 42px 42px; } .episode-list { display:grid;gap:9px;margin-top:14px; } .season-title { margin:24px 0 8px;font-size:18px; } .episode-row { display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid transparent;cursor:pointer;transition:.16s ease; } .episode-row:hover { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07); } .episode-art { width:120px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#111a28; } .episode-art img { width:100%;height:100%;object-fit:cover; } .episode-info { min-width:0; } .episode-info strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .episode-info small { color:var(--muted);display:block;margin-top:4px; } .episode-actions { display:flex;gap:6px; } .context-layer { z-index:1100; place-items:end center; } .context-menu { position:relative;width:min(420px,100%);background:#111823;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:8px;margin-bottom:max(10px,env(safe-area-inset-bottom));box-shadow:0 28px 90px rgba(0,0,0,.55); } .context-menu button { width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:14px;border-radius:11px;cursor:pointer; } .context-menu button:hover { background:rgba(255,255,255,.06); } .context-menu button.danger { color:#ff9bad; } .toast-region { position:fixed;right:18px;bottom:18px;z-index:2000;display:grid;gap:8px;pointer-events:none; } .toast { min-width:260px;max-width:min(430px,calc(100vw - 36px));background:rgba(15,22,33,.94);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.35);animation:toastIn .2s ease; } .toast strong { display:block;font-size:13px; } .toast span { color:var(--muted);font-size:12px;display:block;margin-top:3px;line-height:1.4; } @keyframes toastIn { from { transform:translateY(8px);opacity:0; } } .skeleton { background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:shimmer 1.2s linear infinite; } @keyframes shimmer { to { background-position:-200% 0; } } .media-card { content-visibility:auto; contain-intrinsic-size:260px 410px; } .load-more-wrap { display:flex;justify-content:center;padding:26px 0 8px; } .load-more-button { min-width:180px; } .mobile-more-button { display:none; } @media (max-width: 980px) { .layout { grid-template-columns: 82px minmax(0,1fr); } .sidebar { padding-left:10px;padding-right:10px;align-items:center; } .sidebar-brand strong,.nav-label,.source-pill { display:none; } .nav-button { width:52px;justify-content:center;padding:0; } .nav-button.active { box-shadow:inset 0 -3px 0 var(--blue); } .sidebar-brand { padding-left:0;padding-right:0; } .settings-grid { grid-template-columns:1fr; } .login-page { grid-template-columns:1fr; } .login-visual { display:none; } .login-panel { border:0; } } @media (max-width: 700px) { body { background:var(--bg); } .layout { display:block;padding-bottom:74px; } .sidebar { position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:auto;z-index:50;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);display:block;background:rgba(8,12,19,.97);backdrop-filter:none; } .sidebar-brand,.sidebar-footer { display:none; } .nav-list { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;overflow:visible; } .nav-list::-webkit-scrollbar { display:none; } .nav-button { width:100%;min-width:0;min-height:52px;display:grid;place-items:center;gap:0;padding:3px 1px;font-size:10px;border-radius:11px; } .nav-button.mobile-secondary { display:none; } .nav-button .nav-icon { font-size:18px; } .nav-label { display:block;font-size:9px;margin-top:2px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .topbar { height:auto;min-height:68px;padding:calc(9px + env(safe-area-inset-top)) 12px 8px;flex-wrap:wrap;background:rgba(5,7,11,.96);backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.035); } .mobile-brand { display:block; } .mobile-brand .brand-mark { width:36px;height:36px;border-radius:10px; } .page-heading h1 { font-size:21px; } .page-heading p { display:none; } .search-box { order:3;width:100%; } .search-box input { height:42px;border-radius:12px; } .top-actions { margin-left:auto;display:flex;align-items:center;gap:6px; } .mobile-more-button { display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:12px; } .mobile-more-button.active { background:rgba(59,130,246,.16);border-color:rgba(96,165,250,.25); } .content { padding:10px 12px 28px; } .category-row { position:sticky;top:67px;z-index:12;margin:0 -12px 12px;padding:9px 12px 10px;background:rgba(5,7,11,.97);border-bottom:1px solid rgba(255,255,255,.045); } .chip { min-height:38px;padding:8px 12px; } .hero { min-height:218px;border-radius:17px;margin-bottom:22px;box-shadow:none; } .hero-art { inset:0 0 0 28%;opacity:.34; } .hero-copy { padding:30px 20px;max-width:88%; } .hero h2 { font-size:32px; } .hero p { font-size:13px;line-height:1.45;margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .section-block { margin-bottom:26px; } .section-head { margin-bottom:11px; } .section-head h2 { font-size:18px; } .section-head p { display:none; } .media-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 9px; } .media-grid.live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .media-card { contain-intrinsic-size:180px 290px; } .poster { border-radius:12px;box-shadow:none; } .live-card .poster img { padding:10px; } .card-meta { padding:7px 2px 0; } .card-title { font-size:12.5px; } .card-subtitle { font-size:10.5px;margin-top:3px; } .card-play { display:none; } .login-panel { padding:22px 18px; } .player { right:8px;bottom:calc(76px + env(safe-area-inset-bottom));width:calc(100vw - 16px);border-radius:14px; } .player-layer.expanded .player { inset:0;width:100%;height:100%;border-radius:0; } .player-center-controls { gap:10px; } .round-control.primary { width:62px;height:62px; } .round-control.secondary { width:44px;height:44px;font-size:12px; } .round-control.episode-control { width:40px;height:40px; } .volume-wrap { display:none; } .player-top-actions .icon-button { width:38px;height:38px; } .player-layer:not(.expanded) .player-title-wrap { max-width:58vw; } .player-layer:not(.expanded) .player-bottombar { padding:4px 8px 6px; } .player-layer:not(.expanded) .timeline-row { gap:6px; } .player-layer:not(.expanded) .time-label { display:none; } .detail-copy { grid-template-columns:96px minmax(0,1fr);padding:54px 16px 20px;gap:13px;min-height:285px; } .detail-poster { width:96px; } .detail-hero { min-height:285px; } .detail-title { font-size:26px; } .detail-plot { font-size:12.5px;-webkit-line-clamp:3; } .detail-body { padding:7px 14px 24px; } .detail-actions .primary-button,.detail-actions .secondary-button { min-height:44px; } .episode-row { grid-template-columns:86px minmax(0,1fr) auto;gap:9px;padding:8px; } .episode-art { width:86px; } .episode-info strong { font-size:13px; } .episode-info small { font-size:11px; } .episode-actions .secondary-button { width:38px;padding:0;font-size:0; } .episode-actions .secondary-button::after { content:"↓";font-size:16px; } .modal-layer { padding:0;align-items:end; } .modal-card { width:100%;max-height:94vh;border-radius:20px 20px 0 0; } .modal-backdrop,.context-backdrop { backdrop-filter:none; } .context-menu { border-radius:17px 17px 0 0;margin-bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom)); } .context-menu button { min-height:48px; } .toast-region { left:10px;right:10px;bottom:84px; } .toast { max-width:none;width:100%; } } @media (max-width: 480px) { .media-grid.live-grid { grid-template-columns:1fr; } .live-card .poster { aspect-ratio:16/7.8; } .hero h2 { font-size:28px; } } @media (max-width: 420px) { .media-grid.live-grid { grid-template-columns:1fr; } .player-top-actions #audioButton { display:none; } .episode-control { display:none !important; } } /* REV2: kategori akışı ve bölüm içi arama */ .catalog-intro { display:flex;align-items:end;justify-content:space-between;gap:16px;margin:2px 0 15px; } .catalog-intro strong { font-size:19px;letter-spacing:-.02em; } .catalog-intro span { color:var(--muted);font-size:13px; } .category-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px; } .category-card { appearance:none;border:1px solid var(--line);background:linear-gradient(145deg,rgba(16,24,39,.92),rgba(9,14,23,.9)); min-height:92px;border-radius:16px;padding:16px 17px;display:grid;grid-template-columns:46px minmax(0,1fr) auto; align-items:center;gap:13px;color:#fff;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease; } .category-card:hover,.category-card:focus-visible { transform:translateY(-2px);border-color:rgba(96,165,250,.34);background:var(--card-hover);outline:none; } .category-card-icon { width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(59,130,246,.13);color:var(--blue-2);font-size:20px; } .category-card-copy { min-width:0;display:grid;gap:5px; } .category-card-copy strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px; } .category-card-copy small { color:var(--muted);font-size:12px; } .category-card-arrow { color:#6f83a0;font-size:28px;line-height:1; } .catalog-selection-bar { display:flex;align-items:center;gap:13px;margin:2px 0 17px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.055); } .catalog-selection-bar > div { min-width:0;display:grid;gap:3px; } .catalog-selection-bar strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px; } .catalog-selection-bar span { color:var(--muted);font-size:12px; } .secondary-button.compact { min-height:36px;padding:0 12px;font-size:12px;border-radius:10px;white-space:nowrap; } @media (max-width:700px) { .catalog-intro { align-items:start;display:grid;gap:4px;margin-top:0; } .catalog-intro strong { font-size:17px; } .catalog-intro span { font-size:11.5px; } .category-grid { grid-template-columns:1fr;gap:8px; } .category-card { min-height:72px;border-radius:13px;padding:11px 12px;grid-template-columns:40px minmax(0,1fr) auto;gap:10px; } .category-card-icon { width:40px;height:40px;border-radius:11px;font-size:18px; } .category-card-copy strong { font-size:13px; } .category-card-copy small { font-size:10.5px; } .catalog-selection-bar { margin-top:0;gap:9px;padding-bottom:10px; } .catalog-selection-bar strong { font-size:13px; } .catalog-selection-bar span { font-size:10.5px; } } /* REV3.2 responsive fullscreen control */ @media (max-width:700px) { .fullscreen-button { min-width:42px;width:42px;height:38px;padding:0;border-radius:10px; } .fullscreen-button .fullscreen-label { display:none; } .fullscreen-button .fullscreen-glyph { font-size:19px; } } /* FINAL — gerçek tarayıcı/native video fullscreen. Sahte sayfa-içi büyütme fullscreen fallback olarak kullanılmaz. */ #video:fullscreen, #video:-webkit-full-screen { position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; max-width:none !important; max-height:none !important; object-fit:contain !important; background:#000 !important; border:0 !important; border-radius:0 !important; } body.native-player-fullscreen { overflow:hidden !important; background:#000 !important; } /* FINAL NATIVE CONTROLS Fullscreen is delegated entirely to the browser/OS native