/* მთავარი მენიუ */
.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.main-nav a:hover {
    color: #f5d000;
}

/* სამხაზიანი ღილაკი */
.menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    padding: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu span {
    display: block;
    width: 28px;
    height: 3px;
    background: #ffffff;
    border-radius: 5px;
    transition: 0.3s;
}

/* ტელეფონის ეკრანი */
@media (max-width: 800px) {

    .topbar {
        position: relative;
        z-index: 1000;
    }

    .menu {
        display: flex;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 10px 6%;
        background: #050505;
        border-bottom: 2px solid #f5d000;
        box-shadow: 0 8px 15px rgba(0,0,0,0.5);
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        padding: 16px 10px;
        border-bottom: 1px solid #333;
        font-size: 17px;
    }

    .main-nav a:last-child {
        border-bottom: none;
    }

    .menu:hover span {
        background: #f5d000;
    }
}

.facebook-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    margin-top: 20px;

    background: #1877f2;
    color: white;
    text-decoration: none;

    font-weight: bold;
    border-radius: 8px;

    transition: 0.3s ease;
}

.facebook-btn ion-icon {
    font-size: 23px;
}

.facebook-btn:hover {
    background: #0866ff;
    transform: translateY(-4px);
    box-shadow: 0 0 18px rgba(24, 119, 242, 0.6);
}

/* აფერადებს საორიენტაციო ტექსტს (placeholder-ს) */
input::placeholder {
    color: #292929 !important;
    opacity: 1; /* ეს ხაზი აუცილებელია, რომ ბრაუზერმა ფერი არ გააფერმკრთალოს */
}

/* ზოგიერთი ძველი ბრაუზერისთვის (ყოველი შემთხვევისთვის) */
input::-webkit-input-placeholder {
    color: #292929 !important;
    opacity: 1;
}

input::-moz-placeholder {
    color: #292929 !important;
    opacity: 1;
}

input:-ms-input-placeholder {
    color: #292929 !important;
    opacity: 1;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* წაშალე body-დან overflow: hidden; თუ გქონდა */
body {
    background: #0b0c10;
    color: #fff;
}

/* ყვითელი ბლოკის სტილი, რომელიც ახლა საიტის შიგნით ზის */
.login-box {
    width: 500px;
    padding: 100px;
    background: #f5d000;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(245, 208, 0, 0.2);
    /* აღარ ვიყენებთ ეკრანზე გადაფარვას, ის ზის იქ, სადაც ჩასვამ HTML-ში */
}

/* კონტეინერი, რომელშიც ყვითელი ბლოკი ზის */
.main-container {  /* ან რა სახელიც ჰქვია შენთან ამ სექციას */
    display: flex;
    width: 100%;
    min-height: 80vh; /* აძლევს სიმაღლეს, რომ ვერტიკალურადაც შუაში ჩაჯდეს */
}

/* თავად ყვითელი ბლოკის სტილი */
.login-box {
    width: 500px;
    background: #f5d000;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(245, 208, 0, 0.15);
    
    /* 🎯 აი ეს ორი ხაზი დასვამს მას ზუსტად ეკრანის შუაგულში საიტის არევის გარეშე: */
    margin: auto; 
    position: relative; 
}


/* სარეგისტრაციო ყუთი */
.login-box {
    position: relative;
    width: 400px;
    padding: 30px;
    background: #f5d000;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(245, 208, 0, 0.2);
}

/* ნავიგაციის მენიუს კონტეინერი — მიწევს ყველაფერს მარჯვნივ */
.nav {
    display: flex;
    align-items: center;
    gap: 25px;          /* დაშორება თავად ტექსტებს შორის */
    margin-left: auto;  /* აწვება მენიუს მთლიანად მარჯვენა მხარეს */
}


.login-box h2 {
    font-size: 2em;
    color: #292929;
    text-align: center;
    margin-bottom: 20px;
}

.error-message {
    background: #de3545;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 14px;
    display: none;
}

/* ინფუთების ბლოკი */
.input-box {
    position: relative;
    width: 100%;
    margin: 20px 0;
    border-bottom: 2px solid #292929;
    display: flex;
    align-items: center;
}

.input-box .icon {
    color: #292929;
    font-size: 1.2em;
    margin-right: 10px;
    padding-bottom: 5px;
}

.input-box label {
    position: absolute;
    left: 35px;
    top: 35%;
    transform: translateY(-50%);
    font-size: 1em;
    color: #292929;
    pointer-events: none;
}

.input-box input {
    width: 100%;
    height: 35px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #292929;
}

.remember-forgot {
    margin: 15px 0;
    color: #292929;
}

/* ღილაკები */

/* 🎯 ღილაკების სტილის გამოსწორება */
.login-box button, 
.login-box .btn {
    width: 100%;
    height: 40px;
    background-color: #1f1f1f !important; /* ღილაკის ფონი იქნება მუქი ნაცრისფერი/შავი */
    color: #ffffff !important;          /* ტექსტის ფერი იქნება თეთრი, რომ კარგად გამოჩნდეს */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
    transition: background 1.3s ease;
}

/* მაუსის მიტანისას ეფექტი */
.login-box button:hover, 
.login-box .btn:hover {
    background-color: #333333 !important;
}


.btn {
    width: 100%;
    height: 40px;
    background: #292929;
    background-color: #000000;
    border-bottom: 2px solid #f5d000;
}

.logo-area {
    display: flex;
    align-items: center;
}

.nav-logo {
    width: 50px;
    height: auto;
    margin-right: 15px;
}

.logo-text h3 {
    color: #292929;
    font-size: 1.2em;
}

.logo-text p {
    color: #f5d000;
    font-size: 0.8em;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-menu a {
    color: #292929;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: color 1s;
}

.nav-menu a:hover {
    color: #f5d000;
}

/* 🎯 პროფილის წრის სტილი, რომელიც მარჯვნივ ჩნდება */
.profile-circle {
    display: none; /* JavaScript გამოაჩენს */
    align-items: center;
    justify-content: center;
    background: #f5d000;
    color: #000;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 25px; /* მომრგვალებული ტაბლო სახელით */
    font-size: 0.9em;
    box-shadow: 0 0 10px rgba(245, 208, 0, 0.4);
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* საიტის შიდა დიზაინის ბლოკი (Hero) */
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px 100px;
}

.hero-text h1 {
    font-size: 4em;
    color: #f5d000;
    margin-bottom: 20px;
}

.hero-text p { margin-bottom: 10px; color: #ccc; }
.hero-text .sub-1 { font-size: 1.5em; color: #fff; }
.btn-play {
    background: #f5d000;
    color: #000;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
}


/* ყველა ელემენტის საწყისი პარამეტრები */

* {
    box-sizing: border-box;
}

/* მოთამაშეების, ნომრებისა და სახელების ჩარჩოები */

.players > div {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 15px;

    background: #111;
    border: 1px solid #292929;
    border-radius: 5px;

    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 1.6s ease,
        transform 1.6s ease,
        background 1.6s ease,
        border-color 1.6s ease,
        box-shadow 1.6s ease;
}

/* მოთამაშის ნომერი */

.players > div strong {
    color: #f5d000;
    font-size: 20px;
    min-width: 30px;
    transition:
        color 1.3s ease;
        text-shadow 1.3s ease;
}

/* მოთამაშის სახელის ეფექტი */

.players > div span {
    transition:
        color 0.3s ease;
        text-shadow 0.3s ease;
}

/* მაუსის მიტანისას ჩარჩო ყვითლად ანათებს */

.players > div:hover {
    background: #252000;
    border-color: #f5d000;

    box-shadow:
        0 0 8px rgba(245, 208, 0, 0.6),
        0 0 20px rgba(245, 208, 0, 0.35),
        inset 0 0 10px rgba(245, 208, 0, 0.08);

    transform: translateY(-4px);
}

/* ნომერი უფრო გამოკვეთილი ხდება */

.players > div:hover strong {
    color: #fff;
    text-shadow: 0 0 10px #f5d000;
}

/* სახელი ყვითლდება */

.players > div:hover span {
    color: #f5d000;
    text-shadow: 0 0 8px rgba(245, 208, 0, 0.3);
}

/* გამოჩენის ანიმაცია */

.players > div.player-show {
    opacity: 1;
    transform: translateY(0);
}

function enterSite() {
    // 1. აქრობს ყვითელ სარეგისტრაციო ბლოკს
    const authBox = document.getElementById('auth-box');
    if (authBox) {
        authBox.style.display = 'none';
    }

    // 2. აჩენს საიტის დანარჩენ დაბლოკილ კონტენტს
    const mainContent = document.getElementById('main-site-content');
    if (mainContent) {
        mainContent.style.display = 'block';
    }
}

/* კომპიუტერის ვერსია */
.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu {
    display: none;
}

/* მობილურის ვერსია */
@media (max-width: 800px) {

    .menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 42px;
        height: 42px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .menu span {
        width: 28px;
        height: 3px;
        background: white;
        border-radius: 5px;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #050505;
        border-bottom: 2px solid #f5d000;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 6%;
        z-index: 1001;
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        padding: 16px 10px;
        border-bottom: 1px solid #333;
        color: white;
        text-decoration: none;
    }
}

@media screen and (max-width: 800px) {
    .main-nav {
        display: none;
    }

    .menu {
        display: flex;
    }

    .main-nav.open {
        display: flex;
    }
/* Mimino FC — მობილურის მენიუს საბოლოო შესწორება */

@media screen and (max-width: 800px) {

    header.topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header.topbar .menu {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 45px;
        height: 45px;
        padding: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1002;
    }

    header.topbar .menu span {
        display: block;
        width: 28px;
        height: 3px;
        background: white;
        border-radius: 5px;
    }

    header.topbar .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #050505;
        flex-direction: column;
        z-index: 1001;
    }

    header.topbar .main-nav.open {
        display: flex !important;
    }
}

@media screen and (min-width: 801px) {
    header.topbar .menu {
        display: none !important;
    }

    header.topbar .main-nav {
        display: flex !important;
    }
}

/* რეგისტრაციის ბლოკის Scroll Reveal ანიმაცია */

.register-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.register-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.history-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* HISTORY SECTION */

.history {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.history-content {
    grid-column: 2;
    width: 100%;
    max-width: 700px;

    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* სამივე ტექსტის ერთნაირი სტილი */

.history-copy,
.training-copy,
.young-talents {
    width: 100%;
    margin: 0;
    padding: 0;
}

.history-content h2 {
    margin: 0 0 15px 0;
}

.history-content p {
    color: #cccccc !important;
    font-size: 16px;
    line-height: 1.8 !important;
    margin: 0;
    padding: 0;
}

/* მობილური ვერსია */

@media (max-width: 800px) {
    .history {
        grid-template-columns: 1fr;
    }

    .history-content {
        grid-column: 1;
        width: 100%;
    }
}


/* ისტორიის სექცია */

.history {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 50px;

    width: 88%;
    max-width: 1450px;
    margin: 80px auto;
}


/* ისტორიის ფოტო */

.history-photo {
    width: 100%;
    position: sticky;
    top: 110px;
}

.history-photo img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 15px;
    border: 1px solid #333;

    object-fit: cover;

    transition: 0.4s ease;
}

.history-photo img:hover {
    border-color: #f5d000;
    box-shadow: 0 0 20px rgba(245, 208, 0, 0.25);
}


/* ტექსტის ნაწილი */

.history-content {
    display: flex;
    flex-direction: column;
    gap: 40px;

    width: 100%;
    max-width: 700px;
}

.history-content h2 {
    margin: 0 0 12px 0;
}

.history-content p {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}


/* ტელეფონის ეკრანი */

@media (max-width: 800px) {

    .history {
        grid-template-columns: 1fr;
        width: 90%;
        gap: 30px;
    }

    .history-photo {
        position: static;
        width: 100%;
    }

    .history-content {
        max-width: 100%;
    }

}

/* ისტორიის პირველი ტექსტის დაშორება სექციის დასაწყისიდან */

.history-content {
    margin-top: 0;
}

.history-copy {
    margin-top: 0;
}