:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-gradient: linear-gradient(to right, #2563eb, #3b82f6);
    --secondary-color: #f8fafc;
    --accent-color: #c2410c;
    --background-dark: #ffffff;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    --border-radius: 16px;
    --box-shadow-soft: 0 4px 6px rgba(0,0,0,0.05);
    --box-shadow-strong: 0 10px 25px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.04);
    --transition-default: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
    max-width: 100%;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-dark);
    line-height: 1.6;
}

.container { max-width: 1200px; }

.header-topbar { background-color: #1e293b; color: #e2e8f0; padding: 0.5rem 0; font-size: 0.85rem; }
.header-topbar a { color: #e2e8f0; text-decoration: none; transition: var(--transition-default); }
.header-topbar a:hover { color: #ffffff; }
.promo-banner { background-color: var(--accent-color); color: white; text-align: center; padding: 0.6rem 0; font-weight: 500; }

header.main-header {
    background-color: #ffffff;
    box-shadow: var(--box-shadow-soft);
    z-index: 1030;
}
.navbar { padding-top: 1rem; padding-bottom: 1rem; background-color: #ffffff; }
.navbar-brand img { transition: var(--transition-default); }
.navbar-brand img:hover { transform: scale(1.05); }
.navbar-nav .nav-link { color: var(--text-dark); font-weight: 500; padding: 0.5rem 1rem; margin: 0 0.25rem; border-radius: 8px; transition: var(--transition-default); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary-color); font-weight: 600; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); font-weight: 500; padding: 0.6rem 1.5rem; border-radius: 8px; transition: var(--transition-default); }
.btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-3px); box-shadow: var(--box-shadow-strong); }
.btn-accent { background-color: var(--accent-color); border-color: var(--accent-color); color: #ffffff; font-weight: 500; padding: 0.6rem 1.5rem; border-radius: 8px; transition: var(--transition-default); }
.btn-accent:hover { background-color: #9a3412; border-color: #9a3412; color: #ffffff; transform: translateY(-3px); box-shadow: 0 4px 15px rgba(194, 65, 12, 0.4); }

.dropdown-menu.mega-menu {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-strong);
    padding: 1.5rem;
    margin-top: 0.5rem !important;
}
.mega-menu-header {
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}
.mega-menu-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.mega-menu-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
}
.mega-menu-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition-default);
    text-decoration: none;
    color: var(--text-dark);
}
.mega-menu-item:hover {
    background-color: var(--secondary-color);
    transform: translateX(5px);
}
.mega-menu-item img {
    width: 56px;
    height: 56px;
    margin-right: 1rem;
    object-fit: contain;
}
.mega-menu-item .item-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.mega-menu-item .item-price {
    font-size: 0.85rem;
    color: var(--text-light);
}
.mega-menu-item .item-price span {
    color: var(--primary-color);
    font-weight: 600;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
}

@media (max-width: 991.98px) {
    .dropdown-menu.mega-menu {
        width: 100%;
        left: 0;
        transform: translateX(0);
        box-shadow: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        padding: 1rem;
    }
    .mega-menu-header {
        margin-bottom: 1rem;
    }
    .mega-menu-item {
        padding: 0.75rem;
    }
    .mega-menu-item:not(:last-child) {
        margin-bottom: 0.5rem;
    }
}


#hero-slider .carousel, #hero-slider .carousel-inner, #hero-slider .carousel-item { height: 550px; }
#hero-slider .carousel-item { background-size: cover; background-position: center; }
#hero-slider .carousel-item::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0.1) 100%); }
#hero-slider .carousel-caption { text-align: left; left: 10%; right: auto; bottom: 50%; transform: translateY(50%); width: 45%; z-index: 2; color: #ffffff; }
#hero-slider .carousel-caption .lead { font-weight: 300; font-size: 1.2rem; }
#hero-slider .carousel-caption .display-4,
#hero-slider .carousel-caption .lead,
#hero-slider .carousel-caption .btn {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
#hero-slider .carousel-item.active .carousel-caption .display-4 { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
#hero-slider .carousel-item.active .carousel-caption .lead { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
#hero-slider .carousel-item.active .carousel-caption .btn { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }

#why-us .feature-item-list .icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: var(--primary-gradient); color: #ffffff; font-size: 1.5rem; }
#why-us .feature-item-list h5 { font-weight: 600; }
#why-us .feature-item-list p { color: var(--text-light); font-size: 0.95rem; }

.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary-gradient);
    border-radius: 2px;
}
.section-title p { font-size: 1.1rem; color: var(--text-light); max-width: 600px; margin: 0 auto; font-weight: 400; }
a.service-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}
.service-card { background-color: #ffffff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2.5rem; text-align: center; transition: var(--transition-default); height: 100%; display: flex; flex-direction: column; box-shadow: var(--box-shadow-soft); position: relative; overflow: hidden; }
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-gradient);
    transition: height 0.3s ease;
}
.service-card:hover::before {
    height: 8px;
}
.service-card.vds::before { background: linear-gradient(to right, #3b82f6, #60a5fa); }
.service-card.ryzen::before { background: linear-gradient(to right, #ef4444, #f87171); }
.service-card.fivem::before { background: linear-gradient(to right, #10b981, #34d399); }
.service-card.minecraft::before { background: linear-gradient(to right, #8b5cf6, #a78bfa); }
.service-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-strong); }
.service-card .service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    transition: var(--transition-default);
    object-fit: contain;
}
.service-card:hover .service-icon { transform: scale(1.1); }

.service-card .service-title { font-size: 1.25rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.75rem; }
.service-card .service-description { color: var(--text-light); font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; }
.service-card .service-price { font-size: 1.75rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1.5rem; }
.service-card .service-price span { font-size: 0.9rem; font-weight: 400; color: var(--text-light); }

.service-card .game-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
    font-size: 0.9rem;
    flex-grow: 1;
}
.service-card .game-features li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--text-light);
}
.service-card .game-features i {
    color: var(--primary-color);
    margin-right: 0.75rem;
    width: 16px;
    text-align: center;
}

.game-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    box-shadow: var(--box-shadow-soft);
    transition: var(--transition-default);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-decoration: none;
}
.game-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    z-index: 1;
}
.game-card > * {
    position: relative;
    z-index: 2;
}
.game-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.game-card-price {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.8);
}
.game-card-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    align-self: flex-start;
    background-color: var(--accent-color);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: var(--transition-default);
}
.game-card:hover {
    transform: scale(1.03);
    box-shadow: var(--box-shadow-strong);
}
.game-card:hover .game-card-link {
    background-color: #e66000;
}

#yorumlar { position: relative; }
.testimonial-card { background-color: #ffffff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2.5rem; height: 100%; display: flex; flex-direction: column; transition: var(--transition-default); position: relative; box-shadow: var(--box-shadow-soft); }
.testimonial-card::before { content: '\f10d'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 1.5rem; left: 1.5rem; font-size: 2rem; color: var(--primary-color); opacity: 0.1; }
.testimonial-card .testimonial-body { font-style: italic; color: var(--text-light); margin-bottom: 1.5rem; flex-grow: 1; }
.testimonial-card .testimonial-author { display: flex; align-items: center; }
.testimonial-card .testimonial-author img { width: 50px; height: 50px; border-radius: 50%; margin-right: 1rem; border: 2px solid var(--primary-color); }
.testimonial-card .author-info h5 { font-size: 1rem; font-weight: 600; color: var(--text-dark); margin: 0; }
.testimonial-card .author-info p { font-size: 0.9rem; color: var(--text-light); margin: 0; }
.testimonial-card .rating { color: #ffc107; margin-bottom: 1rem; }

#faq { padding: 5rem 0; }
.accordion-item { background-color: #ffffff; border: 1px solid var(--border-color); border-radius: var(--border-radius) !important; margin-bottom: 1rem; box-shadow: var(--box-shadow-soft); transition: var(--transition-default); overflow: hidden; }
.accordion-item:hover { box-shadow: var(--box-shadow-strong); transform: translateY(-5px); }
.accordion-header .accordion-button { font-weight: 600; font-size: 1.1rem; color: var(--text-dark); background-color: #ffffff; border-radius: var(--border-radius) !important; box-shadow: none; }
.accordion-header .accordion-button:not(.collapsed) { color: var(--primary-color); background-color: rgba(59, 130, 246, 0.05); }
.accordion-body { color: var(--text-light); line-height: 1.7; padding: 1.5rem; }

footer { background-color: var(--background-dark); color: var(--text-dark); border-top: 1px solid var(--border-color); }
footer .footer-brand img { height: 40px; margin-bottom: 1.5rem; }
footer .footer-text { color: var(--text-light); margin-bottom: 1.5rem; max-width: 300px; }
footer .footer-title { font-size: 1.1rem; font-weight: 600; color: var(--text-dark); margin-bottom: 1.5rem; }
footer .footer-links { list-style: none; padding: 0; }
footer .footer-links li { margin-bottom: 0.75rem; }
footer .footer-links a { color: var(--text-light); text-decoration: none; transition: var(--transition-default); }
footer .footer-links a:hover { color: var(--primary-color); padding-left: 5px; }
footer .social-icons a { color: var(--text-light); font-size: 1.2rem; margin-right: 1rem; transition: var(--transition-default); }
footer .social-icons a:hover { color: var(--primary-color); transform: scale(1.1); }
footer .footer-bottom { border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 2rem; color: var(--text-light); font-size: 0.9rem; }
.footer-logos img { filter: grayscale(100%); opacity: 0.7; transition: var(--transition-default); }
.footer-logos img:hover { filter: grayscale(0%); opacity: 1; }

@media (max-width: 991.98px) {
    #hero-slider .carousel-caption {
        width: 70%;
        left: 5%;
        right: auto;
    }
}

@media (max-width: 767.98px) {
    #hero-slider .carousel, #hero-slider .carousel-inner, #hero-slider .carousel-item {
        height: 450px;
    }
    #hero-slider .carousel-caption {
        width: 90%;
        bottom: 50%;
        transform: translateY(50%);
        text-align: center;
        left: 5%;
    }
    #hero-slider .carousel-caption .display-4 {
        font-size: 2rem;
    }
    #hero-slider .carousel-caption .lead {
        font-size: 1rem;
    }
    .section-title h2 {
        font-size: 2rem;
    }
}