@font-face {
    font-family: 'Inter';
    src: url('/public/assets/fonts/Inter_18pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('/public/assets/fonts/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('/public/assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('/public/assets/fonts/Inter_24pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('/public/assets/fonts/Inter_24pt-Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Manrope';
    src: url('/public/assets/fonts/Manrope-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Manrope';
    src: url('/public/assets/fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Manrope';
    src: url('/public/assets/fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Manrope';
    src: url('/public/assets/fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('/public/assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('/public/assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('/public/assets/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('/public/assets/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('/public/assets/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.nav-top{
    padding-inline: 263px;
    background: #f4f4f4;
    display: flex;
    justify-content: end;
    padding-block: 4px;
    align-items: center;
}
.nav-blog, .nav-bilgi, .nav-kampanya {
  	font-size: 13px;
  	line-height: 20px;
  	font-family: Inter;
  	color: #bdbdc2;
  	text-align: left;
    text-decoration: none;
}

.nav-kampanya{
    color: #12567f;
}
.nav-dik-cizgi{
    background-color: #bdbdc2;
    height: 13px;
    width: 1px;

}
.navbar{
    padding-inline: 263px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}
.ni-logo img{
    height: 38px;
}
.veri-merkezi, .evde-internet{
 	font-size: 16px;
  	line-height: 20px;
  	font-weight: 300;
  	font-family: Inter;
  	color: #000;
    text-decoration: none;
}
.veri-merkezi.active, .evde-internet.active{
  	color: #068BDB;
    border-bottom: 4px solid #068BDB;
}
.müsteri-paneli{
	padding: 12px;
    border-radius: 8px;
  	font-size: 20px;
  	line-height: 128%;
  	font-family: Inter;
  	color: #fff;
    background-color: #068BDB;
    text-decoration: none;
}
.sepet{
    height: 35px;
}
.nav-menu{
    padding-inline: 263px;
    margin-top: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.nav-menu .menu-item{
    font-size: 18px;
  	line-height: 20px;
  	font-weight: 500;
  	font-family: Inter;
  	color: #12567f;
    text-decoration: none;
}
a{
    text-decoration: none;
}

.parent-section {
  background-image: url('/public/assets/media/datacenter-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 569px;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === NI Carousel Styles === */
.ni-carousel .ni-carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.ni-carousel-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  max-width: 1100px;
  gap: 40px;
}

.ni-carousel-text {
  max-width: 520px;
}

.ni-carousel-badge {
  display: inline-block;
  background: #12567f;
  color: #fff;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 50px;
  margin-bottom: 15px;
}

.ni-carousel-text h2 {
  font-size: 50px;
  color: #003366;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
  font-family: 'Poppins';
}

.ni-carousel-text p {
  color: #555;
  font-size: 23px;
  font-family: 'Poppins';
  line-height: 1.6;
}

.ni-carousel-image img {
  width: 320px!important;
  max-width: 100%;
}

/* Owl Navigation Buttons */
.ni-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.ni-carousel .owl-nav button {
  background: white !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px !important;
  color: #0066cc !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: 0.3s;
}

.ni-carousel .owl-nav button:hover {
  background: #0066cc !important;
  color: white !important;
}

/* Dots */
.ni-carousel .owl-dots {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
}

.ni-carousel .owl-dot span {
  background: #bbb !important;
  width: 10px;
  height: 10px;
  margin: 3px;
  border-radius: 50%;
}

.ni-carousel .owl-dot.active span {
  background: #0066cc !important;
}
.home-title, .home-title-blue{
	font-size: 50px;
  	line-height: 108%;
  	font-family: Poppins;
  	color: #068bdb;
    font-weight: 700;
}
.home-title-blue{
    color: #12567f;
}
.home-desc, .home-desc-blue-bold{
    font-size: 24px;
  	line-height: 117%;
  	font-family: Poppins;
    color: #000;
    font-weight: 200;
    margin-bottom: 46px;
}
.home-desc-blue-bold{
    color: #068BDB!important;
    font-weight: 600;
}
.incele {
  	padding: 15px 20px;
  	border-radius: 25px;
  	background: linear-gradient(90deg, #000, #444445);
    color: #fff;
}
.stratejik-altyapi-img{
    height: 560px;
}
.blue-card{
    background: linear-gradient(to right, #068BDB, #00629D);
    border-radius: 23px;
    padding: 32px 10px;
    text-align: center;
}
.dark-blue-card{
    background: linear-gradient(to right, #003859, #00629D);
    border-radius: 23px;
    padding: 32px 10px;
  	text-align: center;

}
.dark-blue{
    color: #12567F!important;
}
.kesintisiz-sreklilii {
  	font-size: 24px;
  	font-weight: 500;
  	font-family: Poppins;
  	color: #fff;
}

.yksek-eriilebilirlik-slaler {
  	font-size: 16px;
  	font-weight: 200;
  	font-family: Poppins;
  	color: #fff;
}
.alt-cizgi {
  	width: auto;
  	height: 0.5px;
  	border: 0.5px solid #fff;
  	box-sizing: border-box;
    margin: 20px;
    opacity: 0.5;
}
.home-subtitle, .home-subtitle-blue{
    font-size: 36px;
  	line-height: 117%;
  	color: #000;
  	font-family: Poppins;
    font-weight: 200;
}
.home-subtitle-blue{
    color: #068BDB;
    font-weight: 600;
}

.dark-blue-card2{
    background: linear-gradient(to right, #12567F, #004874);
    border-radius: 30px;
    padding: 35px;

}
.dark-card{
    background: linear-gradient(90deg, #000, #444445);
    border-radius: 30px;
    padding: 35px;
}
.card-title-dinamik {
  	position: relative;
  	font-size: 32px;
  	line-height: 29px;
  	font-family: Poppins;
  	color: #f9f9f9;
    font-weight: 600;
}
.card-desc-dinamik {
  	position: relative;
  	font-size: 20px;
  	line-height: 29px;
  	font-family: Poppins;
  	color: #f9f9f9;
    font-weight: 200;
}
.hizmetlerimiz-title {
  	font-size: 50px;
  	line-height: 108%;
  	font-family: Poppins;
  	color: #068bdb;
  	text-align: center;
    font-weight: 700;
}
.hizmetlerimiz-desc {
  	font-size: 24px;
  	line-height: 117%;
  	font-weight: 200;
  	font-family: Poppins;
  	color: #12567f;
  	text-align: center;
}
.gray-card1{
    background: #00000070;
    padding: 40px 47px;
    border-radius: 20px;
}
.gray-card2{
    background: #0000004F;
    padding: 40px 47px;
    border-radius: 20px;
}
.gray-card3{
    background: #000000C4;
    padding: 40px 47px;
    border-radius: 20px;
}
.gray-card4{
    background: #000000A3;
    padding: 40px 47px;
    border-radius: 20px;
}
.gray-card5{
    background: #000000AB;
    padding: 40px 47px;
    border-radius: 20px;
}
.gray-card6{
    background: #000000A6;
    padding: 40px 47px;
    border-radius: 20px;
}
.gray-card-title-white, .gray-card-title-blue{
    font-size: 32px;
  	line-height: 108%;
  	font-family: Poppins;
  	color: #fff;
    font-weight: 600;
}
.gray-card-title-blue{
    color: #0082cf;
}
.gray-card-desc{
    font-size: 17px;
  	line-height: 117%;
  	font-weight: 200;
  	font-family: Poppins;
  	color: #fff;
    margin-bottom: 30px;
}
.gray-card-button {
  	padding: 15px 35px;
  	position: relative;
  	border-radius: 17px;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);margin-top: 15px;
    font-size: 17px;
  	line-height: 117%;
  	font-weight: 500;
  	font-family: Poppins;
  	color: #fffcfc;
}
.home-video{
    width: 823px;
    height: 930px;
    background: gray;
    border-radius: 17px;
}

.tescilli-kantlanm-ve-container {
  	font-size: 50px;
  	line-height: 108%;
  	display: inline-block;
  	font-family: Poppins;
  	color: #068bdb;
    font-weight: 700;
}
.gvenilir-hizmet {
  	color: #12567f;
}
.veri-gvenliinden-i-container {
  	font-size: 24px;
  	line-height: 117%;
  	color: #000;
  	font-family: Poppins;
    font-weight: 200;
}
.bamsz-kurulularca-denetlen {
  	font-weight: 600;
  	color: #12567f;
}
.iso-blue, .iso-dark {
  	font-size: 24px;
  	line-height: 117%;
  	text-align: left;
  	display: inline-block;
  	color: #000;
  	font-family: Poppins;
    font-weight: 600;
}
.iso-blue {
  	margin: 0;
  	color: #12567f;
    font-weight: 200;
}
.sertifika-incele {
  	padding: 16px 20px;
  	border-radius: 25px;
  	background: linear-gradient(90deg, #000, #444445);
    color: #fff;
}

/* Genel Sıfırlama ve Font Ayarları */

:root {
    --footer-bg: #0d2f51; /* Resimden alınan ana mavi renk */
    --footer-border: #1f4f80; /* Ayırıcı çizgi rengi */
    --footer-text-light: #ffffff;
    --footer-text-dark: #c0d1e6; /* Linklerin normal rengi */
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-footer {
    background-color: #12567f;
    background-image: 
        url("/public/assets/media/footer-bg.png"),
        linear-gradient(90deg, rgb(18, 86, 127), rgb(11, 132, 205));
    background-position: 
        right center,
        left top;
    background-repeat: 
        no-repeat,
        repeat;
    background-size: 
        498px 505px,
        auto;

    color: var(--footer-text-light);
    padding: 60px 0 30px 0;
    margin-top: 50px;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer-column h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--footer-text-light);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    line-height: 128%;
  	font-family: Helvetica;
    border-bottom: 0.5px solid #ffffff69;
    padding-bottom: 18px;
}


.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 14px;
}

.footer-menu a {
    color: var(--footer-text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 17px;
  	line-height: 128%;
  	font-family: Helvetica;
}
.footer-menu ul li a{
    font-size: 13px;
}
.footer-menu a:hover {
    color: var(--footer-text-light);
}

.submenu-toggle {
    display: flex;
    gap: 16px;
    align-items: center;
}

.submenu-toggle span {
    font-weight: bold;
    font-size: 16px;
}

.submenu {
    list-style: none;
    padding-left: 15px; 
    margin-top: 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.submenu.open {
    max-height: 500px; 
    transition: max-height 0.4s ease-in;
}

.submenu li {
    margin-bottom: 10px;
    font-size: 13px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.5px solid #fff;
    padding-top: 30px;
    margin-top: 30px;
    flex-wrap: wrap; 
    gap: 20px;
}

.footer-logo img {
    height: 35px;
    width: auto;
}

.footer-contact {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap; 
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.contact-item i {
    font-size: 20px;
    color: var(--footer-text-dark);
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    color: var(--footer-text-dark);
    font-size: 22px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: var(--footer-text-light);
}


@media (max-width: 991px) {
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .footer-contact {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-column h3 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-column h3::after {
        content: '+';
        font-size: 24px;
        font-weight: 300;
        transition: transform 0.3s ease;
    }

    .footer-column h3.open::after {
        content: '−';
        transform: rotate(180deg);
    }
    
    .footer-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.4s ease-out;
        padding-left: 0;
    }

    .footer-menu.open {
        max-height: 1000px; 
        padding-left: 15px; 
        padding-top: 15px; 
        transition: max-height 0.4s ease-in, padding 0.4s ease-in;
    }
    
    .footer-menu .submenu {
        max-height: 1000px; 
    }

    .footer-contact {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
}
@media (max-width: 1080px) and  (min-width: 810px){
    .gradient-title-h1{font-size: 40px!important;}
    .cloud-altyapsna-sahip-ssd-container{font-size: 18px!important;}
    .backgroundshadow{width: 95%!important;}
    .ssd-vds-sunucular-container{font-size: 18px!important;}
    .feature-image img{height: 300px!important;}
    .feature-row h2{font-size: 40px!important;}
    .feature-row p{font-size: 18px!important;}
    .mega-menu{
        left: -120px!important;
    }
    .mega-menu-inner{
        padding: 30px 120px!important;
    }
    .menu-item-wrapper:focus .mega-menu{
        display: block;
    }
    .nav-menu .menu-item{
        font-size: 16px;
        text-align: center;
    }
    .nav-menu{
        gap: .5rem;
        padding-inline: 70px!important;
    }
    .navbar{
        padding-inline: 70px!important;
    }
    .margin-163{
        margin: 107px!important;
    }
    .stratejik-altyapi-img{
        display: none
    }
    .margin-244{
        margin: 120px!important;
    }
    .gray-card3, .gray-card4, .gray-card5, .gray-card6{
        padding: 60px 15px!important;
    }
    .gray-card-button{
        padding: 15px 22px!important;
    }
    .home-video{
        height: 600px;
    }
    .footer-column h3{
        font-size: 16px;
    }
    .margin-60{
        margin: 10px!important;
    }
}
@media (max-width: 810px) and  (min-width: 540px){
    .package-title{font-size: 16px!important;}
    .current-price{font-size: 16px!important;}
    .feature-item span{font-size: 14px!important;}
    .feature-item{flex-direction: column;}
    .backgroundshadow{padding: 32px 16px 0px!important;}
    .price-display{min-width: 50px!important;}
    .package-col{padding: 0!important;}
    .features-section{padding-inline:30px!important;margin-top:40px;}
    .feature-row{padding: 0px;gap: 0!important;}
    
    .nav-menu .menu-item{
        font-size: 16px;
        text-align: center;
    }
    .mega-menu{
        left: -26px!important;
    }
    .nav-menu{
        gap: .5rem;
        padding-inline: 24px;
    }
    .ni-carousel-text h2{
        font-size: 34px;
    }
    .ni-carousel-text p{
        font-size: 20px;
    }
    .navbar{
        padding-inline: 24px;
    }
    .margin-163{
        margin: 107px!important;
    }
    .stratejik-altyapi-img{
        height: 316px;
    }
    .margin-244{
        margin: 24px!important;
    }
    .gray-card3, .gray-card4, .gray-card5, .gray-card6{
        padding: 60px 20px!important;
    }
    .gray-card5, .gray-card6{
        margin-top: 20px;
    }
    .gray-card-button{
        padding: 15px 22px!important;
    }
    .home-video{
        height: 500px;
        width: 100%;
    }
    .footer-column h3{
        font-size: 16px;
    }
    .margin-60{
        margin: 10px!important;
    }
}
@media (max-width: 540px){
    .gradient-title-h1,.faq-header h1{font-size: 30px!important;}
    .cloud-altyapsna-sahip-ssd-container{font-size: 16px!important;}
    .backgroundshadow{width: 95%!important;padding: 32px 10px 0px!important;}
    .ssd-vds-sunucular-container{font-size: 18px!important;}
    .feature-image img{height: 300px!important;}
    .feature-row h2{font-size: 40px!important;}
    .feature-row p{font-size: 18px!important;}
    .paketler{margin-top: 100px;}
    .package-price-action-col{max-width: 420px!important;}
    .package-card{border: 1px solid #eee;margin-bottom: 13px;}
    .performans-tutkunlarna-ozel,.ssd-vds-sunucular-container,.gradient-title-h1{padding-left: 26px!important;}
    .features-container,.features-section{padding-inline: 26px!important;}
    .feature-box h2{font-size: 24px!important;}
    .feature-item span{font-size: 14px!important;}
    .package-title{font-size: 16px!important;}
    .feature-item{width: 100%!important;max-width: 100%!important;}
    .package-features-col{flex-direction: column!important;}
    .package-price-action-col{margin-top: 0!important;display: flex;justify-content: end!important;}
    .info-banner{
        padding: 40px 20px!important;
        flex-direction: column;
       
    }
    .info-button{font-size: 12px!important;}
    .banner-content{font-size: 16px!important; margin-bottom: 10px;}
    .ni-carousel-content{
        flex-direction:column!important;
    }
    .ni-carousel-text h2{
        font-size: 30px!important;
    }
    .ni-carousel-text p{
        font-size: 18px;
    }
    .margin-163{
        margin: 20px!important;
        margin-top:170px!important ;
    }
    .margin-right-55{
        margin-right: 20px!important;
    }
    .home-title, .home-title-blue{
        font-size: 30px!important;
    }
    .home-desc, .home-desc-blue-bold{
        font-size: 18px!important;
    }
    .stratejik-altyapi-img{
        display: none!important;
    }
    .nav-top{
        display: none;
    }
    .navbar{
        padding-inline: 10px;
        margin-top: 20px;
    }
    .ni-logo img{
        height: 36px!important;
    }
    .menu-navbar{
        width: 100%;
    }
    .ni-carousel{
        top: 64px;
    }
    .mobile-menu {
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        transform: translateY(-100%);
        transition: all 0.4s ease;
        z-index: 9999;
        overflow-y: auto;
        overflow-x: hidden;
        border-top: 2px solid #afafaf4a;
    }
    .mobile-top-menu{
        border-bottom: 1px solid #afafaf4a;
    }
    .veri-mobile, .evde-internet-mobile{
        font-size: 14px;
        line-height: 20px;
        font-weight: 300;
        font-family: Inter;
        color: #000;
        padding: 12px;
    }
    .veri-mobile.active{
        font-size: 14px;
        line-height: 20px;
        font-family: Inter;
        color: #0082cf;
        border-bottom: 4px solid #0082cf;
        font-weight:600
    }
    .musteri-paneli-mobile{
        border-radius: 6px;
        background: linear-gradient(90deg, #0082cf, #58b5eb);
        color: #fff;
        padding: 4px 8px;
        font-size: 14px;
        margin-right: 5px;
    }
    
    .mobile-menu.active {
        transform: translateY(0);
        top: 76px;
    }

    .mobile-menu-content {
        padding: 32px 20px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding-bottom: 0px;
    }

    .mobile-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        color: #0082CF;
        font-weight: 400;
        text-decoration: none;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 10px;
    }

    .mobile-item span {
        font-size: 22px;
        color: #58B5EB;
    }
    .mobile-menu-footer{
        background-color: #f4f4f4;
        padding: 44px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-footer-text{
        font-size: 13px;
        line-height: 20px;
        font-family: Inter;
        color: #bdbdc2;
        margin-inline:6px
    }
    .mobile-footer-text-blue{
        font-size: 13px;
        line-height: 20px;
        font-family: Inter;
        color: #12567f;
            margin-inline:6px
    }
    .mobile-footer-dik-cizgi{
        width: 1px;
        height: 20px;
        background-color: #bdbdc2;
    }
    
    .menu-toggle {
    cursor: pointer;
    }

    body.menu-open {
        overflow: hidden;
    }
    .blue-card{
        margin-bottom: 10px;
    }
    .margin-244{
        margin: 20px!important;
    }
    .home-subtitle, .home-subtitle-blue{
        font-size: 30px;
    }
    .dark-blue-card2{
        width: 100%!important;
        max-width: 100%!important;
    }
    .hizmetlerimiz-title{
        font-size: 30px;
    }
    .hizmetlerimiz-desc{
        font-size: 18px;
    }
    .gray-card1,.gray-card2,.gray-card3,.gray-card4,.gray-card5,.gray-card6{
        padding: 30px 15px!important;
    }
    .margin-60{
        margin: 20px 10px!important;
    }
    .gray-card-title-white, .gray-card-title-blue{
        font-size: 30px;
    }
    .margin-inline-34{
        margin-inline: 10px!important;
        margin-top: 100px!important;
    }
    .home-video{
        width: 100%!important;
        height: 300px!important;
        margin-bottom: 30px;
    }
    .tescilli-kantlanm-ve-container{
        font-size: 30px;
    }
    .veri-gvenliinden-i-container{
        font-size: 18px;
    }
    .iso-blue, .iso-dark{
        font-size: 18px;
    }
    .iso-list svg{
        min-width: 32px;
    }
    .mobile-menu-content,
    .mobile-hizmetlerimiz-menu {
    transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .mobile-title{
        color: #575757;
        font-weight: 500;
        font-size: 18px;
    }
    .mobile-border-bottom{
        border-bottom: 1px solid #00000015;
    }
    .mobile-menu-content.hide {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    }

    .mobile-hizmetlerimiz-menu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    }

    .mobile-hizmetlerimiz-menu.show {
    left: 0;
    opacity: 1;
    pointer-events: all;
    }

    /* Geri butonu */
    .mobile-back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0082CF;
    font-weight: 500;
    text-decoration: none;
    }

    .mobile-back svg {
    width: 14px;
    height: 14px;
    }

    /* Alt menü öğeleri */
    .mobile-sub-item {
    display: block;
    padding-top: 12px;
    padding-bottom: 6px;
    color: #292828;
    text-decoration: none;
    font-weight: 500;
    }
    .mobile-hemen-incele{
        color: #007BC1!important;
        font-size: 16px!important;
        font-weight: 400!important;
    }

    .mobile-sub-item span {
    display: block;
    color: #666;
    font-size: 13px;
    margin-top: 3px;
    }
}
@media (max-width: 576px) {
    .scroll-menu{
        scrollbar-width: thin;
        scrollbar-color: #0082cf #e5f2fb;max-height: 75vh;
        overflow-y: auto;margin-right: 12px;
    }
    .scroll-menu {
        overflow-y: scroll;
        scrollbar-width: thin; 
        scrollbar-color: #0082cf #e5f2fb;
    }
  .scroll-menu::-webkit-scrollbar {
    width: 12px; 
    background: #e5f2fb;
    border-radius: 8px;
  }
  .scroll-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #0082cf, #58b5eb);
    border-radius: 8px;
    border: 3px solid #f6f7fa; 
  }
  .scroll-menu::-webkit-scrollbar-thumb:hover {
    background: #0082cf;
    border: 3px solid #b2e1fc;
  }
  .scroll-menu::-webkit-scrollbar-track {
    background: #e5f2fb;
    border-radius: 8px;
    box-shadow: inset 0 0 5px #b2e1fc;
  }
    .scroll-menu {
        max-height: 75vh;
        overflow-y: auto;
        position: relative;
        z-index: 1; 
    }

    .scroll-menu::after {
        content: "";
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80%;
        pointer-events: none; 

        background: linear-gradient(
            to bottom,
            rgba(246, 247, 250, 0) 0%, 
            rgba(246, 247, 250, 1) 80% 
        );
    }
    .mobile-sub-item span{
        display: none; 
        opacity: 0;
        transition: opacity 0.5s ease-in-out; 
        font-size: 0.85em;
        color: #6c757d;
        
    }
    .mobile-sub-item a {
        display: none;
        opacity: 0; 
        transition: opacity 0.5s ease-in-out; 
        font-size: 0.85em;
        color: #6c757d;
        
    }
    .mobile-sub-item.is-scrolled span {
        display: block; 
        opacity: 1; 
    }
    .mobile-sub-item.is-scrolled a {
        display: block; 
        opacity: 1; 
    }
 
}
.margin-163{
    margin: 163px;
}
.margin-60{
    margin: 60px;
}
.margin-244{
    margin: 244px;
}
.margin-inline-34{
    margin-inline: 34px;
    margin-top: 170px
}
.margin-right-55{
    margin-right: 55px
}

.menu-item:hover {
  color: #007bff;
}

.menu-item-wrapper {
  position: relative;
  padding-block: 20px;
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  width: 100vw;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 999;
  left: -263px;
}

.menu-item-wrapper:hover .mega-menu {
  display: block;
}

.mega-menu-inner {
  display: flex;
  justify-content: space-between;
  
  margin: auto;
  padding: 30px 260px;
}
.mega-menu-border-bottom{
    border-bottom: 1px solid #00000015;
}
.mega-column h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #007bff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mega-column a {
  display: block;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  padding: 3px 0;
}

.mega-column a:hover {
  text-decoration: underline;
  color: #007bff;
}

/* Responsive */
@media (max-width: 768px) {
  .mega-menu-inner {
    flex-direction: column;
  }
}
 .mega-menu-sub-item {
    display: block;
    padding-top: 12px;
    padding-bottom: 6px;
    color: #292828;
    text-decoration: none;
    font-weight: 500;
}
.mega-menu-hemen-incele{
    color: #007BC1!important;
    font-size: 16px!important;
    font-weight: 400!important;
}

.mega-menu-sub-item span {
    display: block;
    color: #666;
    font-size: 13px;
    margin-top: 3px;
}
.mega-menu-title{
    color: #575757;
    font-weight: 500;
    font-size: 18px;
}
.mega-menu-sub-item .sub-item-desc {
  display: none;
  transition: all 0.4s;
}
.mega-menu-sub-item.active .sub-item-desc {
  display: block;
}
.mega-menu-sub-item a {
  display: none;
  transition: all 0.4s;
}
.mega-menu-sub-item.active a {
  display: block;
}
.mega-menu-sub-item.active .sub-item-toggle{
    font-weight: 600;
}
.sub-item-toggle {
  background: none;
  border: none;
  font-weight: 300;
  font-size: 16px;
  width: 100%;
  color: #292828!important;
  text-align: left;
  padding: 0;
  outline: none;
  margin-bottom: 0;
  cursor: pointer;
}

.mega-menu-backdrop {
  display: none; 
  position: fixed; 
  top: 300px;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 998; 
  transition: opacity 0.3s ease;
}

.mega-menu-backdrop.is-active {
  display: block;
  opacity: 1; 
}
.home-breadcrumb{
    font-size: 16px;
  	line-height: 24px;
  	font-weight: 500;
  	font-family: Poppins;
  	color: #000;
}
.blue-breadcrumb{
    font-size: 16px;
  	line-height: 24px;
  	font-weight: 600;
  	font-family: Poppins;
  	color: #068bdb;
}
.gradient-title-h1 {
  	font-size: 50px;
  	line-height: 108%;
  	display: inline-block;
  	font-family: Poppins;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
    font-weight: 700;
}
.cloud-altyapsna-sahip-ssd-container {
  	position: relative;
  	font-size: 24px;
  	line-height: 124%;
  	color: #12567f;
  	text-align: center;
  	display: inline-block;
  	font-family: Poppins;
}
.cloud-altyapsna-sahip-ssd {
  	font-weight: 700;
}
.performans-tutkunlarna-ozel{
    line-height: 122%;
  	text-align: left;
  	display: inline-block;
  	font-size: 40px;
  	color: #fff;
  	font-family: Poppins;
  	position: relative;
  	border-radius: 0 12px 12px 0;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);
    padding-left: 137px;
    padding-right: 270px;
    padding-block:16px ;
}
.ssd-vds-sunucular-container {
  	max-width: 992px;
  	position: relative;
  	font-size: 24px;
  	line-height: 135%;
  	font-family: Poppins;
  	color: #12567f;
  	text-align: left;
  	display: inline-block;
    padding-left: 137px;
}
.ssd-vds-sunucular {
  	margin: 0;
}
.features-container {
    display: flex; /* Flexbox'ı etkinleştir */
    gap: 20px; /* Kutular arasına boşluk */
    justify-content: center; /* Kutuları ortala */
    flex-wrap: wrap; /* Gerekirse alt satıra geç */
    padding-inline: 137px;
    margin-top: 56px;
}

/* Her bir özellik kutusu */
.feature-box {
    flex: 1 1 300px; /* Esnekliği ayarla: büyü, küçül, temel genişlik */
    min-width: 280px;
    padding: 30px;
    border-radius: 15px; /* Yuvarlak köşeler */
    color: #fff; /* Beyaz metin rengi */
    position: relative;
    overflow: hidden; /* SVG'lerin dışarı taşmasını engelle */
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    background: linear-gradient(90deg, #0082cf, #58b5eb);
    transition: transform 0.3s ease-in-out; /* Hafif hover efekti */
}

.feature-box:hover {
    transform: translateY(-5px);
}

/* Başlık Stili */
.feature-box h2 {
    margin-top: 0;
    font-weight: bold;
    position: relative;
    z-index: 10; /* Metnin SVG'nin üstünde kalması için */
    font-size: 32px;
  	line-height: 38px;
  	font-family: Poppins;
  	color: #fff;
}

/* Açıklama Metni Stili */
.feature-box p {
    position: relative;
    z-index: 10;
    font-size: 18px;
  	line-height: 24px;
  	font-family: Poppins;
  	color: #fff;
    margin-top: 28px;
}

/* SVG İkonları için stil */
.icon-svg {
    position: absolute;
    top: 32%;
    left: 75%;
    transform: translate(-50%, -50%);
    z-index: 5; /* Metnin altında kalması için */
    width: 150px; 
    height: 150px;

}

/* SVG'leri gizlemek/göstermek için */
.feature-box.online-panel .icon-svg.server,
.feature-box.online-panel .icon-svg.support,
.feature-box.super-servers .icon-svg.panel,
.feature-box.super-servers .icon-svg.support,
.feature-box.support-desk .icon-svg.panel,
.feature-box.support-desk .icon-svg.server {
    display: none;
}

@media (max-width: 992px) {
    .feature-box {
        flex-basis: 45%; 
    }
}
@media (max-width: 600px) {
    .feature-box {
        flex-basis: 100%; 
    }
}

.backgroundshadow {
  	width: 80%;
  	position: relative;
  	box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
  	border-radius: 16px;
  	background-color: #fff;
  	overflow: hidden;
  	padding: 32px 32px 0px;
  	box-sizing: border-box;
  	gap: 32px;
  	text-align: center;
  	font-size: 14px;
  	color: #fff;
  	font-family: Inter;
}

.pricing-switcher-currency .fieldset-currency {
    display: inline-block;
    position: relative;
    padding: 0px 8px;
    border-radius: 1em;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  	border-radius: 9999px;
  	background-color: #f3f4f6;
  	width: 100%;
  	box-sizing: border-box;
  	text-align: center;
  	font-size: 14px;
  	color: #6b7280;
  	font-family: Inter;
    margin-bottom: 0;
}

.pricing-switcher-currency input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.pricing-switcher-currency label {
    position: relative;
    z-index: 1;
    display: inline-block;
    float: left;
    width: 47px;
    height: 37px;
    line-height: 40px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
    font-family: Inter;
    left: 0;
}
.pricing-switcher-currency .dolar{
    color: #fff;
}
.pricing-switcher-currency .tl{
    color: #6b7280;
}
.pricing-switcher-currency .switch-currency {
    position: absolute;
    top: 0px;
    left: 0;
    height: 37px;
    width: 57px;
    background: linear-gradient(90deg, #0082cf, #58b5eb);
    border-radius:  9999px;
    transition: transform 0.5s;
    color: #fff;
}
.pricing-switcher-currency input[type="radio"]:checked + label + .switch-currency, .pricing-switcher-currency input[type="radio"]:checked + label:nth-of-type(n) + .switch-currency {
  transform: translateX(54px);
}
.pricing-switcher-currency {
    padding: 7px;
    right: 0;
}

/* Genel Ayarlar ve Font */
.package-list-container {
    width: 100%;
    margin: 0 auto;
    font-family: sans-serif; /* Fontunuzu buraya ekleyin */
    color: #173078; /* Metin rengi */
}

/* Başlık Satırı (Sadece Bilgi Amaçlı Görseldeki Sütun Başlıkları) */
.package-header-row {
    display: none; /* Mobil/Küçük Ekranlarda Gizli */
    display: flex; /* Gerekirse büyük ekranlarda gösterin */
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
    color: #888; /* Daha açık renk */
    border-bottom: 1px solid #eee;
}
.package-header-cell {
    flex-grow: 1;
    text-align: center;
    padding: 0 5px;
    font-size: 14px;
  	letter-spacing: 0.7px;
  	line-height: 20px;
  	text-transform: uppercase;
  	font-weight: 600;
  	font-family: Inter;
  	color: #4b5563;
}

.package-header-cell:first-child { text-align: left; max-width: 166px; }
.package-header-price { max-width: 120px; text-align: right; }

/* Paket Kartları */
.package-card {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    position: relative; /* Popüler etiketi için */
}
.package-card:last-child {
    border-bottom: none;
}

.package-card:hover {
    box-shadow: 0px 0px 15px rgba(59, 130, 246, 0.3), 0px 0px 5px rgba(59, 130, 246, 0.2);
    background-color: #eff6ff;
    border-top: 1px solid #f3f4f6;
    box-sizing: border-box;
    margin: 0 0 10px 0
}
.package-card:hover .buy-button{
    background-color: #12567f!important;
    color: #fff!important;
}
/* Popüler Paket Vurgusu (SSD VDS II) */
.is-popular-card {
   box-shadow: 0px 0px 15px rgba(59, 130, 246, 0.3), 0px 0px 5px rgba(59, 130, 246, 0.2);
    background-color: #eff6ff;
    border-top: 1px solid #f3f4f6;
    box-sizing: border-box;
    margin: 0 0 10px 0; /* Diğerlerinden biraz ayırma */
    
}
.package-card:hover .feature-item span{
    font-weight: 700!important;
}
.package-card:hover svg path{
    fill: #12567f;
}
.is-popular-card .feature-item span{
    font-weight: 700!important;
}
.is-popular-card svg path{
    fill: #12567f;
}
.is-popular-card .buy-button{
    background-color: #12567f!important;
    color: #fff!important;
}
/* Popüler Etiketi */
.popular-tag {
    position: absolute;
    top: 0;
    right: 42.95px;
    border-radius: 0px 0px 6px 6px;
    background-color: #12567f; /* Koyu Mavi */
    color: white;
    padding: 2px 15px;
    font-size: 12px;
    font-weight: bold;
}

/* Sütunlar (Flexbox Düzeni) */
.package-col {
    padding: 0 10px;
}

/* Paket Adı Sütunu */
.package-name-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 200px; /* Görseldeki gibi dar tut */
    flex-shrink: 0;
}
.package-title {
    font-weight: 900!important;
    font-size: 18px!important;
  	line-height: 28px;
  	display: inline-block;
  	font-family: Inter!important;
  	color: #111827!important;
}
.feature-item span {
  	font-size: 16px;
  	font-weight: 500;
  	font-family: Inter;
  	color: #12567f;
  	text-align: center;
}
.cpanel-packages .feature-item span{
    font-size: 16px!important;
  	line-height: 24px!important;
  	font-family: Inter!important;
  	color: #6b7280!important;
  	text-align: left!important;
}
.cpanel-packages .detayli-bilgi{
    font-size: 14px;
  	line-height: 20px;
  	font-family: Inter;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.cpanel-packages .aylik{
    font-size: 16px;
  	line-height: 24px;
  	font-weight: 600;
  	font-family: Inter;
  	color: #6b7280;
    text-align: center;
}

.cpanel-packages .fiyat {
  display:flex;
  align-items: flex-start;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

.cpanel-packages .fiyat .currency {
 	font-size: 43px;
  	line-height: 40px;
  	font-weight: 800;
  	font-family: Inter;
  	color: #12567f;
    margin-right: 2px;
}


.cpanel-packages .fiyat .amount {
  	font-size: 43px;
  	line-height: 40px;
  	font-weight: 800;
  	font-family: Inter;
  	color: #12567f;
}

.cpanel-packages .fiyat .decimal {
  font-size: 28px;
    line-height: 32px;
    font-weight: 800;
    font-family: Inter;
    color: #12567f;
  position: relative;
  top: -6px;       /* biraz yukarı kaldır */
}
.cpanel-packages-annually .feature-item span{
    font-size: 16px!important;
  	line-height: 24px!important;
  	font-family: Inter!important;
  	color: #6b7280!important;
  	text-align: left!important;
}
.cpanel-packages-annually .detayli-bilgi{
    font-size: 14px;
  	line-height: 20px;
  	font-family: Inter;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.cpanel-packages-annually .aylik{
    font-size: 16px;
  	line-height: 24px;
  	font-weight: 600;
  	font-family: Inter;
  	color: #6b7280;
    text-align: center;
}

.cpanel-packages-annually .fiyat {
  display:flex;
  align-items: flex-start;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

.cpanel-packages-annually .fiyat .currency {
 	font-size: 43px;
  	line-height: 40px;
  	font-weight: 800;
  	font-family: Inter;
  	color: #12567f;
    margin-right: 2px;
}


.cpanel-packages-annually .fiyat .amount {
  	font-size: 43px;
  	line-height: 40px;
  	font-weight: 800;
  	font-family: Inter;
  	color: #12567f;
}

.cpanel-packages-annually .fiyat .decimal {
  font-size: 28px;
    line-height: 32px;
    font-weight: 800;
    font-family: Inter;
    color: #12567f;
  position: relative;
  top: -6px;       /* biraz yukarı kaldır */
}
.package-description {
    font-size: 0.85rem;
    color: #888;
    margin-top: 5px;
}

/* Özellikler Sütunu */
.package-features-col {
    display: flex;
    flex-grow: 1; /* Ortada kalan alanı kapla */
    justify-content: space-around;
    padding-left: 30px;
    padding-right: 30px;
}
.feature-item {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 0.95rem;
    gap: 4px;
    max-width: 170px;
}
.feature-item i {
    font-size: 1.2rem;
    color: #173078;
    margin-bottom: 6px;
}

/* Fiyat ve Aksiyon Sütunu */
.package-price-action-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* Sağ tarafa hizala */
    max-width: 220px;
    flex-shrink: 0;
}

/* Fiyat Gösterimi */
.price-display {
    text-align: right;
    margin-right: 20px; /* Butondan ayır */
    min-width: 80px; /* Fiyatın sabit durması için */
}
.current-price {
   	font-size: 24px;
  	line-height: 32px;
  	font-family: Inter;
  	color: #111827;
    font-weight: 600;
}
.current-price small {
    font-size: 14px;
  	line-height: 20px;
  	font-family: Inter;
  	color: #6b7280;
    display: block;
}
.old-price {
    font-size: 1rem;
    color: #173078;
    text-decoration: line-through;
    display: block; /* Alt alta gelmesi için */
}

/* Satın Al Butonu */
.buy-button {
    border-radius: 8px;
  	background-color: #dbeafe;
  	padding: 8px 20px;
  	box-sizing: border-box;
  	font-size: 16px;
  	color: #068bdb;
  	font-family: Inter;
}

.buy-button:hover {
    background-color: #0d1e4e; /* Hover efekti */
}

/* Stok Yok Mesajı */
.no-stock-message {
    padding: 10px 25px;
    color: #ccc;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 80px;
    text-align: center;
    display: inline-block;
}

/* Responsive Düzenleme (Mobil Görünüm) */
@media (max-width: 768px) {
    .package-header-row {
        display: none;
    }
    .package-card {
        flex-direction: column; /* Dikey yığılma */
        align-items: flex-start;
        padding: 15px;
    }
    
    .package-name-col {
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    .package-features-col {
        flex-wrap: wrap; /* Özellikleri alt alta sırala */
        justify-content: space-between;
        padding: 0;
        margin-bottom: 15px;
        width: 100%;
    }
    .feature-item {
        width: 48%; /* Yan yana ikişerli sıralama */
        margin-bottom: 10px;
        flex-direction: row; /* İkon ve metin yan yana */
        justify-content: flex-start;
        text-align: left;
    }
    .feature-item i {
        margin-right: 8px;
        margin-bottom: 0;
    }

    .package-price-action-col {
        width: 100%;
        justify-content: space-between; /* Fiyat ve butonu yay */
        margin-top: 10px;
    }
    .price-display {
        margin-right: 0;
    }
}

.features-section {
    padding-inline: 137px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Bölümler arası boşluk */
    margin-top: 100px;
}

/* Her bir özellik sırası */
.feature-row {
    display: flex;
    align-items: center; /* Dikeyde ortalama */
    gap: 40px;
    padding: 20px 0;
}


/* Görsel Bloğu */
.feature-image {
    flex: 1;
    height: 559px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Başlıklar */
.feature-row h2 {
   	font-size: 50px;
  	line-height: 108%;
  	display: inline-block;
  	font-family: Poppins;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Açıklama Metni */
.feature-row p {
    font-size: 24px;
  	line-height: 124%;
  	font-weight: 500;
  	font-family: Poppins;
  	color: #12567f;
}

/* Görselin Kendisi */
.feature-image img {
    height: 559px;
    width: auto;
    display: block;
}

/* TERS SIRA DÜZENİ (2. ve 3. sıra için) */
/* Görseldeki 2. ve 3. bloklarda görsel solda, yazı sağda */
.feature-row.reverse {
    flex-direction: row-reverse;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .feature-row,
    .feature-row.reverse {
        flex-direction: column; /* Mobil cihazlarda üst üste yığılma */
        text-align: center;
        gap: 20px;
    }

    .feature-text,
    .feature-image {
        max-width: 100%;
    }

    .feature-row h2 {
        font-size: 28px;
    }
}
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 100px;
}

/* Başlık Alanı */
.faq-header {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.faq-header h1 {
    font-size: 50px;
  	letter-spacing: -1.2px;
  	line-height: 48px;
  	font-weight: 800;
  	font-family: Poppins;
  	text-align: center;
  	display: flex;
  	align-items: center;
  	color: #068bdb;
    margin-bottom: 20px;
}

.faq-header p {
    font-size: 20px;
  	line-height: 28px;
  	font-family: Inter;
  	color: #4b5563;
}

/* Accordion (Açılır Kapanır) Stili */
.accordion-item {
    background-color: #fff;
    margin-bottom: 10px; /* Her bir öğe arasına boşluk */
    border-radius: 5px;
    border: 1px solid #e5e7eb!important;
}

.accordion-question {
    padding: 18px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
  	line-height: 24px;
  	font-weight: 600;
  	font-family: Poppins;
  	color: #068bdb;
    transition: background-color 0.3s;
}

.accordion-question:hover {
    background-color: #f5f5f5;
}

/* Ok (İkon) Stili */
.accordion-icon {
    font-size: 20px;
    color: #12567F;
    transition: transform 0.3s ease;
}

/* Açık duruma gelen ok (Tersine dönme) */
.accordion-question[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

/* Cevap İçeriği */
.accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 25px; /* Başlangıçta padding 0 */
    
}

/* Açık Cevap İçeriği */
.accordion-item.open .accordion-answer {
    max-height: 200px; /* Yeterince büyük bir değer */
    padding: 15px 25px 20px 25px; /* Açılınca padding ekle */
}

.accordion-answer p {
    margin: 0;
    font-size: 16px;
  	line-height: 24px;
  	font-family: Poppins;
  	color: #12567f;
}
/* Paket Kartları */
.paket-card {
    width: 100%;
    height: 552px;
    position: relative;
    box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.1), 0px -7px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background-color: #fff;
    text-align: left;
    font-size: 16px;
    color: #6b7280;
    font-family: Inter;
    padding: 32px;
}
.paket-card:hover {
    box-shadow: 0 12px 48px 0 rgba(6,139,219,0.17),0 3px 24px rgba(0,0,0,0.09);
    transform: translateY(-6px) scale(1.03);
}

.paket-card.populer {
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background-color: #fff;
    border: 2px solid #0082cf;
}
.card-populer {
    position: absolute;
    left: 20%;
    transform: translateX(-20%);
    top: -20px;
    font-size: 13px;
    font-family: 'Poppins',sans-serif;
    font-weight: 700;
    letter-spacing: 0.09em;
    z-index: 9;
    box-shadow: 0 3px 16px rgba(6,139,219,0.16);
    background: #068bdb linear-gradient(90deg, #0580b8 30%, #2fabf9 93%);
    border-radius: 100px;
    padding: 5px 23px;
    text-shadow: 0 2px 6px #187fbd28;
}

.paket-card .card-title {
    font-size: 24px;
  	line-height: 32px;
  	font-family: Inter;
  	color: #1f2937;
    margin-bottom: 8px;
}


.paket-card ul,
.paket-card .text-start {
    margin: 0;
    padding-left: 0;
}
.paket-card li {
    list-style: none;
    margin-bottom: 8px;
    font-size: 15px;
}

.paket-card li i {
    margin-right: 7px;
}
.paket-card .display-6 {
    font-size: 2.1rem;
    font-weight: 600;
    color: #068bdb;
}

.paket-card .btn-primary {
    border: none;
    padding: 8px 20px;
  	box-sizing: border-box;
  	border-radius: 12px;
  	background: linear-gradient(90deg, #0082cf, #58b5eb);
  	text-align: center;
  	font-size: 16px;
  	color: #fff;
  	font-family: Inter;
    margin-top: 16px;
    transition: background 0.16s, box-shadow 0.16s;
}
.paket-card .btn-primary:hover {
    background: #046cb1;
    box-shadow: 0 8px 32px rgba(6,139,219,0.28);
}

.paket-card .text-muted {
    color: #789cb9 !important;
}

/* Responsive grid uyarlamaları */
@media (max-width: 991px) {
    .paket-card {
        min-height: 360px;
    }
}
@media (max-width: 576px) {
    .paket-card {
        margin-bottom: 28px;
    }
    .switch-togglers {
        flex-direction: column !important;
        gap: 20px;
    }
}

.switch-togglers {
    margin-bottom: 36px;
    z-index: 3;
}
.pricing-switcher .fieldset {
    display: inline-block;
    position: relative;
    padding: 4px 8px;
    border-radius: 9999px; 
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    background-color: #f3f4f6;
    width: 100%; 
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    font-family: Inter;
    margin-bottom: 0;

}

.pricing-switcher input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.pricing-switcher label {
    position: relative;
    z-index: 1;
    display: inline-block;
    float: left; 
    width: 80px; 
    height: 37px;
    line-height: 37px;
    cursor: pointer;
    font-size: 17px; 
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
    font-family: Inter; /* Veya kullandığınız font */
    left: 0;
    color: #6b7280; 
    transition: color 0.5s; 
}

.pricing-switcher .hosting {
    color: #fff; 
}
.pricing-switcher .yearly {
    color: #6b7280; 
}

.pricing-switcher .switch {

    position: absolute;
    top: 0px;
    left: 0;
    height: 45px;
    width: 93px; 
    background: linear-gradient(90deg, #0082cf, #58b5eb); /* Gradyan renk */
    border-radius: 9999px;
    transition: transform 0.5s;
    color: #fff;
}

.pricing-switcher input[type="radio"]#yearly-1:checked ~ .switch {
  transform: translateX(85px); 
}

.pricing-switcher input[type="radio"]#yearly-1:checked ~ .hosting {
    color: #6b7280; 
}
.pricing-switcher input[type="radio"]#yearly-1:checked ~ .yearly {
    color: #fff;
}

.pricing-switcher input[type="radio"]#monthly-1:checked ~ .hosting {
    color: #fff; 
}
.pricing-switcher input[type="radio"]#monthly-1:checked ~ .yearly {
    color: #6b7280;
}

.pricing-switcher {
    padding: 7px; 
}

/* Ana Kapsayıcı Stili */
.product-features-list {
    display: flex; /* İçerideki öğeleri (özellikleri) alt alta hizalamak için */
    flex-direction: column;
    gap: 10px; /* Her bir özellik satırı arasına boşluk */
    padding-left: 15px; /* Opsiyonel: Kenardan içeri itmek için */
}

/* Her Bir Özellik Satırı Stili */
.feature-item {
    display: flex; /* İkon ve metni yan yana hizalar */
    align-items: center; /* Dikey olarak ortalar */
    line-height: 1.5; /* Metin satır yüksekliği */
    font-size: 15px; /* Metin boyutu (small sınıfını eziyor olabilir) */
    color: #4a5568; /* Metin rengi, görsele yakın bir ton */
}

/* İkon Kapsayıcı Stili */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; /* İkonun kaplayacağı alan */
    height: 28px;
    margin-right: 10px; /* İkon ile metin arasına boşluk */
}

/* SVG İkonları İçin Stil (Gerekli Değil, SVG'deki boyutlar baskın) */
.feature-icon svg {
    width: 100%;
    height: 100%;
    /* İkonlar zaten SVG içinde lineer gradyan ile renklendirilmiş. 
       Bu kısım, gradyan renginin sorunsuz görünmesini sağlar. */
}

/* Detaylı Bilgi Bağlantı Stili */
.detail-link {
    display: block;
    margin-top: 15px;
    color: #0082CF; /* Mavi gradyanın başlangıç rengine yakın */
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.detail-link:hover {
    text-decoration: underline;
}
@media (max-width: 1512px) and (min-width: 1440px){ 
    .nav-menu, .navbar{
        padding-inline: 190px!important;
    }
 }

/* Small laptops (MacBook Air 13") */
@media (max-width: 1440px) and (min-width: 1080px){
   .nav-menu, .navbar{
        padding-inline: 100px!important;
    }
  }