/* =========================================
   GENEL DEĞİŞKENLER VE AYARLAR
   ========================================= */
:root {
    /* Tipografi */
    --fn-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fn-title-size: 14px;
    --fn-message-size: 13px;
    --fn-time-size: 11px;

    /* Genel Renkler (Temel) */
    --fn-title-color: #1a1a1a;
    --fn-message-color: #555;
    --fn-time-color: #888;
    --fn-close-color: #999;
    --fn-close-hover-color: #333;

    /* Genel Progress Bar */
    --fn-progress-height: 3px;
    --fn-progress-color: #4f46e5;

    /* ==========================================
       TEMA: DEFAULT (Cam Efekti)
       ========================================== */
    --theme-default-bg: rgba(255, 255, 255, 0.85);
    --theme-default-border: 1px solid rgba(255, 255, 255, 0.5);
    --theme-default-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --theme-default-shadow-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    --theme-default-radius: 16px;
    --theme-default-image-radius: 12px;
    --theme-default-image-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --theme-default-progress-bg: #4f46e5;
    --theme-default-icon-color: #4f46e5;

    /* ==========================================
       TEMA: DARK (Koyu)
       ========================================== */
    --theme-dark-bg: #1f2937;
    --theme-dark-border: 1px solid #374151;
    --theme-dark-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --theme-dark-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --theme-dark-radius: 12px;
    --theme-dark-title-color: #f3f4f6;
    --theme-dark-message-color: #d1d5db;
    --theme-dark-time-color: #9ca3af;
    --theme-dark-close-color: #6b7280;
    --theme-dark-close-hover-color: #f3f4f6;
    --theme-dark-image-radius: 50%;
    --theme-dark-image-border: 2px solid #374151;
    --theme-dark-progress-bg: #60a5fa;
    --theme-dark-icon-color: #60a5fa;

    /* ==========================================
       TEMA: MINIMAL (Minimalist)
       ========================================== */
    --theme-minimal-bg: #ffffff;
    --theme-minimal-border: 1px solid #e5e7eb;
    --theme-minimal-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --theme-minimal-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --theme-minimal-radius: 4px;
    --theme-minimal-title-color: #000;
    --theme-minimal-title-font: monospace;
    --theme-minimal-message-color: #333;
    --theme-minimal-time-color: #666;
    --theme-minimal-close-color: #000;
    --theme-minimal-image-radius: 2px;
    --theme-minimal-progress-bg: #000;
    --theme-minimal-progress-height: 2px;
    --theme-minimal-icon-color: #000;

    /* ==========================================
       TEMA: MINIMAL-2 (Minimalist 2)
       ========================================== */
    --theme-minimal-2-bg: #f8fafc;
    --theme-minimal-2-border: 1px solid #e2e8f0;
    --theme-minimal-2-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08);
    --theme-minimal-2-radius: 12px;
    --theme-minimal-2-title-color: #0f172a;
    --theme-minimal-2-message-color: #475569;
    --theme-minimal-2-time-color: #64748b;
    --theme-minimal-2-close-color: #94a3b8;
    --theme-minimal-2-close-hover-color: #0f172a;
    --theme-minimal-2-image-radius: 10px;
    --theme-minimal-2-progress-bg: linear-gradient(90deg, #3b82f6, #0ea5e9);
    --theme-minimal-2-progress-height: 3px;
    --theme-minimal-2-icon-color: #3b82f6;

    /* ==========================================
       TEMA: MINIMAL-3 (Minimalist 3)
       ========================================== */
    --theme-minimal-3-bg: #fff;
    --theme-minimal-3-border: 1px solid #e5e7eb;
    --theme-minimal-3-shadow: none;
    --theme-minimal-3-radius: 0;
    --theme-minimal-3-padding: 12px 16px;
    --theme-minimal-3-title-color: #1c1917;
    --theme-minimal-3-message-color: #44403c;
    --theme-minimal-3-time-color: #78716c;
    --theme-minimal-3-close-color: #57534e;
    --theme-minimal-3-font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
    --theme-minimal-3-image-display: none;
    --theme-minimal-3-progress-bg: repeating-linear-gradient(90deg, #1c1917 0, #1c1917 6px, transparent 6px, transparent 12px);
    --theme-minimal-3-progress-opacity: 0.35;
    --theme-minimal-3-icon-color: #1c1917;

    /* ==========================================
       TEMA: COLORFUL (Renkli)
       ========================================== */
    --theme-colorful-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
    --theme-colorful-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
    --theme-colorful-shadow-hover: 0 15px 30px rgba(99, 102, 241, 0.4);
    --theme-colorful-radius: 20px;
    --theme-colorful-title-color: #fff;
    --theme-colorful-message-color: rgba(255, 255, 255, 0.9);
    --theme-colorful-time-color: rgba(255, 255, 255, 0.7);
    --theme-colorful-close-color: rgba(255, 255, 255, 0.6);
    --theme-colorful-close-hover-color: #fff;
    --theme-colorful-image-radius: 50%;
    --theme-colorful-image-border: 2px solid rgba(255, 255, 255, 0.5);
    --theme-colorful-progress-bg: rgba(255, 255, 255, 0.3);
    --theme-colorful-icon-color: rgba(255, 255, 255, 0.9);

    /* ==========================================
       TEMA: NEON (Neon Efekti)
       ========================================== */
    --theme-neon-bg: radial-gradient(circle at top, #fde047, #f97316 60%, #db2777);
    --theme-neon-border: 1px solid rgba(255, 255, 255, 0.2);
    --theme-neon-shadow: 0 18px 35px rgba(251, 191, 36, 0.35);
    --theme-neon-radius: 18px;
    --theme-neon-title-color: #111;
    --theme-neon-message-color: rgba(17, 17, 17, 0.9);
    --theme-neon-time-color: rgba(17, 17, 17, 0.8);
    --theme-neon-close-color: rgba(17, 17, 17, 0.7);
    --theme-neon-image-radius: 50%;
    --theme-neon-image-border: 2px solid rgba(255, 255, 255, 0.7);
    --theme-neon-progress-bg: rgba(255, 255, 255, 0.55);
    --theme-neon-progress-height: 4px;
    --theme-neon-icon-color: #dc2626;

    /* ==========================================
       TEMA: PASTEL (Pastel Renkler)
       ========================================== */
    --theme-pastel-bg: #fef9f5;
    --theme-pastel-border: 1px solid #f5d0c5;
    --theme-pastel-shadow: 0 10px 25px rgba(245, 208, 197, 0.5);
    --theme-pastel-radius: 24px;
    --theme-pastel-title-color: #8b5cf6;
    --theme-pastel-message-color: #6b7280;
    --theme-pastel-time-color: #a78bfa;
    --theme-pastel-close-color: #8b5cf6;
    --theme-pastel-image-radius: 16px;
    --theme-pastel-icon-color: #ec4899;
    --theme-pastel-progress-bg: linear-gradient(90deg, #f472b6, #c084fc);

    /* ==========================================
       TEMA: TERMINAL (Terminal Görünümü)
       ========================================== */
    --theme-terminal-bg: #020617;
    --theme-terminal-border: 1px solid #0f172a;
    --theme-terminal-shadow: 0 20px 40px rgba(2, 6, 23, 0.65);
    --theme-terminal-radius: 6px;
    --theme-terminal-title-color: #d9f99d;
    --theme-terminal-message-color: #a7f3d0;
    --theme-terminal-time-color: #67e8f9;
    --theme-terminal-close-color: #22d3ee;
    --theme-terminal-font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
    --theme-terminal-image-radius: 2px;
    --theme-terminal-image-filter: grayscale(100%);
    --theme-terminal-progress-bg: #22d3ee;
    --theme-terminal-progress-height: 2px;
    --theme-terminal-icon-color: #22d3ee;
}

/* Bildirim Konteyneri */
.fn-notification-container {
    position: fixed;
    z-index: 9999;
    font-family: var(--fn-font-family);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Konumlandırma JS tarafından yönetilir */
}

/* Temel Bildirim Kartı */
.fn-notification-card {
    width: 320px;
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 16px;
}

.fn-notification-card.fn-active {
    transform: translateY(0);
    opacity: 1;
}

.fn-notification-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    flex-shrink: 0;
}

.fn-notification-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.fn-notification-icon svg {
    width: 28px;
    height: 28px;
}

.fn-notification-card:hover .fn-notification-icon {
    transform: scale(1.15);
}

.fn-notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fn-notification-title {
    font-size: var(--fn-title-size);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: var(--fn-title-color);
}

.fn-notification-message {
    font-size: var(--fn-message-size);
    margin: 0;
    line-height: 1.4;
    color: var(--fn-message-color);
}

.fn-notification-time {
    font-size: var(--fn-time-size);
    margin-top: 2px;
    color: var(--fn-time-color);
}

.fn-notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
    color: var(--fn-close-color);
}

.fn-notification-close:hover {
    color: var(--fn-close-hover-color);
}

.fn-notification-close svg {
    width: 14px;
    height: 14px;
}

.fn-notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--fn-progress-height);
    width: 0%;
    transition: width linear;
}

/* =========================================
   TEMALAR
   ========================================= */

/* Tema: Default (Cam Efekti) */
.fn-theme-default {
    background: var(--theme-default-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--theme-default-border);
    box-shadow: var(--theme-default-shadow);
    border-radius: var(--theme-default-radius);
}

.fn-theme-default:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-default-shadow-hover);
}

.fn-theme-default .fn-notification-image {
    border-radius: var(--theme-default-image-radius);
    box-shadow: var(--theme-default-image-shadow);
}

.fn-theme-default .fn-notification-icon {
    color: var(--theme-default-icon-color);
}

.fn-theme-default .fn-notification-progress {
    background: var(--theme-default-progress-bg);
}


/* Tema: Dark (Koyu) */
.fn-theme-dark {
    background: var(--theme-dark-bg);
    border: var(--theme-dark-border);
    box-shadow: var(--theme-dark-shadow);
    border-radius: var(--theme-dark-radius);

    /* Koyu tema için renk geçersiz kılmaları */
    --fn-title-color: var(--theme-dark-title-color);
    --fn-message-color: var(--theme-dark-message-color);
    --fn-time-color: var(--theme-dark-time-color);
    --fn-close-color: var(--theme-dark-close-color);
    --fn-close-hover-color: var(--theme-dark-close-hover-color);
}

.fn-theme-dark:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-dark-shadow-hover);
}

.fn-theme-dark .fn-notification-image {
    border-radius: var(--theme-dark-image-radius);
    border: var(--theme-dark-image-border);
}

.fn-theme-dark .fn-notification-icon {
    color: var(--theme-dark-icon-color);
}

.fn-theme-dark .fn-notification-title {
    color: var(--fn-title-color);
}

.fn-theme-dark .fn-notification-message {
    color: var(--fn-message-color);
}

.fn-theme-dark .fn-notification-time {
    color: var(--fn-time-color);
}

.fn-theme-dark .fn-notification-close {
    color: var(--fn-close-color);
}

.fn-theme-dark .fn-notification-close:hover {
    color: var(--fn-close-hover-color);
}

.fn-theme-dark .fn-notification-progress {
    background: var(--theme-dark-progress-bg);
}


/* Tema: Minimal (Minimalist) */
.fn-theme-minimal {
    background: var(--theme-minimal-bg);
    border: var(--theme-minimal-border);
    box-shadow: var(--theme-minimal-shadow);
    border-radius: var(--theme-minimal-radius);

    /* Renk geçersiz kılmaları */
    --fn-title-color: var(--theme-minimal-title-color);
    --fn-message-color: var(--theme-minimal-message-color);
    --fn-time-color: var(--theme-minimal-time-color);
    --fn-close-color: var(--theme-minimal-close-color);
}

.fn-theme-minimal:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-minimal-shadow-hover);
}

.fn-theme-minimal .fn-notification-image {
    border-radius: var(--theme-minimal-image-radius);
}

.fn-theme-minimal .fn-notification-title {
    color: var(--fn-title-color);
    font-family: var(--theme-minimal-title-font);
}

.fn-theme-minimal .fn-notification-message {
    color: var(--fn-message-color);
}

.fn-theme-minimal .fn-notification-time {
    color: var(--fn-time-color);
}

.fn-theme-minimal .fn-notification-close {
    color: var(--fn-close-color);
}

.fn-theme-minimal .fn-notification-icon {
    color: var(--theme-minimal-icon-color);
}

.fn-theme-minimal .fn-notification-progress {
    background: var(--theme-minimal-progress-bg);
    height: var(--theme-minimal-progress-height);
}

/* Tema: Minimal 2 (Minimalist 2) */
.fn-theme-minimal-2 {
    background: var(--theme-minimal-2-bg);
    border: var(--theme-minimal-2-border);
    box-shadow: var(--theme-minimal-2-shadow);
    border-radius: var(--theme-minimal-2-radius);

    --fn-title-color: var(--theme-minimal-2-title-color);
    --fn-message-color: var(--theme-minimal-2-message-color);
    --fn-time-color: var(--theme-minimal-2-time-color);
    --fn-close-color: var(--theme-minimal-2-close-color);
    --fn-close-hover-color: var(--theme-minimal-2-close-hover-color);
}

.fn-theme-minimal-2 .fn-notification-image {
    border-radius: var(--theme-minimal-2-image-radius);
}

.fn-theme-minimal-2 .fn-notification-icon {
    color: var(--theme-minimal-2-icon-color);
}

.fn-theme-minimal-2 .fn-notification-progress {
    background: var(--theme-minimal-2-progress-bg);
    height: var(--theme-minimal-2-progress-height);
}

/* Tema: Minimal 3 (Minimalist 3) */
.fn-theme-minimal-3 {
    background: var(--theme-minimal-3-bg);
    border: var(--theme-minimal-3-border);
    border-radius: var(--theme-minimal-3-radius);
    box-shadow: var(--theme-minimal-3-shadow);
    padding: var(--theme-minimal-3-padding);

    --fn-title-color: var(--theme-minimal-3-title-color);
    --fn-message-color: var(--theme-minimal-3-message-color);
    --fn-time-color: var(--theme-minimal-3-time-color);
    --fn-close-color: var(--theme-minimal-3-close-color);
}

.fn-theme-minimal-3 .fn-notification-card,
.fn-theme-minimal-3 {
    font-family: var(--theme-minimal-3-font-family);
}

.fn-theme-minimal-3 .fn-notification-image {
    display: var(--theme-minimal-3-image-display);
}

.fn-theme-minimal-3 .fn-notification-icon {
    color: var(--theme-minimal-3-icon-color);
}

.fn-theme-minimal-3 .fn-notification-progress {
    background: var(--theme-minimal-3-progress-bg);
    opacity: var(--theme-minimal-3-progress-opacity);
}


/* Tema: Colorful (Renkli) */
.fn-theme-colorful {
    background: var(--theme-colorful-bg);
    box-shadow: var(--theme-colorful-shadow);
    border-radius: var(--theme-colorful-radius);
    border: none;

    /* Renk geçersiz kılmaları */
    --fn-title-color: var(--theme-colorful-title-color);
    --fn-message-color: var(--theme-colorful-message-color);
    --fn-time-color: var(--theme-colorful-time-color);
    --fn-close-color: var(--theme-colorful-close-color);
    --fn-close-hover-color: var(--theme-colorful-close-hover-color);
}

.fn-theme-colorful:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-colorful-shadow-hover);
}

.fn-theme-colorful .fn-notification-image {
    border-radius: var(--theme-colorful-image-radius);
    border: var(--theme-colorful-image-border);
}

.fn-theme-colorful .fn-notification-title {
    color: var(--fn-title-color);
}

.fn-theme-colorful .fn-notification-message {
    color: var(--fn-message-color);
}

.fn-theme-colorful .fn-notification-time {
    color: var(--fn-time-color);
}

.fn-theme-colorful .fn-notification-close {
    color: var(--fn-close-color);
}

.fn-theme-colorful .fn-notification-close:hover {
    color: var(--fn-close-hover-color);
}

.fn-theme-colorful .fn-notification-icon {
    color: var(--theme-colorful-icon-color);
}

.fn-theme-colorful .fn-notification-progress {
    background: var(--theme-colorful-progress-bg);
}

/* Tema: Neon (Neon Efekti) */
.fn-theme-neon {
    background: var(--theme-neon-bg);
    border-radius: var(--theme-neon-radius);
    border: var(--theme-neon-border);
    box-shadow: var(--theme-neon-shadow);

    --fn-title-color: var(--theme-neon-title-color);
    --fn-message-color: var(--theme-neon-message-color);
    --fn-time-color: var(--theme-neon-time-color);
    --fn-close-color: var(--theme-neon-close-color);
}

.fn-theme-neon .fn-notification-image {
    border-radius: var(--theme-neon-image-radius);
    border: var(--theme-neon-image-border);
}

.fn-theme-neon .fn-notification-icon {
    color: var(--theme-neon-icon-color);
}

.fn-theme-neon .fn-notification-progress {
    background: var(--theme-neon-progress-bg);
    height: var(--theme-neon-progress-height);
}

/* Tema: Pastel (Pastel Renkler) */
.fn-theme-pastel {
    background: var(--theme-pastel-bg);
    border: var(--theme-pastel-border);
    box-shadow: var(--theme-pastel-shadow);
    border-radius: var(--theme-pastel-radius);

    --fn-title-color: var(--theme-pastel-title-color);
    --fn-message-color: var(--theme-pastel-message-color);
    --fn-time-color: var(--theme-pastel-time-color);
    --fn-close-color: var(--theme-pastel-close-color);
}

.fn-theme-pastel .fn-notification-image {
    border-radius: var(--theme-pastel-image-radius);
}

.fn-theme-pastel .fn-notification-icon {
    color: var(--theme-pastel-icon-color);
}

.fn-theme-pastel .fn-notification-progress {
    background: var(--theme-pastel-progress-bg);
}

/* Tema: Terminal (Terminal Görünümü) */
.fn-theme-terminal {
    background: var(--theme-terminal-bg);
    border: var(--theme-terminal-border);
    box-shadow: var(--theme-terminal-shadow);
    border-radius: var(--theme-terminal-radius);

    --fn-title-color: var(--theme-terminal-title-color);
    --fn-message-color: var(--theme-terminal-message-color);
    --fn-time-color: var(--theme-terminal-time-color);
    --fn-close-color: var(--theme-terminal-close-color);
}

.fn-theme-terminal {
    font-family: var(--theme-terminal-font-family);
}

.fn-theme-terminal .fn-notification-image {
    border-radius: var(--theme-terminal-image-radius);
    filter: var(--theme-terminal-image-filter);
}

.fn-theme-terminal .fn-notification-icon {
    color: var(--theme-terminal-icon-color);
}

.fn-theme-terminal .fn-notification-progress {
    background: var(--theme-terminal-progress-bg);
    height: var(--theme-terminal-progress-height);
}


/* Mobil Uyumluluk */
@media (max-width: 480px) {
    .fn-notification-container {
        bottom: 10px;
        width: 95%;
    }

    .fn-notification-card {
        width: 100%;
    }
}