.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
:root {
    --bg-primary: #0a0a0b;
    --bg-secondary: #141417;
    --accent-color: #ff3333;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    --font-main: 'Outfit', sans-serif;
    /* Tesla: app.js Tesla UA iken ~52px; sürüş uyarı şeridi için viport payı (zıplamayı azaltır) */
    --tesla-media-notice-reserve: 0px;
    /* Menü adası (alt bar) video alanına taşmasın diye ayrılan boşluk */
    --menu-island-reserve: 70px;
    /* Oynatırken “Geri Dön” satırı — max-height’a eklenmezse kutu 100vh ile taşar, üst kesilir (%20 büyütülmüş düğmeye uyum) */
    --player-header-reserve: 64px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow: hidden;
    height: calc(100vh - var(--tesla-media-notice-reserve));
    width: 100vw;
}

/* Background */
.app-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, #1a1a1d 0%, #0a0a0b 100%);
    z-index: -1;
}

header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: rgba(10, 10, 11, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 100;
}

.logo-text {
    font-size: 32px;
    font-weight: 800;
    cursor: pointer;
}

.logo-t { color: #4488ff; }
.logo-o { color: #ff3333; }
.logo-b { color: #ffcc00; }
.logo-e { color: #00cc88; }

.search-bar {
    flex: 1;
    max-width: 700px;
    margin: 0 40px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-bar input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--glass-border);
    padding: 14px 25px;
    border-radius: 40px;
    color: white;
    font-size: 17px;
    transition: 0.3s;
}

.search-bar input:focus {
    outline: none;
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.2);
}

.search-bar button#search-btn-yt1,
.search-bar button#search-btn-yt2,
.search-bar button#search-btn-yt3 {
    position: static;
    transform: none;
    background: var(--accent-color);
    border: none;
    color: white;
    padding: 0 25px;
    height: 46px; /* Input ile tam uyum */
    border-radius: 30px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-grid {
    flex: 1;
    display: grid;
    /* Tesla ekranlarında 3-4 sütun ideal; kart genişliği minimum 320px */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
    gap: 20px;
    row-gap: 32px;
    padding: 16px 20px 0; /* Alt boşluk tamamen sıfırlandı */
    overflow-y: auto;
    min-height: 0;
    /* Scrollbar gizleme */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.video-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* YouTube sekme: liste alanı esnsin; footer slot grid dışında sabit kalsın */
#view-yt1:not(.player-active),
#view-yt2:not(.player-active),
#view-yt3:not(.player-active) {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.trend-footer-host {
    flex-shrink: 0;
    width: 100%;
}

.trend-more-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 8px 0 14px;
}

.trend-more-trigger {
    height: 10px;
    width: 100%;
    opacity: 0;
    margin-bottom: -10px;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--accent-color, #ff0000);
    border-radius: 50%;
    animation: grid-spin 0.8s linear infinite;
}

.trend-more-end-msg {
    display: none;
}

.video-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card:hover .thumb-wrap img {
    transform: scale(1.05);
}

.video-card:hover .video-title {
    color: var(--accent-color);
}

.thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1d;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.video-info {
    display: flex;
    gap: 12px;
    padding: 0 4px;
}

.video-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.video-text-group {
    flex: 1;
    min-width: 0;
}

.video-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.video-header-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px 5px 0;
    min-height: 0;
}

.player-main .video-header-box {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.player-active .video-header-box {
    flex-shrink: 0;
    position: relative;
    min-height: var(--player-header-reserve);
    padding: 10px 8px 6px;
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    margin-bottom: 4px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
}

/* V1/V2/V3 motor etiketi: şerit yüksekliği içinde dikey ortalı (Geri Dön ile aynı eksen) */
.player-active .video-header-trailing {
    position: absolute;
    right: max(8px, env(safe-area-inset-right, 0px));
    top: 0;
    bottom: 0;
    transform: none;
    margin-left: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    z-index: 3;
}

.player-active .video-header-box .back-to-grid-small {
    align-self: center;
}

.player-active .watermark-version--header {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    align-self: center;
}

.video-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom Menu */
.bottom-menu {
    position: fixed;
    bottom: 15px; /* 2mm (10px) aşağı kaydırıldı */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 18, 0.85);
    backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    padding: 10px 30px;
    border-radius: 60px;
    display: flex;
    gap: 15px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.7);
    z-index: 1000;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s;
    color: var(--text-secondary);
}

.menu-item svg { width: 28px; height: 28px; margin-bottom: 5px; }
.menu-item span { font-size: 12px; font-weight: 700; }
.menu-item svg { fill: currentColor; }

.menu-item:hover, .menu-item.active {
    color: white;
    background: rgba(255,255,255,0.1);
}

.menu-item.active svg { fill: currentColor; }

/* View Management */
.view-section {
    display: none;
    flex-direction: column;
    padding-bottom: 10px; /* Diğer paddingler kaldırıldığı için burası minimal tutuldu */
}
.view-section.active {
    display: flex;
    animation: viewIn 0.5s ease;
    flex: 1;
    min-height: 0;
}

@keyframes viewIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Player Views */
.player-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000;
}

/* Welcome Screen */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px); /* Ekranı dikeyde daha iyi doldurması için */
    padding: 40px 20px;
    text-align: center;
    background: transparent;
    border: none;
    margin: 0 auto;
}

.welcome-logo {
    font-size: clamp(60px, 8vw, 100px); /* Responsive boyut */
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -2px;
    line-height: 1.2; /* Kesilmeyi önlemek için yeterli yükseklik */
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-screen h1 {
    font-size: 36px;
    font-weight: 800;
    margin: 20px 0 10px;
    color: #fff;
}

.welcome-screen p {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 20px;
}

/* Ana sayfa: logo kesilmemesi için üst boşluk */
#view-home .welcome-screen.welcome-screen--home-nudge {
    padding-top: 20px;
}

/* Section Specific Search */
.section-search {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

/* Category Chips */
.category-chips {
    display: flex;
    align-items: center; /* Dikey ortalama */
    gap: 12px;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    scrollbar-width: none; /* Firefox */
}

.category-chips::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--glass-border);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.3s;
    color: var(--text-primary);
}

.chip:hover {
    background: rgba(255,255,255,0.15);
}

.chip.active {
    background: white;
    color: black;
    border-color: white;
}

.video-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 10px 0;
    margin-bottom: 5px;
}

.back-to-grid {
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--glass-border);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 20px;
    font-weight: 600;
}

.back-to-grid-small {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    padding: 10px 22px; /* %20 artırıldı */
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px; /* %20 artırıldı */
    cursor: pointer;
    transition: all 0.2s;
}

.back-to-grid-small:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(2px);
}

.network-indicator {
    display: flex;
    align-items: center;
    gap: 15px; /* %20 artırıldı */
    padding: 8px 20px; /* %20 artırıldı */
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.net-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px; /* %20 artırıldı */
    height: 29px; /* %20 artırıldı */
    width: 34px; /* %20 artırıldı */
}

.net-bars .bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.bar1 { height: 25%; }
.bar2 { height: 50%; }
.bar3 { height: 75%; }
.bar4 { height: 100%; }

/* Speed Colors & States */
.network-indicator.is-poor .net-bars .bar1 { background: #ff4d4d; box-shadow: 0 0 8px rgba(255, 77, 77, 0.5); }
.network-indicator.is-poor .net-speed { color: #ff4d4d; }

.network-indicator.is-fair .net-bars .bar1,
.network-indicator.is-fair .net-bars .bar2 { background: #ffb020; box-shadow: 0 0 8px rgba(255, 176, 32, 0.5); }
.network-indicator.is-fair .net-speed { color: #ffb020; }

.network-indicator.is-good .net-bars .bar { background: #00ff88; box-shadow: 0 0 8px rgba(0, 255, 136, 0.5); }
.network-indicator.is-good .net-speed { color: #00ff88; }

.net-speed-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.net-speed {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; /* %20 artırıldı */
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    min-width: 82px; /* %20 artırıldı */
}

.net-hat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; /* %20 artırıldı */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    min-width: 82px; /* %20 artırıldı */
    transition: color 0.4s ease;
}

.network-indicator.is-good .net-hat { color: rgba(0, 255, 136, 0.45); }
.network-indicator.is-fair .net-hat { color: rgba(255, 176, 32, 0.45); }
.network-indicator.is-poor .net-hat { color: rgba(255, 77, 77, 0.45); }

.back-to-grid:hover {
    background: rgba(255,255,255,0.2);
}

/* Player View Layout (New) */
.player-view-layout {
    display: flex;
    gap: 30px;
    height: calc(100vh - 165px - var(--tesla-media-notice-reserve));
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 40px; /* Sadece yanlardan pay bırak */
}

.player-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Videoyu dikeyde ortala */
    min-width: 0;
    height: 100%;
}

.player-view-layout {
    gap: 0;
}

.player-container {
    position: relative;
    width: 100%;
    max-width: 100%; /* Sınırları zorla */
    height: auto;
    max-height: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

.player-container img, 
.player-container canvas, 
.player-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.player-inline-title {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 3px 110px 6px 10px;
    box-sizing: border-box;
    max-width: 100%;
    font-size: clamp(0.75rem, 1.45vw, 0.9rem);
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.58);
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 0, 0, 0.45);
    z-index: 40;
    pointer-events: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* External Controls Container (Invisible Wrapper) */
.external-controls {
    position: absolute;
    bottom: 1%; /* Video alanının alt kenarından %1 içeride olacak şekilde (yüksekliğin %99'u) ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    z-index: 100;
    transition: 0.3s;
    background: none !important; /* Dış çerçeveyi kaldır */
    border: none !important;
    padding: 0 !important;
}

/* Tek ve Gerçek Kumanda Paneli */
.player-controls-inner {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    flex-direction: row; /* Yatay düzen */
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width: 100%;
}

.external-controls .premium-controls {
    position: relative !important;
    opacity: 1 !important;
    background: none !important;
    padding: 0 !important;
    display: block !important;
    pointer-events: auto !important;
    width: 100%;
}

.player-view-layout.is-fullscreen .player-main {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 85px - var(--tesla-media-notice-reserve)) !important; /* Menü barının tam üstünde kalsın */
    position: relative;
    overflow: hidden;
    background: #000;
}

.player-view-layout.is-fullscreen .video-header-box {
    display: none !important;
}

.player-view-layout.is-fullscreen .player-container {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.player-view-layout.is-fullscreen .external-controls {
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%; /* Sinema modunda hala tam genişlik */
    max-width: none !important;
    border-radius: 0;
    padding: 20px 50px;
    background: rgba(0, 0, 0, 0.6);
}

.player-view-layout.is-fullscreen .external-controls .premium-controls {
    max-width: 100%; /* Tam genişlik */
    margin: 0;
}

/* Tech Badge */
.tech-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: white;
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 12px;
    z-index: 10;
}

.player-video-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.back-to-grid-small {
    background: var(--accent-color); /* Kırmızı renk uygulandı */
    border: none;
    color: white;
    padding: 10px 22px; /* %20 artırıldı */
    border-radius: 12px;
    cursor: pointer;
    font-size: 20px; /* %20 artırıldı (17 -> 20) */
    font-weight: 700;
    transition: 0.3s;
}

.back-to-grid-small:hover {
    background: #ff5555;
    transform: scale(1.05);
}

.video-details {
    display: none; /* Artık üstte header box var */
}

/* Player Controls */
.premium-controls {
    width: 100%;
    background: #111;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    margin-top: 10px;
}

.player-controls-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 60px;
}

.progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.progress-bar-wrap {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    position: absolute;
    left: 0; top: 0; width: 0%; height: 100%;
    background: #ff0000;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 0 10px rgba(255,0,0,0.5);
}

.progress-buffer {
    position: absolute;
    left: 0; top: 0; width: 0%; height: 100%;
    background: rgba(255, 255, 255, 0.36);
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}

.progress-thumb {
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10;
    transition: transform 0.2s;
}

.progress-bar-wrap:hover .progress-thumb {
    transform: translate(-50%, -50%) scale(1);
}

.controls-row {
    display: contents;
}

.left-ctrl {
    display: flex;
    align-items: center;
    gap: 10px; /* Butonlar birbirine yaklaştırıldı */
}

.left-ctrl .time-display {
    margin-left: 12px; /* Süre göstergesi ses çubuğundan biraz ayrıştırıldı */
}

.right-ctrl {
    display: flex;
    align-items: center;
    gap: 25px;
}

.vol-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 95px; /* Ses çubuğu alanı daraltıldı */
}

.vol-slider {
    width: 55px; /* Ses çubuğu genişliği daraltılarak akış çubuğuna yer kazandırıldı */
    height: 4px;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.time-display {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.5px;
}

.ctrl-btn {
    background: transparent !important;
    border: none !important;
    color: white;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Buton genişliği daraltılarak simgelerin yaklaşması sağlandı */
    height: 44px;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.85;
}

.ctrl-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.ctrl-btn svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Version Badge (Updated) */
.version-badge {
    position: fixed;
    bottom: 25px;
    right: 40px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.8;
    z-index: 2000;
}

.version-badge .latest { color: #00ff88; font-weight: 800; font-size: 14px; }

.video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 20px 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-indicator.visible {
    opacity: 1;
}

.video-indicator span {
    font-size: 14px;
    font-weight: 600;
    color: white;
    letter-spacing: 1px;
}

/* Video Grid Loading Overlay */
.loading-overlay-grid {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
}

.loading-overlay-grid .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top: 4px solid #ff0000;
    border-radius: 50%;
    animation: grid-spin 0.8s linear infinite;
}

@keyframes grid-spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 18px;
    font-weight: 800;
    color: white;
    letter-spacing: 3px;
}

/* Application Layout Improvements */
.app-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--tesla-media-notice-reserve));
    width: 100vw;
    overflow: hidden;
    padding-bottom: 0; /* Menü adası zaten sabit, buraya padding gerekmiyor */
    box-sizing: border-box;
}

main {
    flex: 1;
    /* Flex çocukta varsayılan min-height:auto taşır; % yükseklik ve oyuncu yerleşimi için 0 şart */
    min-height: 0;
    overflow-y: auto;
    padding: 0 0 0 20px; /* En alta kadar inmesi için padding sıfırlandı */
    position: relative;
    display: flex;
    flex-direction: column;
}

main#content-area.player-shell-active {
    overflow: hidden;
}

/* Kaydırma çubuğunu gizle (temiz görünüm için) */
main::-webkit-scrollbar {
    display: none;
}

/* Video Oynatılırken Arama Barını Gizle */
.player-active .search-and-categories {
    display: none;
}

/*
 * ─── Oynatıcı yerleşimi (kalıcı kural) ───
 * İç içe kutularda height:100vh veya “viewport kadar” sabitleme KULLANMA: main/app padding
 * sonrası gerçek yüksekliği aşar; .app-container overflow:hidden üst kenarı keser.
 * Zincir her halkada min-height:0 + flex:1 ile çalışır; video kutusu parent % ile sınırlı.
 * Toggle: app.js togglePlayer → main#content-area.player-shell-active
 */
#view-yt1.player-active,
#view-yt2.player-active,
#view-yt3.player-active {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.player-active .player-view-layout {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    padding: 12px 14px 0;
    margin: 0;
    box-sizing: border-box;
}

/* Tesla: pause’da üst “yalnızca ses” şeridi kaybolunca görünür içerik yukarı zıplamasın (PC’de reserve=0) */
.tesla-ua .player-active .player-view-layout.player-paused {
    padding-top: var(--tesla-media-notice-reserve);
}

.player-active .player-main {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    margin: 0;
}

/* Liste modunda 16:9 kutu şart; oynatırken kalan yüksekliği doldur (geniş ekranda alt siyah boşluk kalmasın) */
.player-active .player-container {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    position: relative;
    display: block;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    aspect-ratio: unset;
}

.player-active .external-controls {
    height: 70px; 
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px; /* Ayrı durduğu için her köşe yuvarlak */
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 0;
}

/* Tesla & Responsive Düzeltmeleri */
@media (max-width: 1100px) {
    .player-active .player-view-layout.is-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--tesla-media-notice-reserve));
        z-index: 9999;
        background: #000;
        padding: 0;
        margin: 0;
    }
    .tesla-ua .player-active .player-view-layout.is-fullscreen.player-paused {
        padding-top: var(--tesla-media-notice-reserve);
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .is-fullscreen .player-main {
        height: calc(100vh - var(--tesla-media-notice-reserve));
    }
    .is-fullscreen .player-container {
        height: calc(100vh - var(--tesla-media-notice-reserve));
        border-radius: 0;
    }
    .is-fullscreen .external-controls {
        bottom: 1%; /* Tam ekranda video alanının %99 yüksekliğinde sabitlendi */
        width: 85%;
        opacity: 0.85;
    }
    
    .player-active .player-main {
        flex: 1;
        min-height: 0;
        width: 100%;
    }

    .player-active .player-container {
        flex: 1;
        min-height: 0;
        max-height: none;
        aspect-ratio: unset;
    }
}
/* Fixed Bottom Bar Layout */
.bottom-bar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42.5px; /* Menü adasının (85px) tam dikey yarısı */
    background: #d0d0d0;
    display: flex;
    align-items: flex-end; /* MENÜYÜ ALTA YASLA (Üst çizgisi tam ortada kalır) */
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}

.bottom-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #FBBC05 0%, #E6A800 100%);
    backdrop-filter: none;
    padding: 8px 14px;
    border-radius: 25px;
    border: 2px solid rgba(130, 90, 0, 0.55);
    display: flex;
    align-items: center;
    box-shadow: 0 12px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    width: max-content;
    min-width: 0;
    height: 85px;
    margin-bottom: 0;
}

.menu-logo-fixed {
    position: absolute;
    left: 40px;
    bottom: 13px; 
    display: flex;
    align-items: center;
    font-size: 54px; 
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    color: #111;
}

.menu-logo-fixed span {
    /* Saçma görünümü (stroke çakışması) düzeltmek için gölge bazlı çerçeve */
    text-shadow: 
        -2px -2px 0 #fff,  
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff,
         4px 4px 10px rgba(0,0,0,0.5); /* Ana gölge */
}

.version-badge {
    position: absolute;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    color: #555;
    opacity: 0.8;
}

.menu-items-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
}

.menu-item {
    display: flex;
    flex-direction: column; /* İkon üstte, metin altta */
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 25px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-secondary);
    min-width: 90px;
    height: 70px; /* Düğme yüksekliği artırıldı */
}

.menu-item i {
    font-size: 36px; /* İkonlar %100 büyütüldü */
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.menu-item span {
    font-size: 10px; /* Uzun metinler (ANA SAYFA gibi) sığması için metin küçüldü */
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Satır atlamasın, tek satırda kalsın */
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.menu-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.05),
        0 5px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-item.active svg {
    transform: translateY(-2px);
}

.menu-item.active span {
    color: inherit;
}

/* Aktif menü: ikon + yazı renkleri (düğme arka planı değil) */
.menu-item[data-view="home"].active { color: #4cff88; }
#menu-youtube-hub.active { color: #ff4d4d; }
#menu-live-tv.active { color: #ffb020; }
.menu-item[data-view="settings"].active { color: #b38cff; }

/* Logo Colors (Re-defined for bottom bar) */
/* Logo Colors & Play Holes */
.has-play-hole {
    position: relative;
    display: inline-flex;
    isolation: isolate; /* Blend modunun dışa taşmasını engeller */
}

.has-play-hole::after {
    content: '';
    position: absolute;
    top: 60%; /* o harfi için biraz daha aşağı çekildi */
    left: 50%;
    transform: translate(-30%, -50%);
    width: 0.33em;
    height: 0.36em;
    background: #000;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
    z-index: 2;
    display: block !important;
    mix-blend-mode: destination-out; /* Şekli altındaki katmandan siler (şeffaf delik) */
}

/* b harfi için delik konumunu yarım mm aşağı çek */
.logo-b.has-play-hole::after, 
.logo-b2.has-play-hole::after {
    top: 60%;
    left: 52%;
}

.logo-t { color: #EA4335 !important; }
.logo-o { color: #4285F4 !important; }
.logo-b { color: #FBBC05 !important; }
.logo-e { color: #34A853 !important; }
/* Sol Alt Köşe Logosu */
.bottom-left-container {
    position: absolute;
    left: 25px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1001;
    pointer-events: none;
    opacity: 0.95;
    transition: opacity 0.3s;
}

.bottom-left-logo {
    display: flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: calc(2.592rem * 1.2); /* önceki sol alt boyutu × 1.2 */
    letter-spacing: -2px;
}

.global-version {
    font-family: monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.15);
    letter-spacing: 1px;
    margin-left: 5px;
    margin-top: -5px; /* Logoya biraz yaklaştırmak için */
}

.video-header-trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* YouTube motor seçici: tam ekran / video / menü üstünde (watermark 9999 üzeri) */
.youtube-engine-popover {
    position: fixed;
    z-index: 12000;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

.youtube-engine-popover-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    min-width: 168px;
    background: rgba(16, 16, 20, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.youtube-engine-opt {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 15px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.youtube-engine-opt:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.youtube-engine-opt.is-current {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.45);
    background: rgba(0, 255, 136, 0.12);
}



.logo-t2, .logo-T2 { color: #EA4335 !important; }
.logo-u { color: #4285F4 !important; }
.logo-b2 { color: #FBBC05 !important; }
.logo-e2 { color: #34A853 !important; }

/* Video Filigranı (Watermark) — V etiketi üst şeride; logo köşeye yakın, boşluğu kapatır */
.player-watermark {
    position: absolute;
    right: clamp(3px, 0.55vw, 8px);
    top: clamp(3px, 0.45vw, 8px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
}

.watermark-logo {
    display: flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 2.65vw, 34px);
    letter-spacing: -1px;
    line-height: 1;
    filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.8));
}

.watermark-version {
    font-family: monospace;
    font-size: 0.8vw;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.8);
    letter-spacing: 1px;
    margin-right: 2px;
}

/* Üst şerit: koyu zeminde okunur; düşük kontrast ama #000 üzerinde kaybolmaz (koyu yazı + opacity hataydı) */
.watermark-version--header {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: clamp(11px, 1.08vw, 13px);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(210, 212, 220, 0.55);
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 1px rgba(0, 0, 0, 1);
    pointer-events: none;
    user-select: none;
}

.player-active .watermark-version--header {
    color: rgba(222, 224, 232, 0.62);
}




.logo-tube .l-t { color: #FF0000; }
.logo-tube .l-u { color: #00FFCC; }
.logo-tube .l-b { color: #9B51E0; }
.logo-tube .l-e { color: #FF9900; }

/* Hide Old Header */
header { display: none; }

/* Search & Categories Row */
.search-and-categories {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    padding: 0 10px;
    min-height: 50px; /* Sabit yükseklik ile dikey denge */
}

/* Search Bar Narrowing */
.search-bar {
    flex: 0 1 700px; /* Genişletildi */
    margin-bottom: 0;
}

.search-bar input {
    padding: 12px 20px;
    padding-right: 110px;
    font-size: 15px;
}

.search-and-categories .category-chips {
    margin-bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Input Wrapper & Tools */
.input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.input-tools-external {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 8px;
    align-items: center;
}

.tool-btn {
    background: none;
    border: none;
    padding: 0 10px;
    min-width: 46px;
    min-height: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    transition: background 0.2s;
    color: rgba(255,255,255,0.6);
}

.tool-btn:hover:not(.active) {
    background: rgba(255,255,255,0.05);
}

.tool-btn svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.tool-btn.active {
    color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.mic-btn.active {
    color: #ff3333 !important;
    background: rgba(255, 51, 51, 0.15);
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.5);
    border: 1px solid rgba(255, 51, 51, 0.3);
    animation: mic-pulse 1.5s infinite;
}

@keyframes mic-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Pause Overlay */
.pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
}

/* Oynatma doğal bittiğinde (audio ended) — video alanı ortası */
.video-ended-banner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
}

.video-ended-banner.is-visible {
    display: flex;
}

.video-ended-banner-text {
    padding: 14px 26px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: #fff;
    text-transform: uppercase;
}

.player-paused .pause-overlay {
    display: flex;
}

.pause-icon {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.2);
}

.pause-icon svg {
    width: 40px;
    height: 40px;
    fill: white;
}

/* Video Overlay & Spinner Improvements */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.78);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 60;
    backdrop-filter: blur(10px);
}

.is-buffering .video-overlay {
    display: flex;
}

.overlay-text {
    color: white;
    font-size: 16px;
    font-weight: 800;
    margin-top: 18px;
    letter-spacing: 1.4px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.safety-warning-overlay {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
}

.safety-warning-home {
    margin: 30px auto;
    padding: 30px;
    background: rgba(255, 204, 0, 0.1);
    border: 2px solid rgba(255, 204, 0, 0.3);
    border-radius: 15px;
    color: #ffcc00;
    font-size: 20px;
    max-width: 800px;
    line-height: 1.6;
    font-weight: 600;
}

.video-overlay .spinner {
    width: 76px;
    height: 76px;
    border: 5px solid rgba(255, 255, 255, 0.16);
    border-top: 5px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

@keyframes spin { to { transform: rotate(360deg); } }
/* Menü Barı İzolasyonu ve Bölüm Sınırları */
.view-section {
    padding-bottom: 95px !important; /* Menü barının (85px) üzerine 10px pay */
}

/* Alt Bar Tasarımı */
.bottom-bar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 57.5px; /* Menü adasının orta noktası (15px offset + 85px/2) */
    background: rgba(255, 255, 255, 0.08); /* Gri bar */
    backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

/* Bağlı hesap: gri şeridin içi, dikey orta, sağa hizalı (çip tek tıkla menü) */
.bottom-bar-container .account-linked-footer {
    position: absolute;
    right: max(10px, env(safe-area-inset-right, 0px));
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-width: min(54vw, 315px);
    text-align: right;
    pointer-events: none;
}

.account-linked-wrap {
    position: relative;
    display: inline-block;
    pointer-events: auto;
    text-align: right;
}

.account-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    width: auto;
    max-width: min(54vw, 315px);
    min-width: min(51vw, 255px);
    padding: 4px 18px 4px 4px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-main);
    cursor: pointer;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-profile-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

.account-profile-chip.account-profile-chip--menu-open {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.account-profile-chip__avatar-wrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    background: rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.account-profile-chip__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #222;
}

.account-profile-chip__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500; /* İnceltildi (600/700'den 500'e) */
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: inherit;
    text-transform: uppercase;
}

.account-profile-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    min-width: 260px;
    max-width: min(94vw, 320px);
    padding: 8px;
    background: rgba(18, 18, 22, 0.95);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 20px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.8), 
        0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 1100;
    border: 1px solid rgba(255, 255, 255, 0.05);
    animation: menuFadeIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.account-profile-menu__email {
    padding: 14px 16px;
    margin-bottom: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35); /* Daha soluk */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.account-profile-menu__row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7); /* Beyaz yerine soft gri */
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Elektrik mavisini temizle */
.account-profile-menu__row.account-profile-menu__row--link {
    color: rgba(255, 255, 255, 0.7);
}

.account-profile-menu__row:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.account-profile-menu__row--danger {
    color: rgba(255, 77, 77, 0.6) !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0 0 12px 12px;
}

.account-profile-menu__row--danger:hover {
    background: rgba(255, 77, 77, 0.08);
    color: #ff6666 !important;
}

.account-profile-menu__row--admin {
    color: rgba(251, 186, 5, 0.6) !important;
}

.account-profile-menu__row--admin:hover {
    background: rgba(251, 186, 5, 0.08);
    color: #fcc233 !important;
}

.account-profile-menu[hidden] {
    display: none !important;
}

/* Versiyon ve Logo Alanı İyileştirme */
.bottom-left-container {
    opacity: 0.5; /* Daha fazla saydamlık */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.global-version {
    color: rgba(255, 255, 255, 0.15);
    font-size: 9px;
    margin-top: -2px;
}

.account-profile-menu__email {
    margin: 0 20px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaed;
    font-size: 12px;
    font-weight: 400;
    color: #5f6368;
    word-break: break-all;
    text-align: left;
    line-height: 1.35;
}

.account-profile-menu__row {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 20px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: #1a73e8;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1.35;
}

.account-profile-menu__row:hover {
    background: #f1f3f4;
}

.account-profile-menu__row--admin {
    color: #c5221f;
    font-weight: 600;
}

.account-profile-menu__row--admin:hover {
    background: #fce8e6;
}

.account-profile-menu__row--admin[hidden] {
    display: none !important;
}

.account-profile-menu__row--danger {
    color: #202124;
    border-top: 1px solid #e8eaed;
    margin-top: 2px;
    padding-top: 12px;
    font-weight: 500;
}

.account-profile-menu__row--danger:hover {
    background: #f1f3f4;
}

/* Sürüm AG 260504.0272 */

.welcome-entry {
    margin-top: 28px;
    max-width: 800px; /* Genişletildi ki butonlar yan yana sığsın */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.welcome-entry__title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.welcome-entry__actions {
    display: flex;
    flex-direction: row; /* Yan yana olması sağlandı */
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.welcome-entry__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    min-width: 200px;
    padding: 0 28px;
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 520px) {
    .welcome-entry__btn {
        min-width: 240px;
        min-height: 58px;
        font-size: 18px;
    }
}

/* Google butonu: eski uygulama stili (AG 260505.0294) */
.welcome-entry__btn--google {
    background: rgba(66, 133, 244, 0.25);
    border-color: rgba(66, 133, 244, 0.55);
}

.welcome-entry__btn--google:hover {
    background: rgba(66, 133, 244, 0.38);
}

.welcome-entry__btn--demo {
    background: rgba(255, 51, 51, 0.12);
    border-color: rgba(255, 51, 51, 0.45);
}

.welcome-entry__btn--demo:hover {
    background: rgba(255, 51, 51, 0.22);
}

.welcome-entry__btn--demo-exit {
    display: none;
    background: rgba(255, 255, 255, 0.06);
}

.welcome-entry--demo-active .welcome-entry__btn--demo {
    display: none;
}

.welcome-entry--demo-active .welcome-entry__btn--demo-exit {
    display: inline-flex;
}

.welcome-entry__badge {
    margin-top: 14px;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: rgba(120, 220, 160, 0.95);
    font-weight: 700;
}

.welcome-entry__badge--off {
    display: none !important;
}

/* Demo modu: videonun üstü; menü bandı ve logolar hariç tutulur (app.js ile konumlanır) */
.demo-overlay-markers {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10100;
    overflow: hidden;
}

.demo-overlay-marker {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(26px, 4vw, 40px);
    letter-spacing: 0.14em;
    color: rgba(255, 90, 90, 0.5);
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9);
    transform: rotate(-45deg);
    transform-origin: center center;
}

.account-linked-footer {
    font-family: var(--font-main);
    z-index: 1002;
}

.account-linked-footer--off {
    display: none !important;
}

/* ------------------------------------------------------------
   Ayarlar ekranı (AG 260505.0280)
------------------------------------------------------------ */
.settings-shell {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 12px 140px;
}

.settings-header h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
}

.settings-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 18px;
}

.settings-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.35);
}

.settings-card + .settings-card {
    margin-top: 14px;
}

.settings-card--warn {
    border-color: rgba(251, 188, 5, 0.35);
    background: rgba(251, 188, 5, 0.08);
}

.settings-card h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 6px;
}

.settings-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 720px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
}

.settings-field input,
.settings-field select {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-main);
    font-size: 15px;
    outline: none;
    color-scheme: dark;
}

.settings-field select option {
    color: #111;
    background: #fff;
}

.settings-field input:focus,
.settings-field select:focus {
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.12);
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    min-height: 46px;
    padding: 0 18px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.settings-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
}

.settings-btn--primary {
    background: rgba(0, 255, 136, 0.16);
    border-color: rgba(0, 255, 136, 0.36);
}

.settings-btn--primary:hover {
    background: rgba(0, 255, 136, 0.22);
    border-color: rgba(0, 255, 136, 0.5);
}

.google-g {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-block;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46px 46px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cpath%20fill%3D%27%23FFC107%27%20d%3D%27M43.611%2020.083H42V20H24v8h11.303C33.654%2032.657%2029.24%2036%2024%2036c-6.627%200-12-5.373-12-12s5.373-12%2012-12c3.059%200%205.842%201.154%207.961%203.039l5.657-5.657C34.046%206.053%2029.268%204%2024%204%2012.955%204%204%2012.955%204%2024s8.955%2020%2020%2020c11.045%200%2020-8.955%2020-20%200-1.341-.138-2.65-.389-3.917z%27%2F%3E%3Cpath%20fill%3D%27%23FF3D00%27%20d%3D%27M6.306%2014.691l6.571%204.819C14.655%2015.109%2019.0%2012%2024%2012c3.059%200%205.842%201.154%207.961%203.039l5.657-5.657C34.046%206.053%2029.268%204%2024%204%2016.318%204%209.656%208.337%206.306%2014.691z%27%2F%3E%3Cpath%20fill%3D%27%234CAF50%27%20d%3D%27M24%2044c5.135%200%209.84-1.971%2013.385-5.188l-6.181-5.238C29.24%2035.091%2026.747%2036%2024%2036c-5.219%200-9.616-3.323-11.284-7.946l-6.522%205.025C9.505%2039.556%2016.227%2044%2024%2044z%27%2F%3E%3Cpath%20fill%3D%27%231976D2%27%20d%3D%27M43.611%2020.083H42V20H24v8h11.303a12.04%2012.04%200%2001-4.099%205.574l.003-.002%206.181%205.238C36.99%2039.205%2044%2034%2044%2024c0-1.341-.138-2.65-.389-3.917z%27%2F%3E%3C%2Fsvg%3E");
    pointer-events: none;
}


.settings-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.settings-status.is-ok {
    color: rgba(0, 255, 136, 0.9);
}

.settings-status.is-err {
    color: rgba(255, 102, 102, 0.9);
}

.settings-version-badge {
    position: fixed;
    right: 16px;
    bottom: 70px;
    z-index: 5000;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
    opacity: 0.85;
}

.settings-version-latest {
    font-weight: 800;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

.settings-version-latest.is-unseen {
    color: rgba(0, 255, 136, 0.95);
}

.settings-version-history {
    display: none !important;
}

.settings-version-history .is-bold {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
}

.settings-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-tab {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    min-height: 40px;
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.settings-tab.is-active {
    background: rgba(0, 255, 136, 0.16);
    border-color: rgba(0, 255, 136, 0.36);
    color: rgba(0, 255, 136, 0.95);
}

.settings-panels {
    margin-top: 14px;
}

.settings-panel {
    display: none;
}

.settings-panel.is-active {
    display: block;
}

.settings-readonly {
    min-height: 46px;
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

/* Önerilen Videolar Sağ Sütun (Sidebar) Tasarımı */
.player-sidebar {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    overflow-y: auto;
    padding-left: 20px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.player-sidebar::-webkit-scrollbar {
    width: 6px;
}

.player-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
}

.sidebar-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-card {
    display: flex;
    gap: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 8px 8px 8px 6px;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.sidebar-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.sidebar-thumb-wrap {
    width: 150px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #000;
}

.sidebar-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
}

.sidebar-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

.sidebar-card-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-card-channel {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin: 5px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sinema modunda (fullscreen) sidebar'ı gizle */
.player-view-layout.is-fullscreen .player-sidebar {
    display: none !important;
}

/* Dar ekranlarda responsive gizlenme */
@media (max-width: 1100px) {
    .player-sidebar {
        display: none !important;
    }
}

/* Bağlantı Hızı İndikatörü */
.network-indicator {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 44px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: default;
    box-sizing: border-box;
}

.net-bar {
    width: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.5px;
    transition: all 0.3s ease;
}

.net-bar-1 { height: 6px; }
.net-bar-2 { height: 12px; }
.net-bar-3 { height: 18px; }
.net-bar-4 { height: 24px; }

/* Renk Durumları */
.network-indicator.speed-excellent .net-bar { background: #4CAF50; } /* Yeşil */
.network-indicator.speed-good .net-bar-1,
.network-indicator.speed-good .net-bar-2,
.network-indicator.speed-good .net-bar-3 { background: #8BC34A; } /* Sarı-Yeşil */
.network-indicator.speed-good .net-bar-4 { background: rgba(255, 255, 255, 0.2); }

.network-indicator.speed-fair .net-bar-1,
.network-indicator.speed-fair .net-bar-2 { background: #FFC107; } /* Sarı/Turuncu */
.network-indicator.speed-fair .net-bar-3,
.network-indicator.speed-fair .net-bar-4 { background: rgba(255, 255, 255, 0.2); }

.network-indicator.speed-poor .net-bar-1 { background: #F44336; } /* Kırmızı */
.network-indicator.speed-poor .net-bar-2,
.network-indicator.speed-poor .net-bar-3,
.network-indicator.speed-poor .net-bar-4 { background: rgba(255, 255, 255, 0.2); }

.network-indicator.speed-none .net-bar { background: rgba(255, 255, 255, 0.1); }

.net-text {
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 8px;
    line-height: 1;
    align-self: center;
}

/* Arama Geçmişi Dropdown */
.input-wrapper {
    position: relative;
}
.search-history-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #181818;
    border: 1px solid #333;
    border-radius: 12px;
    z-index: 2100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    max-height: 250px;
    overflow-y: auto;
    display: none;
    box-sizing: border-box;
}
.search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.search-history-item:hover {
    background: #2a2a2a;
}
.search-history-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.search-history-delete {
    background: transparent !important;
    border: none !important;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 0 5px;
    margin-left: 10px;
    transition: color 0.2s;
}
.search-history-delete:hover {
    color: #ff4444;
}