/**
 * TJK Analiz PRO - MOBİL ACCORDION GÖRÜNÜM
 * Tüm Ekranlar İçin Optimize Edilmiş (280px - 768px)
 */

/* ==============================================
   TEMEL IZOLASYON
   ============================================== */
.tjk-wrap {
    all: initial;
}

.tjk-wrap * {
    all: revert;
    box-sizing: border-box;
}

/* PDF MODUNDA IZOLASYONU KALDIR */
.tjk-wrap.pdf-mode,
.tjk-wrap.pdf-mode * {
    all: revert !important;
}

.tjk-wrap {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

/* ==============================================
   MAVI TIKLAMA IZI ENGELLEME (KRITIK)
   ============================================== */
.tjk-wrap *,
.tjk-wrap *:focus,
.tjk-wrap *:active,
.tjk-wrap *:hover {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.tjk-wrap a,
.tjk-wrap button,
.tjk-wrap .toggle-det,
.tjk-wrap tbody tr {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.tjk-wrap a:active,
.tjk-wrap button:active,
.tjk-wrap .toggle-det:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}

/* ==============================================
   BASLIK
   ============================================== */
.tjk-wrap .tjk-head {
    background: linear-gradient(135deg, #8b0000 0%, #a00000 100%);
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tjk-wrap .tjk-head h2 {
    margin: 0;
    font-size: 22px;
    color: white;
    font-weight: 700;
}

.tjk-wrap .tjk-head small {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.9);
}

/* ==============================================
   KONTROL PANELI
   ============================================== */
.tjk-wrap .tjk-ctrl {
    background: #f5f5f5;
    padding: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 2px solid #ddd;
}

.tjk-wrap .date-badge {
    background: #333;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

.tjk-wrap select#tjk-hip {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
    min-width: 200px;
}

.tjk-wrap .tjk-btn {
    background: #8b0000;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.3s ease;
}

.tjk-wrap .tjk-btn:hover {
    background: #6d0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 0, 0, 0.3);
}

.tjk-wrap .tjk-btn:disabled {
    background: #999;
    cursor: not-allowed;
}

.tjk-wrap .tjk-btn-pdf {
    background: #2980b9;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.3s ease;
}

.tjk-wrap .tjk-btn-pdf:hover {
    background: #1f618d;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(41, 128, 185, 0.3);
}

/* ==============================================
   SONUC ALANI
   ============================================== */
.tjk-wrap #tjk-res {
    padding: 20px;
}

/* ==============================================
   MASAUSTU TABLO
   ============================================== */
.tjk-wrap .tjk-table {
    width: 100%;
    border-collapse: collapse;
}

.tjk-wrap .tjk-table thead th {
    background: #f8f9fa;
    color: #333;
    padding: 12px 10px;
    text-align: left;
    font-weight: bold;
    font-size: 13px;
    border-bottom: 2px solid #ddd;
}

.tjk-wrap .tjk-table thead th:nth-child(3),
.tjk-wrap .tjk-table thead th:nth-child(4),
.tjk-wrap .tjk-table thead th:nth-child(5),
.tjk-wrap .tjk-table thead th:nth-child(6) {
    text-align: center !important;
}

.tjk-wrap .tjk-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.tjk-wrap .tjk-table tbody tr:hover:not(.detail-row) {
    background: #f9f9f9;
}

.tjk-wrap .tjk-table tbody td {
    padding: 12px 10px;
    vertical-align: middle;
    color: #000;
    font-size: 14px;
}

.tjk-wrap .tjk-table tbody td:nth-child(3),
.tjk-wrap .tjk-table tbody td:nth-child(4),
.tjk-wrap .tjk-table tbody td:nth-child(5),
.tjk-wrap .tjk-table tbody td:nth-child(6) {
    text-align: center !important;
}

.tjk-wrap .tjk-table strong {
    color: #000;
    font-weight: bold;
}

.tjk-wrap .tjk-table small {
    color: #666;
    font-size: 12px;
}

/* ==============================================
   PUAN KUTUSU - 4'LÜ RENK SİSTEMİ
   ============================================== */
.tjk-wrap .score-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    color: white;
}

/* YEŞİL (Süper: 250+) */
.tjk-wrap .s-yesil {
    background-color: #27ae60 !important;
    color: #ffffff !important;
    border: 2px solid #219150 !important;
    font-weight: bold !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* MAVİ (İyi: 210-249) */
.tjk-wrap .s-mavi {
    background-color: #2980b9 !important;
    color: #ffffff !important;
    border: 2px solid #2471a3 !important;
}

/* SARI (Orta: 170-209) */
.tjk-wrap .s-sari {
    background-color: #f1c40f !important;
    color: #2c3e50 !important;
    border: 2px solid #d4ac0d !important;
    font-weight: 800 !important;
}

/* KIRMIZI (Zayıf: 170 Altı) */
.tjk-wrap .s-kirmizi {
    background-color: #c0392b !important;
    color: #ffffff !important;
    border: 2px solid #a93226 !important;
}

/* ==============================================
   META ETIKETLER
   ============================================== */
.tjk-wrap .meta-tag {
    display: inline-block;
    background: #e8f4f8;
    color: #0d47a1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin: 2px;
    border: 1px solid #90caf9;
}

/* ==============================================
   DETAY SATIRI - MASAÜSTÜ
   ============================================== */
.tjk-wrap .detail-row {
    display: none !important;
    background: #f8f9fa;
}

.tjk-wrap .detail-row.active {
    display: table-row !important;
}

.tjk-wrap .detail-row td {
    padding: 20px;
}

.tjk-wrap .detail-row ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tjk-wrap .detail-row li {
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
}

.tjk-wrap .detail-row li:last-child {
    border-bottom: none;
}

.tjk-wrap .detail-row strong {
    color: #8b0000;
    font-weight: 600;
}

/* ==============================================
   İNCELE BUTONU - MASAÜSTÜ
   ============================================== */
.tjk-wrap .toggle-det,
.tjk-wrap .btn-incele {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #34495e;
    color: #ffffff !important;
    border: none;
    min-width: 100px;
    padding: 8px 12px !important;
    border-radius: 4px;
    font-size: 11px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    cursor: pointer;
}

.tjk-wrap .toggle-det:hover,
.tjk-wrap .btn-incele:hover {
    background-color: #2c3e50;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.tjk-wrap .toggle-det:active,
.tjk-wrap .btn-incele:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tjk-wrap .toggle-det .icon::before,
.tjk-wrap .btn-incele .icon::before {
    content: "🔍";
    font-size: 13px;
}

.tjk-wrap .toggle-det.active,
.tjk-wrap .btn-incele.active {
    background-color: #e74c3c !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.tjk-wrap .toggle-det.active .icon::before,
.tjk-wrap .btn-incele.active .icon::before {
    content: "✖";
}

/* ==============================================
   📱 MOBİL ACCORDION GÖRÜNÜM
   TÜM KÜÇÜK EKRANLAR İÇİN OPTİMİZE (280px+)
   ============================================== */
@media screen and (max-width: 768px) {
    
    .tjk-wrap {
        margin: 0;
        border: none;
        border-radius: 0;
    }

    .tjk-wrap #tjk-res {
        padding: 0;
    }

    /* MASAÜSTÜ TABLOYU GİZLE */
    .tjk-wrap .tjk-table {
        display: none;
    }

    /* ==============================================
       MOBİL ACCORDION CONTAINER
       ============================================== */
    .tjk-wrap .mobile-accordion {
        display: block !important;
        width: 100%;
    }

    /* ==============================================
       ACCORDION ITEM (HER AT İÇİN BİR KART)
       ============================================== */
    .tjk-wrap .accordion-item {
        background: white;
        border-bottom: 1px solid #e0e0e0;
        margin: 0;
        transition: all 0.3s ease;
    }

    .tjk-wrap .accordion-item:first-child {
        border-top: 1px solid #e0e0e0;
    }

    /* ==============================================
       ACCORDION HEADER (TIKLANAN KISIM)
       🔧 KÜÇÜK EKRAN FİXLERİ
       ============================================== */
    .tjk-wrap .accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 10px; /* Padding azaltıldı */
        cursor: pointer;
        background: linear-gradient(to right, #ffffff 0%, #f8f9fa 100%);
        transition: all 0.3s ease;
        position: relative;
        gap: 8px; /* Gap eklendi */
    }

    .tjk-wrap .accordion-header:active {
        background: #f0f0f0;
    }

    .tjk-wrap .accordion-item.active .accordion-header {
        background: linear-gradient(to right, #fff5f5 0%, #ffe8e8 100%);
        border-bottom: 2px solid #e74c3c;
    }

    /* ==============================================
       SOL TARAF: AT BİLGİLERİ
       🔧 KÜÇÜK EKRAN OPTİMİZASYONU
       ============================================== */
    .tjk-wrap .accordion-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px; /* Gap azaltıldı */
        min-width: 0; /* Flex overflow fix */
    }

    /* AT NO VE ADI */
    .tjk-wrap .accordion-horse-name {
        display: flex;
        align-items: center;
        gap: 8px; /* Gap azaltıldı */
        min-width: 0; /* Flex overflow fix */
    }

    .tjk-wrap .accordion-horse-no {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px; /* Küçültüldü: 32px -> 28px */
        height: 28px; /* Küçültüldü: 32px -> 28px */
        background: #8b0000;
        color: white;
        border-radius: 50%;
        font-weight: bold;
        font-size: 13px; /* Küçültüldü: 14px -> 13px */
        flex-shrink: 0;
    }

    .tjk-wrap .accordion-horse-title {
        font-size: 14px; /* Küçültüldü: 16px -> 14px */
        font-weight: 700;
        color: #2c3e50;
        line-height: 1.2; /* Line-height düşürüldü */
        overflow: hidden; /* Taşma kontrolü */
        text-overflow: ellipsis; /* Uzun metinler için ... */
        white-space: nowrap; /* Tek satırda göster */
    }

    /* ALT BİLGİLER: HP VE JOKEY */
    .tjk-wrap .accordion-info {
        display: flex;
        gap: 10px; /* Gap azaltıldı: 16px -> 10px */
        font-size: 11px; /* Küçültüldü: 13px -> 11px */
        color: #666;
        margin-left: 36px; /* Azaltıldı: 42px -> 36px */
        flex-wrap: wrap; /* Çok küçük ekranlarda alt alta geçebilir */
    }

    .tjk-wrap .accordion-info-item {
        display: flex;
        align-items: center;
        gap: 3px; /* Gap azaltıldı */
        white-space: nowrap; /* Kırılmayı engelle */
    }

    .tjk-wrap .accordion-info-label {
        font-weight: 600;
        color: #555;
    }

    /* ==============================================
       SAĞ TARAF: PUAN VE OK İKONU
       🔧 KÜÇÜK EKRAN OPTİMİZASYONU
       ============================================== */
    .tjk-wrap .accordion-right {
        display: flex;
        align-items: center;
        gap: 8px; /* Gap azaltıldı: 12px -> 8px */
        flex-shrink: 0;
    }

    /* PUAN KUTUSU - MOBİL (KÜÇÜLTÜLDÜ) */
    .tjk-wrap .accordion-right .score-box {
        width: 42px !important; /* Küçültüldü: 48px -> 42px */
        height: 42px !important; /* Küçültüldü: 48px -> 42px */
        font-size: 14px !important; /* Küçültüldü: 15px -> 14px */
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: bold;
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0; /* Küçülmeyi engelle */
    }

    /* MOBİLDE PUAN RENKLERİNİ ZORLAMA */
    .tjk-wrap .accordion-right .score-box.s-yesil {
        background-color: #27ae60 !important;
        background: #27ae60 !important;
        color: #ffffff !important;
        border: 2px solid #219150 !important;
    }

    .tjk-wrap .accordion-right .score-box.s-mavi {
        background-color: #2980b9 !important;
        background: #2980b9 !important;
        color: #ffffff !important;
        border: 2px solid #2471a3 !important;
    }

    .tjk-wrap .accordion-right .score-box.s-sari {
        background-color: #f1c40f !important;
        background: #f1c40f !important;
        color: #2c3e50 !important;
        border: 2px solid #d4ac0d !important;
        font-weight: 800 !important;
    }

    .tjk-wrap .accordion-right .score-box.s-kirmizi {
        background-color: #c0392b !important;
        background: #c0392b !important;
        color: #ffffff !important;
        border: 2px solid #a93226 !important;
    }

    /* OK İKONU (KÜÇÜLTÜLDÜ) */
    .tjk-wrap .accordion-arrow {
        width: 20px; /* Küçültüldü: 24px -> 20px */
        height: 20px; /* Küçültüldü: 24px -> 20px */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        color: #666;
        font-size: 16px; /* Küçültüldü: 18px -> 16px */
        flex-shrink: 0;
    }

    .tjk-wrap .accordion-item.active .accordion-arrow {
        transform: rotate(180deg);
        color: #e74c3c;
    }

    /* ==============================================
       ACCORDION BODY (DETAY ALANI)
       ============================================== */
    .tjk-wrap .accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
        background: #fafafa;
    }

    .tjk-wrap .accordion-item.active .accordion-body {
        max-height: 2000px;
        padding: 12px; /* Azaltıldı: 16px -> 12px */
        border-top: 1px solid #e0e0e0;
    }

    /* ==============================================
       DETAY İÇERİĞİ - MODERN LISTE
       ============================================== */
    .tjk-wrap .accordion-details {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Azaltıldı: 12px -> 10px */
    }

    .tjk-wrap .detail-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px; /* Azaltıldı: 12px -> 10px */
        background: white;
        border-radius: 6px; /* Azaltıldı: 8px -> 6px */
        border-left: 3px solid #8b0000;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .tjk-wrap .detail-item-icon {
        font-size: 14px; /* Azaltıldı: 16px -> 14px */
        flex-shrink: 0;
        margin-top: 2px;
    }

    .tjk-wrap .detail-item-content {
        flex: 1;
        min-width: 0; /* Flex overflow fix */
    }

    .tjk-wrap .detail-item-label {
        font-size: 10px; /* Azaltıldı: 11px -> 10px */
        font-weight: 600;
        color: #8b0000;
        text-transform: uppercase;
        letter-spacing: 0.3px; /* Azaltıldı */
        margin-bottom: 3px; /* Azaltıldı */
    }

    .tjk-wrap .detail-item-value {
        font-size: 13px; /* Azaltıldı: 14px -> 13px */
        color: #2c3e50;
        line-height: 1.4;
        font-weight: 500;
        word-wrap: break-word; /* Uzun kelimeler kırılsın */
    }

    /* ==============================================
       PUAN DETAYLARI BÖLÜMÜ
       ============================================== */
    .tjk-wrap .score-details {
        background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
        padding: 12px; /* Azaltıldı: 14px -> 12px */
        border-radius: 6px; /* Azaltıldı */
        margin-top: 8px;
    }

    .tjk-wrap .score-details-title {
        font-size: 11px; /* Azaltıldı: 12px -> 11px */
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 8px; /* Azaltıldı */
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tjk-wrap .score-breakdown {
        display: flex;
        flex-direction: column;
        gap: 6px; /* Azaltıldı: 8px -> 6px */
    }

    .tjk-wrap .score-breakdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 8px; /* Azaltıldı */
        background: white;
        border-radius: 4px;
        font-size: 11px; /* Azaltıldı: 12px -> 11px */
    }

    .tjk-wrap .score-breakdown-label {
        color: #555;
        font-weight: 500;
        flex: 1;
        margin-right: 8px;
        word-wrap: break-word;
    }

    .tjk-wrap .score-breakdown-value {
        font-weight: 700;
        color: #8b0000;
        flex-shrink: 0;
    }

    /* META TAGS - MOBİL */
    .tjk-wrap .accordion-body .meta-tag {
        font-size: 9px; /* Azaltıldı: 10px -> 9px */
        padding: 3px 6px; /* Azaltıldı */
        margin: 2px;
    }

    /* ==============================================
       KONTROL PANELİ - MOBİL UYUM
       ============================================== */
    .tjk-wrap .tjk-ctrl {
        padding: 10px; /* Azaltıldı: 12px -> 10px */
        gap: 8px; /* Azaltıldı */
    }

    .tjk-wrap .date-badge {
        font-size: 11px; /* Azaltıldı: 12px -> 11px */
        padding: 6px 10px; /* Azaltıldı */
    }

    .tjk-wrap select#tjk-hip {
        min-width: 100%;
        font-size: 13px; /* Azaltıldı: 14px -> 13px */
        padding: 8px 12px; /* Azaltıldı */
    }

    .tjk-wrap .tjk-btn,
    .tjk-wrap .tjk-btn-pdf {
        width: 100%;
        min-height: 44px;
        font-size: 13px; /* Azaltıldı: 14px -> 13px */
        padding: 8px 20px; /* Azaltıldı */
    }

    /* BAŞLIK - MOBİL */
    .tjk-wrap .tjk-head {
        padding: 14px; /* Azaltıldı: 16px -> 14px */
    }

    .tjk-wrap .tjk-head h2 {
        font-size: 16px; /* Azaltıldı: 18px -> 16px */
    }

    .tjk-wrap .tjk-head small {
        font-size: 10px; /* Azaltıldı: 11px -> 10px */
    }
}

/* ==============================================
   📱 ÇOK KÜÇÜK EKRANLAR (320px ve altı)
   Eski iPhone SE, Galaxy S3 vb.
   ============================================== */
@media screen and (max-width: 360px) {
    
    .tjk-wrap .accordion-header {
        padding: 10px 8px;
    }

    .tjk-wrap .accordion-horse-no {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .tjk-wrap .accordion-horse-title {
        font-size: 13px;
    }

    .tjk-wrap .accordion-info {
        font-size: 10px;
        margin-left: 34px;
        gap: 8px;
    }

    .tjk-wrap .accordion-right .score-box {
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    .tjk-wrap .accordion-arrow {
        width: 18px;
        height: 18px;
        font-size: 14px;
    }

    .tjk-wrap .detail-item {
        padding: 8px;
    }

    .tjk-wrap .detail-item-icon {
        font-size: 12px;
    }

    .tjk-wrap .detail-item-label {
        font-size: 9px;
    }

    .tjk-wrap .detail-item-value {
        font-size: 12px;
    }

    .tjk-wrap .tjk-head h2 {
        font-size: 15px;
    }

    .tjk-wrap .tjk-head small {
        font-size: 9px;
    }
}

/* ==============================================
   📱 EKSTRA KÜÇÜK EKRANLAR (280px - iPhone 4 vb.)
   ============================================== */
@media screen and (max-width: 320px) {
    
    .tjk-wrap .accordion-horse-title {
        font-size: 12px;
    }

    .tjk-wrap .accordion-info {
        flex-direction: column;
        gap: 4px;
        margin-left: 34px;
    }

    .tjk-wrap .accordion-right .score-box {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }

    .tjk-wrap .detail-item-value {
        font-size: 11px;
    }
}

/* ==============================================
   PRINT (PDF) STİLLERİ
   ============================================== */
@media print {
    .tjk-wrap .tjk-ctrl,
    .tjk-wrap .toggle-det,
    .tjk-wrap .accordion-arrow {
        display: none !important;
    }

    .tjk-wrap .detail-row {
        display: table-row !important;
    }

    .tjk-wrap .accordion-body {
        max-height: none !important;
        display: block !important;
    }

    .tjk-wrap {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .tjk-wrap .tjk-table {
        font-size: 10pt !important;
    }

    .tjk-wrap .tjk-head {
        background: #8b0000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .tjk-wrap .tjk-table tbody tr {
        page-break-inside: avoid !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* SD (Simülasyon Derecesi) Rozeti */
.sd-badge {
    background-color: #d32f2f; /* Canlı Kırmızı */
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(211, 47, 47, 0.4);
    border: 1px solid #b71c1c;
    animation: sd-pulse 2s infinite; /* Hafif yanıp sönme efekti */
}

@keyframes sd-pulse {
    0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
    70% { box-shadow: 0 0 0 4px rgba(211, 47, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}