/* assets/css/hesaplayicilar.css */
/* ==================================== */
/* 1. SAYFA DÜZENI - DUYURULAR İLE AYNI */
/* ==================================== */

.calculators-main-content {
    padding-top: 11rem !important; /* ~176px - Duyurular ile aynı */
}

/* Ana başlığı sayfada ortalamak için - DUYURULAR İLE AYNI */
.page-header-container {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Tüm hesaplayıcı içeriği aynı container genişliğinde */
.calculators-content-area {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Bölüm Başlıkları - Ortalı */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.section-title-red { border-bottom-color: #ef4444; }
.section-title-amber { border-bottom-color: #f59e0b; }
.section-title-blue { border-bottom-color: #3b82f6; }
.section-title-pink { border-bottom-color: #ec4899; }
.section-title-gray { border-bottom-color: #6b7280; }

/* ==================================== */
/* 2. KART TASARIMI */
/* ==================================== */

.calculator-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calculator-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
}

.calculator-card.sepsis { border-color: #ef4444; }
.calculator-card.liver { border-color: #f59e0b; }
.calculator-card.kidney { border-color: #3b82f6; }
.calculator-card.pneumonia { border-color: #8b5cf6; }
.calculator-card.thrombosis { border-color: #ec4899; }
.calculator-card.bone { border-color: #6b7280; }

.calculator-card:hover.sepsis { border-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #fff 100%); }
.calculator-card:hover.liver { border-color: #d97706; background: linear-gradient(135deg, #fffbeb 0%, #fff 100%); }
.calculator-card:hover.kidney { border-color: #2563eb; background: linear-gradient(135deg, #eff6ff 0%, #fff 100%); }
.calculator-card:hover.pneumonia { border-color: #7c3aed; background: linear-gradient(135deg, #faf5ff 0%, #fff 100%); }
.calculator-card:hover.thrombosis { border-color: #db2777; background: linear-gradient(135deg, #fdf2f8 0%, #fff 100%); }
.calculator-card:hover.bone { border-color: #4b5563; background: linear-gradient(135deg, #f9fafb 0%, #fff 100%); }

/* ==================================== */
/* 3. İKON VE BADGE */
/* ==================================== */

.icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
}

.sepsis .icon-wrapper { background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%); color: #dc2626; }
.liver .icon-wrapper { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); color: #d97706; }
.kidney .icon-wrapper { background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%); color: #2563eb; }
.pneumonia .icon-wrapper { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); color: #7c3aed; }
.thrombosis .icon-wrapper { background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%); color: #db2777; }
.bone .icon-wrapper { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); color: #4b5563; }

.category-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 10px;
}

.sepsis .category-badge { background: #fee2e2; color: #dc2626; }
.liver .category-badge { background: #fef3c7; color: #d97706; }
.kidney .category-badge { background: #dbeafe; color: #2563eb; }
.pneumonia .category-badge { background: #ede9fe; color: #7c3aed; }
.thrombosis .category-badge { background: #fce7f3; color: #db2777; }
.bone .category-badge { background: #f3f4f6; color: #4b5563; }

/* ==================================== */
/* 4. BUTONLAR */
/* ==================================== */

.calc-button {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
}

.sepsis .calc-button { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.liver .calc-button { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kidney .calc-button { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.pneumonia .calc-button { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.thrombosis .calc-button { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.bone .calc-button { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }

.calc-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.25);
}

/* ==================================== */
/* 5. BİLGİ KARTI */
/* ==================================== */

.info-card {
    max-width: 800px;
    margin: 2rem auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    border-left: 4px solid #3b82f6;
}

/* ==================================== */
/* 6. MOBİL RESPONSIVE */
/* ==================================== */

@media (max-width: 768px) {
    .calculators-main-content {
        padding-top: 9rem !important;
    }
    
    .page-header-container,
    .calculators-content-area {
        max-width: 100%;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    .calculator-card {
        margin-bottom: 1rem;
    }
    
    .info-card {
        margin: 1rem;
    }
}