/* ================================================================
   PLANSAL — PLAYLISTMERKEZI SAYFASI STİLLERİ
   ================================================================ */

/* ===== Orijinal playlistmerkezi.html satır 10-277 ===== */
        /* ============================================================
           TEMA SİSTEMİ — /ders ile birebir aynı değişkenler.
           ============================================================ */
        :root {
            --color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-primary-light:#e0e7ff;
            --color-primary-lighter:#eef2ff;--color-primary-border:#c7d2fe;
            --color-primary-shadow:rgba(79,70,229,0.2);--color-primary-shadow-md:rgba(79,70,229,0.3);
            --color-success:#28a745;--color-success-hover:#218838;--color-success-light:#d4edda;
            --color-success-border:#c3e6cb;--color-success-shadow:rgba(40,167,69,0.3);
            --color-danger:#d9534f;--color-danger-hover:#c9302c;--color-danger-light:#ffeaea;--color-danger-border:#ffc2c2;
            --color-warning:#ffc107;
            --color-bg-page:#f3f4f6;--color-bg-card:#ffffff;--color-bg-input:#f8f9fa;--color-bg-hover:#e0e7ff;
            --color-text-main:#1f2937;--color-text-secondary:#374151;--color-text-muted:#6b7280;--color-text-light:#9ca3af;--color-text-placeholder:#9ca3af;
            --color-border:#e5e7eb;--color-border-medium:#d1d5db;--color-border-strong:#9ca3af;
            --shadow-xs:0 2px 4px rgba(0,0,0,0.04);--shadow-sm:0 2px 4px rgba(0,0,0,0.1);
            --shadow-md:0 4px 10px rgba(0,0,0,0.1);--shadow-card:0 8px 20px rgba(0,0,0,0.06);
            --shadow-modal:0 10px 30px rgba(0,0,0,0.2);--shadow-primary:0 4px 10px var(--color-primary-shadow);
            --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-full:50%;
            --transition-fast:all 0.2s ease;--transition-base:all 0.3s ease;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background:radial-gradient(ellipse at top right, #e0e7ff, #f3f4f6 50%, #ede9fe 100%); color:var(--color-text-main); height:100vh; display:flex; flex-direction:column; overflow:hidden; }

        /* --- ÜST MENÜ (HEADER) --- */
        .header{display:flex;justify-content:space-between;align-items:center;background-color:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 25px;box-shadow:0 10px 30px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05);margin:20px auto 15px auto;width:calc(100% - 40px);max-width:1400px;border-radius:var(--radius-lg);position:sticky;top:20px;z-index:100;flex-shrink:0;}
        .logo-container{display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform 0.2s ease;}
        .logo-container:hover{transform:scale(1.02);}
        .logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#4f46e5 0%,#3b82f6 100%);color:white;border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;font-size:13px;box-shadow:0 4px 10px rgba(79,70,229,0.3);}
        .logo-text{font-size:16px;font-weight:700;color:var(--color-text-main);letter-spacing:0.5px;}
        /* HEADER İÇİ ÖZEL PLAYLIST PILL TASARIMI (GÖLGELİ) */
        .header-center-pill { 
            position:absolute; left:50%; transform:translateX(-50%); 
            display:flex; align-items:center; gap:15px; 
            background:#141419; 
            padding:8px 20px; border-radius:40px; 
            border:1px solid #2a2a35; 
            /* Etrafa yayılan hafif kırmızı neon ve alt siyah gölge */
            box-shadow: 0 0 20px rgba(255, 51, 51, 0.15), 0 8px 20px rgba(0, 0, 0, 0.5); 
        }
        
        .pm-day-tabs { display:flex; border-bottom:1px solid #1f1f27; flex-shrink:0; background:#141419; overflow-x:auto; padding:15px 15px 0 15px; gap:6px; }
        .header-pill-title { 
            font-size:17px; font-weight:900; color:#fff; 
            display:flex; align-items:center; gap:10px; 
            padding-right:15px; border-right:1px solid #444; 
        }
        .hw-week-nav { display:flex; align-items:center; gap:10px; }
        .hw-week-btn { 
            width:30px; height:30px; border-radius:50%; border:none; 
            background:#2a2a2a; color:#eee; cursor:pointer; 
            display:flex; align-items:center; justify-content:center; transition:all 0.2s; 
        }
        .hw-week-btn:hover { background:#ff3333; color:#fff; }
        .hw-week-label { 
            font-size:14px; font-weight:800; color:#fff; 
            min-width:140px; text-align:center; letter-spacing:0.3px;
        }

        /* --- PROGRAM SEÇİCİ (Pill İçi Dropdown) --- */
        .pill-profile-selector {
            position: relative;
            padding-right: 15px;
            border-right: 1px solid #444;
        }

        .pill-profile-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #222230;
            border: 1px solid #333;
            border-radius: 10px;
            padding: 7px 14px;
            color: #ccc;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .pill-profile-btn:hover {
            background: #2a2a3a;
            border-color: #ff3333;
            color: #fff;
        }

        .pill-profile-btn.open {
            background: #2a2a3a;
            border-color: #ff3333;
            color: #fff;
        }

        .pill-profile-arrow {
            transition: transform 0.3s ease;
        }

        .pill-profile-btn.open .pill-profile-arrow {
            transform: rotate(180deg);
        }

        .pill-profile-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 200px;
            background: #1a1a24;
            border: 1px solid #2a2a35;
            border-radius: 12px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 51, 51, 0.08);
            z-index: 500;
            display: none;
            overflow: hidden;
            animation: dropdownSlide 0.2s ease;
        }

        @keyframes dropdownSlide {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pill-profile-dropdown.show {
            display: block;
        }

        .pill-profile-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 16px;
            font-size: 13px;
            font-weight: 700;
            color: #aaa;
            cursor: pointer;
            transition: all 0.15s;
            border-bottom: 1px solid #1f1f27;
        }

        .pill-profile-option:last-child {
            border-bottom: none;
        }

        .pill-profile-option:hover {
            background: #222230;
            color: #fff;
        }

        .pill-profile-option.selected {
            background: rgba(255, 51, 51, 0.1);
            color: #ff5555;
            font-weight: 800;
        }

        .pill-profile-option.selected::after {
            content: '✓';
            margin-left: auto;
            font-size: 14px;
            font-weight: 900;
            color: #ff3333;
        }

        /* GÜN SEKMELERİ DÜZENLEME (Üstten Boşluk ve Okunabilirlik) */
        .pm-day-nav {
            display:flex; gap:12px; padding:20px 25px 15px 25px; /* Üstten boşluk artırıldı (20px) */
            border-bottom:1px solid #2a2a2a;
        }
        .pm-day-btn {
            padding:12px 20px; border-radius:12px; border:1px solid #333;
            background:#252525; color:#aaa; font-size:14px; font-weight:700;
            cursor:pointer; transition:all 0.2s ease;
            letter-spacing:0.5px; text-transform:uppercase; /* Daha profesyonel ve okunaklı */
        }
        .pm-day-btn:hover { background:#333; color:#fff; border-color:#444; }
        .pm-day-btn.active { 
            background:#ff3333; color:#fff; border-color:#ff3333; 
            box-shadow:0 4px 12px rgba(255, 51, 51, 0.2); 
        }
        .btn-outline { background-color:rgba(255,255,255,0.6); color:var(--color-primary); border:2px solid var(--color-primary); padding:8px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:700; cursor:pointer; transition:var(--transition-base); backdrop-filter:blur(4px); }
        .btn-outline:hover { background-color:var(--color-primary); color:#fff; box-shadow:0 4px 15px rgba(79,70,229,0.3); transform:translateY(-2px); }
        .btn-primary { background:linear-gradient(135deg,#4f46e5 0%,#3b82f6 100%); color:#fff; border:none; padding:8px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:700; cursor:pointer; transition:var(--transition-base); box-shadow:0 4px 15px rgba(79,70,229,0.3); }
        .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(79,70,229,0.4); }
        .menu-btn { display:flex; align-items:center; gap:10px; font-size:24px; color:var(--color-text-secondary); background:none; border:none; cursor:pointer; transition:color 0.2s ease,transform 0.2s ease; padding:5px 10px; }
        .menu-text { font-size:16px; font-weight:700; }
        .menu-btn:hover { color:var(--color-primary); transform:scale(1.05); }

        /* --- TEK BÜYÜK İÇERİK ALANI (BALONCUK) --- */
        .template-content { width:calc(100% - 40px); max-width:1400px; margin:10px auto 20px auto; flex:1; min-height:0; background-color:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:var(--radius-xl); box-shadow:0 15px 40px rgba(0,0,0,0.12), 0 5px 15px rgba(0,0,0,0.06); border:1px solid rgba(255,255,255,0.6); display:flex; flex-direction:column; overflow:hidden; }

        /* --- REKLAM ALANLARI --- */
        .ad-space-left,.ad-space-right { position:fixed; top:50%; transform:translateY(-50%); width:10vw; height:600px; max-height:80vh; background:rgba(255,255,255,0.4); backdrop-filter:blur(8px); border:2px dashed rgba(79,70,229,0.15); border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:50; color:#9ca3af; font-weight:800; font-size:16px; text-align:center; }
        .ad-space-left { left:20px; } .ad-space-right { right:20px; }
        @media (max-width:900px) { .ad-space-left,.ad-space-right { display:none !important; } }

        /* --- YAN MENÜ (SIDEBAR) --- */
        .menu-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.4); backdrop-filter:blur(3px); z-index:4000; opacity:0; visibility:hidden; transition:var(--transition-base); }
        .menu-overlay.show { opacity:1; visibility:visible; }
        .side-menu { position:fixed; top:0; right:-320px; width:300px; height:100vh; background-color:var(--color-bg-card); box-shadow:-5px 0 25px rgba(0,0,0,0.1); z-index:4001; transition:right 0.3s cubic-bezier(0.25,0.8,0.25,1); display:flex; flex-direction:column; }
        .side-menu.open { right:0; }
        .side-menu-header { display:flex; justify-content:space-between; align-items:center; padding:20px 25px; border-bottom:1px solid rgba(79,70,229,0.1); background:linear-gradient(135deg,#eef2ff 0%,#f0f4ff 100%); }
        .side-menu-header h2 { font-size:18px; font-weight:800; color:var(--color-primary); display:flex; align-items:center; gap:10px; }
        .close-menu-btn { font-family:Arial,sans-serif; font-weight:300; font-size:26px; color:var(--color-text-light); cursor:pointer; transition:all 0.2s; line-height:1; background:var(--color-bg-input); border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; }
        .close-menu-btn:hover { background:var(--color-danger-light); color:var(--color-danger); }
        .side-menu-content { padding:20px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
        .menu-item { display:flex; align-items:center; gap:15px; padding:12px 15px; color:var(--color-text-secondary); text-decoration:none; font-size:14px; font-weight:700; border-radius:10px; transition:var(--transition-fast); background-color:#fcfcfc; border:1px solid transparent; }
        .menu-item:hover { background-color:var(--color-primary-lighter); color:var(--color-primary); border-color:var(--color-primary-border); transform:translateX(5px); }
        .menu-item i { font-size:16px; color:var(--color-primary); width:20px; text-align:center; }
        .menu-item.active-page { background-color:var(--color-primary-lighter); color:var(--color-primary); border-color:var(--color-primary-border); }

        /* --- LOADER --- */
        .page-loader { position:fixed; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at center,#ffffff,#e0e7ff); z-index:9999; display:flex; justify-content:center; align-items:center; transition:opacity 0.5s ease,visibility 0.5s ease; }
        .page-loader.hidden { opacity:0; visibility:hidden; }
        .loader-content { display:flex; flex-direction:column; align-items:center; gap:15px; animation:floatLoader 2s infinite ease-in-out; }
        .loader-logo { width:70px; height:70px; font-size:30px; box-shadow:0 8px 25px rgba(79,70,229,0.3); }
        .loader-title { font-size:26px; font-weight:800; color:#1e1b4b; letter-spacing:-0.5px; margin-top:5px; }
        .loader-text { font-size:13px; font-weight:600; color:#6b7280; margin-top:5px; letter-spacing:0.5px; }
        .spinner { width:40px; height:40px; border:4px solid rgba(79,70,229,0.1); border-top:4px solid var(--color-primary); border-radius:var(--radius-full); animation:spin 1s linear infinite; margin-top:5px; }
        @keyframes spin { 100%{transform:rotate(360deg);} }
        @keyframes floatLoader { 0%{transform:translateY(0);} 50%{transform:translateY(-10px);} 100%{transform:translateY(0);} }

        /* ============================================================
           PLAYLİST MERKEZİ İÇ STİLLERİ
           Baloncuk içinde yaşayan koyu temalı playlist arayüzü.
           ============================================================ */
        .pm-wrapper { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#0f0f11; border-radius:0 0 var(--radius-xl) var(--radius-xl); }
        .pm-wrapper::-webkit-scrollbar { width:8px; height:8px; }
        .pm-wrapper::-webkit-scrollbar-track { background:#141419; border-radius:10px; }
        .pm-wrapper::-webkit-scrollbar-thumb { background:#2a2a35; border-radius:10px; border:2px solid #141419; }
        .pm-wrapper::-webkit-scrollbar-thumb:hover { background:#ff3333; }

        .pm-header { display:flex; justify-content:space-between; align-items:center; padding:14px 25px; border-bottom:1px solid #1f1f27; flex-shrink:0; background:linear-gradient(180deg,#181820 0%,#0f0f11 100%); border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
        .pm-logo { display:flex; align-items:center; gap:10px; background:rgba(255,0,0,0.1); padding:8px 16px; border-radius:12px; border:1px solid rgba(255,0,0,0.2); }
        .pm-logo i { color:#ff3333; font-size:20px; filter:drop-shadow(0 0 8px rgba(255,0,0,0.5)); }
        .pm-logo h3 { margin:0; font-size:16px; color:#ffffff; font-weight:800; letter-spacing:0.5px; }
        .pm-week-nav { display:flex; align-items:center; gap:12px; background:#1a1a24; padding:6px; border-radius:30px; border:1px solid #2a2a35; }
        .pm-week-btn { width:34px; height:34px; border-radius:50%; border:none; background:#252532; color:#a0a0b0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
        .pm-week-btn:hover { background:#303040; color:#fff; }
        .pm-week-label { font-size:14px; font-weight:700; color:#e0e0e0; min-width:160px; text-align:center; letter-spacing:0.5px; }


        .pm-main { flex:1; display:flex; overflow:hidden; }
        .pm-left { flex:1; display:flex; flex-direction:column; min-width:0; background:#0f0f11; position:relative; }
        .pm-playlist-pane { flex:1; overflow-y:auto; padding:25px; }
        .pm-playlist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:25px; }
        .pm-player-pane { display:none; flex:1; flex-direction:column; background:#000; }
        .pm-player-wrap { flex:1; position:relative; background:#000; min-height:0; display:flex; justify-content:center; align-items:center; }
        .pm-player-shadow { width:100%; height:100%; position:absolute; box-shadow:inset 0 0 150px rgba(0,0,0,0.9); pointer-events:none; }
        .pm-iframe { flex:1; border:none; width:100%; height:100%; display:block; z-index:1; }
        .pm-now-playing { padding:15px 25px; background:linear-gradient(90deg,#111 0%,#1a1a1a 100%); color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; gap:12px; flex-shrink:0; border-top:1px solid #222; }
        .pm-now-icon { background:rgba(255,0,0,0.15); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
        .pm-now-icon i { color:#ff3333; font-size:14px; margin-left:3px; }
        .pm-now-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 4px rgba(0,0,0,0.5); }

        .pm-right { display:none; width:360px; flex-shrink:0; border-left:1px solid #1f1f27; flex-direction:column; background:#141419; }
        .pm-right-header { padding:15px 20px; border-bottom:1px solid #1f1f27; display:flex; align-items:center; gap:8px; flex-shrink:0; background:#181820; }
        .pm-back-btn { border:1px solid #333; background:#222; border-radius:10px; cursor:pointer; color:#ccc; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; padding:8px 14px; transition:0.2s; }
        .pm-back-btn:hover { background:#333; color:#fff; }
        .pm-video-title { padding:16px 20px; font-size:14px; font-weight:800; color:#fff; border-bottom:1px solid #1f1f27; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; background:#1a1a24; box-shadow:0 4px 10px rgba(0,0,0,0.2); }
        .pm-video-list { flex:1; overflow-y:auto; padding:10px 0; }
        .pm-complete-bar { padding:20px; border-top:1px solid #1f1f27; flex-shrink:0; background:#181820; box-shadow:0 -4px 15px rgba(0,0,0,0.3); }
        .pm-complete-btn { width:100%; padding:14px; border:none; background:linear-gradient(135deg,#1f8a3d 0%,#155724 100%); color:white; border-radius:12px; font-size:14px; font-weight:800; cursor:not-allowed; opacity:0.3; display:flex; align-items:center; justify-content:center; gap:10px; transition:all 0.3s; box-shadow:0 4px 15px rgba(31,138,61,0.2); }

        .pm-video-list::-webkit-scrollbar { width:6px; }
        .pm-video-list::-webkit-scrollbar-thumb { background:#2a2a35; border-radius:6px; }
        .pm-video-list::-webkit-scrollbar-thumb:hover { background:#ff3333; }
        .pm-playlist-pane::-webkit-scrollbar { width:6px; }
        .pm-playlist-pane::-webkit-scrollbar-thumb { background:#2a2a35; border-radius:6px; }
        .pm-playlist-pane::-webkit-scrollbar-thumb:hover { background:#ff3333; }