/* mys.org.tr/assets/css/style.css */
/* MAYSEN AKADEMİ - ÜYE ARAYÜZÜ (FRONTEND) STİLLERİ */

/* === Temel Ayarlar === */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f9;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.konteyner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
main {
    flex-grow: 1;
    padding: 30px 0;
}

/* === Header (Üst Menü) === */
.akademi-header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-bottom: 3px solid #134977;
}
.header-icerik {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.akademi-logo a {
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    color: #134977;
}
.akademi-logo i {
    margin-right: 8px; /* İkon ile 'MAYSEN' yazısı arasına boşluk */
}
.uye-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}
.uye-menu .hosgeldin {
    font-size: 14px;
    color: #555;
}
.uye-menu .cikis-butonu {
    text-decoration: none;
    background-color: #e74c3c;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.uye-menu .cikis-butonu:hover {
    background-color: #c0392b;
}

/* === Ana İçerik Başlığı === */
.sayfa-basligi {
    font-size: 28px;
    color: #134977;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* === Kurs Listesi (DIV KART SİSTEMİ) === */
.kurs-listesi {
    display: grid;
    /* Responsive Grid: En az 300px'lik kartlar sığdır, sığmazsa alt satıra at */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}
.kurs-karti {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    overflow: hidden; /* Resmin taşmasını engelle */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s, box-shadow 0.3s;
}
.kurs-karti:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}


/* KURS İÇERİK (İkonlu Başlık Modeli) */
.kurs-icerik {
    padding: 25px;
    display: flex;
    flex-direction: column;
    /* Önceki cevaptaki align-items: center ve text-align: center kaldırıldı */
}

.kurs-icerik h3 {
    margin-top: 0;
    margin-bottom: 15px; /* Paragrafla arasını aç */
    font-size: 20px;
    color: #134977; /* MAYSEN Rengi */
    
    /* YENİ: İkonu başlığın yanına almak için Flexbox */
    display: flex;
    align-items: center; /* İkon ve metni dikeyde ortala */
}

/* YENİ: Başlığın yanındaki ikon */
.kurs-icerik .ikon-baslik {
    font-size: 24px; /* Başlıktan biraz daha küçük */
    color: #134977; /* MAYSEN Rengi */
    margin-right: 12px; /* Yazıyla arasını aç */
    opacity: 0.8;
}

.kurs-icerik p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0; /* Paragrafın altındaki varsayılan boşluğu kaldır */
    
    /* Açıklamayı 3 satırla sınırla (Değişiklik yok) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}
.kurs-listesi-bos {
    background: #f9f9f9;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    color: #777;
    /* Grid'de tam satır kapla */
    grid-column: 1 / -1; 
}

/* === Footer (Alt Bilgi) === */
.akademi-footer {
    background-color: #34495e;
    color: #ecf0f1;
    padding: 30px 0;
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
}

/* === Mobil Uyum (Menü için) === */
@media (max-width: 600px) {
    .header-icerik {
        flex-direction: column;
        gap: 15px;
    }
    .uye-menu .hosgeldin {
        display: none; /* Mobilde 'Hoşgeldin' yazısını gizle */
    }
}


/* === Kurs Detay Sayfası Stilleri === */
.kurs-baslik-alani {
    display: flex;
    gap: 30px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.kurs-baslik-gorsel {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    color: #ced4da;
}
.kurs-baslik-metin p {
    font-size: 16px;
    line-height: 1.7;
}

/* 3 sütunlu içerik alanı */
.kurs-icerik-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
}
.icerik-bolumu {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
}
.icerik-bolumu h2 {
    font-size: 20px;
    color: #134977;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.icerik-bolumu h2 .fas { /* İkonlar */
    margin-right: 10px;
    color: #3498db;
}

.icerik-listesi {
    list-style: none;
    padding: 0;
    margin: 0;
}
.icerik-listesi li {
    margin-bottom: 10px;
}
.icerik-listesi li a {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: background-color 0.3s;
}
.icerik-listesi li a:hover {
    background-color: #e9ecef;
}
.icerik-listesi li.bos {
    font-size: 14px;
    color: #777;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
}

/* İçerik Tipleri için Etiketler */
.icerik-listesi span[class*="tip-"] {
    font-size: 11px;
    font-weight: bold;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 12px;
}
span.tip-ders { background-color: #3498db; }
span.tip-ozet { background-color: #f39c12; }
span.tip-sinav { background-color: #28a745; }
span.tip-kart { background-color: #9b59b6; }


/* === Kurs Detay Mobil Uyum === */
@media (max-width: 992px) {
    .kurs-icerik-grid {
        grid-template-columns: 1fr; /* 3 sütunu alt alta diz */
    }
}
@media (max-width: 768px) {
    .kurs-baslik-alani {
        flex-direction: column; /* Görseli metnin üstüne al */
    }
    .kurs-baslik-gorsel {
        width: 100%;
        height: 200px; /* Mobilde yüksekliği azalt */
    }
}


/* === Ders Görüntüleme Sayfası Stilleri === */
.ders-ust-bilgi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Mobilde alt alta gelsin */
    gap: 15px;
}
.geri-link {
    font-weight: bold;
    color: #134977;
    text-decoration: none;
    font-size: 15px;
}
.geri-link:hover {
    text-decoration: underline;
}
.etiketler {
    display: flex;
    gap: 10px;
}
.etiketler .etiket {
    font-size: 12px;
    font-weight: bold;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
}
.etiket.kanun { background-color: #3498db; }
.etiket.madde { background-color: #9b59b6; }

.ders-icerik-karti {
    background: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.8;
}

/* === Ders Görüntüleme Mobil Uyum === */
@media (max-width: 768px) {
    .ders-icerik-karti {
        padding: 20px;
        font-size: 16px;
    }
}

/* === Çalışma Kartı (Flip-Card) Stilleri === */
.kart-destesi-konteyner {
    max-width: 700px;
    margin: 0 auto; /* Kart destesini ortala */
}

/* Kartın dış çerçevesi (3D perspektif için) */
.flip-kart {
    background-color: transparent;
    width: 100%;
    height: 400px;
    perspective: 1000px; /* 3D efekti için */
    cursor: pointer;
    margin-bottom: 20px;
}

/* Kartın 3D dönüşünü yapan iç katman */
.flip-kart-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Kart çevrildiğinde (.cevirdi sınıfı aldığında) iç katmanı 180 derece döndür */
.flip-kart.cevirdi .flip-kart-inner {
    transform: rotateY(180deg);
}

/* Kartın ön ve arka yüzü (Seçenek 3: Canlı) */
.flip-kart-on, .flip-kart-arka {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari için */
    backface-visibility: hidden; /* Döndüğünde arkayı gizle */
    border-radius: 8px;
    
    /* İçeriği ortala */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
    font-size: 1.3em;
    text-align: center;
    line-height: 1.6;
}

/* KART ÖN YÜZÜ (SORU) */
.flip-kart-on {
    background-color: #8e44ad; /* Koyu Mor */
    color: white;
    font-weight: bold;
}

/* KART ARKA YÜZÜ (CEVAP) */
.flip-kart-arka {
    background-color: #27ae60; /* Canlı Zümrüt Yeşili zemin */
    color: #FFFFFF; /* Beyaz yazı */
    transform: rotateY(180deg);
    border: 1px solid #117a65; /* Sınır rengi */
}

/* Kart Navigasyonu */
.kart-navigasyon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kart-navigasyon .sayac {
    font-size: 14px;
    font-weight: bold;
    color: #555;
}
.kart-navigasyon .nav-buton {
    background: #134977;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
}
.kart-navigasyon .nav-buton:hover {
    background: #34495e;
}
.kart-navigasyon .nav-buton:disabled {
    background: #ccc;
    cursor: not-allowed;
}


/* === Sınav Başla Sayfası Stilleri === */
.sinav-konteyner {
    max-width: 800px;
    margin: 0 auto;
}
.sinav-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.sinav-sayac {
    background: #134977;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
}
.soru-karti {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
}
.soru-metni {
    font-size: 1.1em;
    line-height: 1.7;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.secenekler {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.secenek-label {
    display: block;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.secenek-label:hover {
    background: #e9ecef;
}
.secenek-label input {
    margin-right: 10px;
}
.cevap-metni { /* Soru-Cevap tipi için */
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}
.sinav-bitir-btn {
    width: 100%;
    padding: 15px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
}
.sinav-bitir-btn:hover {
    background: #218838;
}

/* === Sınav Sonuç Sayfası Stilleri === */
.sinav-sonuc-karti {
    background: #fff;
    border-radius: 8px;
    padding: 30px 40px;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}
.puan-gostergesi {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}
.puan-gostergesi.basarili { background: #28a745; }
.puan-gostergesi.basarisiz { background: #e74c3c; }
.puan-baslik {
    font-size: 14px;
    font-weight: bold;
    opacity: 0.8;
}
.puan-deger {
    font-size: 56px;
    font-weight: bold;
    line-height: 1.2;
}
.puan-durum {
    font-size: 20px;
    font-weight: bold;
}
.sonuc-detaylari {
    max-width: 300px;
    margin: 20px auto;
}
.sonuc-detaylari div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 1.1em;
}

/* === Sınav Mobil Uyum === */
@media (max-width: 600px) {
    .sinav-baslik {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* === Sınav Oluşturucu Form (Kurs Detay) === */
.sinav-olustur-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.sinav-olustur-form .form-grup {
    margin-bottom: 0;
}
.sinav-olustur-form .form-secenek {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
}
.sinav-olustur-form .sinav-baslat-btn {
    width: 100%;
    padding: 12px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}
.sinav-olustur-form .sinav-baslat-btn:hover {
    background: #218838;
}



/* === DERS LİSTESİ SAYFALAMA (YENİ) === */
.sayfalama {
    margin-top: 20px;
    text-align: center;
}
.sayfalama a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid #ddd;
    background: #fff;
    color: #134977;
    text-decoration: none;
    border-radius: 4px;
}
.sayfalama a:hover {
    background-color: #f4f7f9;
}
.sayfalama a.aktif {
    background-color: #134977;
    color: white;
    font-weight: bold;
    border-color: #134977;
}

/* === KART NAVİGASYONU DROPDOWN (YENİ) === */
.kart-navigasyon {
    /* Mobilde daha iyi görünmesi için */
    flex-wrap: wrap;
    gap: 10px;
}
.kart-navigasyon .nav-select {
    flex-grow: 1; /* Ortadaki boşluğu doldur */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    /* Mobilde tam genişlik alması için */
    min-width: 100px; 
    order: 1; /* Mobilde butonların arasına al */
}
.kart-navigasyon .sayac {
    order: 1;
    font-size: 12px;
}

@media (max-width: 600px) {
    .kart-navigasyon .nav-select {
        /* Mobilde butonların altına tam genişlikte */
        width: 100%;
        order: 3;
    }
    .kart-navigasyon .sayac {
        /* Mobilde sayacı gizle, dropdown'da yazıyor */
        display: none;
    }
}

/* === Sınav Sonuç Sayfası (Karne) Stilleri === */

/* Puan kartını ve detayları yan yana getir (mobilde alt alta) */
.sinav-sonuc-karti {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 30px;
}
.sinav-sonuc-karti h1 {
    width: 100%; /* Başlık tam genişlik kaplasın */
    text-align: center;
}
.puan-gostergesi {
    flex-basis: 200px; /* Sabit genişlik */
    flex-grow: 1;
    height: 150px;
    margin: 0;
}
.puan-deger { font-size: 48px; }
.puan-durum { font-size: 18px; }

.sonuc-detaylari.yeni-tasarim {
    flex-basis: 300px;
    flex-grow: 2;
    margin: 0;
    max-width: 100%;
}
.sonuc-detaylari.yeni-tasarim div {
    border-bottom: 1px solid #eee;
}
.sonuc-detaylari.yeni-tasarim div:last-child {
    border-bottom: none;
}
.sinav-sonuc-karti .geri-link {
    width: 100%;
    text-align: center;
}

/* Karne (Cevap Anahtarı) stilleri */
.sonuc-karnesi {
    max-width: 800px;
    margin: 30px auto 0 auto;
}
.soru-karti-sonuc {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
}
.soru-karti-sonuc.dogru {
    border-left: 5px solid #28a745;
}
.soru-karti-sonuc.yanlis {
    border-left: 5px solid #e74c3c;
}
.soru-karti-sonuc.bos {
    border-left: 5px solid #777;
}

.secenek-sonuc {
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    margin-top: 10px;
    background: #f8f9fa;
}
.secenek-sonuc.dogru-cevap {
    /* Kullanıcının cevabı bu olmasa bile doğru cevap yeşil */
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
    font-weight: bold;
}
.secenek-sonuc.yanlis-cevap {
    /* Kullanıcının seçtiği yanlış cevap kırmızı */
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
    text-decoration: line-through;
}
.cevap-aciklamasi {
    margin-top: 15px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 5px;
    color: #856404;
    line-height: 1.6;
}

/* === ANA SAYFA "HOŞ GELDİN" (HERO) BÖLÜMÜ === */

.hero-bolumu {
    background: #134977; /* MAYSEN Ana Rengi */
    color: white;
    padding: 40px 30px;
    border-radius: 8px;
    margin-bottom: 30px; 
    text-align: center;
    box-shadow: 0 5px 15px rgba(19, 73, 119, 0.2);
}

.hero-bolumu h1 {
    font-size: 28px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
}

.hero-bolumu p {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0 auto;
    max-width: 600px; /* Metnin çok fazla yayılmasını engeller */
}

/* Mobilde boşlukları biraz azalt */
@media (max-width: 768px) {
    .hero-bolumu {
        padding: 30px 20px;
    }
    .hero-bolumu h1 {
        font-size: 24px;
    }
    .hero-bolumu p {
        font-size: 16px;
    }
}

/* ================== */
/* MOBİL MENÜ DÜZELTMESİ (v3 - Logo ve İkon Aynı Hizada) */
/* ================== */

/* Masaüstünde Hamburger Butonunu Gizle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #134977;
    cursor: pointer;
}

/* === MOBİL GÖRÜNÜM (max-width: 768px) === */
@media (max-width: 768px) {
    
    /* Header'ı flex (esnek) kutu yap */
    .header-icerik {
        display: flex;
        /* Logo (sol) ve İkonu (sağ) iki uca yasla */
        justify-content: space-between; 
        /* Dikeyde ortala */
        align-items: center; 
        /* Menü (açılırsa) alta kaysın */
        flex-wrap: wrap; 
        /* Eski 'column' kuralını ez, 'row' (satır) yap */
        flex-direction: row; 
    }

    /* Hamburger Butonunu Göster */
    .menu-toggle {
        display: block;
    }

    /* Açılır Menüyü (Hoşgeldin + Çıkış) Varsayılan Olarak Gizle */
    .uye-menu {
        display: none;
        
        /* Açıldığında 100% genişlik kapla */
        /* (Bu, 'iki başlık' sorununu çözmek için 'flex-basis' kullanıyoruz) */
        flex-basis: 100%; 
        width: 100%;
        
        flex-direction: column;
        gap: 15px;
        background: #fff;
        padding: 20px;
        margin-top: 15px;
        border-top: 1px solid #eee;
        box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    }
    
    /* JS ile 'mobil-aktif' sınıfı eklendiğinde menüyü göster */
    .uye-menu.mobil-aktif {
        display: flex;
    }
    
    /* Mobilde 'Hoşgeldin' yazısını gizleme kuralını iptal et */
    .uye-menu .hosgeldin {
        display: block;
        text-align: center;
    }
    
    /* Çıkış butonu tam genişlik kaplasın */
    .uye-menu .cikis-butonu {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ================== */
/* SINAV SONUÇLARIM SAYFASI DÜZELTMESİ (v2 - Sola Yaslı) */
/* ================== */

/* Grid düzenini iptal et, dikey listeye dön */
.sonuc-listesi {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Kartlar arası dikey boşluk */
    
    /* === DÜZELTME === */
    /* Listeyi okunaklı bir genişlikte tut... */
    max-width: 800px; 
    /* ...ama 'margin: 0 auto;' kullanarak ortalama, SOLA YASLI bırak. */
    margin: 0; 
}

/* Kartlar artık 'auto' margin'e veya 'max-width'e ihtiyaç duymuyor */
.sonuc-listesi .kart-item {
    width: 100%;
    margin: 0; /* Sola yaslanmayı garantile */
    box-sizing: border-box;
}

/* Mobilde [Kural 1] ortalamayı kaldır */
@media (max-width: 768px) {
    .sonuc-listesi .kart-item {
        max-width: 100%;
        margin: 0;
    }
}

/* ================== */
/* DERS GÖRÜNTÜLEME - ÖNCEKİ/SONRAKİ NAVİGASYONU */
/* ================== */
.ders-navigasyon {
    display: flex;
    justify-content: space-between; /* Butonları iki uca yasla */
    gap: 15px;
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}
.ders-navigasyon .nav-buton {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    width: 48%; /* Esnek genişlik */
    box-sizing: border-box;
}
.ders-navigasyon .nav-buton:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
}
.ders-navigasyon .nav-buton span {
    font-size: 16px;
    font-weight: bold;
    color: #134977; /* Ana renk */
}
.ders-navigasyon .nav-buton small {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
    
    /* Başlık çok uzarsa 1 satırda kes */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Hizalama stilleri */
.ders-navigasyon .nav-buton.onceki { text-align: left; }
.ders-navigasyon .nav-buton.sonraki { text-align: right; }

/* Mobilde [Kural 1] butonlar alt alta gelsin */
@media (max-width: 768px) {
    .ders-navigasyon {
        flex-direction: column;
    }
    .ders-navigasyon .nav-buton {
        width: 100%; /* Tam genişlik kapla */
    }
}

/* ================== */
/* SINAV SONUCU - GERİ BİLDİRİM BÖLÜMÜ */
/* ================== */

/* Beğen/Beğenme/Bildir butonları için sarmalayıcı */
.soru-geribildirim {
    display: flex;
    flex-wrap: wrap; /* Mobilde [Kural 1] butonlar alt alta gelsin */
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.geribildirim-btn {
    display: inline-flex; /* İkon ve metni yanyana getirmek için */
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f9fa;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s;
}
.geribildirim-btn:hover {
    background-color: #e9ecef;
    border-color: #ccc;
}
.geribildirim-btn .fas { /* İkonlar */
    font-size: 14px;
}

/* Renkler */
.geribildirim-btn.begen:hover { color: #28a745; }
.geribildirim-btn.begenmeme:hover { color: #e74c3c; }
.geribildirim-btn.bildir {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}
.geribildirim-btn.bildir:hover {
    background-color: #ffeeba;
}

/* Butona tıklandığında (JS ile 'disabled' olduğunda) */
.geribildirim-btn:disabled {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
    cursor: not-allowed;
    opacity: 0.8;
}

/* ================== */
/* HATA BİLDİR MODAL (Popup Form) */
/* ================== */

/* Arka plan karartması */
.hata-modal-overlay {
    display: none; /* Varsayılan olarak gizli */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.hata-modal-overlay.goster {
    display: flex; /* JS ile 'goster' class'ı eklenince görünür yap */
}

/* Modal Penceresi */
.hata-modal-icerik {
    background: #fff;
    border-radius: 8px;
    padding: 25px 30px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    margin: 20px;
}
.hata-modal-icerik h3 {
    margin-top: 0;
    color: #134977;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.hata-modal-icerik .form-grup {
    margin-bottom: 15px;
}
.hata-modal-icerik .form-secenek,
.hata-modal-icerik .form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
.hata-modal-butonlar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.hata-modal-butonlar .btn-kapat {
    background-color: #777;
}
.hata-modal-butonlar .btn-gonder {
    background-color: #e74c3c;
}

/* ================== */
/* KURS DETAY - İÇERİK ÖZETİ */
/* ================== */

.kurs-icerik-ozeti {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background-color: #f4f7f9; /* Arka planla aynı renk */
    padding: 15px;
    border-radius: 5px;
    margin-top: 15px;
    border-left: 3px solid #134977; /* MAYSEN ana rengi */
}
.kurs-icerik-ozeti strong {
    color: #134977;
}

/* ================== */
/* "SENDEN SONRA OLANLAR" BİLDİRİM KUTUSU (v2 - 3'lü Kutu Tasarımı) */
/* ================== */

/* Ana sarmalayıcı (flex konteyner) */
.yeni-icerik-grid {
    display: flex;
    flex-wrap: wrap; /* Mobilde [Kural 1] alt alta gelmesi için */
    gap: 20px;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px; /* Kurs listesinden ayır */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* "En son ziyaretinizden bu yana..." başlığı */
.yeni-icerik-baslik {
    flex-basis: 100%; /* Tam satır kapla */
    font-size: 1.2em;
    font-weight: bold;
    color: #134977; /* Ana renk */
    margin-bottom: 10px; /* Kutularla arasını aç */
    display: flex;
    align-items: center;
    gap: 10px;
}
.yeni-icerik-baslik .fas {
    opacity: 0.7;
}

/* İçerik Kutuları (Ders, Kart, Soru) */
.yeni-icerik-kutu {
    flex-grow: 1; /* Esnek büyüme */
    flex-basis: 200px; /* Minimum genişlik */
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    /* Renkli sol kenarlık (Sizin "renklerde" isteğiniz) */
    border-left: 5px solid #ccc; 
}
.yeni-icerik-sayi {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
}
.yeni-icerik-aciklama {
    font-size: 15px;
    color: #555;
    font-weight: 500;
    line-height: 1.4;
}

/* ================== */
/* ROZET KAZANMA MODALI (KUTLAMA) */
/* ================== */

.rozet-modal-overlay {
    display: none; /* Varsayılan gizli */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Koyu arka plan */
    z-index: 9999; /* En üstte */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Arkası flu olsun */
}

.rozet-modal-icerik {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.rozet-baslik {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 10px;
}

.rozet-altbaslik {
    font-size: 16px;
    color: #7f8c8d;
    margin-bottom: 30px;
}

/* Kazanılan Rozet Görünümü */
.kazanilan-rozet {
    margin: 20px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    position: relative;
    /* Parlama Efekti */
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 10px -5px currentColor; }
    to { box-shadow: 0 0 30px 5px currentColor; }
}

.kazanilan-rozet-adi {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.kazanilan-rozet-aciklama {
    font-size: 15px;
    color: #555;
    margin-top: 5px;
    line-height: 1.5;
}

.btn-harika {
    margin-top: 30px;
    background: #2ecc71;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}
.btn-harika:hover {
    transform: scale(1.05);
    background: #27ae60;
}

/* === GÜNLÜK SERİ ROZETİ (Header'da) === */
.seri-rozet {
    background: white;
    color: #e67e22;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.alev-animasyon {
    color: #e74c3c;
    font-size: 18px;
    animation: burn 1.5s infinite alternate;
}
@keyframes burn {
    from { text-shadow: 0 0 5px #f39c12; transform: scale(1); }
    to { text-shadow: 0 0 20px #c0392b; transform: scale(1.2); }
}

/* === GÜNÜN SORUSU KARTI === */
.gunun-sorusu-karti {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-top: 5px solid #f39c12;
}
.gunun-sorusu-karti.cozuldu {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f9fff9;
    border-top-color: #2ecc71;
}
.gs-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.gs-etiket {
    font-weight: bold;
    color: #d35400;
    font-size: 1.1em;
}
.gs-konu {
    background: #fdebd0;
    color: #d35400;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.9em;
}
.gs-soru-metni {
    font-size: 15px; /* 1.2em yerine 15px yapıldı (Standart) */
    font-weight: 500;
    margin-bottom: 20px;
    color: #2c3e50;
    line-height: 1.6; /* Okunabilirlik için satır arası */
}
.gs-secenekler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.gs-btn {
    padding: 12px 15px; /* Padding biraz azaltıldı */
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px; /* Buton yazısı 14px yapıldı */
    transition: all 0.2s;
    text-align: left;
}
.gs-btn:hover {
    border-color: #3498db;
    background: #eaf2f8;
}
/* Mobilde şıklar alt alta */
@media (max-width: 600px) {
    .gs-secenekler { grid-template-columns: 1fr; }
}

/* ================== */
/* HERO BÖLÜMÜ (Ortalı ve Sade) */
/* ================== */

.hero-bolumu {
    background: #134977;
    color: white;
    padding: 40px 30px;
    border-radius: 8px;
    margin-bottom: 30px; 
    text-align: center; /* Metni ortala */
    box-shadow: 0 5px 15px rgba(19, 73, 119, 0.2);
    
    /* İçerikleri dikeyde ortalamak için */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Başlık, yazı ve rozet arası boşluk */
}

.hero-bolumu h1 {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
}

.hero-bolumu p {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0;
    max-width: 700px;
}

/* Rozet Tasarımı (Kibar) */
.seri-rozet {
    background: rgba(255, 255, 255, 0.15); /* Hafif şeffaf beyaz */
    color: #fff; /* Beyaz yazı */
    border: 1px solid rgba(255,255,255,0.3); /* İnce kenarlık */
    padding: 6px 16px; /* Daha küçük, kibar boyut */
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    transition: all 0.3s;
}

.seri-rozet:hover {
    background: white;
    color: #e67e22;
}

.alev-animasyon {
    color: #f39c12; /* Turuncu ateş */
    font-size: 16px;
    animation: burn 1.5s infinite alternate;
}

@keyframes burn {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.2); opacity: 1; }
}

/* Mobilde biraz daha sıkışık olsun */
@media (max-width: 768px) {
    .hero-bolumu { padding: 30px 20px; }
    .hero-bolumu h1 { font-size: 24px; }
    .hero-bolumu p { font-size: 15px; }
}

/* ================== */
/* PROFİL VE ROZET SAYFASI */
/* ================== */

.profil-header-karti {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.profil-avatar {
    width: 100px;
    height: 100px;
    background: #134977;
    color: white;
    font-size: 40px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.profil-bilgi h1 { margin: 0 0 5px 0; color: #2c3e50; }
.profil-bilgi p { margin: 0 0 15px 0; color: #7f8c8d; }

.profil-rozetler-mini { display: flex; gap: 10px; }
.profil-rozetler-mini span {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}
.etiket-puan { background: #fff3cd; color: #856404; }
.etiket-seri { background: #f8d7da; color: #721c24; }
.etiket-sinav { background: #d1ecf1; color: #0c5460; }


/* Rozet Grid */
.bolum-basligi {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #2c3e50;
}

.rozet-koleksiyonu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.rozet-kart {
    background: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

/* Kazanılan Rozet Stili */
.rozet-kart.kazanildi { border: 1px solid #e0e0e0; }
.rozet-kart.kazanildi:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Kilitli Rozet Stili */
.rozet-kart.kilitli {
    background: #f9f9f9;
    opacity: 0.7;
    filter: grayscale(100%); /* Gri yap */
}

.rozet-ikon-kapsayici {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 24px; color: white;
    flex-shrink: 0;
}
.rozet-kart.kilitli .rozet-ikon-kapsayici {
    background: #ccc; /* Kilitli ikon gri */
    color: #fff;
}

.rozet-detay h3 { margin: 0 0 5px 0; font-size: 16px; }
.rozet-detay p { margin: 0 0 10px 0; font-size: 13px; color: #666; line-height: 1.4; }
.rozet-detay small { font-size: 11px; display: block; }

.rozet-detay .tarih { color: #27ae60; font-weight: bold; }
.rozet-detay .hedef { color: #999; font-style: italic; }

/* Gelişmiş İstatistikler */
.milestone-kutlama {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.istatistikler-bolumu {
    margin-bottom: 50px;
}

.istatistik-kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.istatistik-kart {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.istatistik-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.istatistik-ikon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.istatistik-detay {
    flex-grow: 1;
}

.istatistik-detay h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #7f8c8d;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.istatistik-deger {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
}

.istatistik-detay small {
    font-size: 12px;
    display: block;
}

.istatistik-detay small.pozitif {
    color: #27ae60;
    font-weight: 600;
}

.istatistik-detay small.negatif {
    color: #e74c3c;
    font-weight: 600;
}

.kurs-performans-listesi {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.kurs-performans-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #3498db;
    transition: background 0.3s;
}

.kurs-performans-item:hover {
    background: #e9ecef;
}

.kurs-performans-baslik {
    margin-bottom: 12px;
    font-size: 16px;
    color: #2c3e50;
}

.kurs-performans-detay {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.kurs-performans-detay span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
}

.kurs-performans-detay i {
    color: #3498db;
}

/* Responsive */
@media (max-width: 768px) {
    .istatistik-kartlari {
        grid-template-columns: 1fr;
    }
    
    .istatistik-kart {
        flex-direction: column;
        text-align: center;
    }
    
    .kurs-performans-detay {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .profil-header-karti { flex-direction: column; text-align: center; }
    .profil-rozetler-mini { justify-content: center; flex-wrap: wrap; }
    .rozet-koleksiyonu-grid { grid-template-columns: 1fr; }
}


/* ================== */
/* GÜNÜN MOTİVASYON SÖZÜ TASARIMI */
/* ================== */

.motivasyon-karti {
    /* Hafif bir geçişli (gradient) arka plan */
    background: linear-gradient(120deg, #ffffff 0%, #f0fdfa 100%);
    /* Sol tarafa dikkat çekici kalın bir çizgi */
    border-left: 5px solid #1abc9c; /* Turkuaz rengi */
    border-radius: 8px; /* Köşeleri yuvarlat */
    padding: 25px 30px; /* İç boşluk */
    margin-bottom: 30px; /* Altındaki kutulardan ayır */
    
    /* İçeriği hizala */
    display: flex;
    align-items: center;
    gap: 25px; /* İkon ile yazı arası */
    
    /* Derinlik efekti (Gölge) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease; /* Hover efekti için yumuşak geçiş */
}

/* Üzerine gelince hafifçe havalansın */
.motivasyon-karti:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(26, 188, 156, 0.15); /* Hafif turkuaz gölge */
    border-left-color: #16a085; /* Çizgi rengi koyulaşsın */
}

.motivasyon-ikon {
    font-size: 32px; /* İkonu büyüt */
    color: #1abc9c; /* Çizgiyle aynı renk */
    opacity: 0.8;
    flex-shrink: 0; /* Yazı uzasa da ikon sıkışmasın */
}

.motivasyon-metin {
    font-size: 17px;
    font-weight: 500;
    font-style: italic; /* Alıntı olduğu belli olsun */
    color: #34495e; /* Koyu gri/lacivert yazı rengi */
    line-height: 1.6; /* Satır arasını aç, okunaklı olsun */
    font-family: "Georgia", serif; /* Daha edebi bir font */
}

/* Mobilde ikon ve yazı alt alta gelmesin, yan yana sığsın */
@media (max-width: 600px) {
    .motivasyon-karti {
        padding: 20px;
        gap: 15px;
    }
    .motivasyon-ikon {
        font-size: 24px;
    }
    .motivasyon-metin {
        font-size: 15px;
    }
}

/* ================== */
/* HAFTALIK HEDEF KARTI (YENİ) */
/* ================== */
.haftalik-hedef-karti {
    background: #fff;
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.hedef-baslik {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: #134977;
    margin-bottom: 10px;
}

.hedef-cubugu-zemin {
    background: #f0f0f0;
    border-radius: 20px;
    height: 15px;
    overflow: hidden;
    margin-bottom: 10px;
}

.hedef-cubugu-doluluk {
    background: linear-gradient(90deg, #3498db, #2ecc71);
    height: 100%;
    width: 0%; /* PHP ile dinamik dolacak */
    border-radius: 20px;
    transition: width 1s ease-in-out;
}

.hedef-motivasyon {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* ================== */
/* BİLİYOR MUYDUNUZ? (YENİ) */
/* ================== */
.bilgi-karti-wrapper {
    margin-bottom: 40px;
}

.bilgi-karti-baslik {
    font-size: 18px;
    font-weight: bold;
    color: #f39c12;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.etiket-kurs {
    background: #f0f2f5;
    color: #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}

/* ================== */
/* PUAN MAĞAZASI TASARIMI */
/* ================== */

.market-hero {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%); /* Altın Sarısı */
    padding: 40px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
    position: relative;
    overflow: hidden;
}
/* Arka plan deseni (isteğe bağlı) */
.market-hero::before {
    content: '\f51e'; /* Coins icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -20px; right: -20px;
    font-size: 150px;
    opacity: 0.1;
    transform: rotate(20deg);
}

.mevcut-puan-kapsayici {
    background: rgba(255,255,255,0.2);
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(5px);
}
.puan-etiket { font-size: 14px; letter-spacing: 2px; opacity: 0.9; margin-bottom: 5px; font-weight: bold; }
.puan-deger { font-size: 48px; font-weight: 800; line-height: 1; text-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.puan-deger small { font-size: 20px; font-weight: normal; }

.market-aciklama { margin-top: 20px; font-size: 16px; opacity: 0.9; max-width: 600px; margin-left: auto; margin-right: auto; }


/* Ürün Grid */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.urun-karti {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    border-top: 5px solid #ccc; /* Dinamik renk */
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}
.urun-karti:hover { transform: translateY(-5px); }

.urun-ikon-kapsayici {
    height: 80px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: white;
}

.urun-detay { padding: 20px; flex-grow: 1; text-align: center; }
.urun-detay h3 { margin: 0 0 10px 0; color: #333; }
.urun-detay p { color: #666; font-size: 14px; line-height: 1.5; margin: 0; }

.envanter-bilgi {
    margin-top: 15px;
    background: #f8f9fa;
    padding: 8px;
    border-radius: 5px;
    font-size: 13px;
    color: #555;
    border: 1px solid #eee;
}

.urun-footer {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

.urun-fiyat { font-size: 18px; font-weight: bold; }

.btn-satin-al {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-satin-al:hover { background: #219150; transform: scale(1.05); }
.btn-satin-al:disabled { background: #ccc; cursor: not-allowed; transform: none; }

/* ================== */
/* LİDERLİK TABLOSU */
/* ================== */

.liderlik-hero {
    background: linear-gradient(135deg, #134977 0%, #2980b9 100%);
    padding: 40px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(19, 73, 119, 0.3);
}

.liderlik-hero h1 {
    margin: 0 0 10px 0;
    font-size: 36px;
    color: #fff;
    border: none;
    padding: 0;
}

.liderlik-hero p {
    margin: 0;
    font-size: 16px;
    opacity: 0.95;
}

/* Tab Sistemi */
.liderlik-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.tab-link {
    padding: 12px 20px;
    background: #f5f5f5;
    color: #666;
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-link:hover {
    background: #e8e8e8;
    color: #134977;
}

.tab-link.aktif {
    background: linear-gradient(135deg, #134977, #3498db);
    color: #fff;
    font-weight: bold;
}

/* Liderlik Listesi */
.liderlik-liste {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.liderlik-kart {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #ddd;
}

.liderlik-kart:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.liderlik-kart.top-1 {
    border-left-color: #134977;
    background: linear-gradient(to right, #e8f0f7, #fff);
}

.liderlik-kart.top-2 {
    border-left-color: #3498db;
    background: linear-gradient(to right, #ebf5fb, #fff);
}

.liderlik-kart.top-3 {
    border-left-color: #2980b9;
    background: linear-gradient(to right, #e3f2fd, #fff);
}

.liderlik-sira {
    font-size: 28px;
    font-weight: bold;
    color: #134977;
    min-width: 50px;
    text-align: center;
}

.liderlik-kart.top-1 .liderlik-sira {
    color: #134977;
}

.liderlik-kart.top-2 .liderlik-sira {
    color: #3498db;
}

.liderlik-kart.top-3 .liderlik-sira {
    color: #2980b9;
}

.liderlik-sira .sira-numarasi {
    font-size: 24px;
    color: #666;
}

.liderlik-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    flex-shrink: 0;
}

.liderlik-kart.top-1 .liderlik-avatar {
    background: linear-gradient(135deg, #134977, #2980b9);
}

.liderlik-kart.top-2 .liderlik-avatar {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.liderlik-kart.top-3 .liderlik-avatar {
    background: linear-gradient(135deg, #2980b9, #3498db);
}

.liderlik-bilgi {
    flex-grow: 1;
}

.liderlik-bilgi h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #134977;
    font-weight: 600;
}

.liderlik-detay {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.liderlik-xp,
.liderlik-seri {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #f0f2f5;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.liderlik-xp {
    color: #134977;
    background: #e8f0f7;
}

.liderlik-seri {
    color: #e74c3c;
    background: #fde8e8;
}

.liderlik-rutbe {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

/* Benim Konumum Kartı */
.benim-konumum-kart {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.2);
    border: 2px solid #3498db;
    margin-top: 30px;
}

.benim-konumum-kart h3 {
    margin: 0 0 20px 0;
    color: #134977;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.benim-konumum {
    border-left-color: #3498db !important;
    background: linear-gradient(to right, #ebf5fb, #fff) !important;
}

.benim-konumum h3 small {
    font-size: 14px;
    color: #3498db;
    font-weight: normal;
}

/* Responsive */
@media (max-width: 768px) {
    .liderlik-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-link {
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 15px;
    }
    
    .liderlik-kart {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .liderlik-sira {
        min-width: auto;
    }
    
    .liderlik-detay {
        justify-content: center;
    }
    
    .liderlik-bilgi h3 {
        font-size: 18px;
    }
}

/* ================== */
/* POMODORO ZAMANLAYICI */
/* ================== */

.pomodoro-konteyner {
    max-width: 900px;
    margin: 0 auto;
}

.pomodoro-header {
    text-align: center;
    margin-bottom: 40px;
}

.pomodoro-istatistikler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.pomodoro-zamanlayici {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    margin-bottom: 30px;
}

.pomodoro-daire {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 30px;
}

.pomodoro-progress {
    transform: rotate(-90deg);
}

.pomodoro-zaman {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#zamanGosterge {
    font-size: 48px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
}

#durumMetin {
    font-size: 16px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pomodoro-kontroller {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.pomodoro-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-baslat {
    background: #27ae60;
    color: white;
}

.btn-baslat:hover {
    background: #229954;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}

.btn-duraklat {
    background: #f39c12;
    color: white;
}

.btn-duraklat:hover {
    background: #e67e22;
}

.btn-devam {
    background: #3498db;
    color: white;
}

.btn-devam:hover {
    background: #2980b9;
}

.btn-iptal {
    background: #e74c3c;
    color: white;
}

.btn-iptal:hover {
    background: #c0392b;
}

.pomodoro-aktivite-durumu {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
    border-left: 4px solid #3498db;
}

.pomodoro-aktivite-durumu h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 18px;
}

.aktivite-listesi {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.aktivite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: 8px;
    font-size: 15px;
}

.aktivite-item span {
    color: #555;
}

.aktivite-item strong {
    color: #2c3e50;
    font-size: 18px;
}

.aktivite-uyari {
    margin-top: 15px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aktivite-uyari i {
    font-size: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .pomodoro-daire {
        width: 250px;
        height: 250px;
    }
    
    #zamanGosterge {
        font-size: 36px;
    }
    
    .pomodoro-kontroller {
        flex-direction: column;
    }
    
    .pomodoro-btn {
        width: 100%;
        justify-content: center;
    }
}