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

html,
body{
    width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    background-color:#f8fafc;
    font-family:Arial,sans-serif;
    text-align:center;
}

body {

    background-color: #f8fafc;

    font-family: Arial, sans-serif;

    text-align: center;

}


h1 {

    color: #2563eb;

    font-size: 50px;

    margin-top: 100px;

}


p {

    color: #475569;

    font-size: 24px;

}


/* HEADER */

header {

    background-color: #2563eb;

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 50px;

}


.logo {

    font-size: 28px;

    font-weight: bold;

}


nav a {

    color: white;

    text-decoration: none;

    margin-left: 20px;

    font-size: 17px;

}


nav a:hover {

    color: #fde047;

}



/* HERO */

.hero {

    text-align: center;

    padding: 100px 20px;

}


.hero h1 {

    font-size: 55px;

    color: #1e293b;

}


.hero p {

    font-size: 22px;

    color: #475569;

}


button {

    margin-top: 30px;

    padding: 15px 40px;

    border: none;

    border-radius: 30px;

    background-color: #2563eb;

    color: white;

    font-size: 20px;

    cursor: pointer;

}


button:hover {

    background-color: #1d4ed8;

}


/* FEATURES */


.features{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;              /* 30 yerine 20 */
    width:95%;
    max-width:1350px;
    margin:35px auto;
}

.card{
    height:180px;          /* min-height yerine sabit yükseklik */
    padding:15px;
    border-radius:20px;    /* 25 yerine 20 */
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    transition:.3s;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    padding-top: 15px;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(0,0,0,.15);
}

.unit-icon{
    font-size:34px;
    margin-bottom:8px;
}

.card h1 {
    margin-top: 0;
    transform: translateY(50px);
}

.card h2{
    font-size:18px;
    margin:6px 0;
    color:#1e3a8a;
}

.card h3{
    font-size:15px;
    margin:5px 0 18px;
    color:#555;
}

.start-btn{
    padding:9px 18px;
    font-size:13px;
    border-radius:20px;
}


.start-btn:hover {
    background: #1d4ed8;
}

@media(max-width:900px){

.features {
    grid-template-columns: repeat(2, 1fr);
}

}


@media(max-width:500px){

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


}

/* DAILY WORD */


.daily-word {

    text-align: center;

    padding: 70px 20px;

}



.daily-word h2 {

    font-size: 35px;

    color: #1e293b;

    margin-bottom: 30px;

}



.word-card {

    background: linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );

    color:white;

    width:350px;

    margin:auto;

    padding:40px;

    border-radius:25px;

    box-shadow:0 15px 30px rgba(0,0,0,0.15);

}



.word-icon {

    font-size:70px;

}



.word-card h1 {

    color:white;

    font-size:45px;

    margin:20px 0;

}



.word-card p {

    color:white;

    font-size:25px;

}



.word-card span {

    display:block;

    margin-top:20px;

    font-style:italic;

}/* LESSONS */


.lessons {

    padding:70px 20px;

    text-align:center;

}


.lessons h2 {

    font-size:35px;

    color:#1e293b;

    margin-bottom:40px;

}



.lesson-container {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.lesson-card {

    background:white;

    width:300px;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

    transition:.3s;

}



.lesson-card:hover {

    transform:translateY(-10px);

}



.lesson-icon {

    font-size:60px;

}



.lesson-card h3 {

    color:#2563eb;

    margin-top:20px;

}



.lesson-card h2 {

    margin:15px 0;

    font-size:28px;

}



.lesson-card p {

    color:#475569;

    font-size:17px;

}



.lesson-card button {

    margin-top:20px;

    padding:12px 30px;

    font-size:16px;

}.lesson-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
}


.lesson-card {
    width: 300px;
}
.lessons {
    width: 100%;
    padding: 70px 20px;
    text-align: center;
}


.lesson-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}


.lesson-card {
    width: 300px;
    background: white;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.features,
.lesson-container {

    display: flex !important;

    flex-direction: row !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 30px;

    flex-wrap: wrap;

}


.card,
.lesson-card {

    width: 280px;

}.daily-word,
.lessons {

    width:100%;

    clear:both;

    /* =====================================================
   RESPONSIVE - HOME PAGE
   (Tablet + Telefon)
===================================================== */

/* ---------- Tablet (1024px) ---------- */

@media (max-width:1024px){

    header{
        padding:18px 25px;
    }

    .logo{
        font-size:24px;
    }

    nav a{
        margin-left:15px;
        font-size:16px;
    }

    .hero{
        padding:70px 20px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:20px;
    }

    .features{
        display:grid !important;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        width:95%;
    }

    .card{
        width:100%;
        max-width:none;
        height:auto;
        min-height:180px;
    }

    .word-card{
        width:85%;
        max-width:420px;
    }

    .lesson-container{
        display:grid !important;
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .lesson-card{
        width:100%;
        box-sizing:border-box;
    }

}


/* ---------- Telefon (768px) ---------- */

@media (max-width:768px){

      header{

        padding:20px 15px;

        flex-direction:column;

        gap:15px;

    }

    .logo{
        font-size:24px;
    }

    nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }

    nav a{
        margin:0;
        font-size:15px;
    }

    .hero{
        padding:50px 15px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.3;
    }

    .hero p{
        font-size:18px;
    }

    button{
        width:100%;
        max-width:280px;
        font-size:17px;
        padding:14px;
    }

    .features{
        display:grid !important;
        grid-template-columns:1fr;
        width:95%;
        gap:18px;
    }

    .card{
        width:100%;
        height:auto;
        min-height:170px;
    }

    .card h2{
        font-size:18px;
    }

    .card h3{
        font-size:15px;
    }

    .daily-word{
        padding:50px 15px;
    }

    .daily-word h2{
        font-size:28px;
    }

    .word-card{
        width:100%;
        box-sizing:border-box;
        padding:25px;
    }

    .word-icon{
        font-size:55px;
    }

    .word-card h1{
        font-size:34px;
    }

    .word-card p{
        font-size:20px;
    }

    .lessons{
        padding:50px 15px;
    }

    .lesson-container{
        display:grid !important;
        grid-template-columns:1fr;
        gap:20px;
    }

    .lesson-card{
        width:100%;
        box-sizing:border-box;
        padding:25px;
    }

}


/* ---------- Küçük Telefon (480px) ---------- */

@media (max-width:480px){

    h1{
        font-size:32px;
    }

    p{
        font-size:18px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:16px;
    }

    .card{
        padding:18px;
    }

    .word-card{
        padding:20px;
    }

    .word-card h1{
        font-size:28px;
    }

    .word-card p{
        font-size:18px;
    }

    .lesson-card{
        padding:20px;
    }

    .lesson-card h2{
        font-size:22px;
    }

}

}/* LESSON PAGE */

.vocabulary{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-top:40px;

}


.word-box{

    background:white;

    width:220px;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 20px rgba(0,0,0,.1);

    font-size:40px;

}


.word-box h3{

    color:#2563eb;

    font-size:25px;

}


.dialogue,
.practice {
    background: white;
    max-width: 500px;
    margin: 50px auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);

    display: block;
}


.practice button{

    display:block;

    width:200px;

    margin:15px auto;

}.score-box{

    background:#2563eb;

    color:white;

    width:220px;

    margin:20px auto;

    padding:15px;

    border-radius:20px;

    font-size:25px;

    font-weight:bold;

}

.profile{

    text-align:center;

    padding:70px 20px;

}


.profile-card {
    background: white;
    max-width: 400px;
    width: 90%;

    margin: 30px auto 0; /* Üstten 40px boşluk */

    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
}


.profile-card h2{

    color:#2563eb;

}

/* FREE MEMBER - Modern Green */

#profileCard.free{

    background: linear-gradient(
        135deg,
        #34d399,
        #059669
    ) !important;

    color:white;

}


/* PREMIUM MEMBER - Elegant Gold */

#profileCard.premium{

    background: linear-gradient(
        135deg,
        #fde68a,
        #f59e0b
    ) !important;

    color:white;

}

#profileCard{

    transition: .3s ease;

}


#profileCard:hover{

    transform: translateY(-5px);

}

/* PROFILE CARD MOBILE */

@media(max-width:600px){


    #profileCard{

        width:90%;
        border-radius:16px;

        padding:15px;

        transition:.3s ease;

    }


    #profileCard:hover{

        transform:none;

    }


    #profileCard.premium{

        background:linear-gradient(
            135deg,
            #fde68a,
            #f59e0b
        ) !important;

    }


    .profile-top{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }


    .profile-info h2{

        font-size:22px;

    }


    .profile-info p{

        font-size:14px;

    }


}

@media(min-width:601px) and (max-width:900px){

    #profileCard{

        padding:22px;

    }


}

#level{

    font-size:30px;

}

.badge {

    background:#fef3c7;

    padding:20px;

    margin-top:20px;

    border-radius:20px;

    border:2px solid #f59e0b;

}


.badge h3 {

    color:#d97706;

    font-size:24px;

}


.badge p {

    font-size:16px;

}

.progress-box{

    margin-top:30px;

}


.progress-bar{

    width:80%;

    height:25px;

    background:#e2e8f0;

    border-radius:20px;

    margin:10px auto 25px;

    overflow:hidden;

}


.progress-fill{

    height:100%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    font-size:14px;

}



.xp-box{

    margin-top:30px;

}


#xpProgress{

    background-color:#f59e0b;
    height:100%;
    width:0%;
    transition:0.5s;

}

.streak-box{

    background:#fee2e2;

    width:250px;

    margin:20px auto;

    padding:20px;

    border-radius:20px;

    border:2px solid #ef4444;

}


#streak{

    color:#dc2626;

    font-size:30px;

    font-weight:bold;

}

.avatar-box{

    background:#f8fafc;

    margin-top:25px;

    padding:20px;

    border-radius:20px;

}


.avatar-box h3{

    color:#2563eb;

}


.avatars{

    display:flex;

    justify-content:center;

    gap:15px;

}


.avatars button{

    margin-top:10px;

    padding:10px;

    font-size:30px;

    background:white;

    color:black;

    border:2px solid #e2e8f0;

}


.avatars button:hover{

    transform:scale(1.1);

}

.summary-cards{

    display:grid !important;

    grid-template-columns:repeat(5, 1fr) !important;

    gap:15px;

       width:100%;

    max-width:100%;

}

.summary-card{

    background:white;

    padding:15px;

    border-radius:20px;

    text-align:center;

    min-width:0;

    overflow:hidden;

}

.summary-card h3{

    color:#2563eb;

    font-size:20px;

}

.summary-card p{

    font-size:30px;

    font-weight:bold;

    color:#1e293b;

}

.summary-cards{

    width:90%;

    max-width:900px;

    margin:30px auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

/* =====================================================
   RESPONSIVE - LESSON / PROFILE
===================================================== */

/* ---------- Tablet ---------- */

@media (max-width:1024px){

    .vocabulary{
        gap:20px;
    }

    .word-box{
        width:200px;
        padding:25px;
    }

    .dialogue,
    .practice{
        width:90%;
        max-width:700px;
        box-sizing:border-box;
    }

    .profile-card{
        width:95%;
        padding:30px;
        box-sizing:border-box;
    }

    .summary-cards{
        grid-template-columns:repeat(2,1fr) !important;
        width:95%;
    }

}


/* ---------- Telefon ---------- */

@media (max-width:768px){

    .vocabulary{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .word-box{
        width:90%;
        max-width:320px;
        padding:22px;
        box-sizing:border-box;
    }

    .word-box h3{
        font-size:22px;
    }

    .dialogue,
    .practice{
        width:95%;
        padding:20px;
        box-sizing:border-box;
    }

    .practice button{
        width:100%;
        max-width:250px;
    }

    .score-box{
        width:90%;
        max-width:280px;
        font-size:22px;
    }

    .profile{
        padding:50px 15px;
    }

    .profile-card{
        width:100%;
        padding:25px 18px;
        box-sizing:border-box;
    }

    .progress-bar{
        width:100%;
    }

    .streak-box{
        width:100%;
        max-width:280px;
        box-sizing:border-box;
    }

    .avatars{
        flex-wrap:wrap;
        gap:10px;
    }

    .avatars button{
        font-size:24px;
        padding:8px;
    }

    .summary-cards{
        grid-template-columns:1fr !important;
        width:100%;
        gap:15px;
    }

}


/* ---------- Küçük Telefon ---------- */

@media (max-width:480px){

    .word-box{
        font-size:32px;
    }

    .word-box h3{
        font-size:20px;
    }

    .score-box{
        font-size:20px;
    }

    #level{
        font-size:24px;
    }

    .badge{
        padding:15px;
    }

    .badge h3{
        font-size:20px;
    }

    .summary-card h3{
        font-size:18px;
    }

    .summary-card p{
        font-size:24px;
    }

}

/* =========================
   PROFILE DASHBOARD
========================= */


.dashboard{

    padding:60px 20px;

    max-width:1000px;

    margin:auto;

}



.welcome-card{

    background:linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );

    color:white;

    padding:40px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}



.welcome-card h1{

    color:white;

    margin:0;

    font-size:40px;

}



.welcome-card p{

    color:white;

    font-size:20px;

}




.summary-cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:35px 0;

}



.summary-card{

    background:white;

    padding:25px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

    transition:.3s;

}



.summary-card:hover{

    transform:translateY(-8px);

}



.summary-card h3{

    color:#2563eb;

    font-size:20px;

}



.summary-card p{

    font-size:32px;

    font-weight:bold;

    color:#1e293b;

}





.dashboard-card{

    background:white;

    padding:35px;

    margin-top:30px;

    border-radius:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

}



.dashboard-card h2{

    color:#2563eb;

}




.progress-bar{

    width:100%;

    height:25px;

    background:#e2e8f0;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:25px;

}



.progress-fill{

    height:100%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    transition:.5s;

}





#badgeArea{

    background:#fef3c7;

    padding:25px;

    border-radius:20px;

    border:2px solid #f59e0b;

    text-align:center;

}


@media(max-width:900px){

.summary-cards{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:500px){

.summary-cards{

    grid-template-columns:1fr;

}

}

/* =====================================================
   RESPONSIVE - PROFILE DASHBOARD
===================================================== */

/* ---------- Tablet ---------- */

@media (max-width:1024px){

    .dashboard{
        width:90%;
        padding:50px 15px;
        box-sizing:border-box;
    }

    .welcome-card{
        padding:30px 25px;
    }

    .welcome-card h1{
        font-size:34px;
    }

    .welcome-card p{
        font-size:18px;
    }

    .summary-cards{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .dashboard-card{
        padding:25px;
    }

}


/* ---------- Telefon ---------- */

@media (max-width:768px){

    .dashboard{
        width:100%;
        padding:40px 15px;
        box-sizing:border-box;
    }

    .welcome-card{
        padding:25px 18px;
    }

    .welcome-card h1{
        font-size:28px;
        line-height:1.3;
    }

    .welcome-card p{
        font-size:16px;
    }

    .summary-cards{
        grid-template-columns:1fr;
        gap:15px;
    }

    .summary-card{
        padding:20px;
    }

    .summary-card h3{
        font-size:18px;
    }

    .summary-card p{
        font-size:26px;
    }

    .dashboard-card{
        padding:15px;
    }

    .dashboard-card h2{
        font-size:24px;
    }

    .progress-bar{
        height:20px;
    }

    #badgeArea{
        padding:18px;
    }

}


/* ---------- Küçük Telefon ---------- */

@media (max-width:480px){

    .welcome-card h1{
        font-size:24px;
    }

    .welcome-card p{
        font-size:15px;
    }

    .summary-card{
        padding:18px;
    }

    .summary-card h3{
        font-size:17px;
    }

    .summary-card p{
        font-size:22px;
    }

    .dashboard-card{
        padding:18px;
    }

    #badgeArea{
        padding:15px;
    }

}


/* BADGE CARDS */

#badgeArea{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    background:transparent;

    border:none;

    padding:10px;

}



#badgeArea > div{

    background:white;

    width:200px;

    padding:25px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

    transition:.3s;

}



#badgeArea > div:hover{

    transform:translateY(-8px);

}



#badgeArea h3{

    color:#2563eb;

    margin-top:15px;

}



#badgeArea p{

    font-size:15px;

}

#badgeArea > div:first-child{

    font-size:35px;

}

/* =========================
   MOBILE RESPONSIVE
========================= */


@media(max-width:768px){


header{

    flex-direction:column;

    padding:20px;

}


.logo{

    margin-bottom:15px;

}

nav{

    flex-wrap:wrap;

    justify-content:center;

}

nav a{

    font-size:15px;

    margin:0 8px;

}




.dashboard{

    padding:30px 15px;

}




.welcome-card h1{

    font-size:30px;

}



.welcome-card p{

    font-size:16px;

}




.summary-cards{

    grid-template-columns:1fr;

    gap:15px;

}




.summary-card{

    width:100%;

}




.dashboard-card{

    padding:22px 15px;

}



.dashboard-card h2{

    font-size:24px;

}




.progress-bar{

    height:22px;

}




#badgeArea{

    flex-direction:column;

    align-items:center;

}



#badgeArea > div{

    width:90%;

}

}

/* DARK MODE */


body.dark{

    background:#0f172a;

    color:white;

}



body.dark header{

    background:#020617;

}



body.dark .dashboard-card,
body.dark .summary-card{

    background:#1e293b;

    color:white;

}



body.dark .summary-card p,
body.dark .dashboard-card p{

    color:#e2e8f0;

}



body.dark h2,
body.dark h3{

    color:#60a5fa;

}



body.dark .progress-bar{

    background:#334155;

}



body.dark #badgeArea > div{

    background:#1e293b;

    color:white;

}



#themeButton{

    margin-left:20px;

    padding:10px 20px;

    border-radius:20px;

    font-size:14px;

}

/* =====================================================
   RESPONSIVE - BADGES & DARK MODE
===================================================== */

/* ---------- Tablet ---------- */

@media (max-width:1024px){

    #badgeArea{
        justify-content:center;
        gap:18px;
    }

    #badgeArea > div{
        width:220px;
        box-sizing:border-box;
    }

    #themeButton{
        margin-left:0;
        margin-top:15px;
    }

}


/* ---------- Telefon ---------- */

@media (max-width:768px){

    #badgeArea{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    #badgeArea > div{
        width:100%;
        max-width:340px;
        padding:22px;
        box-sizing:border-box;
    }

    #badgeArea h3{
        font-size:20px;
    }

    #badgeArea p{
        font-size:15px;
    }

    #themeButton{
        width:100%;
        max-width:260px;
        margin:20px auto 0;
        display:block;
    }

}


/* ---------- Küçük Telefon ---------- */

@media (max-width:480px){

    #badgeArea > div{
        padding:18px;
    }

    #badgeArea > div:first-child{
        font-size:28px;
    }

    #badgeArea h3{
        font-size:18px;
    }

    #badgeArea p{
        font-size:14px;
    }

    #themeButton{
        font-size:13px;
        padding:10px 16px;
    }

}

/* CERTIFICATE */


.certificate-page{

    padding:70px 20px;

    text-align:center;

}



.certificate-card{

    background:white;

    max-width:700px;

    margin:auto;

    padding:60px;

    border-radius:30px;

    border:8px solid #f59e0b;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}



.certificate-card h1{

    color:#2563eb;

}



.certificate-card h2{

    color:#f59e0b;

}



body.dark .certificate-card{

    background:#1e293b;

    color:white;

}

/* CERTIFICATE BUTTON */


#certificateButton{

    text-align:center;

    margin-top:30px;

}


#certificateButton button{

    background:#f59e0b;

}


#certificateButton button:hover{

    background:#d97706;

}

/* CERTIFICATE DETAILS */


.certificate-card{

    position:relative;

    background:linear-gradient(
        135deg,
        #ffffff,
        #fef3c7
    );

}



.certificate-card p{

    font-size:18px;

}



.signature{

    margin-top:40px;

    font-size:18px;

    color:#475569;

}



.certificate-card button{

    margin-top:40px;

    background:#2563eb;

}



@media print{


header,
button{

    display:none;

}


.certificate-card{

    width:100%;
    margin:auto;
    box-shadow:none;
    border:8px solid #f59e0b;

}

}


/* BADGE STATUS */


.badge-item{

    width:200px;

    padding:25px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 20px rgba(0,0,0,.1);

}



.badge-icon{

    font-size:45px;

}



.unlocked{

    background:#fef3c7;

    border:2px solid #f59e0b;

}



.locked{

    background:#e2e8f0;

    opacity:.65;

}



.locked strong{

    color:#64748b;

}



#badgeArea{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

}

.game-stats{
    padding:80px 10%;
    background:#0f172a;
    color:white;
    text-align:center;
}

.game-stats h2{
    font-size:40px;
    margin-bottom:50px;
}

.stats-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.stat-box{
    width:220px;
    background:#1e293b;
    padding:35px;
    border-radius:20px;
    transition:.3s;
}

.stat-box:hover{
    transform:translateY(-10px);
    background:#2563eb;
}

.stat-box h3{
    font-size:48px;
    color:#38bdf8;
    margin-bottom:10px;
}

.stat-box p{
    font-size:20px;
}

.start-btn{

    background:#2563eb;
    color:white;

    border:none;
    padding:12px 30px;

    font-size:18px;
    font-weight:bold;

    border-radius:30px;

    cursor:pointer;

    transition:0.3s;

}


.start-btn:hover{

    background:#1d4ed8;

    transform:scale(1.05);

}

/* ==================================================
   TABLET (992px)
================================================== */

@media (max-width:992px){

    .certificate-card{
        max-width:90%;
        padding:45px 30px;
    }

    .certificate-card h1{
        font-size:36px;
    }

    .certificate-card h2{
        font-size:28px;
    }

    .certificate-card p,
    .signature{
        font-size:17px;
    }

    .badge-item{
        width:180px;
        padding:20px;
    }

    .game-stats{
        padding:60px 5%;
    }

    .game-stats h2{
        font-size:34px;
    }

    .stats-container{
        gap:20px;
    }

    .stat-box{
        width:190px;
        padding:25px;
    }

    .stat-box h3{
        font-size:40px;
    }

    .stat-box p{
        font-size:18px;
    }

}

/* ==================================================
   TELEFON (768px)
================================================== */

@media (max-width:768px){

    .certificate-page{
        padding:40px 15px;
    }

    .certificate-card{
        width:100%;
        max-width:100%;
        padding:30px 20px;
        border-width:5px;
        border-radius:18px;
    }

    .certificate-card h1{
        font-size:28px;
    }

    .certificate-card h2{
        font-size:22px;
    }

    .certificate-card p{
        font-size:15px;
        line-height:1.7;
    }

    .signature{
        margin-top:25px;
        font-size:15px;
    }

    #certificateButton button{
        width:100%;
        max-width:280px;
    }

    #badgeArea{
        gap:15px;
    }

    .badge-item{
        width:100%;
        max-width:280px;
        padding:20px;
    }

    .badge-icon{
        font-size:38px;
    }

    .game-stats{
        padding:45px 20px;
    }

    .game-stats h2{
        font-size:28px;
        margin-bottom:30px;
    }

    .stats-container{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .stat-box{
        width:100%;
        max-width:300px;
        padding:25px;
    }

    .stat-box h3{
        font-size:36px;
    }

    .stat-box p{
        font-size:17px;
    }

    .start-btn{
        width:100%;
        max-width:250px;
        font-size:16px;
        padding:12px 20px;
    }

}

/* ==================================================
   KÜÇÜK TELEFON (480px)
================================================== */

@media (max-width:480px){

    .certificate-card{
        padding:22px 15px;
    }

    .certificate-card h1{
        font-size:24px;
    }

    .certificate-card h2{
        font-size:20px;
    }

    .certificate-card p{
        font-size:14px;
    }

    .signature{
        font-size:14px;
    }

    .game-stats h2{
        font-size:24px;
    }

    .stat-box h3{
        font-size:30px;
    }

    .stat-box p{
        font-size:15px;
    }

}

/* TEACHERS */

.teachers{

    padding:80px 10%;
    text-align:center;
    background:#f8fafc;

}


.teachers h2{

    font-size:40px;
    margin-bottom:50px;

}



.teacher-container{

    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;

}



.teacher-card{

    width:200px;

    background:white;

    padding:20px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,0.1);

}



.teacher-card:hover{

    transform:translateY(-10px);

}



.teacher-photo{

    font-size:50px;

    margin-bottom:10px;

}



.teacher-card h3{

    font-size:20px;

}


.teacher-card p{

    font-size:15px;

}


.teacher-card span{

    font-size:14px;

}

/* ACHIEVEMENTS */


.achievements{

    padding:50px 8%;
    background:#2563eb;
    color:white;
    text-align:center;

}


.achievements h2{

    font-size:30px;
    margin-bottom:30px;

}


.achievement-container{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}


.achievement-card{

    width:170px;
    background:white;
    color:#1e293b;

    padding:20px;

    border-radius:15px;

    transition:0.3s;

}


.achievement-card:hover{

    transform:translateY(-5px);

}


.achievement-icon{

    font-size:35px;

}


.achievement-card h3{

    font-size:28px;

    color:#2563eb;

    margin:10px 0;

}


.achievement-card p{

    font-size:15px;

}

.leaderboard{

    padding:60px 8%;

    background:white;

    text-align:center;

}



.leaderboard h2{

    font-size:32px;

    margin-bottom:35px;

    color:#1e293b;

}



.leader-container{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}



.leader-card{

    width:200px;

    padding:25px;

    background:#f8fafc;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,0.1);

    transition:.3s;

}



.leader-card:hover{

    transform:translateY(-8px);

}



.rank{

    font-size:45px;

}



.leader-card h3{

    color:#2563eb;

    font-size:22px;

}



.leader-card p{

    font-weight:bold;

    color:#64748b;

}

/* DAILY CHALLENGE */


.daily-challenge{

    padding:60px 8%;

    background:#0f172a;

    color:white;

    text-align:center;

}



.daily-challenge h2{

    font-size:32px;

    margin-bottom:35px;

}



.challenge-container{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}



.challenge-card{

    width:220px;

    background:white;

    color:#1e293b;

    padding:25px;

    border-radius:20px;

    transition:.3s;

}



.challenge-card:hover{

    transform:translateY(-8px);

}



.challenge-icon{

    font-size:45px;

}



.challenge-card h3{

    color:#2563eb;

    margin:15px 0;

}



.challenge-card p{

    color:#64748b;

}



.challenge-btn{

    margin-top:35px;

}

#challengeResult{

    margin-top:20px;

    font-size:20px;

    font-weight:bold;

}

/* ==================================================
   TABLET (992px)
================================================== */

@media (max-width:992px){

    .teachers{
        padding:60px 5%;
    }

    .teachers h2{
        font-size:34px;
        margin-bottom:40px;
    }

    .teacher-container{
        gap:20px;
    }

    .teacher-card{
        width:180px;
        padding:18px;
    }

    .teacher-photo{
        font-size:42px;
    }

    .teacher-card h3{
        font-size:18px;
    }

    .teacher-card p{
        font-size:14px;
    }

    .achievements{
        padding:45px 5%;
    }

    .achievement-container{
        gap:18px;
    }

    .achievement-card{
        width:160px;
    }

    .leaderboard{
        padding:50px 5%;
    }

    .leader-container{
        gap:20px;
    }

    .leader-card{
        width:180px;
    }

    .daily-challenge{
        padding:50px 5%;
    }

    .challenge-container{
        gap:20px;
    }

    .challenge-card{
        width:200px;
    }

}

/* ==================================================
   TELEFON (768px)
================================================== */

@media (max-width:768px){

    .teachers{
        padding:45px 20px;
    }

    .teachers h2{
        font-size:28px;
        margin-bottom:30px;
    }

    .teacher-container{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .teacher-card{
        width:100%;
        max-width:300px;
    }

    .teacher-photo{
        font-size:40px;
    }

    .achievements{
        padding:40px 20px;
    }

    .achievements h2{
        font-size:26px;
    }

    .achievement-container{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .achievement-card{
        width:100%;
        max-width:280px;
    }

    .leaderboard{
        padding:40px 20px;
    }

    .leaderboard h2{
        font-size:28px;
    }

    .leader-container{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .leader-card{
        width:100%;
        max-width:280px;
    }

    .rank{
        font-size:38px;
    }

    .leader-card h3{
        font-size:20px;
    }

    .daily-challenge{
        padding:40px 20px;
    }

    .daily-challenge h2{
        font-size:28px;
    }

    .challenge-container{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .challenge-card{
        width:100%;
        max-width:300px;
    }

    .challenge-icon{
        font-size:40px;
    }

    .challenge-btn button{
        width:100%;
        max-width:260px;
    }

    #challengeResult{
        font-size:18px;
    }

}

/* ==================================================
   KÜÇÜK TELEFON (480px)
================================================== */

@media (max-width:480px){

    .teachers h2,
    .achievements h2,
    .leaderboard h2,
    .daily-challenge h2{
        font-size:24px;
    }

    .teacher-card,
    .achievement-card,
    .leader-card,
    .challenge-card{
        max-width:100%;
    }

    .teacher-card h3,
    .leader-card h3,
    .challenge-card h3{
        font-size:18px;
    }

    .achievement-card h3{
        font-size:24px;
    }

    .teacher-card p,
    .achievement-card p,
    .leader-card p,
    .challenge-card p{
        font-size:14px;
    }

}

/* WORD OF THE DAY */


.meaning{

    font-size:20px;

    color:#2563eb;

    font-weight:bold;

}


.example{

    margin-top:20px;

    font-style:italic;

}


.mini-question{

    margin-top:25px;

}


.mini-question button{

    margin:10px;

    padding:10px 20px;

    border:none;

    border-radius:20px;

    cursor:pointer;

    background:#e2e8f0;

}


.mini-question button:hover{

    background:#2563eb;

    color:white;

}


#wordResult{

    font-size:18px;

    font-weight:bold;

    margin-top:15px;

}

.quiz-intro{

    text-align:center;

    font-size:20px;

    color:#64748b;

    margin-bottom:40px;

}

/* QUIZ PROGRESS */


.progress-box{

    width:80%;

    height:15px;

    background:#e2e8f0;

    border-radius:20px;

    margin:20px auto;

    overflow:hidden;

}


#progress-bar{

    width:0%;

    height:100%;

    background:#2563eb;

    border-radius:20px;

    transition:0.5s;

}



#progress-text{

    font-weight:bold;

    color:#64748b;

}

.game-xp{

    background:#fff3cd;

    color:#856404;

    display:inline-block;

    padding:10px 20px;

    border-radius:20px;

    font-weight:bold;

    margin:15px;

}

/* DAILY LGS VOCABULARY - CLEAN DESIGN */

/* DAILY WORD GRID */

#dailyWords {

    display: grid;

    grid-template-columns: repeat(5, 180px);

    gap: 12px;

    justify-content: center;

    margin-top: 10px;

}


/* DAILY WORD CARDS */

/* WORD CARD */

.word-item {

    background: #ffffff;

    border-left: 4px solid #4f46e5;

    padding: 10px;

    border-radius: 10px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    text-align: center;

}

@media (max-width:768px){

    /* Vocabulary Container */
    .daily-vocabulary{
        width:100%;
        max-width:100%;
        padding:20px 15px;
        margin:20px auto;
    }


    /* Vocabulary Kartları */
    .vocabulary-card,
    .word-card{
        width:100%;
        max-width:100%;
        margin:15px auto;
        padding:18px;

        box-sizing:border-box;
        overflow:hidden;

        border-radius:20px;
    }


    /* Başlık */
    .daily-vocabulary h2{
        font-size:22px;
        text-align:center;
    }


    /* Kelime */
    .word-card h3,
    .vocabulary-card h3{
        font-size:18px;
        word-break:break-word;
    }


    /* Açıklama */
    .word-card p,
    .vocabulary-card p{
        font-size:14px;
        line-height:1.5;
        word-break:break-word;
    }


    /* Butonlar varsa */
    .vocabulary-card button,
    .word-card button{
        width:100%;
        max-width:100%;
        margin-top:10px;
    }

}

.word-item:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 18px rgba(0,0,0,0.12);

}


.word-item h3 {

    color: #4f46e5;

    font-size: 18px;

    margin: 0 0 5px 0;

}


.word-item p {

    color: #555;

    font-size: 14px;

    margin: 0;

}

/* VOCABULARY TITLE */

.vocabulary-title {

    text-align: center;
    margin-top: -40px;
    margin-bottom: 0px;

}


.vocabulary-title h2 {

    color: #4f46e5;

    font-size: 28px;

    margin-bottom: 4px;

    font-weight: 700;

}


.vocabulary-title p {

    color: #666;

    font-size: 16px;

    margin: 0;

}

#timer {

    text-align:center;

    font-size:18px;

    color:#4f46e5;

    font-weight:bold;

}


#progress-bar {

    height:10px;

    width:0%;

    background:#4f46e5;

    border-radius:10px;

    transition:0.3s;

}

/* ==================================================
   TABLET (992px)
================================================== */

@media (max-width:992px){

    .meaning{
        font-size:18px;
    }

    .example{
        font-size:16px;
    }

    .quiz-intro{
        font-size:18px;
        margin-bottom:30px;
    }

    .progress-box{
        width:90%;
    }

    .game-xp{
        font-size:15px;
        padding:8px 18px;
    }

    #dailyWords{
        grid-template-columns:repeat(3,1fr);
        gap:15px;
    }

    .word-item h3{
        font-size:17px;
    }

    .word-item p{
        font-size:14px;
    }

}

/* ==================================================
   TELEFON (768px)
================================================== */

@media (max-width:768px){

    .meaning{
        font-size:17px;
    }

    .example{
        font-size:15px;
        line-height:1.6;
    }

    .mini-question{
        margin-top:20px;
    }

    .mini-question button{
        width:100%;
        max-width:250px;
        margin:8px auto;
        display:block;
    }

    #wordResult{
        font-size:16px;
    }

    .quiz-intro{
        font-size:16px;
        padding:0 10px;
    }

    .progress-box{
        width:95%;
        height:12px;
    }

    .game-xp{
        display:block;
        width:fit-content;
        margin:15px auto;
        font-size:14px;
    }

 }

    /* Mobil */
@media (max-width:768px){

    #dailyWords{
        display:flex;
        justify-content:flex-start;   /* center yerine start */
        gap:16px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        padding:0;
        margin-top:10px;

        scrollbar-width:none;
    }

    #dailyWords::-webkit-scrollbar{
        display:none;
    }

    #dailyWords > *{
        flex:0 0 100%;
        scroll-snap-align:start;
        scroll-snap-stop:always;
        margin:0;
    }



    .word-item{
        padding:12px;
    }

    .word-item h3{
        font-size:16px;
    }

    .word-item p{
        font-size:13px;
    }

    #timer{
        font-size:16px;
    }

}



@media (max-width:768px){

    .dashboard-card{
        width:90%;
        max-width:100%;
        margin:20px auto;
        padding:15px ;
        box-sizing:border-box;
        overflow:hidden;
    }

     .vocabulary-title{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin-top:0;
        padding:0 15px;
    }

    .vocabulary-title h2{
        font-size:22px;
        text-align:center;
        word-break:break-word;
    }


    .vocabulary-title p{
        font-size:14px;
        text-align:center;
    }


    /* Mobil */
@media (max-width:768px){

    #dailyWords{
        display:flex;
        overflow-x:auto;
        gap:18px;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
        padding-bottom:10px;
    }

    #dailyWords::-webkit-scrollbar{
        display:none;
    }

    #dailyWords > *{
        flex:0 0 92%;
        scroll-snap-align:center;
    }

}


    #dailyWords > div{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
    }

}

/* ==================================================
   KÜÇÜK TELEFON (480px)
================================================== */

@media (max-width:480px){

    #dailyWords{
        grid-template-columns:1fr;
    }

    .word-item{
        width:100%;
    }

    .meaning{
        font-size:16px;
    }

    .example{
        font-size:14px;
    }

    .vocabulary-title h2{
        font-size:22px;
    }

    .vocabulary-title p{
        font-size:14px;
    }

    .game-xp{
        font-size:13px;
        padding:8px 15px;
    }

}

/* NAVIGATION MODERN STYLE */

nav {
    display: flex;
    align-items: center;
    gap: 15px;
}


nav a {

    text-decoration: none;

    color: white;

    background: linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );

    padding: 10px 18px;

    border-radius: 12px;

    font-weight: 600;

    transition: 0.3s;

    box-shadow:
    0 4px 10px rgba(0,0,0,0.15);

}



nav a:hover {

    transform: translateY(-3px);

    box-shadow:
    0 8px 18px rgba(0,0,0,0.25);

}



/* USER AREA MODERN DESIGN */

#userArea {

    display:flex;

    align-items:center;

    gap:10px;

    margin-left:15px;

}


/* PROFILE BUTTON */

#userArea a {

    #userArea {

    display:flex;

    align-items:center;

    gap:6px;

    margin-left:8px;

}

    height:42px;

    padding:0 18px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #21faef,
        #1938e9
    );

    color:white;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    box-shadow:
    0 4px 12px rgba(241, 144, 99, 0.3);

    transition:.25s;

}


#userArea a:hover {

    transform:translateY(-2px);

}



/* LOGOUT BUTTON */

#userArea button {

    height:42px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #170566,
        #f97316
    );

    color:white;

    font-weight:600;

    font-size:15px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0 4px 12px rgba(239,68,68,.3);

    transition:.25s;

}


#userArea button:hover {

    transform:translateY(-2px);

    box-shadow:
    0 8px 18px rgba(239,68,68,.35);

}

/* MODERN LOGOUT BUTTON */

.logout-btn {

    height:40px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    border:none;

    border-radius:10px;

    background:#ef4444;

    color:white;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    box-shadow:0 4px 10px rgba(239,68,68,.25);

}


.logout-btn:hover {

    background:#dc2626;

    transform:translateY(-2px);

}

/* PROFILE NAV ALIGNMENT */

header nav {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

}


header nav a,
header nav button {

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    margin:0;

}

/* USER AVATAR */

.profile-btn {

    display:flex;

    align-items:center;

    gap:8px;

}


.avatar {

    width:28px;

    height:28px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

nav a {

    display:flex;

    align-items:center;

    gap:6px;

}

/* MODERN NAV MENU */


/* HOME */

.home-btn {

    background:linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    ) !important;

}


/* PROFILE */

.profile-btn {

    background:linear-gradient(
        135deg,
        #7c3aed,
        #c084fc
    ) !important;

}



/* LOGOUT */

.logout-btn {

    background:linear-gradient(
        135deg,
        #ef4444,
        #fb7185
    ) !important;

}




.home-btn,
.profile-btn,
.logout-btn {

    height:42px;

    padding:0 16px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    color:white !important;

    font-weight:600;

    text-decoration:none;

    border:none;

    cursor:pointer;

    transition:.25s;

    box-shadow:
    0 4px 12px rgba(0,0,0,.15);

}



.home-btn:hover,
.profile-btn:hover,
.logout-btn:hover {

    transform:translateY(-3px);

    box-shadow:
    0 8px 18px rgba(0,0,0,.25);

}

/* RESULT REPORT */

.report-footer{

    text-align:center;

}


.report-sign{

    margin-top:30px;

}


.signature-line{

    width:180px;

    height:1px;

    background:#555;

    margin:20px auto;

}

/* LGS GOALS */

.goal-item{

    background:#f8fafc;

    padding:15px;

    border-radius:15px;

    margin-bottom:12px;

    box-shadow:
    0 3px 8px rgba(0,0,0,.08);

}


.goal-item h3{

    margin:0 0 8px;

}

/* ==================================================
   TABLET (992px)
================================================== */

@media (max-width:992px){

    header{
        padding:18px 25px;
    }

    nav{
        gap:10px;
        flex-wrap:wrap;
    }

    nav a,
    .home-btn,
    .profile-btn,
    .logout-btn,
    #userArea a,
    #userArea button{
        padding:0 14px;
        font-size:14px;
        height:40px;
    }

    .avatar{
        width:26px;
        height:26px;
        font-size:16px;
    }

}

/* ==================================================
   TELEFON (768px)
================================================== */

@media (max-width:768px){

    header{
        flex-direction:column;
        align-items:center;
        gap:18px;
        padding:20px 15px;
    }

    header nav{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }

    nav{
        justify-content:center;
        width:100%;
    }

    nav a,
    .home-btn,
    .profile-btn,
    .logout-btn{
        width:170px;
        justify-content:center;
    }

    #userArea{
        width:100%;
        margin:0;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }

    #userArea a,
    #userArea button{
        width:170px;
        justify-content:center;
    }

    .avatar{
        width:24px;
        height:24px;
        font-size:15px;
    }

    .signature-line{
        width:130px;
    }

}

/* ==================================================
   KÜÇÜK TELEFON (480px)
================================================== */

@media (max-width:480px){

    nav a,
    .home-btn,
    .profile-btn,
    .logout-btn,
    #userArea a,
    #userArea button{
        width:100%;
        max-width:260px;
        font-size:14px;
    }

    .goal-item{
        padding:12px;
    }

    .goal-item h3{
        font-size:17px;
    }

    .goal-item p{
        font-size:14px;
    }

    .report-sign{
        font-size:14px;
    }

}

/* HOME HERO LGS STYLE */


.hero{

padding:40px 20px;

}


.hero-content{

text-align:center;

}


.hero-content h1{

font-size:36px;

color:#1e3a8a;

}


.hero-content p{

font-size:18px;

color:#475569;

}



.hero-info{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

width:100%;

}



.info-box{

background:white;

width:220px;

padding:20px;

border-radius:18px;

box-shadow:
0 8px 20px rgba(0,0,0,.12);

transition:.3s;

}



.info-box:hover{

transform:translateY(-5px);

}



.info-box h3{

margin-bottom:10px;

}

.info-box {
    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
   TABLET (992px)
================================================== */

@media (max-width:992px){

    .hero{
        padding:35px 20px;
    }

    .hero-content h1{
        font-size:32px;
    }

    .hero-content p{
        font-size:17px;
    }

    .hero-info{
        gap:18px;
    }

    .info-box{
        width:200px;
        padding:18px;
    }

}

/* ==================================================
   TELEFON (768px)
================================================== */

@media (max-width:768px){

    .hero{
        padding:30px 15px;
    }

    .hero-content h1{
        font-size:28px;
        line-height:1.3;
    }

    .hero-content p{
        font-size:16px;
        line-height:1.6;
    }

    .hero-info{
        flex-direction:column;
        gap:15px;
        margin-top:25px;
    }

    .info-box{
        width:100%;
        max-width:320px;
        padding:18px;
    }

    .info-box h3{
        font-size:20px;
    }

    .info-box p{
        font-size:15px;
    }

}

/* ==================================================
   KÜÇK TELEFON (480px)
================================================== */

@media (max-width:480px){

    .hero-content h1{
        font-size:24px;
    }

    .hero-content p{
        font-size:15px;
    }

    .info-box{
        max-width:100%;
        padding:16px;
    }

    .info-box h3{
        font-size:18px;
    }

    .info-box p{
        font-size:14px;
    }

}

/* UNIT CARDS */


.unit-card{

background:white;

padding:25px;

border-radius:22px;

text-align:center;

box-shadow:
0 8px 20px rgba(0,0,0,.12);

transition:.3s;

}



.unit-card:hover{

transform:translateY(-6px);

}



.unit-icon{

font-size:45px;

margin-bottom:10px;

}



.unit-card h2{

color:#1e3a8a;

margin:5px;

}



.unit-card h3{

color:#475569;

}




.mini-progress{

height:10px;

background:#e2e8f0;

border-radius:20px;

overflow:hidden;

margin:15px 0;

}



.mini-progress-fill{

width:0%;

height:100%;

background:#2563eb;

font-size:0;

}

/* Lesson Page */

.lesson-page {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    display: block !important;
}


.lesson-page h1 {
    text-align: center;
    color: #1e3a8a;
    margin-bottom: 10px;
}


.lesson-page > p {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}



/* Lesson Boxes */

.lesson-box {

    background: white;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 20px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.08);

}



.lesson-box h2 {

    color: #2563eb;
    margin-bottom: 15px;

}



/* Vocabulary Cards */

.word-card {

    display: inline-block;
    width: 180px;

    background: #eff6ff;

    padding: 15px;

    margin: 10px;

    border-radius: 15px;

    text-align: center;

    transition: 0.3s;

}

.word-card{

    min-height:300px;

    padding:25px 15px;

}

.word-card:hover {

    transform: translateY(-5px);

    background: #dbeafe;

}



.word-card h3 {

    color:#1d4ed8;

    margin-bottom:8px;

}

@media(max-width:1200px){

    .vocabulary-container{

        grid-template-columns:repeat(4,1fr);

    }

}


@media(max-width:900px){

    .vocabulary-container{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:600px){

    .vocabulary-container{

        grid-template-columns:1fr;

    }

}


/* Questions */

.question {

    background:#f8fafc;

    padding:15px;

    border-radius:15px;

    margin-bottom:15px;

}



.question p {

    margin:8px;

}

.profile-box {
    text-align:center;
}


.profile-icon {
    font-size:70px;
}


.progress-bar {

    width:100%;
    height:25px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

}


.progress-fill {

    width:0%;

    height:100%;

    background:#2563eb;

    color:white;

    text-align:center;

    line-height:25px;

}



.status-card {

    display:flex;

    justify-content:space-between;

    background:#f8fafc;

    padding:15px;

    margin:10px 0;

    border-radius:12px;

}


.status-card span {

    color:#64748b;

}

/* Units Page Cards Fix */

.features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
}


.features .card {

    background: #ffffff;

    border-radius: 18px;

    padding: 15px 10px;

    height: 190px;

    text-align: center;

    box-shadow: 0 6px 18px rgba(0,0,0,0.12);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}


.features .unit-icon {

    font-size: 32px;

    margin-bottom: 8px;

}


.features .card h2 {

    font-size: 17px;

    margin: 5px;

}


.features .card h3 {

    font-size: 14px;

    margin: 5px;

}


.features .start-btn {

     text-decoration: none;

    background: #2563eb;
    color: white;

    width: 100px;
    height: 34px;

    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 600;

    margin-top: 5px;
}

/* ===================================
   RESPONSIVE - LESSON & UNIT PAGES
=================================== */

@media (max-width:1024px){

    /* Unit Cards */
    .features{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }

    .features .card{
        width:100%;
        height:auto;
        min-height:190px;
    }

    /* Lesson */
    .lesson-page{
        width:95%;
        padding:15px;
    }

    .lesson-box{
        padding:20px;
    }

    /* Vocabulary */
    .vocabulary-container{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .word-card{
        width:100%;
        min-height:auto;
    }

    /* Status */
    .status-card{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

}

@media (max-width:768px){

    .features{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        padding:15px;
    }

    .features .card{
        height:auto;
        padding:15px;
    }

    .features .card h2{
        font-size:16px;
    }

    .features .card h3{
        font-size:14px;
    }

    .features .start-btn{
        width:90px;
        height:32px;
        font-size:12px;
    }

    .lesson-page{
        width:100%;
        padding:15px;
    }

    .lesson-box{
        padding:18px;
    }

    .lesson-box h2{
        font-size:22px;
    }

    .word-card{
        display:block;
        width:100%;
        margin:10px 0;
        min-height:auto;
    }

    .question{
        padding:12px;
    }

    .profile-icon{
        font-size:60px;
    }

}

@media (max-width:480px){

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

    .lesson-page h1{
        font-size:28px;
    }

    .lesson-page>p{
        font-size:15px;
    }

    .lesson-box{
        padding:15px;
    }

    .lesson-box h2{
        font-size:20px;
    }

    .word-card{
        padding:15px;
    }

    .word-card h3{
        font-size:18px;
    }

    .question{
        padding:10px;
    }

    .status-card{
        padding:12px;
    }

    .progress-bar{
        height:20px;
    }

}

/* Units 5 column layout */

.lesson-page .features {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px;
    width: 100%;
}


.lesson-page .features .card {
    width: auto;
}

#dailyWords{

    display:grid;

    gap:15px;

    margin-top:20px;

}

.daily-word-card{

    background:white;

    border-radius:15px;

    padding:15px;

    text-align:center;

    box-shadow:0 6px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.daily-word-card:hover{

    transform:translateY(-5px);

}

.daily-unit{

    display:inline-block;

    background:#2563eb;

    color:white;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    margin-bottom:10px;

    font-weight:bold;

}

.daily-word-card h3{

    margin:10px 0 5px;

}

.daily-word-card p{

    color:#555;

}

.daily-word-card {

    padding: 12px;
    border-radius: 12px;
    min-height: 90px;

}


.daily-word-card h3 {

    font-size: 18px;
    margin: 5px 0;

}


.daily-word-card p {

    font-size: 14px;
    margin: 5px 0;

}


.daily-word-card button {

    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;

}

/* Daily LGS Vocabulary - Mobile Fix */

@media (max-width:768px){

    .daily-word-card{
        width:100%;
        max-width:100%;
        box-sizing:border-box;

        padding:18px;
        margin:12px 0;

        overflow:hidden;
        word-wrap:break-word;
        overflow-wrap:break-word;

        border-radius:20px;
    }


    .daily-word-card h3{
        font-size:20px;
        word-break:break-word;
    }


    .daily-word-card p{
        font-size:14px;
        line-height:1.5;
        word-break:break-word;
    }


    .daily-word-card button{
        width:100%;
        max-width:100%;
        box-sizing:border-box;

        padding:12px;
        margin-top:10px;
    }


    .daily-unit{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }

}

.start-btn {

    padding: 12px 25px;
    font-size: 16px;
    min-width: 120px;

}

.card {

    display: flex;
    flex-direction: column;

}


.card a {

    margin-top: auto;

}


.start-btn {

    padding: 12px 25px;
    font-size: 16px;
    min-width: 120px;

}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-top:40px;
}

.card{
    background:#fff;
    border-radius:20px;
    padding:30px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.card-icon{
    font-size:55px;
    margin-bottom:15px;
}

.card h2{
    margin-bottom:10px;
    color:#1f3c88;
}

.card p{
    color:#666;
    margin-bottom:25px;
}

.card-btn{
    display:inline-block;
    padding:12px 28px;
    border-radius:30px;
    background:#2563eb;
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.card-btn:hover{
    background:#1d4ed8;
}

.unit-header{
    text-align:center;
    padding:50px 20px;
}

.unit-header h1{
    font-size:42px;
    color:#1f3c88;
}

.unit-header p{
    color:#666;
    font-size:18px;
    margin-top:10px;
}

.unit-container{
    padding:40px 20px;
    text-align:center;
}


.unit-title{
    font-size:40px;
    color:#1e3a8a;
}


.unit-description{
    color:#64748b;
    font-size:18px;
    margin-bottom:40px;
}



.unit-cards{

    display:grid;

    grid-template-columns:repeat(5, 1fr);

    gap:20px;

}


@media(max-width:1000px){

    .unit-cards{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:700px){

    .unit-cards{
        grid-template-columns:1fr;
    }

}

.unit-card{

    background:white;

    padding:30px 20px;

    border-radius:25px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}



.unit-card:hover{

    transform:translateY(-10px);

}



.icon-box{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:40px;

}



.vocabulary{
    border:3px solid #22c55e;
}

.grammar{
    border:3px solid #8b5cf6;
}

.videos{
    border:3px solid #ef4444;
}

.notes{
    border:3px solid #f59e0b;
}

.games{
    border:3px solid #06b6d4;
}

.questions{
    border:3px solid #cedb0d;

}



.unit-card a{

    display:inline-block;

    margin-top:15px;

    padding:10px 25px;

    border-radius:30px;

    background:#2563eb;

    color:white;

    text-decoration:none;

}

/* ===================================
   RESPONSIVE - UNITS & DAILY WORDS
=================================== */

@media (max-width:1024px){

    /* Lesson Features */
    .lesson-page .features{
        grid-template-columns:repeat(3,1fr) !important;
        gap:18px;
    }

    /* Genel Features */
    .features{
        grid-template-columns:repeat(2,1fr);
    }

    /* Daily Words */
    #dailyWords{
        grid-template-columns:repeat(3,1fr);
        gap:15px;
    }

    .daily-word-card{
        min-height:auto;
    }

    /* Unit Cards */
    .unit-cards{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    .unit-header h1{
        font-size:36px;
    }

    .unit-title{
        font-size:34px;
    }

}

@media (max-width:768px){

    .lesson-page .features{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .features{
        grid-template-columns:1fr;
        gap:18px;
    }

    .card{
        padding:22px;
    }

    .card-icon{
        font-size:45px;
    }

    .card h2{
        font-size:20px;
    }

    .card p{
        font-size:15px;
    }

    .card-btn{
        width:100%;
        padding:12px;
    }

    /* Mobil */
@media (max-width:768px){

    #dailyWords{
        display:flex;
        overflow-x:auto;
        gap:18px;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
        padding-bottom:10px;
    }

    #dailyWords::-webkit-scrollbar{
        display:none;
    }

    #dailyWords > *{
        flex:0 0 92%;
        scroll-snap-align:center;
    }

}

    .unit-header{
        padding:35px 15px;
    }

    .unit-header h1{
        font-size:30px;
    }

    .unit-header p{
        font-size:16px;
    }

    .unit-title{
        font-size:30px;
    }

    .unit-description{
        font-size:16px;
    }

    .unit-cards{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .unit-card{
        padding:20px 15px;
    }

    .icon-box{
        width:65px;
        height:65px;
        font-size:32px;
    }

    .unit-card a{
        width:100%;
        box-sizing:border-box;
    }

}

@media (max-width:480px){

    .lesson-page .features{
        grid-template-columns:1fr !important;
    }

    #dailyWords{
        grid-template-columns:1fr;
    }

    .unit-cards{
        grid-template-columns:1fr;
    }

    .unit-header h1{
        font-size:26px;
    }

    .unit-title{
        font-size:26px;
    }

    .unit-description{
        font-size:15px;
    }

    .card,
    .unit-card,
    .daily-word-card{
        width:100%;
    }

    .start-btn,
    .card-btn,
    .unit-card a{
        width:100%;
        min-width:unset;
        padding:12px;
    }

}

/* =========================
   UNIT PAGE DESIGN
========================= */


.lesson-page{
    padding:40px 20px;
    text-align:center;
}


.lesson-page h1{
    font-size:38px;
    color:#1e3a8a;
}


.lesson-page p{
    color:#64748b;
    font-size:18px;
}



.unit-container{

    max-width:1200px;

    margin:40px auto;

}



.unit-description{

    margin-bottom:40px;

    font-size:18px;

}



/* CARD GRID */

.unit-cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:30px;

}



/* CARD */

.unit-card{

    background:white;

    border-radius:25px;

    padding:30px 20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);

    transition:0.3s;

}



.unit-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.15);

}



/* ICON */

.icon-box{

    width:90px;

    height:90px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:45px;

}

.icon-box{
    width:85px;
    height:85px;
    font-size:42px;
    margin:auto;
}


/* ICON COLORS */


.vocabulary{

    background:#dcfce7;

}


.grammar{

    background:#ede9fe;

}


.videos{

    background:#fee2e2;

}


.notes{

    background:#fef3c7;

}


.games{

    background:#cffafe;

}



/* TEXT */


.unit-card h2{

    color:#1e293b;

    margin-bottom:10px;

}



.unit-card p{

    min-height:50px;

    color:#64748b;

}



/* BUTTON */


.unit-card a{

    display:inline-block;

    margin-top:15px;

    padding:12px 28px;

    background:#2563eb;

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.unit-card a:hover{

    background:#1d4ed8;

}

/* UNIT BANNER */


.unit-banner{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );

    border-radius:30px;

    padding:50px 30px;

    color:white;

    margin-bottom:40px;

}


.banner-content h1{

    color:white;

    font-size:45px;

}


.banner-content p{

    color:white;

    opacity:.9;

}

/* ===================================
   RESPONSIVE - UNIT PAGE DESIGN
=================================== */

@media (max-width:1024px){

    .lesson-page{
        padding:35px 20px;
    }

    .lesson-page h1{
        font-size:34px;
    }

    .lesson-page p{
        font-size:17px;
    }

    .unit-container{
        width:95%;
    }

    .unit-cards{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .unit-banner{
        padding:40px 25px;
    }

    .banner-content h1{
        font-size:38px;
    }

}

@media (max-width:768px){

    .lesson-page{
        padding:30px 15px;
    }

    .lesson-page h1{
        font-size:30px;
    }

    .lesson-page p{
        font-size:16px;
    }

    .unit-description{
        font-size:16px;
        margin-bottom:30px;
    }

    .unit-cards{
        grid-template-columns:1fr;
        gap:18px;
    }

    .unit-card{
        padding:22px 18px;
    }

    .icon-box{
        width:75px;
        height:75px;
        font-size:38px;
    }

    .unit-card h2{
        font-size:22px;
    }

    .unit-card p{
        min-height:auto;
        font-size:15px;
    }

    .unit-card a{
        width:100%;
        box-sizing:border-box;
        padding:12px;
    }

    .unit-banner{
        border-radius:22px;
        padding:35px 20px;
    }

    .banner-content h1{
        font-size:32px;
    }

    .banner-content p{
        font-size:16px;
    }

}

@media (max-width:480px){

    .lesson-page h1{
        font-size:26px;
    }

    .lesson-page p{
        font-size:15px;
    }

    .unit-container{
        width:100%;
    }

    .unit-card{
        padding:18px 15px;
    }

    .icon-box{
        width:65px;
        height:65px;
        font-size:32px;
    }

    .unit-card h2{
        font-size:20px;
    }

    .unit-card p{
        font-size:14px;
    }

    .unit-banner{
        padding:28px 15px;
    }

    .banner-content h1{
        font-size:26px;
    }

    .banner-content p{
        font-size:15px;
    }

}

/* PROGRESS */


.progress-area{

    max-width:700px;

    margin:30px auto;

}


.progress-title{

    font-weight:bold;

    margin-bottom:10px;

}


.progress-line{

    height:18px;

    background:#e2e8f0;

    border-radius:20px;

    overflow:hidden;

}


.progress-value{

    width:0%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    #22c55e,
    #16a34a
    );

}



/* CARD ANIMATION */


.unit-card{

    animation:

    fadeUp .6s ease;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

.unit-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: center;
}


.unit-card{
    width:220px;
    min-height:280px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.unit-card{

    height:300px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.unit-card h2{

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.unit-card p{

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.unit-card a{

    margin-top:auto;

}

/* ===================================
   RESPONSIVE - UNIT PROGRESS CARDS
=================================== */

@media (max-width:1024px){

    .progress-area{
        width:95%;
    }

    .unit-cards{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .unit-card{
        width:100%;
        min-height:280px;
        height:auto;
    }

}

@media (max-width:768px){

    .progress-title{
        font-size:16px;
    }

    .progress-line{
        height:16px;
    }

    .unit-cards{
        grid-template-columns:1fr;
        gap:18px;
    }

    .unit-card{
        width:100%;
        min-height:auto;
        height:auto;
        padding:20px;
    }

    .unit-card h2{
        height:auto;
        font-size:22px;
        margin-bottom:10px;
    }

    .unit-card p{
        height:auto;
        font-size:15px;
        margin-bottom:20px;
    }

    .unit-card a{
        width:100%;
        text-align:center;
    }

}

@media (max-width:480px){

    .progress-area{
        width:100%;
    }

    .progress-title{
        font-size:15px;
    }

    .progress-line{
        height:14px;
    }

    .unit-card{
        padding:18px 15px;
    }

    .unit-card h2{
        font-size:20px;
    }

    .unit-card p{
        font-size:14px;
    }

}

/* PREMIUM UNIT MENU */


.unit-nav{

    max-width:1150px;

    margin:35px auto;

    padding:12px;

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;


    background:

    rgba(255,255,255,0.75);

    backdrop-filter:blur(12px);


    border-radius:25px;


    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}



.unit-nav a{

    display:flex;

    align-items:center;

    gap:8px;


    padding:13px 22px;


    border-radius:18px;


    text-decoration:none;


    color:#475569;


    font-weight:700;


    background:white;


    border:1px solid #e2e8f0;


    transition:.35s;

}



/* ikon */

.unit-nav span{

    font-size:20px;

}



/* hover */

.unit-nav a:hover{

    color:#2563eb;


    transform:

    translateY(-5px);


    box-shadow:

    0 10px 20px rgba(37,99,235,.15);

}



/* aktif sekme */


.unit-nav a.active{


    color:white;


    background:

    linear-gradient(

    135deg,

    #2563eb,

    #7c3aed

    );


    border:none;


    box-shadow:

    0 10px 25px rgba(37,99,235,.35);

}

.unit-tabs{

    display:flex;

    justify-content:center;

    gap:8px;

    margin:25px auto;

    padding:8px;

    background:#f8fafc;

    border-radius:20px;

    max-width:1000px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.unit-tabs a{

    padding:12px 18px;

    border-radius:15px;

    text-decoration:none;

    color:#475569;

    font-weight:600;

    transition:.3s;

}



.unit-tabs a:hover{

    background:white;

    color:#2563eb;

}



.unit-tabs .active{

    background:#2563eb;

    color:white;

    box-shadow:0 5px 15px rgba(37,99,235,.3);

}

/* ===================================
   RESPONSIVE - PREMIUM UNIT MENU
=================================== */

@media (max-width:1024px){

    .unit-nav{
        max-width:95%;
        gap:8px;
        padding:10px;
    }

    .unit-nav a{
        padding:12px 18px;
        font-size:15px;
    }

    .unit-tabs{
        max-width:95%;
        flex-wrap:wrap;
    }

}

@media (max-width:768px){

    .unit-nav{
        gap:10px;
        padding:12px;
    }

    .unit-nav a{
        width:calc(50% - 10px);
        justify-content:center;
        padding:12px;
        font-size:14px;
        box-sizing:border-box;
    }

    .unit-nav span{
        font-size:18px;
    }

    .unit-tabs{
        gap:8px;
        padding:10px;
        flex-wrap:wrap;
    }

    .unit-tabs a{
        flex:1 1 calc(50% - 8px);
        text-align:center;
        padding:12px;
        font-size:14px;
        box-sizing:border-box;
    }

}

@media (max-width:480px){

    .unit-nav{
        flex-direction:column;
        align-items:stretch;
    }

    .unit-nav a{
        width:100%;
        justify-content:center;
        font-size:14px;
    }

    .unit-tabs{
        flex-direction:column;
    }

    .unit-tabs a{
        width:100%;
        flex:none;
        padding:12px;
    }

}

/* ==========================
   VOCABULARY PAGE
========================== */


.vocabulary-container{

    width:100%;

    max-width:1400px;

    margin:40px auto;

    padding:20px;

    display:grid;

    gap:20px;

}



.word-card{

    background:white;

    border-radius:25px;

    padding:30px 25px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

    border-top:6px solid #2563eb;

}



.word-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.15);

}



.word-icon{

    width:80px;

    height:80px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#dbeafe;

    font-size:40px;

}



.word-card h2{

    color:#1e3a8a;

    margin-top:20px;

}



.meaning{

    font-size:20px;

    font-weight:bold;

    color:#16a34a;

}



.word-card p{

    color:#64748b;

    line-height:1.6;

}



.word-card button{

    margin-top:15px;

    padding:10px 25px;

    border:none;

    border-radius:25px;

    background:#2563eb;

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



.word-card button:hover{

    background:#1d4ed8;

}



/* TABLET */

@media(max-width:900px){

    .vocabulary-container{

        grid-template-columns:repeat(2,1fr);

    }

}


/* MOBILE */

@media(max-width:600px){

    .vocabulary-container{

        grid-template-columns:1fr;

    }

}

/* =========================
   VOCABULARY PAGE FINAL
========================= */


.page-header{
    text-align:center;
    padding:40px 20px 20px;
}


.page-header h1{
    font-size:38px;
    color:#1e3a8a;
    margin-bottom:10px;
}


.page-header p{
    color:#64748b;
}



/* Vocabulary Cards Area */

.vocabulary-container{

    max-width:1200px;

    margin:40px auto;

    padding:20px;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:30px;

}



/* Word Card */

.word-card{

    background:white;

    border-radius:25px;

    padding:35px 25px;

    text-align:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}


.word-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);

}



/* Icon */

.word-icon{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#dbeafe;

    font-size:45px;

}



/* Word */

.word-card h2{

    margin-top:20px;

    color:#1e3a8a;

}



.meaning{

    color:#16a34a;

    font-size:20px;

    font-weight:bold;

}



.word-card p{

    color:#64748b;

}



/* Listen Button */

.listen-btn{

    background:#2563eb;

    color:white;

    border:none;

    padding:12px 30px;

    border-radius:25px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}


.listen-btn:hover{

    background:#1d4ed8;

    transform:scale(1.05);

}

.word-card button{

    margin-top:15px;

    padding:12px 30px;

    border:none;

    border-radius:25px;

    background:#2563eb;

    color:white;

    font-weight:bold;

    cursor:pointer;

}



.word-card button:hover{

    background:#1d4ed8;

}



/* Responsive */

@media(max-width:900px){

    .vocabulary-container{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:600px){

    .vocabulary-container{

        grid-template-columns:1fr;

    }

}


.vocab-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:35px 50px;

}



.title-area h1{

    color:#1e3a8a;

    font-size:38px;

    margin:0;

}


.title-area p{

    color:#64748b;

    margin-top:10px;

}



/* Sağdaki menü */

.vocab-header .unit-tabs{

    margin:0;

    max-width:none;

    box-shadow:none;

    background:transparent;

    padding:0;

    justify-content:flex-end;

}



.vocab-header .unit-tabs a{

    padding:10px 15px;

    font-size:14px;

}




.word-card{

    width:auto !important;

    min-width:0;

}


.learn-btn{

    margin-top:10px;

    padding:10px 20px;

    border:none;

    border-radius:20px;

    background:#22c55e;

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}


.learn-btn:hover{

    background:#16a34a;

}



.word-card.learned{

    background:#dcfce7;

    border:2px solid #22c55e;

}

/* VOCABULARY CARD CLEAN FIX */

.vocabulary-container{

    display:grid;

    grid-template-columns:repeat(6, 1fr);

    gap:20px;

    width:95%;

    max-width:1400px;

    margin:40px auto;

}


.word-card{

    background:white;

    border-radius:20px;

    padding:20px 15px;

    min-height:160px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}



.word-card h2{

    margin:0 0 10px 0;

    font-size:20px;

    color:#1e3a8a;

}



.word-card .meaning{

    margin:0 0 15px 0;

    color:#16a34a;

    font-weight:bold;

}



.listen-btn,
.learn-btn{

    width:120px;

    margin-top:8px;

}

/* Vocabulary Compact Cards */

.vocabulary-container{

    width:95%;

    max-width:1600px;

    margin:25px auto;

    display:grid;

    grid-template-columns:repeat(10, 1fr);

    gap:12px;

}


.word-card{

    background:white;

    border-radius:15px;

    padding:15px 8px;

    min-height:120px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

}


.word-card:hover{

    transform:translateY(-5px);

}



.word-card h2{

    font-size:15px;

    margin:0 0 8px;

    color:#1e3a8a;

}


.word-card .meaning{

    font-size:13px;

    margin:0 0 10px;

    color:#16a34a;

}



.listen-btn{

    font-size:11px;

    padding:6px 10px;

    border-radius:15px;

}
@media(max-width:1200px){

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

}


@media(max-width:700px){

.vocabulary-container{
    grid-template-columns:repeat(2,1fr);
}

}


@media(max-width:400px){

.vocabulary-container{
    grid-template-columns:1fr;
}

}

/* ===================================
   RESPONSIVE - VOCABULARY PAGE
=================================== */

@media (max-width:1200px){

    .page-header h1{
        font-size:34px;
    }

    .vocab-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:30px 20px;
        gap:20px;
    }

    .vocab-header .unit-tabs{
        justify-content:center;
        flex-wrap:wrap;
    }

    .vocabulary-container{
        grid-template-columns:repeat(4,1fr);
        gap:16px;
    }

}

@media (max-width:992px){

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

    .word-card{
        min-height:150px;
        padding:18px 12px;
    }

    .word-card h2{
        font-size:16px;
    }

    .meaning{
        font-size:14px;
    }

}

@media (max-width:768px){

    .page-header{
        padding:30px 15px;
    }

    .page-header h1{
        font-size:30px;
    }

    .page-header p{
        font-size:15px;
    }

    .title-area h1{
        font-size:30px;
    }

    .title-area p{
        font-size:15px;
    }

    .vocab-header{
        padding:20px 15px;
    }

    .vocabulary-container{
        width:95%;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .word-card{
        min-height:140px;
        padding:16px 10px;
    }

    .word-icon{
        width:65px;
        height:65px;
        font-size:32px;
    }

    .word-card h2{
        font-size:15px;
    }

    .word-card .meaning{
        font-size:13px;
    }

    .listen-btn,
    .learn-btn{
        width:50%;
        font-size:12px;
        padding:10px;
    }

}

@media (max-width:480px){

    .page-header h1{
        font-size:26px;
    }

    .title-area h1{
        font-size:26px;
    }

    .vocabulary-container{
        grid-template-columns:1fr;
    }

    .word-card{
        min-height:auto;
        padding:18px 15px;
    }

    .word-icon{
        width:55px;
        height:55px;
        font-size:28px;
    }

    .word-card h2{
        font-size:18px;
    }

    .word-card .meaning{
        font-size:15px;
    }

    .listen-btn,
    .learn-btn{
        width:100%;
    }

    .vocab-header .unit-tabs{
        flex-direction:column;
        width:100%;
    }

    .vocab-header .unit-tabs a{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

}

/* VOCABULARY 10 CARD BIGGER SIZE */

.vocabulary-container {

    display:grid !important;

    grid-template-columns:repeat(10, 135px) !important;

    gap:12px !important;

    justify-content:center !important;

}


.word-card {

    width:135px !important;

    height:165px !important;

    padding:15px 10px !important;

    box-sizing:border-box !important;

}


.word-card h2 {

    font-size:15px !important;

    line-height:1.2;

    margin-bottom:10px;

}


.word-card .meaning {

    font-size:13px !important;

    line-height:1.3;

    margin-bottom:12px;

}


.listen-btn {

    font-size:12px !important;

    padding:7px 10px !important;

}


/* FIXED SMALL VOCABULARY CARDS */

.vocabulary-container{

    display:grid;

    grid-template-columns:repeat(10, 90px);

    justify-content:center;

    gap:10px;

}


.word-card{

    width:90px;

    min-width:90px;

    height:120px;

    padding:10px 5px;

    box-sizing:border-box;

    overflow:hidden;

}



.word-card h2{

    font-size:12px;

    line-height:1.2;

    height:30px;

    overflow:hidden;

    word-break:break-word;

    overflow-wrap:break-word;
}



.word-card .meaning{

    font-size:11px;

    height:28px;

    overflow:hidden;

}



.listen-btn{

    font-size:10px;

    padding:4px 6px;

}

/* ==========================================
   RESPONSIVE - VOCABULARY PAGE
========================================== */

/* Tablet */
@media (max-width: 1200px){

    .vocabulary-container{
        grid-template-columns:repeat(5, 1fr) !important;
        gap:15px;
        width:96%;
    }

    .word-card{
        width:auto !important;
        min-width:0 !important;
        height:150px !important;
        padding:12px;
    }

    .word-card h2{
        font-size:14px !important;
    }

    .word-card .meaning{
        font-size:12px !important;
    }

    .listen-btn{
        width:100%;
        font-size:11px !important;
    }

}


/* Büyük Telefon */
@media (max-width: 768px){

    .vocabulary-container{
        grid-template-columns:repeat(2,1fr) !important;
        gap:15px;
    }

    .word-card{
        width:auto !important;
        height:150px !important;
        padding:15px 10px;
    }

    .word-card h2{
        font-size:15px !important;
    }

    .word-card .meaning{
        font-size:13px !important;
    }

    .listen-btn{
        width:100%;
        font-size:12px !important;
        padding:8px;
    }

}


/* Küçük Telefon */
@media (max-width:480px){

    .vocabulary-container{
        grid-template-columns:1fr !important;
        gap:15px;
        width:92%;
    }

    .word-card{
        width:100% !important;
        height:auto !important;
        min-height:150px;
    }

    .word-card h2{
        font-size:18px !important;
    }

    .word-card .meaning{
        font-size:15px !important;
    }

    .listen-btn{
        width:100%;
        font-size:14px !important;
        padding:10px;
    }

}

/* CATEGORY COLORS */


/* 📚 Friendship Basics */

.basic-category .word-card{

    border-top:5px solid #3b82f6;

}


/* 😊 Personality */

.personality-category .word-card{

    border-top:5px solid #22c55e;

}


/* 🎯 Friendship Actions */

.actions-category .word-card{

    border-top:5px solid #f97316;

}



.word-card{

    transition:.3s;

}


.word-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 25px rgba(0,0,0,.12);

}

/* UNITS CARDS BIGGER SIZE */

.units-container{

    display:grid;

    grid-template-columns:repeat(5, 1fr);

    gap:30px;

    width:90%;

    max-width:1400px;

    margin:50px auto;

}



.unit-card{

    min-height:260px;

    padding:30px 20px;

    border-radius:25px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.3s;

}


.unit-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}



.unit-card h2{

    font-size:24px;

    margin:15px 0;

}



.unit-card p{

    font-size:16px;

}

/* UNITS PAGE CARDS */

.unit-container{

    display:grid;

    grid-template-columns:repeat(5, 1fr);

    gap:30px;

    width:90%;

    max-width:1400px;

    margin:50px auto;

}


.unit-card{

    min-height:260px;

    padding:30px 20px;

    border-radius:25px;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.3s;

}


.unit-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}



.unit-card h2{

    font-size:24px;

    margin:15px 0;

}



.unit-card p{

    font-size:16px;

}

.grammar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin:30px 0;
}

.grammar-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
    border-left:6px solid #4f46e5;
}

.grammar-card:hover{
    transform:translateY(-6px);
}

.remember-box{
    background:#fff8dc;
    border-left:6px solid #f4b400;
    padding:20px;
    border-radius:15px;
    margin:25px 0;
}

.tip-box{
    background:#e8f5e9;
    border-left:6px solid #43a047;
    padding:20px;
    border-radius:15px;
    margin:25px 0;
}

.dialogue-box{

margin-top:30px;
background:#ecfdf5;
border-left:6px solid #22c55e;
padding:20px;
border-radius:15px;

}


.dialogue-box h3{

color:#16a34a;

}

.small-card{

padding:15px;
border-radius:15px;
}


.small-card h3{

font-size:18px;
margin-bottom:8px;

}


.small-card p{

font-size:14px;
margin:0;

}

.small-card{

min-height:120px;
max-width:220px;

}

.small-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;

}

.card {
    background: linear-gradient(145deg, #ffffff, #f1f5ff);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}


.card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background: #4f8cff;
    opacity: 0.1;
    border-radius: 50%;
    top: -40px;
    right: -40px;
}


.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);
}


.card h1 {
    color: #243b6b;
    font-size: 28px;
    margin-bottom: 25px;
    font-weight: 700;
}


.start-btn {
    background: linear-gradient(135deg, #4f8cff, #6a5cff);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}


.start-btn:hover {
    background: linear-gradient(135deg, #6a5cff, #4f8cff);
    transform: scale(1.08);
}

.highlight {
    color: #4f8cff;
    font-weight: bold;
}

.highlight {

    color: #323bc2;
    padding: 3px 6px;
    border-radius: 6px;
    font-weight: 700;
}

.offer-response-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 40px auto;
    position: relative;
}


/* Ortadaki ayırıcı çizgi */
.offer-response-container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #dbe4ff;
}



.accept {
    padding-right: 30px;
}


.refuse {
    padding-left: 30px;
}



.expression-list p {
    padding: 8px 0;
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    color: #444;
}

.expression-list p::first-line {
    font-weight: 500;
}

.offer-box .grammar-card {
    padding: 18px 15px;
    border-radius: 15px;
}


.offer-box .grammar-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
}


.offer-box .grammar-card p {
    font-size: 14px;
    line-height: 1.4;
    margin: 5px 0;
}

.offer-box .small-grid {
    gap: 15px;
}

.vocab-video {

    text-align:center;

    margin-top:40px;

}


.vocab-video img {

    width:350px;

    height:250px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.2);

}


.vocab-video h1 {

    font-size:55px;

    color:#2c3e50;

    margin:20px;

}


.vocab-video p {

    font-size:25px;

    color:#7f8c8d;

}


.vocab-video h2 {

    font-size:35px;

    color:#e67e22;

}

.vocab-video {

    animation: videoFade 1s;

}


.vocab-video h3 {

    color:#3498db;

    font-size:25px;

}


#video-sentence {

    font-size:24px;

    font-style:italic;

    color:#16a085;

}


#pauseButton {

    background:#3498db;

    color:white;

    border:none;

    padding:12px 30px;

    border-radius:20px;

    font-size:18px;

    cursor:pointer;

}


@keyframes videoFade {

from {

opacity:0;

transform:translateY(20px);

}

to {

opacity:1;

transform:translateY(0);

}

}

.real-video {

    text-align:center;

    margin:40px auto;

}


.real-video video {

    width:80%;

    max-width:900px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}

/* ==========================================
   RESPONSIVE - UNIT / GRAMMAR / VIDEO
========================================== */

/* Tablet */
@media (max-width:1024px){

    .units-container,
    .unit-container{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        width:95%;
    }

    .unit-card{
        min-height:220px;
        padding:25px 18px;
    }

    .unit-card h2{
        font-size:22px;
    }

    .grammar-grid{
        grid-template-columns:repeat(2,1fr);
    }

    }

/* Offer Expressions */
@media (max-width:768px){

    .offer-box .grammar-card{
        padding:16px 12px;
        border-radius:14px;
    }

    .offer-box .grammar-card h3{
        font-size:16px;
        margin-bottom:6px;
    }

    .offer-box .grammar-card p{
        font-size:13px;
        line-height:1.4;
    }

    .offer-box .small-grid{
        gap:12px;
    }

    .offer-response-container{
        grid-template-columns:1fr;
        gap:25px;
    }

    .offer-response-container::before{
        display:none;
    }

    .accept,
    .refuse{
        padding:0;
    }

    .real-video video{
        width:95%;
    }

    .vocab-video img{
        width:100%;
        max-width:420px;
        height:auto;
    }

}

/* Telefon */
@media (max-width:768px){

    .units-container,
    .unit-container{
        grid-template-columns:1fr;
        gap:18px;
    }

    .unit-card{
        min-height:auto;
        padding:20px 15px;
    }

    .unit-card h2{
        font-size:20px;
    }

    .unit-card p{
        font-size:15px;
    }

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

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

    .grammar-card,
    .remember-box,
    .tip-box,
    .dialogue-box{
        padding:16px;
    }

    .card{
        padding:25px 18px;
    }

    .card h1{
        font-size:24px;
    }

    .start-btn{
        width:100%;
        padding:12px;
    }

    .expression-list p{
        font-size:15px;
    }

    .vocab-video h1{
        font-size:34px;
    }

    .vocab-video h2{
        font-size:24px;
    }

    .vocab-video h3{
        font-size:20px;
    }

    .vocab-video p,
    #video-sentence{
        font-size:18px;
    }

    .vocab-video img{
        width:100%;
        height:auto;
    }

    #pauseButton{
        width:100%;
        font-size:16px;
        padding:12px;
    }

    .real-video video{
        width:100%;
    }

}


/* Küçük Telefon */
@media (max-width:480px){

    .unit-card{
        border-radius:18px;
    }

    .card{
        border-radius:18px;
    }

    .small-card{
        max-width:100%;
        min-height:auto;
    }

    .vocab-video h1{
        font-size:28px;
    }

    .vocab-video p{
        font-size:16px;
    }

    #video-sentence{
        font-size:16px;
    }

}

/* NOTES DESIGN */

.notes-section {

    max-width:900px;

    margin:40px auto;

    padding:20px;

}


.notes-section p {

    font-size:18px;

    line-height:1.8;

    color:#34495e;

}


.notes-box {

    background:#ffffff;

    padding:25px;

    margin-bottom:20px;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,0.12);

    border-left:6px solid #3498db;

}


.notes-box h2 {

    font-size:24px;

    color:#2c3e50;

}


.notes-box ul {

    padding-left:25px;

}


.notes-box li {

    font-size:17px;

    line-height:1.7;

    margin-bottom:8px;

}

/* UNIT NOTES DESIGN */

.notes-section {

    max-width:900px;

    margin:40px auto;

    padding:20px;

}


.notes-section > h2 {

    text-align:center;

    color:#2c3e50;

    font-size:28px;

    margin-bottom:5px;

}


.note-card {

    background:#ffffff;

    padding:25px 35px;

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,0.12);

    margin-top:25px;

    border-top:5px solid #3498db;

}


.note-card p {

    font-size:16px;

    line-height:1.6;

    color:#34495e;

    margin:15px 0;

}


.highlight {

    background:#fff3cd;

    color:#d35400;

    padding:3px 7px;

    border-radius:6px;

    font-weight:bold;

}


.note-card b {

    color:#3498db;

}

/* TWO LANGUAGE NOTES */

.note-line {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    padding:15px 0;

    border-bottom:1px solid #ecf0f1;

}


.english {

    font-size:17px;

    color:#2c3e50;

    font-weight:600;

}


.turkish {

    font-size:16px;

    color:#7f8c8d;

    padding-left:10px;

}


.note-line:last-child {

    border-bottom:none;

}


@media(max-width:700px){

.note-line {

    grid-template-columns:1fr;
    gap:10px;
}

.turkish {

    padding-left:0;

}

}

/* NOTES IMPROVEMENT */

.notes-section {
    max-width: 850px;
    margin: 40px auto;
}


.notes-section h2 {
    text-align: center;
    font-size: 26px;
    color: #2c3e50;
}


.note-card {

    background: #ffffff;

    padding: 25px 35px;

    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.12);

    border-left: 6px solid #3498db;

}


.note-card p {

    font-size: 16px;

    line-height: 1.7;

    color: #34495e;

    margin: 18px 0;

}


.note-card br {

    line-height: 2;

}


.highlight {

    background: #ffeaa7;

    color: #d35400;

    padding: 2px 6px;

    border-radius: 5px;

    font-weight: bold;

}

.games-section {

    max-width:1000px;

    margin:40px auto;

}


.game-card {

    background:white;

    padding:25px;

    border-radius:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    margin-bottom:30px;

}


.game-card h3 {

    text-align:center;

    color:#2c3e50;

}


.game-card iframe {

    border-radius:15px;

}

/* ==========================================
   RESPONSIVE - NOTES & GAMES
========================================== */

/* Tablet */
@media (max-width:1024px){

    .notes-section{
        width:95%;
        padding:15px;
    }

    .notes-box,
    .note-card{
        padding:22px;
    }

    .notes-box h2,
    .notes-section h2{
        font-size:24px;
    }

    .notes-box p,
    .note-card p,
    .notes-box li{
        font-size:16px;
    }

    .games-section{
        width:95%;
    }

}


/* Telefon */
@media (max-width:768px){

    .notes-section{
        width:94%;
        margin:30px auto;
        padding:10px;
    }

    .notes-box,
    .note-card{
        padding:18px;
        border-radius:16px;
    }

    .notes-box h2,
    .notes-section h2{
        font-size:22px;
    }

    .notes-box p,
    .note-card p{
        font-size:15px;
        line-height:1.7;
    }

    .notes-box li{
        font-size:15px;
    }

    .note-line{
        grid-template-columns:1fr;
        gap:10px;
    }

    .english{
        font-size:16px;
    }

    .turkish{
        font-size:15px;
        padding-left:0;
    }

    .game-card{
        padding:18px;
        border-radius:18px;
    }

    .game-card iframe{
        width:90%;
        height:250px;
    }

}


/* Küçük Telefon */
@media (max-width:480px){

    .notes-box,
    .note-card{
        padding:15px;
    }

    .notes-box h2,
    .notes-section h2{
        font-size:20px;
    }

    .notes-box p,
    .note-card p,
    .notes-box li,
    .english,
    .turkish{
        font-size:14px;
    }

    .game-card iframe{
        height:250px;
    }

}

/* GAMES GRID */

.games-container {

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:25px;

    margin-top:30px;

}


.game-card {

    background:white;

    padding:20px;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}


.game-card h3 {

    text-align:center;

    color:#2c3e50;

    font-size:20px;

    margin-bottom:15px;

}


.game-card iframe {

    width:100%;

    height:420px;

    border-radius:15px;

}


/* Tablet */

@media(max-width:900px){

    .games-container {

        grid-template-columns:repeat(2,1fr);

    }

}


/* Telefon */

@media(max-width:768px){

    .games-container {

        grid-template-columns:1fr;

    }

}

.games-container {

    display:grid;

    grid-template-columns:repeat(5, 1fr);

    gap:20px;

    width:100%;

    max-width:1600px;

    margin:0 auto;

}


.game-card {

    width:100%;

    padding:20px;

    box-sizing:border-box;

}


.game-card h3 {

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:16px;

    color:#2c3e50;

}


.game-card iframe {

    width:100%;

    height:420px;

    border:none;

    border-radius:15px;

}

.games-section {

    max-width:1600px;

    margin:40px auto;

}

/* MODERN GAME CARDS */


.game-card {

    background:linear-gradient(
        145deg,
        #ffffff,
        #f5f9ff
    );

    border:1px solid #e8eef7;

    transition:.3s ease;

}


.game-card:hover {

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}



.game-card h3 {

    background:#3498db;

    color:white;

    padding:12px;

    border-radius:15px;

    font-size:18px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:20px;

}



.game-card iframe {

    background:white;

}

/* ==========================================
   RESPONSIVE - GAMES PAGE
========================================== */

/* Büyük Tablet */
@media (max-width:1200px){

    .games-section{
        width:96%;
    }

    .games-container{
        grid-template-columns:repeat(3,1fr) !important;
        gap:18px;
    }

    .game-card iframe{
        height:340px;
    }

}


/* Tablet */
@media (max-width:992px){

    .games-container{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .game-card{
        padding:18px;
    }

    .game-card h3{
        font-size:17px;
    }

    .game-card iframe{
        height:320px;
    }

}


/* Telefon */
@media (max-width:768px){

    .games-section{
        width:85%;
        margin:30px auto;
    }

    .games-container{
        grid-template-columns:1fr !important;
        gap:10px;
    }

    .game-card{
        padding:16px;
        border-radius:15px;
    }

    .game-card h3{
        font-size:16px;
        padding:10px;
        margin-bottom:15px;
    }

    .game-card iframe{
        height:300px;
    }

}


/* Küçük Telefon */
@media (max-width:480px){

    .game-card{
        padding:14px;
    }

    .game-card h3{
        font-size:15px;
    }

    .game-card iframe{
        height:250px;
    }

}

.questions-section {

max-width:900px;

margin:40px auto;

text-align:center;

}


.question-card {

background:white;

padding:30px;

border-radius:25px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}


.question-card h3 {

color:#2c3e50;

line-height:1.6;

}


.question-card button {

display:block;

width:80%;

margin:15px auto;

padding:15px;

border:none;

border-radius:15px;

background:#3498db;

color:white;

font-size:18px;

cursor:pointer;

}


.question-card button:hover {

background:#2980b9;

}

.question-number{

color:#3498db;

font-weight:bold;

font-size:18px;

}


.question-card button{

transition:.3s;

}


.question-card button.correct{

background:#27ae60 !important;

}


.question-card button.wrong{

background:#e74c3c !important;

}


.result-box{

background:white;

padding:40px;

border-radius:25px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}

/* QUESTION MENU CARDS */


.question-cards {

    display:grid;

    grid-template-columns:repeat(3, 250px);

    gap:25px;

    justify-content:center;

    margin-top:40px;

    align-items:start;

    justify-items:center;

}

.question-card {

    background:white;

    padding:18px 12px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    height:auto;
    min-height:170px;

    box-sizing:border-box;

}



.question-card:hover {

transform:translateY(-8px);

}



.question-icon {

font-size:38px;

margin-bottom:10px;

}



.question-card h2{
    font-size:19px;
    margin-bottom:8px;

}

.question-card p{
    font-size:15px;
    line-height:1.5;
}
.question-card a,
.question-card button{
    padding:8px 16px;
    font-size:14px;
}



.question-card span {

display:block;

margin:8px;

color:#3498db;

font-weight:600;

font-size:14px;

}



.question-card a {

display:inline-block;

background:#3498db;

color:white;

padding:12px 25px;

border-radius:20px;

text-decoration:none;

}



.question-card a:hover {

background:#2980b9;

}



@media(max-width:900px){

.question-cards{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:768px){

.question-cards{

grid-template-columns:1fr;

}

}

/* ==========================================
   RESPONSIVE - QUESTIONS PAGE
========================================== */

/* Tablet */
@media (max-width:1024px){

    .questions-section{
        width:95%;
    }

    .question-cards{
        grid-template-columns:repeat(2,1fr) !important;
        gap:20px;
    }

    .question-card{
        width:100%;
        min-height:180px;
        padding:20px 15px;
    }

    .question-card h2{
        font-size:18px;
    }

    .question-card p{
        font-size:15px;
    }

    .question-card button,
    .question-card a{
        width:100%;
        box-sizing:border-box;
    }

}


/* Telefon */
@media (max-width:768px){

    .questions-section{
        width:94%;
        margin:30px auto;
    }

    .question-cards{
        grid-template-columns:1fr !important;
        gap:18px;
    }

    .question-card{
        width:100%;
        min-height:auto;
        padding:18px 15px;
    }

    .question-card h2{
        font-size:18px;
    }

    .question-card p{
        font-size:15px;
    }

    .question-card button,
    .question-card a{
        width:100%;
        padding:12px;
        font-size:15px;
    }

    .question-icon{
        font-size:34px;
    }

    .result-box{
        padding:25px 18px;
    }

}


/* Küçük Telefon */
@media (max-width:480px){

    .question-card{
        padding:15px;
        border-radius:16px;
    }

    .question-card h2{
        font-size:17px;
    }

    .question-card p{
        font-size:14px;
    }

    .question-card button,
    .question-card a{
        font-size:14px;
        padding:10px;
    }

    .question-number{
        font-size:16px;
    }

    .result-box{
        padding:20px 15px;
    }

}

/* LGS TEST TASARIM */

#quiz {

    max-width: 800px;

    margin: 30px auto;

}


#quiz h3 {

    background: white;

    padding: 25px;

    border-radius: 18px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);

    color:#2c3e50;

    font-size:20px;

    line-height:1.5;

}



.answer-btn {

    display:block;

    width:100%;

    margin:12px 0;

    padding:15px 20px;

    border:none;

    border-radius:15px;

    background:#f8fafc;

    color:#2c3e50;

    font-size:16px;

    cursor:pointer;

    transition:0.3s;

    border:2px solid #e2e8f0;

}



.answer-btn:hover {

    background:#eef6ff;

    color:#2c3e50;

    transform:translateY(-2px);

}



.answer-btn:hover {

    background:#3498db;

    color:white;

    transform:translateY(-3px);

}



.answer-btn.correct {

    background:#2ecc71 !important;

    color:white;

}



.answer-btn.wrong {

    background:#e74c3c !important;

    color:white;

}



#score {

    color:#3498db;

    font-weight:bold;

}

.result-box {

background:white;

padding:40px;

border-radius:25px;

text-align:center;

box-shadow:0 8px 25px rgba(0,0,0,0.15);

color:#2c3e50;

font-size:22px;

}

.question-text{
    font-size:18px;
    line-height:1.6;
    margin:20px 0;
}

.option{
    display:block;
    width:100%;
    background:#ffffff;
    color:#1e293b;
    border:2px solid #cbd5e1;
    padding:16px;
    margin:12px 0;
    border-radius:14px;
    cursor:pointer;
    font-size:16px;
    text-align:left;
    transition:.2s;
}

.option:hover{
    background:#eff6ff;
    border-color:#2563eb;
}

.option.selected{
    background:#dbeafe;
    border-color:#2563eb;
}

.card{
    background:white;
    padding:30px;
    margin-top:25px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.question-number{
    color:#2563eb;
    font-weight:bold;
    font-size:18px;
}

.explanation{
    display:none;
    margin-top:20px;
    padding:15px;
    background:#ecfdf5;
    border-left:5px solid #22c55e;
    border-radius:10px;
}

#quiz{
    width:100%;
}


.question-card{

    width:100%;
    min-height:auto;

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}


.question-title{

    font-size:22px;
    font-weight:bold;
    color:#2563eb;

    margin-bottom:20px;

}


.question-type{

    background:#ede9fe;

    display:inline-block;

    padding:8px 15px;

    border-radius:20px;

    margin-bottom:25px;

}


.question-text{

    font-size:20px;

    line-height:1.8;

    min-height:120px;

}


.answers{

    margin-top:30px;

}


.answer{

    width:100%;

    display:block;

    background:#f8fafc;

    border:2px solid #cbd5e1;

    padding:18px;

    margin:15px 0;

    border-radius:15px;

    font-size:17px;

    cursor:pointer;

}


.answer:hover{

    border-color:#2563eb;

    background:#eff6ff;

}


.answer span{

    display:inline-flex;

    width:35px;

    height:35px;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:white;

    border-radius:50%;

    margin-right:10px;

}


.selected{

    background:#dbeafe;

    border-color:#2563eb;

}


.explanation{

    display:none;

}

/* ==========================================
   RESPONSIVE - QUIZ / LGS TEST
========================================== */

/* Tablet */
@media (max-width:1024px){

    #quiz{
        width:95%;
        margin:25px auto;
    }

    .question-card{
        padding:28px 22px;
    }

    .question-title{
        font-size:20px;
    }

    .question-text{
        font-size:18px;
        min-height:auto;
    }

    .answer,
    .answer-btn,
    .option{
        font-size:16px;
        padding:16px;
    }

    .answer span{
        width:32px;
        height:32px;
        margin-right:8px;
    }

}


/* Telefon */
@media (max-width:768px){

    #quiz{
        width:94%;
        margin:20px auto;
    }

    #quiz h3{
        padding:18px;
        font-size:18px;
    }

    .question-card{
        padding:20px 16px;
        border-radius:18px;
    }

    .question-title{
        font-size:18px;
    }

    .question-type{
        font-size:13px;
        padding:6px 12px;
    }

    .question-number{
        font-size:16px;
    }

    .question-text{
        font-size:16px;
        line-height:1.6;
        min-height:auto;
    }

    .answer,
    .answer-btn,
    .option{
        padding:14px;
        font-size:15px;
    }

    .answer span{
        width:28px;
        height:28px;
        font-size:13px;
        margin-right:8px;
    }

    .card,
    .result-box{
        padding:20px 15px;
    }

    .result-box{
        font-size:18px;
    }

}


/* Küçük Telefon */
@media (max-width:480px){

    #quiz{
        width:92%;
    }

    .question-card{
        padding:15px;
    }

    .question-title{
        font-size:17px;
    }

    .question-text{
        font-size:15px;
    }

    .answer,
    .answer-btn,
    .option{
        font-size:14px;
        padding:12px;
    }

    .answer span{
        width:24px;
        height:24px;
        font-size:12px;
    }

    .result-box{
        padding:15px;
        font-size:16px;
    }

}

/* ===== MODERN LGS QUIZ DESIGN ===== */

body{
    background:#f8fafc;
}

#quiz{
    max-width:850px;
    margin:20px auto;
}

.question-card{
    width:100%;
    padding:24px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(15,23,42,.08);
}

.question-title{
    margin-bottom:12px;
    font-size:18px;
    font-weight:700;
    color:#2563eb;
}

.question-type{
    display:inline-block;
    margin-bottom:15px;
    padding:6px 12px;
    border-radius:20px;
    background:#f1f5f9;
    color:#475569;
    font-size:13px;
    font-weight:600;
}

.question-text{
    margin-bottom:20px;
    color:#1e293b;
    font-size:16px;
    line-height:1.55;
}

.answers{
    width:70%;
    margin:20px auto;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.answer{
    width:100%;
    min-height:36px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:6px 20px;
    margin:0;

    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:8px;

    color:#334155;
    font-size:14px;
    line-height:1.2;

    cursor:pointer;
    transition:.2s;
}

.answer:hover{
    background:#f1f5f9;
}

.answer span{
    flex:0 0 28px;

    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-right:12px;

    border-radius:50%;

    background:#2563eb;
    color:#fff;

    font-size:12px;
    font-weight:bold;
}

.answer.selected{
    background:#dbeafe;
    border-color:#2563eb;
    color:#1e3a8a;
}

.answer.selected span{
    background:#2563eb;
}

.answer.correct{
    background:#dcfce7;
    border-color:#22c55e;
}

.answer.wrong{
    background:#fee2e2;
    border-color:#ef4444;
}

.explanation{
    margin-top:18px;
    padding:12px 15px;
    background:#ecfdf5;
    border-left:4px solid #22c55e;
    border-radius:10px;
    font-size:14px;
}

@media (max-width:600px){

    .question-card{
        padding:18px;
    }

    .question-text{
        font-size:15px;
    }

    .answers{
        width:100%;
        margin:15px auto;
    }

    .answer{
        padding:8px 12px;
        font-size:14px;
    }

    .answer span{
        width:24px;
        height:24px;
        margin-right:10px;
        font-size:11px;
    }
}

/* RESULT SCREEN */

.result-card{

    background:white;

    padding:35px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}


.result-icon{

    font-size:45px;

}


.result-card h2{

    color:#2563eb;

    margin:10px;

}


.score-circle{

    width:130px;

    height:130px;

    margin:25px auto;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

}


.score-circle span{

    font-size:42px;

    font-weight:bold;

}


.score-circle small{

    font-size:18px;

}


.result-message{

    font-size:18px;

    margin:20px;

    color:#334155;

}


.stats{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:25px 0;

}


.stat-box{

    background:#f8fafc;

    padding:15px;

    border-radius:15px;

    min-width:90px;

}


.stat-box b{

    display:block;

    font-size:24px;

    color:#2563eb;

}


.stat-box span{

    font-size:13px;

    color:#64748b;

}


.restart-btn{

    background:#2563eb;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

}


.restart-btn:hover{

    background:#1d4ed8;

}


@media(max-width:600px){

.stats{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

.stat-box{
    min-width:75px;
}

}


.question-box{

    background:#f8fafc;

    border-left:5px solid #2563eb;

    padding:18px;

    border-radius:12px;

    margin-bottom:20px;

    line-height:1.6;

}


.question-title-text{

    background:#eff6ff;

    color:#1d4ed8;

    font-weight:700;

    padding:12px 15px;

    border-radius:12px;

    margin-top:20px;

}


.question-title-text::before{

    content:"❓ ";

}

.question-text{
    line-height:1.35;
    font-size:16px;
    margin-top:10px;
    margin-bottom:8px;
}


.question-text br{
    line-height:0.5;
}


.question-type{
    margin-bottom:8px;
}


.question-title{
    margin-bottom:8px;
}


.answers{
    margin-top:12px;
}

.question-text{

    background:#f8fafc;

    padding:15px;

    border-radius:12px;

    line-height:1.35;

    margin-bottom:15px;

    color:#334155;

}


.question-stem{

    margin-top:15px;

    background:#eff6ff;

    border-left:5px solid #2563eb;

    padding:14px;

    border-radius:12px;

    font-weight:800;

    color:#1e40af;

}

.question-text{
    line-height:1.35;
}


.question-text b{
    font-weight:800;
}


.question-text br{
    line-height:0.7;
}


/* Soru kökü görünümü */
.question-text strong,
.question-text .question-line{

    display:block;

    margin-top:18px;

    padding:12px 15px;

    background:#eff6ff;

    border-left:5px solid #2563eb;

    border-radius:10px;

    font-weight:800;

    color:#1e3a8a;

}

.table-box{
    width:100%;
    overflow-x:auto;
    margin:10px 0 15px 0;
}


.question-table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:12px;

    overflow:hidden;

}


.question-table th{

    background:#2563eb;

    color:white;

    padding:8px;

    font-size:14px;

}


.question-table td{

    padding:8px;

    border-bottom:1px solid #e2e8f0;

    text-align:center;

    font-size:14px;

}


.question-table tr:last-child td{

    border-bottom:none;

}

.refuse{
    position: relative;
}

.grammar-note-box{
    position: absolute;
    top: 70px;
    right: -230px;

    width: 200px;

    background: #fffdf2;
    border-left: 5px solid #f4b400;
    border-radius: 14px;
    padding: 16px;

    box-shadow: 0 6px 15px rgba(0,0,0,.10);

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.grammar-note-box h3{
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #d97706;
    text-align: center;
}

.grammar-note-box p{
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

.grammar-note-box strong{
    color: #222;
    font-size: 15px;
}

.timer{

    margin:15px 0;

    font-size:22px;

    font-weight:bold;

    color:#ff5722;

}

.timer-number{
    font-size:42px;
    font-weight:800;
}

.review{

margin-top:30px;

text-align:left;

}

.review-card{

background:white;

padding:20px;

margin:20px 0;

border-radius:12px;

border-left:6px solid crimson;

}

.review-card p{

margin:10px 0;

line-height:1.6;

}

/* ==========================
   RESULT SCREEN - MOBILE
========================== */

@media (max-width:768px){

    .result-card{
        padding:20px 15px;
    }

    .result-card h2{
        font-size:24px;
    }

    .result-icon{
        font-size:38px;
    }

    .score-circle{
        width:100px;
        height:100px;
    }

    .score-circle span{
        font-size:30px;
    }

    .score-circle small{
        font-size:15px;
    }

    .result-message{
        font-size:16px;
        margin:15px 0;
    }

    .stats{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .stat-box{
        min-width:auto;
        padding:12px;
    }

    .stat-box b{
        font-size:20px;
    }

    .restart-btn{
        width:100%;
        padding:12px;
        font-size:15px;
    }

    .question-box,
    .question-text,
    .question-stem,
    .question-title-text{
        padding:12px;
        font-size:15px;
    }

    .question-table{
        font-size:12px;
    }

    .question-table th,
    .question-table td{
        padding:6px;
        white-space:nowrap;
    }

    .grammar-note-box{
        position:static;
        width:100%;
        margin-top:20px;
        right:auto;
        top:auto;
        box-sizing:border-box;
    }

    .timer{
        font-size:18px;
    }

    .timer-number{
        font-size:32px;
    }

    .review-card{
        padding:15px;
    }

}

.grammar-text {
    display: flex;
    gap: 10px;
}

.left-text,
.right-text {
    width: 50%;
}

.right-text {
    padding-left: 10px;
}

.frequency-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
}


.frequency-card {
    height: 60px;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    box-sizing: border-box;
    padding: 5px;
}


.frequency-card h3 {
    font-size: 14px;
    margin: 0;
}


.frequency-card p {
    font-size: 11px;
    margin: 3px 0 0;
}


/* Grammar açıklama yazıları */

.left-text,
.right-text {
    font-size: 17px;
    line-height: 1.7;
}


.left-text h2,
.right-text h2 {
    font-size: 23px;
    margin-bottom: 16px;
    text-align: center;
}


.left-text p,
.right-text p {
    font-size: 17px;
    margin: 10px 0;
}


/* Üçlü düzen */

.grammar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}


.left-text,
.right-text {
    width: 42%;
}


.grammar-note-box {
    width: 180px;
    flex-shrink: 0;
    text-align: center;

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;

    padding: 10px;
}


.unit2-note-box h3 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #d48806;
    font-size: 20px;
}


.unit2-note-box p {
    margin: 12px 0;
    line-height: 1.5;
    font-size: 14px;
}

.unit2-note-box {
    width: 180px;
    padding: 15px;

    background: #fff8dc;
    border: 2px solid #f4c542;
    border-radius: 12px;

    text-align: center;

    box-shadow: 0 4px 10px rgba(0,0,0,0.08);

    font-size: 14px;
}

.unit2-note-box strong {
    color: #333;
}

.survey-table,
.planner-table{
    margin:20px auto;
    border-collapse:collapse;
    width:55%;
    max-width:420px;
    font-size:16px;
    text-align:center;
}

.survey-table th,
.survey-table td,
.planner-table th,
.planner-table td{
    border:2px solid #666;
    padding:8px 12px;
}

.survey-table th,
.planner-table th{
    background:#f5f5f5;
    font-weight:bold;
}

/* ==========================
   UNIT 2 GRAMMAR - MOBILE
========================== */

@media (max-width:768px){

    /* Sol - Not - Sağ yapısı alt alta gelsin */
    .grammar-text{
        flex-direction:column;
        gap:20px;
    }

    .left-text,
    .right-text{
        width:100%;
        padding-left:0;
        font-size:15px;
    }

    .left-text h2,
    .right-text h2{
        font-size:20px;
    }

    .left-text p,
    .right-text p{
        font-size:15px;
        line-height:1.6;
    }

    /* Not kutusu */
    .grammar-note-box,
    .unit2-note-box{
        width:100%;
        max-width:350px;
        margin:0 auto;
        border-left:2px solid #f4c542;
        border-right:2px solid #f4c542;
    }

    /* Frequency kartları */
    .frequency-container{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .frequency-card{
        height:70px;
    }

    .frequency-card h3{
        font-size:15px;
    }

    .frequency-card p{
        font-size:12px;
    }

    /* Tablolar */
    .survey-table,
    .planner-table{
        width:100%;
        font-size:14px;
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .survey-table th,
    .survey-table td,
    .planner-table th,
    .planner-table td{
        padding:8px;
    }

}

.profile-dashboard{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:25px;

    margin-top:30px;

}

.profile-dashboard > div{

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.profile-card{
    background:#f0f7ff;
    border:1px solid #dbeafe;
    border-radius:18px;
    padding:24px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.profile-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.profile-info h2{
    margin-top:15px;
}

.profile-info p{
    margin-top:5px;
}

.profile-avatar{

    width:120px;
    height:120px;

    border-radius:50%;
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#2563eb;

    flex-shrink:0;

}

.profile-avatar{

    background:linear-gradient(135deg,#06b6d4,#3b82f6);

}

.profile-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    display:none;

}

.profile-info h2{

    margin:0;

    font-size:24px;

    color:#222;

}

.profile-info p{

    margin-top:4px;

    color:#777;

    font-size:14px;

}

.profile-level{

    margin-top:20px;

}

.level-row{

    display:flex;

    justify-content:space-between;

    font-size:14px;

    color:#555;

    margin-bottom:8px;

}

.progress{

    width:100%;

    height:8px;

    background:#ececec;

    border-radius:20px;

    overflow:hidden;

}

.progress-fill{

    width:70%;

    height:100%;

    background:#3b82f6;

    border-radius:20px;

}

.stats-card{
    background:#2563eb;
    color:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 6px 15px rgba(37,99,235,.25);
}

.stats-card h2{

    margin-bottom:18px;
    font-size:22px;

}

.stats-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;

}

.stat-item{

    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:14px;
    padding:18px;

    text-align:center;

    transition:.25s;

}

.stat-item:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.stat-number{

    display:block;

    font-size:28px;

    font-weight:700;

    color:#2563eb;

}

.stat-title{

    display:block;

    margin-top:6px;

    color:#666;

    font-size:14px;

}

.progress-card{

    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:22px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.progress-card h2{

    margin-bottom:20px;

}

/* ===========================
   PROFILE PAGE - MOBILE
=========================== */

@media (max-width:768px){

    .profile-dashboard{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:20px;
    }

    .profile-dashboard > div{
        padding:18px;
        border-radius:16px;
    }

    .profile-card{
        padding:18px;
    }

    .profile-top{
        text-align:center;
    }

    .profile-avatar{
        width:70px;
        height:70px;
        font-size:28px;
        margin-bottom:12px;
    }

    .profile-info h2{
        font-size:22px;
    }

    .profile-info p{
        font-size:14px;
    }

    .stats-card{
        padding:18px;
    }

    .stats-card h2{
        font-size:20px;
        text-align:center;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .stat-item{
        padding:14px;
    }

    .stat-number{
        font-size:24px;
    }

    .stat-title{
        font-size:13px;
    }

    .progress-card{
        padding:18px;
    }

    .level-row{
        font-size:13px;
    }

}

/* Küçük Telefonlar */

@media (max-width:480px){

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

    .profile-avatar{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .profile-info h2{
        font-size:20px;
    }

    .stat-number{
        font-size:22px;
    }

    .stat-title{
        font-size:12px;
    }

}

.unit{

    margin-bottom:22px;

}

.unit:last-child{

    margin-bottom:0;

}

.unit-header{

    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    font-size:15px;
    font-weight:600;

}

.completed{

    color:#22c55e;

}

.progress-bar{

    width:100%;
    height:8px;
    background:#edf2f7;
    border-radius:30px;
    overflow:hidden;

}

.progress-fill{

    height:100%;
    background:#3b82f6;
    border-radius:30px;

    transition:width .6s ease;

}

.recent-tests-card{

    background:#fff;
    border-radius:18px;
    padding:22px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.recent-tests-card h2{

    margin-bottom:20px;

}

.test-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #ececec;

}

.test-item:last-child{

    border-bottom:none;

}

.test-left h3{

    margin:0;
    font-size:17px;
    color:#222;

}

.test-left p{

    margin-top:6px;
    color:#888;
    font-size:14px;

}

.test-right{

    text-align:right;

}

.test-stats{

    display:flex;
    gap:12px;
    justify-content:flex-end;
    margin-bottom:6px;

}

.correct{

    color:#22c55e;
    font-weight:600;

}

.wrong{

    color:#ef4444;
    font-weight:600;

}

.percent{

    color:#2563eb;
    font-weight:700;

}

.recent-tests-grid{

    display:grid;

    grid-template-columns:repeat(5, 170px);

    justify-content:center;

    gap:12px;

}

.test-card{

    width:160px;
    height:220px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

}

.test-card:hover{

    transform:translateY(-3px);

    box-shadow:0 6px 15px rgba(0,0,0,.08);

}

.test-card h3{

    font-size:13px;

    text-align:center;

    line-height:1.3;

    min-height:34px;

}

.test-info{

    display:flex;
    justify-content:space-around;

    font-size:13px;

    margin-bottom:10px;

}

.test-percent{

    width:60px;
    height:60px;

    margin:12px auto;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2563eb;
    color:white;

    font-size:18px;
    font-weight:700;

}

.test-date{

    text-align:center;

    font-size:11px;

    color:#777;

}

.test-info{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin:12px 0;
}

/* ===========================
   RECENT TESTS - MOBILE
=========================== */

@media (max-width:768px){

     .recent-tests-card{

        width:calc(100% - 30px);

        margin:15px auto;

        box-sizing:border-box;

    }


    .recent-tests-card h2{

        font-size:20px;
        margin-bottom:16px;
        text-align:center;

    }

    .recent-tests-grid{

        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:12px;

    }

    .test-card{

        width:100%;
        min-width:0;
        height:auto;
        min-height:200px;
        padding:14px;
        box-sizing:border-box;

    }

    .test-card h3{

        font-size:14px;
        min-height:auto;

    }

    .test-percent{

        width:48px;
        height:48px;
        font-size:15px;

    }

    .test-date{

        font-size:12px;

    }

    .test-info{

        justify-content:space-between;
        font-size:12px;
        flex-wrap:wrap;
        gap:6px;

    }

    .test-item{

        flex-direction:column;
        align-items:flex-start;
        gap:10px;

    }

    .test-right{

        width:100%;
        text-align:left;

    }

    .test-stats{

        justify-content:flex-start;
        flex-wrap:wrap;
        gap:6px;

    }

    .unit-header{

        font-size:14px;

    }

}

/* Küçük telefonlar */

@media (max-width:480px){

    .recent-tests-card{

        width:100%;
        max-width:100%;
        padding:15px;
        border-radius:14px;
        box-sizing:border-box;

    }

    .recent-tests-card h2{

        font-size:18px;
        margin-bottom:14px;
        text-align:center;

    }

    .recent-tests-grid{

        display:grid;
        grid-template-columns:1fr;
        gap:12px;

    }

    .test-card{

        width:100%;
        max-width:100%;
        margin:0;
        padding:14px;
        min-height:auto;
        box-sizing:border-box;

    }

    .test-card h3{

        font-size:13px;

    }

    .test-percent{

        width:46px;
        height:46px;
        font-size:14px;

    }

    .test-date{

        font-size:11px;

    }

    .test-info{

        flex-wrap:wrap;
        gap:6px;

    }

    .test-stats{

        flex-wrap:wrap;
        gap:6px;

    }

}


.stat-box{
    flex:1;
    text-align:center;
    padding:8px;
    border-radius:10px;
}

.stat-box.correct{
    background:#dcfce7;
    color:#15803d;
}

.stat-box.wrong{
    background:#fee2e2;
    color:#dc2626;
}

.stat-box .number{
    display:block;
    font-size:20px;
    font-weight:700;
}

.stat-box .label{
    display:block;
    font-size:11px;
}

.test-detail{

    padding:6px 8px;

    font-size:12px;

}

.test-detail strong{

    font-size:15px;

}

.correct-detail{

    background:#dcfce7;
    color:#15803d;

}

.wrong-detail{

    background:#fee2e2;
    color:#dc2626;

}

.net-detail{

    background:#dbeafe;
    color:#2563eb;

}

.study-plan{
    margin:20px 0;
}

#studyPlan{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:15px;
}

.study-plan h2,
.study-plan h2 i{
    color: #000;
}

.day-card{
    background:#fff;
    border-radius:15px;
    padding:15px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    
}

.day-card{
    position:relative;
}

.day-card h3{
    text-align:center;
    margin-bottom:15px;
    color:#1e88e5;
}

.day-card label{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    margin: 8px 0;
    padding: 8px 10px;
    background: rgba(255,255,255,.15);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.day-card input{
    margin: 0;
    flex-shrink: 0;
    transform: scale(1.1);
}

.weekday{
    background: linear-gradient(135deg, #2196f3, #1565c0);
    color: white;
    border: 3px solid #42a5f5;
    transform: scale(1.03);
}

.weekday h3{
    color: white;
}

.weekday label{
    color: white;
}

.weekday input{
    accent-color: white;
}

.exam-day{
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border: 3px solid #ffb74d;
    transform: scale(1.03);
}

.exam-day h3,
.exam-day label{
    color: white;
}

.exam-day input{
    accent-color: white;
}

.review-day{
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    border: 3px solid #66bb6a;
    transform: scale(1.03);
}

.review-day h3,
.review-day label{
    color: white;
}

.review-day input{
    accent-color: white;
}

.plan-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin:8px 0;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(255,255,255,.15);
}

.plan-item input{
    flex-shrink:0;
}

.plan-time{
    width:90px;
    font-weight:700;
    color:#FFD54F;
    font-size:11px;
}

.plan-task{
    flex:1;
    color:#fff;
    font-size:13px;
}

.today-card{
    border:3px solid #FFD54F;
    transform:scale(1.03);
    box-shadow:0 0 20px rgba(255,213,79,.45);
}

.day-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.today-badge{
    position:absolute;
    top:10px;
    right:10px;

    background:#FFD54F;
    color:#222;

    font-size:9px;
    font-weight:700;

    padding:3px 8px;
    border-radius:15px;

    box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* ===========================
   STUDY PLAN - MOBILE
=========================== */

@media (max-width:768px){

    #studyPlan{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .day-card{
        padding:15px;
    }

    .day-card h3{
        font-size:17px;
        margin-bottom:12px;
    }

    .day-card label{
        font-size:12px;
        padding:7px 8px;
    }

    .plan-item{
        gap:8px;
        padding:7px 8px;
    }

    .plan-time{
        width:70px;
        font-size:10px;
    }

    .plan-task{
        font-size:12px;
    }

    .today-badge{
        font-size:8px;
        padding:2px 6px;
    }

    .stat-box{
        padding:6px;
    }

    .stat-box .number{
        font-size:18px;
    }

    .stat-box .label{
        font-size:10px;
    }

    .test-detail{
        font-size:11px;
    }

    .test-detail strong{
        font-size:14px;
    }

}

/* Küçük telefonlar */

@media (max-width:480px){

    #studyPlan{
        grid-template-columns:1fr;
    }

    .day-card{
        max-width:340px;
        margin:0 auto;
    }

    .plan-time{
        width:60px;
        font-size:9px;
    }

    .plan-task{
        font-size:11px;
    }

}

.official-exams{

    margin-top:60px;

}

.official-exams h2{

    text-align:center;
    margin-bottom:30px;
    color:#1565c0;

}

.exam-grid{
    display: grid;
    grid-template-columns: repeat(5, 260px);
    justify-content: center;
    gap: 35px;
    margin-top: 30px;
}

.exam-card{
    background: #fff;
    border: 3px solid #dbe7f5;   /* Belirgin çerçeve */
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    transition: all .3s ease;
}

.exam-card:hover{
    transform: translateY(-8px);
    border-color: #1565c0;
    box-shadow: 0 12px 25px rgba(21,101,192,.25);
}

.exam-card h3{

    color:#1565c0;
    margin-bottom:10px;

}

.exam-card p{

    color:#666;
    margin-bottom:20px;

}

.exam-card span{

    display:inline-block;
    background:#1565c0;
    color:white;
    padding:8px 16px;
    border-radius:25px;
    font-size:14px;

}

.open-btn{
    display:inline-block;
    margin-top:10px;
    padding:10px 18px;
    background:#1565c0;
    color:#fff;
    border-radius:25px;
    font-weight:600;
    transition:.3s;
}

.exam-card:hover .open-btn{
    background:#0d47a1;
}

.exam-buttons{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.pdf-btn,
.solve-btn{
    flex:1;
    text-align:center;
    text-decoration:none;
    color:white;
    padding:10px 0;
    border-radius:10px;
    font-weight:600;
    transition:.3s;
}

.pdf-btn{
    background:#1565c0;
}

.solve-btn{
    background:#d32f2f;
}

.pdf-btn:hover{
    background:#0d47a1;
}

.solve-btn:hover{
    background:#b71c1c;
}

.exam-card{
    position: relative;
    overflow: hidden;
}

.exam-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #1565c0;
}

/* ===========================
   OFFICIAL EXAMS - MOBILE
=========================== */

@media (max-width:768px){

    .exam-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .exam-card{
        width:100%;
        padding:15px;
    }

    .exam-card h3{
        font-size:18px;
    }

    .exam-card p{
        font-size:14px;
        margin-bottom:15px;
    }

    .exam-card span{
        font-size:12px;
        padding:6px 12px;
    }

    .exam-buttons{
        flex-direction:column;
        gap:10px;
    }

    .pdf-btn,
    .solve-btn{
        width:100%;
        padding:10px;
        font-size:14px;
    }

}

/* Küçük telefonlar */

@media (max-width:480px){

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

    .exam-card{
        max-width:340px;
        margin:0 auto;
    }

}


.mock-grid{
    display:grid;
    grid-template-columns:repeat(8, 160px);
    justify-content:center;
    gap:15px;
    margin-top:30px;
}


.mock-card{
    background:#fff;
    border:2px solid #e3ecf8;
    border-radius:10px;
    padding:15px 10px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.mock-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg,#1565c0,#42a5f5);
}

.mock-card:hover{
    transform: translateY(-8px);
    border-color: #1565c0;
    box-shadow: 0 18px 35px rgba(21,101,192,.25);
}

.mock-card h3{
    font-size:18px;
    margin-bottom:8px;
}

.mock-card p{
    font-size:13px;
    margin-bottom:15px;
}

.mock-buttons{
    display: flex;
    gap: 10px;
}

.mock-buttons a{
    flex: 1;
    padding: 11px 0;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.solve-btn{
    background:linear-gradient(135deg,#e53935,#b71c1c);
    color:white;
    padding:11px 20px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    box-shadow:0 5px 12px rgba(211,47,47,.3);
    transition:.3s;
}

.pdf-btn:hover{
    background: #c62828;
}

.solve-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(211,47,47,.4);
}

.print-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: #1976d2;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.print-btn:hover{
    background: #1565c0;
}

.print-btn:hover{
    background:#1565c0;
}

/* ===========================
   MOCK EXAMS - MOBILE
=========================== */

@media (max-width:768px){

    .mock-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .mock-card{
        width:100%;
        padding:15px;
    }

    .mock-card h3{
        font-size:16px;
    }

    .mock-card p{
        font-size:13px;
    }

    .mock-buttons{
        flex-direction:column;
        gap:10px;
    }

    .mock-buttons a,
    .pdf-btn,
    .solve-btn{
        width:100%;
        padding:10px;
        font-size:14px;
        box-sizing:border-box;
    }

    .print-btn{
        width:100%;
        justify-content:center;
        font-size:14px;
    }

}

/* Küçük Telefonlar */

@media (max-width:480px){

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

    .mock-card{
        max-width:320px;
        margin:0 auto;
    }

}


.profile-card,
#recentTests{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    margin-bottom:30px;
}


    #printResultsBtn{
        display: none;
    }



.lesson-page{
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.tense-card{
    background: #fff;
    border-radius: 18px;
    padding: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    min-height: 320px;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: .3s;
}

.tense-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.card-top{
    margin-bottom: 20px;
}

.tense-icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #eef4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #2563eb;
}

.tense-card h3{
    font-size: 24px;
    margin: 10px 0;
    min-height: 60px; /* bütün başlıklar aynı hizada */
}

.turkish-name{
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 10px;
}

.description{
    color: #666;
    line-height: 1.6;
    flex: 1; /* butonu her kartta alta iter */
}

.start-btn{
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

/* ===========================
   TENSES PAGE - MOBILE
=========================== */

@media (max-width:768px){

    .lesson-page{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
        padding:15px;
    }

    .tense-card{
        min-height:auto;
        padding:20px 15px;
    }

    .tense-icon{
        width:60px;
        height:60px;
        font-size:26px;
    }

    .tense-card h3{
        font-size:20px;
        min-height:auto;
    }

    .turkish-name{
        font-size:15px;
    }

    .description{
        font-size:14px;
        line-height:1.5;
    }

    .start-btn{
        width:100%;
        justify-content:center;
        padding:10px;
        font-size:14px;
    }

}

/* Küçük Telefonlar */

@media (max-width:480px){

    .lesson-page{
        grid-template-columns:1fr;
    }

    .tense-card{
        max-width:340px;
        margin:0 auto;
    }

}

.units-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;

    display: grid;
    grid-template-columns: repeat(5, 180px);
    gap: 45px;
    justify-content: center;
}


/* KART */
.unit-box {
    height: 180px;
    width: 180px;

    background: white;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding: 12px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

    transition: 0.3s;
}


.unit-box:hover {
    transform: translateY(-5px);
}


/* Emoji */
.unit-icon {
    font-size: 30px;
}


/* Unit yazısı */
.unit-box h2 {
    font-size: 20px;
    margin: 0;
}


/* Konu adı */
.unit-box h3 {
    font-size: 16px;
    margin: 0;
    color: #555;
}


/* Start Button */
.start-btn {
    text-decoration: none;

    background: #2563eb;
    color: white;

    width: 80px;
    height: 20px;

    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
}


.start-btn:hover {
    background:#1d4ed8;
}

/* LGS COUNTDOWN CARD */

.lgscountdown {
    position: absolute;
    left: 1650px;
    top: 100px;
}

.lgs-box{

    width:200px;

    background:linear-gradient(
        135deg,
        #1e3a8a,
        #2563eb
    );

    color:white;

    border-radius:20px;

    padding:11px 12px;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 15px 35px rgba(37,99,235,.25);

    transition:.3s ease;

}


/* Hover */

.lgs-box:hover{

    transform:translateY(-6px);

}


/* Takvim ışık efekti */

.lgs-box::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(255,255,255,.12);

    border-radius:50%;

    top:-100px;

    right:-80px;

}



/* Başlık */

.lgs-box h2{

    position:relative;

    z-index:2;

    font-size:15px;

    margin-bottom:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}



/* Gün sayısı */

#lgsDays{

    position:relative;

    z-index:2;

    font-size:35px;

    font-weight:900;

    margin:10px 0;

    line-height:1;


    color:#facc15;


    text-shadow:
    0 4px 12px rgba(0,0,0,.25);

    animation:pulseDays 2s infinite;

}


@keyframes pulseDays{

    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }

}


/* Days left */

.lgs-box b{

    position:relative;

    z-index:2;

    font-size:13px;

    letter-spacing:2px;

    opacity:.9;

    text-transform:uppercase;

}


/* Mobile */

@media(max-width:600px){


    .lgs-box{

        width:90%;

        max-width:300px;

        padding:20px;

        border-radius:20px;

    }


    #lgsDays{

        font-size:42px;

    }


    .lgs-box h2{

        font-size:18px;

    }


}

/* ===========================
   HOME PAGE - MOBILE
=========================== */

@media (max-width:768px){

    .units-container{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        padding:15px;
    }

    .unit-box{
        width:100%;
        height:170px;
        padding:15px;
        box-sizing:border-box;
    }

    .unit-icon{
        font-size:28px;
    }

    .unit-box h2{
        font-size:18px;
    }

    .unit-box h3{
        font-size:14px;
    }

    .start-btn{
        width:100%;
        height:40px;
        font-size:14px;
    }

    /* LGS Countdown */

    .lgscountdown{
        position:static;
        display:flex;
        justify-content:center;
        margin:25px auto;
    }

    .lgs-box,
    .info-box{
        width:240px;
        height:auto;
        padding:20px;
    }

    #lgsDays{
        font-size:36px;
    }

}

/* Mobile */

@media(max-width:600px){


    .lgs-box{

        width:90%;

        max-width:300px;

        padding:20px;

        border-radius:20px;

    }


    #lgsDays{

        font-size:42px;

    }


    .lgs-box h2{

        font-size:18px;

    }


}

/* Küçük Telefonlar */

@media (max-width:480px){

    .units-container{
        grid-template-columns:1fr;
    }

    .unit-box{
        max-width:300px;
        margin:0 auto;
    }

    .lgs-box,
    .info-box{
        width:100%;
        max-width:300px;
    }

}

/* TENSES PAGE */

.tenses-page{

    max-width: 1400px;
    margin: 40px auto;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 25px;

    padding: 20px;

}


/* CARD */

.tense-card{

    background: #fff;

    border-radius: 20px;

    padding: 30px 25px;

    text-align: center;

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    border: 2px solid transparent;

    transition: .3s;

}


.tense-card:hover{

    transform: translateY(-8px);

    border-color: #2563eb;

    box-shadow: 0 15px 35px rgba(37,99,235,.18);

}


/* ICON */

.tense-icon{

    width: 80px;
    height: 80px;

    margin: 0 auto 20px;

    background: linear-gradient(135deg,#2563eb,#60a5fa);

    border-radius: 50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    color:white;

}


/* TITLE */

.tense-card h3{

    font-size:22px;

    color:#1e3a8a;

    margin-bottom:8px;

}

/* ===========================
   TENSES PAGE - MOBILE
=========================== */

@media (max-width:768px){

    .tenses-page{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
        padding:15px;
    }

    .tense-card{
        padding:20px 15px;
    }

    .tense-icon{
        width:65px;
        height:65px;
        font-size:32px;
        margin-bottom:15px;
    }

    .tense-card h3{
        font-size:18px;
    }

}

/* Küçük Telefonlar */

@media (max-width:480px){

    .tenses-page{
        grid-template-columns:1fr;
    }

    .tense-card{
        max-width:340px;
        margin:0 auto;
    }

}


/* TURKISH */

.turkish-name{

    color:#2563eb;

    font-weight:bold;

    font-size:17px;

    margin-bottom:12px;

}


/* DESCRIPTION */

.description{

    color:#64748b;

    font-size:15px;

    line-height:1.6;

    min-height:50px;

    margin-bottom:25px;

}


/* BUTTON */

.tense-card .start-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    width:170px;

    height:45px;

    text-decoration:none;

    background:#2563eb;

    color:white;

    border-radius:30px;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}


.tense-card .start-btn:hover{

    background:#1d4ed8;

    transform:scale(1.05);

}

/* ===========================
   TENSES PAGE - MOBILE
=========================== */

@media (max-width:768px){

    .turkish-name{
        font-size:15px;
        margin-bottom:10px;
    }

    .description{
        font-size:14px;
        line-height:1.5;
        min-height:auto;
        margin-bottom:18px;
    }

    .tense-card .start-btn{
        width:100%;
        height:42px;
        font-size:14px;
        border-radius:12px;
    }

}

@media (max-width:480px){

    .turkish-name{
        font-size:14px;
    }

    .description{
        font-size:13px;
    }

    .tense-card .start-btn{
        font-size:13px;
        height:40px;
    }

}


/* ================= MOBILE RESPONSIVE ================= */

@media (max-width:768px){

/* Genel */
body{
    overflow-x:hidden;
}

img,
video,
iframe{
    max-width:100%;
    height:auto;
}

/* Vocabulary */
.vocabulary-container{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
    padding:0 10px;
}

.word-card{
    width:100% !important;
    height:auto !important;
}

/* Unit Cards */
.units-container,
.unit-container{
    grid-template-columns:1fr !important;
    gap:18px;
}

.unit-box{
    width:100%;
    height:auto;
}

/* Grammar */
.grammar-text{
    flex-direction:column;
}

.left-text,
.right-text,
.unit2-note-box,
.grammar-note-box{
    width:100%;
}

.frequency-container{
    grid-template-columns:repeat(2,1fr);
}

/* Grammar Cards */
.grammar-grid,
.small-grid{
    grid-template-columns:1fr;
}

/* Offer Response */
.offer-response-container{
    grid-template-columns:1fr;
}

.offer-response-container::before{
    display:none;
}

.accept,
.refuse{
    padding:0;
}

/* Notes */
.note-line{
    grid-template-columns:1fr;
}

/* Games */
.games-container{
    grid-template-columns:1fr !important;
}

/* Question Menu */
.question-cards{
    grid-template-columns:1fr !important;
}

/* Quiz */
.answers{
    width:100% !important;
}

.answer{
    font-size:14px;
}

.question-card{
    padding:18px;
}

/* Result */
.stats{
    flex-wrap:wrap;
}

/* Profile */
.profile-dashboard{
    grid-template-columns:1fr;
}

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

.recent-tests-grid{
    grid-template-columns:1fr;
}

.test-card{
    width:100%;
}

/* Study Plan */
#studyPlan{
    grid-template-columns:1fr;
}

/* Official Exams */
.exam-grid{
    grid-template-columns:1fr;
}

.exam-buttons{
    flex-direction:column;
}

/* Mock Exams */
.mock-grid{
    grid-template-columns:repeat(2,1fr);
}

.mock-buttons{
    flex-direction:column;
}

/* Lesson */
.lesson-page{
    grid-template-columns:1fr;
}

/* Tenses */
.tenses-page{
    grid-template-columns:1fr;
}

/* Countdown */
.lgscountdown{
    position:static;
    margin:20px auto;
}

.lgs-box,
.info-box{
    width:100%;
}

/* Tables */
.table-box{
    overflow-x:auto;
}

.question-table,
.survey-table,
.planner-table{
    width:100%;
    min-width:500px;
}

}

.membership-card {

    width:150px;

    padding:12px;

    background:white;

    border-radius:15px;

    border:1px solid #e5e7eb;

    box-shadow:0 6px 15px rgba(0,0,0,0.08);

    text-align:center;

    position:absolute;

    top:100px;

    left:30px;

}

.membership-card {
    width: 200px;
    margin: 0 auto;
}

.membership-icon {

    font-size:35px;

}


.membership-card h2 {

    font-size:14px;

    margin:5px 0;

}


.membership-title{

    margin-top:10px;

    color:#666;

}

.membership-status{

    margin-top:10px;
    font-weight:700;
    font-size:14px;

}

.plan-badge {

    font-size:14px;

    padding:5px 8px;

}


.free {

    background:#e8f8e8;
    color:#15803d;

}

.membership-text {

    font-size:11px;

    color:#666;

    line-height:1.5;

    margin:8px 0;

}

.membership-features {

    list-style:none;

    padding:0;

    text-align:left;

    font-size:13px;

    line-height:1.8;

}


.premium-btn {

    padding:30px 80px;

    border:none;

    border-radius:40px;

    background:linear-gradient(135deg,#f59e0b,#facc15);

    color:white;

    font-size:30px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:0 6px 15px rgba(0,0,0,0.18);

    transition:0.3s;

}

.premium-btn:hover {

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,0.2);

}

.premium{

    background:#FFD54F;
    color:#7a4f00;

}

.plan-badge.premium{

    background:#FFD54F;
    color:#7a4f00;

}

.premium-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


.premium-box {

    width:500px;

    background:white;

    padding:20px 35px 35px 35px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,0.1);

}


.premium-icon{

    font-size:70px;

}


.premium-features{

    text-align:left;

    margin:30px 0;

}


.premium-buy-btn{

    background:#ffb300;

    color:white;

    border:none;

    padding:15px 35px;

    border-radius:30px;

    cursor:pointer;

    font-size:18px;

}

.premium-page {

    display:flex;
    justify-content:center;
    align-items:center;

    margin:50px auto;

}


.premium-box {

    width:500px;

    background:white;

    padding:35px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,0.1);

}


.premium-icon {

    font-size:70px;

    margin-bottom:15px;

}

.premium-icon h2 {

    margin-bottom: 5px;

}


.premium-description {

    margin-top: 5px;

}


.premium-box h1 {

    font-size:28px;

    margin-bottom:15px;

}


.premium-description {

    color:#555;

    margin-bottom:25px;

}

.premium-description {

    font-size:16px;

    color:#555;

    margin-top:5px;

}

.premium-features {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin:25px 0;

}



.feature-item {

    background:#f8f8f8;

    padding:12px;

    border-radius:12px;

    font-size:14px;

}



.premium-buy-btn {

    margin-top:20px;

    padding:12px 35px;

    border:none;

    border-radius:25px;

    background:#f59e0b;

    color:white;

    font-weight:bold;

    font-size:16px;

    cursor:pointer;

}



.premium-buy-btn:hover {

    transform:translateY(-2px);

}

.back-home-btn {

    display:inline-block;

    margin-top:15px;

    padding:10px 25px;

    background:#2563eb;

    color:white;

    text-decoration:none;

    border-radius:20px;

    font-size:14px;

    font-weight:bold;

    transition:0.3s;

}


.back-home-btn:hover {

    transform:translateY(-2px);

    opacity:0.9;

}

.premium-page {
    margin-top: 10px;
}


.premium-box {
    padding-top: 10px;
}


.premium-icon {

    text-align:center;
    margin-bottom:10px;

}

.crown {

    font-size:80px;

    margin-bottom:5px;

    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.15));

}

.premium-icon h2 {

    font-size:40px;
    font-weight:800;
    margin:0;
    letter-spacing:1px;

    background: linear-gradient(45deg, #d97706, #facc15);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

}

.premium-description {
    margin-top: 5px;
}

/* ================= MEMBERSHIP & PREMIUM MOBILE ================= */

@media (max-width:768px){

/* Membership Card */

.membership-card{
    position:static;
    width:90%;
    max-width:240px;
    margin:20px auto;
    left:auto;
    top:auto;
    padding:18px;
}

.membership-icon{
    font-size:30px;
}

.membership-card h2{
    font-size:18px;
}

.membership-title{
    font-size:15px;
}

.membership-text{
    font-size:13px;
}

.membership-features{
    font-size:13px;
}

.plan-badge{
    font-size:13px;
}

/* Upgrade Button */

.premium-btn{
    width:100%;
    padding:14px 20px;
    font-size:18px;
    border-radius:30px;
}

/* Premium Page */

.premium-page{
    padding:20px 15px;
    margin:20px auto;
    min-height:auto;
}

.premium-box{
    width:100%;
    max-width:400px;
    padding:20px;
}

.crown{
    font-size:60px;
}

.premium-icon h2{
    font-size:28px;
}

.premium-box h1{
    font-size:24px;
}

.premium-description{
    font-size:15px;
}

/* Features */

.premium-features{
    grid-template-columns:1fr;
    gap:10px;
}

.feature-item{
    font-size:14px;
}

/* Buttons */

.premium-buy-btn,
.back-home-btn{
    width:100%;
    display:block;
    padding:14px;
    font-size:16px;
}

}

.home-title {

    text-align:center;

}


.home-title img {

    width:90px;
    height:82px;

    object-fit:contain;

    transform:translateY(-82px);

}


.home-title h1 {

    margin:0;

}

.profile-title {

    text-align:center;

}


.profile-title img {

    width:90px;

    height:82px;

    object-fit:contain;

    transform:translateY(-82px);

}


.profile-title h1 {

    margin:0;

}

.login-title {

    text-align:center;

}


.login-title img {

    width:90px;

    height:82px;

    object-fit:contain;

    transform:translateY(-82px);

}


.login-title h1 {

    margin:0;

}

/* ================= TITLES MOBILE ================= */

@media (max-width:768px){

.home-title,
.profile-title,
.login-title{
    text-align:center;
    padding:10px 15px;
}

.home-title img,
.profile-title img,
.login-title img{
    width:65px;
    height:60px;
    transform:none;
    margin-bottom:10px;
}

.home-title h1,
.profile-title h1,
.login-title h1{
    font-size:28px;
    line-height:1.3;
    margin:0;
}

}

/*========================== 
Premium Kart 
==========================*/

.premium-card{
    position: relative;
    overflow: hidden;
}

/*========================== 
     Kilit Katmanı 
==========================*/

.premium-lock{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    color:white;

    border-radius:inherit;

    z-index:10;

}


.lock-icon{

    font-size:50px;

    margin-bottom:10px;

}


.premium-lock h3{

    margin:5px;

    font-size:22px;

}


.premium-lock p{

    margin:5px;

    font-size:14px;

    opacity:.9;

}

/* ================= PREMIUM LOCK MOBILE ================= */

@media (max-width:768px){

.premium-card{
    width:100%;
}

.premium-lock{
    padding:15px;
    text-align:center;
}

.lock-icon{
    font-size:38px;
    margin-bottom:8px;
}

.premium-lock h3{
    font-size:18px;
    margin:6px 0;
}

.premium-lock p{
    font-size:13px;
    line-height:1.5;
    max-width:90%;
}

}

/*========================== 
     Ödeme Planı
==========================*/

.plan-options{

    display:flex;
    gap:20px;
    justify-content:center;
    margin:30px 0;

}


.plan{

    border:2px solid #ddd;

    padding:25px;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

    width:250px;

}


.plan:hover{

    transform:translateY(-5px);

}


.plan.selected{

    border:3px solid gold;

    box-shadow:0 0 20px rgba(255,215,0,.5);

}


.payment-btn{

    padding:15px 35px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

}

/* ================= PAYMENT PLAN MOBILE ================= */

@media (max-width:768px){

.plan-options{
    flex-direction:column;
    align-items:center;
    gap:15px;
    margin:20px 0;
}

.plan{
    width:100%;
    max-width:320px;
    padding:18px;
    box-sizing:border-box;
}

.plan h3{
    font-size:20px;
}

.plan p{
    font-size:14px;
}

.payment-btn{
    width:100%;
    max-width:320px;
    padding:14px;
    font-size:16px;
}

}

/*========================== 
     Membership Card
==========================*/

.floating-membership-card{

    position:absolute;

    top:115px;

    left:765px;

    width:90px;

    padding:8px 12px;

    border-radius:14px;


    background:linear-gradient(
        135deg,
        #ffffff,
        #f1f5ff
    );


    box-shadow:
    0 8px 20px rgba(0,0,0,.12);


    display:flex;

    align-items:center;

    gap:8px;


    z-index:20;

}


.floating-membership-card .membership-icon{

    font-size:22px;

}


.membership-info h3{

    margin:0;

    font-size:14px;

    line-height:1.2;

}


.membership-info p{

    margin:2px 0 0;

    font-size:12px;

    line-height:1.2;

}

.floating-membership-card.premium-active{

    background:linear-gradient(
        135deg,
        #fff7cc,
        #ffd700
    );


    border:1px solid #e6b800;


    box-shadow:
    0 8px 25px rgba(255,215,0,.45);

}


.floating-membership-card.premium-active 
.membership-icon{

    filter:drop-shadow(0 0 8px gold);

}

.floating-membership-card.free-active{

    background:linear-gradient(
        135deg,
        #dcfce7,
        #86efac
    );


    border:1px solid #22c55e;


    box-shadow:
    0 8px 25px rgba(34,197,94,.35);

}


.floating-membership-card.free-active 
.membership-icon{

    filter:drop-shadow(0 0 6px #22c55e);

}

/* ================= FLOATING MEMBERSHIP MOBILE ================= */

@media (max-width:768px){

.floating-membership-card{
    position:static;
    width:90%;
    max-width:280px;
    margin:15px auto;
    padding:12px 15px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    left:auto;
    top:auto;
}

.floating-membership-card .membership-icon{
    font-size:28px;
}

.membership-info h3{
    font-size:16px;
}

.membership-info p{
    font-size:13px;
}

}

/* ===============================
   MODERN LEGAL FOOTER
================================ */

.legal-footer{

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    color:white;

    padding:55px 8% 25px;

    margin-top:70px;

}


/* Footer Grid */

.footer-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:45px;

}

.footer-grid > div{
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* Footer Titles */

.footer-grid h3{

    font-size:22px;

    margin-bottom:18px;

    color:white;

    position:relative;

}


.footer-grid h3::after{

    content:"";

    display:block;

    width:45px;

    height:3px;

    background:#3b82f6;

    margin-top:10px;

    border-radius:10px;

}


/* Footer Text */

.footer-grid p{

    color:#cbd5e1;

    line-height:1.7;

    max-width:280px;

}


/* Footer Links */

.footer-grid a{

    display:block;

    text-decoration:none;

    color:#cbd5e1;

    margin-bottom:12px;

    transition:.3s;

    font-size:15px;

}


.footer-grid a:hover{

    color:white;

    transform:translateX(6px);

}


/* Divider */

.legal-footer hr{

    border:none;

    height:1px;

    background:
    rgba(255,255,255,.15);

    margin:35px 0 20px;

}


/* Copyright */

.legal-footer > p{

    text-align:center;

    color:#94a3b8;

    font-size:14px;

}


/* Hover Card Effect */

.footer-grid > div{

    transition:.3s;

}


.footer-grid > div:hover{

    transform:translateY(-5px);

}

/* ================= LEGAL FOOTER MOBILE ================= */

@media (max-width:768px){

.legal-footer{
    padding:40px 20px 20px;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
}

.footer-grid h3{
    font-size:20px;
}

.footer-grid h3::after{
    margin:10px auto 0;
}

.footer-grid p{
    max-width:100%;
    font-size:15px;
    margin:0 auto;
}

.footer-grid a{
    font-size:15px;
}

.footer-grid a:hover{
    transform:none;
}

.legal-footer hr{
    margin:30px 0 18px;
}

.legal-footer > p{
    font-size:13px;
    line-height:1.6;
}

}


/* Footer Social Icons */

.footer-social{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:20px;

}


.footer-social a img{

    width:32px;

    height:32px;

    object-fit:contain;

    transition:.3s ease;

}


.footer-social a:hover img{

    transform:translateY(-4px) scale(1.1);

}

/* ================= FOOTER SOCIAL MOBILE ================= */

@media (max-width:768px){

.footer-social{
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:20px;
}

.footer-social a img{
    width:28px;
    height:28px;
}

.footer-social a:hover img{
    transform:none;
}

}

/* ===============================
   UNIT VIDEO CARDS SMALL DESIGN
================================ */

.video-container{

    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;

}


.video-card{

    width:600px;

}


.video-card video{

    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:12px;

}


.video-card h3{

    font-size:15px;
    text-align:center;
    margin-top:10px;

}

/* ===============================
   TABLET RESPONSIVE
================================ */

@media(max-width:900px){

    .video-container{

        gap:15px;

    }


    .video-card{

        width:400px;

    }


    .video-card video{

        height:200px;

    }

}


/* ===============================
   MOBILE RESPONSIVE
================================ */

@media(max-width:600px){

    .video-container{

        flex-direction:column;
        align-items:center;
        gap:15px;

    }


    .video-card{

        width:100%;
        max-width:400px;

    }


    .video-card video{

        height:200px;

    }


    .video-card h3{

        font-size:14px;

    }

}

/* ===============================
   TENSE VIDEO CARD
================================ */

.tense-video-card{
    width:100%;
    max-width:800px;
    margin:40px auto;
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    border:1px solid #e5e7eb;
    transition:.3s ease;
}

.tense-video-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.tense-video-card video{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
}

/* ===============================
   TABLET
================================ */

@media (max-width:992px){

    .tense-video-card{
        max-width:95%;
        margin:30px auto;
        border-radius:18px;
    }

    .tense-video-card video{
        border-radius:18px;
    }

}


/* ===============================
   MOBILE
================================ */

@media (max-width:768px){

    .tense-video-card{
        width:100%;
        max-width:100%;
        margin:25px 15px;
        border-radius:16px;
        box-shadow:0 8px 20px rgba(0,0,0,.12);
    }

    .tense-video-card video{
        width:100%;
        height:auto;
        border-radius:16px;
    }

}


/* ===============================
   SMALL PHONES
================================ */

@media (max-width:480px){

    .tense-video-card{
        margin:20px 10px;
        border-radius:14px;
    }

    .tense-video-card video{
        border-radius:14px;
    }

}

/* ===============================
   MODERN ACCOUNT SETTINGS MODAL
================================ */

.settings-btn{

    position:absolute;

    top:-53px;

    right:-23px;


     background:rgba(255,255,255,.18);

    color:white;

    border:1px solid rgba(255,255,255,.35);

    padding:8px 12px;

    border-radius:10px;

    cursor:pointer;

    font-size:12px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:6px;

    backdrop-filter:blur(8px);

    transition:.3s ease;

}


.settings-btn:hover{

    background:rgba(255,255,255,.35);

    transform:translateY(-2px);

}

.settings-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(6px);

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding-left:160px;

}



.settings-content{

    width:230px;

    max-width:90%;

    background:#fff;

    border-radius:18px;

    padding:16px 20px;

}



@keyframes settingsShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }


    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}



/* Close Button */

.close-btn{

    position:absolute;

    top:25px;

    right:22px;

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f1f5f9;

    color:#64748b;

    font-size:20px;

}


.close-btn:hover{

    background:#ef4444;

    color:white;

}



/* Title */

.settings-content h2{

    font-size:18px !important;

    font-weight:700;

    margin:0 0 12px;

}


/* Input Areas */

.setting-box{

    width:100%;

    margin-bottom:10px;

}



.setting-box label{

    font-size:12px;

    font-weight:600;

    color:#475569;

    margin-bottom:6px;

    display:block;

}



.setting-box input{

    width:100%;

    box-sizing:border-box;

    padding:8px 12px;

    border-radius:12px;

    border:1px solid #e2e8f0;

    background:#f8fafc;

    font-size:13px;

}




.setting-box input:focus{

    background:white;

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);

}



/* Save Button */

#saveSettings{

    width:50%;

    padding:9px;

    margin-top:20px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}


#saveSettings:hover{

    transform:translateY(-3px);

    box-shadow:
    0 12px 25px rgba(37,99,235,.3);

}


/* Message */

#settingsMessage{

    font-size:13px;

    text-align:center;

    margin-top:8px;

}


#profileInitial{

    width:100%;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:42px;
    font-weight:700;

    color:white;

}

.profile-avatar{

    position:relative;

    width:120px;
    height:120px;

    border-radius:50%;

    overflow:hidden;

    cursor:pointer;

}

.avatar-camera{

    position:absolute;

    right:0;
    bottom:0;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:16px;

    border:3px solid #fff;

    transition:.3s;

}

.profile-avatar:hover .avatar-camera{

    transform:scale(1.12);

}

/* =====================================
   ACCOUNT SETTINGS MOBILE RESPONSIVE
===================================== */

@media(max-width:600px){


    /* Settings Button */

    .settings-btn{

        position:static;

        width:100%;

        margin-top:15px;

        padding:10px 12px;

        font-size:13px;

        border-radius:12px;

    }



    /* Modal */

    .settings-modal{

        padding:15px;

    }



    .settings-content{

        width:100%;

        max-width:330px;

        padding:18px;

        border-radius:18px;

    }



    /* Title */

    .settings-content h2{

        font-size:17px;

        margin-bottom:18px;

    }



    /* Close Button */

    .close-btn{

        width:28px;

        height:28px;

        top:10px;

        right:12px;

        font-size:18px;

    }



    /* Inputs */

    .setting-box{

        margin-bottom:12px;

    }


    .setting-box label{

        font-size:12px;

    }


    .setting-box input{

        padding:10px;

        font-size:13px;

    }



    /* Save Button */

    #saveSettings{

        padding:10px;

        font-size:13px;

    }



    /* Profile Avatar */

    .profile-avatar{

        width:90px;

        height:90px;

    }



    #profileInitial{

        font-size:34px;

    }



    .avatar-camera{

        width:5px;

        height:5px;

        font-size:5px;

        border-width:2px;

    }


}


/* Small Phones */

@media(max-width:400px){


    .settings-content{

        max-width:300px;

        padding:15px;

    }


    .settings-content h2{

        font-size:16px;

    }


    .settings-btn{

        font-size:12px;

    }


}


/* ==========================================
   STUDY PLAN NEW CARD
========================================== */

.study-plan-card{

    background:#fff;
    border-radius:18px;
    padding:25px;
    margin-top:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.study-plan-card h2{

    margin-bottom:20px;

    color:#1e3a8a;

}

.study-program-img{

    width:70%;

    display:block;

    margin:0 auto;

    border-radius:15px;

}

/* ==========================================
   STUDY PLAN CARD RESPONSIVE
========================================== */

@media (max-width:768px){

    .study-plan-card{

        width:100%;
        max-width:100%;
        padding:18px;
        margin-top:20px;
        border-radius:16px;
        box-sizing:border-box;

    }

    .study-plan-card h2{

        font-size:20px;
        text-align:center;

    }

    .study-program-img{

        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        object-fit:contain;
        margin:auto;

    }

}

@media (max-width:480px){

    .study-plan-card{

        padding:15px;
        margin-top:20px;

    }

    .study-plan-card h2{

        font-size:18px;

    }

    .study-program-img{

        width:100%;
        border-radius:10px;

    }

}

/* PROFILE CARD MODERN DESIGN */

#profileCard{

    border-radius:24px;

    padding:30px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

    transition:.3s ease;

    overflow:hidden;

    position:relative;

}


/* FREE MEMBER */

#profileCard.free{

    background:linear-gradient(
        135deg,
        #34d399,
        #059669
    ) !important;

}


/* PREMIUM MEMBER */

#profileCard.premium{

    background:linear-gradient(
        135deg,
        #fde68a,
        #f59e0b
    ) !important;

}


/* LIGHT EFFECT */

#profileCard::before{

    content:"";

    position:absolute;

    width:200px;
    height:200px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    top:-80px;
    right:-80px;

}


/* TOP AREA */

.profile-top{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:25px;

}


/* AVATAR */

.profile-avatar{

    width:110px;
    height:110px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.8);

    box-shadow:
    0 8px 20px rgba(0,0,0,.2);

    overflow:hidden;

}


/* NAME */

.profile-info h2{

    font-size:28px;

    font-weight:800;

    color:white;

}


.profile-info p{

    color:rgba(255,255,255,.9);

}

/* ===============================
   HOME MEMBERSHIP CARD
================================ */

#memberCard{

    transition:.3s ease;

    color:white;

}


/* FREE */

#memberCard.free{

    background:linear-gradient(
        135deg,
        #34d399,
        #059669
    ) !important;

}


/* PREMIUM */

#memberCard.premium{

    background:linear-gradient(
        135deg,
        #fde68a,
        #f59e0b
    ) !important;

}


#memberCard:hover{

    transform:translateY(-5px);

}

/* =====================================
   PROFILE & MEMBERSHIP MOBILE
===================================== */

@media (max-width:768px){

    /* Profile Card */

    #profileCard{

        padding:20px;

        border-radius:20px;

    }


    #profileCard::before{

        width:150px;
        height:150px;

        top:-60px;
        right:-60px;

    }


    /* Profile Top */

    .profile-top{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }


    /* Avatar */

    .profile-avatar{

        width:90px;
        height:90px;

        border-width:3px;

    }


    /* Name */

    .profile-info h2{

        font-size:22px;

    }


    .profile-info p{

        font-size:14px;

    }


    /* Membership Card */

    #memberCard{

        width:100%;

        padding:20px;

        border-radius:20px;

    }

}


/* Small Phones */

@media (max-width:480px){

    #profileCard{

        padding:18px;

        border-radius:18px;

    }


    #profileCard::before{

        width:120px;
        height:120px;

        top:-50px;
        right:-50px;

    }


    .profile-avatar{

        width:75px;
        height:75px;

    }


    .profile-info h2{

        font-size:20px;

    }


    .profile-info p{

        font-size:13px;

    }


    #memberCard{

        padding:18px;

        border-radius:18px;

    }

}

/* MOBİL GENEL TAŞMA KONTROLÜ */
*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}


/* ===========================
   WEEKLY STUDY PROGRAM
=========================== */

.weekly-plan{
    margin:40px auto;
}

.weekly-plan h2{
    text-align:center;
    margin-bottom:30px;
    color:#1e3a8a;
    font-size:2rem;
}

.week-grid{

    display:grid;

    grid-template-columns:repeat(7,230px);

    justify-content:center;

    gap:10px;

}

.day-card{

    background:#fff;

    border-radius:18px;

    padding:16px;

    box-shadow:0 8px 24px rgba(15,23,42,.08);

    transition:.25s ease;

}

.day-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 38px rgba(15,23,42,.14);

}

.day-card h3{

    text-align:center;

    margin-bottom:15px;

    font-size:1.2rem;

}

.day-card p{

    margin:10px 0;

    font-size:.95rem;

}

/* Gün renkleri */

.day-card:nth-child(1){border-top-color:#3b82f6;}
.day-card:nth-child(2){border-top-color:#22c55e;}
.day-card:nth-child(3){border-top-color:#a855f7;}
.day-card:nth-child(4){border-top-color:#f97316;}
.day-card:nth-child(5){border-top-color:#ef4444;}
.day-card:nth-child(6){border-top-color:#eab308;}
.day-card:nth-child(7){border-top-color:#6b7280;}

/* Tablet */

@media(max-width:1200px){

    .week-grid{

        grid-template-columns:repeat(4,1fr);

    }

}

/* Mobil */

@media (max-width:768px){

    .week-grid{
        display:flex;
        overflow-x:auto;
        gap:14px;
        padding:10px 16px 15px;
        justify-content:flex-start;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

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

    .day-card{
        flex:0 0 calc(100%); /* Her kaydırmada 1 kart */
        max-width:250px;
        scroll-snap-align:center;
    }

    .task-count{

        font-size:.9rem;

    }

    .tap-open{

        font-size:.8rem;

    }

}

/* ===========================
   CARD MODAL
=========================== */

.card-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:9999;

}

.card-modal.show{

    display:flex;

}

.card-modal-content{

    background:#fff;

    width:100%;

    max-width:420px;

    border-radius:24px;

    padding:30px;

    position:relative;

    animation:zoomIn .25s ease;

}

#closeCardModal{

    position:absolute;

    top:15px;

    right:20px;

    font-size:32px;

    cursor:pointer;

}

@keyframes zoomIn{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.modal-day-header h2{

    text-align:center;

    margin-bottom:20px;

    color:#1e3a8a;

}

.modal-task-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.modal-task{

    background:#f8fafc;

    border-radius:12px;

    padding:14px;

    font-size:1rem;

    border-left:5px solid #2563eb;

}

.card-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

}

/* ===========================
   DESKTOP WEEKLY PLAN CARDS
=========================== */

.desktop-card-header{

    border-top:6px solid var(--card-color);

    margin:-16px -16px 16px;

    padding:18px;

    background:#fff;

    border-radius:18px 18px 0 0;

}

.desktop-card-header h3{

    margin:0;

    color:#111827;

    font-size:24px;

    font-weight:700;

    text-align:center;

}

.desktop-task-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.desktop-task{

    background:#f8fafc;

    border-radius:12px;

    padding:14px 16px;

    text-align:left;

    font-size:15px;

    font-weight:500;

    color:#334155;

    transition:.2s;

}

.desktop-task:hover{

    background:#eef5ff;

    transform:translateX(5px);

}

.desktop-footer{

    color:#64748b;

    font-size:14px;

}

 /* Mobil modal içinde masaüstü kartı */

@media (max-width:768px){

    .card-modal-content{

        width:85%;
        max-width:340px;

    }

    .card-modal-content .desktop-card-header{

        margin:0 0 18px;

        border-radius:14px 14px 0 0;

    }

    .card-modal.show .card-modal-content{

    transform:scale(1);

}

    .card-modal-content .desktop-task-list{

        gap:12px;

    }

    .card-modal-content .desktop-task{

        font-size:15px;

        padding:14px;

    }

#closeCardModal{

    position:absolute;

    top:12px;

    right:16px;

    font-size:30px;

    cursor:pointer;

    color:#64748b;

}

}