/* ===== QUIZ GRADIENT NAV BUTTON ===== */
.quiz-gradient-btn {
    padding: 8px 16px !important;
    border-radius: 999px;
    background: linear-gradient(135deg, #7f00ff, #e100ff);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(127, 0, 255, 0.35);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hover */
.quiz-gradient-btn:hover {
    background: linear-gradient(135deg, #e100ff, #7f00ff);
    box-shadow: 0 6px 18px rgba(225, 0, 255, 0.45);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Active (basılı hissi) */
.quiz-gradient-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(127, 0, 255, 0.35);
}

/* Mobilde navbar collapse uyumu */
@media (max-width: 991px) {
    .quiz-gradient-btn {
        margin-top: 6px;
        justify-content: center;
    }
}

/* ===== QUIZ MOBILE OFFCANVAS BUTTON ===== */
.quiz-gradient-mobile {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7f00ff, #e100ff);
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(127, 0, 255, 0.35);
    transition: all 0.25s ease;
}

/* Hover / tap */
.quiz-gradient-mobile:hover {
    background: linear-gradient(135deg, #e100ff, #7f00ff);
    box-shadow: 0 6px 18px rgba(225, 0, 255, 0.45);
    text-decoration: none;
}

/* Mobilde aralara nefes */
.offcanvas-body .quiz-gradient-mobile {
    margin: 8px 0;
}

.quiz-gradient-mobile::after {
    content: "Yeni";
    margin-left: 8px;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 6px;
}

/* ===== WORD GAME GRADIENT NAV BUTTON ===== */
.word-gradient-btn {
    padding: 8px 16px !important;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f9b0f, #38ef7d);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(15, 155, 15, 0.35);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.word-gradient-btn:hover {
    background: linear-gradient(135deg, #38ef7d, #0f9b0f);
    box-shadow: 0 6px 18px rgba(56, 239, 125, 0.45);
    transform: translateY(-1px);
    text-decoration: none;
}

.word-gradient-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(15, 155, 15, 0.35);
}

/* ===== WORD GAME MOBILE OFFCANVAS ===== */
.word-gradient-mobile {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f9b0f, #38ef7d);
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(15, 155, 15, 0.35);
    transition: all 0.25s ease;
}

.word-gradient-mobile:hover {
    background: linear-gradient(135deg, #38ef7d, #0f9b0f);
    box-shadow: 0 6px 18px rgba(56, 239, 125, 0.45);
    text-decoration: none;
}

.offcanvas-body .word-gradient-mobile {
    margin: 8px 0;
}


@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-Black.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-BlackItalic.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: italic;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* Extra Bold */
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800; /* Extra Bold */
    font-style: italic;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-LightItalic.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: italic;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-MediumItalic.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: italic;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600; /* Semi Bold */
    font-style: normal;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('/static/css/fonts/RedHatDisplay-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600; /* Semi Bold */
    font-style: italic;
}