/* yuzdesel_formulu.css - #2a8fbd Teması (Slider Mavi Kanal ve Ferah Düzen) */


/* --- 1. Slider Çizgisi (Track) - Her Zaman Sade Gri --- */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #e0e0e0; /* Sade açık gri */
    border-radius: 10px;
    border: 1px solid #ccc;
}

/* --- 2. Daire Buton (Thumb) - Normal Hali --- */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #2a8fbd; /* Kenarı senin mavinden */
    margin-top: -7px; /* Çizgiye tam ortalamak için */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* --- 3. Daire Buton (Thumb) - ÜZERİNE GELİNDİĞİNDE 3D MAVİ --- */
input[type=range]:hover::-webkit-slider-thumb {
    /* Senin mavi geçişin */
    background: #2a8fbd;
    background: linear-gradient(to bottom, #34a5d8 0%, #2a8fbd 50%, #176b91 100%);
    
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* 3D Vurgusu: Dış gölge ve iç parlatma */
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3), 
        inset 0 1px 2px rgba(255,255,255,0.5);
        
    transform: scale(1.3); /* Daire hafifçe büyür */
}

/* Firefox için Aynı Mantık */
input[type=range]:hover::-moz-range-thumb {
    background: linear-gradient(to bottom, #34a5d8 0%, #2a8fbd 50%, #176b91 100%);
    transform: scale(1.3);
}




/* Genel 3D Mavi Kutu Tasarımı */
.mavi-3d-panel {
    background: linear-gradient(145deg, #2a8fbd, #2681aa); /* Hafif ton geçişi */
    border-radius: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* Üstten gelen ışık efekti */
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    
    /* İç gölge ve dış gölge ile derinlik katıyoruz */
    box-shadow: 
        5px 5px 15px rgba(0, 0, 0, 0.2),            /* Dış gölge */
        inset 2px 2px 5px rgba(255, 255, 255, 0.2), /* İç parlama */
        inset -2px -2px 5px rgba(0, 0, 0, 0.1);     /* İç gölge */
        
    color: white;
    transition: all 0.3s ease;
}

/* Üzerine gelince (Hover) efektini güçlendirelim */
.mavi-3d-panel:hover {
    transform: translateY(-2px); /* Hafif yukarı kalkma efekti */
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
}

/* Slider (Range) Çubuğunu Özelleştirme */
input[type=range] {
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    height: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    cursor: pointer;
    border: 2px solid #2a8fbd;
}



/* Genel Maç Satırı Kancası */
.mac-ozel-satir {
    border: 2px solid #2a8fbd; /* Sitenin ana mavisi */
    padding: 15px;
    background: #fff; 
    margin-bottom: 15px;
    font-family: 'Bitter', serif;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Başlık Alanı */
.mac-baslik {
    text-align: left;
    font-size: 19px;
    font-weight: bold;
    color: #000; /* Siyah yazı */
    margin-bottom: 15px;
    border-bottom: 2px solid #2a8fbd; /* Mavi alt çizgi */
    padding-bottom: 5px;
}

/* Tahmin Gruplarının Bulunduğu Flex */
.slider-grubu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* Her Bir Tahmin Bloğu */
.tahmin-blok {
    flex: 1;
    text-align: center;
    padding: 5px;
}

/* Takım/Sonuç Adı */
.takim-adi {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px; /* Slider ile arasını açtık */
    color: #000; /* Siyah yazı */
    text-transform: uppercase; /* Tümünü büyük harf yapar */
}

/* Sayı Kutusu ve Yüzde İşareti Konteynırı */
.yuzde-number-konteynir {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000; /* Yüzde işareti siyah */
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px; /* Slider ile arasını açtık */
}

/* !!! İPUCU EFEKTİ VE ARA BOŞLUK !!! */
.yuzde-number {
    border: 2px solid #2a8fbd; /* Giriş kutusu mavi kenarlık */
    font-size: 18px;
    font-weight: bold;
    width: 65px;
    text-align: center;
    background: #fdfdfd;
    color: #000; /* Sayılar siyah */
    border-radius: 4px;
    
    /* Yüzde işaretiyle arasını açmak için sağ boşluk */
    margin-right: 15px; 
    
    padding: 2px;
    transition: all 0.3s ease;
}

/* Fare üzerine geldiğinde sarı parlama */
.yuzde-number:hover, .yuzde-number:focus {
   outline: none;
    border-color: #698a27;
}

/* ========================================================== */
/* !!! TARAYICI UYUMLU SLIDER (RANGE) TASARIMI !!! */
/* ========================================================== */

input[type=range] {
    -webkit-appearance: none; /* Standart slider stilini kapatır */
    width: 100%;
    background: transparent; /* Arka planı şeffaf yapar */
    margin: 10px 0; /* Boşluk ekler */
    
     pointer-events: none;/*çubuk tıklanamasın.*/
}

input[type=range]:focus {
    outline: none;
}

/* WebKit (Chrome, Safari, Opera, Edge) İçin */

/* 1. Slider Kanalı (Çizgisi) - !!! İSTENEN MAVİ !!! */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px; /* Kalınlık */
    cursor: pointer;
    background: #2a8fbd; /* !!! SİTENİN MAVİ RENGİ !!! */
    border-radius: 5px; /* Yuvarlak köşeler */
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}

/* 2. Slider Düğmesi (Tutacak) */
input[type=range]::-webkit-slider-thumb {
    height: 22px;
    width: 22px;
    border-radius: 50%; /* Yuvarlak düğme */
    background: #fff; /* Beyaz iç */
    border: 2px solid #2a8fbd; /* Mavi dış kenarlık */
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px; /* Kanalı ortalamak için (height/2 - track_height/2) */
    box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    transition: background 0.2s;
    pointer-events: auto;/*Range düğmesi kullanılabilsin.*/
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #f0f8ff; /* Fare üzerindeyken hafif mavi tonu */
}






/* Firefox İçin (Alternatif Tarayıcı Desteği) */

/* 1. Slider Kanalı (Çizgisi) - !!! İSTENEN MAVİ !!! */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #2a8fbd; /* !!! SİTENİN MAVİ RENGİ !!! */
    border-radius: 5px;
}

/* 2. Slider Düğmesi (Tutacak) */
input[type=range]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border: 2px solid #2a8fbd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    
    pointer-events: auto;
}

/* IE/Edge (Old) İçin (Alternatif Tarayıcı Desteği) */
input[type=range]::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #2a8fbd;
    border-radius: 5px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 5px;
}
input[type=range]::-ms-thumb {
    height: 20px;
    width: 20px;
    border: 2px solid #2a8fbd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    
    pointer-events: auto;
}






/* 425px ve altı ekranlar için mobil düzenleme */
@media (max-width: 425px) {
    .slider-grubu {
        flex-direction: column; /* Yan yana olan dizilimi alt alta çevirir */
        gap: 20px; /* Bloklar arasındaki dikey mesafeyi korur */
    }

    .tahmin-blok {
        width: 100%; /* Blokların tam genişlik kaplamasını sağlar */
        border-bottom: 1px dashed #2a8fbd; /* Görsel ayrım için ince bir çizgi (isteğe bağlı) */
        padding-bottom: 15px;
    }

    /* Son bloğun altındaki çizgiyi kaldırır */
    .tahmin-blok:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mac-baslik {
        text-align: center; /* Mobilde başlığı ortalamak daha şık durabilir */
        font-size: 17px;
    }
}