/* Ecem Bilgisayar - Tertemiz Circle Menü Sistemi (Scrollbar Yok) */

/* 1. Ana Kapsayıcı: Masaüstünde Sabit ve Şık */
.header_circle_items {
    display: flex !important;
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
    padding: 20px 10px !important;
    overflow: visible !important; /* Masaüstünde çubuğu tamamen yok eder */
}

/* 2. Sadece Mobil: Kaydırma Açık Ama Çubuk Gizli */
@media (max-width: 768px) {
    .header_circle_items {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox için çubuğu gizler */
        -ms-overflow-style: none; /* IE için çubuğu gizler */
    }
    /* Chrome, Safari ve Opera için çubuğu gizler */
    .header_circle_items::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* 3. İkon ve Balon Ayarları */
.header_circle_items a {
    flex: 0 0 auto;
    position: relative;
    width: 85px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
}

/* 4. Resimler (Tam Yuvarlak) */
.header_circle_items img {
    width: 75px !important;
    height: 75px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f0f0f0;
    background: #fff;
    z-index: 2;
    transition: all 0.3s ease;
}

/* 5. Balon Patlama Efekti */
.header_circle_items a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    box-shadow: 
        -20px -20px 0 #FF5733, 20px -25px 0 #33FF57, 
        -30px -40px 0 #3357FF, 30px -45px 0 #F333FF,
        0px -50px 0 #FFD700, -40px -15px 0 #00D4FF,
        40px -30px 0 #FF8C00;
}

@keyframes bubbleExplosion {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translate(-50%, -120px) scale(1.8); opacity: 0; }
}

.header_circle_items a:hover::before {
    animation: bubbleExplosion 1s ease-out infinite;
}

.header_circle_items a:hover img {
    transform: scale(1.1);
    border-color: #007bff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 6. Yazı Ayarı */
.header_circle_items span {
    font-size: 11px;
    font-weight: 700;
    margin-top: 8px;
    color: #333;
    text-align: center;
}
/* 6. blok ortalama */
.block_images_container {
  max-width: 1200px;
  margin: 0 auto;
}

.block_images_items {
  justify-content: center;
}