/* ===========================================================
   SOBE
   COLLECTION EXPERIENCE
=========================================================== */

:root{

    --collection-width: min(1700px,92vw);

    --collection-space: clamp(40px,4vw,90px);

    --collection-text: rgba(255,255,255,.72);

    --collection-soft: rgba(255,255,255,.32);

    --collection-line: rgba(255,255,255,.08);

    --collection-title: clamp(52px,4vw,88px);

    --collection-headline: clamp(20px,1.35vw,28px);

}



.gold-particles span:nth-child(odd){

    --x:35;

}

.gold-particles span:nth-child(even){

    --x:-30;

}

.gold-particles span:nth-child(3),
.gold-particles span:nth-child(7){

    width:16px;
    height:16px;

    filter:blur(3px);

}

.gold-particles{

    position:absolute;
    inset:0;

    pointer-events:none;
    overflow:hidden;

    z-index:2;

}

.gold-particles span{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,236,180,1) 0%,
            rgba(212,175,55,.9) 45%,
            rgba(212,175,55,0) 100%
        );

    box-shadow:

        0 0 10px rgba(212,175,55,.8),
        0 0 20px rgba(212,175,55,.4);

    animation:
        moleculeFloat 10s linear infinite;

    opacity:0;

}

.gold-particles span:nth-child(1){
    left:25%;
    top:75%;
    animation-delay:0s;
}

.gold-particles span:nth-child(2){
    left:35%;
    top:85%;
    animation-delay:1.2s;
}

.gold-particles span:nth-child(3){
    left:45%;
    top:80%;
    animation-delay:2.4s;
}

.gold-particles span:nth-child(4){
    left:60%;
    top:78%;
    animation-delay:3.1s;
}

.gold-particles span:nth-child(5){
    left:70%;
    top:82%;
    animation-delay:4.4s;
}

.gold-particles span:nth-child(6){
    left:20%;
    top:60%;
    animation-delay:5.2s;
}

.gold-particles span:nth-child(7){
    left:80%;
    top:65%;
    animation-delay:6.1s;
}

.gold-particles span:nth-child(8){
    left:55%;
    top:70%;
    animation-delay:7s;
}

.gold-particles span:nth-child(9){
    left:40%;
    top:65%;
    animation-delay:8s;
}

.gold-particles span:nth-child(10){
    left:65%;
    top:68%;
    animation-delay:9s;
}



.sparkles{

    position:absolute;
    inset:0;
    z-index: 1;
    pointer-events:none;

}

.sparkles span{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(255,255,255,.8);

    filter:blur(2px);

    animation:
        sparkleFloat 7s linear infinite;

}

.sparkles span:nth-child(1){

    top:20%;
    left:30%;
    animation-delay:0s;

}

.sparkles span:nth-child(2){

    top:60%;
    left:25%;
    animation-delay:1s;

}

.sparkles span:nth-child(3){

    top:30%;
    right:25%;
    animation-delay:2s;

}

.sparkles span:nth-child(4){

    top:70%;
    right:30%;
    animation-delay:3s;

}

.sparkles span:nth-child(5){

    top:45%;
    left:50%;
    animation-delay:4s;

}

/* ===========================================================
   SECTION
=========================================================== */

.ritual-collection{

    position:relative;

    background:#000000;

    color:#fff;

    overflow:hidden;

    padding:180px 0;
    
    touch-action:pan-y;

}

.ritual-container{

    width:var(--collection-width);

    margin:auto;

    display:grid;

    grid-template-columns:260px 1fr 460px;

    gap:var(--collection-space);

    align-items:center;

}


/* ===========================================================
   LEFT
=========================================================== */

.fragrance-nav{

    position:relative;

}

.section-label{

    display:block;

    margin-bottom:50px;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    opacity:.45;

}

.fragrance-nav ul{

    list-style:none;

    padding:0;

    margin:0;

}

.fragrance-nav li{

    margin-bottom:18px;

}

.fragrance-item{

    display:flex;

    align-items:center;

    gap:18px;

    background:none;

    border:0;

    color:#fff;

    cursor:pointer;

    padding:0;

    opacity:.28;

    transition:.45s;

}

.fragrance-item:hover{

    opacity:1;

    transform:translateX(10px);

}

.fragrance-item.active{

    opacity:1;

}

.fragrance-index{

    font-size:11px;

    letter-spacing:3px;

    color:#777;

    width:24px;

}

.fragrance-name{

    font-size:18px;

    letter-spacing:1px;

    font-family:var(--serif);

}


/* ===========================================================
   CENTER
=========================================================== */

.product-stage{
    

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    max-height:520px;

    min-height:520px;


}

.background-word{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:var(--serif);

    font-size:9vw;

    letter-spacing:-6px;

    color:#fff;

    opacity:.025;

    white-space:nowrap;

    pointer-events:none;

    user-select:none;
    
    z-index:6;

}

.ambient-light{

   position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.18),
            transparent 70%
        );

    filter:blur(70px);

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;

    z-index:1;


}

#collection-image{

    position:absolute;

    inset:0;

    margin:auto;

    width:auto;

    max-width:460px;

    max-height:770px;

    object-fit:contain;

}


/* ===========================================================
   RIGHT
=========================================================== */

.collection-panel{

    max-width:460px;

}

.collection-number{

    display:block;

    font-size:12px;

    letter-spacing:4px;

    opacity:.45;

    margin-bottom:22px;

}

#collection-title{

    font-family:var(--serif);

    font-size:var(--collection-title);

    line-height:.95;

    letter-spacing:-2px;

    font-weight:300;

    margin-bottom:22px;

}

#collection-headline{

    font-size:var(--collection-headline);

    line-height:1.6;

    font-weight:400;

    margin-bottom:24px;

}

#collection-description{

    color:var(--collection-text);

    line-height:2;

    font-size:15px;

    margin-bottom:55px;

}


/* ===========================================================
   PRODUCT SWITCHER
=========================================================== */

.product-switcher{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.product-option{

    position:relative;

    background:none;

    border:0;

    color:#fff;

    cursor:pointer;

    width:max-content;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.35;

    transition:.35s;

}

.product-option::after{

    content:"";

    display:block;

    width:0;

    height:1px;

    background:#fff;

    margin-top:8px;

    transition:.35s;

}

.product-option.active{

    opacity:1;

}

.product-option.active::after{

    width:100%;

}

.product-option:hover{

    opacity:1;

}

.product-option:hover::after{

    width:100%;

}


/* ===========================================================
   META
=========================================================== */

.collection-meta{

    margin-top:45px;

}

#collection-size{

    font-size:12px;

    letter-spacing:4px;

    opacity:.45;

}


/* ===========================================================
   CTA
=========================================================== */

.discover-btn{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:60px;

    background:none;

    border:0;

    color:#fff;

    cursor:pointer;

    letter-spacing:3px;

    font-size:12px;

    text-transform:uppercase;

}

.discover-btn svg{

    transition:.45s;

}

.discover-btn:hover svg{

    transform:translateX(8px);

}

.footer-hero{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:140px;
}
.footer-eyebrow{

    color:#c8a96b;

    letter-spacing:.3em;

    font-size:11px;

    margin-bottom:30px;
}

.footer-big-text{

    font-size:clamp(60px,10vw);

    line-height:.9;

    letter-spacing:-.05em;

    margin-bottom:35px;
}

.footer-description{

    color:rgba(255,255,255,.6);

    max-width:500px;

    margin:auto;
}

/* ===========================================================
   COLLECTION MOBILE V2
===========================================================*/

@media screen and (max-width:1320px){

    .ritual-collection{

        padding:90px 0 70px;
        
        touch-action:pan-y;

    }

    .ritual-container{

        display:flex;

        flex-direction:column;

        align-items:center;

        width:min(92%,500px);

        margin:auto;

        gap:28px;

    }

    /* ======================
       PRODUCT
    ====================== */

    .product-stage{

        order:1;

        width:100%;


        display:flex;

        justify-content:center;

        align-items:center;

        margin-top: -26px;
        
        max-height:300px;

    min-height:390px;
    
    aspect-ratio:1 / 1.35;

    overflow:hidden;

    }
    
    .product-stage img{

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;
    
    z-index:10;

}

    #collection-image{

        width:min(72vw,260px);

        max-width:260px;

    }

    .ambient-light{

        width:260px;

        height:260px;

        filter:blur(80px);

        opacity:.65;

    }

    .background-word{

        display:none;

    }

    /* ======================
       COLLECTION INFO
    ====================== */

    .collection-panel{

        order:2;

        width:100%;

        max-width:100%;

        text-align:center;

    }

    .collection-number{

        display:none;

    }
    
    .urunbaslik{

        display:block;

        margin-bottom:10px;

        letter-spacing:4px;

        font-size:11px;

        opacity:.45;

    }

    #collection-title{

        font-size:34px;

        line-height:1;

        margin-bottom:14px;

    }

    #collection-headline{

        font-size:17px;

        line-height:1.6;

        margin-bottom:18px;

    }

    #collection-description{

        width:100%;

        max-width:340px;

        margin:0 auto 30px;

        font-size:14px;

        line-height:1.9;

        color:rgba(255,255,255,.72);

    }

    /* ======================
       PRODUCT TABS
    ====================== */

    .product-switcher{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    width:100%;

    margin:0 auto 26px;

}

.product-option{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:160px;

    padding:12px 18px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:999px;

    text-align:center;

    font-size:11px;

    letter-spacing:2px;

}

    .product-option::after{

        display:none;

    }

    .product-option.active{

    background:#fff;

    color:#111;

    border-color:#fff;

    transform:scale(1.03);

    box-shadow:0 10px 30px rgba(255,255,255,.08);

}

    .collection-meta{

        margin-top:0;

        margin-bottom:35px;

        text-align:center;

    }

    /* ======================
       CTA
    ====================== */

    .discover-btn{

        margin:auto;

        display:flex;

        justify-content:center;

        align-items:center;

        gap:12px;
        
        margin-top: 30px;

    }

    /* ======================
       FRAGRANCE LIST
    ====================== */

    .fragrance-nav{

        order:3;

        width:100%;

        margin-top:10px;

    }

    .section-label{

        display:none;

    }

    .fragrance-nav ul{

        display:flex;

        gap:12px;

        overflow-x:auto;

        overflow-y:hidden;

        padding:0 4px 10px;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

    }

    .fragrance-nav ul::-webkit-scrollbar{

        display:none;

    }

    .fragrance-nav li{

        flex:none;

        margin:0;

    }

    .fragrance-item{

        padding:12px 18px;

        border-radius:30px;

        border:1px solid rgba(255,255,255,.08);

        background:transparent;

        transform:none !important;

        opacity:1;

    }

    .fragrance-item.active{

        background:white;

        color:#111;

    }

    .fragrance-index{

        display:none;

    }

    .fragrance-name{

        font-size:13px;

        white-space:nowrap;

        letter-spacing:1px;

    }

}

/* MOBILE ARROWS */

.mobile-fragrance-nav{

    display:none;

}

@media(max-width:1320px){
    
    .mobile-intro{

    max-width:280px;

    margin:0;

    font-size:12px;

    line-height:1.7;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:rgba(255,255,255,.55);

}

.mobile-counter{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    font-size:11px;

    letter-spacing:3px;

    color:rgba(255,255,255,.5);

}

.mobile-fragrance-switch{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    width:100%;

}

.mobile-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

    .mobile-fragrance-nav{

        display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    width:100%;

    text-align:center;

    }

    .mobile-arrow{

        background:none;

        border:none;

        color:#fff;

        font-size:24px;

        cursor:pointer;

    }

    #mobile-fragrance-name{

        min-width:170px;

        text-align:center;

        letter-spacing:2px;

        font-size:14px;

        text-transform:uppercase;

    }

    /* Eski yatay listeyi gizle */

    .fragrance-nav{

        display:none;

    }
    
/* ===========================
   MOBILE PROGRESS
=========================== */

.mobile-fragrance-progress{

    display:none;

}

    .mobile-fragrance-progress{

        display:flex;

        justify-content:center;

        align-items:center;

        gap:16px;

        margin-top:-10px;

        margin-bottom:26px;

    }

    .mobile-dots{

        display:flex;

        gap:8px;

    }

    .mobile-dots .dot{

        width:6px;

        height:6px;

        border-radius:50%;

        background:rgba(255,255,255,.18);

        transition:.35s;

    }

    .mobile-dots .dot.active{

        background:#fff;

        transform:scale(1.45);

    }

    .mobile-counter{

        font-size:11px;

        letter-spacing:2px;

        opacity:.55;

    }
}

@keyframes ambientFloat{

    0%{

        transform:
            translate(-50%,-50%)
            scale(1);

    }

    50%{

        transform:
            translate(-50%,-52%)
            scale(1.08);

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(1);

    }

}

.ambient-light{

    animation:
        ambientFloat 8s ease-in-out infinite;

}

@keyframes sparkleFloat{

    0%{

        transform:
            translateY(20px)
            scale(.5);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        opacity:.4;

    }

    100%{

        transform:
            translateY(-40px)
            scale(1.6);

        opacity:0;

    }

}

@keyframes moleculeFloat{

    0%{

        transform:
            translate(0,30px)
            scale(.4);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        opacity:.8;

    }

    100%{

        transform:
            translate(
                calc(var(--x,20) * 1px),
                -180px
            )
            scale(1.8);

        opacity:0;

    }

}

@keyframes goldParticle {

    0% {
        transform:
            translateY(30px)
            translateX(0)
            scale(.5);
        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    100% {
        transform:
            translateY(-180px)
            translateX(var(--drift))
            scale(1.6);
        opacity: 0;
    }
}