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

:root {
    /* Renk Paleti */
    --primary-color: #05a0d4;
    --secondary-color: #ffffff;
    --dark-bg: #2c3e50;
    --light-bg: #f4f7f6;
    --text-muted: #6c757d;
    --text-dark: #2c3e50;
    /* Logo Yolları */
    --logo-url: url('/images/MavinoktaLogo.png');
    --logo-slogan-url: url('/images/MavinoktaSloganLogo.png');
    /* Yazı Tipleri (Merkezi Yönetim) */
    --font-heading: 'Nunito', sans-serif; /* Başlıklar için (Yumuşak ve heybetli) */
    --font-body: 'Inter', sans-serif; /* Normal metinler için (Net ve modern) */
}

/* --- Global Tipografi Ayarları --- */
body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Başlık Standartları (H1 - H6) */
h1, h2, h3, h4, h5, h6, .brand-title {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--primary-color);
}

/* Alt Başlık Standartları */
.brand-subtitle, .section-subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-dark);
}

/* Normal Metinler */
p, span, label, .form-control {
    font-family: var(--font-body);
}

/* --- Global Logo Sınıfları --- */
.dynamic-logo {
    content: var(--logo-url);
    display: inline-block;
    object-fit: contain;
}

.dynamic-logo-slogan {
    content: var(--logo-slogan-url);
    display: inline-block;
    object-fit: contain;
}

/* --- Temel Font Ölçüleri --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* --- Odaklanma Efektleri --- */
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}



.row-deleted {
    animation: row-fade-out 0.8s forwards;
    pointer-events: none; /* Silinirken tıklanmasın */
}

@keyframes row-fade-out {
    0% {
        transform: scale(1);
        opacity: 1;
        background-color: transparent;
    }

    30% {
        background-color: #fff1f2;
        transform: scale(1.02);
    }

    100% {
        transform: translateX(100px);
        opacity: 0;
        background-color: #fef2f2;
    }
}