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

body {
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    background: linear-gradient(100deg,  #13171e 0%, #2d384b 40%, #13171e 100%) !important;    
    color: white;
    overflow-x: hidden;
    padding-top: 1px;
    
}







/* 2. INTRO SCREEN */
#intro {
    position: fixed;
    inset: 0;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

#intro h1 {
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #cd6300; 
    font-size: clamp(40px, 10vw, 100px);
    letter-spacing: 5px;
    display: flex; 
    text-shadow: 0 0 15px rgba(205, 99, 0, 0.4); 
}

/* 🔥 Hərflərin sağdan gəlməsi üçün ayarlar */
#intro h1 span {
    opacity: 0; 
    transform: translateX(80px); /* Başlanğıcda 80 piksel sağda gizlənir */
    animation: slideFromRight 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* Hər hərf öz nömrəsinə görə bir az gecikir (məsələn, 0.1 saniyə) */
    animation-delay: calc(0.1s * var(--i)); 
}

/* 🔥 Animasiyanın özü (Sağdan öz yerinə sürüşmə) */
@keyframes slideFromRight {
    0% { 
        opacity: 0; 
        transform: translateX(80px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); /* Öz orijinal yerinə qayıdır */
    }
}




    /* --- HEADER ANA BLOK ve icindekiler--- */   /* --- HEADER ANA BLOK ve icindekiler--- */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* Padding ekranın eninin 4%-i qədər olsun (maksimum 50px) */
    padding: 0 clamp(0px, 4vw, 0px); 
    
    /* Hündürlük ekranın hündürlüyünə (vh) görə dəyişir */
    height: clamp(80px, 8vh, 110px); 
    
    background: linear-gradient(135deg, #333962e3 0%, #222328e1 70%) !important; 
    position: sticky; 
    top: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    transition: all 0.3s ease;
}


.header-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 8px;
    border-radius: 8px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.header-btn img {
    width: 20px;   /* Ölçünü özünə görə böyüdüb kiçildə bilərsən */
    height: 20px;
    object-fit: contain;
    /* transition: 0.3s; (İstəsən bura xəfif effekt də verə bilərsən) */
}

.header-btn:hover img {
    transform: scale(1.1); /* Üstünə gələndə bir az böyüsün */
}


/* Bildiriş sayı (balaca dairələr) */
.badge {
    position: absolute;
    top: 1px;
    right: 1px;
    background: #ff9f43; /* Sənin loqo rəngin */
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: bold;
    min-width: 15px;
    text-align: center;
}

.badge.red {
    background: #ff4757; /* Bildirişlər üçün qırmızı */
}



/* Yalnız gizlətmək üçün bu klassı işlət */
header.hide {
    transform: translateY(-100%);
}

/* İçindəkilərin dağılmaması üçün qruplara bu xüsusiyyəti ver */
header > div {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Elementlərin sıxılmasını qadağan et */
}


/* --- SOL QRUP (Loqo + Menyu) --- */
.logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%; 
    align-self: stretch; 
    background: linear-gradient(135deg, #1a1b1fe1 20%, #3339620b 70% ) !important;    
}
.logo-content {
    display: flex;
    flex-direction: column; 
    
}
.logo-text, .logo-title {
    text-decoration: none;
    display: block;
}

.logo-img {
    height: clamp(78px, 8vh, 108px); /* Ekran ölçüsünə görə avtomatik böyüyüb-kiçilir */
    width: auto;
    object-fit: contain;
}

.logo-text {
    
    display: inline-block;
     transform: translateY(4px); 
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 2px; 
    font-size: clamp(26px, 4vw, 42px); /* Yazı da ekrana görə böyüyür */
    color: #ffffff;
    text-decoration: none;
    gap:1px;
}

.logo-title {
    font-size: 4px !important;
    color: #a3a3a3;
    font-family: 'Google Sans Flex', sans-serif;
  
}

.prime {
    color: #dfdfdf;
}



/* --- NAVİQASİYA (Home, Filmlər...) --- */
.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Bu komanda loqo ilə menyunu bir-birinə yapışdırır */
    margin-right: auto; 
    margin-left: 30px; 
}

.nav-home {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 5px;
    background: #b46900;
    color: white;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s ease;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; /* Normal */
    font-size: clamp(13px, 1.1vw, 18px);
    padding: clamp(7px, 0.8vh, 10px) clamp(8px, 1vw, 20px);
}

/* SVG */
.nav-icon {
    width: 16px;
    height: 16px;
    fill: white;
    transition: 0.3s;
}

/* 🔥 HOVER */
.nav-home:hover {
    background: white;
    color: #b46900;
}

.nav-home:hover .nav-icon {
    fill: #b46900;
}

/* Filmlər / Dizilər */
.nav-link {
    color: rgb(230, 230, 230);
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
      font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; /* Normal */
}

.nav-link:hover {
    color: #b46900;
}


/* NAV GİZLƏT */
@media (max-width: 768px) {
    .nav-left {
        display: none;
    }
}


/* RIGHT SIDE (LOGIN + REGISTER + LANG) */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Bu komanda sağ tərəfi ən sona itələyir */
    margin-left: auto; 
}



/* BUTTONLAR */
.auth-btn {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}



.search-box {
  width: clamp(150px, 18vw, 300px);
    margin: 0; /* Artıq margin-ə ehtiyac yoxdur */
    position: relative;
     margin-right: 20px;
}

.search-inner {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 7.5px 13px;
    font-size: clamp(12px, 1vw, 16px);
}

.search-inner input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: #333;
       font-family: 'Google Sans Flex', sans-serif;
    font-weight: 400; /* Normal */
}

/* ikon */
.search-icon {
    width: 21px;
    height: 21px;
    margin-right: 10px;
    opacity: 0.6;
}


.search-results {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: #111;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 999;
}

.search-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #222;
    color: #fff;
}

.search-item:hover {
    background: #222;
}



.dropdown {
    position: relative;
    display: inline-block;
}

/* Kateqoriya Düyməsi */
#categoryBtn {
    background: transparent;
    color: rgb(230, 230, 230);
    font-size: 15px;
    border: none;
    display: inline-flex;
    align-items: center; /* İkonla yazını eyni xəttə gətirir */
    gap: 2px; /* İkonla yazı arasındakı məsafə */
      font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; /* Normal */
    cursor: pointer;
    transition: 0.3s;
    flex-direction: row-reverse; 
    /* ABSOLUTE-DAN QURTULDUQ */
    position: relative; 
    left: 0;
    top: 0;
}

#categoryBtn:hover {
    color: #d47c00bc;
}

/* Düymənin içindəki ikonun ölçüsü */
.btn-icon1 {
    width: 14px;
    height: 14px;
    object-fit: contain;
}


@media (max-width: 768px) {
    #categoryBtn {
        display: none;
    }
}

@media (max-width: 480px) {
    #categoryBtn {
        display: none;
    }
}







@media (max-width: 768px) {
    header {
        /* Hündürlüyü mobildə sabit və səliqəli saxlayaq */
        height: 65px !important;
        padding: 0px !important;
        justify-content: space-between;
    }

    /* 1. Loqo Yazısını Mobildə Gizlət (Çox yer tutur) */
    /* Yalnız ikon qalsın, bu brend görünüşünü qoruyur və yer açır */
    .logo-text, .logo-title {
        display: block;
    }

    .logo-img {
        height: 45px !important; /* İkonu bir az kiçilt */
        margin-left: 0;
    }

    /* 2. Axtarış Qutusunu Mobildə Daralt */
    .search-box {
       flex: 0 1 auto;
        max-width: 70px; /* Amma həddindən çox uzanmasın */
        margin: 0 0px !important;
        margin-top: 120px;
    }

    .search-inner {
        padding: 6px 10px !important;
    }

    .search-inner input {
        font-size: 13px !important;
    }

    .search-icon {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    /* 3. Sağ Tərəf (Düymələr) */
    .header-right {
        gap: 5px !important;
    }

    .auth-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap; /* Yazı iki sətirə bölünməsin */
    }

    /* Profil avatarı varsa onu da kiçilt */
    .profile-avatar {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}





 /* --- HEADER ANA BLOK ve icindekiler--- */ /* --- HEADER ANA BLOK ve icindekiler--- */







                 /* TOPMOVIES BOLMESI HEADERDEN SONRAKI */

.top-movies {
    width: 100%;
    max-width: none;   /* 🔥 limiti sil */
    margin: 0;
   
    display: block;
}

.divider {
    width: 100%;       /* Xəttin eni */
    height: 2.1px;       /* Qalınlığı */
    background: linear-gradient(to right, transparent, #666666, transparent); /* Ortası tünd, kənarları itən xətt */
    margin: 20px 0px;
}
.divider1 {
    width: 100%;       /* Xəttin eni */
    height: 1.6px;       /* Qalınlığı */
    background: #888;
    margin: 20px 0px;
    margin-left: -20px;  /* Padding-i aradan qaldırır */
    margin-right: -20px; /* Sağ tərəfdən də çıxarır */
    width: calc(100% + 40px); /* Padding-i kompensasiya edir */
}

.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.slider-btn {
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    z-index: 100;
    border: none;
    font-size: 28px;

    padding: 15px 10px !important;

    border-radius: 5px !important; /* 🔥 MÜTLƏQ */

    appearance: none; /* 🔥 default style silinir */
    -webkit-appearance: none;

    cursor: pointer;
    background: rgba(26, 26, 26, 0.878);
    color: white;
}

#slideLeft {
    left: 10px;
}

#slideRight {
    right: 10px;
}

.slider-btn:hover {
    background: rgba(255, 0, 0, 0.907);
    transform: translateY(-50%) scale(1.1);
}



.top-slider {
    display: flex;
    gap: 1px; /* Sənin istədiyin o sıxlıq (minimum boşluq) */
    overflow-x: auto;
    scroll-behavior: smooth;
    
    /* Kənarda boşluq qalmasın deyə */
    width: 100%;
}


/* Scroll gizlət */
.top-slider::-webkit-scrollbar {
    display: none;
}


.top-movies .movie-card {
    flex: 0 0 auto; 
    width: clamp(190px, 14vw, 260px) !important;
    aspect-ratio: 2 / 3;
    height: 260px !important;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Şəklin kartın içini tam doldurması üçün */
.top-movies .movie-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* 🔥 PLAY ICON (movie-card kimi) */
.top-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);

    width: 150px;
    height: 150px;

    background: url("images/logo.png") center/contain no-repeat;
    opacity: 0;
    transition: 0.3s;
    z-index: 3;
}

.top-card:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* IMAGE */
.top-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

/* 🔥 ZOOM */
.top-card:hover img {
    transform: scale(1.1);
}

/* 🔥 OVERLAY (movie-card kimi) */
.top-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 60%);
    z-index: 1;
}

/* 🔥 INFO BLOCK (movie-info kimi) */
.top-card .top-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
}

/* TITLE */
.top-card .top-info h2 {
    /* 13px-dən 18px-ə qədər avtomatik böyüyür */
    font-size: clamp(13px, 1.2vw, 18px); 
    margin: 0;
    color: rgb(213, 110, 26);
    font-family: 'Saira Stencil', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}




/* DESC */
.top-card .top-info p {
  font-size: clamp(10px, 0.9vw, 14px);
    color: #ccc;
    margin-top: 3px;

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







@media (max-width: 480px) {
    .top-card {
        /* Mobildə yan-yana təxminən 2.5 kart görünməsi üçün */
        flex: 0 0 135px !important; 
        height: 190px !important;
    }
    
    .slider-btn {
        /* Mobildə oxlar çox yer tutmasın */
        padding: 10px 5px !important;
        font-size: 20px;
    }
}

/* TV və Çox Böyük Ekranlar (7 dənə tam görünməsi üçün) */
@media (min-width: 1921px) {
    .top-card {
        flex: 0 0 240px !important;
        height: 350px !important;
    }
}






               /* TOPMOVIES BOLMESI HEADERDEN SONRAKI BITISHI.... */



.title-row {
    display: flex;                               
              }

.title-icon {
    width: 20px;                   
    height: 20px;
    flex-shrink: 0;                 
    display: flex;
    margin-top: 2px;

}

.title-row h3 {
    font-size: 20px;
    color: white;
    margin-top: -4px;
    margin-left: 5px;
}


/* SECTION */
.circle-section {
    margin-top: 10px;
}

/* HEADER */
.circle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

/* TITLE */
.circle-header h2 {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600;
    
    /* Dinamik Ölçü:
       - Minimum: 16px (Kiçik telefonlar üçün)
       - Axıcı: 1.5vw (Ekranın eninə görə milimetrik böyüyür)
       - Maksimum: 28px (Böyük monitorlar və TV üçün)
    */
    font-size: clamp(13px, 1.5vw, 28px);
    
    margin: 0;
    color: rgb(214, 214, 214);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}






.circle-img {
   width: 20px;
   height: auto;
}

/* SEE ALL */
.see-all {
    display:inline-flex;
    align-items: center;
    gap: 4px;
     font-family: 'Google Sans Flex', sans-serif;
    font-weight: 1000; /* Normal */
    font-size: clamp(10px, 1.5vw, 28px);
    color: #b46900;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.see-all:hover {
    color: #ff2e63;
}

.arrow-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* LINE */
.header-line {
    height: 1px;
    background: #444;
    margin: 8px 15px 12px;
}

/* SLIDER */
.circle-slider {
    width: 100%;
    max-width: none;
    display: flex;
    gap: 13px;
    overflow-x: auto;
    padding: 10px 0; /* 🔥 15px silindi */
    margin-bottom: 30px;
    
}
.circle-track {
    display: flex;
    flex-direction: row; /* 🔥 əsas budur */
    gap: 10px;
    transition: transform 0.6s ease;
    will-change: transform; /* Performans üçün */
}

/* ITEM - Ümumi konteyner */
.circle-item {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; 
    text-align: center;
    /* Ekranın eninə görə (vw) genişliyi tənzimləyirik */
    flex: 0 0 clamp(90px, 10vw, 150px) !important; 
    overflow: hidden;
}

/* IMAGE */
.img-box {
    /* En və hündürlük eyni clamp dəyərini almalıdır ki, tam dairə qalsın */
    width: clamp(85px, 9vw, 140px);
    height: clamp(85px, 9vw, 140px);
    margin: 0 auto; /* Ortalanması üçün */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #cd6300e2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 5px rgba(218, 78, 78, 0.526);
}

/* şəkil */
.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Posterin mərkəzini saxlayır */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

/* Hover effekti - Şəkli böyütmək və parıltı vermək */
.circle-item:hover .img-box {
    border-color: #ff8c00;
    
}

/* hover */
.img-box img:hover {
    transform: scale(1.1);
}
.circle-item:hover img {
    transform: scale(1.15);
}
/* TEXT */
.circle-item p {
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 13px;
    margin-top: 10px;
    color: rgb(214, 214, 214);
    /* Çox uzun adlar dizaynı pozmasın */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    width: 100px;
}


/* Film adı */
.circle-item .movie-name {
    width: 100% !important; /* Konteynerə uyğunlaşsın */
    font-size: clamp(12px, 1vw, 16px);
    margin: 8px auto 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Yeni əlavə edilən tarix hissəsi */
.circle-item .release-date {
    display: block;
    font-size: clamp(9px, 0.8vw, 13px);
    color: #ff9f43;
    margin-top: 2px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Hover zamanı hər ikisi görünsün */
.circle-item:hover .movie-name {
    white-space: normal;
    overflow: visible;
}




@media (max-width: 768px) {
    .circle-slider {
        gap: 10px;
        padding: 5px 10px;
    }
    
    /* Mobildə dairələrin bir az daha yan-yana sıx görünməsi üçün */
    .circle-item {
        flex: 0 0 100px !important;
    }
    
    .img-box {
        width: 90px;
        height: 90px;
    }


}

@media (max-width: 480px) {
    .circle-item {
        flex: 0 0 85px !important;
    }
    
    .img-box {
        width: 75px;
        height: 75px;
        border-width: 2px; /* Nazik ekranlarda çərçivəni bir az incəldirik */
    }
}

/* =========================================================
   🔥 PAYLAŞ BLOKU (PC-DƏ SAĞDA, YAZI İKONLARIN ÜSTÜNDƏ/SOLUNDA)
   ========================================================= */

.share-wrapper {
    display: flex;
    flex-direction: column;   /* 🔥 Yazı yuxarıda, ikonlar aşağıda qalır */
    align-items: flex-start;  /* 🔥 Yazını ikonların SOL kənarına nizamlayır (Puan Ver kimi) */
    
    /* BÜTÜN BLOKU SAĞA ÇƏKƏN SEHİRLİ KODLAR: */
    width: fit-content;       /* Qutu ancaq içindəkilər boyda olur */
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;        /* 🔥 Sol tərəfi itələyib bloku SAĞA yapışdırır */
    margin-right: 20px;       /* Sağ kənara tam dəyməsin deyə kiçik boşluq */
}

.section-title1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 23px;
    color: #a3a3a3;
    margin: 0 0 10px 0;       /* İkonlarla arasına 10px məsafə */
}

.share-box {
    display: flex;
    gap: 7px;
    margin: 0; 
}

.share-link {
    display: flex;
    width: 60px; 
    height: 35px; 
    background: #1e1e1e;
    align-items: center;
    justify-content: center;
    border-radius: 7px; 
    transition: 0.3s; 
}

.share-link:hover {
    background: #c34040;
    transform: scale(1.1);
}

.share-link img {
    width: 31px;
    height: 31px;
    padding: 6px;
    box-sizing: border-box; 
}

/* =========================================================
   📱 MOBİL ÜÇÜN (Mobildə hər şey düz ORTAYA gəlir)
   ========================================================= */
@media (max-width: 480px) {
    .share-wrapper {
        margin-left: 0;          /* 🔥 Sağa və ya ortaya itələyən kodu ləğv edirik, sola qayıdır */
        margin-right: auto;      /* 🔥 Sağda boşluq yaradırıq ki, qutu tam sola sıxılsın */
        align-items: flex-start; /* 🔥 Yazını da ikonların düz SOL kənarına nizamlayır */
    }

    .share-link {
    display: flex;
    width: 80px; 
    height: 35px; 
    background: #1e1e1e;
    align-items: center;
    justify-content: center;
    border-radius: 7px; 
    transition: 0.3s; 
}
}



.title-icon1 {
    width: 22px;
    height: 22px;
}



.container3 {
    background-color: #424b5c;
    max-width: 730px;
    padding: 1px 6px 5px 10px;
     box-shadow: 0 0 1px #0e0d0d;
    border-radius: 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    margin-top: 185px !important;
    margin-left: -0px !important;
}
.container3 p {
    text-align: justify;
     font-family: 'Google Sans Flex', sans-serif;
     font-weight: 500;
}


.container3 h2 {
    text-align: justify;
     font-family: 'Google Sans Flex', sans-serif;
     font-weight: 700;
}

@media (max-width: 480px) {
  .container3 {
    width: 152%;
    max-width: 170%;
    margin-left: -123px;
    margin-top: -20px !important;
    padding: 10px;
  }
}








/* RATING */
.rating {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,0.7);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 11px;
    color: gold;
    z-index: 2;
}















/* overlay (fon qaralır + blur) */
#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);

    display: none;
    z-index: 9998;
}

/* popup */
.auth-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);

    background: rgba(242, 242, 242, 0.963); /* Şəffaflıq */
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    width: 300px;
    

    display: none;
    z-index: 9999;

    transition: 0.3s;
}

/* aktiv olanda */
.auth-box.active {
    display: block;
    transform: translate(-50%, -50%) scale(1);
}

/* input */
.auth-box input {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    border: none;
}

/* button */
.auth-box button {
    width: 100%;
    padding: 10px;
    background: #ff2e63;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

/* close */
.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}


#closeLogin {
    position: absolute;
    top: 10px;
    right: 10px; /* 👉 sağa aparır */
    cursor: pointer;
}



.auth-box  {
    
    margin-top: 50px;
}












 

.cat-item {
    background: #1a1a1a; /* Düymənin fonu */
    color: #bbb;
    text-decoration: none;
    padding: 10px 5px;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    transition: 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-item:hover {
    background: #3a3a3a;
    color: #fff;
}












.user-info-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Şəkil ilə yazı arasındakı məsafə */
}

.user-avatar {
    width: 24px;
    height: 24px;
    background-color: #ccc; /* Şəkil olmayanda boz rəng */
    border-radius: 50%; /* Tam dairə edir */
    background-size: cover;
    background-position: center;
    display: none; /* Başlanğıcda gizli qalsın, daxil olanda açılacaq */
    border: 1px solid white;
}

/* Daxil olandan sonra düymənin daxili tənzimləməsi */
.login.is-logged-in {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 46, 99, 0.5);
    padding: 5px 12px;
}





#loginBtn {
    display: flex;
    align-items: center;
    gap: 8px;
     font-family: 'Google Sans Flex', sans-serif;
      font-weight: 600; /* Normal */
}

.profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 40%;
    background: #ff2e63;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}












/* --- FOOTER ANA STİL --- */
.main-footer {
    background: #111; /* Çox tünd fon */
    color: #888;
    padding: 50px 0 20px 0;
    margin-top: 50px;
    width: 100%; /* Bütün ekranı tutsun */
    position: relative;
    clear: both; /* Sol tərəfdəki fixed/float elementləri "təmizləyir" */
    border-top: 1px solid #c06307;
    z-index: 1000;
}

.footer-top {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    flex-wrap: wrap;
    
}

.footer-about {
    flex: 2;
    margin-bottom: 30px;
}

.footer-about p {
    margin: 15px 0;
    font-size: 14px;
    max-width: 400px;
}

.footer-nav {
    flex: 1;
}

.footer-nav h3 {
    color: white;
    font-size: 16px;
    margin-bottom: 15px;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav ul li {
    margin-bottom: 8px;
}

.footer-nav ul li a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.footer-nav ul li a:hover {
    color: #c06307;
}

/* SOSİAL LİNKLƏR */
.footer-social {
    display: flex;
    gap: 15px;
}

.soc-link {
    background: #222;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 12px;
    transition: 0.3s;
}

.soc-link:hover {
    background: #c06307;
}

/* ƏN ALT HİSSƏ */
.footer-copyright {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background: #0a0a0a;
    font-size: 13px;
    border-top: 1px solid #222;
}

.footer-copyright strong {
    color: #c06307;
}

/* MOBİL ÜÇÜN */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
    }
    .footer-social {
        justify-content: center;
    }
}



.footer-social {
    display: flex;
    gap: 15px; /* İkonlar arasındakı məsafə */
    align-items: center;
}

.soc-link img {
    width: 30px;  /* İkonun eni */
    height: 30px; /* İkonun hündürlüyü */
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
}

/* Mouse ilə üstünə gələndə effektlər */
.soc-link:hover img {
    transform: scale(1.2); /* Bir az böyüyür */
    filter: brightness(1.2); /* Bir az parlayır */
}

/* Əgər bayaq verdiyim boz fonlu düymə stilini silmək istəyirsənsə bunu yaz: */
.soc-link {
    background: transparent !important; /* Fonu silir */
    padding: 0 !important;             /* Boşluğu silir */
}



          



.breadcrumb {
     background: linear-gradient(100deg,  #13171e -60%, #2d384b 40%, #13171e 160%) !important;    
    margin-top: 30px; 
    margin-bottom: 35px;
    color: #aaa;
    font-size: 19px;
    padding: 15px 20px;
    
    /* 🔥 MOBİL UYUMLU DÜZƏLİŞLƏR */
    max-width: 1000px;         /* Maksimum 1000px olsun */
    width: calc(100% - 10px);  /* Sağ və soldan 5px boşluq saxlayır */
    margin-left: auto;         /* Ortalanması üçün */
    margin-right: auto;        /* Ortalanması üçün */
    box-sizing: border-box;    /* Padding-in eni böyütməməsi üçün */
    
    border-radius: 10px;
    box-shadow: 0 0 18px #101010;
}

.breadcrumb span {
    cursor: pointer;
}

.breadcrumb span:hover {
    color: #ff2e63;
}

.bc-arrow {
    width: 15px;         /* İkonun ölçüsü */
    height: 15px;
    object-fit: contain; /* Şəklin dartılmaması üçün */
    opacity: 0.7;        /* Bir az şəffaflıq veririk ki, çox gözə batmasın */
}

/* 📱 MOBİL ÜÇÜN ƏLAVƏ */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 15px;      /* Mobildə yazı bir az kiçilsin ki, sığsın */
        padding: 10px 15px;
        width: calc(100% - 20px); /* Mobildə kənarlardan 10px boşluq */
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;   /* Mobildə mərkəzə çəkmək daha səliqəli görünür */
    }
}


/*------------------------------------------*/



/* CONTAINER2 */
.container2 {
    position: relative;
     background: linear-gradient(100deg,  #13171e -50%, #2d384b 40%, #13171e 150%) !important;    
    max-width: 1000px;
    margin: 0 auto;
    /* Yuxarıdan 80px, yanlardan tam 5px boşluq */
    padding: 80px 5px 20px 5px; 
    border-radius: 10px;
    box-shadow: 0 0 21px #101010;
    overflow: hidden;
    margin-top: -40px;
}

/*yaxinda gelecek iconu*/
.icon {
    width: 21px;
    height: 21px;
    vertical-align: middle;
    margin-right: 8px;
}



#movieTitle {
    font-size: 26px;
    margin: 0;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
        display: flex;
    gap: 15px;
    align-items: center;
}

/* POSTER */
.movie-poster {
    width: 250px;
        height: 350px;
            object-fit: cover;
                border-radius: 8px;
                    flex-shrink: 0;
                    }

.stat-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

.movie-stats {
    display: flex;
    flex-direction: row; /* 🔥 əsas */
    gap: 10px; /* aralarındakı məsafə */
    align-items: center;
}

.movie-stats .views {
     background: rgba(255, 255, 255, 0.038);
    padding: 6px 9px;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid rgba(128, 128, 128, 0.622);
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.movie-stats .likes {
    background: rgba(255, 255, 255, 0.038); /* Çox yüngül şəffaflıq */
    padding: 6px 12px;
    border-radius: 4px; /* Bir az daha yumşaq künclər */
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: 1px solid rgba(185, 185, 185, 0.3);
    transition: all 0.3s ease; /* Hamar keçid */
    color: #b0b0b0;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mouse üzərinə gələndə (Hover) */
.movie-stats .likes:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #935304; /* Narıncı vurğu */
    color: #ffffff;
}

/* Bəyənilmiş vəziyyət (JS ilə klass əlavə edəndə aktivləşəcək) */
.movie-stats .likes.active {
    background: rgba(147, 83, 4, 0.2); /* Narıncı fon */
    border-color: #935304;
    color: #ff9800; /* Parlaq narıncı */
}



@media  (max-width: 480px) {

    /* stats */
    .movie-stats {
        gap: 6px;
        
    }

    .movie-stats span {
        padding: 1px 2px;
        font-size: 11px;
    }

.stat-icon {
    width: 10px;
    height: 10px;

}

}

/* Ana qutu (Div) */
.imdb-box {
    display: inline-flex; /* Qutunun ancaq içindəki yazı boyda olmasını təmin edir */
    align-items: center;
    background-color: #f5c518; /* Tünd arxafon */
    padding: 4px 10px; /* İç boşluqlar (yuxarı/aşağı 4px, sağ/sol 10px) */
    border-radius: 6px; /* Küncləri yumşaldır */
    border: 1px solid #333; /* İncə bir çərçivə */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Yüngül kölgə efekti */
    margin-bottom: 20px !important;
}

/* İçindəki yazı (Span) */
.imdb-box .imdb {
    color: #1e1e1e; /* IMDb-nin rəsmi qızılı/sarı rəngi */
    font-weight: 900; /* Yazını qalınlaşdırır */
    font-size: 14px; /* Şriftin ölçüsü */
    letter-spacing: 0.5px; /* Hərflər arasına yüngül boşluq verir */
    font-family: Arial, sans-serif;
}

@media (max-width: 768px) {
    #moviePoster {
        display: none !important;
    }

    .container2 * {
  max-width: 100% !important; /* Heç nə ana qutudan geniş ola bilməz */
  box-sizing: border-box; /* Öz boşluqları özlərini şişirtməsin */
  overflow-wrap: break-word; /* Çox uzun, boşluqsuz sözlər/linklər gələrsə qırıb aşağı salsın */
}
}


/* ACTIONS */
.movie-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: -120px;
    margin-bottom: 30px; /* Aşağı ilə məsafəni saxla */
}

.movie-actions .buttons {
    display: flex;
    gap: 5px;
    margin-left: auto;
    
}

@media (max-width: 768px) {
    .movie-actions .buttons {
        margin-left: 35px !important; /* Sadece mobil üçün */
        margin-top: 140px;
    }
}









    


/* DÜYMƏLƏR VƏ HOVERLƏR */
.btn {
    padding: 7px 14px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 13px;
    transition: 0.3s;
}

/* Paylaşılan Hoverlər */
.share { border-color: #f5c518; color: #f5c518; }
.share:hover { background: #f5c518; color: black; }

.report 
{ 
    background: #a93535;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #ffffff; 
     font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; /* Normal */
}

.report:hover {
      border-color: #ffffff;
     background: #ff2e63; 
    color: white; 
}

.list {   
    background:  #00796b;;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #ffffff; 
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; 
}

.list:hover { 
    background: #00897b;; 
    border-color: #fff; 
    color: white; 
}

.btn-icon1 {
    width: 15px;        
    height: 15px;
    vertical-align: middle; 
    margin-right: 8px; 
}



/* DESC */
#movieDesc {
    color: #ffffff;
    line-height: 1.6;
    font-size: 16px;
    margin-top: 7px;
}


/* 📱 MOBILE FIX (tablet kimi qalsın) */
@media (max-width: 768px) {

    .container2 { 
        padding: 40px 10px 20px 10px;
        box-sizing: border-box;
    }

    #moviePlayer { 
        height: 220px; 
        margin-bottom: 15px;
    }

    /* 🔥 ƏSAS: COLUMN-u sil */
    .movie-bottom { 
        flex-direction: row; /* 🔥 dəyişdik */
        align-items: flex-start;
        gap: 10px;
    }

    /* 🔥 poster kiçilir */
    .movie-poster { 
        width: 30px; 
        height: auto; 
    }

    /* info */
    .movie-info-box { 
        width: 100%; 
        text-align: left; /* 🔥 center sil */
    }

    /* title */
    .title-row { 
        display: flex;
        flex-direction: row; /* 🔥 column sil */
        margin-left: 0px;
        gap: 10px;
        margin-top: -6px;
    
    }
.title-row h3 {
    font-size: 10px;
}


    #movieTitle {
        white-space: nowrap;
        font-size: 18px;
        margin-left: 0px !important;
    }



}




.rating-box {
    align-items: center; /* 🔥 şaquli ortalayır */
    justify-content: center; /* 🔥 ortada toplar */
    background: #fff5f500;
    border-radius: 5px;
    padding: 30px 0px;
    width: 300px;
    
    margin-left: 420px;
    position: absolute;
    margin-bottom: 10px;
    margin-top: -20px;
}

/* başlıq */
.rating-title {
    color: rgb(172, 172, 172);
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 700;

    display: flex;          /* 🔥 ƏN VACİB */
    align-items: center;    /* ortalama */
}

@media (max-width: 480px) {
    .rating-box {
        width: 100% !important;
        margin-left: -0px;
        margin-top: 0px;
        position: relative;
    }

    .rating-title {
        display: flex;
        font-size: 23px;
        text-align: left;
        align-items: center;
    }

    .rating-inner {
        padding: 35px;
    }

    /* 🔥 SVG-ləri mobildə böyüdən kodlar: */
    .rate {
        width: 42px !important;  /* Qutunu böyüdürük ki, ikonlar bir-birinə girməsin */
        height: 32px !important;
    }

    .rate svg {
        width: 42px !important;  /* Normalda 32px idi, mobildə daha böyük edirik */
        height: 42px !important;
    }
}


/* ikon */
.title-icon {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}

/* inner box */
.rating-inner {
    background: #1a1919;
    border-radius: 15px;
    padding: 10px;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
}
/* ikon wrapper */
.rate {
    cursor: pointer;
    width: 22px;  
    height: 22px;
    
}



/* hover */
.rate:hover svg {
    fill: #ff2e63;
      animation: fireGlow 0.6s infinite;
}

/* status */
.rating-status {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #888;
}

/* normal */
.rate svg {
    width: 32px;
    height: 32px;
    fill: #444;
    transition: 0.3s;
}

/* seçilmişlər */
.rate.active svg {
    fill: #ff2e63;
    animation: fireLoop 0.8s infinite;
}

/* 🔥 sonsuz animasiya */
@keyframes fireLoop {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px red);
    }
    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 10px red);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px red);
    }
}




/* Əgər mobildə fərqli görünməsini istəyirsənsə (Opsional) */
@media (max-width: 480px) {
    .movie-info-box {
        padding: 15px; /* Mobildə iç boşluğu bir az azaldırıq ki, çox yer tutmasın */
    }
}




.movie-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    background: #1e252d;
    /* 🔥 TARAZLIQ YARADAN YENİ KODLAR: */
    padding: 20px 9px;      /* Üst/altdan 20px, sağ/soldan 25px iç boşluq verir (yazılar kənara dəymir) */
    border-radius: 12px;     /* Qutunun künclərini qəşəng yumşaldır */
    width: fit-content;      /* Qutu bütün ekranı tutmasın, ancaq içindəki yazıların uzunluğu qədər olsun */
    box-sizing: border-box;  /* Padding-in qutunu lüzumsuz şişirtməsinin qarşısını alır */
    min-width: 400px; 
}

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

.detail-icon {
    width: 17px;
    height: 17px;
}

.detail-item span {
    font-size: 18px;
    color: #ccc;
}

.detail-item strong {
    color: #fff;
}

@media (max-width: 480px) {

    .movie-details {
        min-width: 350px;
        gap: 6px;          /* 🔥 aralıq azaldı */
        margin-top: 10px !important;
        margin-left: -15px; 
    margin-right: -15px;
    width: calc(100% + 10px); /* 5px soldan, 5px sağdan böyüdürük */
    }

    .detail-item {
        gap: 6px;
        align-items: flex-start; /* 🔥 uzun yazılar üçün */
    }

    .detail-icon {
        width: 14px;
        height: 14px;
        margin-top: 2px;
    }

    .detail-item span {
        font-size: 13px;   /* 🔥 kiçildi */
        line-height: 1.3;
    }

    .detail-item strong {
        font-size: 13px;
    }
}






.section-title3 {
    margin-left: 60px;
    margin-top: 20px;
}
@media (max-width: 768px) {
.section-title3 {
position: absolute;
margin-left: 0px;
margin-top: 350px;

    }
}

.comment-section {
    margin-top: 30px;
    background: #2a3841; /* Daha tünd, professional Netflix fonu */
    padding: 15px;
    border-radius: 10px;
    width: 90%;
    margin-left: 56px;
    box-shadow: 0 0 21px #101010;
}

.comment-input-wrapper {

    display: block;
    gap: 10px;
    width: 80%;
    background: #0e0e0eda;
    padding: 39px 39px 10px 39px;
    border-radius: 12px;
    margin-bottom: 10px;
}


.comment-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #141414d3;
    padding: 14px;
    border-radius: 20px;
    width: 101%;
    margin-left: 24px;
    margin-top: -42px;
    
}

/* 🔥 AVATAR */
.input-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e50914;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    overflow: hidden;
    border: 2px solid #606060;
    margin-left: -20px;
    margin-top: -25px;
}

/* şəkil */
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* input */
.comment-box input {
    flex: 1;
    border: none;
    background: transparent;
    color: white;
    outline: none;
    font-size: 16px;
}

/* button */
.comment-btn {
     white-space: nowrap; 
    display: block;
    background: #e50914;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    margin-top: -38px;
    margin-left: 87%;
}

.comment {
    width: 80%;
    display: flex;
    gap: 12px;
    background: #111;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    color: white;
}



/* avatar */
.comment-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e50914;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

/* body */
.comment-body {
    flex: 1;
}

/* üst hissə */
.comment-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.comment-name {
    font-weight: bold;
    font-size: 14px;
}

.comment-time {
    color: gray;
    font-size: 12px;
}

/* text */
.comment-text {
    color: #ddd;
    font-size: 14px;
    margin: 5px 0 10px;
}

/* actions */
.comment-actions {
    display: flex;
    gap: 15px;
    color: gray;
    font-size: 13px;
    cursor: pointer;
}

.comment-actions span:hover {
    color: white;
}

.spoiler-box {
    margin-top: 10px;
    margin-left: -10px;
    color: #f5c518;
}

.spoiler {
    filter: blur(6px);
    cursor: pointer;
    transition: 0.3s;

}

.spoiler.open {
    filter: blur(0);
}

.spoiler-info {
    font-size: 15px;
    color: #aaa;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 2px;
    margin-left: -13px;
}


@media (max-width: 768px) {

  .comment-section {
    margin-top: 10px;
    width: 100%;
    margin-left: 0;
    padding: 10px;
    
  }

  .comment-input-wrapper {
    width: 100%;
    padding: 15px;
  }

  .comment-box {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding: 10px;
  }

  .input-avatar {
    margin: 0;
  }

  .comment-btn {
    width: 100%;
    margin: 10px 0 0 0;
    text-align: center;
  }

  .comment {
    width: 100%;
    padding: 10px;
  }

  .spoiler-box {
    margin-left: 0;
  }

  .spoiler-info {
    margin-left: 0;
    font-size: 13px;
  }

}






/* 📱 MOBİL FULL FIX (MOVIE TAM SİLİNDİ) */
@media (max-width: 768px) {




    /* GRID */
    .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

}










.special-link {
    color: whitesmoke !important;
    font-weight: bold;  
}

/* üst hissə */
.all-movies {
    margin-bottom: 10px;
    position: flex;
}

/* sütunlar */
.columns {
    display: flex;
    gap: 20px;
}

.menu-icon {
    width: 20px;         /* İkonun eni */
    height: 20px;        /* İkonun hündürlüyü */
    object-fit: contain; /* Şəkli əzmir */
}


.btn-icon {
    width: 19px;  /* İkonun eni (istəyə görə dəyişə bilərsən) */
    height: 19px; /* İkonun hündürlüyü */
    object-fit: contain; /* Şəkli əzilməyə qoymur */
}

/* Açılan Menyu */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; 
    left: 0;
    background: #1e1e1e;
    width: 600px;
    margin-left:-200px;
    min-width: 270px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 10;
    border: 1px solid #2b2b2b; /* İncə kənar xətti */
    border-radius: 4px;
    margin-top: 40px; /* Düymə ilə menyu arasında azca boşluq */
    overflow: visible;
    animation: fadeIn 0.2s ease-out; /* Kiçik açılma effekti */
}


.dropdown-content::before,
.dropdown-content::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: rgba(255,255,255,0.1);
}

/* 1-ci xətt */
.dropdown-content::before {
    left: 33.33%;
}

/* 2-ci xətt */
.dropdown-content::after {
    left: 66.66%;
}

.dropdown-content.show {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);

}

.col {
    display: flex;
    flex-direction: column; /* 🔥 yuxarıdan aşağı */
    gap: 8px;
}

/* Menyu daxilindəki linklər */
.dropdown-content a {
    color: #9b9b9b;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; /* Normal */
    font-size: 19px;
    transition: 0.2s;
}

/* Linkin üzərinə gələndə */
.dropdown-content a:hover {
    color: rgb(185, 98, 6);
    padding-left: 20px; /* Sağa sürüşmə effekti */
    background: #222;
}

/* JS ilə əlavə olunan klass */
.show {
    display: block !important;
}

/* Sadə açılma animasiyası */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}





#toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #1db954;
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(-20px);
    transition: 0.3s ease;
    z-index: 9999;
}

#toast.show {
    opacity: 1;
    transform: translateY(0);
}








.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
   background: rgba(35, 35, 39, 0.587); /* 0.85 şəffaflıq dərəcəsidir */
    backdrop-filter: blur(10px); /* Arxa fonu bulandıran əsas kod */
    -webkit-backdrop-filter: blur(10px); /* Safari brauzeri üçün */
    display: none; /* Masaüstündə gizli */
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    border-top: 1px solid rgba(212, 124, 0, 0.2);
    z-index: 10000;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #a3a3a3;
    gap: 5px;
}

/* 🔥 PNG İKON AYARLARI */
.nav-icon-img {
    width: 24px; /* İkonun eni */
    height: 24px; /* İkonun hündürlüyü */
    object-fit: contain;
    transition: 0.3s ease;
    filter: grayscale(100%) opacity(0.7); /* Normalda boz və azca şəffaf */
}

/* 🔥 AKTİV VƏ HOVER HALI */
.nav-item.active .nav-icon-img, 
.nav-item:hover .nav-icon-img {
    filter: grayscale(0%) opacity(1); /* Aktiv olanda rəngli və tam aydın */
    transform: scale(1.1); /* Azca böyümə effekti */
}

.nav-item span {
    font-size: 11px;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 500;
}

.nav-item.active span {
    color: #b46900; /* Aktiv yazının rəngi */
}

@media (max-width: 768px) {
    .mobile-nav {
        display: grid;
    }
}






/* Siyahım Bölməsinin Dizaynı *//* Siyahım Bölməsinin Dizaynı */
#myListContainer {
    display: flex;
    flex-wrap: wrap; /* Kartlar ekrana sığmayanda avtomatik alt sıraya keçsin */
    gap: 20px; /* Kartların arasındakı boşluq */
    padding: 20px 0;
    justify-content: flex-start; /* Kartları soldan başlayaraq düz */
}

#myListSection {
    padding: 20px;
    color: white;
    min-height: 100vh;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(205, 99, 0, 0.2);
    padding-bottom: 15px;
}

.list-header h1 {
    font-size: 24px;
    color: #ff9f43;
}

.back-home-btn {
    background: #cd6300;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.back-home-btn:hover {
    background: #ff9f43;
    box-shadow: 0 0 10px rgba(255, 159, 67, 0.5);
}

/* Kartın üzərindəki Silme (X) Düyməsi */
.remove-from-list-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    z-index: 10;
}

.remove-from-list-btn:hover {
    background: #e74c3c;
    transform: scale(1.1);
}



/* Siyahıya əlavə olunmuş düymənin xüsusi dizaynı */
.btn.list.active-list {
    background-color: #e74c3c !important; /* Qırmızı rəng */
    color: white !important;
}



/* Siyahım Bölməsinin Dizaynı *//* Siyahım Bölməsinin Dizaynı */







/* Xeta bildir *//* Xetabildir *//* Xeta bildir *//* Xetabildir */

.modal {
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: #1e1e1e;
    color: #e0e0e0;
    width: 750px;
    padding: 20px;
    border-radius: 12px; 
    border: 1px solid #333;
    position: relative; 
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; 
}

label {
    display: block;        
    margin-bottom: 8px;    
    color: #ccc;        
    font-size: 14px;       
}

select, textarea {
    gap: 3px;
    background: #2b2b2b;
    border: 1px solid #444;
    color: white;
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 4px;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; 
}

.button-group {
    display: flex;          
    justify-content: flex-end; 
    gap: 10px;              
    margin-top: 20px;
}

.submit-btn {
    display: flex;        
    align-items: center;   
    justify-content: center; 
    gap: 8px;              
    background: #935304;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; 
    transition: transform 0.3s ease;
}


.submit-btn:hover {
    transform: translateX(5px); 
    background-color: #794300;  
}

.closee-btn {
    background: #838383;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Google sans Flex', sans-serif;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.closee-btn:hover {
    transform: translateX(5px);
    background: #444444;
}

.btn-icon {
    width: 22px;        
    height: 22px;
    pointer-events: none; 
    
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #888;
}

.close-btn:hover {
    color: white;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 7px; 
    margin-bottom: 20px;
}

.hata-icon {
    width: 30px;
    height: 30px;
}

.hata-title {
    padding: 5px 15px;
    border-radius: 4px;
    margin: 0;
    color: #fff;
    font-size: 23px;
    display: inline-block;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600; 
}

/* Xeta bildir *//* Xetabildir *//* Xeta bildir *//* Xetabildir */