html,body{
        background-color: #303030!important;
        font-family: 'Inter', sans-serif;

         height: 100%;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;


      }


main {
  flex: 1;

  margin-top: 100px;
}


@font-face {
  font-family: 'titleFont';
  src: url('/assets/Winter-Storm.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  src: url('/assets/Winter-Storm.otf') format('truetype');
  color: #f8f8ff;
}
  

  .btn-dark{

      background-color: #303030!important;
  }

      .navbar {

        background-color: #3C3C3C!important;

      }


     
     
     .tab-content{
        max-width: 450px!important;
     }

     .btn{

      border-radius: 3px!important;

     }

     .tab-content .nav-link{

        background-color: #3C3C3C!important;
        border-radius: 3px!important;
        font-size: 11px;
        padding: 17px;
        color: #fff;
        font-weight: 700;
     }

    .tab-content .nav-link.active{

        background-color: #303030!important;
     }

     .tab-content .nav-link:hover{

        color: #fff;
     }

     footer .nav .nav-link{
      color: #adb5bd!important;
      font-size: 14px;
     }

     .form-label{
     color: #adb5bd!important;
     }

     p{
      color: #fff;
      font-size: 13px;
    }

    a{

      font-size: 13px;
      color: #649FDF;
    }

    i{
      color: #adb5bd;
    }

    input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number], textarea, select{
      background: #303030!important;
      border-radius: 3px!important;
      color: #adb5bd!important;
      font-size: 12px!important;
    }
    .input-group span{

      background: #303030!important;
    }


    .section-title {
      position: relative;
      font-size: clamp(1rem, 5vw, 1.5rem);
      display: inline-block;
    }

    .section-title::after {
      content: "";
      display: block;
      width: 70%; /* burada %70 olarak ayarladık */
      height: 2px;
      background-color: #ffffff;
      margin-top: 6px;
      margin-left: 0;
      margin-right: auto;
    }



/* Standart (modern tarayıcılar) */
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
textarea::placeholder {
  color: #adb5bd!important;
  font-size: 14px!important;
}

/* WebKit tabanlı tarayıcılar (Chrome, Safari, yeni Edge) */
input[type=text]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #adb5bd!important;
}

/* Microsoft Internet Explorer 10+ */
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #adb5bd!important;
}

/* Microsoft Edge 12-18 */
input[type=text]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder,
input[type=tel]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #adb5bd!important;
}
  



  .select2-selection{

    background-color: #303030!important;

    border: none!important;
    
  }

  .select2-selection .select2-selection__rendered{

    color: #adb5bd !important;
    font-size: 14px !important;

  }

  .select2 .select2-selection .select2-selection__clear{

    color: #adb5bd !important;
  }





 .select-wrapper select {
  background-color: #3C3C3C !important;
  border: 1px solid #555 !important;
  border-radius: 3px !important;
  color: #fff;
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
  /* Varsayılan tarayıcı okunu gizlemek isterseniz: */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}



/* Tüm seçenek listesi (dropdown) arka planı */
.select2-container--default .select2-results__options {
  background-color: #303030!important; /* burayı istediğin renge göre değiştir */
}

/* Her bir <li> seçeneği (mouse üzerinde değilken) */
.select2-container--default .select2-results__option {
  background-color: #303030!important; /* seçenek kutularının arka planı */
  color: #ffffff; /* yazı rengi */
}

/* Seçenek hover olunca */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #dc3545!important; /* hover efekti */
  color: #ffffff;
}







    input[type=checkbox]{

      border-radius: 3px!important;

    }

    .form-check-label {
      color: #adb5bd!important;
      font-size: 13px;
      cursor: pointer;
    }



    .form-check-input {

    background-color: transparent;
    cursor: pointer;
    
  }

  .form-check-input:checked {
    /* Keep background transparent, only show custom tick */
    background-color: transparent;
    border-color: #adb5bd;
  }



.modal-content{
  border-radius: 3px;
  background: #3C3C3C!important;
}






      

      #pagenation ul li a{
        background-color:#3C3C3C!important;
        color: white;
        border: none!important;
      }

      #pagenation ul li {
        border: none!important;
        margin-left: 3px;
        margin-right: 3px;
      }

     #pagenation .paginationjs{

      border: none!important;
     }


     #pagenation .paginationjs-ellipsis{
      background-color:#3C3C3C!important;
      color: white;

     }

     #pagenation ul .J-paginationjs-page.active a {
        background-color: #000!important;  /* Arka planı kırmızı yap */
        color: white;           /* Yazı rengini beyaz yap */
    }


    .paginationjs-pages, 
        .pagination .page-link {
            user-select: none; /* Yazı seçilemiyor */
        }

    

      .gradient-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 45%;
          background: linear-gradient(to top, rgba(0, 0, 0, 3), transparent);
          z-index: 1;
        }


        .cardHover {
          transition: 0.3s ease-in-out;
          position: relative;
        }

        .cardHover:hover .card{
          filter: brightness(0.5);
        }

        #cardTop,
        #cardBottom {
          transition: opacity 0.3s ease;
        }

        .cardHover:hover #cardTop,
        .cardHover:hover #cardBottom {
          opacity: 0;
        }

        /* Play ikon overlay */
        .play-icon-overlay {
          opacity: 0;
          transition: opacity 0.3s ease, transform 0.3s ease;
          z-index: 159;
          pointer-events: none; /* tıklamayı engelle */
        }

        .play-icon {
          color: #ffffff;
          font-size: 4rem;
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); /* Daha parlak */
          animation: pulse 1.5s infinite ease-in-out;
        }


        .cardHover:hover  .play-icon-overlay {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.1);
        }




          /* Play ikon overlay */
        .play-icon-overlay {
          opacity: 0;
          transition: opacity 0.3s ease, transform 0.3s ease;
          z-index: 159;
          pointer-events: none; /* tıklamayı engelle */
        }

        .play-icon {
          color: #ffffff;
          font-size: 4rem;
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); /* Daha parlak */
          animation: pulse 1.5s infinite ease-in-out;
        }


        .cardHover:hover  .play-icon-overlay {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.1);
        }




        @keyframes pulse {
          0% {
            transform: scale(1);
            opacity: 0.4;
          }
          50% {
            transform: scale(1.15);
            opacity: 1;
          }
          100% {
            transform: scale(1);
            opacity: 0.4;
          }
        }


        .btn-outline-light{

          color: #adb5bd!important;
        }

         .btn-outline-light:hover{

          color: #000!important;
        }



        #commentdiv .card-text{

          font-size: 12px;
          color: #adb5bd;
        }

         #commentdiv .card-body span{

          font-size: 12px;
          color: #fff;
        }


        input:focus,
        select:focus,
        textarea:focus,
        button:focus {
          border-color: #dc3545 !important; /* Bootstrap "danger" rengi */
          box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
          outline: none !important;
        }



         .responsive-bg {
            position: relative;        /* Pseudo-element’in konumlanması için gerekli */
            overflow: hidden;          /* Taşan parçaların görünmemesi için */
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 0;
            padding-top: 56.25%;
            top: 0;
          }

          /* ::before: sabit parıltı efekti */
            .responsive-bg::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              /* Aşağıdan yukarıya doğru daha koyu sabit bir gradient:
                 - Altta (0%) %80 opak #3C3C3C,
                 - Yarı yolda (40%) %50 opak #3C3C3C,
                 - Yarı yoldan sonra (70%) %20 opak #3C3C3C,
                 - Üstte (100%) tamamen saydam */
              background: linear-gradient(
                to top,
                rgba(60, 60, 60, 1) 1%,
                rgba(60, 60, 60, 0.5) 20%,
                rgba(60, 60, 60, 0) 70%,
                rgba(60, 60, 60, 0) 90%,
                rgba(60, 60, 60, 0) 100%
              );
              
              pointer-events: none;
            } 


            #series-info ul li div:last-of-type {
              /* Stil buraya */
              color: #adb5bd;
              font-size: 13px;
            }


            #episode-div .card .episode{

              font-size: 14px;
              color: #adb5bd;
              margin: 0;
            }

            #episode-div .card .name{

            font-weight: 700;
            color: #fff;
              font-size: 15px;


            }


            #episode-div .card .date{

              color: #adb5bd;
              font-size: 12px;

            }

            #episode-div .card {

              background-color: #303030!important;
              transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            }


            #episode-div .card:hover {
              background-color: #2a2a2a !important;
              transform: translateY(-4px);
              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
            }







.modal-dialog-scrollable .modal-body {
  /* overflow zaten Bootstrap tarafından ayarlanıyor */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE10+ */
}

/* 2. WebKit tabanlı tarayıcılarda scrollbar’ı tamamen gizle */
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Eğer yine görünüyorsa !important ekleyin: */
.modal-dialog-scrollable .modal-body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#searchList {
  max-height: 80vh;      /* isteğe bağlı, yüksekliği sınırla */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#searchList::-webkit-scrollbar { width: 0; height: 0; }





             #searchList .card .imdb{

              font-size: 14px;
              color: #adb5bd;
              margin: 0;
            }

            #searchList .card .name{

            font-weight: 700;
            color: #fff;
              font-size: 15px;


            }


            #searchList .card .date{

              color: #adb5bd;
              font-size: 12px;

            }

            #searchList .card {

              background-color: #303030!important;
              transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            }


            #searchList .card:hover {
              background-color: #2a2a2a !important;
              transform: translateY(-4px);
              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
            }





              [data-hd-indicator] {
        display: none !important;
      }



      /* Poster kapsayıcısı: rozeti bu kutu içinde konumlandıracağız */
    .poster-container {
      position: relative;
      display: inline-block;
    }

    /* Poster resmi için gölge ve köşe yuvarlama */
    .poster-img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 0.25rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* IMDb rozeti (badge) artık tam ortada ve daha büyük */
    .imdb-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      line-height: 80px;         /* Yazıyı dikey ortalar */
      text-align: center;
      font-weight: bold;
      font-size: 1.7rem;          /* Biraz daha büyük yazı */
      color: #111;                /* Koyu renk metin */
      background-color: #f5c518;  /* IMDB’ye yakın sarı */
      border-radius: 50%;         /* Tam daire */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }


    
    /* Scroll çubuğu zaten gizleniyorsa: */
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      scrollbar-width: none;      /* Firefox */
      -ms-overflow-style: none;   /* IE 10+ */
    }



    #commentdiv .card {
      position: relative;
      overflow: hidden; /* Pseudo-element’in dışarı taşmaması için */
      background-color:#303030!important;
    }

    /* 2) Card’ın altından yukarı ışık yansıtmak için ::after */
   #commentdiv .card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* Daha uzun görünüm */
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0)
  );
  filter: blur(4px); /* Hafif bulanıklık verir */
  z-index: 0;
}

    /* 3) Kart içeriği, pseudo-element’in üstünde kalsın diye z-index ayarlıyoruz */
    #commentdiv .card .row {
      position: relative;
      z-index: 1;
    }



    #player-wrapper {
      width: 100%;
      height: 700px!important;
      position: relative; /* Clappr, parent container’ı bu şekilde dolduracak */
    }

    /* 2) Mobil (küçük ekran) için yükseklik: 300px 
         Burada örnek olarak 576px’i tablet altı / mobil eşik olarak aldık */
    @media (max-width: 576px) {
      #player-wrapper {
        width: 100%;
      height: 300px!important;
      }
    }

     @media (min-width: 577px) and (max-width: 767px) {
      #player-wrapper {
        width: 100%;
        height: 450px !important;
      }
    }


    @media (min-width: 767px) and (max-width: 991px) {
      #player-wrapper {
        width: 100%;
        height: 550px !important;
      }
    }





     /* Play ikon overlay */
        .play-icon-series {
          opacity: 1;
          transition: opacity 0.3s ease, transform 0.3s ease;
          z-index: 159;
          pointer-events: none; /* tıklamayı engelle */
        }

        .play-icon-series .play-icon {
          color: #ffffff;
          font-size: clamp(1rem, 5vw, 1rem);
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); /* Daha parlak */
          animation: pulsex 1.5s infinite ease-in-out;
        }

        .play-icon-series span {
          
          font-size: clamp(0.1rem, 0.5vw, 0.9rem);
          
        }




        @keyframes pulsex {
          0% {
            transform: scale(1);
            opacity: 0.4;
          }
          50% {
            transform: scale(1.15);
            opacity: 1;
          }
          100% {
            transform: scale(1);
            opacity: 0.4;
          }
        }