/*==================================================
ONLINE SINAV SİSTEMİ
Kızılelma Özel Güvenlik
==================================================*/


/*==============================
ROOT
==============================*/

:root{

    --kg-primary:#4f8cff;
    --kg-primary-light:#76a8ff;
    --kg-bg:#08111f;
    --kg-bg2:#0f172a;
    --kg-card:rgba(16,24,40,.72);
    --kg-border:rgba(255,255,255,.08);
    --kg-white:#ffffff;
    --kg-text:#d7e4ff;
    --kg-muted:#91a4c6;

}


/*==============================
RESET
==============================*/

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

body{

    font-family:Poppins,sans-serif;

    background:
    radial-gradient(circle at top right,
    rgba(79,140,255,.18),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(124,77,255,.10),
    transparent 30%),

    var(--kg-bg);

    color:var(--kg-white);

    min-height:100vh;

}


/*==============================
GENEL
==============================*/

.kg-exam-system{

    width:min(1700px,95%);
    margin:auto;

    padding:35px 0 40px;

}


/*==============================
HEADER
==============================*/

.kg-exam-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    margin-bottom:18px;

}


.kg-exam-back{

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;
    text-decoration:none;

    padding:14px 22px;

    border-radius:16px;

    background:rgba(255,255,255,.05);

    border:1px solid var(--kg-border);

    transition:.35s;

}


.kg-exam-back:hover{

    transform:translateY(-3px);

    border-color:var(--kg-primary);

    box-shadow:0 15px 35px rgba(79,140,255,.25);

}


.kg-exam-title{

    text-align:center;
    flex:1;

}


.kg-exam-title h1{

    font-size:30px;
    font-weight:700;

    margin-bottom:8px;

}


.kg-exam-title p{

    color:var(--kg-muted);

}


.kg-exam-title strong{

    color:var(--kg-primary-light);

}


.kg-exam-timer{

    min-width:170px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    padding:18px;

    border-radius:18px;

    background:var(--kg-card);

    backdrop-filter:blur(18px);

    border:1px solid var(--kg-border);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}


.kg-exam-timer i{

    color:var(--kg-primary);

}


.kg-exam-timer span{

    font-size:28px;
    font-weight:700;

    letter-spacing:1px;

}


/*==============================
PROGRESS
==============================*/

.kg-exam-progress{

    height:12px;

    border-radius:50px;

    background:rgba(255,255,255,.06);

    overflow:hidden;

    margin-bottom:35px;

}


.kg-exam-progress-bar{

    width:0%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(90deg,#4f8cff,#76a8ff);

}


/*==============================
LAYOUT
==============================*/

.kg-exam-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 310px;

    gap:28px;

    align-items:start;

}


/*==============================
CONTENT
==============================*/

.kg-exam-content{

    min-height:700px;

}


/*==============================
SIDEBAR
==============================*/

.kg-exam-sidebar{

    min-height:700px;

}

/*==================================================
SORU ALANI
==================================================*/

.kg-exam-question-card{

    background:var(--kg-card);

    backdrop-filter:blur(18px);

    border:1px solid var(--kg-border);

    border-radius:28px;

    padding:35px;

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

}


/* ÜST */

.kg-exam-question-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


.kg-exam-question-number{

    display:flex;

    align-items:center;

    gap:12px;

}


.kg-exam-question-number span{

    width:48px;
    height:48px;

    border-radius:14px;

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

    background:linear-gradient(135deg,#4f8cff,#2563eb);

    font-weight:700;

    box-shadow:0 15px 35px rgba(79,140,255,.35);

}


.kg-exam-question-number h3{

    font-size:22px;

}


.kg-exam-question-count{

    color:var(--kg-muted);

}


/* METİN */

.kg-exam-question-text{

    font-size:22px;

    line-height:1.9;

    color:#f5f7fb;

    margin-bottom:40px;

}


/* ŞIKLAR */

.kg-exam-options{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.kg-exam-option{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    border-radius:18px;

    cursor:pointer;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    transition:.30s;

}


.kg-exam-option:hover{

    transform:translateX(6px);

    border-color:#4f8cff;

    background:rgba(79,140,255,.08);

}


.kg-exam-option-letter{

    width:46px;
    height:46px;

    border-radius:50%;

    background:#17243b;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    color:#76a8ff;

    flex-shrink:0;

}


.kg-exam-option-text{

    flex:1;

    line-height:1.7;

    color:#d7e4ff;

}


/* ALT */

.kg-exam-navigation{

    display:flex;

    justify-content:space-between;

    gap:18px;

    margin-top:45px;

}


.kg-exam-btn{

    border:none;

    cursor:pointer;

    padding:16px 30px;

    border-radius:16px;

    font-size:15px;

    font-weight:600;

    transition:.30s;

}


.kg-exam-btn-prev{

    background:rgba(255,255,255,.05);

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

}


.kg-exam-btn-next{

    background:linear-gradient(135deg,#4f8cff,#2563eb);

    color:#fff;

    box-shadow:0 18px 40px rgba(79,140,255,.35);

}


.kg-exam-btn:hover{

    transform:translateY(-3px);

}

/*=========================================
SIDEBAR
=========================================*/

.kg-exam-sidebar{

    position:sticky;
    top:25px;

    display:flex;
    flex-direction:column;
    gap:20px;

}

.kg-sidebar-card{

    background:var(--kg-card);

    border:1px solid var(--kg-border);

    backdrop-filter:blur(18px);

    border-radius:24px;

    padding:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.kg-sidebar-card h3{

    margin-bottom:12px;

    font-size:17px;

}

.kg-sidebar-stats{

    display:flex;
    flex-direction:column;

}

.kg-stat-item{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:2px 0;
}

.kg-stat-item span{

    color:var(--kg-muted);
    font-size:14px;

}

.kg-stat-item strong{

    color:var(--kg-primary-light);

    font-size:16px;

}

/* Soru sütun sayısı */
.kg-question-palette{

    display:grid;

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

    gap:7px;

}

.kg-question-number{

    aspect-ratio:1/1;

    width:100%;

    border:none;

    cursor:pointer;

    border-radius:10px;

    background:#17243b;

    color:#fff;

    font-size:13px;

    font-weight:600;

    transition:.30s;

}

.kg-question-number:hover{

    background:#4f8cff;

}

.kg-question-number.active{

    background:#4f8cff;

    box-shadow:0 0 18px rgba(79,140,255,.45);

}

.kg-legend{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.kg-legend div{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--kg-text);

}

.kg-dot{

    width:14px;
    height:14px;

    border-radius:50%;

}

.kg-dot.current{

    background:#4f8cff;

}

.kg-dot.answered{

    background:#22c55e;

}

.kg-dot.empty{

    background:#64748b;

}

.kg-finish-btn{

    border:none;

    cursor:pointer;
    margin-top:18px;
    padding:15px;

    border-radius:18px;

    font-size:15px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(135deg,#ef4444,#dc2626);

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

    transition:.30s;

}

.kg-finish-btn:hover{

    transform:translateY(-3px);

}

/*=========================================
QUESTION CARD
=========================================*/

.kg-question-card{

    background:var(--kg-card);
    border:1px solid var(--kg-border);

    border-radius:28px;

    backdrop-filter:blur(18px);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    padding:15px !important;

}

.kg-question-header{

    margin-bottom:12px !important;

}

.kg-question-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.kg-question-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#4f8cff;

    color:#fff;

    padding:7px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    line-height:1;

    letter-spacing:.2px;

}

.kg-question-type{

    color:#76a8ff;

    font-weight:600;

}

.kg-question-text{

    font-size:20px !important;

    line-height:1.5 !important;

    color:#fff;

    margin-bottom:14px !important;

}

.kg-question-image{

    display:none;

}

.kg-options{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.kg-option{

    width:100%;

    display:flex;

    align-items:center;

    gap:18px;

    padding:14px 20px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    transition:.30s;

}

.kg-option:hover{

    border-color:#4f8cff;

    background:rgba(79,140,255,.08);

    transform:translateX(5px);

}

.kg-option-letter{

    width:38px;

    height:38px;

    font-size:14px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#17243b;

    color:#76a8ff;

    font-weight:700;

    flex-shrink:0;

}

.kg-option-text{

    color:#fff;

    text-align:left;

    line-height:1.6;

}

.kg-option.selected{

    border-color:var(--primary-color);

    background:rgba(79,140,255,.12);

    box-shadow:0 0 20px rgba(79,140,255,.25);

}

.kg-option.selected .kg-option-letter{

    background:var(--primary-color);

    color:#fff;

}

.kg-question-footer{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:16px;

}

.kg-nav-btn,
.kg-clear-btn{

    height:46px;
    padding:0 22px;
    font-size:14px;
    border:none;

    border-radius:16px;

    cursor:pointer;

    font-weight:600;

}

.kg-nav-btn{

    background:#4f8cff;

    color:#fff;

}

.kg-clear-btn{

    background:rgba(255,255,255,.05);

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

}

.kg-next{

    background:#2563eb;

}

.kg-nav-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

    filter:grayscale(.3);

}

.kg-nav-btn:disabled:hover{

    transform:none;

}

/* Cevaplanan soru */

.kg-question-number.answered{

    background:goldenrod;
    border-color:goldenrod;
    color:#fff;

}


/* Modal */

.kg-exam-modal{

    position:fixed;
    inset:0;

    background:rgba(8,12,20,.75);
    backdrop-filter:blur(8px);

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

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.kg-exam-modal.show{

    opacity:1;
    visibility:visible;

}

.kg-exam-modal-box{

    width:min(460px,92%);
    background:#141b29;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:40px;

    text-align:center;

}

.kg-exam-modal-icon{

    width:80px;
    height:80px;

    margin:auto auto 20px;

    border-radius:50%;

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

    background:rgba(79,140,255,.15);

    color:#4f8cff;

    font-size:34px;

}

.kg-modal-btn{

    width:100%;
    margin-top:30px;

    height:56px;

    border:none;
    border-radius:14px;

    background:linear-gradient(135deg,#4f8cff,#3b82f6);

    color:#fff;

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

    cursor:pointer;

    transition:.3s;

}

.kg-exit-btn{

    width:100%;
    margin-top:30px;

    height:56px;

    border:none;
    border-radius:14px;

    background:linear-gradient(135deg,#f32222,#a80202);

    color:#fff;

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

    cursor:pointer;

    transition:.3s;

}

.kg-exit-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(255, 0, 0, 0.35);

}

.kg-exit-btn:active{

    transform:scale(.98);

}


.kg-modal-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(79,140,255,.35);

}

.kg-modal-btn:active{

    transform:scale(.98);

}


.kg-exam-modal-icon{

    width:90px;
    height:90px;

    margin:auto auto 25px;

    border-radius:50%;

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

    background:rgba(79,140,255,.12);

    border:1px solid rgba(79,140,255,.25);

    color:#4f8cff;

    font-size:38px;

    box-shadow:0 0 30px rgba(79,140,255,.25);

}


@keyframes kgPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.kg-exam-modal-icon{

    animation:kgPulse 2s infinite;

}

.kg-exam-progress{

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    background:rgba(255,255,255,.03);

    color:#fff;

}

.kg-exam-progress i{

    color:#22c55e;

    font-size:18px;

}
/* =========================================================
   SINAV SONUÇ EKRANI
========================================================= */

.kg-result-screen {

    position: fixed;

    inset: 0;

    display: none;

    align-items: flex-start;

    justify-content: center;

    padding: 45px 20px;

    overflow-y: auto;

    background:
        rgba(5, 9, 18, .94);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    z-index: 999999;

}


.kg-result-screen.show {

    display: flex;

}


/* =========================================================
   ANA KART
========================================================= */

.kg-result-card {

    position: relative;

    width: min(760px, 100%);

    margin: auto;

    padding: 38px;

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #192438 0%,
            #111a2b 100%
        );

    border:
        1px solid
        rgba(255,255,255,.08);

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.55);

    overflow: hidden;

    animation:
        resultPopup .45s ease;

}


/* Glow */

.kg-result-card::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -160px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(79,140,255,.13);

    filter:
        blur(70px);

    pointer-events: none;

}


.kg-result-card::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    bottom: -150px;
    left: -100px;

    border-radius: 50%;

    background:
        rgba(124,77,255,.10);

    filter:
        blur(80px);

    pointer-events: none;

}


/* =========================================================
   HEADER
========================================================= */

.kg-result-header {

    position: relative;

    z-index: 2;

    text-align: center;

}


.kg-result-icon {

    width: 82px;
    height: 82px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #4f8cff;

    background:
        rgba(79,140,255,.10);

    border:
        1px solid
        rgba(79,140,255,.25);

    font-size: 34px;

    box-shadow:
        0 0 35px
        rgba(79,140,255,.18);

}


.kg-result-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 15px;

    margin-bottom: 14px;

    border-radius: 999px;

    color: #8ab4ff;

    background:
        rgba(79,140,255,.08);

    border:
        1px solid
        rgba(79,140,255,.18);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .5px;

}


.kg-result-header h2 {

    margin: 0 0 12px;

    font-size: 34px;

    font-weight: 700;

    color: #fff;

}


.kg-result-status {

    display: inline-flex;

    padding: 8px 18px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .4px;

}


.kg-result-status.success {

    color: #22c55e;

    background:
        rgba(34,197,94,.10);

    border:
        1px solid
        rgba(34,197,94,.22);

}


.kg-result-status.danger {

    color: #ef4444;

    background:
        rgba(239,68,68,.10);

    border:
        1px solid
        rgba(239,68,68,.22);

}


#resultMessage {

    max-width: 550px;

    margin: 15px auto 0;

    color:
        #8e9ab0;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   SINAV META
========================================================= */

.kg-result-meta {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 28px 0;

}


/* =====================================================
   SINAV BİLGİLERİ
===================================================== */

.kg-result-meta {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 25px;

    margin-bottom: 40px;

}


/* =====================================================
   SINAV BAŞLIĞI
===================================================== */

.kg-result-meta-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 100%;

    text-align: center;

    color: #ffffff;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.4;

}

.kg-result-meta-title i {

    color: #4f8cff;

    font-size: 16px;

}


/* =====================================================
   SORU + SÜRE BADGELERİ
===================================================== */

.kg-result-meta-badges {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}


.kg-result-meta-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 13px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.06);

    color: #c6d1e5;

    font-size: 13px;

    white-space: nowrap;

}


.kg-result-meta-item i {

    color: #4f8cff;

    font-size: 14px;

}


/* =====================================================
   MOBİL
===================================================== */

@media (max-width: 600px) {

    .kg-result-meta {

        gap: 14px;

        margin-top: 20px;

        margin-bottom: 30px;

    }


    .kg-result-meta-title {

        padding: 0 10px;

        font-size: 15px;

        line-height: 1.5;

        text-align: center;

    }


    .kg-result-meta-badges {

        width: 100%;

        gap: 8px;

    }


    .kg-result-meta-item {

        padding: 10px 13px;

        font-size: 12px;

    }

}


/* =========================================================
   PUAN KARTLARI
========================================================= */

.kg-result-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 14px;

    margin: 25px 0;

}


.kg-result-item {

    position: relative;

    padding: 22px;

    text-align: center;

    border-radius: 18px;

    background:
        rgba(8,15,30,.62);

    border:
        1px solid
        rgba(255,255,255,.055);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.kg-result-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(79,140,255,.22);

    background:
        rgba(79,140,255,.055);

}


.kg-score-card-icon {

    width: 34px;
    height: 34px;

    margin: 0 auto 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color:
        #4f8cff;

    background:
        rgba(79,140,255,.10);

    font-size: 14px;

}


.kg-result-item h3 {

    margin: 0 0 6px;

    font-size: 32px;

    line-height: 1;

    color: #fff;

}


.kg-result-item span {

    color:
        #737f94;

    font-size: 11px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .5px;

}


/* Temel */

#resultBasicCard h3 {

    color: #4f8cff;

}


/* Silah */

#resultWeaponCard h3 {

    color: #a78bfa;

}


/* Doğru */

#resultCorrectCard h3 {

    color: #22c55e;

}


/* Yanlış */

#resultWrongCard h3 {

    color: #ef4444;

}


/* =========================================================
   GENEL PUAN
========================================================= */

.kg-total-score {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 18px 22px;

    margin: 18px 0;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(79,140,255,.10),
            rgba(124,77,255,.08)
        );

    border:
        1px solid
        rgba(79,140,255,.16);

}


.kg-total-score-left {

    display: flex;

    align-items: center;

    gap: 12px;

}


.kg-total-score-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #f59e0b;

    background:
        rgba(245,158,11,.10);

}


.kg-total-score-left span {

    display: block;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

}


.kg-total-score-left small {

    display: block;

    margin-top: 3px;

    color: #707c91;

    font-size: 11px;

}


.kg-total-score > strong {

    font-size: 30px;

    color: #fff;

}


/* =========================================================
   DETAYLI ANALİZ
========================================================= */

.kg-question-summary {

    position: relative;

    z-index: 2;

    margin-top: 28px;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(8,15,30,.55);

    border:
        1px solid
        rgba(255,255,255,.055);

}


.kg-question-summary-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}


.kg-question-summary-header > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.kg-question-summary-header i {

    color: #4f8cff;

}


.kg-question-summary-header strong {

    color: #d9e0ec;

    font-size: 14px;

}


.kg-question-summary-header span {

    color: #657187;

    font-size: 12px;

}


/* Bar */

.kg-analysis-bar {

    display: flex;

    width: 100%;

    height: 13px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.06);

}


.kg-analysis-correct {

    width: 0%;

    background: #22c55e;

    transition: width .5s ease;

}


.kg-analysis-wrong {

    width: 0%;

    background: #ef4444;

    transition: width .5s ease;

}


.kg-analysis-empty {

    width: 0%;

    background: #cbd5e1;

    transition: width .5s ease;

}


/* Legend */

.kg-analysis-legend {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 13px;

}


.kg-analysis-legend span {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #69758a;

    font-size: 11px;

}


.kg-analysis-legend strong {

    color: #aeb8c9;

}


.kg-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

}


.kg-dot.correct {

    background: #22c55e;

}


.kg-dot.wrong {

    background: #ef4444;

}


.kg-dot.empty {

    background: #cbd5e1;

}


/* =========================================================
   BUTONLAR
========================================================= */

.kg-result-buttons {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 25px;

}


.kg-result-buttons .kg-modal-btn {

    min-height: 54px;

    border-radius: 14px;

    font-size: 13px;

    font-weight: 600;

}


.kg-review-btn {

    color: #6fa3ff;

    background:
        rgba(79,140,255,.06);

    border:
        1px solid
        rgba(79,140,255,.25);

}


.kg-review-btn:hover {

    background:
        rgba(79,140,255,.11);

}


.kg-restart-btn {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #4f8cff,
            #7c4dff
        );

    border: none;

    box-shadow:
        0 10px 30px
        rgba(79,140,255,.18);

}


.kg-restart-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(79,140,255,.28);

}


/* =========================================================
   ANİMASYON
========================================================= */

@keyframes resultPopup {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 600px) {

    .kg-result-screen {

        padding:
            20px 12px;

    }


    .kg-result-card {

        padding:
            26px 18px;

        border-radius:
            22px;

    }


    .kg-result-header h2 {

        font-size: 28px;

    }


    .kg-result-grid {

        gap: 10px;

    }


    .kg-result-item {

        padding:
            18px 12px;

    }


    .kg-result-item h3 {

        font-size: 28px;

    }


    .kg-result-meta {

        flex-direction:
            column;

    }


    .kg-result-meta-item {

        justify-content:
            center;

    }


    .kg-result-buttons {

        grid-template-columns:
            1fr;

    }


    .kg-analysis-legend {

        gap: 10px;

    }

}

.kg-progress-wrapper{

    margin-top:16px;

}

.kg-progress-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    color:#bfc9da;

    font-size:13px;

}

.kg-progress-bar{

    width:100%;

    height:10px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    overflow:hidden;

}

.kg-progress-fill{

    width:0%;

    height:100%;

    border-radius:999px;

    background:linear-gradient(90deg,#4f8cff,#7c4dff);

    transition:.35s;

    box-shadow:0 0 18px rgba(79,140,255,.45);

}

.kg-modal-overlay{

    position:fixed;
    inset:0;

    display:none;

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

    padding:20px;

    background:rgba(8,12,20,.78);

    backdrop-filter:blur(8px);

    z-index:999999;

}

.kg-modal-overlay.show{

    display:flex;

}

.kg-modal{

    width:min(480px,100%);

    padding:40px;

    border-radius:28px;

    background:linear-gradient(180deg,#182233 0%,#111927 100%);

    border:1px solid rgba(255,255,255,.08);

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

    text-align:center;

}

.kg-modal-icon{

    width:80px;
    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

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

    background:rgba(79,140,255,.12);

    border:1px solid rgba(79,140,255,.25);

    color:#4f8cff;

    font-size:34px;

}

.kg-modal h2{

    color:#fff;

    font-size:28px;

    margin-bottom:15px;

}

.kg-modal p{

    color:#9fb0c9;

    line-height:1.7;

    margin-bottom:35px;

}

.kg-modal-buttons{

    display:flex;

    gap:16px;

}

.kg-modal-btn{

    flex:1;

    height:54px;

    border:none;

    border-radius:16px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.kg-modal-cancel{

    background:rgba(255,255,255,.06);

    color:#fff;

}

.kg-modal-cancel:hover{

    background:rgba(255,255,255,.12);

}

.kg-modal-confirm{

    background:linear-gradient(135deg,#4f8cff,#7c4dff);

    color:#fff;

}

.kg-modal-confirm:hover{

    transform:translateY(-3px);

    box-shadow:0 16px 35px rgba(79,140,255,.35);

}

@media(max-width:768px){

    .kg-modal{

        padding:30px 22px;

    }

    .kg-modal-buttons{

        flex-direction:column;

    }

}

.kg-option.correct{

    border-color:#22c55e;

    background:rgba(34,197,94,.15);

    color:#22c55e;

}

.kg-option.wrong{

    border-color:#ef4444;

    background:rgba(239,68,68,.15);

    color:#ef4444;

}

.kg-question-explanation{

    display:none;

    margin-top:30px;

    padding:24px;

    border-radius:18px;

    background:rgba(79,140,255,.08);

    border:1px solid rgba(79,140,255,.18);

}

.kg-question-explanation.show{

    display:block;

}

.kg-explanation-title{

    display:flex;
    align-items:center;
    gap:10px;

    color:#4f8cff;

    font-size:18px;

    font-weight:700;

    margin-bottom:15px;

}

.kg-question-explanation p{

    color:#dbe7ff;

    line-height:1.8;

}

#clearAnswerBtn:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

    filter:grayscale(.3);

}

#finishExamBtn.review-mode{

    background:linear-gradient(135deg,#4f8cff,#2d6bff);

}

#finishExamBtn.review-mode {

    background: linear-gradient(135deg,#4f8cff,#2d6bff);

    box-shadow: 0 12px 30px rgba(79,140,255,.35);

}

#finishExamBtn.review-mode:hover {

    box-shadow: 0 16px 36px rgba(79,140,255,.45);

}

/*=========================================
   EXAM SYSTEM MOBILE RESPONSIVE
=========================================*/

@media(max-width:768px){


    .kg-exam-system{

        width:94%;

        padding:20px 0 30px;

    }


    /* HEADER */

    .kg-exam-header{

        flex-direction:column;
        display:flex;

        align-items:stretch;

        gap:15px;

    }


    .kg-exam-back{

        justify-content:center;
        padding:10px 12px;
        font-size:14px;

    }


    .kg-exam-title h1{
        font-size:20px;
        line-height:1.35;

    }


    .kg-exam-title p{

        font-size:14px;

    }


    .kg-exam-timer{

        min-width:auto;

        width:100%;

        padding:10px;

    }


    .kg-exam-timer span{

        font-size:22px;

    }


    .kg-exam-progress{

        width:100%;

    }



    /* ANA GRID */

    .kg-exam-layout{

        grid-template-columns:1fr;

        gap:20px;

    }



    /* SORU */

    .kg-question-card{

        padding:55px;

        border-radius:22px;

    }


    .kg-question-info{

        gap:10px;

    }


    .kg-question-badge{

        padding:6px 14px;

        font-size:13px;

    }


    .kg-question-type{

        font-size:13px;

    }


    .kg-question-text{

        font-size:18px;

        line-height:1.6;

    }


    .kg-option{

        padding:14px;

        gap:12px;

        border-radius:14px;

    }


    .kg-option-letter{

        width:38px;

        height:38px;

    }


    .kg-option-text{

        font-size:14px;

    }



    /* ALT BUTONLAR */

    .kg-question-footer{

        flex-direction:column;

        margin-top:25px;

    }


    .kg-nav-btn,
    .kg-clear-btn{

        width:100%;

        padding:14px;

    }



    /* SIDEBAR */

    .kg-exam-sidebar{

        position:static;

        min-height:auto;

    }



    .kg-sidebar-card{

        padding:18px;

        border-radius:20px;

    }

    .kg-sidebar-card h3{

        font-size:17px;

        margin-bottom:15px;

    }

    .kg-sidebar-stats{

        gap:12px;

    }


    .kg-stat-item strong{

        font-size:16px;

    }


    .kg-progress-wrapper{

        margin-top:15px;

    }

    /* PALET */

    .kg-question-palette{

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

        gap:6px;

    }


    .kg-question-number{

        min-height:auto;

        width:100%;

        aspect-ratio:1/1;

        border-radius:8px;

        font-size:11px;

    }

    .kg-legend{

        gap:10px;

    }


    .kg-legend div{

        font-size:14px;

    }

    /* FINISH */

    .kg-finish-btn{

        width:100%;
        height:55px;
    }

    /* EXAM FINISH MODAL */

    .kg-exam-modal-box{

        padding:25px 18px;

        border-radius:20px;

    }



    /* RESULT */

    .kg-result-screen{

        padding:20px 10px;

    }


    .kg-result-card{

        padding:25px 18px;

    }



    /* REVIEW / EXPLANATION */

    .kg-question-explanation{

        padding:18px;

    }

    .kg-answer-progress{
        justify-content: center;
        width: 100%;
    }

    .kg-exam-timer,
    .kg-answer-progress{

        width:100%;

    }


    .kg-exam-timer,
    .kg-answer-progress{

        flex-direction:row;

        justify-content:center;

        height:55px;

    }

    .kg-header-stats{

        width:100%;

        display:flex;

        flex-direction:row;

        gap:10px;

    }


    .kg-header-stats .kg-exam-timer,
    .kg-header-stats .kg-answer-progress{

        flex:1;

        width:auto;

        justify-content:center;

        padding:12px;

    }

    .kg-question-card{

        padding:18px;

        border-radius:22px;

    }

    .kg-question-header{

        margin-bottom:12px;

    }


    .kg-question-info{

        align-items:center;

    }


    .kg-question-badge{

        padding:4px 10px;

        font-size:11px;

    }


    .kg-question-type{

        font-size:11px;

    }

    .kg-question-text{

        font-size:18px;

        line-height:1.7;

        margin-bottom:20px;

        word-break:break-word;

        overflow-wrap:break-word;
    }


    .kg-question-body{

        width:100%;

    }

    .kg-options{

        gap:12px;

    }


    .kg-option{

        padding:12px;

        gap:12px;

        border-radius:14px;

        min-height:55px;

    }


    .kg-option-letter{

        width:36px;

        height:36px;

        font-size:13px !important;

    }


    .kg-option-text{

        font-size:14px;

        line-height:1.5;

    }

    .kg-option:active{

        transform:scale(.98);

    }

    .kg-question-footer{

        flex-direction:column;

        gap:12px;

        margin-top:25px;

    }


    .kg-nav-btn,
    .kg-clear-btn{

        width:100%;

        height:45px;

        padding:0;

        font-size:13px;

        border-radius:14px;

    }

    .kg-nav-btn:active,
    .kg-clear-btn:active{

        transform:scale(.97);

    }

}

@media(max-width:350px){

    .kg-question-palette{

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

    }

}

@media(min-width:769px) and (max-width:1100px){

    .kg-exam-layout{

        grid-template-columns:1fr 280px;

        gap:20px;

    }


    .kg-question-card{

        padding:25px;

    }


    .kg-question-text{

        font-size:20px;

    }


    .kg-question-palette{

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

        gap:6px;

    }


    .kg-question-number{

        border-radius:8px;

        font-size:12px;

    }   

}

@media (min-width:700px) and (max-width:768px){

    .kg-question-palette{

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

        gap:6px;

    }


    .kg-question-number{

        border-radius:8px;

        font-size:12px;

    }


    .kg-exam-sidebar{

        width:100%;

    }

    .kg-exam-layout{

        grid-template-columns:1fr 260px;

        gap:15px;

    }


}

@media(min-width:1101px) and (max-width:1400px){

    .kg-exam-layout{

        grid-template-columns:1fr 290px;

    }


    .kg-exam-system{

        width:94%;

    }

}

.kg-answer-progress{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

    background:var(--kg-card);

    backdrop-filter:blur(18px);

    border:1px solid var(--kg-border);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.kg-answer-progress i{

    color:#22c55e;

    font-size:18px;

}


.kg-answer-progress span{

    font-size:20px;

    font-weight:700;

    color:#fff;

}

.kg-header-stats{

    display:flex;

    gap:15px;

}

@media(max-width:768px){

    .kg-modal{

        width:calc(100% - 30px);

        max-width:380px;

        padding:30px 22px;

        border-radius:24px;

    }


    .kg-modal-icon{

        width:70px;

        height:70px;

        font-size:30px;

        margin-bottom:20px;

    }


    .kg-modal h2{

        font-size:23px;

    }


    .kg-modal p{

        font-size:15px;

        line-height:1.6;

    }


    .kg-modal-buttons{

        display:flex;

        flex-direction:column;

        gap:0 !important;

        margin-top:15px;

    }


    .kg-modal-buttons .kg-modal-btn{

        width:100%;

        height:45px !important;

        min-height:45px;

        font-size:16px !important;

        font-weight:700;

        border-radius:18px;

        margin:0 !important;

    }

    .kg-modal-buttons .kg-modal-btn + .kg-modal-btn{

        margin-top:8px !important;

    }

}

@media (max-width:768px){

    .kg-result-screen{
        padding:15px;
        align-items:center;
    }

    .kg-result-card{
        width:100%;
        max-width:380px;
        padding:20px 18px;
        border-radius:20px;
    }

    .kg-result-icon{
        width:60px;
        height:60px;
        font-size:26px;
        margin-bottom:12px;
    }

    .kg-result-header{
        margin-bottom:18px;
    }

    .kg-result-header h2{
        font-size:21px;
        margin-bottom:4px;
    }

    .kg-result-header p{
        font-size:13px;
    }

    .kg-result-score{
        margin:16px 0;
    }

    .kg-result-score span{
        font-size:13px;
    }

    .kg-result-score h1{
        font-size:50px;
        margin:8px 0;
    }

    .kg-result-status{
        padding:8px 16px;
        font-size:12px;
    }

    .kg-result-grid{
        gap:10px;
        margin:20px 0;
    }

    .kg-result-item{
        padding:10px;
        border-radius:16px;
    }

    .kg-result-item h3{
        font-size:28px;
        margin-bottom:4px;
    }

    .kg-result-item span{
        font-size:13px;
    }

    .kg-result-meta{
        margin-top:14px;
        margin-bottom:18px;
    }

    .kg-result-meta-item{
        padding:8px 12px;
        font-size:12px;
    }

    .kg-result-buttons{
        display:flex;
        flex-direction:column;
        gap:10px;
        width:100%;
    }

    .kg-result-buttons .kg-modal-btn{

        width:100%;
        height:48px;
        min-height:48px;

        padding:0 20px;

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

        border-radius:14px;

    }

    .kg-result-buttons .kg-review-btn,
    .kg-result-buttons .kg-restart-btn{

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

    }

    .kg-modal-btn-i{
        padding-right:5px;
    }

}

@media (min-width:1100px){

    .kg-exam-system{
        padding:16px 0;
    }

    .kg-exam-layout{
        gap:22px;
    }

    .kg-question-card{
        padding:20px;
    }

    .kg-question-header{
        margin-bottom:8px;
    }

    .kg-question-text{
        font-size:20px;
        line-height:1.5;
        margin-top:31px !important;
        margin-bottom:31px !important;
    }

    .kg-options{
        gap:6px;
    }

    .kg-option{
        padding:6px 16px;
        min-height:50px;
        border-radius:16px;
        align-items:center
    }

    .kg-option-letter{
        width:34px;
        height:34px;
        font-size:13px;
    }

    .kg-option-text{
        font-size:15px;
        line-height:1.4;
    }

    .kg-question-footer{
        margin-top:14px;
    }

    .kg-nav-btn,
    .kg-clear-btn{
        padding:14px 24px;
        font-size:14px;
    }

    .kg-sidebar-card{
        padding:14px 16px;
    }

    .kg-sidebar-card h3{
        margin-bottom:12px;
        font-size:16px;
    }

    .kg-exam-header{
        gap:15px;
        margin-bottom:18px;
    }

    .kg-exam-back{
        padding:10px 16px;
        border-radius:14px;
        font-size:14px;
        white-space:nowrap;
    }

    .kg-exam-title h1{
        font-size:24px;
        margin-bottom:4px;
    }

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

    .kg-exam-timer,
    .kg-answer-progress{
        min-width:140px;
        padding:10px 14px;
        border-radius:14px;
    }

    .kg-exam-timer span{
        font-size:22px;
    }

    .kg-result-card{

        width:min(660px,92%);

        padding:28px;

        border-radius:24px;

    }

    .kg-result-icon{

        width:75px;
        height:75px;

        font-size:32px;

        margin-bottom:18px;

    }

    .kg-result-header{

        margin-bottom:22px;

    }

    .kg-result-header h2{

        font-size:26px;

    }

    .kg-result-header p{

        font-size:14px;

    }

    .kg-result-score{

        margin:24px 0;

    }

    .kg-result-score h1{

        font-size:64px;

        margin:10px 0;

    }

    .kg-result-score span{

        font-size:14px;

    }

    .kg-result-status{

        padding:8px 18px;

        font-size:13px;

    }

    .kg-result-meta{

        margin:18px 0 26px;

        gap:12px;

    }

    .kg-result-meta-item{

        padding:10px 14px;

        font-size:13px;

    }

    .kg-result-grid{

        gap:14px;

        margin:26px 0;

    }

    .kg-result-item{

        padding:18px;

        border-radius:18px;

    }

    .kg-result-item h3{

        font-size:34px;

        margin-bottom:6px;

    }

    .kg-result-item span{

        font-size:14px;

    }

    .kg-result-buttons{

        gap:12px;

        margin-top:20px;

    }

    .kg-result-buttons .kg-modal-btn{

        height:50px;

        font-size:15px;

        border-radius:14px;

    }

}

.kg-exam-back{

    border:none;
    cursor:pointer;
    font-family:inherit;

}

.kg-exam-timer.warning{

    border-color:#f59e0b;

    box-shadow:
    0 0 25px rgba(245,158,11,.35);

}


.kg-exam-timer.danger{

    border-color:#ef4444;

    color:#ef4444;

    animation:timerDanger 1s infinite;

    box-shadow:
    0 0 30px rgba(239,68,68,.45);

}


@keyframes timerDanger{

    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }

}

.palette-title{
    grid-column:1 / -1;
    width:100%;
    color:#76a8ff;
    font-size:14px;
    font-weight:600;
    margin:12px 0 5px;
}


/* =========================================================
   SINAV BAŞLANGIÇ EKRANI
========================================================= */

.kg-exam-start-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 40px 20px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(45, 165, 255, 0.12),
            transparent 45%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(79, 140, 255, 0.08),
            transparent 35%
        ),
        #080d16;

    overflow-y: auto;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* Çıkış animasyonu */

.kg-exam-start-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Kart */

.kg-exam-start-card {
    width: 100%;
    max-width: 620px;

    padding: 42px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 80px rgba(45, 165, 255, 0.06);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}


/* Üst ikon */

.kg-exam-start-icon {
    width: 64px;
    height: 64px;

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

    margin: 0 auto 22px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(79, 140, 255, 0.18),
            rgba(45, 165, 255, 0.08)
        );

    border: 1px solid rgba(79, 140, 255, 0.20);

    box-shadow:
        0 0 35px rgba(45, 165, 255, 0.12);

    color: #4f8cff;

    font-size: 25px;
}


/* Badge */

.kg-exam-start-badge {
    display: block;

    width: fit-content;

    margin: 0 auto 14px;

    padding: 7px 13px;

    border-radius: 999px;

    background: rgba(79, 140, 255, 0.09);

    border: 1px solid rgba(79, 140, 255, 0.16);

    color: #6da5ff;

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

    letter-spacing: 1.2px;
}


/* Başlık */

.kg-exam-start-card h1 {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    line-height: 1.3;

    font-weight: 600;

    text-align: center;
}


/* Açıklama */

.kg-exam-start-description {
    max-width: 500px;

    margin: 14px auto 32px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 14px;
    line-height: 1.7;

    text-align: center;
}


/* Form */

.kg-exam-start-form {
    width: 100%;
}


/* Label */

.kg-exam-start-form > label,
.kg-mode-title {
    display: block;

    margin-bottom: 9px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;
    font-weight: 500;
}


/* Input wrapper */

.kg-input-wrapper {
    position: relative;

    margin-bottom: 27px;
}


/* Input icon */

.kg-input-wrapper i {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 255, 255, 0.38);

    font-size: 15px;

    pointer-events: none;
}


/* Input */

.kg-input-wrapper input {
    width: 100%;
    height: 54px;

    box-sizing: border-box;

    padding: 0 18px 0 46px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    outline: none;

    background: rgba(255, 255, 255, 0.045);

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.kg-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.30);
}


.kg-input-wrapper input:focus {
    border-color: rgba(79, 140, 255, 0.55);

    background: rgba(79, 140, 255, 0.045);

    box-shadow:
        0 0 0 4px rgba(79, 140, 255, 0.08);
}


/* Mod seçenekleri */

.kg-mode-title {
    margin-bottom: 11px;
}


.kg-mode-options {
    display: flex;
    flex-direction: column;

    gap: 11px;

    margin-bottom: 22px;
}


/* Mod kartı */

.kg-mode-option {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    min-height: 78px;

    padding: 14px 17px;

    border: 1px solid rgba(255, 255, 255, 0.075);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);

    cursor: pointer;

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


.kg-mode-option:hover {
    border-color: rgba(79, 140, 255, 0.25);

    background: rgba(79, 140, 255, 0.045);

    transform: translateY(-1px);
}


/* Seçili kart */

.kg-mode-option.active {
    border-color: rgba(79, 140, 255, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(79, 140, 255, 0.10),
            rgba(45, 165, 255, 0.035)
        );

    box-shadow:
        inset 0 0 25px rgba(79, 140, 255, 0.035);
}


/* Radio gizle */

.kg-mode-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* Mod ikonu */

.kg-mode-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

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

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.05);

    color: rgba(255, 255, 255, 0.48);

    font-size: 17px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.kg-mode-option.active .kg-mode-icon {
    background: rgba(79, 140, 255, 0.14);

    color: #5e9aff;
}


/* Mod yazıları */

.kg-mode-content {
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;

    padding-right: 25px;
}


.kg-mode-content strong {
    color: rgba(255, 255, 255, 0.92);

    font-size: 14px;
    font-weight: 600;
}


.kg-mode-content span {
    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;
    line-height: 1.5;
}


/* Sağdaki seçim ikonu */

.kg-mode-check {
    position: absolute;

    right: 17px;

    color: rgba(255, 255, 255, 0.12);

    font-size: 18px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.kg-mode-option.active .kg-mode-check {
    color: #4f8cff;

    transform: scale(1.05);
}


/* Hata */

.kg-exam-start-error {
    display: none;

    margin-top: 12px;

    margin-bottom: 12px;

    padding: 11px 13px;

    border-radius: 11px;

    border: 1px solid rgba(255, 80, 80, 0.20);

    background: rgba(255, 80, 80, 0.07);

    color: #ff8b8b;

    font-size: 12px;

    line-height: 1.5;
}


.kg-exam-start-error.show {
    display: block;
}


/* Başla butonu */

.kg-exam-start-btn {
    width: 100%;
    height: 56px;

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

    gap: 10px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #4f8cff,
            #2da5ff
        );

    color: #ffffff;

    font-family: inherit;

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

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(45, 165, 255, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.kg-exam-start-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 35px rgba(45, 165, 255, 0.25);
}


.kg-exam-start-btn:active {
    transform: translateY(0);
}


.kg-exam-start-btn:disabled {
    opacity: 0.65;

    cursor: wait;

    transform: none;
}


/* Alt bilgiler */

.kg-exam-start-info {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    margin-top: 24px;
}


.kg-exam-start-info div {
    display: flex;
    align-items: center;

    gap: 7px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 12px;
}


.kg-exam-start-info i {
    color: rgba(79, 140, 255, 0.65);

    font-size: 13px;
}


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

@media (max-width: 700px) {

    .kg-exam-start-screen {
        padding: 20px 14px;
    }

    .kg-exam-start-card {
        padding: 30px 22px;

        border-radius: 23px;
    }

    .kg-exam-start-card h1 {
        font-size: 22px;
    }

    .kg-exam-start-description {
        font-size: 13px;
    }

}


@media (max-width: 450px) {

    .kg-exam-start-card {
        padding: 25px 17px;
    }

    .kg-exam-start-icon {
        width: 56px;
        height: 56px;

        margin-bottom: 18px;
    }

    .kg-exam-start-card h1 {
        font-size: 19px;
    }

    .kg-mode-option {
        padding: 12px;
    }

    .kg-mode-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }

    .kg-mode-content span {
        font-size: 11px;
    }

}

/* =====================================================
   İNCELEME MODU - CEVAP DURUMLARI
===================================================== */

.kg-question-number.review-correct {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
    color: #4ade80;
}


.kg-question-number.review-wrong {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}


.kg-question-number.review-empty {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}


/* Hover */

.kg-question-number.review-correct:hover {
    background: rgba(34, 197, 94, 0.22);
}


.kg-question-number.review-wrong:hover {
    background: rgba(239, 68, 68, 0.22);
}


.kg-question-number.review-empty {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75);
}


/* =====================================================
   AKTİF SORU
   Aktif soru kendi durum rengini geçici olarak
   bastırıp mevcut active tasarımını kullanır.
===================================================== */

.kg-question-number.active {
    background: #4f8cff;
    border-color: #4f8cff;
    color: #ffffff;
}

/* =========================================================
   ÖĞRENME MODU - SÜRE SEÇİMİ
========================================================= */

.kg-learning-duration {
    margin-top: 24px;
    margin-bottom: 22px;
    animation: kgDurationFadeIn 0.25s ease;
}

@keyframes kgDurationFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Süre seçenekleri */

.kg-duration-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}


/* Tek süre kartı */

.kg-duration-option {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 72px;

    padding: 12px 42px 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.035);

    cursor: pointer;

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


/* Radio gizle */

.kg-duration-option input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


/* Hover */

.kg-duration-option:hover {
    background: rgba(255, 255, 255, 0.06);

    border-color:
        rgba(79, 140, 255, 0.35);

    transform: translateY(-1px);
}


/* Seçili */

.kg-duration-option.active {
    background:
        rgba(79, 140, 255, 0.09);

    border-color:
        rgba(79, 140, 255, 0.55);

    box-shadow:
        0 0 0 1px rgba(79, 140, 255, 0.08),
        0 8px 25px rgba(79, 140, 255, 0.08);
}


/* İçerik */

.kg-duration-content {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


/* Başlık */

.kg-duration-content strong {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    color: #ffffff;
}


/* Açıklama */

.kg-duration-content span {
    font-size: 11px;

    line-height: 1.4;

    color:
        rgba(255, 255, 255, 0.48);
}


/* Seçim işareti */

.kg-duration-check {
    position: absolute;

    top: 50%;

    right: 14px;

    transform: translateY(-50%);

    font-size: 17px;

    color:
        rgba(255, 255, 255, 0.18);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* Seçili seçim işareti */

.kg-duration-option.active
.kg-duration-check {

    color: #4f8cff;

    transform:
        translateY(-50%) scale(1.05);
}


/* Önerilen etiketi */

.kg-duration-badge {
    position: absolute;

    top: 8px;

    right: 38px;

    padding: 3px 7px;

    border-radius: 6px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.2px;

    color: #8ab4ff;

    background:
        rgba(79, 140, 255, 0.12);

    border:
        1px solid rgba(79, 140, 255, 0.18);
}


/* Süresiz ikon */

.kg-duration-content strong i {
    font-size: 13px;

    color: #4f8cff;
}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 600px) {

    .kg-duration-options {
        grid-template-columns: 1fr;
    }

    .kg-duration-option {
        min-height: 68px;
    }

}


.kg-question-number.correct {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.kg-question-number.wrong {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* =========================================================
   SINAV TÜRÜ SEÇİMİ
========================================================= */

.kg-exam-type {
    margin-top: 24px;
    margin-bottom: 22px;
    animation: kgExamTypeFadeIn 0.25s ease;
}


@keyframes kgExamTypeFadeIn {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Başlık */

.kg-selection-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.kg-selection-title span {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}


.kg-selection-title small {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.48);
}


/* Kartlar */

.kg-exam-type-options {
    display: grid;

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

    gap: 10px;

    margin-top: 12px;
}


/* Tek kart */

.kg-exam-type-option {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 78px;

    padding:
        12px
        42px
        12px
        14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.035);

    cursor: pointer;

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


/* Radio gizle */

.kg-exam-type-option input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


/* Hover */

.kg-exam-type-option:hover {

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(79, 140, 255, 0.35);

    transform:
        translateY(-1px);

}


/* Seçili */

.kg-exam-type-option.active {

    background:
        rgba(79, 140, 255, 0.09);

    border-color:
        rgba(79, 140, 255, 0.55);

    box-shadow:
        0 0 0 1px
        rgba(79, 140, 255, 0.08),

        0 8px 25px
        rgba(79, 140, 255, 0.08);

}


/* İkon */

.kg-exam-type-icon {

    flex-shrink: 0;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    background:
        rgba(79, 140, 255, 0.10);

    color:
        #4f8cff;

    font-size: 16px;

}


/* İçerik */

.kg-exam-type-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}


.kg-exam-type-content strong {

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    color: #ffffff;

}


.kg-exam-type-content span {

    font-size: 11px;

    line-height: 1.4;

    color:
        rgba(255, 255, 255, 0.48);

}


/* Seçim işareti */

.kg-exam-type-check {

    position: absolute;

    top: 50%;

    right: 14px;

    transform:
        translateY(-50%);

    font-size: 17px;

    color:
        rgba(255, 255, 255, 0.18);

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


/* Seçili seçim işareti */

.kg-exam-type-option.active
.kg-exam-type-check {

    color:
        #4f8cff;

    transform:
        translateY(-50%)
        scale(1.05);

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 600px) {

    .kg-exam-type-options {

        grid-template-columns:
            1fr;

    }

    .kg-exam-type-option {

        min-height: 70px;

    }

}
.mode-padding{
    margin-bottom: 10px;
}

/* =========================================================
   SINAV BAŞLANGIÇ MODALI - EKRANA SIĞDIR
========================================================= */

.kg-exam-start-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow-y: auto;
}


/* Modal kartı */

.kg-exam-start-card {
    width: 100%;
    max-width: 620px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    margin: auto;
}


/* İçerik çok uzarsa scrollbar */

.kg-exam-start-card::-webkit-scrollbar {
    width: 5px;
}

.kg-exam-start-card::-webkit-scrollbar-track {
    background: transparent;
}

.kg-exam-start-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

/* =====================================================
   PREMIUM SINAV DUYURU BAR
===================================================== */

.kg-exam-notice {

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:12px 16px;

    border-radius:18px;

    overflow:hidden;

    position:relative;


    background:
        linear-gradient(
            120deg,
            #07152f,
            #123b7a,
            #2563eb,
            #7c3aed,
            #0ea5e9,
            #07152f
        );


    background-size:400% 400%;


    animation:
        noticeGradient 10s ease infinite;


    border:1px solid rgba(255,255,255,.18);


    box-shadow:

        0 15px 45px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.18);


    backdrop-filter:blur(12px);

}


/* hareketli renk */

@keyframes noticeGradient {


    0% {

        background-position:0% 50%;

    }


    50% {

        background-position:100% 50%;

    }


    100% {

        background-position:0% 50%;

    }

}



/* üstten geçen ışık */

.kg-exam-notice::before {


    content:"";


    position:absolute;


    top:0;

    left:-60%;


    width:45%;


    height:100%;


    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );


    transform:skewX(-25deg);


    animation:

        noticeLight 5s infinite;


}


@keyframes noticeLight {


    0% {

        left:-60%;

    }


    40% {

        left:130%;

    }


    100% {

        left:130%;

    }

}



/* ikon */

.kg-notice-icon {


    width:42px;

    height:42px;


    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    color:#fff;


    background:

        rgba(255,255,255,.18);


    border:

        1px solid rgba(255,255,255,.25);


    box-shadow:


        0 0 25px rgba(255,255,255,.35);


    animation:

        noticePulse 2.5s infinite;


}


@keyframes noticePulse {


    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.08);

    }

}



/* kayan yazı */

.kg-notice-track {


    flex:1;


    overflow:hidden;


    white-space:nowrap;


}



.kg-notice-text {


    display:inline-block;


    padding-left:100%;


    animation:

        noticeMove 18s linear infinite;


    color:#fff;


    font-size:13px;


    font-weight:600;


    letter-spacing:.2px;


    text-shadow:

        0 3px 15px rgba(0,0,0,.45);

}



@keyframes noticeMove {


    from {

        transform:translateX(0);

    }


    to {

        transform:translateX(-100%);

    }

}



/* buton */

.kg-notice-btn {


    flex-shrink:0;


    display:flex;


    align-items:center;


    gap:7px;


    padding:9px 16px;


    border-radius:14px;


    color:#fff;


    text-decoration:none;


    font-size:12px;


    font-weight:700;



    background:

        rgba(255,255,255,.15);



    border:

        1px solid rgba(255,255,255,.25);



    backdrop-filter:blur(10px);



    transition:.3s;


}


.kg-notice-btn:hover {


    background:

        rgba(255,255,255,.28);


    transform:translateY(-2px);


}



/* =====================================================
   HEADER YAPISI
===================================================== */


.kg-exam-header{

    display:flex;

    flex-wrap:wrap;

}



.kg-exam-title{

    flex:1;

}



.kg-exam-notice{

    flex-basis:100%;

    width:100%;

    order:3;

}



/* Mobil */

@media(max-width:600px){


    .kg-exam-notice{


        padding:10px 12px;


        gap:10px;


    }



    .kg-notice-icon{


        width:34px;

        height:34px;

    }



    .kg-notice-text{


        font-size:12px;

    }



    .kg-notice-btn{


        padding:7px 10px;

        font-size:11px;


    }


}

/* =====================================================
   ÖĞRENME MODU
===================================================== */

.kg-learning-badge {

    display:none;

    align-items:center;

    gap:8px;

    width:max-content;

    margin-bottom:10px;

    padding:7px 14px;

    border-radius:999px;

    color:#8ab4ff;

    background:
        linear-gradient(
            135deg,
            rgba(79,140,255,.16),
            rgba(124,77,255,.16)
        );

    border:
        1px solid rgba(79,140,255,.30);

    box-shadow:
        0 0 25px rgba(79,140,255,.14);

    font-size:11px;

    font-weight:700;

    letter-spacing:.7px;

    animation:
        learningBadgePulse 3s ease-in-out infinite;

}


.kg-learning-badge.show {

    display:flex;

}


.kg-learning-badge i {

    font-size:14px;

}


@keyframes learningBadgePulse {

    0%,100% {

        box-shadow:
            0 0 18px rgba(79,140,255,.10);

    }

    50% {

        box-shadow:
            0 0 28px rgba(79,140,255,.25);

    }

}