.nb22-container{max-width:1200px;margin:auto;padding:0 20px}
.nb22-header{background:#06183e;color:white;padding:25px 0}
.nb22-header .nb22-container{display:flex;justify-content:space-between}
.nb22-header a{color:white;margin-left:25px;text-decoration:none}
.nb22-logo{font-weight:bold}
.nb22-hero{background:linear-gradient(135deg,#06183e,#176cff);color:white;padding:90px 0}
.nb22-grid{display:grid;grid-template-columns:1fr 400px;gap:50px}
.nb22-hero h1{font-size:50px}
.nb22-btn{display:inline-block;padding:14px 25px;background:white;color:#06183e;border-radius:10px;margin:15px 10px 0 0}
.nb22-btn.outline{background:none;color:white;border:1px solid white}
.nb22-server{background:#ffffff22;padding:30px;border-radius:20px}
.nb22-server div{height:55px;background:#ffffff33;margin:15px;border-radius:8px}
.nb22-domain{background:white;max-width:1000px;margin:40px auto 0;padding:15px;border-radius:15px;display:flex}
.nb22-domain input{flex:1;padding:15px;border:0}
.nb22-domain button{background:#176cff;color:white;border:0;padding:0 30px;border-radius:8px}
.nb22-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding-top:70px;padding-bottom:70px}
.nb22-cards div{padding:30px;border-radius:20px;box-shadow:0 10px 30px #ddd}
.nb22-dark{background:#06183e;color:white;padding:60px 0}
.nb22-features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.nb22-features div{background:#ffffff15;padding:20px;border-radius:10px}
.nb22-footer{background:#06183e;color:white;padding:30px}


/* Nurbilisim v49 homepage visual improvements */
.nb-hero, .hero {
    padding: 90px 0;
    min-height: 480px;
}
.nb-card, .card {
    border-radius: 18px;
    transition: .3s ease;
}
.nb-card:hover, .card:hover {
    transform: translateY(-6px);
}
.packages, .nb-packages {
    padding: 70px 0;
}
.features div {
    border-radius: 16px;
    min-height: 130px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.data, .vps-area {
    border-radius:20px;
    padding:60px 30px;
}


/* v50 homepage design layer */
.hero, .nb-hero {
    background: linear-gradient(120deg,#071735,#176cff);
    padding:100px 0;
}

.domain-box, .nb-domain {
    max-width:900px;
    margin:35px auto 0;
    background:#fff;
    padding:12px;
    border-radius:16px;
    display:flex;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.domain-box input, .nb-domain input {
    flex:1;
    border:0;
    padding:18px;
    font-size:16px;
}

.domain-box button, .nb-domain button {
    border-radius:12px;
    padding:0 35px;
}

.card, .nb-card {
    border-radius:22px;
    padding:35px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.vps-area, .data {
    border-radius:24px;
    background:#071735;
    color:#fff;
    padding:70px 40px;
    margin:60px 0;
}

.features div {
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}


/* v51 hosting package cards */
.package-grid,.cards,.products-row{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:24px;
}

.package-card,.card,.nb-card{
 position:relative;
 overflow:hidden;
 min-height:430px;
}

.package-card:before,.card:before,.nb-card:before{
 content:"";
 display:block;
 height:6px;
 background:#176cff;
 position:absolute;
 top:0;
 left:0;
 right:0;
}

.package-card h3,.card h3,.nb-card h3{
 margin-top:18px;
 font-size:24px;
}

.package-card .price,.card strong,.nb-card strong{
 display:block;
 font-size:38px;
 margin:20px 0;
}

.package-card ul,.card ul,.nb-card ul{
 padding:0;
 list-style:none;
}

.package-card li,.card li,.nb-card li{
 padding:10px 0;
 border-bottom:1px solid rgba(255,255,255,.12);
}

.package-card button,.card button,.nb-card button{
 margin-top:25px;
 width:100%;
}

@media(max-width:900px){
 .package-grid,.cards,.products-row{
  grid-template-columns:repeat(2,1fr);
 }
}

@media(max-width:600px){
 .package-grid,.cards,.products-row{
  grid-template-columns:1fr;
 }
}


/* v52 package slider */
.package-slider,
.products-slider {
    overflow:hidden;
    position:relative;
}

.package-track,
.products-track {
    display:flex;
    gap:24px;
    transition:transform .5s ease;
}

.package-track > *,
.products-track > * {
    flex:0 0 calc(25% - 18px);
}

.slider-arrow {
    width:42px;
    height:42px;
    border-radius:50%;
    border:0;
    cursor:pointer;
    background:#071735;
    color:#fff;
}

.package-card:hover,
.card:hover {
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}

@media(max-width:900px){
 .package-track > *,
 .products-track > * {
   flex-basis:calc(50% - 12px);
 }
}

@media(max-width:600px){
 .package-track > *,
 .products-track > * {
   flex-basis:100%;
 }
}


/* v53 package detail polish */
.package-card,
.card,
.nb-card {
    background: linear-gradient(180deg,#0a2048,#061735);
    border-radius:22px;
    padding:35px 28px;
    color:#fff;
}

.package-card h3,
.card h3,
.nb-card h3 {
    text-align:center;
    font-weight:700;
}

.package-card .price,
.card strong,
.nb-card strong {
    text-align:center;
    display:block;
    color:#fff;
}

.package-card .popular,
.popular-badge {
    position:absolute;
    top:15px;
    right:15px;
    padding:6px 12px;
    border-radius:20px;
    background:#ff3864;
    color:#071735;
    font-size:12px;
    font-weight:bold;
}

.package-card ul li,
.card ul li,
.nb-card li {
    padding:12px 0;
}

.package-card button,
.card button,
.nb-card button {
    border-radius:30px;
    font-weight:bold;
}


/* v54 VPS and infrastructure sections */
.vps-section,
.vps-area,
.data-center {
    padding:80px 30px;
    border-radius:28px;
    background:linear-gradient(135deg,#071735,#102d66);
    color:#fff;
    margin:60px 0;
}

.vps-cards,
.infrastructure-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:35px;
}

.vps-cards .item,
.infrastructure-cards .item {
    background:rgba(255,255,255,.08);
    padding:30px;
    border-radius:18px;
}

.vps-cards h3,
.infrastructure-cards h3 {
    margin-bottom:12px;
}

@media(max-width:900px){
 .vps-cards,.infrastructure-cards{
  grid-template-columns:1fr;
 }
}


/* v55 why us section */
.why-section,
.features-section {
    padding:80px 0;
}

.why-grid,
.features-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.why-card,
.feature-card {
    background:#fff;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.3s;
}

.why-card:hover,
.feature-card:hover {
    transform:translateY(-6px);
}

.why-card .icon,
.feature-card .icon {
    width:60px;
    height:60px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#071735;
    color:#fff;
}

@media(max-width:900px){
 .why-grid,.features-grid{
  grid-template-columns:repeat(2,1fr);
 }
}

@media(max-width:600px){
 .why-grid,.features-grid{
  grid-template-columns:1fr;
 }
}

/* v56 real package slider */
.package-slider {
    overflow:hidden;
    position:relative;
}
.package-track {
    display:flex;
    gap:24px;
    width:max-content;
    animation:none;
}
.package-track:hover {
    animation-play-state:paused;
}
.package-track .card,
.package-track .package-card,
.package-track .nb-card {
    width:280px;
    flex:none;
}
@keyframes packageMove {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}
.slider-controls {
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

/* v57 real package slider */
.package-slider{
 overflow:hidden;
 position:relative;
 width:100%;
}
.package-track{
 display:flex !important;
 gap:24px;
 transition:transform .5s ease;
}
.package-track .card,
.package-track .nb-card,
.package-track .package-card{
 flex:0 0 calc(25% - 18px);
}
.package-controls{
 display:flex;
 justify-content:center;
 gap:15px;
 margin-top:25px;
}
.package-controls button{
 width:42px;
 height:42px;
 border-radius:50%;
 cursor:pointer;
}
@media(max-width:900px){
 .package-track .card,
 .package-track .nb-card,
 .package-track .package-card{
 flex-basis:calc(50% - 12px);
 }
}
@media(max-width:600px){
 .package-track .card,
 .package-track .nb-card,
 .package-track .package-card{
 flex-basis:100%;
 }
}

/* v60 package slider */
.package-slider{overflow:hidden;width:100%;position:relative;}
.package-track{display:flex!important;flex-wrap:nowrap!important;width:max-content!important;transition:transform .7s ease;}
.package-track .card,.package-track .package-card,.package-track .nb-card{flex:0 0 280px!important;width:280px!important;}
.package-controls{display:flex;justify-content:center;gap:12px;margin-top:20px;}

/* v61 package slider layout fix */
.package-slider,
.products-slider,
.slider-wrapper {
    overflow:hidden !important;
    width:100% !important;
}

.package-track,
.products-track,
.slider-wrapper .track {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:max-content !important;
}

.package-track > *,
.products-track > *,
.slider-wrapper .track > * {
    display:block !important;
    flex:0 0 280px !important;
    width:280px !important;
    margin-right:24px !important;
}

.package-slider .cards,
.package-slider .row {
    display:flex !important;
    flex-wrap:nowrap !important;
}

@media(max-width:900px){
 .package-track > *,
 .products-track > * {
    flex-basis:50% !important;
 }
}

@media(max-width:600px){
 .package-track > *,
 .products-track > * {
    flex-basis:100% !important;
 }
}

/* v65 package slider overflow + navigation */
.package-slider,
.package-wrapper,
.hosting-slider {
    position:relative !important;
    width:100% !important;
    max-width:1200px !important;
    margin:0 auto !important;
    overflow:hidden !important;
}

.package-track,
.hosting-slider-track {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:24px !important;
    transition:transform .45s ease !important;
    will-change:transform;
}

.package-track > *,
.hosting-slider-track > * {
    flex:0 0 calc((100% - 72px) / 4) !important;
    max-width:calc((100% - 72px) / 4) !important;
}

.slider-arrow,
.package-arrow {
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:absolute !important;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    z-index:10;
    cursor:pointer;
}

.slider-prev,
.package-prev {
    left:10px;
}

.slider-next,
.package-next {
    right:10px;
}

@media(max-width:900px){
.package-track > *,
.hosting-slider-track > * {
    flex-basis:calc((100% - 24px) / 2) !important;
    max-width:calc((100% - 24px) / 2) !important;
}
}

@media(max-width:600px){
.package-track > *,
.hosting-slider-track > * {
    flex-basis:100% !important;
    max-width:100% !important;
}
}

/* v66 package viewport fix */
.package-slider,
.hosting-slider,
.package-wrapper {
    width:100% !important;
    max-width:1200px !important;
    margin:0 auto !important;
    overflow:hidden !important;
}

.package-track,
.hosting-slider-track {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:20px !important;
    width:100% !important;
}

.package-track > *,
.hosting-slider-track > * {
    box-sizing:border-box !important;
    flex:0 0 calc((100% - 60px) / 4) !important;
    max-width:calc((100% - 60px) / 4) !important;
    margin:0 !important;
}

@media(max-width:900px){
.package-track > *,
.hosting-slider-track > * {
    flex:0 0 calc((100% - 20px) / 2) !important;
    max-width:calc((100% - 20px) / 2) !important;
}
}

@media(max-width:600px){
.package-track > *,
.hosting-slider-track > * {
    flex:0 0 100% !important;
    max-width:100% !important;
}
}

/* v67 package slider final */
.package-slider,
.hosting-slider {
    position:relative;
    overflow:hidden;
    width:100%;
}

.package-track,
.hosting-slider-track {
    display:flex !important;
    flex-wrap:nowrap !important;
    transition:transform .6s ease;
    gap:24px;
}

.package-track > *,
.hosting-slider-track > * {
    flex:0 0 calc((100% - 72px) / 4) !important;
    box-sizing:border-box;
    min-height:430px;
}

.package-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    z-index:10;
    cursor:pointer;
}

.package-prev {
    left:10px;
}

.package-next {
    right:10px;
}

@media(max-width:900px){
 .package-track > *,
 .hosting-slider-track > * {
    flex-basis:calc((100% - 24px) / 2) !important;
 }
}

@media(max-width:600px){
 .package-track > *,
 .hosting-slider-track > * {
    flex-basis:100% !important;
 }
}

/* v68 visible slider controls */
.package-slider,
.hosting-slider {
    position:relative;
}

.package-arrow {
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:#ffb000;
    color:#071936;
    border:none;
    font-size:22px;
    font-weight:bold;
}

.package-prev {
    left:15px !important;
}

.package-next {
    right:15px !important;
}

/* v70 slider arrow position fix */
.nb-carousel{
    padding-left:70px;
    padding-right:70px;
    overflow:hidden;
}

.nb-carousel .package-arrow{
    width:44px;
    height:44px;
    top:50%;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nb-carousel .package-prev{
    left:10px;
}

.nb-carousel .package-next{
    right:10px;
}

/* keep arrows outside card content */
.nb-track .card{
    position:relative;
}

/* v70 test packages */

/* v72 safe package slider */
.nb-carousel {
    position: relative;
    width:100%;
}
.nb-carousel .nb-track {
    display:flex;
    transition:transform .5s ease;
}
.nb-carousel .package-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:30;
}
.nb-carousel .package-prev { left:-55px; }
.nb-carousel .package-next { right:-55px; }

/* v73 package slider layout fix */
.nb-carousel{
    position:relative;
    overflow:visible;
    padding:0 55px;
}

.nb-carousel .nb-track{
    overflow:hidden;
    display:flex;
}

.nb-carousel .package-arrow{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%);
    z-index:99;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nb-carousel .package-prev{
    left:0!important;
}

.nb-carousel .package-next{
    right:0!important;
}

.nb-carousel .card{
    flex:0 0 calc(25% - 18px);
}

@media(max-width:900px){
 .nb-carousel .card{
    flex-basis:calc(50% - 12px);
 }
}

@media(max-width:600px){
 .nb-carousel .card{
    flex-basis:100%;
 }
}

.v74-package-wrapper{position:relative;overflow:hidden;padding:0 60px}
.v74-package-wrapper .package-arrow{position:absolute;top:50%;z-index:50;transform:translateY(-50%)}
.v74-package-wrapper .package-prev{left:5px}
.v74-package-wrapper .package-next{right:5px}

.v75-viewport{overflow:hidden;width:100%}
.v75-track{display:flex;gap:24px;transition:.5s ease}
.v75-track .card{flex:0 0 calc(25% - 18px)}
.v75-track-ready{overflow:visible!important}

.v76-pricing-slider{
 position:relative;
 overflow:hidden;
 padding:0 65px;
}
.v76-viewport{overflow:hidden;width:100%}
.v76-track{
 display:flex;
 gap:24px;
 transition:transform .6s ease;
}
.v76-track .card{
 flex:0 0 calc(25% - 18px);
}
.v76-arrow{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:100;
 width:42px;
 height:42px;
 border-radius:50%;
 background:#ffb000;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
}
.v76-prev{left:10px}
.v76-next{right:10px}

/* v77 slider fix */
.v76-pricing-slider{
    position:relative!important;
    overflow:hidden!important;
    padding:0 55px!important;
}

.v76-viewport{
    overflow:hidden!important;
    width:100%!important;
}

.v76-track{
    display:flex!important;
    flex-wrap:nowrap!important;
    transition:transform .6s ease!important;
    will-change:transform;
}

.v76-track > *{
    flex:0 0 25%!important;
}

.v76-arrow{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    border-radius:50%!important;
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:999!important;
}

.v76-prev{
    left:8px!important;
}

.v76-next{
    right:8px!important;
}