/* 
   ==========================================================================
   BİFEST PREMIUM TEMA DOSYASI (bifestema.css)
   ==========================================================================
   Dünya standartlarında modern, şık ve ferah arayüz tasarımı.
   Özel Google Fonts: Outfit (Başlıklar) ve Inter (Metinler)
*/

/* 
  --------------------------------------------------
  1. TEMA DEĞİŞKENLERİ (RENK PALETLERİ)
  --------------------------------------------------
*/
:root, [data-theme="varsayilan"] {
    /* Çok hafif, ferah, elit bir arka plan (Açık Gri / Off-white) */
    --arkaplan-rengi: #F8FAFC; 
    --arkaplan-ikinci-renk: #FFFFFF; /* Kartlar tam beyaz */
    
    /* Yazı Renkleri */
    --yazi-rengi: #0F172A; /* Slate 900 - Çok koyu, net lacivert/siyah */
    --yazi-ikinci-renk: #64748B; /* Slate 500 - Yumuşak okunabilir gri */
    
    /* Kulüp Renkleri: Mavi ve Turuncu */
    --vurgu-baslangic: #0284C7; /* Kulüp Mavisi */
    --vurgu-bitis: #0284C7; /* Kulüp Turuncusu */
    
    --ana-vurgu-rengi: #FF6A00; /* Butonlar için düz fallback turuncu */
    --ana-vurgu-hover: #E65C00; 
    --vurgu-yazi-rengi: #FFFFFF; 

    /* Form ve Sınır Renkleri */
    --border-rengi: #E2E8F0; 
    --input-arkaplan: #F8FAFC;
    --input-yazi: #0F172A;
    --hata-rengi: #EF4444;
    --basari-rengi: #10B981;
}

/* Karanlık Tema (Premium Dark Mode) */
[data-theme="karanlik"] {
    --arkaplan-rengi: #0B0F19; 
    --arkaplan-ikinci-renk: #111827; 
    --yazi-rengi: #F9FAFB; 
    --yazi-ikinci-renk: #9CA3AF; 
    
    --vurgu-baslangic: #0284C7; /* Kulüp Mavisi */
    --vurgu-bitis: #F97316; /* Kulüp Turuncusu */
    
    --ana-vurgu-rengi: #F97316; 
    --ana-vurgu-hover: #FB923C; 
    --vurgu-yazi-rengi: #FFFFFF; 

    --border-rengi: #1F2937;
    --input-arkaplan: #1F2937;
    --input-yazi: #F9FAFB;
}

/* 
  --------------------------------------------------
  2. GENEL SIFIRLAMA VE YAPI (TYPOGRAPHY)
  --------------------------------------------------
*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--arkaplan-rengi);
    color: var(--yazi-rengi);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Başlıklar İçin Özel Font: Outfit (Kalın, modern ve yuvarlak hatlı) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--yazi-rengi);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.02em; /* Daha sıkı ve profesyonel görünüm */
}

p {
    margin-bottom: 1.25rem;
    color: var(--yazi-ikinci-renk);
    font-size: 1.125rem; /* Biraz daha büyük ve okunaklı */
    font-weight: 400;
}

a {
    color: var(--ana-vurgu-rengi);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--ana-vurgu-hover);
}

/* 
  --------------------------------------------------
  3. PREMIUM GRADIENT (RENK GEÇİŞLİ) YAZILAR
  --------------------------------------------------
*/
.text-gradient {
    background: linear-gradient(135deg, var(--vurgu-baslangic) 0%, var(--vurgu-bitis) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 
  --------------------------------------------------
  4. BUTONLAR (Modern, Pürüzsüz, Gradient)
  --------------------------------------------------
*/
button, 
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--vurgu-baslangic) 0%, var(--vurgu-bitis) 100%);
    color: var(--vurgu-yazi-rengi) !important;
    border: none;
    padding: 1rem 2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px; /* Apple tarzı hafif yuvarlatılmış köşeler */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
    letter-spacing: 0.5px;
    box-shadow: 0 10px 20px rgba(255, 106, 0, 0.25); /* Turuncu parlayan gölge */
}

button:hover, 
.btn:hover {
    transform: translateY(-4px); /* Yukarı kalkma */
    box-shadow: 0 15px 30px rgba(255, 106, 0, 0.4); /* Gölge büyümesi */
}

/* İkincil Buton (Şeffaf, sadece kenarlıklı) */
.btn-ikincil {
    background: transparent;
    color: var(--yazi-rengi) !important;
    border: 2px solid var(--border-rengi);
    box-shadow: none;
}

.btn-ikincil:hover {
    border-color: var(--vurgu-baslangic);
    background-color: var(--input-arkaplan);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 
  --------------------------------------------------
  5. FORM ELEMANLARI
  --------------------------------------------------
*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background-color: var(--input-arkaplan);
    color: var(--input-yazi);
    border: 2px solid var(--border-rengi);
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--vurgu-baslangic);
    background-color: var(--arkaplan-ikinci-renk);
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.15); /* Turuncu odaklanma gölgesi */
}

/* Modal İçindeki Inputları Küçültme (Daha Kibar Tasarım) */
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="password"],
.modal-body input[type="date"],
.modal-body select {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* 
  --------------------------------------------------
  6. PREMIUM KART (GÖLGELİ KUTU)
  --------------------------------------------------
*/
.kart, .premium-card {
    background-color: var(--arkaplan-ikinci-renk);
    border-radius: 24px; /* Çok geniş ve modern oval köşeler */
    padding: 3.5rem;
    border: 1px solid rgba(0, 0, 0, 0.03); /* Sınır rengini çok hafifleştirdik */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08); /* Dev, dağınık ama belirsiz (elit) gölge */
    transition: background-color 0.4s ease;
}

[data-theme="karanlik"] .kart, 
[data-theme="karanlik"] .premium-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Footer Fix */
.footer { position: static !important; }