/* GENEL */
.mk-bagis-wrapper, .mk-checkout-wrapper { font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
.spl-row { display: flex; flex-wrap: wrap; gap: 20px; }
.spl-col-6 { flex: 0 0 48%; }
.mk-box { display: flex; align-items: center; gap: 15px; border:1px solid #eee; padding:10px; border-radius:8px; }
.mk-img-col img { max-width: 80px; border-radius: 50%; }
.spl-form { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; }
.spl-btn { background-color: #0073aa; color: #fff; padding: 10px; border: none; cursor: pointer; border-radius: 5px; font-weight: bold; width: 100%; }

/* MAVİ KUTU */
.mk-checkout-wrapper { background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; padding: 20px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.mk-blue-alert { display: flex; align-items: center; background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%); border-left: 5px solid #2196F3; padding: 15px 20px; border-radius: 8px; gap: 15px; margin-bottom: 25px; }
.mk-alert-icon { width: 40px; height: 40px; background: #2196F3; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.mk-alert-content h4 { margin: 0 0 5px; font-size: 16px; color: #1565c0; font-weight: 700; }
.mk-alert-content p { margin: 0; font-size: 14px; color: #455a64; }

/* MİNİMAL LİSTE */
.mk-minimal-grid { display: flex; gap: 20px; }
.mk-mini-card { flex: 1; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; transition: all 0.2s ease; }
.mk-mini-card:hover { border-color: #2196F3; box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1); }
.mk-mini-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
.mk-mini-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mk-mini-header span { font-weight: 700; color: #333; font-size: 14px; }
.mk-mini-select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; background-color: #fcfcfc; font-size: 13px; margin-bottom: 10px; color: #555; }
.mk-mini-btn { width: 100%; background-color: #fff; color: #2196F3; border: 1px solid #2196F3; padding: 8px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 13px; }
.mk-mini-btn:hover { background-color: #2196F3; color: #fff; }

/* MODAL (Güçlü Görünürlük) */
.mk-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 999999; display: flex; justify-content: center; align-items: center; }
.mk-modal-content { background: #fff; padding: 25px; width: 90%; max-width: 400px; border-radius: 10px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.mk-modal-header { position: absolute; top: 10px; right: 15px; }
.close-modal { background: none; border: none; font-size: 24px; color: #aaa; cursor: pointer; }
.mk-success-msg { background: #4caf50; color: #fff; padding: 10px; border-radius: 4px; text-align: center; margin-bottom: 15px; }

@media (max-width: 600px) { .mk-minimal-grid { flex-direction: column; } }

/* MODAL */
.mk-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 999999; display: flex; justify-content: center; align-items: center; }
.mk-modal-content { background: #fff; padding: 25px; width: 90%; max-width: 400px; border-radius: 10px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.mk-modal-header { position: absolute; top: 10px; right: 15px; }
.close-modal { background: none; border: none; font-size: 24px; color: #aaa; cursor: pointer; }
.mk-success-msg { background: #4caf50; color: #fff; padding: 10px; border-radius: 4px; text-align: center; margin-bottom: 15px; }

@media (max-width: 600px) {
    .mk-minimal-grid { flex-direction: column; }
    .mk-mini-card { display: flex; flex-direction: column; }
}

/* GENEL */
.mk-bagis-wrapper, .mk-checkout-wrapper { font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
.spl-row { display: flex; flex-wrap: wrap; gap: 20px; }
.spl-col-6 { flex: 0 0 48%; }
.mk-box { display: flex; align-items: center; gap: 15px; border:1px solid #eee; padding:10px; border-radius:8px; }
.mk-img-col img { max-width: 80px; border-radius: 50%; }
.spl-form { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; }
.spl-btn { padding: 10px; border: none; cursor: pointer; border-radius: 5px; font-weight: bold; width: 100%; }

/* --- ÖZEL BUTON RENKLERİ --- */
.mk-btn-dog {
    background-color: #f7523e !important;
    color: #fff !important;
    transition: opacity 0.3s;
}
.mk-btn-dog:hover {
    background-color: #f7523e !important;
    opacity: 0.9;
}

.mk-btn-cat {
    background-color: #59d0df !important;
    color: #fff !important;
    transition: opacity 0.3s;
}
.mk-btn-cat:hover {
    background-color: #59d0df !important;
    opacity: 0.9;
}

/* MAVİ KUTU */
.mk-checkout-wrapper { background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; padding: 20px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.mk-blue-alert { display: flex; align-items: center; background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%); border-left: 5px solid #2196F3; padding: 15px 20px; border-radius: 8px; gap: 15px; margin-bottom: 25px; }
.mk-alert-icon { width: 40px; height: 40px; background: #2196F3; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.mk-alert-content h4 { margin: 0 0 5px; font-size: 16px; color: #1565c0; font-weight: 700; }
.mk-alert-content p { margin: 0; font-size: 14px; color: #455a64; }

/* MİNİMAL LİSTE */
.mk-minimal-grid { display: flex; gap: 20px; }
.mk-mini-card { flex: 1; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; transition: all 0.2s ease; }
.mk-mini-card:hover { border-color: #2196F3; box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1); }
.mk-mini-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
.mk-mini-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mk-mini-header span { font-weight: 700; color: #333; font-size: 14px; }
.mk-mini-select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; background-color: #fcfcfc; font-size: 13px; margin-bottom: 10px; color: #555; }
.mk-mini-btn { width: 100%; background-color: #fff; color: #2196F3; border: 1px solid #2196F3; padding: 8px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 13px; }
.mk-mini-btn:hover { background-color: #2196F3; color: #fff; }

/* MODAL */
.mk-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 999999; display: flex; justify-content: center; align-items: center; }
.mk-modal-content { background: #fff; padding: 25px; width: 90%; max-width: 400px; border-radius: 10px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.mk-modal-header { position: absolute; top: 10px; right: 15px; }
.close-modal { background: none; border: none; font-size: 24px; color: #aaa; cursor: pointer; }
.mk-success-msg { background: #4caf50; color: #fff; padding: 10px; border-radius: 4px; text-align: center; margin-bottom: 15px; }

@media (max-width: 600px) { .mk-minimal-grid { flex-direction: column; } .spl-col-6 { flex: 0 0 100%; } }



/* ... ESKİ CSS KODLARI AYNEN KALSIN (En alta ekle) ... */

/* İSTATİSTİK SAYFASI */
.mk-stats-container {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
}
.mk-stats-header {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.mk-stat-card {
    flex: 1;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    border: 1px solid #eee;
}
.mk-stat-card.main-stat {
    border-bottom: 5px solid #2196F3;
}
.mk-stat-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
}
.mk-stat-number {
    font-size: 36px;
    font-weight: 800;
    color: #333;
}
.unit {
    font-size: 16px;
    color: #999;
}

/* GRAFİKLER */
.mk-charts-row {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.mk-chart-box {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* TABLOLAR */
.mk-tables-row {
    display: flex;
    gap: 20px;
}
.mk-table-box {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.mk-table-box.highlight {
    border-top: 4px solid #ff9800; /* Ayın Bağışçısı Turuncu */
}
.mk-table {
    width: 100%;
    border-collapse: collapse;
}
.mk-table th {
    text-align: left;
    padding: 10px;
    color: #999;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}
.mk-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #f9f9f9;
    font-size: 14px;
}
.mk-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .mk-stats-header, .mk-charts-row, .mk-tables-row { flex-direction: column; }
}


/* ... Önceki kodlar kalsın ... */

/* MODAL YENİ BUTONLAR */
.mk-btn-action {
    text-align: center;
    transition: all 0.2s;
}
.mk-btn-action:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
.mk-btn-action.checkout:hover {
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
}
.close-modal-text:hover {
    color: #333;
}

/* GENEL */
.mk-bagis-wrapper, .mk-checkout-wrapper { font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
.spl-row { display: flex; flex-wrap: wrap; gap: 20px; }
.spl-col-6 { flex: 0 0 48%; }
.mk-box { display: flex; align-items: center; gap: 15px; border:1px solid #eee; padding:10px; border-radius:8px; }
.mk-img-col img { max-width: 80px; border-radius: 50%; }
.spl-form { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; }
.spl-btn { padding: 10px; border: none; cursor: pointer; border-radius: 5px; font-weight: bold; width: 100%; }

/* RENKLER */
.mk-btn-dog { background-color: #f7523e !important; color: #fff !important; }
.mk-btn-cat { background-color: #59d0df !important; color: #fff !important; }

/* MODAL */
.mk-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 999999; display: flex; justify-content: center; align-items: center; }
.mk-modal-content { background: #fff; padding: 25px; width: 90%; max-width: 400px; border-radius: 10px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.mk-modal-header { position: absolute; top: 10px; right: 15px; }
.close-modal { background: none; border: none; font-size: 24px; color: #aaa; cursor: pointer; }
.mk-success-msg { background: transparent; color: #333; padding: 0; text-align: center; }

/* CHECKOUT */
.mk-checkout-wrapper { background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; padding: 20px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.mk-blue-alert { display: flex; align-items: center; background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%); border-left: 5px solid #2196F3; padding: 15px 20px; border-radius: 8px; gap: 15px; margin-bottom: 25px; }
.mk-alert-icon { width: 40px; height: 40px; background: #2196F3; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.mk-alert-content h4 { margin: 0 0 5px; font-size: 16px; color: #1565c0; font-weight: 700; }
.mk-alert-content p { margin: 0; font-size: 14px; color: #455a64; }

.mk-minimal-grid { display: flex; gap: 20px; }
.mk-mini-card { flex: 1; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; transition: all 0.2s ease; }
.mk-mini-card:hover { border-color: #2196F3; box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1); }
.mk-mini-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
.mk-mini-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mk-mini-header span { font-weight: 700; color: #333; font-size: 14px; }
.mk-mini-select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; background-color: #fcfcfc; font-size: 13px; margin-bottom: 10px; color: #555; }
.mk-mini-btn { width: 100%; background-color: #fff; color: #2196F3; border: 1px solid #2196F3; padding: 8px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 13px; }
.mk-mini-btn:hover { background-color: #2196F3; color: #fff; }

/* STATS */
.mk-stats-container { font-family: 'Open Sans', sans-serif; color: #333; max-width: 1200px; margin: 0 auto; }
.mk-stats-header { display: flex; gap: 20px; margin-bottom: 30px; }
.mk-stat-card { flex: 1; background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: center; border: 1px solid #eee; }
.mk-stat-card.main-stat { border-bottom: 5px solid #2196F3; }
.mk-stat-card h3 { margin: 0 0 10px; font-size: 14px; color: #888; text-transform: uppercase; }
.mk-stat-number { font-size: 36px; font-weight: 800; color: #333; }
.unit { font-size: 16px; color: #999; }
.mk-charts-row { display: flex; gap: 20px; margin-bottom: 30px; }
.mk-chart-box { flex: 1; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee; }
.mk-tables-row { display: flex; gap: 20px; }
.mk-table-box { flex: 1; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee; }
.mk-table-box.highlight { border-top: 4px solid #ff9800; }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table th { text-align: left; padding: 10px; color: #999; font-size: 12px; border-bottom: 1px solid #eee; }
.mk-table td { padding: 12px 10px; border-bottom: 1px solid #f9f9f9; font-size: 14px; }

@media (max-width: 768px) { .mk-stats-header, .mk-charts-row, .mk-tables-row { flex-direction: column; } .mk-minimal-grid { flex-direction: column; } }