/* Slider Page Styles */
.slider-page{width:100vw;height:100vh;overflow:hidden;position:relative;background:#1a1a1a}

.slider-container{width:100%;height:100%;position:relative}

.slider-side{position:absolute;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}

.emotional-side{right:0;background:linear-gradient(135deg,#FF1493 0%,#C2185B 25%,#9C27B0 50%,#6A1B9A 75%,#4A148C 100%);z-index:1}
.emotional-side::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,0.12) 0%,transparent 60%)}
.emotional-side .floating-shapes{position:absolute;inset:0;overflow:hidden}
.emotional-side .shape{position:absolute;border-radius:50%;background:rgba(255,255,255,0.1)}

.traditional-side{left:0;background:linear-gradient(135deg,#F5F0EB 0%,#E8E2DA 30%,#D5CEC5 60%,#C2B9AD 100%);z-index:2;clip-path:inset(0 50% 0 0)}
.traditional-side::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,rgba(255,255,255,0.4) 0%,transparent 60%)}

.side-content{text-align:center;z-index:5;padding:2rem;max-width:500px}
.side-content h2{font-family:'Aref Ruqaa',serif;font-size:clamp(1.8rem,4vw,3rem);margin-bottom:1rem;line-height:1.4}
.side-content p{font-size:clamp(0.9rem,2vw,1.1rem);margin-bottom:2rem;opacity:0.85;line-height:1.8}

.emotional-side .side-content{color:#fff}
.emotional-side .side-content h2{text-shadow:0 2px 20px rgba(0,0,0,0.2)}
.traditional-side .side-content{color:#2C2C2C}

.slider-handle{position:absolute;top:0;bottom:0;width:4px;background:rgba(255,255,255,0.9);z-index:10;left:50%;transform:translateX(-50%);cursor:ew-resize;transition:none}
.slider-handle::before{content:'';position:absolute;top:0;bottom:0;left:-20px;right:-20px}

.handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.95);box-shadow:0 4px 20px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;transition:transform var(--t-normal),box-shadow var(--t-normal)}
.handle-circle:hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 4px 30px rgba(0,0,0,0.3)}
.handle-arrows{display:flex;gap:4px;color:#666;font-size:1.2rem;font-weight:700;user-select:none}

.slider-logo{position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:5;text-align:center}
.slider-logo h1{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(2rem,4vw,3rem);letter-spacing:2px}
.slider-logo .tagline{font-family:'Aref Ruqaa',serif;font-size:0.9rem;margin-top:4px}
.slider-logo-light h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,0.3)}
.slider-logo-light .tagline{color:rgba(255,255,255,0.8)}
.slider-logo-dark h1{color:#2C2C2C;text-shadow:none}
.slider-logo-dark .tagline{color:rgba(44,44,44,0.6)}

.enter-btn{font-size:1.1rem;padding:14px 48px;letter-spacing:0.5px}
.enter-btn-emotional{background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.6);color:#fff;backdrop-filter:blur(10px)}
.enter-btn-emotional:hover{background:rgba(255,255,255,0.35);border-color:#fff;box-shadow:0 0 30px rgba(255,255,255,0.3)}
.enter-btn-traditional{background:var(--trad-accent);color:#fff}
.enter-btn-traditional:hover{background:var(--trad-accent-hover);box-shadow:var(--shadow-md)}

@media(max-width:768px){
  .side-content h2{font-size:1.6rem}
  .side-content p{font-size:0.9rem}
  .enter-btn{padding:12px 36px;font-size:1rem}
  .handle-circle{width:44px;height:44px}
  .slider-logo h1{font-size:1.8rem}
}