:root {
    --bg-dark: #2d1b4e;
    --primary: #6c5ce7;
    --primary-dark: #5649b9;
    --success: #00b894;
    --danger: #d63031;
    --warning: #fdcb6e;
    --text-main: #2d3436;
}

* {
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* ✅ YENİ: Mobil ve Desktop için farklı davranış */
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-dark);
    background-image:
        radial-gradient(circle at 15% 50%, rgba(108, 92, 231, 0.2), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 206, 201, 0.2), transparent 25%);
    color: var(--text-main);

    /* ✅ MOBIL: Body overflow'a izin ver */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ✅ DESKTOP: Body'yi kilitle, sadece içerik scroll olsun */
@media (min-width: 1024px) {
    body {
        overflow: hidden;
        /* Desktop'ta body kilitli */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* ✅ Ana görünüm container'ları */
#view-teacher,
#view-student,
#view-login,
#view-role-selection {
    width: 100%;
    min-height: 100vh;
    /* Mobil için minimum yükseklik */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* fixed değil! */
}

/* ✅ Desktop'ta farklı davranış */
@media (min-width: 1024px) {

    #view-teacher,
    #view-student,
    #view-login,
    #view-role-selection {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        min-height: 0;
    }
}

/* ✅ App Container */
.app-container {
    width: 100%;
    min-height: 100vh;
    background: #f1f2f6;
    position: relative;
}

@media (min-width: 1024px) {
    .app-container {
        width: 95%;
        max-width: 2400px;
        height: 95vh;
        min-height: 0;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }
}

/* ✅ Tab içerikleri - Mobilde scroll olabilsin */
.tab-content {
    width: 100%;
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .tab-content {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Quiz Creator özel fix */
#tab-create-quiz {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ✅ Mobilde içerikler kaydırılabilir olmalı */
@media (max-width: 1023px) {
    .tab-content {
        height: 100%;
        min-height: 0;
    }

    #tab-live-monitor {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .tab-content>div:not(#live-monitor) {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

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

/* Premium UI Utilities */
.bg-size-200 {
    background-size: 200% 100%;
}

.bg-pos-100 {
    background-position: 100% 0;
}

.active\:scale-98:active {
    transform: scale(0.98);
}

.full-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
}

/* ✅ Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.3);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #2dd4bf;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #14b8a6;
}

/* Yatay scroll gizle */
.overflow-x-auto::-webkit-scrollbar {
    display: none;
}

.overflow-x-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Glass Panel */
.glass-panel {
    background: rgba(15, 23, 42, .65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, .15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.glass-panel-pro {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Matched State */
.matched {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: #047857 !important;
    color: white !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: scale(0.98);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

/* ✅ Animasyonlar */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.animate-bounceIn {
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ✅ SCROLL FIX - FORCE */
#view-teacher {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Main content scrollable area */
#view-teacher .absolute.inset-0 {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar görünürlüğü */
#view-teacher .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    background: rgba(0, 0, 0, 0.05);
}

#view-teacher .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #2dd4bf;
    border-radius: 5px;
}

#view-teacher .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #14b8a6;
}

/* Failed Match State */
.match-item-new.failed {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #b91c1c !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    transform: scale(0.95);
    pointer-events: none !important;
}

/* Sahne geçişi sırasında tüm body kararır ve tıklamalar engellenir */
body.scene-transitioning {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in-out !important;
}

/* Normal halde body pürüzsüz aydınlanır */
body {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}