:root {
    --ana-siyah: #000000;
    --nav-bg: #000000;
    --neon-mor: #601dc2; 
    --yazi-beyaz: #ffffff;
    --gri-yazi: #a0a0a0;
    --mavi-onay: #00d2ff;
    --yesil-guven: #00e676;
    --kirmizi-iptal: #ff4b4b;
    --card-bg: #0a0a0a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; background-color: var(--ana-siyah); }

body {
    background: radial-gradient(circle at top, #1a052d 0%, #000000 100%);
    background-attachment: fixed;
    color: var(--yazi-beyaz);
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

.nav-btn { 
    border: 2px solid var(--neon-mor); padding: 8px 20px; border-radius: 5px; 
    color: white !important; background: transparent; transition: 0.3s; 
    text-decoration: none; font-weight: bold; display: inline-block;
}
.nav-btn:hover { background: var(--neon-mor); box-shadow: 0 0 15px var(--neon-mor); }

.section-title { 
    margin-bottom: 40px; border-left: 5px solid var(--neon-mor); 
    padding-left: 15px; font-size: 28px; font-weight: 900; text-transform: uppercase; 
}
.section-title span { color: var(--neon-mor); text-shadow: 0 0 15px var(--neon-mor); }

.notif-item-content {
    flex: 1;
    min-width: 0; 
}

.notif-item-content span {
    display: block;
    white-space: normal; 
    word-break: break-word; 
    line-height: 1.4;
    margin-top: 4px;
    font-size: 12px;
}

.notif-body {
    max-height: 350px; 
    overflow-y: auto;
    padding-bottom: 10px;
}

#toast-container {
    position: fixed;
    bottom: 20px; 
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column; 
    gap: 15px; 
    max-width: 90vw; 
    pointer-events: none; 
}

.custom-toast {
    pointer-events: auto; 
    width: max-content;
    max-width: 100%;
    word-break: break-word; 
}


@media (max-width: 768px) {
    
    .notif-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 100px !important; 
        left: 5vw !important; 
        right: 5vw !important; 
        width: 90vw !important; 
        min-width: 90vw !important; 
        max-width: none !important;
        transform: none !important; 
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999999 !important; 
        border-radius: 15px !important;
        box-shadow: 0 10px 50px rgba(0,0,0,0.95) !important;
        background-color: rgba(10, 10, 10, 0.98) !important; 
    }

    .notif-panel .notif-body {
        max-height: 50vh !important; 
        overflow-y: auto !important;
        padding: 10px !important;
    }

    #toast-container {
        bottom: auto !important; 
        top: 20px !important; 
        right: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        align-items: center !important;
        padding: 0 20px !important;
        flex-direction: column-reverse !important; 
        z-index: 999999 !important;
    }

    .custom-toast {
        width: 100% !important; 
        max-width: 400px !important;
        margin-bottom: 0 !important;
        margin-top: 10px !important;
        text-align: center;
        animation: slideDownMobileToast 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }

    .custom-toast.hide {
        animation: slideUpMobileToastHide 0.4s ease forwards !important;
    }
}

@keyframes slideDownMobileToast {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpMobileToastHide {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-50px); }
}