:root {

  --bg-dark: #080a12;

  --sidebar-bg: rgba(15, 18, 26, 0.95);

  --accent: #00d2ff;

  --text-main: #ffffff;

  --border: rgba(255, 255, 255, 0.08);

}



body {

  margin: 0; font-family: 'Inter', sans-serif;

  background: radial-gradient(circle at 50% 50%, #1a1f35 0%, #080a12 100%);

  color: var(--text-main); display: flex; height: 100vh; width: 100vw; overflow: hidden;

}



/* Hoşgeldin Mesajı Stili */

.welcome-msg {

    display: flex; align-items: center; justify-content: center; 

    height: 100%; width: 100%; color: rgba(255,255,255,0.2); 

    font-weight: 900; font-size: 20px; letter-spacing: 2px;

}



/* --- SİNEMA MODU --- */

body.cinema-mode .sidebar { width: 0 !important; min-width: 0 !important; opacity: 0; pointer-events: none; }

body.cinema-mode .toggle-btn { display: none; } 

body.cinema-mode .layout-header { display: none; }

body.cinema-mode .player-box:not(.active) { display: none; }

body.cinema-mode .player-box.active { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999; border-radius: 0; border: none; }



#cinema-btn { 

    position: absolute; top: 20px; right: 280px; z-index: 1001;

    background: rgba(0, 210, 255, 0.1); border: 1px solid var(--accent); color: var(--accent);

    padding: 8px 15px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s;

}

body.cinema-mode #cinema-btn { right: 20px; opacity: 0.5; }



/* --- PLAYER GRİD --- */

#players { display: grid; gap: 15px; height: 100%; transition: 0.4s; flex-grow: 1; }

.player-box { background: #000; border-radius: 20px; border: 2px solid var(--border); overflow: hidden; position: relative; transition: 0.3s; cursor: pointer; }

.player-box.active { border-color: var(--accent); box-shadow: 0 0 15px rgba(0, 210, 255, 0.2); }



.player-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 20px 15px 10px; color: var(--accent); font-size: 11px; font-weight: 700; z-index: 5; pointer-events: none; }



.pip-btn { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.5); border: 1px solid var(--accent); color: var(--accent); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; z-index: 10; backdrop-filter: blur(5px); }



/* --- SİDEBAR --- */

.sidebar { 

    width: 260px; min-width: 260px; height: 100vh;

    background: var(--sidebar-bg); backdrop-filter: blur(10px); 

    border-right: 1px solid var(--border); display: flex; flex-direction: column; 

    transition: 0.4s ease-in-out; position: relative; z-index: 1000; 

}

.sidebar.collapsed { width: 0; min-width: 0; overflow: hidden; }



.toggle-btn { 

    position: fixed; left: 248px; top: 25px; 

    background: var(--accent); border: none; width: 28px; height: 28px; 

    border-radius: 50%; cursor: pointer; z-index: 1005; 

    transition: all 0.4s ease-in-out; display: flex; align-items: center; justify-content: center;

    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4); font-size: 14px; color: #000;

}



.sidebar.collapsed ~ .toggle-btn { left: 15px; transform: rotate(180deg); }



.header { padding: 25px 20px 15px; font-size: 20px; font-weight: 900; flex-shrink: 0; }

.header span { color: var(--accent); }

#search { width: 85%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: white; margin: 0 auto 15px; outline: none; flex-shrink: 0; }



#channels { flex-grow: 1; overflow-y: auto; padding: 10px; }

#channels::-webkit-scrollbar { width: 4px; }

#channels::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }



.channel { padding: 12px; margin: 0 5px 8px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: 0.2s; border: 1px solid transparent; }

.channel:hover, .channel.selected-chan { background: rgba(0, 210, 255, 0.1); border-color: var(--accent); }

.channel-logo { width: 36px; height: 36px; background: #111420; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }

.channel-logo img { width: 85%; object-fit: contain; }



.main-content { flex-grow: 1; display: flex; flex-direction: column; padding: 20px; height: 100vh; box-sizing: border-box; }

.layout-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.layout-buttons button { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: white; padding: 10px 15px; border-radius: 10px; cursor: pointer; margin-left: 8px; font-size: 12px; transition: 0.3s; }

.layout-buttons button:hover { background: var(--accent); color: #000; }



video { width: 100%; height: 100%; object-fit: contain; background: #000; }



@media (max-width: 768px) {

    /* ... diğer kodların aynı kalsın ... */



    .player-box {

        cursor: pointer;

        touch-action: manipulation; /* Mobilde dokunmatik tepkisini hızlandırır */

        z-index: 1;

    }



    .player-box.active {

        z-index: 10; /* Seçili olan kutuyu öne çıkarır */

        border: 3px solid var(--accent) !important;

    }



    /* Video elementinin kendisi tıklamayı engellemesin diye bunu ekliyoruz */

    video {

        pointer-events: auto; /* Videonun kendi kontrolleri çalışsın */

    }



    /* Eğer player-info veya başka bir katman tıklamanı engelliyorsa */

    .player-info, .pip-btn {

        pointer-events: none; /* Bu elementler tıklamayı "geçirsin", altındaki kutuya ulaşsın */

    }

    

    .pip-btn {

        pointer-events: auto; /* Sadece butona basınca çalışsın */

    }

}