:root {
        --primary: #4b56e7;
        --bg: #141414;
        --surface: #272727;
        --surface-light: #3d3d3d;
        --border: rgba(255, 255, 255, 0.1);
        --text: #ffffff;
        --text-dim: #a1a1aa;
        --transition: all 0.2s ease;
      }

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

      body,
      html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: "Inter", sans-serif;
        background: #000 !important;
        color: var(--text);
        overflow: auto;
      }

      /* Views management */
      .view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        background: var(--bg);
      }

      .view.active {
        display: flex;
      }

      /* Dashboard UI */
      #dashboard-view {
        justify-content: flex-start;
        align-items: center;
        padding: 5vh 20px 40px 20px;
        background: var(--bg);
        overflow-y: auto;
      }

      .dashboard-header {
        margin-bottom: 40px;
        text-align: center;
        flex-shrink: 0;
      }

      .dashboard-header h1 {
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 800;
        letter-spacing: -1px;
        margin: 0;
      }

      /* Dashboard Lists - Tile Cards */
      .dashboard-lists-container {
        width: 100%;
        max-width: 1200px;
        margin-bottom: 20px;
      }

      .dashboard-list-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
        width: 100%;
      }

      .dashboard-list-card {
        position: relative;
        background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 30px 20px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        text-align: center;
        min-height: 180px;
        overflow: hidden;
      }

      .dashboard-list-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .dashboard-list-card:hover {
        transform: translateY(-8px) scale(1.03);
        background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border-color: var(--primary);
        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
      }

      .dashboard-list-card:hover::before {
        opacity: 1;
      }

      .dashboard-list-card:active {
        transform: scale(0.95);
        transition: transform 0.1s ease-out;
      }

      .dashboard-list-icon {
        font-size: 3.5rem;
        line-height: 1;
        margin-bottom: 4px;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        transition: transform 0.3s ease;
      }

      .dashboard-list-card:hover .dashboard-list-icon {
        transform: scale(1.15);
      }

      .dashboard-list-name {
        font-weight: 700;
        font-size: 1.1rem;
        text-align: center;
        color: var(--text);
        line-height: 1.3;
        letter-spacing: 0.3px;
      }

      .dashboard-list-count {
        font-size: 0.8rem;
        color: var(--text-dim);
        background: rgba(255,255,255,0.05);
        padding: 4px 14px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.05);
        font-weight: 600;
      }

      .dashboard-empty {
        padding: 60px 20px;
        text-align: center;
        color: var(--text-dim);
        font-size: 0.95rem;
        width: 100%;
        background: rgba(255,255,255,0.02);
        border-radius: 24px;
        border: 1px dashed rgba(255,255,255,0.1);
      }

      .tile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        width: 100%;
        max-width: 1200px;
      }

      .tile {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 30px 20px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      .tile:hover {
        transform: translateY(-8px) scale(1.02);
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--primary);
        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
      }

      .tile-icon {
        font-size: 5rem;
      }

      .tile-title {
        font-weight: 600;
        font-size: 1.2rem;
        text-align: center;
      }

      .tile-count {
        font-size: 0.85rem;
        color: var(--text-dim);
      }

      /* Browser UI */
      .browser-container {
        display: flex;
        width: 100%;
        height: 100%;
      }

      .sidebar {
        width: 320px;
        background: var(--bg);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        height: 100%;
        overflow: hidden;
      }

      .sidebar-header {
        padding: 24px;
        border-bottom: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

.category-list-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.category-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.category-list::-webkit-scrollbar {
  width: 6px;
}

.category-list::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.category-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

.category-item {
  padding: 14px 20px;
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: var(--transition);
  color: var(--text-dim);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.category-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  transform: translateX(4px);
}

.category-item.active {
  background: var(--surface-light);
  color: white;
  border-left: 4px solid var(--primary);
  border-radius: 4px 14px 14px 4px;
}

      .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .browser-header {
        padding: 20px 32px;
        display: flex;
        align-items: center;
        gap: 20px;
        border-bottom: 1px solid var(--border);
      }

      .search-box {
        flex: 1;
        position: relative;
      }

      .search-box input {
        width: 100%;
        background: var(--surface-light);
        border: 1px solid var(--border);
        padding: 12px 20px 12px 48px;
        border-radius: 16px;
        color: white;
        outline: none;
      }

      /* Channel Grid - Compact Gallery */
      .channel-grid {
        flex: 1;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        grid-auto-rows: min-content;
        gap: 15px;
        overflow-y: auto;
        align-content: start;
        align-items: start;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }

      .channel-grid::-webkit-scrollbar {
        width: 6px;
      }

      .channel-grid::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 10px;
      }

      .channel-grid::-webkit-scrollbar-thumb:hover {
        background: var(--primary-light);
      }

      .channel-card {
        position: relative;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 120px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      }

      .channel-card:hover {
        transform: translateY(-5px);
        background: rgba(15, 23, 42, 0.8);
        border-color: var(--primary);
        box-shadow:
          0 15px 35px rgba(59, 130, 246, 0.2),
          0 0 15px rgba(59, 130, 246, 0.1);
      }

      .channel-card:active {
        transform: scale(0.92);
        transition: transform 0.1s ease-out;
      }

      /* Recent Channels Strip */
      .recent-strip-container {
        width: 100%;
        padding: 15px 20px 5px 20px;
        display: none;
        flex-direction: column;
        gap: 12px;
        max-width: 1200px;
        margin: 0 auto;
      }

      /* Skeleton Shimmer Effect */
      .skeleton {
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.03) 25%,
          rgba(255, 255, 255, 0.08) 50%,
          rgba(255, 255, 255, 0.03) 75%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 20px;
      }

      @keyframes shimmer {
        0% {
          background-position: 200% 0;
        }

        100% {
          background-position: -200% 0;
        }
      }

      .skeleton-card {
        width: 100%;
        aspect-ratio: 1/1;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
      }

      .recent-strip-title {
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        opacity: 0.6;
      }

      /* --- YENİ NAVİGASYON STİLLERİ --- */
      .sidebar-navigator {
        padding: 15px;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 10px;
      }

      .nav-breadcrumb {
        font-size: 0.65rem;
        color: var(--primary);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 12px;
        opacity: 0.9;
      }

      .nav-label {
        display: block;
        font-size: 0.6rem;
        color: var(--text-dim);
        font-weight: 800;
        margin-bottom: 8px;
        margin-top: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .nav-select {
        width: 100%;
        padding: 12px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        color: white;
        font-size: 0.85rem;
        outline: none;
        cursor: pointer;
        transition: all 0.2s;
      }

      .nav-select:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.4);
      }

      .nav-categories {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 8px;
      }

      .nav-cat-btn {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: var(--text-dim);
        padding: 10px 4px;
        border-radius: 12px;
        font-size: 0.65rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }

      .nav-cat-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px);
      }

      .nav-cat-btn.active {
        background: linear-gradient(135deg, var(--primary), #818cf8);
        color: white;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        transform: translateY(-2px);
      }

      .nav-cat-btn span {
        font-size: 1.2rem;
        display: block;
      }

      .recent-strip-items {
        display: flex;
        gap: 18px;
        overflow-x: auto;
        padding: 5px 0 10px 0;
        scrollbar-width: none;
        justify-content: center;
      }

      .recent-strip-items::-webkit-scrollbar {
        display: none;
      }

      .recent-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        min-width: 65px;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .recent-item:active {
        transform: scale(0.9);
      }

      .recent-thumb {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: #1e293b;
        border: 2.5px solid rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
        transition: border-color 0.3s;
      }

      .recent-item:hover .recent-thumb {
        border-color: var(--primary);
      }

      .recent-thumb img {
        width: 75%;
        height: 75%;
        object-fit: contain;
      }

      .recent-name {
        font-size: 0.65rem;
        font-weight: 700;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 65px;
        opacity: 0.8;
      }

      /* The 'Tram' Effect Layer */
      .logo-bg-tram {
        position: absolute;
        inset: -20%;
        /* Bleed out for better blur coverage */
        width: 140%;
        height: 140%;
        object-fit: cover;
        filter: blur(50px) saturate(2) opacity(0.25);
        z-index: 1;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .channel-card:hover .logo-bg-tram {
        opacity: 0.4;
      }

      .card-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at center,
          transparent 0%,
          rgba(0, 0, 0, 0.4) 100%
        );
        z-index: 1;
        pointer-events: none;
      }

      .channel-card:hover {
        transform: translateY(-4px);
        border-color: var(--primary);
        background: #2d3748;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
      }

      .channel-card.playing {
        border-color: var(--primary);
        background: rgba(59, 130, 246, 0.1);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
      }

      .channel-card.broken,
      .recent-item.broken {
        filter: grayscale(1) opacity(0.4);
        cursor: not-allowed;
      }

      .recent-item.broken .recent-thumb {
        border-color: rgba(255, 255, 255, 0.1);
      }

      .channel-card .channel-logo {
        position: relative;
        z-index: 2;
        width: 95%;
        height: 95%;
        object-fit: contain;
        transition: transform 0.2s ease;
      }

      .channel-card:hover .channel-logo {
        transform: scale(1.05);
      }


/*      .channel-card .name {
        position: relative;
        z-index: 3;
        font-size: 0.85rem;
        font-weight: 800;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        line-height: 1.3;
        padding: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        word-break: break-word;
      }
*/
       /* Logo varsa kanal adını gösterme*/
/*      .channel-card.has-logo .name {
        display: none;
		} */ 

       /* Logo yoksa generik logo ve kanal adını göster*/
 /*     .channel-card.has-generic-logo .name { */
	  .channel-card .name {
        display: block !important;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 6px 4px;
        font-size: 0.72rem;
        z-index: 4;
        text-align: center;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        color: #fff;
        font-weight: 700;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
      }

      /* YouTube Specific - Watermark Style */
      .channel-card.is-youtube .channel-logo {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        opacity: 0.15;
        z-index: 1;
        filter: grayscale(1) brightness(2);
      }

      .channel-card.is-youtube .name {
        display: block !important;
        /* Force show name for YouTube */
        font-size: 0.85rem;
        z-index: 3;
      }

      .channel-card.is-youtube:hover .channel-logo {
        opacity: 0.25;
        transform: scale(1.1);
      }

      .channel-card .fav-star {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 4;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.1);
        transition: all 0.2s;
      }

      .channel-card .fav-star.active {
        color: #fbbf24;
        opacity: 1;
      }

      /* Mobilde uzun basınca çıkan menüleri ve seçimleri engelle */
      .channel-card,
      .recent-item,
      .selector-item,
      .channel-logo,
      .logo-bg-tram {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-user-drag: none !important;
      }

      .channel-card .fav-star.active {
        color: #fbbf24;
        opacity: 1;
      }

      /* Mobilde uzun basınca çıkan menüleri ve seçimleri engelle */
      .channel-card,
      .recent-item,
      .selector-item,
      .channel-logo,
      .logo-bg-tram {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-user-drag: none !important;
      }

      .playing-label {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        background: var(--primary);
        color: white;
        font-size: 0.5rem;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      @media (max-width: 768px) {
        .channel-grid {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
          gap: 20px;
          padding: 20px;
        }

        .channel-card {
          border-radius: 20px;
          padding: 15px;
          min-height: 130px;
        }
      }

      html.lite-player #player-view *,
      html.lite-player #gesture-indicator {
        animation: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }

      html.lite-player #player-view .player-overlay {
        background: rgba(0, 0, 0, 0.62);
      }

      html.lite-player #player-view .side-control-container,
      html.lite-player #v-vis-player {
        display: none !important;
      }

      html.lite-player #v-player {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }

      /* OSD Styles (Legacy removed in favor of Grid Selector Modal) */

      /* Player UI */
      #player-view {
          background: black;
          touch-action: none;
        }

        /* Mobil: Yatay ekran yönlendirme stilleri */
        @media (max-width: 768px) {
          #player-view.landscape-locked {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 9999 !important;
          }
          
          #player-view.landscape-locked .video-container {
            width: 100vw !important;
            height: 100vh !important;
          }
          
          #player-view.landscape-locked video {
            object-fit: contain !important;
          }
          
          /* Yatay mod uyarı overlay */
          .rotate-device-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.92);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            color: white;
            text-align: center;
            padding: 20px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
          }
          
          .rotate-device-overlay.active {
            display: flex;
          }
          
          .rotate-device-overlay .rotate-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            animation: rotatePhone 2s ease-in-out infinite;
          }
          
          .rotate-device-overlay h2 {
            font-size: 1.5rem;
            margin: 0 0 10px 0;
            font-weight: 600;
          }
          
          .rotate-device-overlay p {
            font-size: 0.9rem;
            color: #a1a1aa;
            margin: 0;
            max-width: 280px;
            line-height: 1.5;
          }
          
          .rotate-device-overlay .skip-btn {
            margin-top: 30px;
            padding: 12px 30px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            color: white;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
          }
          
          .rotate-device-overlay .skip-btn:hover {
            background: rgba(255, 255, 255, 0.2);
          }
          
          .rotate-device-overlay .dont-show {
            margin-top: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: #71717a;
            cursor: pointer;
          }
          
          .rotate-device-overlay .dont-show input[type="checkbox"] {
            accent-color: #3b82f6;
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
          
          @keyframes rotatePhone {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(90deg); }
            50% { transform: rotate(90deg); }
            75% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
          }
        }

      .video-container {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .player-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.8) 0%,
          transparent 40%,
          transparent 60%,
          rgba(0, 0, 0, 0.8) 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.3s,
          visibility 0.3s;
        z-index: 10;
        pointer-events: none;
      }

      .player-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: none;
      }

      .player-top,
      .player-bottom,
      .yt-back-btn,
      .info-panel,
      .side-control-container {
        pointer-events: auto;
      }

      /* Tiklama alani */
      .player-click-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        cursor: pointer;
      }

      .player-top {
        padding: 30px;
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
      }

      .progress-container {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 10px;
        position: relative;
        z-index: 30;
        pointer-events: auto;
      }

      .progress-bar-el {
        flex: 1;
        height: 6px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        outline: none;
        pointer-events: auto;
        touch-action: pan-x;
        -webkit-appearance: none;
      }

      .progress-bar-el::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background: var(--primary);
        border-radius: 50%;
      }

      .manager-list {
        max-height: 200px;
        overflow-y: auto;
        margin-top: 20px;
        border-top: 1px solid var(--border);
        padding-top: 20px;
      }

      .manager-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        margin-bottom: 8px;
        gap: 10px;
      }

      .text-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .btn-delete {
        background: #ef4444;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
      }

      .btn-circle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.2rem;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
      }

      .btn-circle:active {
        transform: scale(0.88);
        transition: transform 0.1s ease-out;
      }

      .btn-circle:hover {
        background: var(--primary);
        border-color: var(--primary);
        transform: scale(1.1);
      }

      /* PIP butonları normalde mavi kalmasın, sadece hover'da mavi olsun */
      #pl-pip,
      #pl-minimize {
        color: white !important;
      }

      #pl-pip:hover,
      #pl-minimize:hover {
        color: white !important;
      }

      /* Tek satir kontrol butonlari */
      .controls-single-row {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 10px 0;
      }

      .controls-divider {
        width: 1px;
        height: 35px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 8px;
      }

      /* Volume control */
      .volume-control {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Volume control moved to unified styles section */

      /* Player bottom duzenlemesi */
      .player-bottom {
        padding: 20px 40px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
      }

      /* Recording & Info */
      .rec-indicator {
        display: none;
        align-items: center;
        gap: 8px;
        color: #ef4444;
        font-weight: 700;
        animation: blink 1s infinite;
      }

      .rec-indicator.active {
        display: flex;
      }

      #pl-rec.recording-active {
        background: #ef4444 !important;
        border-color: #fecaca !important;
        box-shadow:
          0 0 0 0 rgba(239, 68, 68, 0.75),
          0 0 24px rgba(239, 68, 68, 0.85);
        animation: recStopPulse 1.1s infinite;
        transform-origin: center;
      }

      #pl-rec.recording-active::after {
        content: "DUR";
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        color: #fecaca;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
        pointer-events: none;
      }

      @keyframes recStopPulse {
        0% {
          box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0.75),
            0 0 24px rgba(239, 68, 68, 0.85);
          transform: scale(1);
        }

        70% {
          box-shadow:
            0 0 0 12px rgba(239, 68, 68, 0),
            0 0 30px rgba(239, 68, 68, 0.95);
          transform: scale(1.06);
        }

        100% {
          box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0),
            0 0 24px rgba(239, 68, 68, 0.85);
          transform: scale(1);
        }
      }

      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }

        50% {
          opacity: 0;
        }
      }

      .info-panel {
        position: absolute;
        top: 100px;
        right: 20px;
        background: rgba(10, 17, 32, 0.95);
        backdrop-filter: blur(10px);
        padding: 24px;
        border-radius: 20px;
        border: 1px solid var(--border);
        display: none;
        width: 280px;
        z-index: 20;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      }

      @media (max-width: 768px) {
        .info-panel {
          width: calc(100% - 40px);
          right: 20px;
          left: 20px;
          top: 80px;
          padding: 15px;
          touch-action: pan-y;
        }
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 0.85rem;
      }

      .info-row span:first-child {
        color: var(--text-dim);
      }

      .info-row span:last-child {
        font-weight: 600;
        color: #fff;
      }

      /* Tracks/Settings Menu */
      .tracks-menu {
        position: absolute;
        bottom: 110px;
        right: 40px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(15px);
        padding: 20px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: none;
        width: 280px;
        z-index: 100;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        max-height: 70vh;
        overflow-y: auto;
      }

      .tracks-menu::-webkit-scrollbar {
        width: 4px;
      }

      .tracks-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
      }

      .tracks-menu h4 {
        margin: 0 0 10px;
        color: var(--primary);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 5px;
      }

      .track-section {
        margin-bottom: 15px;
      }

      .track-section:last-child {
        margin-bottom: 0;
      }

      .track-options {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .track-option {
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
        color: #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
      }

      .track-option:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }

      .track-option.active {
        background: var(--primary);
        color: white;
      }

      .track-option.active::after {
        content: "●";
        font-size: 0.6rem;
      }

      /* Radio Visualizer */
      .radio-visualizer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        z-index: 1;
        background: radial-gradient(
          circle at center,
          rgba(15, 23, 42, 0.8) 0%,
          #000 100%
        );
      }

      .view.is-radio .radio-visualizer {
        display: flex;
        z-index: 6;
        /* Click area'nın (5) üstüne çıkarıyoruz ki kaydırma yapılabilsin */
        pointer-events: auto;
      }

      .view.is-radio .radio-info {
        display: none;
      }

      .view.is-radio #v-player {
        opacity: 0;
        pointer-events: none;
      }

      #radio-oscilloscope {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }

      .radio-logo-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: #ffffff;
        border: 3px solid var(--primary);
        overflow: hidden;
        box-shadow: 0 0 40px var(--primary-glow);
        animation: pulse-glow 2s infinite;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .radio-internal-name {
        color: #1e293b;
        font-weight: 800;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 20px;
        text-align: center;
        line-height: 1.3;
        font-family: "Inter", sans-serif;
      }

      .radio-logo-container img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        max-height: 80%;
        width: auto;
        height: auto;
        object-fit: contain;
        background: transparent;
      }

      .radio-logo-container .pulse-icon {
        font-size: 4rem;
        background: none;
        box-shadow: none;
        animation: none;
      }

      @keyframes pulse-glow {
        0%,
        100% {
          box-shadow:
            0 0 20px var(--primary-glow),
            0 0 40px rgba(0, 102, 255, 0.2);
        }

        50% {
          box-shadow:
            0 0 40px var(--primary-glow),
            0 0 60px rgba(0, 102, 255, 0.4);
        }
      }

      .radio-info {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(5px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .radio-name {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text);
        text-align: center;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        letter-spacing: 2px;
      }

      /* Grid Oscilloscope Styles */
      .grid-oscilloscope {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        opacity: 0.8;
      }

      .radio-logo-grid,
      .radio-name-grid {
        position: relative;
        z-index: 5;
      }

      .radio-logo-grid {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important;
        border-radius: 50%;
        background: white;
        padding: 10px;
        object-fit: contain;
      }

      /* Grid View Styles */
      #grid-view {
        background: #000;
        touch-action: none;
      }

      .radio-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: radial-gradient(
          circle at center,
          #1e293b 0%,
          #020617 100%
        ) !important;
        z-index: 5 !important;
        padding: 10px;
        text-align: center;
        pointer-events: none;
        /* Tiklamalari arkaya gecir */
      }

      .cell.is-radio .radio-placeholder {
        display: flex;
      }

      .radio-logo-grid {
        width: 80px;
        height: 80px;
        object-fit: contain;
        border-radius: 15px;
        background: white;
        padding: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        margin-bottom: 12px;
        border: 2px solid rgba(255, 255, 255, 0.1);
      }

      .radio-name-grid {
        font-size: 1rem;
        font-weight: 700;
        color: white;
        margin-bottom: 10px;
        display: block;
      }

      #grid-container {
        flex: 1;
        padding: 4px;
        display: grid;
        gap: 4px;
        background: #000;
        min-height: 0;
        overflow: hidden;
      }

      .grid-1 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }

      .grid-2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
      }

      .grid-4 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .grid-9 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
      }

      .cell {
        background: rgba(20, 20, 22, 0.8);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s;
        min-height: 0;
        min-width: 0;
        border-radius: 12px;
      }

      .cell.move-mode {
        border: 2px dashed rgba(59, 130, 246, 0.8);
        cursor: grab;
        touch-action: none;
      }

      .cell.dragging {
        opacity: 0.45;
        transform: scale(0.98);
        z-index: 20;
      }

      .cell.drag-over {
        border-color: #22c55e;
        background: rgba(34, 197, 94, 0.14);
      }

      .cell:fullscreen {
        border-radius: 0 !important;
        border: none !important;
        background: #000 !important;
      }

      .cell:-webkit-full-screen {
        border-radius: 0 !important;
        border: none !important;
        background: #000 !important;
      }

      .cell.active {
        border-color: var(--primary);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
      }

      .cell.active-audio {
        border: 2px solid var(--primary) !important;
        box-shadow:
          0 0 25px rgba(59, 130, 246, 0.4),
          inset 0 0 15px rgba(59, 130, 246, 0.2) !important;
        z-index: 20;
      }

      .cell.active-audio .radio-name-grid {
        color: var(--primary-light);
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
      }

      /* Radyo dalgaları varsayılan durum: Durmuş ve soluk */
      .cell .radio-placeholder .radio-wave span {
        animation-play-state: paused !important;
        opacity: 0.3 !important;
      }

      /* Aktif kanalda (sesi açık) dalgalar canlanır */
      .cell.active-audio .radio-placeholder .radio-wave span {
        animation-play-state: running !important;
        opacity: 1 !important;
      }

      /* Aktif kanalda zemin parlar ve çerçeve belirir */
      .cell.active-audio .radio-placeholder {
        animation: radio-active-bg 3s infinite alternate ease-in-out !important;
        border: 2px solid var(--primary) !important;
        box-shadow: inset 0 0 40px rgba(59, 130, 246, 0.4) !important;
      }

      @keyframes radio-active-bg {
        from {
          background: radial-gradient(
            circle at center,
            #1e293b 0%,
            #020617 100%
          ) !important;
        }

        to {
          background: radial-gradient(
            circle at center,
            #2d3e5a 0%,
            #020617 100%
          ) !important;
        }
      }

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

      .cell.playing video,
      .cell.playing-iframe .grid-iframe {
        display: block;
      }

      .grid-iframe {
        display: none;
        width: 100%;
        height: 100%;
        border: 0;
        background: #000;
      }

      .cell.playing .empty-state {
        display: none;
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        opacity: 0.4;
        transition: all 0.3s;
        cursor: pointer;
        color: var(--text-dim);
      }

      .cell:hover .empty-state {
        opacity: 1;
        color: white;
        transform: scale(1.05);
      }

      .add-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 300;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .cell-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
        z-index: 10;
      }

      .cell:hover .cell-header {
        opacity: 1;
        pointer-events: auto;
      }

      .cell-title {
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%;
      }

      .cell-btn {
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 6px 10px;
        cursor: pointer;
        font-size: 0.8rem;
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
      }

      .cell-btn:active {
        transform: scale(0.9);
        background: var(--primary);
      }

      .cell-volume-slider,
      .volume-slider-el {
        width: 180px;
        height: 38px;
        -webkit-appearance: none;
        background: transparent;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0 5px;
      }

      .cell-volume-slider::-webkit-slider-runnable-track,
      .volume-slider-el::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .cell-volume-slider::-webkit-slider-thumb,
      .volume-slider-el::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        background: var(--primary);
        border-radius: 50%;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
        border: 2px solid white;
        cursor: pointer;
        margin-top: -7px;
      }

      .cell-volume-slider:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      @media (max-width: 768px) {
        .cell-header {
          opacity: 1 !important;
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.9),
            transparent
          );
          height: 50px;
          padding: 5px 10px;
        }

        .cell-btn {
          padding: 10px 14px;
          font-size: 1rem;
          border-radius: 10px;
        }

        .cell-volume-slider {
          width: 130px;
          height: 38px;
        }

        .cell-volume-slider::-webkit-slider-thumb {
          width: 22px;
          height: 22px;
          margin-top: -9px;
        }

        .cell-title {
          font-size: 0.75rem;
          max-width: 40%;
        }
      }

      .grid-header {
        height: 50px;
        /* Daha dar baslik */
        background: var(--surface);
        display: flex;
        align-items: center;
        justify-content: center;
        /* Merkeze topla */
        padding: 0 15px;
        border-bottom: 1px solid var(--border);
      }

      .grid-controls {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      @media (max-width: 768px) {
        .grid-header {
          justify-content: flex-start;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 0 10px;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }

        .grid-header::-webkit-scrollbar {
          display: none;
        }

        .grid-controls {
          flex: 0 0 auto;
          width: max-content;
          min-width: max-content;
          gap: 8px;
        }

        .grid-icon-btn {
          flex: 0 0 auto;
        }
      }

      .grid-icon-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border);
        color: var(--text-dim);
        width: auto;
        /* Daha kibar boyut */
        min-width: 38px;
        height: 38px;
        /* Slider ile ayni yukseklik */
        border-radius: 8px;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        padding: 0 10px;
      }

      .grid-icon-btn:hover,
      .grid-icon-btn.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

      #gesture-indicator {
        display: none !important;
        /* Ortadaki eski kutu hala kapali kalsin */
      }

      /* Premium Custom Side Controls */
      .side-control-container {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 250px;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        pointer-events: none;
        /* Artik sadece gosterge, dokunma genel alandan */
        background: transparent;
      }

      .side-control-left {
        left: 10px;
      }

      .side-control-right {
        right: 10px;
      }

      /* PC/Mouse kullanan cihazlarda yan sürgüleri tamamen kapat - SIRA ONEMLI: Altta override edilebilir, o yuzden siliyoruz burayi */

      .custom-track {
        position: relative;
        width: 2px;
        height: 180px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 1px;
        pointer-events: none;
      }

      .custom-thumb {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 15px var(--primary-glow);
        border: 2px solid var(--primary);
        pointer-events: none;
        transition: transform 0.1s ease-out;
      }

      .side-value-label {
        margin-bottom: 6px;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 900;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        background: rgba(255, 255, 255, 0.12);
        padding: 1px 6px;
        border-radius: 4px;
        pointer-events: none;
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-width: 32px;
        text-align: center;
      }

      .vertical-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        background: white;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        border: 2px solid var(--primary);
      }

      .side-icon {
        opacity: 0.7;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .player-overlay.active .side-control-container,
      #player-view.is-radio .side-control-container {
        display: flex;
        /* !important kaldirildi, PC kurali ezebilsin */
      }

      /* KESIN COZUM: PC/Geniş ekranlarda yan surguleri her ne olursa olsun yok et */
      @media screen and (min-width: 1025px) {
        #side-bright-ctrl,
        #side-vol-ctrl,
        .side-control-container {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
          pointer-events: none !important;
        }
      }

      .grid-selector-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(5, 8, 14, 0.78);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        z-index: 20000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 28px;
        box-sizing: border-box;
      }

      .grid-selector-modal.active {
        display: flex;
        animation: selectorFadeIn 0.18s ease-out;
      }

      .grid-selector-shell {
        width: min(1120px, 100%);
        height: min(760px, calc(100vh - 56px));
        background: rgba(12, 18, 29, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
        display: grid;
        grid-template-rows: auto auto 1fr;
        overflow: hidden;
      }

      .grid-selector-header {
        padding: 18px 20px;
        display: grid;
        grid-template-columns: minmax(210px, auto) 1fr auto;
        align-items: center;
        gap: 16px;
        background: rgba(255, 255, 255, 0.035);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .grid-selector-heading {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .grid-selector-heading strong {
        color: #fff;
        font-size: 1rem;
        line-height: 1.2;
      }

      .grid-selector-heading span {
        color: var(--text-dim);
        font-size: 0.78rem;
        margin-top: 4px;
      }

      .selector-search-box {
        position: relative;
      }

      .selector-search-box input {
        width: 100%;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        color: #ffffff !important;
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
        box-sizing: border-box;
      }

      .selector-search-box input::placeholder {
        color: rgba(255, 255, 255, 0.4);
      }

      .selector-search-box input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
      }

      .selector-category-tabs {
        display: flex;
        gap: 8px;
        padding: 12px 20px;
        overflow-x: auto;
        background: rgba(255, 255, 255, 0.015);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
      }

      .selector-category-tabs::-webkit-scrollbar {
        height: 4px;
      }

      .selector-category-tabs::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
      }

      .selector-tab {
        padding: 9px 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: var(--text-dim);
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
        display: flex;
        align-items: center;
        gap: 7px;
        flex-shrink: 0;
      }

      .selector-tab:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-color: rgba(255, 255, 255, 0.2);
      }

      .selector-tab.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        box-shadow: 0 6px 18px rgba(59, 130, 246, 0.22);
      }

      .selector-channel-grid {
        padding: 18px 20px 22px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-auto-rows: min-content;
        gap: 12px;
        overflow-y: auto;
        align-content: start;
        max-height: 100%;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }

      .selector-channel-grid::-webkit-scrollbar {
        width: 6px;
      }

      .selector-channel-grid::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 10px;
      }

      .selector-item {
        min-height: 132px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 9px;
        text-align: center;
        cursor: pointer;
        transition: background 0.18s, border-color 0.18s, transform 0.18s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        overflow: hidden;
        position: relative;
      }

      .selector-item:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--primary);
        transform: translateY(-2px);
      }

      .selector-item img {
        width: 100%;
        height: 76px;
        object-fit: contain;
        border-radius: 6px;
        background: #ffffff;
        padding: 4px;
        box-sizing: border-box;
        transition: transform 0.18s;
      }

      .selector-item img[src*="trt"] {
        transform: scale(1.12);
      }

      .selector-item:hover img {
        transform: scale(1.04);
      }

      .selector-item:hover img[src*="trt"] {
        transform: scale(1.16);
      }

      .selector-item span {
        font-size: 0.82rem;
        font-weight: 700;
        color: white;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
      }

      .selector-item small {
        width: 100%;
        color: var(--text-dim);
        font-size: 0.68rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .selector-result-empty {
        grid-column: 1/-1;
        text-align: center;
        padding: 70px 20px;
        color: var(--text-dim);
      }

      @media (max-width: 768px) {
        .grid-selector-modal {
          padding: 0;
          align-items: stretch;
        }

        .grid-selector-shell {
          width: 100%;
          height: 100%;
          border-radius: 0;
          border-left: none;
          border-right: none;
        }

        .grid-selector-header {
          grid-template-columns: 1fr auto;
          padding: 12px;
          gap: 8px;
        }

        .grid-selector-heading {
          grid-column: 1 / -1;
        }

        .selector-category-tabs {
          padding: 8px 12px;
          gap: 8px;
        }

        .selector-channel-grid {
          padding: 10px 12px 16px;
          grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
          gap: 8px;
        }

        .selector-item {
          padding: 8px;
          min-height: 124px;
          gap: 6px;
        }

        .selector-item img {
          height: 68px;
          padding: 4px;
        }

        .selector-item span {
          font-size: 0.7rem;
          font-weight: 600;
        }
      }

      .shelf-item:hover {
        transform: scale(1.15) translateY(-5px);
        z-index: 100;
        border-color: var(--primary);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
      }

      .shelf-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
        opacity: 0.8;
        transition: opacity 0.3s;
        padding: 10px;
      }

      .shelf-item:hover img {
        opacity: 1;
      }

      .shelf-item-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 8px;
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 30%, transparent);
        font-size: 0.7rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.9;
      }

      .shelf-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
      }

      .shelf-close:hover {
        background: var(--primary);
        transform: rotate(90deg);
      }

      .cell.selected {
        border: 3px solid var(--primary) !important;
        box-shadow:
          inset 0 0 30px rgba(59, 130, 246, 0.4),
          0 0 20px rgba(59, 130, 246, 0.4);
        transform: scale(0.98);
      }

      @keyframes wave {
        0%,
        100% {
          transform: scaleY(0.5);
          opacity: 0.5;
        }

        50% {
          transform: scaleY(1);
          opacity: 1;
        }
      }

      .pulse-icon {
        width: 120px;
        height: 120px;
        background: var(--primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
      }

      /* Channel Edit Modal */
      .edit-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 30000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: selectorFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .edit-modal.active {
        display: flex;
      }

      .edit-modal-content {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 28px;
        width: 100%;
        max-width: 450px;
        padding: 40px;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
      }

      .edit-modal h2 {
        margin: 0 0 30px 0;
        font-size: 1.5rem;
        font-weight: 800;
        text-align: center;
        background: linear-gradient(to right, #fff, #94a3b8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .edit-input-group {
        margin-bottom: 25px;
      }

      .edit-input-group label {
        display: block;
        margin-bottom: 10px;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .edit-input-group input,
      .edit-input-group select {
        width: 100%;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        color: #fff;
        font-size: 1rem;
        outline: none;
        transition: all 0.3s;
        appearance: none;
      }

      .edit-input-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 18px;
        cursor: pointer;
      }

      .edit-input-group select option {
        background: #0f172a;
        /* Koyu arka plan */
        color: #ffffff;
        /* Beyaz yazı */
      }

      .edit-input-group input:focus,
      .edit-input-group select:focus {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--primary);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
      }

      .edit-actions {
        display: flex;
        gap: 15px;
        margin-top: 40px;
      }

      .edit-btn {
        flex: 1;
        padding: 16px;
        border-radius: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s;
        border: none;
      }

      .edit-btn-save {
        background: var(--primary);
        color: white;
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
      }

      .edit-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(59, 130, 246, 0.4);
      }

      .edit-btn-cancel {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-dim);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .edit-btn-cancel:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }

      /* Settings Modal */
      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
      }

      .modal.active {
        display: flex;
        animation: modalFadeIn 0.3s ease-out forwards;
      }

      @keyframes modalFadeIn {
        from {
          opacity: 0;
          transform: scale(0.95);
        }

        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .modal-body {
        background: rgba(10, 17, 32, 0.85);
        width: 100%;
        max-width: 600px;
        padding: clamp(20px, 4vw, 30px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
          0 25px 50px -12px rgba(0, 0, 0, 0.5),
          inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        margin: auto;
      }

      @media (min-width: 1024px) {
        .modal-body {
          max-width: 900px;
          padding: 30px;
        }
      }

      .settings-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      @media (min-width: 768px) {
        .settings-layout {
          flex-direction: row;
          min-height: 500px;
        }

        .settings-sidebar {
          width: 250px;
          border-right: 1px solid var(--border);
          padding-right: 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .settings-content {
          flex: 1;
          padding-left: 10px;
        }
      }

      .settings-tab {
        padding: 14px 16px;
        border-radius: 12px;
        cursor: pointer;
        color: var(--text-dim);
        font-weight: 500;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.95rem;
      }

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

      .settings-tab.active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        font-weight: 600;
      }

      .settings-panel {
        display: none;
        animation: fadeIn 0.3s ease;
      }

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

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(5px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .drag-channel-item {
        transition: background 0.2s;
      }

      .drag-over {
        border-top: 2px solid var(--primary) !important;
        background: rgba(59, 130, 246, 0.1) !important;
      }

      .drag-handle {
        cursor: grab;
        padding: 5px;
        margin-right: 10px;
        color: var(--text-dim);
        opacity: 0.5;
        transition: var(--transition);
      }

      .drag-handle:hover {
        opacity: 1;
        color: white;
      }

      .drag-channel-item:active .drag-handle {
        cursor: grabbing;
      }

      .drag-channel-item.broken {
        border: 1px solid rgba(239, 68, 68, 0.4) !important;
        background: rgba(239, 68, 68, 0.05) !important;
      }

      .broken-label {
        color: #ef4444;
        font-size: 0.7rem;
        font-weight: 800;
        margin-right: 10px;
        background: rgba(239, 68, 68, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
      }

      @media (max-width: 768px) {
        .settings-layout {
          flex-direction: column;
        }

        .settings-sidebar {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding-bottom: 15px;
          margin-bottom: 15px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }

        .settings-sidebar h2 {
          grid-column: span 2;
          margin-bottom: 10px !important;
        }

        .settings-tab {
          padding: 10px;
          font-size: 0.8rem;
          justify-content: center;
          background: rgba(255, 255, 255, 0.05);
        }
      }

      .settings-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        backdrop-filter: blur(5px);
      }

      .settings-card h2 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 10px;
      }

      input,
      textarea,
      select {
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 12px 16px;
        border-radius: 12px;
        color: white;
        font-family: inherit;
        margin-bottom: 15px;
        outline: none;
        transition: var(--transition);
      }

      input:focus,
      textarea:focus,
      select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.2);
        background: rgba(0, 0, 0, 0.6);
      }

      .btn-action {
        background: linear-gradient(135deg, var(--primary), #3b82f6);
        color: white;
        border: none;
        padding: 12px 16px;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        transition: var(--transition);
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
      }

      .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.5);
        background: linear-gradient(135deg, #3b82f6, var(--primary));
      }

      /* Close button for player overlay */
      .btn-close-overlay {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 15;
      }

      .btn-close-overlay:hover {
        background: rgba(255, 255, 255, 0.25);
      }

      /* Mobile */
      @media (max-width: 768px) {
        /* Dashboard Mobile */
        body,
        html {
          overflow-x: hidden;
          overflow-y: auto;
          height: auto;
          min-height: 100%;
        }

        #dashboard-view {
          position: relative;
          padding: 16px;
          justify-content: flex-start;
          min-height: 100vh;
          overflow-y: auto;
          display: flex;
        }

        .dashboard-header {
          margin-bottom: 20px;
          margin-top: 10px;
        }

        .dashboard-header h1 {
          font-size: 1.6rem;
        }

        .dashboard-header p {
          font-size: 0.85rem;
        }

        .tile-grid {
          grid-template-columns: repeat(2, 1fr);
          width: 100%;
          max-width: none;
          gap: 12px;
        }

        .tile {
          padding: 16px 12px;
          border-radius: 16px;
          min-height: 100px;
        }

        .tile-icon {
          font-size: 2rem;
        }

        .tile-title {
          font-size: 0.85rem;
        }

        .tile-count {
          font-size: 0.7rem;
        }

        #dashboard-view button {
          margin-top: 20px;
          margin-bottom: 30px;
          padding: 14px;
          width: 100%;
          max-width: none;
          font-size: 0.9rem;
        }

        /* Browser Mobile */
        .sidebar {
          position: fixed;
          left: -320px;
          top: 0;
          bottom: 0;
          z-index: 100;
          height: 100vh;
          width: min(320px, 100%);
          max-width: 100%;
          overflow: hidden;
          background: var(--bg);
        }

        .sidebar.mobile-active {
          left: 0;
        }

        .sidebar-header {
          padding: 12px !important;
        }

        .sidebar-navigator {
          padding: 10px !important;
          margin-bottom: 6px;
        }

        .category-list {
          padding: 6px !important;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          min-height: 0;
        }

        .category-item {
          padding: 8px 12px !important;
          margin-bottom: 4px !important;
          border-radius: 9px !important;
          font-size: 0.9rem;
          line-height: 1.15;
        }

        .category-item.active {
          border-radius: 4px 9px 9px 4px !important;
        }

        /* Player Mobile */
        .player-bottom {
          padding: 6px 8px;
          gap: 4px;
        }

        .controls-single-row {
          gap: 4px;
          flex-wrap: wrap;
          justify-content: center;
          overflow: visible;
          padding: 2px 0;
          max-width: 100%;
        }

        .controls-single-row::-webkit-scrollbar {
          display: none;
        }

        .btn-circle {
          width: 36px;
          height: 36px;
          font-size: 0.85rem;
          flex-shrink: 0;
          min-width: 0;
        }

        #pl-playpause {
          width: 44px !important;
          height: 44px !important;
          font-size: 1.1rem !important;
          flex-shrink: 0;
        }

        .controls-divider {
          height: 24px;
          margin: 0 2px;
          flex-shrink: 0;
        }
        
        /* Mobilde volume slider'ı gizle, sadece butonlar kalsın */
        .volume-control .volume-slider-el {
          display: none;
        }
        
        .volume-control {
          gap: 2px;
          flex-shrink: 0;
        }
        
        /* Mobilde progress bar'ı daha ince yap */
        .progress-container {
          gap: 8px;
          margin-bottom: 4px;
        }
        
        .progress-container span {
          font-size: 0.65rem !important;
          min-width: 35px !important;
        }
        
        .progress-bar-el {
          height: 4px;
        }
        
        .progress-bar-el::-webkit-slider-thumb {
          width: 12px;
          height: 12px;
        }

        #mobile-toggle {
          display: block !important;
        }

        .btn-close-overlay {
          top: 15px;
          right: 15px;
          width: 44px;
          height: 44px;
          font-size: 1.6rem;
        }

        /* Player sol ust geri butonu */
        .player-top .btn-circle {
          width: 52px !important;
          height: 52px !important;
          font-size: 1.5rem !important;
        }

        /* Volume mobil - bar gizle */
        .volume-control {
          gap: 6px;
        }

        .volume-bar {
          display: none;
        }

        /* Browser Mobile - Geri butonu */
        .back-btn-top {
          width: 48px;
          height: 48px;
          font-size: 1.3rem;
        }

        /* Radio Mobile */
        .radio-logo-container {
          width: 120px;
          height: 120px;
        }

        .radio-name {
          font-size: 1.1rem;
        }
      }

      #mobile-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: white;
        cursor: pointer;
      }

      .back-btn-top {
        width: 45px;
        height: 45px;
        background: var(--surface-light);
        border: none;
        color: white;
        border-radius: 12px;
        cursor: pointer;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
        }

        70% {
          transform: scale(1.05);
          box-shadow: 0 0 0 10px rgba(255, 75, 43, 0);
        }

        100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
        }
      }

      .led {
        width: 100%;
        height: 4px;
        margin-bottom: 2px;
        background-color: #1e293b;
        transition: background-color 0.1s ease;
      }

      .active-green {
        background-color: #22c55e;
        box-shadow: 0 0 5px #22c55e;
      }

      .active-yellow {
        background-color: #eab308;
        box-shadow: 0 0 5px #eab308;
      }

      .active-red {
        background-color: #ef4444;
        box-shadow: 0 0 5px #ef4444;
      }

      @keyframes phase-alarm {
        0% {
          background-color: rgba(0, 0, 0, 0.5);
        }

        50% {
          background-color: rgba(127, 29, 29, 0.8);
          border-color: #ef4444;
        }

        100% {
          background-color: rgba(0, 0, 0, 0.5);
        }
      }

      .alarm-active {
        animation: phase-alarm 1s infinite ease-in-out;
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
      }

      /* Advanced Radio Visualizer */
      .radio-advanced-visualizer {
        display: grid;
        grid-template-columns: repeat(2, minmax(280px, 400px));
        grid-auto-rows: min-content;
        width: 100%;
        height: 100%;
        padding: 230px 20px 100px 20px;
        box-sizing: border-box;
        align-content: start;
        justify-content: center;
        gap: 24px;
        overflow-y: auto;
        pointer-events: auto;
      }

      .adv-meter-box {
        background: rgba(15, 23, 42, 0.4);
        border-radius: 24px;
        padding: 30px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        box-shadow:
          0 20px 40px rgba(0, 0, 0, 0.4),
          inset 0 1px 1px rgba(255, 255, 255, 0.1);
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
      }

      .adv-meter-box:hover {
        transform: translateY(-5px);
        box-shadow:
          0 30px 60px rgba(0, 0, 0, 0.6),
          inset 0 1px 1px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.15);
      }

      @media (max-width: 768px) {
        .radio-advanced-visualizer {
          grid-template-columns: 1fr;
          padding-top: 120px;
          padding-bottom: 120px;
          overflow-x: hidden;
          touch-action: pan-y;
        }

        .adv-meter-box {
          max-width: 100%;
          padding: 15px;
        }

        /* Sadece ana bölümler arasındaki boşluğu daralt */
        #iptv-scope-phase-merged > div:first-of-type {
          gap: 10px !important;
          padding: 5px !important;
        }

        /* VU metrelerin flex yapısını bozma */
        .adv-meter-box div[id^="iptv-vumeter-"] {
          gap: 2px !important;
        }

        #iptv-goniometer-container {
          width: 200px !important;
          height: 200px !important;
        }

        #iptv-corr-container {
          max-width: 200px !important;
        }
      }

      /* Mini Player (PIP) Styling */
      .mini-player-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 320px;
        aspect-ratio: 16/9;
        background: #000;
        border-radius: 16px;
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.8),
          0 0 0 1px rgba(255, 255, 255, 0.1);
        z-index: 5000;
        overflow: hidden;
        display: none;
        flex-direction: column;
        transition:
          transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.3s;
        cursor: move;
      }

      .mini-player-container.active {
        display: flex;
        animation: miniFadeIn 0.4s ease-out;
      }

      @keyframes miniFadeIn {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.9);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .mini-player-container:hover .mini-controls,
      .mini-player-container:hover .mini-resize-handle,
      .mini-player-container:hover .mini-resize-handle-bl {
        opacity: 1;
      }

      .mini-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
        /* Video sürüklemeyi engellemesin */
      }

      /* Sol Üst Tutamaç - Dışarı taşırıldı */
      .mini-resize-handle {
        position: absolute;
        top: -10px;
        left: -10px;
        width: 30px;
        height: 30px;
        cursor: nwse-resize;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        z-index: 5005;
        opacity: 0;
        transition: opacity 0.3s;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      .mini-resize-handle::after {
        content: "↔";
        color: white;
        font-size: 14px;
        transform: rotate(-45deg);
      }

      /* Sol Alt Tutamaç - Dışarı taşırıldı */
      .mini-resize-handle-bl {
        position: absolute;
        bottom: -10px;
        left: -10px;
        width: 30px;
        height: 30px;
        cursor: nesw-resize;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        z-index: 5005;
        opacity: 0;
        transition: opacity 0.3s;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      .mini-resize-handle-bl::after {
        content: "↔";
        color: white;
        font-size: 14px;
        transform: rotate(45deg);
      }

      .mini-controls {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.6) 0%,
          transparent 40%,
          rgba(0, 0, 0, 0.6) 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 12px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
      }

      .mini-controls button {
        pointer-events: auto;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
      }

      .mini-controls button:hover {
        background: var(--primary);
        transform: scale(1.1);
      }

      .mini-title {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
      }

      @media (max-width: 768px) {
        .mini-player-container {
          width: 200px;
          bottom: 20px;
          right: 20px;
        }
      }

      /* Sleep Timer UI (Fixed Root Level) */
      .sleep-timer-display {
        background: rgba(251, 191, 36, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(251, 191, 36, 0.4);
        padding: 6px 12px;
        border-radius: 10px;
        color: #fbbf24;
        font-size: 0.85rem;
        font-weight: 800;
        display: none;
        align-items: center;
        gap: 8px;
        margin-right: 15px;
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
        animation: timer-pulse 2s infinite;
      }

      .sleep-timer-menu {
        position: fixed;
        bottom: 100px;
        right: 30px;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        padding: 12px;
        display: none;
        flex-direction: column;
        gap: 6px;
        z-index: 100000;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
        min-width: 200px;
      }

      .sleep-timer-menu.active {
        display: flex;
        animation: menuSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      @media (max-width: 768px) {
        .sleep-timer-display {
          font-size: 0.75rem;
          padding: 4px 8px;
          margin-right: 10px;
        }

        .sleep-timer-menu {
          bottom: 120px;
          right: 15px;
          min-width: 160px;
          max-width: calc(100vw - 30px);
        }

        .timer-toast {
          width: 80%;
          font-size: 1rem;
          padding: 15px 20px;
        }
      }

      @keyframes menuSlideUp {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.95);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .sleep-option {
        padding: 14px 18px;
        border-radius: 12px;
        color: white;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 4px;
      }

      .sleep-option:hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.4);
        transform: translateX(5px);
      }

      .sleep-option.cancel {
        color: #ef4444;
        margin-top: 10px;
        border-top: 1px solid rgba(239, 68, 68, 0.2);
        background: rgba(239, 68, 68, 0.05);
      }

      /* Aktif Zamanlayıcı Buton Efekti */
      #btn-sleep.timer-active {
        color: #fbbf24 !important;
        background: rgba(251, 191, 36, 0.1);
        border-color: #fbbf24;
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
        animation: timer-pulse 2s infinite;
      }

      /* Toast Notification */
      .timer-toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(59, 130, 246, 0.95);
        color: white;
        padding: 20px 40px;
        border-radius: 20px;
        font-weight: 800;
        font-size: 1.2rem;
        z-index: 100001;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        display: none;
        animation: toastIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        letter-spacing: 1px;
        text-align: center;
      }

      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translate(-50%, -30%) scale(0.8);
        }

        to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @keyframes timer-pulse {
        0% {
          transform: scale(1);
          filter: brightness(1);
        }

        50% {
          transform: scale(1.05);
          filter: brightness(1.3);
        }

        100% {
          transform: scale(1);
          filter: brightness(1);
        }
      }

      /* Global Header */
      .global-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: rgba(10, 17, 32, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 9999;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
      }

      .header-now-playing-box {
        display: none;
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
        padding: 6px 15px;
        border-radius: 12px;
        align-items: center;
        gap: 10px;
        margin: 0 15px;
        max-width: 300px;
        overflow: hidden;
        animation: fadeIn 0.4s ease;
      }

      .header-now-playing-box .dot {
        width: 8px;
        height: 8px;
        background: #4ade80;
        border-radius: 50%;
        box-shadow: 0 0 10px #4ade80;
        animation: blink 1.5s infinite;
      }

      .header-now-playing-box.stopped {
        opacity: 0.7;
        filter: grayscale(0.6);
        border-color: rgba(255, 255, 255, 0.1);
      }

      .header-now-playing-box.stopped .dot {
        background: #64748b;
        box-shadow: none;
        animation: none;
      }

      .header-now-playing-box .name {
        font-size: 0.8rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .header-logo {
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: 1px;
        cursor: pointer;
      }

      .header-nav {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .header-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        padding: 10px 18px;
        border-radius: 14px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .header-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .header-btn.primary {
        background: linear-gradient(135deg, var(--primary), #2563eb);
        border-color: transparent;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      }

      .header-btn#btn-return-player {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid rgba(34, 197, 94, 0.4);
        color: #4ade80;
        animation: pulse-green 2s infinite;
      }

      @keyframes pulse-green {
        0% {
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
        }

        70% {
          box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
        }

        100% {
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        }
      }

      .header-btn i {
        font-size: 1.1rem;
      }

      @keyframes blink {
        0% {
          opacity: 1;
          transform: scale(1);
        }

        50% {
          opacity: 0.4;
          transform: scale(1.2);
        }

        100% {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* View adjustments for fixed header */
      .view {
        padding-top: 60px;
        /* Offset for fixed header */
      }

      #dashboard-view {
        padding-top: 80px;
      }

      @media (max-width: 768px) {
        .header-btn span {
          display: none;
        }

        .header-btn {
          padding: 10px;
        }

        .header-logo {
          font-size: 1rem;
        }

        .header-now-playing-box {
          margin: 0 5px;
          padding: 4px 8px;
          max-width: 120px;
        }

        .header-now-playing-box .name {
          font-size: 0.7rem;
        }

        .header-nav {
          gap: 5px;
        }
      }

      /* Switch Toggle */
      .switch {
        position: relative;
        display: inline-block;
        width: 46px;
        height: 24px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.1);
        transition: 0.4s;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
      }

      input:checked + .slider {
        background-color: var(--primary);
      }

      input:focus + .slider {
        box-shadow: 0 0 1px var(--primary);
      }

      input:checked + .slider:before {
        transform: translateX(22px);
      }

      .slider.round {
        border-radius: 24px;
      }

      .slider.round:before {
        border-radius: 50%;
      }

      /* Global Hamburger Dropdown */
      .global-menu-container {
        position: relative;
        z-index: 1001;
        display: flex;
        align-items: center;
      }

      .btn-hamburger {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        transition: var(--transition);
      }

      .btn-hamburger:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
      }

      .global-dropdown {
        position: absolute;
        top: 55px;
        right: 0;
        width: 240px;
        background: rgba(20, 25, 40, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        display: none;
        flex-direction: column;
        padding: 10px;
        animation: menuSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        overflow: hidden;
      }

      .global-dropdown.active {
        display: flex;
      }

      @keyframes menuSlideDown {
        from {
          opacity: 0;
          transform: translateY(-10px) scale(0.95);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        color: var(--text-dim);
        text-decoration: none;
        font-weight: 500;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.95rem;
      }

      .menu-item:hover {
        background: rgba(255, 255, 255, 0.08);
        color: white;
        padding-left: 22px;
      }

      .menu-item i {
        font-size: 1.2rem;
        width: 24px;
        text-align: center;
      }

      .menu-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.05);
        margin: 8px 0;
      }

      .menu-user-box {
        padding: 8px 14px;
        background: linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.15),
          transparent
        );
        border-radius: 12px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(59, 130, 246, 0.2);
        cursor: pointer;
        white-space: nowrap;
      }

      .menu-user-box:hover {
        background: linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.25),
          transparent
        );
      }

      .tile:active {
        transform: scale(0.92);
        transition: transform 0.1s ease-out;
      }

      .btn-circle:active {
        transform: scale(0.85);
        transition: transform 0.1s ease-out;
      }

      .app-toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(30, 41, 59, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        color: white;
        padding: 14px 28px;
        border-radius: 100px;
        font-weight: 600;
        font-size: 0.95rem;
        z-index: 10000;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 0;
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .app-toast.active {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        bottom: 45px;
      }

      /* Footer Stilleri */
      .global-footer {
	    height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary, #1a1a2e);
        border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
        padding: 6px 10px;
        text-align: center;
        z-index: 9999;
        backdrop-filter: blur(10px);
      }

      .footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap;
        font-size: 0.7rem;
		overflow-x: auto;
		white-space: nowrap;
      }

      .footer-link {
        color: var(--primary, #e67e22);
        text-decoration: none;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .footer-link:hover {
        background: rgba(255, 255, 255, 0.1);
        text-decoration: underline;
      }

      .footer-separator {
        color: var(--text-dim, #888);
        font-size: 0.7rem;
      }

      .footer-counter {
        color: var(--text-dim, #888);
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
      }

      /* Mobilde alt boşluk bırak (içerik footere yapışmasın) */
      body {
        padding-bottom: 75px;
      }

      html.android-landscape body {
        padding-bottom: 0;
        overflow: hidden;
      }

      /* Mobil yatay mod (landscape) - tüm mobil cihazlar */
      html.mobile-landscape .global-header,
      html.android-landscape .global-header {
        height: 44px;
        padding: 0 14px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      html.mobile-landscape .view,
      html.android-landscape .view {
        padding-top: 44px;
      }

      html.mobile-landscape #dashboard-view,
      html.android-landscape #dashboard-view {
        padding-top: 56px;
      }

      html.mobile-landscape .global-footer,
      html.android-landscape .global-footer {
        display: none;
      }

      /* Player view'da header'ı tamamen gizle (landscape) */
      html.mobile-landscape #player-view .global-header,
      html.android-landscape #player-view .global-header {
        display: none !important;
      }

      html.mobile-landscape #player-view,
      html.android-landscape #player-view {
        padding-top: 0 !important;
      }

      /* Player kontrolleri - landscape mobil */
      html.mobile-landscape #player-view .player-bottom,
      html.android-landscape #player-view .player-bottom {
        padding: 6px 10px;
        gap: 4px;
      }

      html.mobile-landscape #player-view .controls-single-row,
      html.android-landscape #player-view .controls-single-row {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: center;
        padding: 4px 0;
      }

      html.mobile-landscape #player-view .btn-circle,
      html.android-landscape #player-view .btn-circle {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        flex-shrink: 0;
      }

      html.mobile-landscape #player-view #pl-playpause,
      html.android-landscape #player-view #pl-playpause {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
      }

      html.mobile-landscape #player-view .controls-divider,
      html.android-landscape #player-view .controls-divider {
        height: 22px;
        margin: 0 2px;
      }

      html.mobile-landscape #player-view .volume-control,
      html.android-landscape #player-view .volume-control {
        gap: 3px;
      }

      html.mobile-landscape #player-view .volume-slider-el,
      html.android-landscape #player-view .volume-slider-el {
        width: 60px;
      }

      html.mobile-landscape #player-view .progress-container,
      html.android-landscape #player-view .progress-container {
        gap: 8px;
        margin-bottom: 2px;
      }

      html.mobile-landscape #player-view .progress-bar-el,
      html.android-landscape #player-view .progress-bar-el {
        height: 4px;
      }

      html.mobile-landscape #player-view .progress-bar-el::-webkit-slider-thumb,
      html.android-landscape #player-view .progress-bar-el::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
      }

      html.mobile-landscape #player-view #cur-time,
      html.android-landscape #player-view #cur-time,
      html.mobile-landscape #player-view #dur-time,
      html.android-landscape #player-view #dur-time {
        font-size: 0.65rem !important;
        min-width: 35px !important;
      }

      html.mobile-landscape #player-view .player-top,
      html.android-landscape #player-view .player-top {
        padding: 10px 15px;
        gap: 10px;
      }

      html.mobile-landscape #player-view .player-top .btn-circle,
      html.android-landscape #player-view .player-top .btn-circle {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
      }

      html.mobile-landscape #player-view .player-info-text h2,
      html.android-landscape #player-view .player-info-text h2 {
        font-size: 0.8rem;
      }

      html.mobile-landscape #player-view .player-info-text p,
      html.android-landscape #player-view .player-info-text p {
        font-size: 0.65rem;
      }

      html.mobile-landscape #player-view .side-control-container,
      html.android-landscape #player-view .side-control-container {
        display: none !important;
      }

      html.mobile-landscape #player-view .player-overlay,
      html.android-landscape #player-view .player-overlay {
        background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.7) 0%,
          transparent 35%,
          transparent 65%,
          rgba(0, 0, 0, 0.7) 100%
        );
      }

      /* Landscape modunda header'ı gizle - tam ekran deneyimi */
      html.mobile-landscape .global-header,
      html.android-landscape .global-header,
      html.mobile-landscape header.global-header,
      html.android-landscape header.global-header,
      /* landscape-locked modunda da header gizlensin */
      #player-view.landscape-locked ~ .global-header,
      body:has(#player-view.landscape-locked) .global-header {
        display: none !important;
      }
      
      /* landscape-locked modunda player view padding'i sıfırla */
      #player-view.landscape-locked {
        padding-top: 0 !important;
      }

      /* Landscape modunda mavi çizgiyi ve tüm olası üst boşlukları kaldır */
      html.mobile-landscape body,
      html.android-landscape body,
      html.mobile-landscape html,
      html.android-landscape html,
      html.mobile-landscape #player-view,
      html.android-landscape #player-view,
      html.mobile-landscape .view,
      html.android-landscape .view {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        outline: none !important;
      }
      
      /* Safe area / status bar mavi çizgisini kaldır */
      html.mobile-landscape,
      html.android-landscape {
        background: #000 !important;
      }
      
      html.mobile-landscape body,
      html.android-landscape body {
        background: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
      }
      
      /* Landscape modunda tüm view'ların arka planını siyah yap */
      html.mobile-landscape .view,
      html.android-landscape .view,
      html.mobile-landscape #player-view,
      html.android-landscape #player-view,
      html.mobile-landscape #dashboard-view,
      html.android-landscape #dashboard-view,
      html.mobile-landscape #browser-view,
      html.android-landscape #browser-view,
      html.mobile-landscape #grid-view,
      html.android-landscape #grid-view {
        background: #000 !important;
      }
      
      /* landscape-locked modunda da aynı */
      #player-view.landscape-locked,
      #player-view.landscape-locked .video-container,
      #player-view.landscape-locked video {
        background: #000 !important;
      }
      
      /* PWA status bar rengini siyah yap */
      html.mobile-landscape meta[name="theme-color"],
      html.android-landscape meta[name="theme-color"] {
        content: #000000;
      }
      
      /* Tüm olası üst çizgileri temizle */
      html.mobile-landscape *,
      html.android-landscape * {
        -webkit-tap-highlight-color: transparent;
      }
      
      /* Player view landscape'de tüm padding/margin sıfır */
      html.mobile-landscape #player-view,
      html.android-landscape #player-view {
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
      }
      
      html.mobile-landscape #player-view .video-container,
      html.android-landscape #player-view .video-container {
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      html.mobile-landscape body,
      html.android-landscape body {
        padding-bottom: 0;
        overflow: hidden;
      }

      html.mobile-landscape .btn-hamburger,
      html.android-landscape .btn-hamburger {
        width: 38px;
        height: 38px;
        border-radius: 10px;
      }

      html.mobile-landscape .header-now-playing-box,
      html.android-landscape .header-now-playing-box {
        padding: 4px 10px;
        border-radius: 10px;
        max-width: 100px;
      }

      html.mobile-landscape .header-now-playing-box .name,
      html.android-landscape .header-now-playing-box .name {
        font-size: 0.65rem;
      }

      html.mobile-landscape .browser-header,
      html.android-landscape .browser-header {
        padding: 10px 14px;
        min-height: 50px;
        gap: 10px;
      }

      html.mobile-landscape .search-box input,
      html.android-landscape .search-box input {
        padding: 8px 14px 8px 38px;
        border-radius: 10px;
        font-size: 0.85rem;
      }

      html.mobile-landscape .sidebar,
      html.android-landscape .sidebar {
        width: 260px;
      }

      html.mobile-landscape .sidebar-header,
      html.android-landscape .sidebar-header,
      html.mobile-landscape .sidebar-navigator,
      html.android-landscape .sidebar-navigator {
        padding: 10px 12px;
      }

      html.mobile-landscape .nav-label,
      html.android-landscape .nav-label {
        margin-top: 10px;
        margin-bottom: 6px;
      }

      html.mobile-landscape .nav-select,
      html.android-landscape .nav-select {
        padding: 8px 10px;
        border-radius: 8px;
      }

      html.mobile-landscape .nav-cat-grid,
      html.android-landscape .nav-cat-grid {
        gap: 6px;
        grid-template-columns: repeat(3, 1fr);
      }

      html.mobile-landscape .nav-cat-btn,
      html.android-landscape .nav-cat-btn {
        min-height: 64px;
        border-radius: 10px;
        font-size: 0.65rem;
        gap: 4px;
      }

      html.mobile-landscape .nav-cat-btn span,
      html.android-landscape .nav-cat-btn span {
        font-size: 0.9rem;
      }

      html.mobile-landscape .category-list,
      html.android-landscape .category-list {
        padding: 4px 8px;
      }

      html.mobile-landscape .category-item,
      html.android-landscape .category-item {
        padding: 6px 10px;
        border-radius: 8px;
        margin-bottom: 3px;
        font-size: 0.8rem;
        line-height: 1.1;
      }

      html.mobile-landscape .channel-grid,
      html.android-landscape .channel-grid {
        padding: 10px 14px 14px;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      }

      html.mobile-landscape .channel-card,
      html.android-landscape .channel-card {
        min-height: 0;
        border-radius: 12px;
        padding: 8px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      html.mobile-landscape .channel-card:hover,
      html.android-landscape .channel-card:hover {
        transform: none;
        box-shadow: none;
      }

      html.mobile-landscape .logo-bg-tram,
      html.android-landscape .logo-bg-tram {
        display: none;
      }

      html.mobile-landscape .card-overlay,
      html.android-landscape .card-overlay {
        background: radial-gradient(
          circle at center,
          transparent 15%,
          rgba(0, 0, 0, 0.28) 100%
        );
      }

      /* Rotate overlay landscape stilleri */
      html.mobile-landscape .rotate-device-overlay,
      html.android-landscape .rotate-device-overlay {
        z-index: 99999;
      }

      /* Mobil döndür butonu - sadece mobil cihazlarda görünür */
      #pl-rotate {
        display: none !important;
      }
      @media (hover: none) and (pointer: coarse) {
        #pl-rotate {
          display: flex !important;
        }
      }
      /* Landscape modda butonun rengini değiştir (aktif olduğunu belirtmek için) */
      html.mobile-landscape #pl-rotate,
      html.android-landscape #pl-rotate {
        color: var(--primary) !important;
      }
      #player-view.landscape-locked #pl-rotate {
        color: #22c55e !important;
      }

      html.android-landscape .btn-hamburger {
        width: 44px;
        height: 44px;
        border-radius: 12px;
      }

      html.android-landscape .header-now-playing-box {
        padding: 5px 14px;
        border-radius: 12px;
      }

      html.android-landscape .browser-header {
        padding: 12px 18px;
        min-height: 58px;
        gap: 12px;
      }

      html.android-landscape .search-box input {
        padding: 10px 18px 10px 44px;
        border-radius: 12px;
        font-size: 0.95rem;
      }

      html.android-landscape .sidebar {
        width: 285px;
      }

      html.android-landscape .sidebar-header,
      html.android-landscape .sidebar-navigator {
        padding: 12px 14px;
      }

      html.android-landscape .nav-label {
        margin-top: 12px;
        margin-bottom: 7px;
      }

      html.android-landscape .nav-select {
        padding: 10px 12px;
        border-radius: 10px;
      }

      html.android-landscape .nav-cat-grid {
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
      }

      html.android-landscape .nav-cat-btn {
        min-height: 74px;
        border-radius: 12px;
        font-size: 0.7rem;
        gap: 5px;
      }

      html.android-landscape .nav-cat-btn span {
        font-size: 1rem;
      }

      html.android-landscape .category-list {
        padding: 6px 10px;
      }

      html.android-landscape .category-item {
        padding: 7px 12px;
        border-radius: 9px;
        margin-bottom: 4px;
        font-size: 0.86rem;
        line-height: 1.12;
      }

      html.android-landscape .channel-grid {
        padding: 14px 18px 18px;
        gap: 14px;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }

      html.android-landscape .channel-card {
        min-height: 0;
        border-radius: 14px;
        padding: 10px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      html.android-landscape .channel-card:hover {
        transform: none;
        box-shadow: none;
      }

      html.android-landscape .logo-bg-tram {
        display: none;
      }

      html.android-landscape .card-overlay {
        background: radial-gradient(
          circle at center,
          transparent 15%,
          rgba(0, 0, 0, 0.28) 100%
        );
      }

      /* View Mode Buttons */
      .view-mode-buttons {
        display: flex;
        gap: 6px;
        align-items: center;
      }

      .view-mode-btn {
        width: 36px;
        height: 36px;
        border: 1px solid var(--border);
        background: var(--surface-light);
        color: var(--text-dim);
        border-radius: 10px;
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
      }

      .view-mode-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text);
        border-color: var(--primary);
      }

      .view-mode-btn.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
      }

#grid-list {
  height: 500px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888888 #f1f1f1;
}

#grid-list::-webkit-scrollbar {
  width: 8px;
}

#grid-list::-webkit-scrollbar-thumb {
  background-color: #888888;
}

#grid-list::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}


      /* ===== LIST VIEW ===== */
.channel-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.channel-grid.list-view::-webkit-scrollbar {
  width: 6px;
}

.channel-grid.list-view::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.channel-grid.list-view::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

      .channel-grid.list-view .channel-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        aspect-ratio: auto;
        min-height: 60px;
        height: auto;
        padding: 8px 16px;
        border-radius: 12px;
        gap: 14px;
        justify-content: flex-start;
        text-align: left;
      }

      .channel-grid.list-view .channel-card:hover {
        transform: translateX(4px);
      }

      .channel-grid.list-view .channel-card:active {
        transform: scale(0.99);
      }

      .channel-grid.list-view .channel-logo {
        width: 40px;
        height: 40px;
        min-width: 40px;
        object-fit: contain;
        border-radius: 8px;
        position: relative;
        z-index: 2;
      }

      .channel-grid.list-view .logo-bg-tram {
        display: none;
      }

      .channel-grid.list-view .card-overlay {
        display: none;
      }

      .channel-grid.list-view .name {
        font-size: 0.9rem;
        font-weight: 600;
        flex: 1;
        position: relative;
        z-index: 2;
        text-align: left;
      }

      .channel-grid.list-view .fav-star {
        position: relative;
        top: auto;
        right: auto;
        font-size: 1.1rem;
        z-index: 3;
      }

      .channel-grid.list-view .playing-label {
        position: relative;
        top: auto;
        left: auto;
        font-size: 0.6rem;
        padding: 3px 10px;
        border-radius: 20px;
      }

      /* ===== COMPACT VIEW ===== */
.channel-grid.compact-view {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 15px 20px;
  align-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.channel-grid.compact-view::-webkit-scrollbar {
  width: 6px;
}

.channel-grid.compact-view::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.channel-grid.compact-view::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

      .channel-grid.compact-view .channel-card {
        width: auto;
        min-width: 0;
        aspect-ratio: auto;
        min-height: 36px;
        height: auto;
        padding: 6px 14px;
        border-radius: 20px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
        text-align: left;
        flex-shrink: 0;
      }

      .channel-grid.compact-view .channel-card:hover {
        transform: translateY(-2px);
      }

      .channel-grid.compact-view .channel-card:active {
        transform: scale(0.95);
      }

      .channel-grid.compact-view .channel-logo {
        width: 22px;
        height: 22px;
        min-width: 22px;
        object-fit: contain;
        border-radius: 4px;
        position: relative;
        z-index: 2;
      }

      .channel-grid.compact-view .logo-bg-tram {
        display: none;
      }

      .channel-grid.compact-view .card-overlay {
        display: none;
      }

      .channel-grid.compact-view .name {
        font-size: 0.78rem;
        font-weight: 500;
        position: relative;
        z-index: 2;
        text-align: left;
        white-space: nowrap;
      }

      .channel-grid.compact-view .fav-star {
        position: relative;
        top: auto;
        right: auto;
        font-size: 0.85rem;
        z-index: 3;
      }

      .channel-grid.compact-view .playing-label {
        position: relative;
        top: auto;
        left: auto;
        font-size: 0.5rem;
        padding: 2px 8px;
        border-radius: 20px;
      }

      /* Responsive: Çok küçük ekranlarda */
	 @media (max-width: 480px) {
	  .footer-links {
		font-size: 0.65rem;
		gap: 4px;
	  }

	  .footer-link {
		padding: 3px 6px;
	  }

	  body {
	    margin: 0;
	    padding-bottom: 40px; /* footer yüksekliği */
      background: #000 !important
	  }
	}

/* ===== Loading Overlay (Player) ===== */
.player-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.player-loading-overlay.active {
  display: flex;
}

.player-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: playerSpin 0.8s linear infinite;
  margin-bottom: 20px;
}

.player-loading-spinner-fast {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid #10b981;
  border-radius: 50%;
  animation: playerSpin 0.4s linear infinite;
}

@keyframes playerSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.player-loading-text {
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: playerPulse 1.5s ease-in-out infinite;
}

.player-loading-channel {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 8px;
  text-align: center;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes playerPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Loading bar (altyapı) */
.player-loading-bar-container {
  width: 200px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-top: 20px;
  overflow: hidden;
}

.player-loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), #10b981);
  border-radius: 3px;
  animation: loadingBarProgress 2s ease-in-out infinite;
}

@keyframes loadingBarProgress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* Radyo için özel loading */
.player-view.is-radio .player-loading-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.player-view.is-radio .player-loading-spinner {
  border-top-color: #10b981;
}

/* Kanal geçiş animasyonu */
.player-view.switching .video-container video,
.player-view.switching .video-container iframe {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.player-view:not(.switching) .video-container video,
.player-view:not(.switching) .video-container iframe {
  opacity: 1;
  transition: opacity 0.5s ease;
}