/**
 * VPS Page Styles
 * Styling for VPS hosting page hero section and components
 */

/* ========================================
   VPS HERO SECTION - DARK HEADER UYUMLU
   ======================================== */

.vps-hero {
    position: relative;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    overflow-x: hidden;
    min-height: 750px !important;
    display: flex;
    align-items: center;
    /* Pull the section up behind the header */
    padding-top: 240px !important;
    margin-top: -200px !important;
}

/* ========================================
   RESPONSIVE - MOBILE FIXES
   ======================================== */

@media (max-width: 768px) {
    .vps-hero {
        min-height: auto;
        padding-top: 180px !important;
        margin-top: -160px !important;
        padding-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    .vps-hero {
        padding-top: 160px !important;
        margin-top: -140px !important;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-10px) translateX(5px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}

@keyframes pulse-glow-cyan {
    0% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(6, 182, 212, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
    }
}

@keyframes pulse-glow-emerald {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* ========================================
   VPS PLANS MENU
   ======================================== */

.vps-plans-menu {
    position: relative;
    z-index: 20;
}

.vps-plans-menu .grid a {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.vps-plans-menu .grid a:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08);
}

/* ========================================
   VPS PRICING CARDS
   ======================================== */

.vps-pricing-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vps-pricing-card:hover {
    transform: translateY(-5px);
}

/* ========================================
   FAQ ACCORDION
   ======================================== */

.vps-faq button i.rotate-180 {
    transform: rotate(180deg);
}

/* ========================================
   HERO BUTTON HOVER STATES
   ======================================== */

/* Keep text white on hover for hero buttons */
.vps-hero a:hover,
.vps-hero button:hover {
    color: #ffffff !important;
}

/* Ensure gradient buttons keep white text */
.vps-hero a.bg-gradient-to-r:hover,
.vps-hero a[class*="from-cyan"]:hover,
.vps-hero a[class*="from-emerald"]:hover {
    color: #ffffff !important;
}

/* Secondary/outline buttons hover */
.vps-hero a.bg-white\/10:hover {
    color: #ffffff !important;
}

/* ========================================
   FAQ SECTION DARK THEME (WordPress Style)
   ======================================== */

.vps-faq-section {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

.vps-faq-section .faq-item {
    border-bottom: 1px solid rgba(55, 65, 81, 1);
}

.vps-faq-section .faq-item:last-child {
    border-bottom: none;
}

.vps-faq-section .faq-header {
    transition: background-color 0.3s ease;
}

.vps-faq-section .faq-header:hover {
    background-color: rgba(31, 41, 55, 0.5);
}

.vps-faq-section .faq-header.active {
    background-color: rgba(31, 41, 55, 1);
}

.vps-faq-section .faq-icon {
    transition: transform 0.3s ease;
}

.vps-faq-section .faq-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Hover float effect */
.hover-float {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* ========================================
   İÇERİK BÖLÜMLERİ: RENK + HAREKET
   (yalnızca transform/opacity — performans dostu)
   ======================================== */

/* Kayarken beliren öğeler (JS: IntersectionObserver .vp-in ekler) */
.vp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.vp-reveal.vp-in {
    opacity: 1;
    transform: none;
}

/* Kart hover: yükselme + renkli gölge */
.vp-lift {
    transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
        box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.vp-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px rgba(8, 145, 178, 0.14);
}

/* İkon kutusu: kart hover'ında hafif büyüme */
.vp-icon {
    transition: transform 0.35s ease;
}

.vp-lift:hover .vp-icon {
    transform: scale(1.1) rotate(-4deg);
}

/* Başlık altı gradyan çizgi */
.vp-bar {
    display: block;
    width: 72px;
    height: 5px;
    border-radius: 9999px;
    margin: 1.1rem auto 0;
    background: linear-gradient(90deg, #06b6d4, #14b8a6);
}

.vp-bar-light {
    background: linear-gradient(90deg, #22d3ee, #2dd4bf);
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
    .vp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .vp-lift,
    .vp-icon,
    .animate-float {
        transition: none;
        animation: none;
    }
}

/* "Neden Bizim VPS?" bento kartları: kaynak/hız barları
   (bar genişlikleri öğe görünüme girince dolar) */
.vp-meter {
    width: 0;
    transition: width 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.35s;
}

.vp-reveal.vp-in .vp-meter {
    width: var(--vp-w, 100%);
}

@media (prefers-reduced-motion: reduce) {
    .vp-meter {
        width: var(--vp-w, 100%);
        transition: none;
    }
}