/* ============================================================
   CSS BILGI DOSYASI
   ------------------------------------------------------------
   Yapimci     : Ergun Bayram
   Iletisim    : ergun@bmthema.com
   Versiyon    : 1.3
   Aciklama    : Bu dosya, proje icinde kullanilan ozel efektler,
                 yardimci siniflar ve ek duzenlemeleri icerir.
                 Temel ve derlenmis stiller Tailwind tarafindan
                 olusturulur ve 'custom.css' dosyasinda bulunur.
   ------------------------------------------------------------
   NOT: Asagidaki blokta stillerin baslangic referanslari yer alir.
   ------------------------------------------------------------
   STYLE LISTESI (Siralama)
   1. Menu          -> #Menu
   2. Slider        -> #Slider
   3. Footer        -> #Footer
   4. OnecikanPaketler  -> #OnecikanPaketler
   5. Eklenti3      -> #Eklenti3
   6. Headdb        -> #headdb
   7. Hosting PKT   -> #hostingpaketleri
   ============================================================ */
   
/*=========================
        #Menu 
=========================*/
        body {
            font-family: 'Nunito Sans', system-ui, sans-serif;
        }


        @keyframes cartPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
        }

        .cart-badge-pulse {
            animation: cartPulse 0.3s ease-in-out;
        }

        @keyframes notificationPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        .notification-badge-pulse {
            animation: notificationPulse 0.3s ease-in-out;
        }

        .top-bar-menu-item {
            position: relative;
            overflow: hidden;
            display: inline-flex;
        }

        .top-bar-menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%
            );
            transition: left 0.8s ease;
            pointer-events: none;
        }

        .top-bar-menu-item:hover::before {
            left: 100%;
        }

        .icon-container {
            position: relative;
            display: inline-block;
        }

        .icon-container .icon-default {
            transition: opacity 0.3s ease;
            opacity: 1;
        }

        .icon-container .icon-hover {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .top-bar-menu-item:hover .icon-container .icon-default {
            opacity: 0;
        }

        .top-bar-menu-item:hover .icon-container .icon-hover {
            opacity: 1;
        }

        .shimmer-button {
            position: relative;
            overflow: hidden;
        }

        .shimmer-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%
            );
            transition: left 0.8s ease;
            pointer-events: none;
            z-index: 0;
        }

        .shimmer-button:hover::before {
            left: 100%;
        }

        .shimmer-button > * {
            position: relative;
            z-index: 1;
        }

        .shimmer-button:hover .icon-container .icon-default {
            opacity: 0;
        }

        .shimmer-button:hover .icon-container .icon-hover {
            opacity: 1;
        }

        .dropdown-menu-item {
            position: relative;
            overflow: hidden;
        }

        .dropdown-menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%
            );
            transition: left 0.8s ease;
            pointer-events: none;
            z-index: 0;
        }

        .dropdown-menu-item:hover::before {
            left: 100%;
        }

        .dropdown-menu-item > * {
            position: relative;
            z-index: 1;
        }

        .dropdown-menu-item:hover .icon-container .icon-default {
            opacity: 0;
        }

        .dropdown-menu-item:hover .icon-container .icon-hover {
            opacity: 1;
        }

        .icon-container.dropdown-open .icon-default {
            opacity: 0 !important;
        }

        .icon-container.dropdown-open .icon-hover {
            opacity: 1 !important;
        }

        .mega-menu-item {
            position: relative;
            overflow: hidden;
        }

        .mega-menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%
            );
            transition: left 0.6s ease;
            pointer-events: none;
            z-index: 0;
        }

        .mega-menu-item:hover::before {
            left: 100%;
        }

        .mega-menu-item > * {
            position: relative;
            z-index: 1;
        }

        @keyframes shine {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(100%);
            }
        }

        .icon-box-shine {
            position: relative;
            overflow: hidden;
        }
        
        .icon-box-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.6) 50%,
                transparent 100%
            );
            transition: left 0.7s ease-out;
            pointer-events: none;
            z-index: 20;
        }
        
        .mega-menu-item:hover .icon-box-shine::after {
            left: 100%;
        }

        .mega-menu-item.tw-border-r {
            border-right: 1px solid rgb(229 231 235) !important;
        }

        .mega-menu-item.tw-border-b {
            border-bottom: 1px solid rgb(229 231 235) !important;
        }

        .mega-menu-item.tw-border-t {
            border-top: 1px solid rgb(229 231 235) !important;
        }

        .mega-menu-item.tw-border-l {
            border-left: 1px solid rgb(229 231 235) !important;
        }

        .tw-border-gray-200 {
            border-color: rgb(229 231 235) !important;
        }

        .mobile-accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0;
        }
        .mobile-accordion-content.open { /* Changed from .tw-block to .open for consistency with JS */
            opacity: 1;
        }
        .accordion-icon.rotate-180 {
            transform: rotate(180deg);
        }
/*=========================
        #Slider 
=========================*/
        @keyframes shine {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }
        .shine-effect {
            position: relative;
            overflow: hidden;
        }
        .shine-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }
        .shine-effect:hover::after {
            animation: shine 0.8s ease-in-out;
        }
        /* Added custom hover styles for icon switching */
        .btn-icon-default {
            display: inline-block;
        }
        .btn-icon-hover {
            display: none;
        }
        .shine-effect:hover .btn-icon-default {
            display: none;
        }
        .shine-effect:hover .btn-icon-hover {
            display: inline-block;
        }

        .card-hover:hover {
            background-color: rgb(31 41 55 / 0.5);
            border-color: rgb(59 130 246 / 0.4);
            transform: scale(1.02);
        }

        /* %50 OFF ve login kutularına hafif ışıltı efekti eklendi */
        .shimmer-effect {
            position: relative;
            overflow: hidden;
        }

        .shimmer-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.03),
                transparent
            );
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }

        @keyframes gradient {
            /* existing code */
        }
        
        /* Added typewriter effect styles */
        .typewriter-text {
            display: inline-block;
            border-right: 2px solid #d91e48;
            animation: blink 0.7s infinite;
        }
        
        @keyframes blink {
            0%, 50% {
                border-color: #d91e48;
            }
            51%, 100% {
                border-color: transparent;
            }
        }
/*=========================
        #Footer 
=========================*/
       .hostingdb-footer {
            margin-top: auto;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        
        .hostingdb-footer-underline {
            border-image: linear-gradient(to right, rgb(55, 65, 81), transparent) 1;
        }
        
        .hostingdb-footer-menu-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }
        
        .hostingdb-footer-menu-content.hostingdb-footer-active {
            max-height: 500px;
        }
        
        .hostingdb-footer-menu-icon {
            transition: transform 0.3s ease;
        }
        
        .hostingdb-footer-menu-icon.hostingdb-footer-rotated {
            transform: rotate(180deg);
        }
        
        @media (min-width: 768px) {
            .hostingdb-footer-menu-content {
                max-height: none !important;
            }
        }
        
        .hostingdb-footer-link-hover {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .hostingdb-footer-link-hover::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background: linear-gradient(to right, #d91e48, transparent);
            transition: width 0.3s ease;
        }
        
        .hostingdb-footer-link-hover:hover::after {
            width: 100%;
        }
        
        .hostingdb-social-btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .hostingdb-social-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(217, 30, 72, 0.3);
        }
/*=========================
        #OnecikanPaketler 
=========================*/
        .hostedbpkt-package-card {
            transition: all 0.3s ease;
        }
        
        .hostedbpkt-package-card:hover {
            background: #0f172a;
            color: white;
            transform: translateY(-2px);
        }
        
        .hostedbpkt-package-card:hover .hostedbpkt-card-title,
        .hostedbpkt-package-card:hover .hostedbpkt-card-price,
        .hostedbpkt-package-card:hover .hostedbpkt-card-desc {
            color: white;
        }
        
        .hostedbpkt-package-card:hover .hostedbpkt-card-btn {
            background: linear-gradient(135deg, #d91e48 0%, #b71a3d 100%);
        }
        
        .hostedbpkt-package-icon {
            width: 80px;
            height: 80px;
            transition: transform 0.3s ease;
        }
        
        @media (min-width: 640px) {
            .hostedbpkt-package-icon {
                width: 96px;
                height: 96px;
            }
        }
        
        .hostedbpkt-package-card:hover .hostedbpkt-package-icon {
            transform: scale(1.05);
        }
        
        .hostedbpkt-icon-wrapper {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #d91e48 0%, #b71a3d 100%);
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        
        @media (min-width: 640px) {
            .hostedbpkt-icon-wrapper {
                width: 96px;
                height: 96px;
                border-radius: 24px;
            }
        }
        
        .hostedbpkt-package-card:hover .hostedbpkt-icon-wrapper {
            background: linear-gradient(135deg, #e53560 0%, #d91e48 100%);
        }
        
        .hostedbpkt-card-btn {
            transition: all 0.3s ease;
        }
        
        .hostedbpkt-btn-shine {
            position: relative;
            overflow: hidden;
        }
        .hostedbpkt-btn-shine::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 1s ease;
        }
        .hostedbpkt-btn-shine:hover::before {
            left: 100%;
        }
        
        @media (min-width: 576px) {
            .hostedbpkt-packages-grid::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: repeating-linear-gradient(
                    to right,
                    transparent,
                    transparent calc(100% / 6 - 1px),
                    #e5e5e5 calc(100% / 6 - 1px),
                    #e5e5e5 calc(100% / 6)
                );
                pointer-events: none;
            }
        }
/*=========================
        #Eklenti3
=========================*/
        .eklenti3-shine-effect {
            position: relative;
            overflow: hidden;
        }
        
        .eklenti3-shine-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }
        
        .eklenti3-shine-effect:hover::before {
            left: 100%;
        }

        .eklenti3-feature-card {
            transition: opacity 0.2s ease, transform 0.3s ease;
            border: 1px solid #2d3748;
            background-color: rgba(30, 41, 59, 0.4);
            display: flex;
            flex-direction: column;
        }
        
        .eklenti3-feature-card.eklenti3-card-hidden {
            opacity: 0 !important;
            visibility: hidden !important;
            position: absolute !important;
            pointer-events: none !important;
        }
        
        .eklenti3-feature-card.eklenti3-animate-in {
            animation: eklenti3-slideInUp 0.4s ease forwards;
        }
        
        @keyframes eklenti3-slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .eklenti3-feature-card:hover {
            border-color: #d91e48;
            background-color: rgba(30, 41, 59, 0.6);
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(217, 30, 72, 0.15);
        }
        
        .eklenti3-feature-card:hover .eklenti3-icon-circle {
            background-color: #d91e48;
            transform: scale(1.05);
        }
        
        .eklenti3-icon-circle {
            transition: all 0.3s ease;
            background-color: #ffffff;
            border: 2px solid rgba(217, 30, 72, 0.3);
        }
        
        .eklenti3-feature-card .eklenti3-icon-default {
            display: block;
        }
        
        .eklenti3-feature-card .eklenti3-icon-hover {
            display: none;
        }
        
        .eklenti3-feature-card:hover .eklenti3-icon-default {
            display: none;
        }
        
        .eklenti3-feature-card:hover .eklenti3-icon-hover {
            display: block;
        }
        
        .eklenti3-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        
        .eklenti3-page-content {
            position: relative !important;
            min-height: 280px !important;
        }

        @media (min-width: 640px) {
            .eklenti3-page-content {
                min-height: 300px !important;
            }
        }

        @media (min-width: 1024px) {
            .eklenti3-page-content {
                min-height: 180px !important;
            }
        }
        
        .eklenti3-nav-arrow {
            transition: all 0.3s ease;
            border: 2px solid #d91e48;
            background-color: transparent;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        @media (min-width: 768px) {
            .eklenti3-nav-arrow {
                width: 48px;
                height: 48px;
            }
        }
        
        .eklenti3-nav-arrow:hover {
            background-color: #d91e48;
            transform: scale(1.05);
        }
        
        .eklenti3-nav-arrow:hover svg {
            stroke: white !important;
        }
        
        .eklenti3-nav-arrow:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .eklenti3-nav-arrow:disabled:hover {
            background-color: transparent;
            transform: scale(1);
        }
        
        .eklenti3-nav-arrow:disabled:hover svg {
            stroke: #d91e48 !important;
        }
        
        .eklenti3-page-indicator {
            color: white;
            font-size: 14px;
            font-weight: 500;
            min-width: 40px;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .eklenti3-page-indicator {
                font-size: 18px;
                min-width: 50px;
            }
        }
        
        .eklenti3-page-title {
            line-height: 1.3;
        }
        
        .eklenti3-page-description {
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        @media (max-width: 767px) {
            .eklenti3-feature-card {
                padding: 1rem;
            }
            
            .eklenti3-nav-arrow {
                min-width: 44px;
                min-height: 44px;
            }
        }

        .eklenti3-bottom-title {
            line-height: 1.3;
        }
        .eklenti3-bottom-description {
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .eklenti3-text-hidden {
            display: none !important;
        }
        
        .eklenti3-packages-btn {
            border: 2px solid #ffffff !important;
        }
        
        .eklenti3-packages-btn:hover {
            border: 2px solid #ffffff !important;
        }
/*=========================
        #Headdb
=========================*/
        /* Added headdb- prefix to all custom CSS classes */
        @keyframes headdb-shine {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }
        .headdb-shine-effect {
            position: relative;
            overflow: hidden;
        }
        .headdb-shine-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }
        .headdb-shine-effect:hover::after {
            animation: headdb-shine 0.8s ease-in-out;
        }
        .headdb-btn-icon-default {
            display: inline-block;
        }
        .headdb-btn-icon-hover {
            display: none;
        }
        .headdb-shine-effect:hover .headdb-btn-icon-default {
            display: none;
        }
        .headdb-shine-effect:hover .headdb-btn-icon-hover {
            display: inline-block;
        }

        .headdb-card-hover:hover {
            background-color: rgb(31 41 55 / 0.5);
            border-color: rgb(59 130 246 / 0.4);
            transform: scale(1.02);
        }

        .headdb-shimmer-effect {
            position: relative;
            overflow: hidden;
        }

        .headdb-shimmer-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.03),
                transparent
            );
            animation: headdb-shimmer 3s infinite;
        }

        @keyframes headdb-shimmer {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }

        @keyframes headdb-slideInFromLeft {
            0% {
                opacity: 0;
                transform: translateX(-30px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .headdb-slide-in-content {
            animation: headdb-slideInFromLeft 0.8s ease-out forwards;
        }

        .headdb-slide-in-content > * {
            opacity: 0;
            animation: headdb-slideInFromLeft 0.8s ease-out forwards;
        }

        .headdb-slide-in-content > *:nth-child(1) {
            animation-delay: 0.1s;
        }

        .headdb-slide-in-content > *:nth-child(2) {
            animation-delay: 0.2s;
        }

        .headdb-slide-in-content > *:nth-child(3) {
            animation-delay: 0.3s;
        }

        .headdb-slide-in-content > *:nth-child(4) {
            animation-delay: 0.4s;
        }

        .headdb-slide-in-content > *:nth-child(5) {
            animation-delay: 0.5s;
        }

        .headdb-slide-in-content > *:nth-child(6) {
            animation-delay: 0.6s;
        }
/*=========================
        #hosting-paketleri
=========================*/
    .tooltip-container {
        position: relative;
        display: inline-flex;
        cursor: pointer;
    }
    .tooltip-content {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 8px;
        background-color: #d91e48;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        width: 200px;
        z-index: 100;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .tooltip-content::before {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 12px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #d91e48 transparent;
    }
    .tooltip-container:hover .tooltip-content {
        visibility: visible;
        opacity: 1;
    }
    .btn-shine {
        position: relative;
        overflow: hidden;
    }
    .btn-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s ease;
    }
    .btn-shine:hover::after {
        left: 100%;
    }