@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&family=Konkhmer+Sleokchher&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&family=Asap:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&family=Konkhmer+Sleokchher&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&family=Asap:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&family=Konkhmer+Sleokchher&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&family=Asap:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&family=Konkhmer+Sleokchher&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap');

 
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background:rgb(17, 15, 25);
            color: #ffffff;
            line-height: 1.6;
        }

::-webkit-scrollbar {
  background: rgb(17, 15, 25);
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #1f2044;
  border-radius: 6px;
  width: 10px;
  /* Örnek olarak scrollbar genişliğinden 2px daha az olarak ayarlandı */
  box-shadow: inset 0 0 0px 2px rgb(17, 15, 25);
  /* Scrollbar thumb'unun iç kısmına iç gölge uygulayan kod */

}

  .main-content {
    margin-top: 80px;
    width: 950px;
    margin-left: 50px;
    padding: 5px;
    position: relative;  /* <-- BUNU EKLE! */
}

        /* Loading State */
        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 60vh;
            gap: 20px;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-top: 3px solid #46B5FF;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        /* Error State */
        .error-container {
            text-align: center;
            padding: 40px 20px;
            background: rgba(220, 53, 69, 0.1);
            border: 1px solid rgba(220, 53, 69, 0.3);
            border-radius: 12px;
            margin: 20px 0;
        }

        .error-container h2 {
            color: #dc3545;
            margin-bottom: 10px;
        }

        .error-container p {
            color: #ccc;
            margin-bottom: 20px;
        }

        .retry-btn {
            background: #46B5FF;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s ease;
        }

        .retry-btn:hover {
            background: #b8070f;
        }

        /* Video Player Container */
        .player-container {
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 30px;
        }

/* Reklam Köşesi */
.ad-box {
  position: absolute;
  top: 5px; /* navbar altında */
  right: -320px;
  width: 300px;
  aspect-ratio: 16 / 6;
  background: #f1f1f1;
  border: 1px solid #404040;
  border-radius: 12px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.ad-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.ad-banner {
  width: 100%;
  height: 60%;
  object-fit: cover;
  display: block;
}

.ad-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(17, 15, 25);
  color: #fff;
  padding: 8px;
  height: 40%;
  box-sizing: border-box;
}

/* Logo */
.ad-logo img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 5px;
  object-fit: cover;
}

/* Text kısmı */
.ad-text {
  flex: 1;
  margin: 0 8px;
  overflow: hidden;
}

.ad-desc {
  font-size: 13px;
  font-weight: bold;
  margin-top: 5px;
}

.ad-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ad-label {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 5px;
}

.ad-link {
  font-size: 10px;
  color: #aaa;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

/* Buton */
.ad-action .ad-btn {
  display: inline-block;
  background: #007bff;
  color: #fff;
  padding: 5px 15px;
  font-size: 12px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease;
}

/* Kabataslak mobil tasarımdaki yukarı ok — masaüstünde (300px'lik yüzen
   kart) yer yok/gerek yok, sadece mobil şeritte görünür (bkz. medya
   sorgusu aşağıda). */
.ad-chevron {
  display: none;
}

.ad-action .ad-btn:hover {
  background: #0056b3;
}






.sections-box {
  background: #111;
  color: white;
  padding: 10px;
  border-radius: 8px;
  max-height: 300px; /* çok uzun olursa scroll çıkar */
  overflow-y: auto;
}





.episodes {
  width: 300px;
  height: 550px;
  background: rgb(17, 15, 25);
  margin-left: 965px; 
  margin-top: -460px;
  color: #fff;
  padding: 0;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid #404040;
  display: flex;
  flex-direction: column;
}

/* Başlık kısmı sticky ve içinde sezon seçici */
.episodes h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  background: #0b0a13;
  padding: 8px 10px;
  border-bottom: 1px solid #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  display: flex;
  flex-direction: column;
}

/* H3 içindeki sezon seçici */
.episodes h3 .season-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;  /* Başlık ile arasındaki boşluk */
  font-family: Arial, sans-serif;
  color: #a1a1a1;
  font-size: 13px;
  font-weight: 400;
}

.episodes h3 .season-selector select {
  background: #0b0a13;
  color: #fff;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 1px 2px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

/* Liste scrollable */
.episodes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  max-height: 475px;
}

/* Liste elemanları */
.episodes li {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

/* Şu an izlenmekte olan bölüm: panel arka planından belirgin şekilde
   daha koyu bir ton + sol tarafta ince bir vurgu çizgisi, böylece
   kullanıcı listede hangi bölümde olduğunu bir bakışta anlayabilir. */
.episodes li.episode-active {
  background-color: rgba(0, 0, 0, 0.55);
  border-left: 3px solid #4db8ff;
  padding-left: 7px; /* border-left'in eklediği 3px'i dengelemek için */
}

/* Bölüm içeriği */
.episode-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.episode-text {
  display: flex;
  flex-direction: column;
}

/* Kaçıncı bölüm */
.episode-num {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

/* Bölüm adı + süre */
.episode-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.episode-title .name {
  font-size: 13px;
  font-weight: 400;
  color: #aaa;
}

.episode-title .duration {
  font-size: 12px;
  color: #bbb;
}

/* Thumbnail sabit boyutta */
.episode-thumb {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Scrollbar minimal */
.episodes ul::-webkit-scrollbar {
  width: 6px;
}

.episodes ul::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.episodes ul::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar {
  background: rgb(17, 15, 25);
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #1f2044;
  border-radius: 6px;
  width: 10px;
  /* Örnek olarak scrollbar genişliğinden 2px daha az olarak ayarlandı */
  box-shadow: inset 0 0 0px 2px rgb(17, 15, 25);
  /* Scrollbar thumb'unun iç kısmına iç gölge uygulayan kod */

}




/* --- Dubbing Controls --- */
.dubbing-controls-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* solda hizala */
    gap: 10px;
    margin: -10px 0 10px 0;
    margin-bottom: 20px;
    background: #1f1c25;
    border-radius: 50px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    width: 160px;
}


.dubbing-label {
    order: 1; /* solda */
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.dubbing-toggle {
    order: 3; /* ortada */
    width: 40px;
    height: 20px;
    background: #555;
    border-radius: 30px;
    cursor: pointer;
    border: 2px solid #777;
    display: flex;
    align-items: center;
    position: relative;
    transition: background 0.3s, border-color 0.3s;
}

.dubbing-status {
    order: 2; /* en sağda */
    font-size: 9px;
    width: 40px;
    font-weight: 700;
    color: #727272;
}


.dubbing-toggle-on {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    border-color: #005313 !important;
}

.dubbing-toggle-disabled {
    background: #b11b1b !important;
    border: 2px solid #555 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.dubbing-toggle-slider {
    position: absolute;
    left: 2px;
    top: 1px;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}



.dubbing-status-disabled {
    color: #666 !important;
}





/* ==========================================
   YOUTUBE TARZI YORUM ALANI STİLLERİ
   ========================================== */

   .comment-box,
.comment-box * {
  transition: none !important;
}

.comments-section {
  margin: -80px 0 20px 0;
  color: #f1f1f1;
  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
  /* KÖK NEDEN DÜZELTMESİ: bu bölüm daha önce genişliği kısıtlanmadığı için
     boşluksuz uzun bir yorum yazıldığında (örn. "yıyıyıyıyı...") flex
     içerikleri esneyip tüm sayfayı sağa doğru genişletiyordu. max-width:100%
     + box-sizing ile bölüm asla kendi kapsayıcısından taşamaz. */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.comment-count {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}

/* Kapatma (X) butonu: sadece mobilde, panel bottom-sheet olarak açıkken
   görünür (bkz. medya sorgusu). Masaüstünde yorumlar zaten hep açık
   göründüğü için gereksiz. */
.comments-close-btn {
  display: none;
}

.comment-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 30px;
}

.comment-profile {
  flex-shrink: 0;
}

/* Yorum yazma kutusundaki avatarın başlangıç boyutu */
.comment-box .comment-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* Yorum yapma alanına tıklandığında / odaklanıldığında avatar boyutu */
.comment-box:focus-within .comment-avatar {
  width: 40px;
  height: 40px;
}

.comment-input-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Yorum Yazma Alanı & Alt Çizgi */
.comment-input-area .comment-input {
  width: 100%;
  min-height: 24px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f1f1;
  font-size: 14px;
  padding-bottom: 4px;
  outline: none;
  line-height: 1.4;
  word-break: break-word;
  transition: border-color 0.2s ease;
}

.comment-input-area .comment-input:empty:before {
  content: attr(data-placeholder);
  color: #aaaaaa;
  font-size: 14px;
  cursor: text;
  transition: none;
}

/* Odaklanınca çizginin parlaması (YouTube Beyaz Çizgisi) */
.comment-input-area .comment-input:focus {
  border-bottom: 2px solid #ffffff;
}

/* Alt Aksiyon Çubuğu (Emoji + Butonlar) */
.comment-actions {
  display: none; /* Varsayılan olarak gizli */
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* Tıklanınca veya odaklanınca görünür olur */
.comment-actions.active {
  display: flex;
}

.emoji-btn {
  background: transparent;
  border: none;
  color: #f1f1f1;
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

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

.action-buttons-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* İptal Butonu */
.comment-cancel {
  background: transparent;
  border: none;
  color: #f1f1f1;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

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

/* Yorum Yap (Pasif Durum - Görsel 2) */
.comment-submit {
  background-color: rgba(255, 255, 255, 0.1);
  color: #717171;
  font-size: 14px;
  font-weight: 600;
  border: none;
  padding: 13px 20px;
  border-radius: 100px;
  cursor: not-allowed;
  transition: all 0.2s ease;
}

/* Yorum Yap (Yazı Yazıldığında Aktif Durum - Görsel 3) */
.comment-submit:not(:disabled) {
  background-color: #f1f1f1;
  color: #0f0f0f;
  cursor: pointer;
}

.comment-submit:not(:disabled):hover {
  background-color: #d9d9d9;
}

/* ==========================================
   YORUM LİSTESİ (Gönderilmiş yorumların gösterimi)
   Daha önce bu bölüm için hiç stil tanımlı değildi, bu yüzden yorumlar
   biçimsiz/çirkin görünüyordu. Üstteki yorum yazma kutusuyla aynı
   YouTube tarzı dile getirildi.
   ========================================== */

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 100%;
}

.comment-item .comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  min-width: 0; /* uzun kelimelerin taşmasını engeller */
}

.comment-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: #f1f1f1;
}

.comment-date {
  font-size: 12px;
  color: #aaaaaa;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: #f1f1f1;
  word-break: break-word;
  overflow-wrap: anywhere; /* boşluksuz çok uzun metinleri de kırar (asıl düzeltme) */
  white-space: pre-wrap;
  max-width: 100%;
  display: block;
}

.comment-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.comment-like-btn,
.comment-dislike-btn {
  background: transparent;
  border: none;
  color: #aaaaaa;
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.comment-like-btn:hover,
.comment-dislike-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f1f1f1;
}

.comment-reply-btn {
  background: transparent;
  border: none;
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-left: 4px;
}

.comment-reply-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f1f1f1;
}

/* Beğeni sayısı */
.comment-like-count,
.comment-dislike-count {
  font-size: 12px;
  color: #aaaaaa;
  margin-right: 4px;
  min-width: 10px;
}

/* Beğenilmiş durum (kalp kırmızı vurgu) */
.comment-like-btn.active {
  color: #46b5ff;
}

/* Beğenilmemiş (dislike) durum vurgusu */
.comment-dislike-btn.active {
  color: #f1f1f1;
}

/* Yorum Sil Butonu */
.comment-delete-btn {
  background: transparent;
  border: none;
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-left: auto;
}

.comment-delete-btn:hover {
  background-color: rgba(229, 9, 20, 0.15);
  color: #46B5FF;
}

/* Yanıt Yazma Formu (yorum kutusuyla aynı dil) */
.comment-reply-form {
  display: none;
  margin-top: 12px;
  gap: 12px;
  align-items: flex-start;
}

.comment-reply-form.active {
  display: flex;
}

.comment-reply-form .comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-reply-form .comment-reply-input {
  flex: 1;
  min-width: 0;
  min-height: 20px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f1f1;
  font-size: 14px;
  padding-bottom: 4px;
  outline: none;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.comment-reply-form .comment-reply-input:focus {
  border-bottom: 2px solid #ffffff;
}

.comment-reply-form .comment-reply-input:empty:before {
  content: attr(data-placeholder);
  color: #aaaaaa;
}

.comment-reply-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.comment-reply-cancel,
.comment-reply-submit {
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
}

.comment-reply-cancel {
  background: transparent;
  color: #f1f1f1;
}

.comment-reply-cancel:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.comment-reply-submit {
  background-color: #f1f1f1;
  color: #0f0f0f;
}

.comment-reply-submit:hover {
  background-color: #d9d9d9;
}

/* Bir üst yoruma bağlı yanıtların listelendiği alan */
.comment-replies-container {
  margin-left: 56px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: calc(100% - 56px);
}

.comment-replies-container .comment-avatar {
  width: 32px;
  height: 32px;
}

/* "X yanıtı göster/gizle" butonu */
.comment-view-replies-btn {
  background: transparent;
  border: none;
  color: #3ea6ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 0 40px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-view-replies-btn:hover {
  text-decoration: underline;
}







        .player-wrapper {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
        }

        .player-frame {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .player-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
            color: #666;
            gap: 15px;
        }

        .play-icon {
            width: 80px;
            height: 80px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Content Info */
        .content-info {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .poster-container {
            position: relative;
        }

        .poster {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .content-details {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .title {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #ffffff, #cccccc);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.2;
        }

        .meta-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            color: #ccc;
            font-size: 14px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .meta-icon {
            width: 16px;
            height: 16px;
            opacity: 0.7;
        }

        .genres {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 10px 0;
        }

        .genre-tag {
            background: rgba(255, 255, 255, 0.1);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .description {
            color: #ddd;
            font-size: 16px;
            line-height: 1.6;
            margin-top: 15px;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #46B5FF;
            color: white;
        }

        .btn-primary:hover {
            background: #b8070f;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header-content {
                padding: 0 15px;
            }

            .main-content {
                padding: 15px;
            }

            .content-info {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .poster-container {
                max-width: 250px;
                margin: 0 auto;
            }

            .title {
                font-size: 2rem;
                text-align: center;
            }

            .meta-info {
                justify-content: center;
            }

            .action-buttons {
                justify-content: center;
            }

            .btn {
                flex: 1;
                justify-content: center;
            }
        }

        /* Player Loading State */
        .player-loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .player-loading.hidden {
            display: none;
        }

        /* Toast Notifications */
        .toast {
            position: fixed;
            top: 100px;
            right: 20px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            border-left: 4px solid #46B5FF;
            z-index: 1001;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast.success {
            border-left-color: #28a745;
        }

        .toast.error {
            border-left-color: #dc3545;
        }

        /* Plyr ve Iframe Çökme Engelleyici */
.player-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000;
    overflow: hidden;
}

.player-wrapper .plyr,
.player-wrapper iframe,
.player-wrapper video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Plyr Tema ve Renk Özelleştirme */
:root {
    --plyr-color-main: #5885ff; /* Mavi yerine sitene uygun turkuaz/yeşil tonu */
    --plyr-video-control-color: #ffffff; /* Buton simgelerinin rengi */
    --plyr-video-control-background-hover: rgb(138, 189, 255); /* Üzerine gelince gölge */
    --plyr-control-radius: 6px; /* Butonların köşe yuvarlaklığı */
}

/* Oynatıcının Dış Kutusu */
.player-wrapper .plyr {
    border-radius: 12px; /* Oynatıcının genel köşelerini yuvarlatır */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Şık bir siyah gölge verir */
}

/* =========================================================================
   RESPONSIVE — İZLEME SAYFASI (WATCHPAGE)
   ÖNCEKİ DURUM: .main-content sabit 950px + margin-left:50px; .episodes
   player'ın yanına margin-left:965px + margin-top:-460px gibi "hackle"
   itiliyordu; .ad-box da position:absolute + right:-320px ile sağa
   TAŞIRILIYORDU. Bunların hiçbiri ~1300px'den dar ekranlarda çalışmaz.

   MOBİL SIRALAMA (istenen): navbar → player → ince reklam şeridi →
   açılır/kapanır yorumlar → sezonlar/bölümler. DOM'daki gerçek sıra farklı
   (player, reklam, bölümler, yorumlar) olduğu için #contentContainer'ı
   flex+order ile mobilde yeniden sıralıyoruz — HTML/JS'e dokunmadan.
   ========================================================================= */

@media only screen and (max-width: 768px) {
  .main-content {
    width: 100%;
    margin: 100px 0 0 0;
    padding: 12px;
  }

  #contentContainer {
    display: flex !important; /* watchpage.js bunu inline style="display:block" ile
      eziyordu (elementin kendi style özelliği harici CSS'ten her zaman
      kazanır) — order aşağıda bu yüzden hiç çalışmıyordu. !important ile
      flex'i geri kazandırıyoruz. */
    flex-direction: column !important;
  }

  .player-container {
    order: 1;
    /* Tam kenardan kenara: .main-content'in 12px'lik padding'ini negatif
       margin ile telafi edip genişliği geri kazandırıyoruz. Köşeler de
       artık yuvarlak değil (mobilde tam ekran görünüm). Alt margin 0:
       reklam şeridi hemen altına YAPIŞIK duracak (bkz. .ad-box). */
    width: calc(100% + 24px);
    margin: 0 -12px 0 -12px;
    border-radius: 0;
  }

  /* --- REKLAM: sağda yüzen 300px'lik kart yerine, player'ın TAM ALTINA
     yapışık, aynı genişlikte (kenarlara taşan) ve köşesiz ince bir şerit.
     player-container ile arasında boşluk kalmaması için margin-top:0 ve
     aynı negatif kenar margin'i (-12px) kullanılıyor; border-radius ve
     dış çerçeve de kaldırıldı ki player'ın devamıymış gibi görünsün. */
  .ad-box {
    order: 2; /* player'dan hemen sonra reklam şeridi */
    position: static;
    top: auto;
    right: auto;
    width: calc(100% + 24px);
    aspect-ratio: unset;
    border-radius: 0;
    border: none;
    margin: 0 -12px 16px -12px;
    background: #1a1725;
  }

  .ad-banner {
    display: none;
  }

  .ad-info {
    height: auto;
    padding: 10px 12px;
    gap: 8px;
    background: #1a1725;
  }

  .ad-logo img {
    width: 34px;
    height: 34px;
  }

  /* "Reklam" etiketi ince şeritte yer kazandırmak için gizleniyor —
     link (site adresi) zaten reklam olduğunu belli ediyor. */
  .ad-label {
    display: none;
  }

  .ad-link {
    max-width: 150px;
    margin-bottom: 0;
  }

  .ad-desc {
    margin-top: 0;
    font-size: 12px;
  }

  .ad-action {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Kabataslak tasarımdaki yukarı ok — şu an sadece görsel, tıklanabilir
     bir davranışı yok. İstersen reklamı daraltıp/gizleyen bir toggle'a
     bağlayabiliriz. */
  .ad-chevron {
    display: inline-block;
    color: #aaaaaa;
    font-size: 13px;
  }

  .ad-action .ad-btn {
    white-space: nowrap;
    padding: 6px 14px;
  }

  /* --- DUBLAJ BUTONU: masaüstünde .player-container'ın hemen ardına DOM'a
     ekleniyor (JS: insertBefore(dubbingControls, playerContainer.nextSibling))
     ve player-container'dan SONRA, reklam şeridinden ÖNCE duruyor. Ama
     #contentContainer flex+order'a geçtiğinde, order tanımlanmamış her
     eleman (varsayılan order:0) diğer TÜM sıralı elemanlardan (order:1,2,3,4)
     önce gelir — bu yüzden buton player'ın bile üstüne "uçuyordu". order:2.5
     gibi bir değer olmadığından reklamı 2'den 3'e, yorumları 3'ten 4'e,
     bölümleri 4'ten 5'e kaydırıp dublaj butonuna reklamdan hemen sonra (3)
     yer açıyoruz. Masaüstündeki -10px'lik yukarı çekme margin'i de mobilde
     bir önceki elemanın (artık reklam şeridi) üzerine bindiriyordu; burada
     normal bir boşlukla sıfırlanıyor. */
  .dubbing-controls-container {
    order: 3;
    margin: 0 0 16px 0;
    width: fit-content;
  }

  /* --- YORUMLAR: masaüstündeki -80px'lik yukarı çekme hack'i, .episodes
     player'ın yanına yüzdüğü için gereken bir denge ayarıydı — mobilde
     .episodes artık normal akışta (aşağıda) olduğu için bu hacke gerek
     yok, kaldırılmazsa yorumlar reklamın İÇİNE girerdi.

     YOUTUBE TARZI: kapalıyken normal akışta, küçük kart görünümlü bir
     kutu — SADECE başlık + mevcut yorumlardan birinin (ilkinin) tek
     satırlık, buton içermeyen önizlemesi görünür. Bu kutunun herhangi bir
     yerine dokununca .expanded class'ı eklenir ve panel, YouTube'daki gibi
     ALTTAN AÇILAN TAM BİR MODAL'A (bottom sheet) dönüşür: position:fixed
     ile ekranın altına yapışır, üst kenarı player'ın hemen altına kadar
     çıkar (bu üst konum watchpage.js'de player'ın gerçek yüksekliğine göre
     --comments-sheet-top CSS değişkenine yazılır) — yani player HARİÇ
     altındaki her şeyi (reklam şeridi, dublaj butonu, bölümler) modal
     kaplar. Kapatmak için sağ üstteki X butonuna veya karartılmış arka
     plana (backdrop) dokunulur. */
  .comments-section {
    order: 4; /* dublaj butonundan (order:3) sonra */
    margin: 0 0 20px 0;
    background: #1a1725;
    border: 1px solid #33303f;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer; /* kapalıyken kutunun tamamı tıklanabilir */
  }

  .comments-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .comment-count {
    margin-bottom: 0; /* kutu içindeyken alttaki 24px boşluğa gerek yok */
  }

  /* Kapalıyken: yazma kutusu tamamen gizli. */
  .comments-section:not(.expanded) .comment-box {
    display: none;
  }

  /* Kapalıyken: listede sadece İLK yorum kalır, tek satırlık bir önizleme
     gibi davranır. */
  .comments-section:not(.expanded) .comments-list {
    margin-top: 10px;
  }

  .comments-section:not(.expanded) .comments-list .comment-item:not(:first-child) {
    display: none;
  }

  /* Önizlemedeki tek yorumun aksiyon satırı (beğen/yanıtla/sil), yanıt
     formu ve "N yanıtı göster" butonu gizli — sadece kim ne yazmış, onu
     tek satırda göster. */
  .comments-section:not(.expanded) .comments-list .comment-item:first-child .comment-footer,
  .comments-section:not(.expanded) .comments-list .comment-item:first-child .comment-reply-form,
  .comments-section:not(.expanded) .comments-list .comment-item:first-child .comment-view-replies-btn,
  .comments-section:not(.expanded) .comments-list .comment-item:first-child .comment-replies-container {
    display: none !important;
  }

  .comments-section:not(.expanded) .comments-list .comment-item:first-child .comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ============ AÇIK HALDEYKEN: TAM EKRAN BENZERİ MODAL (bottom sheet) ============ */
  .comments-section.expanded {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* watchpage.js bu değişkeni panel açılırken player'ın gerçek alt
       kenarına göre px cinsinden set ediyor; henüz set edilmemişse makul
       bir yedek değer kullanılır. */
    top: var(--comments-sheet-top, 32vh);
    margin: 0;
    z-index: 2001;
    border-radius: 16px 16px 0 0;
    border: 1px solid #33303f;
    border-bottom: none;
    padding: 14px 14px 0 14px;
    display: flex;
    flex-direction: column;
    cursor: default;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.55);
    animation: commentsSheetUp 0.28s ease;
  }

  @keyframes commentsSheetUp {
    from { transform: translateY(24px); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Küçük sürükleme tutamacı — sadece görsel, YouTube'daki gibi panelin
     üstünde ince bir çizgi. */
  .comments-section.expanded .comments-toggle-header::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: #444;
    border-radius: 4px;
  }

  .comments-section.expanded .comments-toggle-header {
    position: relative;
    padding-top: 10px;
    flex-shrink: 0;
  }

  /* Kapatma (X) butonu: sadece panel açıkken görünür. */
  .comments-section.expanded .comments-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
  }

  .comments-section.expanded .comments-close-btn:active {
    background: rgba(255, 255, 255, 0.18);
  }

  /* Açıkken kısıtlamalar kalkar, yazma kutusu normal görünür. */
  .comments-section.expanded .comment-box {
    flex-shrink: 0;
    padding-top: 12px;
  }

  /* Yorum listesi kalan alanı doldurup kendi içinde kayar — tıpkı
     YouTube'un modal'ında olduğu gibi, sayfa değil sadece liste scroll olur. */
  .comments-section.expanded .comments-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    padding-bottom: 20px;
  }

  .comments-section.expanded .comments-list .comment-item {
    display: flex !important; /* önizleme kısıtlamalarını geçersiz kılar */
  }

  .comments-section.expanded .comments-list .comment-item .comment-footer,
  .comments-section.expanded .comments-list .comment-item .comment-view-replies-btn {
    display: flex !important;
  }

  .comments-section.expanded .comments-list .comment-item .comment-text {
    display: block !important;
    -webkit-line-clamp: unset !important;
  }

  /* Karartma (backdrop): panel açıkken player'ın ÜSTÜNDEKİ/net kalan alanı
     kaplayan yarı saydam katman — YouTube'un modal odağı hissini verir.
     Panelin kendisinden düşük z-index'te durur, tıklanınca kapatır. */
  .comments-backdrop {
    display: none;
  }

  .comments-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
  }

  /* --- BÖLÜMLER: masaüstünde player'ın sağında sabit 300x550'lik bir
     panel gibi duruyordu (margin-left:965px + margin-top:-460px ile
     zorla oraya itiliyordu). Mobilde normal akışta, tam genişlikte,
     player'ın YANINDA değil ALTINDA (comments'ten sonra) duruyor. */
  .episodes {
    order: 5;
    width: 100%;
    height: auto;
    margin: 0 0 20px 0;
  }

  .episodes ul {
    max-height: 60vh;
  }

  .episode-thumb {
    width: 84px;
    height: 47px;
  }

  /* Plyr kütüphanesinin kendi oynatıcı kutusuna uyguladığı ayrı border-radius
     (dosyanın sonundaki .player-wrapper .plyr kuralı) — .player-container'ı
     köşesiz yapmak tek başına yetmiyor, bu iç kutu da sıfırlanmalı. */
  .player-wrapper .plyr {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .main-content {
    padding: 10px;
  }

  .player-container {
    width: calc(100% + 20px);
    margin: 0 -10px 0 -10px;
  }

  .ad-box {
    width: calc(100% + 20px);
    margin: 0 -10px 16px -10px;
    background: #1a1725;
  }

  .ad-link {
    max-width: 110px;
  }

  .ad-action .ad-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  .episode-thumb {
    width: 72px;
    height: 40px;
  }

  .episode-title .name {
    font-size: 12px;
  }
}