/*
========================================
    ARENA PANEL DESIGN SYSTEM (ARENA-TEMA)
    Version: 2.1.2
    Created: Şubat 2025
    Author: Mustafa Eyişekerciler & Claude
========================================

💡 PROJE HAKKINDA NOTLAR:
- Türkiye merkezli müşteri yönetim sistemi
- Hosting, domain, e-müvekkil hizmetleri takibi
- PHP + MySQL + Bootstrap 5.3.0 tabanlı
- Müşteri cari takibi (USD/TRY)
- Otomatik güncelleme hatırlatma sistemi
- Modern, mobil uyumlu arayüz

📊 VERİTABANI YAPISI:
- musteri: Ana müşteri bilgileri
- telefon: Müşteri telefonları (musteri_id ile bağlı)
- mail: Müşteri e-postaları (musteri_id ile bağlı)
- web_site: Web sitesi bilgileri (site sütunu)
- gtarih: Güncelleme tarihleri (0000-MM-DD formatı)
- cari_hareketler: Finansal işlemler (USD/TRY)
- gecmis_islem: Geçmiş işlem kayıtları

🎨 TASARIM FELSEFESI:
- Modern gradient kartlar
- Hover animasyonları
- Fade-in efektleri
- Kompakt ve temiz görünüm
- Responsive tasarım
- Bootstrap 5 entegrasyonu

📱 RESPONSIVE BREAKPOINTS:
- Mobile: 768px ve altı
- Tablet: 769px - 1024px
- Desktop: 1025px ve üstü

🌈 KULLANIM KLAVUZU:
1. Bu dosyayı her sayfada include et
2. .animation-fadeIn ile staggered animasyon kullan
3. Gradient kartları ana istatistikler için kullan
4. Service kartları küçük metrikler için kullan
5. Table-modern sınıfını tüm tablolarda kullan
6. Customer search pattern'ini arama işlemlerinde kullan

*/

/* ========================================
   ROOT VARIABLES (Ana Değişkenler)
   ======================================== */
:root {
    /* Gradient Colors */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --warning-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --info-gradient: linear-gradient(135deg, #30cfd0 0%, #91a7ff 100%);
    
    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base: 13px;
    --font-size-small: 0.75rem;
    --font-size-medium: 0.85rem;
    --font-size-large: 1.1rem;
    
    /* Spacing */
    --border-radius: 15px;
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    
    /* Shadows */
    --shadow-light: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-medium: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-heavy: 0 20px 40px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.8s ease-in;
}

/* ========================================
   BASE STYLES (Temel Stiller)
   ======================================== */
body {
    background-color: #f8f9fa;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

/* ========================================
   GRADIENT CARDS (Ana İstatistik Kartları)
   KULLANIM: <div class="card gradient-card primary-card">
   ======================================== */
.gradient-card {
    color: white;
    border: none;
    transition: var(--transition-medium);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.gradient-card:hover {
    box-shadow: var(--shadow-heavy), 0 15px 35px rgba(0,0,0,0.15);
    filter: brightness(1.05);
}

.gradient-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
}

.gradient-card p {
    font-size: 0.9rem;
}

/* Gradient Card Variants */
.primary-card { background: var(--primary-gradient); }
.success-card { background: var(--success-gradient); }
.danger-card { background: var(--danger-gradient); }
.warning-card { background: var(--warning-gradient); }
.info-card { background: var(--info-gradient); }

/* ========================================
   STAT CARDS (Genel İstatistik Kartları)
   KULLANIM: <div class="card stat-card">
   ======================================== */
.stat-card {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    border: none;
    overflow: hidden;
    transition: var(--transition-medium);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-heavy);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

/* ========================================
   SERVICE CARDS (Hizmet Kartları)
   KULLANIM: <div class="card service-card">
   ======================================== */
.service-card {
    background: white;
    border-radius: var(--border-radius-medium);
    border: none;
    box-shadow: var(--shadow-light);
    transition: var(--transition-medium);
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.service-icon {
    width: 35px;
    height: 35px;
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.service-card h6 {
    font-size: 1rem;
    font-weight: 600;
}

.service-card small {
    font-size: var(--font-size-small);
}

/* ========================================
   MODERN TABLES (Modern Tablolar)
   KULLANIM: <div class="card table-modern">
   ======================================== */
.table-modern {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1.01);
    transition: var(--transition-fast);
}

.table th {
    font-size: var(--font-size-small);
    padding: 0.6rem;
    font-weight: 600;
}

.table td {
    font-size: var(--font-size-medium);
    padding: 0.7rem;
}

.table h6 {
    font-size: 0.9rem;
    font-weight: 600;
}

.table small {
    font-size: var(--font-size-small);
}

/* ========================================
   DASHBOARD HEADER (Dashboard Başlığı)
   KULLANIM: <div class="dashboard-header">
   ======================================== */
.dashboard-header {
    background: white;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-light);
}

.dashboard-header h2 {
    font-size: 1.6rem;
}

.dashboard-header p {
    font-size: 0.9rem;
}

.dashboard-header .fw-bold {
    font-size: 0.9rem;
}

.dashboard-header .small {
    font-size: 0.8rem;
}

.welcome-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ========================================
   CARD HEADERS (Kart Başlıkları)
   ======================================== */
.card-header h5 {
    font-size: var(--font-size-large);
    font-weight: 600;
}

.card-header small {
    font-size: 0.8rem;
}

/* ========================================
   FORM ELEMENTS (Form Elemanları)
   ======================================== */
.form-control {
    font-size: var(--font-size-medium);
    padding: 0.5rem 0.75rem;
    transition: var(--transition-medium);
}

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    border-color: #0d6efd;
}

.badge {
    font-size: var(--font-size-small);
    padding: 0.35em 0.6em;
}

/* ========================================
   SEARCH FUNCTIONALITY (Arama İşlevselliği)
   KULLANIM: customerSearch pattern'i kullan
   ======================================== */
.search-input-group {
    max-width: 250px;
}

.search-input-group .input-group-text {
    background-color: #f8f9fa;
    border-right: none;
}

.search-input-group .form-control {
    border-left: none;
}

/* ========================================
   CUSTOMER LINKS (Müşteri Linkleri)
   ======================================== */
.customer-link {
    transition: var(--transition-medium);
    padding: 2px 4px;
    border-radius: 4px;
    color: inherit !important;
    text-decoration: underline !important;
}

.customer-link:hover {
    background-color: rgba(13, 110, 253, 0.1);
    transform: translateX(2px);
    color: #007bff !important;
    text-decoration: none !important;
    font-weight: bold;
}

/* ========================================
   ANIMATIONS (Animasyonlar)
   KULLANIM: .animation-fadeIn ve style="animation-delay: 0.1s;"
   ======================================== */
.animation-fadeIn {
    animation: fadeIn 0.3s ease-out;
    animation-fill-mode: both;
}

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

/* ========================================
   CLICKABLE ROWS (Tıklanabilir Satırlar)
   KULLANIM: .customer-row ile data-customer-id
   ======================================== */
.customer-row {
    cursor: pointer;
    transition: var(--transition-fast);
}

.customer-row:hover {
    background-color: rgba(0, 123, 255, 0.05) !important;
}

/* ========================================
   EMPTY STATES (Boş Durumlar)
   ======================================== */
.empty-state {
    text-align: center;
    padding: 2rem;
}

.empty-state i {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.no-results {
    text-align: center;
    padding: 2rem;
}

.no-results.d-none {
    display: none !important;
}

/* ========================================
   CHART CONTAINERS (Grafik Konteynerleri)
   ======================================== */
.chart-container {
    position: relative;
    height: 400px;
    margin: 20px 0;
}

.mini-chart {
    height: 200px;
}

/* ========================================
   RESPONSIVE UTILITIES (Responsive Yardımcılar)
   ======================================== */
@media (max-width: 768px) {
    .gradient-card h3 {
        font-size: 1.5rem;
    }
    
    .stat-icon {
        font-size: 2rem;
    }
    
    .dashboard-header {
        padding: 15px;
    }
    
    .dashboard-header h2 {
        font-size: 1.3rem;
    }
    
    .service-icon {
        width: 30px;
        height: 30px;
    }
}

/* ========================================
   ARENA PANEL SPECIFIC OVERRIDES
   (Arena Panel Özel Geçersiz Kılmalar)
   ======================================== */
.py-4 {
    padding-top: 0rem !important;
}

/* Sidebar uyumu için */
.main-content {
    font-size: var(--font-size-base);
}

/* ========================================
   KULLANIM ÖRNEKLERİ:
   
   1. ANA İSTATİSTİK KARTI:
   <div class="card gradient-card primary-card animation-fadeIn">
       <div class="card-body text-center">
           <i class="bi bi-people stat-icon"></i>
           <h3 class="mb-1">42</h3>
           <p class="mb-0 opacity-90">Toplam Müşteri</p>
       </div>
   </div>
   
   2. HİZMET KARTI:
   <div class="card service-card animation-fadeIn">
       <div class="card-body text-center py-3">
           <div class="service-icon bg-primary mx-auto mb-2">
               <i class="bi bi-globe"></i>
           </div>
           <h6 class="fw-bold mb-1">25</h6>
           <small class="text-muted">Alan Adı</small>
       </div>
   </div>
   
   3. MODERN TABLO:
   <div class="card table-modern animation-fadeIn">
       <div class="card-header bg-transparent border-0">
           <h5 class="mb-0">Müşteri Listesi</h5>
       </div>
       <div class="card-body p-0">
           <table class="table table-hover">...</table>
       </div>
   </div>
   
   4. ARAMA İŞLEVSELLİĞİ:
   <div class="input-group search-input-group">
       <span class="input-group-text">
           <i class="bi bi-search"></i>
       </span>
       <input type="text" id="searchInput" class="form-control">
   </div>
   
   ======================================== */

/*
📝 GELECEKTEKİ GELIŞTIRMELER İÇİN NOTLAR:

1. Yeni sayfa oluştururken:
   - Arena-tema.css'i include et
   - Dashboard header pattern'ini kullan
   - Fade-in animasyonları ekle
   - Search functionality pattern'ini uygula

2. Renk paleti tutarlılığı:
   - Ana istatistikler için gradient kartlar
   - Hizmet metrikleri için service kartlar
   - Tablolar için table-modern sınıfı

3. Animasyon kullanımı:
   - Staggered loading (0.1s, 0.2s, 0.3s delays)
   - Hover efektleri her zaman ekle
   - Transform animasyonları tercih et

4. Responsive tasarım:
   - Mobile-first yaklaşım
   - 768px breakpoint
   - Kompakt görünüm

5. Typography:
   - Inter font ailesi
   - 13px base font size
   - Hierarchy: h6 (0.9rem) > p (0.85rem) > small (0.75rem)

Bu design system ile tutarlı, professional ve modern arayüz!
*/