* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f5f7;
    margin: 0;
    color: #1f2937;
}
.navbar {
    background: #1e3a5f;
    color: white;
    padding: 14px 24px;
}
.nav-brand { font-weight: 700; font-size: 1.1rem; }
.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
}
.nav-links a:hover { text-decoration: underline; }
.nav-user { margin-left: 18px; opacity: 0.85; font-size: 0.9rem; }

.container { max-width: 900px; margin: 30px auto; padding: 0 20px; }

h1 { font-size: 1.5rem; margin-bottom: 16px; }
h2 { font-size: 1.15rem; margin-top: 24px; }
.muted { color: #6b7280; }

.login-box {
    max-width: 360px;
    margin: 80px auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.login-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.login-logo-umraniye { height: 44px; width: auto; }
.login-logo-zabita { height: 64px; width: auto; }

form { display: flex; flex-direction: column; gap: 6px; }
.search-form { flex-direction: row; gap: 10px; margin-bottom: 20px; }
.search-form input { flex: 1; }

label { font-size: 0.85rem; font-weight: 600; margin-top: 8px; color: #374151; }
input, select {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
}
button {
    background: #1e3a5f;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    margin-top: 10px;
}
button:hover { background: #16304f; }
.btn-danger { background: #b91c1c; margin-top: 0; padding: 6px 12px; }
.btn-danger:hover { background: #991b1b; }

.tebligat-secim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.tebligat-secim button { margin-top: 0; font-size: 0.85rem; padding: 6px 12px; }

.imza-bolumu {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.imza-canvas {
    width: 100%;
    max-width: 500px;
    height: 200px;
    background: #fafafa;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    display: block;
    touch-action: none;
    cursor: crosshair;
}
.imza-butonlar {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.imza-butonlar button { margin-top: 0; }
.imza-onizleme {
    max-width: 320px;
    max-height: 140px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px;
    background: white;
    display: block;
    margin-bottom: 10px;
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}
.action-bar button { margin-top: 0; }
.action-bar-spacer { margin-left: auto; }
.inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.inline-actions button { margin-top: 0; padding: 5px 10px; font-size: 0.82rem; }
.inline-actions form { display: inline-flex; margin: 0; }
.btn-group {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-group button {
    border-radius: 0;
    margin-top: 0;
}
.btn-group a:first-child button {
    border-right: 1px solid rgba(255,255,255,0.3);
}
@media (max-width: 640px) {
    .action-bar { gap: 8px; }
    .action-bar-spacer { margin-left: 0; width: 100%; }
    .action-bar-spacer button { width: 100%; }
}

.result-card, .form-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.info-table, .penalty-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.info-table th, .penalty-table th {
    text-align: left;
    padding: 8px 10px;
    background: #f3f4f6;
    font-size: 0.85rem;
    color: #374151;
}
.info-table td, .penalty-table td {
    padding: 8px 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

.avatar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    position: relative;
}
.avatar-badge.large { width: 56px; height: 56px; min-width: 56px; font-size: 1.15rem; }
.personnel-name-row { display: flex; align-items: center; gap: 10px; }
.online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid white;
    border-radius: 50%;
}
.avatar-badge.large .online-dot { width: 14px; height: 14px; border-width: 2.5px; }

.toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: calc(100% - 36px);
}
.toast {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
    padding: 13px 34px 13px 16px;
    position: relative;
    font-size: 0.88rem;
    color: #1f2937;
    border-left: 4px solid #1e3a5f;
    animation: toastIn 280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.closing { animation: toastOut 220ms ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }
.toast-error { border-left-color: #dc2626; }
.toast-success { border-left-color: #16a34a; }
.toast-message { line-height: 1.4; }
.toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.15rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    margin-top: 0;
}
.toast-close:hover { color: #374151; background: none; transform: none; box-shadow: none; }
@media (max-width: 640px) {
    .toast-container { left: 10px; right: 10px; top: 10px; max-width: none; width: auto; }
}

.brand-link { color: white; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.logo-badge {
    background: white;
    border-radius: 6px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
}
.logo-umraniye { height: 22px; width: auto; display: block; }
.logo-zabita { height: 34px; width: auto; display: block; }
.brand-text { font-weight: 700; font-size: 1.05rem; }
@media (max-width: 640px) {
    .brand-text { display: none; }
    .container { padding: 0 14px; margin: 16px auto; }
    h1 { font-size: 1.3rem; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    /* Navbar: 8 menü öğesi dar ekranda birkaç satıra bölünüyor — satırlar
       arasında daha ferah boşluk (row-gap) ve biraz daha büyük dokunma
       alanı, "üst üste binmiş" hissini önler. */
    .nav-links {
        gap: 10px 8px;
    }
    .nav-links > a,
    .nav-links > details > summary {
        padding: 7px 14px;
        font-size: 0.88rem;
    }

    /* Tablolar (.penalty-table) telefon genişliğinde satır satır yana
       kaydırmak yerine, her satır kendi başına bir KART'a dönüşür —
       "Etiket: Değer" şeklinde okunaklı olur. Etiketler yukarıdaki
       DOMContentLoaded script'i tarafından data-label olarak otomatik
       eklenir (bkz. base.html). .info-table (2 sütunlu, zaten dar)
       eski yana-kaydırma davranışını korur. */
    .penalty-table {
        display: block;
        border: none;
    }
    .penalty-table thead { display: none; }
    .penalty-table tbody { display: block; }
    .penalty-table tr {
        display: block;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 4px 12px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        white-space: normal;
    }
    .penalty-table tbody tr:hover { background: white; }
    .penalty-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border-top: 1px solid #f3f4f6;
        white-space: normal;
        text-align: right;
    }
    .penalty-table td:first-child { border-top: none; }
    .penalty-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #9ca3af;
        text-align: left;
        flex-shrink: 0;
    }
    .penalty-table td:empty { display: none; }

    .info-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .search-form { flex-direction: column; align-items: stretch; }
    .search-form input { width: 100%; }
    .search-form button { width: 100%; }

    .filter-row { grid-template-columns: 1fr; }

    .champion-grid, .settings-grid { grid-template-columns: repeat(2, 1fr); }

    .nav-top { gap: 10px; }
    .user-chip { padding: 5px 6px 5px 12px; }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.stat-card {
    background: white;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-align: center;
}
.stat-label { font-size: 0.8rem; color: #6b7280; font-weight: 600; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: #1e3a5f; margin: 4px 0; }
.stat-sub { font-size: 0.85rem; color: #6b7280; }
.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
}
.trend-up { background: #dcfce7; color: #166534; }
.trend-down { background: #fee2e2; color: #991b1b; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-active { background: #dcfce7; color: #166534; }
.badge-inactive { background: #f3f4f6; color: #6b7280; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-waiting { background: #fef3c7; color: #92400e; }

.simple-tabs { display: flex; gap: 8px; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; }
.simple-tab-btn {
    background: none; border: none; padding: 10px 16px; margin: 0;
    font-size: 0.95rem; font-weight: 600; color: #6b7280; cursor: pointer;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.simple-tab-btn:hover { color: #111827; background: none; transform: none; box-shadow: none; }
.simple-tab-btn.active { color: #1e3a5f; border-bottom-color: #1e3a5f; }
.simple-tab-panel { display: none; }
.simple-tab-panel.active { display: block; }

.btn-secondary {
    background: #e5e7eb;
    color: #374151;
    margin-top: 0;
    padding: 6px 12px;
}
.btn-secondary:hover { background: #d1d5db; }

.penalty-table tbody tr:hover { background: #f9fafb; }

.nav-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 6px 8px 6px 16px;
}
.user-chip .nav-user { margin-left: 0; opacity: 0.9; font-size: 0.88rem; }
.user-chip a {
    background: #dc2626;
    color: white;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.user-chip a:hover {
    background: #b91c1c;
    text-decoration: none;
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(220,38,38,0.5);
}
.user-chip a.bell-icon-link {
    background: transparent;
    padding: 4px 6px;
    font-size: 1.15rem;
    font-weight: normal;
    line-height: 1;
}
.user-chip a.nav-user-link {
    background: transparent;
    color: white;
    padding: 5px 10px;
    font-weight: normal;
    opacity: 0.9;
    font-size: 0.88rem;
    border-radius: 999px;
}
.user-chip a.nav-user-link:hover {
    background: rgba(255,255,255,0.18);
    color: white;
    text-decoration: none;
    transform: none;
    box-shadow: none;
    opacity: 1;
}
.user-chip a.bell-icon-link:hover {
    background: rgba(255,255,255,0.15);
    transform: scale(1.12);
    box-shadow: none;
}
@keyframes zilSallanma {
    0%, 88%, 100% { transform: rotate(0deg); }
    90% { transform: rotate(-12deg); }
    92% { transform: rotate(10deg); }
    94% { transform: rotate(-8deg); }
    96% { transform: rotate(4deg); }
}
.zil-salla {
    animation: zilSallanma 3s ease-in-out infinite;
    transform-origin: 50% 0%;
}
@media (prefers-reduced-motion: reduce) {
    .zil-salla { animation: none; }
}
.nav-links {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.nav-links > a,
.nav-links > details {
    margin-right: 0;
    margin-bottom: 0;
}
.nav-links > a:last-child,
.nav-links > details:last-child {
    margin-right: 0;
}
.nav-links > a {
    background: rgba(255,255,255,0.1);
    padding: 6px 16px;
    border-radius: 999px;
    transition: background-color 150ms ease, transform 150ms ease;
    display: inline-block;
}
.nav-links > a:hover {
    background: rgba(255,255,255,0.22);
    text-decoration: none;
    transform: translateY(-1px);
}
.nav-links > details > summary {
    background: rgba(255,255,255,0.1);
    padding: 6px 16px;
    border-radius: 999px;
    transition: background-color 150ms ease;
}
.nav-links > details > summary:hover {
    background: rgba(255,255,255,0.22);
}

.nav-badge {
    background: #dc2626;
    color: white;
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 1px 7px;
    margin-left: 3px;
    font-weight: 700;
}

/* İç içe alt menü (Talepler) */
.nav-subdropdown { position: relative; margin: 2px 0; }
.nav-dropdown-menu .nav-subdropdown summary {
    cursor: pointer;
    list-style: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: #1f2937 !important;
}
.nav-dropdown-menu .nav-subdropdown summary:hover { background: #f3f4f6; }
.nav-dropdown-menu .nav-subdropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown-menu .nav-subdropdown summary::after { content: " ▾"; float: right; }
.nav-subdropdown[open] summary::after { content: " ▴"; }
.nav-subdropdown-menu {
    background: #f9fafb;
    padding: 4px 0;
}
.nav-subdropdown-menu a { padding-left: 30px; font-size: 0.87rem; }

.filter-box {
    background: white;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.filter-box summary {
    cursor: pointer;
    font-weight: 600;
    color: #1e3a5f;
}
.filter-form { margin-top: 14px; }
.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.filter-row label { margin-top: 0; }
.filter-row input, .filter-row select { width: 100%; }

.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.inline-form input, .inline-form select { width: auto; margin-top: 0; }

.badge-pending { background: #fef3c7; color: #92400e; }

.period-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.period-tabs a {
    padding: 8px 16px;
    border-radius: 6px;
    background: white;
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.period-tabs a.active { background: #1e3a5f; color: white; }

.trend-up { color: #166534; font-weight: 700; }
.trend-down { color: #991b1b; font-weight: 700; }

/* Yönetim Paneli dropdown */
.nav-dropdown {
    display: inline-block;
    position: relative;
}
.nav-dropdown summary {
    cursor: pointer;
    color: white;
    list-style: none;
    font-size: 0.95rem;
    display: inline;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: " ▾"; }
.nav-dropdown[open] summary::after { content: " ▴"; }
.nav-dropdown-menu {
    position: absolute;
    top: 24px;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 8px 0;
    min-width: 200px;
    z-index: 50;
}
.nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #1f2937 !important;
    font-size: 0.9rem;
    text-decoration: none;
}
.nav-dropdown-menu a:hover { background: #f3f4f6; }

/* Şampiyon / rozet bileşenleri */
.champion-banner {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
}
.trophy-badge {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 10px;
    vertical-align: middle;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mini-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.champion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.champion-card {
    background: white;
    border-radius: 12px;
    padding: 18px 12px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid #fde68a;
}
.champion-trophy { font-size: 2rem; }
.champion-month { font-size: 0.8rem; color: #92400e; font-weight: 700; margin-top: 4px; }
.champion-name { font-size: 0.95rem; color: #1f2937; font-weight: 600; margin-top: 4px; }
.champion-count { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }

.ranking-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.ranking-tab-btn {
    padding: 8px 20px;
    border-radius: 6px;
    background: white;
    color: #374151;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ranking-tab-btn:hover { background: #f9fafb; }
.ranking-tab-btn.active { background: #1e3a5f; color: white; border-color: #1e3a5f; }

.rank-first {
    background: linear-gradient(90deg, #fef3c7, transparent);
    font-weight: 700;
}
.rank-first td:first-child { font-size: 1.2rem; }

.report-buttons { display: flex; gap: 10px; margin-top: 12px; }
.report-buttons button { margin-top: 0; }
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 6px;
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: normal;
    cursor: pointer;
    margin-top: 0;
}
.checkbox-item input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}
.checkbox-item input[type="checkbox"]:disabled + strong,
.checkbox-item input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.existing-images {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f9fafb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 4px;
}
.existing-image-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-top: 0;
}
.existing-image-item input { width: auto; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.settings-card {
    background: white;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.settings-icon { font-size: 1.8rem; }
.settings-title { font-size: 0.95rem; color: #1f2937; font-weight: 700; margin-top: 8px; }
.settings-desc { font-size: 0.78rem; color: #6b7280; margin-top: 4px; }

/* ============================================================
   ANİMASYON KATMANI
   Kurumsal/premium his: hızlı (200-300ms), sade, dikkat dağıtmayan.
   prefers-reduced-motion tercih edilirse tüm animasyonlar kapanır.
   ============================================================ */

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 1. SAYFA GEÇİŞLERİ — içerik her yüklendiğinde hafifçe belirir.
   transform/opacity kullanıldığı için layout shift oluşmaz. */
.container {
    animation: fadeSlideUp 260ms ease-out both;
}

/* 2. DASHBOARD KARTLARI — stat kartları ve şampiyon kartları kısa
   bir stagger (sırayla gecikme) ile belirir. */
.stat-card, .champion-card, .settings-card {
    animation: fadeSlideUp 300ms ease-out both;
}
.stat-grid .stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-grid .stat-card:nth-child(2) { animation-delay: 40ms; }
.stat-grid .stat-card:nth-child(3) { animation-delay: 80ms; }
.stat-grid .stat-card:nth-child(4) { animation-delay: 120ms; }
.stat-grid .stat-card:nth-child(5) { animation-delay: 160ms; }
.stat-grid .stat-card:nth-child(6) { animation-delay: 200ms; }

.champion-grid .champion-card:nth-child(1) { animation-delay: 0ms; }
.champion-grid .champion-card:nth-child(2) { animation-delay: 30ms; }
.champion-grid .champion-card:nth-child(3) { animation-delay: 60ms; }
.champion-grid .champion-card:nth-child(4) { animation-delay: 90ms; }
.champion-grid .champion-card:nth-child(5) { animation-delay: 120ms; }
.champion-grid .champion-card:nth-child(6) { animation-delay: 150ms; }

.settings-grid .settings-card:nth-child(1) { animation-delay: 0ms; }
.settings-grid .settings-card:nth-child(2) { animation-delay: 30ms; }
.settings-grid .settings-card:nth-child(3) { animation-delay: 60ms; }
.settings-grid .settings-card:nth-child(4) { animation-delay: 90ms; }
.settings-grid .settings-card:nth-child(5) { animation-delay: 120ms; }
.settings-grid .settings-card:nth-child(6) { animation-delay: 150ms; }
.settings-grid .settings-card:nth-child(7) { animation-delay: 180ms; }
.settings-grid .settings-card:nth-child(8) { animation-delay: 210ms; }

/* result-card / form-card gibi büyük bloklar için de çok hafif bir giriş */
.result-card, .form-card {
    animation: fadeSlideUp 240ms ease-out both;
}

/* Butonlar ve linkler: performanslı, kısa geçiş (hover/aktif durumlar için) */
button, .btn, .btn-secondary, .btn-danger, a {
    transition: background-color 150ms ease, box-shadow 150ms ease,
                transform 150ms ease, border-color 150ms ease;
}
button:active, .btn:active { transform: scale(0.97); }

.stat-card, .champion-card, .settings-card, .result-card, .form-card {
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.champion-card:hover, .settings-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* 8. MODAL / POPUP — sistemde ileride özel modal eklenirse hazır kullanılabilecek
   standart animasyon sınıfları (opacity + scale, kurumsal/yumuşak geçiş). */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    opacity: 0;
    animation: modalOverlayIn 200ms ease-out forwards;
}
.modal-overlay.closing { animation: modalOverlayOut 160ms ease-in forwards; }
@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    transform: scale(0.95);
    opacity: 0;
    animation: modalContentIn 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding: 26px 28px;
    max-width: 420px;
    width: 90%;
}
.modal-content.closing { animation: modalContentOut 160ms ease-in forwards; }
@keyframes modalContentIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes modalContentOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }

.confirm-modal-text { margin: 0 0 22px; font-size: 0.95rem; color: #1f2937; line-height: 1.5; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-modal-actions button { margin-top: 0; }

.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: white;
    border-radius: 50%;
    animation: btnSpin 0.6s linear infinite;
    margin-right: 7px;
    vertical-align: middle;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ============================================================
   BAŞARI ANİMASYONU — bir tutanak (ceza/tespit) kaydedildiğinde,
   detay sayfası açılır açılmaz kısa süreliğine büyüyen bir tik
   işareti gösterilir ("iş bitti" hissi). base.html'deki script,
   URL'de ?kaydedildi=1 görürse bu overlay'i otomatik tetikler.
   ============================================================ */
.basari-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.basari-overlay.gorunur { opacity: 1; }
.basari-kutu {
    background: white;
    border-radius: 16px;
    padding: 34px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    transform: scale(0.85);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.basari-overlay.gorunur .basari-kutu { transform: scale(1); }
.basari-check-svg { width: 68px; height: 68px; }
.basari-check-circle {
    stroke: #16a34a;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    transition: stroke-dashoffset 420ms ease-out;
}
.basari-check-mark {
    stroke: #16a34a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    transition: stroke-dashoffset 280ms ease-out 380ms;
}
.basari-overlay.gorunur .basari-check-circle { stroke-dashoffset: 0; }
.basari-overlay.gorunur .basari-check-mark { stroke-dashoffset: 0; }
.basari-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: #111827;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 220ms ease 420ms, transform 220ms ease 420ms;
}
.basari-overlay.gorunur .basari-text { opacity: 1; transform: translateY(0); }

/* ============================================================
   YENİ EKLENEN SATIR VURGUSU — bir kayıt oluşturduktan sonra
   listeye dönersen, o satır birkaç saniyeliğine yumuşakça
   parlayıp söner. app.py bunu session üzerinden bir kerelik
   işaretler (yenilemede tekrar parlamaz).
   ============================================================ */
@keyframes yeniSatirParla {
    0%   { background-color: #fef9c3; }
    100% { background-color: transparent; }
}
.penalty-table tr.yeni-eklendi {
    animation: yeniSatirParla 2.6s ease-out forwards;
}

/* ============================================================
   ŞAMPİYONLUK KUTLAMASI — kullanıcı Sıralama sayfasında bu ayın
   1'incisi olduğunu gördüğünde, kısa bir konfeti + rozet animasyonu.
   ============================================================ */
.zbt-parcacik {
    position: fixed;
    top: -20px;
    z-index: 3100;
    border-radius: 2px;
    animation: confettiDus linear forwards;
    pointer-events: none;
}
@keyframes confettiDus {
    to { transform: translateY(105vh) rotate(600deg); opacity: 0.9; }
}
.sampiyon-kutlama-kart {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    box-shadow: 0 10px 26px rgba(217,119,6,0.35);
    opacity: 0;
    transform: scale(0.9) translateY(-6px);
    animation: sampiyonKutlamaGir 480ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}
@keyframes sampiyonKutlamaGir {
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.sampiyon-kutlama-kart .emoji { font-size: 2rem; }
.sampiyon-kutlama-kart .baslik { font-weight: 700; font-size: 1.05rem; }
.sampiyon-kutlama-kart .alt { font-size: 0.85rem; opacity: 0.92; }

/* Kullanıcı "hareketi azalt" tercihi seçtiyse tüm animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}