:root{
    --navy:#03182d;
    --navy-2:#072745;
    --blue:#1479f8;
    --blue-2:#2c8cff;
    --green:#118a4e;
    --orange:#ef650b;
    --purple:#7c3aed;
    --text:#0b1b33;
    --muted:#617085;
    --line:#e5eaf0;
    --surface:#ffffff;
    --bg:#f5f8fc;
    --shadow:0 18px 50px rgba(11,39,73,.10);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.55;
}

main{
    min-height:70vh;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
}

.container{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}


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

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(3,24,45,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-wrap{
    min-height:86px;
    display:flex;
    align-items:center;
    gap:30px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:245px;
}

.brand img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-name{
    font-size:26px;
    letter-spacing:-.7px;
}

.brand-name b{
    color:#3457aa;
}

.brand-name strong{
    color:var(--orange);
    font-weight:800;
}

.brand-text small{
    color:#fff;
    letter-spacing:8px;
    font-size:9px;
    margin-top:7px;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:34px;
    margin-left:auto;
}

.main-nav a{
    color:#fff;
    font-weight:600;
    font-size:15px;
    padding:31px 0 25px;
    border-bottom:3px solid transparent;
}

.main-nav a:hover,
.main-nav a.active{
    color:#fff;
    border-color:var(--blue);
}

.account-btn{
    color:#fff;
    font-weight:700;
}

.register-btn{
    color:#7fc0ff;
}

.android-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,#1069dc,#1684ff);
    color:#fff;
    padding:13px 18px;
    border-radius:9px;
    font-weight:700;
    box-shadow:0 10px 24px rgba(20,121,248,.25);
}

.mobile-menu-btn{
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:27px;
}


/* =========================
   HERO
========================= */

.hero{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 78% 42%,rgba(26,118,212,.25),transparent 24%),
        linear-gradient(110deg,#03182d 0%,#03192f 52%,#062947 100%);
}

.hero::after{
    content:"";
    position:absolute;
    right:-90px;
    top:-150px;
    width:520px;
    height:520px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.05);
}

.hero-grid{
    min-height:500px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:60px;
}

.eyebrow,
.section-kicker{
    font-weight:800;
    letter-spacing:.5px;
    font-size:14px;
}

.eyebrow{
    color:#3c94ff;
}

.hero h1{
    font-size:52px;
    line-height:1.08;
    letter-spacing:-1.8px;
    margin:14px 0 16px;
}

.hero h1 span{
    color:var(--blue-2);
}

.hero-copy>p{
    font-size:18px;
    max-width:650px;
    color:#d9e5f0;
}

.hero-search{
    display:flex;
    max-width:680px;
    background:#fff;
    border-radius:10px;
    margin-top:26px;
    padding:3px;
    box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.hero-search input{
    flex:1;
    border:0;
    outline:none;
    padding:0 18px;
    font-size:16px;
    border-radius:8px;
    color:#1b2b40;
}

.hero-search button{
    border:0;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    font-weight:800;
    padding:15px 26px;
    cursor:pointer;
}

.hero-actions{
    display:flex;
    gap:14px;
    margin-top:18px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 20px;
    border-radius:7px;
    font-weight:800;
}

.btn.primary{
    background:var(--blue);
    color:#fff;
}

.btn.outline{
    border:1px solid rgba(255,255,255,.7);
    color:#fff;
}

.hero-visual{
    position:relative;
    height:360px;
}

.orb{
    position:absolute;
    inset:20px 0 0 35px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(44,140,255,.16),rgba(44,140,255,.02) 60%,transparent 61%);
    border:1px solid rgba(68,151,239,.1);
}

.book-stack{
    position:absolute;
    right:15px;
    top:48px;
    width:360px;
}

.book{
    height:58px;
    margin:0 auto 7px;
    border-radius:7px 12px 12px 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#cbd9e7;
    font-size:17px;
    font-weight:800;
    letter-spacing:1px;
    box-shadow:0 12px 20px rgba(0,0,0,.28);
}

.b1{
    width:300px;
    background:#173a5a;
}

.b2{
    width:335px;
    background:#2f5135;
}

.b3{
    width:315px;
    background:#30363f;
}

.notebook{
    width:290px;
    height:130px;
    margin:14px auto 0;
    background:#e9edf0;
    color:#243a52;
    transform:rotate(-4deg);
    border-radius:5px;
    box-shadow:0 18px 28px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Georgia,serif;
    font-size:20px;
}


/* =========================
   FEATURES
========================= */

.features{
    position:relative;
    margin-top:-28px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:22px 10px;
    z-index:5;
}

.feature-card{
    text-align:center;
    padding:10px 28px;
    border-right:1px solid var(--line);
}

.feature-card:last-child{
    border-right:0;
}

.feature-icon,
.big-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    font-size:29px;
}

.feature-icon.blue,
.big-icon.blue{
    background:#eaf3ff;
}

.feature-icon.green,
.big-icon.green{
    background:#e9f8ef;
}

.feature-icon.orange{
    background:#fff0e6;
}

.feature-icon.purple{
    background:#f3eaff;
}

.feature-card h3{
    font-size:16px;
    margin:4px 0 7px;
}

.feature-card p{
    font-size:14px;
    color:var(--muted);
    margin:0;
}


/* =========================
   STUDY PANELS
========================= */

.study-area{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    padding-top:26px;
}

.panel{
    background:#fff;
    border-radius:16px;
    padding:26px;
    border:1px solid #e7edf4;
    box-shadow:0 10px 30px rgba(33,61,98,.06);
}

.words-panel{
    background:linear-gradient(145deg,#f4f8ff,#fff);
}

.notes-panel{
    background:linear-gradient(145deg,#f1fbf5,#fff);
}

.panel-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.panel-top h2{
    font-size:25px;
    line-height:1.2;
    margin:5px 0 8px;
}

.panel-top p{
    color:var(--muted);
    margin:0 0 15px;
}

.section-kicker{
    font-size:12px;
}

.blue-text{
    color:#1269d8;
}

.green-text{
    color:#128049;
}

.big-icon{
    min-width:62px;
    margin:0;
}

.panel-list{
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
    background:#fff;
}

.panel-list a{
    display:grid;
    grid-template-columns:28px 1fr 20px;
    gap:12px;
    align-items:center;
    padding:13px 15px;
    border-bottom:1px solid var(--line);
}

.panel-list a:last-child{
    border-bottom:0;
}

.panel-list a:hover{
    background:#f8fbff;
}

.panel-list div{
    display:flex;
    flex-direction:column;
}

.panel-list b{
    font-size:14px;
}

.panel-list small{
    font-size:12px;
    color:var(--muted);
}

.panel-list strong{
    font-size:23px;
    color:#154d8c;
}

.green-list strong{
    color:#14804a;
}

.panel-cta{
    margin-top:18px;
    border-radius:6px;
    padding:11px 15px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    font-weight:800;
    border:1px solid;
}

.blue-cta{
    color:#0e63cf;
    border-color:#1c77e8;
}

.green-cta{
    color:#107744;
    border-color:#168450;
}


/* =========================
   APP PROMO
========================= */

.app-promo{
    margin-top:24px;
    margin-bottom:24px;
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:16px;
    min-height:260px;
    padding:22px 34px;
    display:grid;
    grid-template-columns:230px 1fr .8fr;
    align-items:center;
    gap:34px;
    box-shadow:0 10px 30px rgba(33,61,98,.05);
}

.phone-card{
    height:230px;
    position:relative;
    overflow:hidden;
}

.phone{
    position:absolute;
    width:150px;
    height:290px;
    left:15px;
    top:6px;
    border-radius:24px;
    background:linear-gradient(#071a2d,#092743);
    border:6px solid #101820;
    padding:18px 12px;
    color:#fff;
    transform:rotate(-5deg);
    box-shadow:0 18px 30px rgba(0,0,0,.22);
}

.phone-notch{
    position:absolute;
    top:5px;
    left:45px;
    width:54px;
    height:9px;
    border-radius:10px;
    background:#0d1117;
}

.phone-logo{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    margin-top:6px;
}

.phone-logo img{
    width:28px;
    height:28px;
    object-fit:contain;
}

.phone-stat{
    background:#0e3152;
    border-radius:12px;
    padding:12px;
    margin-top:18px;
    display:flex;
    flex-direction:column;
}

.phone-stat strong{
    font-size:22px;
}

.phone-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:10px;
}

.phone-actions div{
    background:#103b63;
    border-radius:9px;
    padding:10px 5px;
    text-align:center;
    font-size:9px;
}

.app-copy h2{
    font-size:28px;
    line-height:1.16;
    margin:5px 0 10px;
}

.app-copy p{
    color:var(--muted);
    max-width:520px;
}

.google-play{
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#050505;
    color:#fff;
    border-radius:8px;
    padding:10px 17px;
}

.google-play div{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.google-play small{
    font-size:10px;
}

.google-play strong{
    font-size:15px;
}

.play-icon{
    font-size:22px;
}

.app-features{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
    font-weight:700;
}

.app-features li{
    color:#18314f;
}

.app-features li::first-letter{
    color:var(--blue);
}


/* =========================
   ABOUT
========================= */

.about{
    margin-bottom:26px;
    background:#fff;
    border-radius:16px;
    padding:28px 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    border:1px solid #e7edf4;
}

.about h2{
    margin:5px 0 0;
    font-size:27px;
}

.about p{
    margin:0;
    color:var(--muted);
    align-self:center;
}


/* =========================
   AUTH / LOGIN / REGISTER
========================= */

.auth-page{
    min-height:72vh;
    display:grid;
    place-items:center;
    padding:54px 20px;
    background:linear-gradient(145deg,#f4f8ff,#eef5fb);
}

.auth-card{
    width:min(100%,520px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:34px;
}

.auth-card h1{
    margin:7px 0 6px;
    font-size:32px;
}

.auth-card>p{
    color:var(--muted);
    margin-top:0;
}

.auth-form{
    display:grid;
    gap:16px;
    margin-top:24px;
}

.auth-form label{
    display:grid;
    gap:7px;
    font-weight:700;
    font-size:14px;
}

.auth-form input{
    width:100%;
    padding:13px 14px;
    border:1px solid #d8e0e9;
    border-radius:9px;
    font:inherit;
    outline:none;
}

.auth-form input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(20,121,248,.10);
}

.auth-submit{
    border:0;
    border-radius:9px;
    background:var(--blue);
    color:#fff;
    padding:14px;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
}

.auth-error{
    background:#fff1f2;
    color:#b42335;
    border:1px solid #fecdd3;
    padding:11px 13px;
    border-radius:9px;
}

.auth-switch{
    text-align:center;
    margin-top:20px;
}

.auth-switch a{
    color:var(--blue);
    font-weight:800;
}


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

.profile-page{
    padding:42px 0 60px;
}

.profile-hero{
    display:block;
    margin-bottom:25px;
}

.profile-hero h1{
    margin:12px 0 5px;
    font-size:38px;
}

.profile-hero p{
    color:var(--muted);
}

.profile-page .profile-logout {
    display: inline-block;
    margin-left: 8px;

    color: #dc2626 !important;
    font-size: 14px;
    font-weight: 800;

    text-decoration: none;
}

.profile-page .profile-logout:hover {
    color: #991b1b !important;
    text-decoration: underline;
}

.profile-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-bottom:22px;
}

.profile-stats article{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 30px rgba(33,61,98,.05);
}

.profile-stats small{
    color:var(--muted);
    font-weight:700;
}

.profile-stats strong{
    font-size:31px;
    margin:5px 0;
}

.profile-stats span{
    color:var(--muted);
    font-size:13px;
}

.profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:20px;
}

.profile-list{
    display:grid;
    gap:5px;
}

.profile-list div{
    display:flex;
    justify-content:space-between;
    padding:13px 0;
    border-bottom:1px solid var(--line);
}

.profile-list div:last-child{
    border-bottom:none;
}

.profile-continue{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:20px;
}

.profile-continue .panel-cta{
    min-width:230px;
}

.test-history{
    margin-top:15px;
}

.test-history-row{
    display:grid;
    grid-template-columns:1fr 100px 80px;
    gap:20px;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}

.test-history-row div{
    display:flex;
    flex-direction:column;
}

.test-history-row small{
    color:var(--muted);
}


/* =========================
   FOOTER
========================= */

.site-footer{
    background:#03182d;
    color:#c6d1dd;
    padding:34px 0 16px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr .7fr .8fr .7fr;
    gap:40px;
}

.site-footer .brand{
    min-width:0;
}

.site-footer .brand img{
    width:44px;
    height:44px;
}

.site-footer .brand-name{
    font-size:23px;
}

.footer-brand p{
    max-width:300px;
    font-size:13px;
    color:#9eb0c1;
}

.site-footer h4{
    color:#fff;
    margin:0 0 12px;
}

.site-footer div>a:not(.brand){
    display:block;
    font-size:14px;
    margin:7px 0;
    color:#c6d1dd;
}

.site-footer div>a:hover{
    color:#fff;
}

.copyright{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:28px;
    padding-top:14px;
    font-size:12px;
    display:flex;
    justify-content:space-between;
}


/* =========================
   RESPONSIVE - TABLET
========================= */

@media(max-width:980px){
    .nav-wrap{
        flex-wrap:wrap;
        padding:12px 0;
    }

    .brand{
        min-width:0;
    }

    .main-nav{
        order:3;
        width:100%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        margin-left:0;
        padding-top:10px;
    }

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

    .main-nav a{
        display: block;
        width: 100%;
        padding: 14px 5px;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .mobile-menu-btn{
        display: block;
        margin-left: auto;
        cursor: pointer;
        background: none;
        border: none;
        color: #fff;
        font-size: 28px;
    }

    .android-btn{
        display:none;
    }

    .hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
        padding:65px 0;
    }

    .hero-visual{
        display:none;
    }

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

    .feature-card{
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .study-area{
        grid-template-columns:1fr;
    }

    .app-promo{
        grid-template-columns:180px 1fr;
    }

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

    .profile-stats{
        grid-template-columns:1fr 1fr;
    }

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

    .profile-continue{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-continue .panel-cta{
        width:100%;
    }

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


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

@media(max-width:640px){
    .container{
        width:min(100% - 24px,1180px);
    }

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

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

    .hero-search{
        flex-direction:column;
        background:transparent;
        box-shadow:none;
        gap:8px;
    }

    .hero-search input{
        min-height:50px;
    }

    .hero-search button{
        width:100%;
    }

    .hero-actions{
        flex-direction:column;
    }

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

    .feature-card{
        padding:18px;
    }

    .study-area{
        padding-top:16px;
    }

    .panel{
        padding:20px;
    }

    .panel-top h2{
        font-size:22px;
    }

    .app-promo{
        grid-template-columns:1fr;
        padding:20px;
    }

    .phone-card{
        display:none;
    }

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

    .about{
        grid-template-columns:1fr;
        padding:22px;
    }

    .auth-card{
        padding:24px 20px;
    }

    .profile-hero h1{
        font-size:30px;
    }

    .profile-stats{
        grid-template-columns:1fr 1fr;
    }

    .test-history-row{
        grid-template-columns:1fr auto;
    }

    .test-history-row>strong{
        grid-column:2;
        grid-row:1;
    }

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

    .copyright{
        flex-direction:column;
        gap:6px;
    }
}

/* =========================================================
   GELİŞMİŞ PROFİL
========================================================= */

.profile-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin:30px 0 14px;
}

.profile-section-heading h2 {
    margin:4px 0 0;
    font-size:25px;
}

.profile-date {
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}


/* GÜNLÜK HEDEF */

.daily-goal-card {
    margin-bottom:25px;
}

.daily-goal-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.daily-goal-head h2 {
    margin:5px 0;
}

.daily-goal-head>strong {
    font-size:28px;
    color:var(--blue);
}

.daily-goal-progress {
    height:12px;
    border-radius:20px;
    overflow:hidden;
    background:#e8eef5;
    margin:18px 0 12px;
}

.daily-goal-progress-fill {
    height:100%;
    background:linear-gradient(
        90deg,
        #1479f8,
        #42a4ff
    );
    border-radius:inherit;
}

.daily-goal-card p {
    margin-bottom:0;
    color:var(--muted);
}

.goal-complete {
    color:#118a4e !important;
    font-weight:800;
}


/* GENEL İSTATİSTİKLER */

.profile-general-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:24px;
}

.profile-general-stats article {
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    box-shadow:0 10px 30px rgba(33,61,98,.05);
}

.profile-stat-icon {
    width:48px;
    height:48px;
    border-radius:12px;
    background:#eef5ff;
    display:grid;
    place-items:center;
    font-size:21px;
}

.profile-general-stats article div {
    display:flex;
    flex-direction:column;
}

.profile-general-stats small {
    color:var(--muted);
    font-weight:700;
}

.profile-general-stats strong {
    font-size:25px;
}


/* SON ÇALIŞILAN KELİMELER */

.profile-recent {
    margin-bottom:20px;
}

.profile-small-link {
    color:var(--blue);
    font-weight:800;
    font-size:14px;
}

.recent-word-list {
    margin-top:12px;
}

.recent-word-row {
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        125px
        35px
        80px;

    gap:15px;
    align-items:center;

    padding:14px 0;

    border-bottom:
        1px solid var(--line);
}

.recent-word-row:last-child {
    border-bottom:0;
}

.recent-word-main {
    display:flex;
    flex-direction:column;
}

.recent-word-main strong {
    font-size:16px;
}

.recent-word-main span {
    color:var(--muted);
    font-size:13px;
}

.recent-status {
    display:inline-flex;
    justify-content:center;

    padding:5px 9px;

    border-radius:20px;

    font-size:11px;
    font-weight:800;
}

.recent-status.known {
    background:#e9f8ef;
    color:#118a4e;
}

.recent-status.unsure {
    background:#fff5df;
    color:#b36b00;
}

.recent-status.unknown {
    background:#fff0f3;
    color:#c6294e;
}

.recent-favorite {
    color:#e9b914;
    font-size:19px;
    text-align:center;
}

.recent-favorite.empty {
    color:#c5cfda;
}

.recent-word-row>small {
    color:var(--muted);
    text-align:right;
}


/* TEST BOŞ DURUM */

.empty-test-history {
    display:flex;
    gap:16px;
    align-items:center;

    padding:25px;

    border-radius:12px;

    background:#f7f9fc;
}

.empty-test-history>span {
    font-size:35px;
}

.empty-test-history strong {
    display:block;
}

.empty-test-history p {
    margin:5px 0 0;
    color:var(--muted);
}


/* TABLET */

@media(max-width:900px) {

    .profile-general-stats {
        grid-template-columns:
            1fr 1fr;
    }

}


/* TELEFON */

@media(max-width:640px) {

    .profile-section-heading {
        align-items:flex-start;
    }

    .profile-general-stats {
        grid-template-columns:1fr;
    }

    .recent-word-row {
        grid-template-columns:
            1fr
            auto;
    }

    .recent-status {
        grid-column:2;
        grid-row:1;
    }

    .recent-favorite {
        display:none;
    }

    .recent-word-row>small {
        grid-column:2;
    }

}

/* =========================================================
   TEST BAŞLATMA EKRANI
========================================================= */

.test-start-page {
    min-height: 100vh;
    padding: 45px 0 65px;
    background: #061728;
    color: #fff;
}

.test-start-card {
    max-width: 950px;
    margin: auto;

    padding: 35px;

    border-radius: 18px;

    background: #091e34;

    border: 1px solid #173754;
}

.test-start-card h1 {
    margin: 7px 0;

    font-size: 34px;
}

.test-start-description {
    color: #9fb2c5;

    margin-bottom: 30px;
}

.test-setting-group {
    margin-top: 30px;
}

.test-setting-title {
    display: block;

    margin-bottom: 13px;

    color: #d8e5f2;

    font-weight: 800;
}

.test-type-grid {
    display: grid;

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

    gap: 12px;
}

.test-type-option {
    min-height: 110px;

    padding: 18px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    border-radius: 12px;

    border: 1px solid #244966;

    background: #0c2943;

    color: #fff;

    text-align: left;

    cursor: pointer;
}

.test-type-option > strong {
    margin: 7px 0 4px;

    font-size: 16px;
}

.test-type-option small {
    color: #91a8bd;
}

.test-type-option.selected {
    border: 2px solid #238ff8;

    background: #113759;

    box-shadow:
        0 0 0 3px
        rgba(35,143,248,.12);
}

.question-count-grid {
    display: grid;

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

    gap: 12px;
}

.question-count-option {
    min-height: 85px;

    border-radius: 11px;

    border: 1px solid #244966;

    background: #0c2943;

    color: #fff;

    cursor: pointer;
}

.question-count-option strong {
    display: block;

    font-size: 25px;
}

.question-count-option small {
    color: #91a8bd;
}

.question-count-option.selected {
    border: 2px solid #39dc8b;

    background: #0d4c36;

    box-shadow:
        0 0 0 3px
        rgba(57,220,139,.10);
}

.test-start-summary {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 30px;

    padding: 18px;

    border-radius: 12px;

    background: #07192b;

    border: 1px solid #173754;
}

.test-start-summary div {
    display: flex;
    flex-direction: column;
}

.test-start-summary span {
    color: #829ab0;

    font-size: 12px;
}

.test-start-summary strong {
    margin-top: 4px;

    font-size: 17px;
}

.start-selected-test {
    width: 100%;

    margin-top: 18px;

    min-height: 55px;

    border: 0;

    border-radius: 10px;

    background: #1479f8;

    color: #fff;

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

    cursor: pointer;
}

@media(max-width:700px) {

    .test-type-grid {
        grid-template-columns: 1fr;
    }

    .question-count-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .test-start-summary {
        grid-template-columns: 1fr;
    }

    .test-start-card {
        padding: 23px 17px;
    }
}

/* =========================================================
   SINAV GERİ SAYIM
========================================================= */

.exam-countdown-section {
    padding: 70px 0;
    background: #f3f6fa;
}

.exam-section-head {
    margin-bottom: 28px;
    text-align: center;
}

.exam-section-head .section-kicker {
    display: inline-block;
    margin-bottom: 7px;

    color: #147df5;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
}

.exam-section-head h2 {
    margin: 0 0 9px;

    color: #071b35;

    font-size: 32px;
}

.exam-section-head p {
    margin: 0;

    color: #718398;

    font-size: 15px;
}


/* GRID */

.exam-countdown-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}


/* KART */

.exam-countdown-card {
    padding: 22px;

    background: #ffffff;

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

    box-shadow:
        0 10px 28px
        rgba(30, 58, 85, .06);
}

.exam-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 17px;
}

.exam-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #eaf4ff;

    border-radius: 10px;

    font-size: 18px;
}

.exam-status {
    padding: 6px 9px;

    background: #eaf4ff;

    border-radius: 20px;

    color: #147df5;

    font-size: 10px;
    font-weight: 800;
}

.exam-countdown-card h3 {
    margin: 0;

    color: #071b35;

    font-size: 23px;
}

.exam-date {
    margin-top: 5px;

    color: #718398;

    font-size: 13px;
}


/* GÜN */

.exam-days {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    margin-top: 20px;
}

.exam-days strong {
    color: #147df5;

    font-size: 42px;
    line-height: .9;
}

.exam-days span {
    color: #718398;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .4px;
}


/* GEÇMİŞ SINAV */

.exam-past {
    background: #f8fafc;
}

.exam-past .exam-icon,
.exam-past .exam-status {
    background: #eef1f4;
}

.exam-past .exam-status {
    color: #8291a1;
}

.exam-finished {
    margin-top: 21px;
}

.exam-finished strong {
    display: block;

    color: #53677a;

    font-size: 16px;
}

.exam-finished span {
    display: block;

    margin-top: 5px;

    color: #93a0ad;

    font-size: 12px;
}


/* TABLET */

@media (max-width: 900px) {

    .exam-countdown-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* MOBİL */

@media (max-width: 560px) {

    .exam-countdown-section {
        padding: 45px 0;
    }

    .exam-section-head h2 {
        font-size: 27px;
    }

    .exam-countdown-grid {
        grid-template-columns: 1fr;
    }

    .exam-countdown-card {
        padding: 19px;
    }
}