/* Cam Efekt Ayarları */
.glass-panel {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* NAVBAR SEKME TASARIMLARI */
.nav-tab {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.active-tab { color: #22d3ee; border-bottom-color: #22d3ee; }
.inactive-tab { color: #94a3b8; }
.inactive-tab:hover { color: #f8fafc; }

/* EJDERHA ORTAK AYARI */
.dragon { position: absolute; top: 0; left: 0; will-change: transform; }

@keyframes wander-1 { 0% { transform: translate(-10vw, 10vh); } 25% { transform: translate(40vw, 80vh); } 50% { transform: translate(110vw, 20vh); } 75% { transform: translate(50vw, -10vh); } 100% { transform: translate(-10vw, 10vh); } }
.dragon-1 { animation: wander-1 45s ease-in-out infinite; animation-delay: -15s; }

@keyframes wander-2 { 0% { transform: translate(110vw, 70vh) scaleX(-1); } 25% { transform: translate(70vw, 20vh) scaleX(-1); } 50% { transform: translate(-10vw, 80vh) scaleX(-1); } 75% { transform: translate(30vw, 10vh) scaleX(-1); } 100% { transform: translate(110vw, 70vh) scaleX(-1); } }
.dragon-2 { animation: wander-2 50s ease-in-out infinite; animation-delay: -28s; }

@keyframes wander-3 { 0% { transform: translate(15vw, -10vh); } 33% { transform: translate(80vw, 50vh); } 66% { transform: translate(20vw, 85vh); } 100% { transform: translate(15vw, -10vh); } }
.dragon-3 { animation: wander-3 55s ease-in-out infinite; animation-delay: -5s; }

@keyframes wander-4 { 0% { transform: translate(110vw, 110vh) scaleX(-1); } 33% { transform: translate(40vw, 30vh) scaleX(-1); } 66% { transform: translate(-10vw, 70vh) scaleX(-1); } 100% { transform: translate(110vw, 110vh) scaleX(-1); } }
.dragon-4 { animation: wander-4 40s ease-in-out infinite; animation-delay: -22s; }

@keyframes wander-5 { 0% { transform: translate(-10vw, 60vh); } 20% { transform: translate(30vw, 20vh); } 40% { transform: translate(80vw, 80vh); } 60% { transform: translate(110vw, 40vh); } 80% { transform: translate(50vw, 10vh); } 100% { transform: translate(-10vw, 60vh); } }
.dragon-5 { animation: wander-5 35s ease-in-out infinite; animation-delay: -32s; }

/* BÜYÜLÜ YUMURTALAR */
.egg { position: absolute; will-change: transform; opacity: 0.65; }
@keyframes levitate { 0% { transform: translateY(0) rotate(var(--rot)); } 50% { transform: translateY(-15px) rotate(var(--rot)); } 100% { transform: translateY(0) rotate(var(--rot)); } }
.egg-1 { top: 75%; left: 12%; --rot: -10deg; animation: levitate 8s ease-in-out infinite; }
.egg-2 { top: 22%; left: 82%; --rot: 15deg; animation: levitate 10s ease-in-out infinite; animation-delay: -2s; }
.egg-3 { top: 18%; left: 18%; --rot: -5deg; animation: levitate 9s ease-in-out infinite; animation-delay: -5s; }
.egg-4 { top: 80%; left: 78%; --rot: 10deg; animation: levitate 11s ease-in-out infinite; animation-delay: -7s; }

/* --- YENİ: TELEFON KASASI VE SLIDER TASARIMI --- */
.phone-mockup {
    position: relative;
    width: 280px;
    height: 580px;
    border: 12px solid #0f172a; /* Siyah/Lacivert Kasa */
    border-radius: 40px;
    background-color: #000;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.1) inset;
    overflow: hidden;
    margin: 0 auto;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: #0f172a;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 20;
}

.slider-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    border: 1px solid rgba(255,255,255,0.1);
    transition: background 0.3s;
}
.slider-btn:hover { background: rgba(34, 211, 238, 0.8); }
.slider-btn-prev { left: 8px; }
.slider-btn-next { right: 8px; }

.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 30;
}
.slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: all 0.3s;
}
.slider-dot.active {
    background: #22d3ee;
    transform: scale(1.3);
}