/* Custom styling for Pembegül Yıldız Matematik Subdomain */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #0f172a;
}

.dark body {
    color: #f8fafc;
}

/* Responsive Light & Dark Mode iOS Glass Header & Footer */
.transparent-gray-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.dark .transparent-gray-header {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.35);
}

.transparent-gray-footer {
    background: rgba(248, 250, 252, 0.90) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border-top: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
    color: #0f172a !important;
}

.dark .transparent-gray-footer {
    background: rgba(15, 23, 42, 0.82) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 -10px 32px 0 rgba(0, 0, 0, 0.35);
    color: #ffffff !important;
}

/* iOS Control Center Glass Pill Container */
.ios-glass-pill {
    background: rgba(241, 245, 249, 0.90) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.dark .ios-glass-pill {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Dynamic High-Contrast Text for Light & Dark Modes */
.footer-title-contrast {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.dark .footer-title-contrast {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.footer-text-contrast {
    color: #1e293b !important;
    font-weight: 700 !important;
}

.dark .footer-text-contrast {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.footer-link-contrast {
    color: #0f172a !important;
    font-weight: 800 !important;
    transition: color 0.2s ease;
}

.footer-link-contrast:hover {
    color: #2563eb !important;
}

.dark .footer-link-contrast {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dark .footer-link-contrast:hover {
    color: #fde047 !important;
}

/* Custom Generated High-Res Mathematical Wallpaper Background with High Contrast */
.math-bg-feast {
    background-color: #cbd5e1;
    background-image: 
        linear-gradient(rgba(241, 245, 249, 0.85), rgba(226, 232, 240, 0.90)),
        url('/static/images/math_wallpaper.jpg');
    background-repeat: repeat;
    background-size: 1100px auto;
    background-attachment: fixed;
    position: relative;
}

.dark .math-bg-feast {
    background-color: #0f172a;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.70), rgba(30, 41, 59, 0.75)),
        url('/static/images/math_wallpaper.jpg');
    background-repeat: repeat;
    background-size: 1100px auto;
    background-attachment: fixed;
}

/* Text Visibility & Legibility Enhancements */
.text-high-contrast {
    color: #0f172a !important;
}

.dark .text-high-contrast {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.subtext-high-contrast {
    color: #334155 !important;
}

.dark .subtext-high-contrast {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Neon Cyan & Magenta Brand Badge Styling */
.neon-brand-badge {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.85) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5), inset 0 0 12px rgba(236, 72, 153, 0.3) !important;
    backdrop-filter: blur(14px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neon-brand-badge:hover {
    border-color: rgba(236, 72, 153, 0.9) !important;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.7), inset 0 0 18px rgba(56, 189, 248, 0.4) !important;
    transform: scale(1.04);
}

.neon-brand-text {
    background: linear-gradient(135deg, #ffffff 0%, #38bdf8 45%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7));
}

/* 3D Flip Card Animation for Pembegül Yıldız Matematik */
.perspective-1000 {
    perspective: 1000px;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1.25rem;
}

.flashcard-back {
    transform: rotateY(180deg);
}

/* Custom Gradient Animations */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-pulse-glow {
    animation: pulseGlow 4s infinite ease-in-out;
}

/* Animated Entrance & Flow for Hero Title & Text */
@keyframes heroFadeUp {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(35px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes textGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-hero-1 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-hero-2 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.animate-hero-3 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.animate-hero-4 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.animate-hero-5 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.dark .ios-glass-pill {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Dynamic High-Contrast Text for Light & Dark Modes */
.footer-title-contrast {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.dark .footer-title-contrast {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.footer-text-contrast {
    color: #1e293b !important;
    font-weight: 700 !important;
}

.dark .footer-text-contrast {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.footer-link-contrast {
    color: #0f172a !important;
    font-weight: 800 !important;
    transition: color 0.2s ease;
}

.footer-link-contrast:hover {
    color: #2563eb !important;
}

.dark .footer-link-contrast {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dark .footer-link-contrast:hover {
    color: #fde047 !important;
}

/* Custom Generated High-Res Mathematical Wallpaper Background with High Contrast */
.math-bg-feast {
    background-color: #cbd5e1;
    background-image: 
        linear-gradient(rgba(241, 245, 249, 0.85), rgba(226, 232, 240, 0.90)),
        url('/static/images/math_wallpaper.jpg');
    background-repeat: repeat;
    background-size: 1100px auto;
    background-attachment: fixed;
    position: relative;
}

.dark .math-bg-feast {
    background-color: #0f172a;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.70), rgba(30, 41, 59, 0.75)),
        url('/static/images/math_wallpaper.jpg');
    background-repeat: repeat;
    background-size: 1100px auto;
    background-attachment: fixed;
}

/* Text Visibility & Legibility Enhancements */
.text-high-contrast {
    color: #0f172a !important;
}

.dark .text-high-contrast {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.subtext-high-contrast {
    color: #334155 !important;
}

.dark .subtext-high-contrast {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Neon Cyan & Magenta Brand Badge Styling */
.neon-brand-badge {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.85) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5), inset 0 0 12px rgba(236, 72, 153, 0.3) !important;
    backdrop-filter: blur(14px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neon-brand-badge:hover {
    border-color: rgba(236, 72, 153, 0.9) !important;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.7), inset 0 0 18px rgba(56, 189, 248, 0.4) !important;
    transform: scale(1.04);
}

.neon-brand-text {
    background: linear-gradient(135deg, #ffffff 0%, #38bdf8 45%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7));
}

/* 3D Flip Card Animation for Pembegül Yıldız Matematik */
.perspective-1000 {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.flashcard-inner, .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner, .card-inner.flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back, .card-front, .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    border-radius: 1.5rem;
}

.flashcard-front, .card-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    z-index: 2;
}

.flashcard-back, .card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
}

/* Custom Gradient Animations */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-pulse-glow {
    animation: pulseGlow 4s infinite ease-in-out;
}

/* Animated Entrance & Flow for Hero Title & Text */
@keyframes heroFadeUp {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(35px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes textGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-hero-1 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-hero-2 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.animate-hero-3 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.animate-hero-4 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.animate-hero-5 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.animated-gradient-text {
    background-size: 200% auto;
    animation: textGradientMove 4s ease infinite;
}

/* ==========================================================================
   MULTI-COLOR ULTRA-VIBRANT NEON GLOW SYSTEM (STRICTLY FOR PAGE CONTENT CARDS)
   ========================================================================== */

/* Exclude Hero elements, Stats Bar, Header, Footer, Modals, and Buttons from neon glow */
header *,
footer *,
#register-modal *,
#sss-modal *,
#kvkk-modal *,
.hero-section *,
.stats-bar,
.stats-bar *,
button {
    box-shadow: none;
}

/* Ensure all neon elements preserve their rounded corner shapes on hover */
article.neon-pink, article.neon-cyan, article.neon-purple, article.neon-emerald, article.neon-orange, article.neon-gold,
.flashcard, .neon-pink, .neon-cyan, .neon-purple, .neon-emerald, .neon-orange, .neon-gold {
    outline: none !important;
}

/* 1. PINK / ROSE NEON */
article.neon-pink:hover,
.flashcard.neon-pink:hover,
.neon-pink:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #e11d48 !important;
    box-shadow: 0 0 25px 3px rgba(225, 29, 72, 0.45), 0 10px 30px rgba(225, 29, 72, 0.25) !important;
    transform: translateY(-5px) scale(1.015) !important;
}
.dark article.neon-pink:hover,
.dark .flashcard.neon-pink:hover,
.dark .neon-pink:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #ff007f !important;
    box-shadow: 0 0 35px 5px rgba(255, 0, 127, 0.75), 0 0 15px 2px rgba(255, 0, 127, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-5px) scale(1.015) !important;
}

/* 2. CYAN / TURQUOISE NEON */
article.neon-cyan:hover,
.flashcard.neon-cyan:hover,
.neon-cyan:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #0284c7 !important;
    box-shadow: 0 0 25px 3px rgba(2, 132, 199, 0.45), 0 10px 30px rgba(2, 132, 199, 0.25) !important;
    transform: translateY(-5px) scale(1.015) !important;
}
.dark article.neon-cyan:hover,
.dark .flashcard.neon-cyan:hover,
.dark .neon-cyan:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #00f6ff !important;
    box-shadow: 0 0 35px 5px rgba(0, 246, 255, 0.75), 0 0 15px 2px rgba(0, 246, 255, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-5px) scale(1.015) !important;
}

/* 3. PURPLE / VIOLET NEON */
article.neon-purple:hover,
.flashcard.neon-purple:hover,
.neon-purple:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #7c3aed !important;
    box-shadow: 0 0 25px 3px rgba(124, 58, 237, 0.45), 0 10px 30px rgba(124, 58, 237, 0.25) !important;
    transform: translateY(-5px) scale(1.015) !important;
}
.dark article.neon-purple:hover,
.dark .flashcard.neon-purple:hover,
.dark .neon-purple:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #a855f7 !important;
    box-shadow: 0 0 35px 5px rgba(168, 85, 247, 0.75), 0 0 15px 2px rgba(168, 85, 247, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-5px) scale(1.015) !important;
}

/* 4. EMERALD / LIME NEON */
article.neon-emerald:hover,
.flashcard.neon-emerald:hover,
.neon-emerald:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #059669 !important;
    box-shadow: 0 0 25px 3px rgba(5, 150, 105, 0.45), 0 10px 30px rgba(5, 150, 105, 0.25) !important;
    transform: translateY(-5px) scale(1.015) !important;
}
.dark article.neon-emerald:hover,
.dark .flashcard.neon-emerald:hover,
.dark .neon-emerald:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #39ff14 !important;
    box-shadow: 0 0 35px 5px rgba(57, 255, 20, 0.75), 0 0 15px 2px rgba(57, 255, 20, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-5px) scale(1.015) !important;
}

/* 5. ORANGE / GOLD NEON */
article.neon-orange:hover,
.flashcard.neon-orange:hover,
.flashcard.neon-gold:hover,
.neon-orange:hover:not(header *):not(footer *):not(.stats-bar *):not(button),
.neon-gold:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #ea580c !important;
    box-shadow: 0 0 25px 3px rgba(234, 88, 12, 0.45), 0 10px 30px rgba(234, 88, 12, 0.25) !important;
    transform: translateY(-5px) scale(1.015) !important;
}
.dark article.neon-orange:hover,
.dark .flashcard.neon-orange:hover,
.dark .flashcard.neon-gold:hover,
.dark .neon-orange:hover:not(header *):not(footer *):not(.stats-bar *):not(button),
.dark .neon-gold:hover:not(header *):not(footer *):not(.stats-bar *):not(button) {
    border-color: #ff6600 !important;
    box-shadow: 0 0 35px 5px rgba(255, 102, 0, 0.75), 0 0 15px 2px rgba(255, 102, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-5px) scale(1.015) !important;
}