*{box-sizing:border-box}

.hosting-page{
  padding:1.1rem 1.1rem 2rem;
  background:
    radial-gradient(circle at top left, rgba(64,183,255,.05), transparent 18%),
    radial-gradient(circle at top right, rgba(255,145,0,.05), transparent 18%),
    linear-gradient(180deg, #f8fbfd 0%, #f3f7fb 100%);
}

.hosting-shell{
  width:min(1180px, 100%);
  margin:0 auto;
}

.hosting-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .88fr);
  gap:.8rem;
  align-items:stretch;
  margin-bottom:.9rem;
}

.hosting-hero-copy,
.hosting-hero-points,
.hosting-packages,
.hosting-benefits,
.hosting-addons-preview,
.hosting-faq{
  background:#fff;
  border:1px solid rgba(18,26,36,.07);
  border-radius:1.1rem;
  box-shadow:0 .4rem 1rem rgba(18,26,36,.04);
}

.hosting-hero-copy{
  padding:1rem 1rem;
}

.hosting-kicker,
.hosting-section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  padding:0 .65rem;
  border-radius:999px;
  background:linear-gradient(135deg, #36baf7 0%, #229ed9 100%);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:.45rem;
}

.hosting-hero-copy h1{
  margin:0 0 .45rem;
  font-size:1.7rem;
  line-height:1.08;
  letter-spacing:-.04em;
  color:#121a24;
}

.hosting-hero-copy p{
  margin:0;
  font-size:.88rem;
  line-height:1.45;
  color:#627388;
  max-width:34rem;
}

.hosting-hero-points{
  padding:.75rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.55rem;
}

.hosting-mini-card{
  border:1px solid rgba(18,26,36,.08);
  border-radius:.85rem;
  padding:.75rem .8rem;
  background:linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.hosting-mini-card strong{
  display:block;
  margin-bottom:.2rem;
  font-size:.9rem;
  color:#121a24;
}

.hosting-mini-card span{
  display:block;
  font-size:.78rem;
  color:#697a90;
  line-height:1.35;
}

.hosting-packages,
.hosting-benefits,
.hosting-addons-preview,
.hosting-faq{
  padding:1rem;
  margin-bottom:.9rem;
}

.hosting-section-head{
  margin-bottom:.75rem;
}

.compact-head{
  margin-bottom:.7rem;
}

.hosting-section-head h2{
  margin:0 0 .3rem;
  font-size:1.35rem;
  line-height:1.12;
  letter-spacing:-.03em;
  color:#121a24;
}

.hosting-section-head p{
  margin:0;
  font-size:.84rem;
  line-height:1.45;
  color:#6a7b90;
  max-width:42rem;
}

.hosting-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.75rem;
  align-items:stretch;
}

.hosting-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(18,26,36,.08);
  box-shadow:0 .45rem 1rem rgba(18,26,36,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}

.hosting-card:hover{
  transform:translateY(-2px);
  box-shadow:0 .6rem 1.2rem rgba(18,26,36,.08);
}

.hosting-card-top{
  padding:.9rem .85rem .7rem;
  color:#fff;
}

.launch-card .hosting-card-top{
  background:linear-gradient(135deg, #1ca0df 0%, #147eb5 100%);
}

.scale-card .hosting-card-top{
  background:linear-gradient(135deg, #ff9b2f 0%, #ff7f00 100%);
}

.performance-card .hosting-card-top{
  background:linear-gradient(135deg, #bf34b8 0%, #8b1f87 100%);
}

.hosting-card-badge{
  display:inline-flex;
  align-items:center;
  min-height:1.55rem;
  padding:0 .55rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  font-size:.66rem;
  font-weight:800;
  margin-bottom:.5rem;
}

.hosting-card-top h3{
  margin:0 0 .25rem;
  font-size:1.35rem;
  line-height:1;
  letter-spacing:-.03em;
}

.hosting-card-top p{
  margin:0 0 .55rem;
  font-size:.78rem;
  line-height:1.35;
  color:rgba(255,255,255,.94);
  min-height:2.3rem;
}

.hosting-price-wrap{
  display:flex;
  align-items:flex-end;
  gap:.45rem;
}

.hosting-price{
  font-size:1.75rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.05em;
}

.hosting-price-note{
  margin-top:.15rem;
  font-size:.72rem;
  font-weight:700;
  line-height:1.25;
  opacity:.97;
}

.hosting-card-body{
  padding:.8rem .85rem .85rem;
  display:flex;
  flex-direction:column;
  flex:1;
}

.hosting-feature-list{
  margin:0 0 .7rem;
  padding:0;
  list-style:none;
  display:grid;
  gap:.4rem;
}

.hosting-feature-list li{
  position:relative;
  padding-left:1rem;
  font-size:.8rem;
  line-height:1.35;
  color:#273240;
  font-weight:600;
}

.hosting-feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45rem;
  width:.38rem;
  height:.38rem;
  border-radius:999px;
  background:#20b26b;
  box-shadow:0 0 0 .12rem rgba(32,178,107,.12);
}

.hosting-addon-note{
  border-radius:.8rem;
  padding:.7rem .75rem;
  background:#f7fafc;
  border:1px solid rgba(18,26,36,.07);
  font-size:.76rem;
  line-height:1.35;
  color:#58687b;
  min-height:3rem;
}

.hosting-addon-note strong{
  color:#121a24;
}

.hosting-card-actions{
  margin-top:auto;
  padding-top:.65rem;
}

.hosting-billing-switch{
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.22rem;
  border:1px solid rgba(18,26,36,.08);
  border-radius:.75rem;
  background:#f7fafc;
  margin-bottom:.55rem;
}

.hosting-billing-btn{
  flex:1;
  border:none;
  background:transparent;
  color:#5a697d;
  min-height:1.9rem;
  padding:0 .6rem;
  border-radius:.58rem;
  font-size:.74rem;
  font-weight:800;
  cursor:pointer;
}

.hosting-billing-btn.is-active{
  background:#071526;
  color:#fff;
  box-shadow:0 .25rem .6rem rgba(7,21,38,.10);
}

.hosting-cta-btn{
  width:100%;
  min-height:2.25rem;
  border:none;
  border-radius:.75rem;
  background:#071526;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}

.hosting-cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 .45rem .9rem rgba(7,21,38,.12);
}

.featured-card{
  border:1px solid rgba(255,127,0,.24);
  box-shadow:0 .6rem 1.2rem rgba(255,127,0,.09);
}

.featured-ribbon{
  position:absolute;
  top:.6rem;
  right:.6rem;
  z-index:2;
  min-height:1.55rem;
  padding:0 .6rem;
  border-radius:999px;
  background:#ffffff;
  color:#ff7f00;
  font-size:.63rem;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 .25rem .6rem rgba(18,26,36,.12);
}

.hosting-benefit-grid,
.hosting-addon-grid,
.hosting-faq-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.65rem;
}

.hosting-addon-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.benefit-box,
.hosting-addon-card,
.faq-item{
  border-radius:.9rem;
  padding:.85rem .8rem;
  border:1px solid rgba(18,26,36,.08);
  background:linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.benefit-box h3,
.hosting-addon-card h3,
.faq-item h3{
  margin:0 0 .35rem;
  font-size:.92rem;
  line-height:1.25;
  color:#121a24;
}

.benefit-box p,
.hosting-addon-card p,
.faq-item p{
  margin:0;
  font-size:.78rem;
  line-height:1.4;
  color:#63758a;
}

.benefit-blue{border-color:rgba(28,160,223,.18)}
.benefit-orange{border-color:rgba(255,127,0,.18)}
.benefit-purple{border-color:rgba(191,52,184,.18)}
.benefit-dark{border-color:rgba(7,21,38,.18)}

.addon-blue{border-color:rgba(28,160,223,.18)}
.addon-orange{border-color:rgba(255,127,0,.18)}
.addon-purple{border-color:rgba(191,52,184,.18)}

.ka-hosting-login-popup{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.ka-hosting-login-popup.is-open{
  display:block;
}

.ka-hosting-login-popup__backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,21,38,.46);
}

.ka-hosting-login-popup__dialog{
  position:relative;
  width:min(26rem, calc(100vw - 2rem));
  margin:12vh auto 0;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 1rem 2rem rgba(7,21,38,.22);
  padding:1rem 1rem .9rem;
  z-index:1;
}

.ka-hosting-login-popup__close{
  position:absolute;
  top:.45rem;
  right:.55rem;
  border:none;
  background:transparent;
  color:#6a7b90;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
}

.ka-hosting-login-popup__dialog h3{
  margin:0 1.2rem .45rem 0;
  font-size:1rem;
  color:#121a24;
}

.ka-hosting-login-popup__dialog p{
  margin:0;
  font-size:.84rem;
  line-height:1.5;
  color:#56677b;
}

.ka-hosting-login-popup__link{
  color:#0f78b8;
  font-weight:700;
  text-decoration:none;
}

.ka-hosting-login-popup__link:hover{
  text-decoration:underline;
}

@media (max-width:1200px){
  .hosting-grid{
    grid-template-columns:1fr;
  }

  .hosting-benefit-grid,
  .hosting-faq-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hosting-addon-grid{
    grid-template-columns:1fr;
  }

  .hosting-card-top p,
  .hosting-addon-note{
    min-height:auto;
  }
}

@media (max-width:920px){
  .hosting-hero{
    grid-template-columns:1fr;
  }

  .hosting-hero-copy h1{
    font-size:1.45rem;
  }

  .hosting-section-head h2{
    font-size:1.18rem;
  }
}

@media (max-width:640px){
  .hosting-page{
    padding:.8rem .7rem 1.4rem;
  }

  .hosting-hero-copy,
  .hosting-packages,
  .hosting-benefits,
  .hosting-addons-preview,
  .hosting-faq{
    padding:.75rem;
    border-radius:.9rem;
  }

  .hosting-benefit-grid,
  .hosting-faq-grid{
    grid-template-columns:1fr;
  }

  .hosting-addon-grid{
    grid-template-columns:1fr;
  }

  .hosting-billing-switch{
    flex-direction:row;
  }
}

/* HEADER ALTINA İT (DESKTOP + MOBİL) */
.hosting-page {
  margin-top: var(--menu-height, 190px);
}

/* Eğer mobile header farklıysa */
@media (max-width: 768px) {
  .hosting-page {
    margin-top: var(--menu-height, 170px);
  }
}