/* ============================================
   SALOME STORIES CSS
   ============================================ */

.salome-stories-container {
    width: 100%;
    overflow-x: auto;
    padding: 20px 0;
    background: transparent; /* Arkaplan saydam olsun, temaya uysun */
    -ms-overflow-style: none;  
    scrollbar-width: none;
    margin-bottom: 30px;
}

.salome-stories-container::-webkit-scrollbar { 
    display: none; 
}

.salome-stories-wrapper {
    display: flex;
    gap: 30px; /* Araları açıldı (Eskisi 15-20px idi) */
    justify-content: center;
    width: max-content;
    margin: 0 auto;
    padding: 0 20px;
}

/* Mobilde sola hizalı olsun ve kaydırılsın */
@media (max-width: 768px) {
    .salome-stories-wrapper {
        justify-content: flex-start;
    }
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    cursor: pointer;
    width: 120px; /* Büyütüldü (100px -> 120px) */
    transition: all 0.3s ease;
}

/* Daire Çerçeve */
.story-circle {
    width: 110px; /* Büyütüldü (90px -> 110px) */
    height: 110px; /* Büyütüldü (90px -> 110px) */
    border-radius: 50%;
    position: relative;
    /* Eski background ve padding kaldırıldı, pseudo element ile yapılacak */
    background: transparent;
    padding: 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* box-shadow kaldırıldı veya azaltıldı, çünkü yarım daire dönüyor */
}

/* YARIM DAİRE HALKA (Pseudo Element) */
.story-circle::before {
    content: "";
    position: absolute;
    inset: 0; /* Tam kapla */
    border-radius: 50%;
    z-index: 1;
    
    /* Renk değişkeni (aşağıda tanımlı) */
    background: var(--story-bg, linear-gradient(45deg, #eb731d, #f39c12));
    
    /* Yarım Daire Maskeleme */
    -webkit-mask: linear-gradient(to right, transparent 50%, black 50%);
    mask: linear-gradient(to right, transparent 50%, black 50%);
    
    /* Hover Animasyonu */
    transition: transform 0.4s ease-in-out;
}

/* ====================================
   RENKLİ HALKALAR (CSS Variable Tanımları)
   ==================================== */
.story-color-1 { --story-bg: linear-gradient(45deg, #FF512F, #DD2476); }
.story-color-2 { --story-bg: linear-gradient(45deg, #00c6ff, #0072ff); }
.story-color-3 { --story-bg: linear-gradient(45deg, #8E2DE2, #4A00E0); }
.story-color-4 { --story-bg: linear-gradient(45deg, #11998e, #38ef7d); }
.story-color-5 { --story-bg: linear-gradient(45deg, #FF416C, #FF4B2B); }
.story-color-6 { --story-bg: linear-gradient(45deg, #fceabb, #f8b500); }
.story-color-7 { --story-bg: linear-gradient(45deg, #232526, #414345); }
.story-color-8 { --story-bg: linear-gradient(45deg, #00F260, #0575E6); }

/* Hover Durumu - 90 Derece Dönüş */
.story-item:hover .story-circle::before {
    transform: rotate(90deg);
}

/* İçteki Resimler (Tüm İmg etiketleri için ortak) */
.story-circle img {
    /* Çakışmaları ve ezilmeleri önlemek için !important kullanıyoruz */
    width: 96px !important;  
    height: 96px !important;
    min-width: 96px !important; /* Esnemeyi engelle */
    min-height: 96px !important;
    
    object-fit: cover !important;
    border-radius: 50% !important; /* Daire zorlaması */
    
    border: 3px solid #fff;
    background: #fff;
    display: block !important;
    aspect-ratio: 1/1;
    
    /* Üst üste binmeleri için absolute şart */
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam ortala */
    
    transition: all 0.4s ease;
}

/* İlk Resim (Varsayılan) */
.story-main-img {
    opacity: 1;
    z-index: 10; /* En üstte */
}

/* İkinci Resim (Hover'da gelecek) */
.story-hover-img {
    opacity: 0;
    z-index: 5;
    /* Başlangıçta biraz farklı dursun */
    transform: translate(-50%, -50%) scale(0.9) rotate(-10deg); 
}

/* Hover İşlemleri */
.story-item:hover .story-main-img {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
}

.story-item:hover .story-hover-img {
    opacity: 1;
    z-index: 15; /* Üste çıksın */
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

/* Hover'da genel büyüme efekti */
.story-item:hover .story-circle {
    transform: scale(1.05); /* Daireyi hafif büyüt */
}

.story-title {
    margin-top: 12px;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.2;
}

/* Özel Renk Sınıfları */
.story-circle.is-new {
    background: linear-gradient(45deg, #00c6ff, #0072ff); /* Mavi */
    animation: salome-pulse-blue 2s infinite;
}

.story-circle.is-sale {
    background: linear-gradient(45deg, #ff416c, #ff4b2b); /* Kırmızı */
}

@keyframes salome-pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0, 114, 255, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(0, 114, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 114, 255, 0); }
}