/*
Theme Name: Safahost Pro
Theme URI: https://safahost.web.id
Author: Safahost
Description: Tema WP mirip IDWebhost: Mega Menu, Hero Slider, Domain Checker, Fitur, Pricing Card, VPS Grid, Testimoni, Footer Dark. v1.6 Final
Version: 1.6.0
Text Domain: safahost
*/
:root{--blue:#1555DA;--indigo:#0A2C7D;--ink:#0B1633;--bg:#F6F9FF;--muted:#4A5672;--gold:#FFC107}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.wrap{width:min(1200px,92%);margin:0 auto}
small, .small{font-size:13px;color:#4A5672}
.header{background:linear-gradient(180deg,#0E3DA8,#0A2C7D);color:#fff;position:sticky;top:0;z-index:40}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:10px;align-items:center}.brand img{height:34px}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav>ul>li>a{color:#EAF2FF;font-weight:700;padding:10px 6px;display:block}
.nav .btn-primary{padding:8px 14px;border-radius:12px}
.hero .slider{position:relative;overflow:hidden;border-radius:18px;height:500px}
.slide{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0;transition:opacity .6s}
.slide.active{opacity:1}
.slide .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,44,125,.65),rgba(10,44,125,.05) 60%)}
.slide .content{position:absolute;left:6%;top:54%;transform:translateY(-50%);color:#fff;max-width:560px}
.slide h1{margin:0 0 8px;font-size:38px}.slide p{margin:0 0 16px;font-size:18px;color:#EAF2FF}
.btn-primary{background:var(--blue);color:#fff;padding:12px 18px;border-radius:12px;font-weight:900;display:inline-block}
.btn-ghost{border:2px solid #D7E6FF;color:#EAF2FF;padding:10px 16px;border-radius:12px;font-weight:800;display:inline-block;margin-left:8px}
.slider-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center}
.slider-dots button{width:8px;height:8px;border-radius:50%;border:none;background:#BFD3FF;cursor:pointer}.slider-dots button.active{background:#fff}
.domainbox{margin:16px auto 0;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(10,44,125,.12);padding:10px;max-width:900px}
.domainbox form{display:flex;gap:8px}
.domainbox input,.domainbox select{padding:10px 12px;border:1px solid #D7E6FF;border-radius:10px}
.domainbox input{flex:1}
.domainbox button{padding:10px 14px;border:none;border-radius:10px;background:var(--blue);color:#fff;font-weight:900}
.features-home{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
@media(max-width:900px){.features-home{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.features-home{grid-template-columns:1fr}}
.fcard{background:#fff;border:1px solid #E6EEFF;border-radius:16px;box-shadow:0 8px 24px rgba(10,44,125,.07);padding:16px;display:flex;gap:12px;align-items:flex-start}
.fcard img{width:44px;height:44px;border-radius:10px;flex:0 0 44px}
.fcard h4{margin:0 0 6px}.fcard p{margin:0 0 10px;color:#4A5672}.fcard .mini{font-weight:800}
.fcta{text-align:center;margin-top:14px}
.section{padding:44px 0}.section h2{margin:0 0 8px}.lead{color:#4A5672;margin:0 0 16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #E6EEFF;border-radius:16px;box-shadow:0 12px 28px rgba(10,44,125,.06);padding:18px;position:relative;overflow:hidden}
.card .ribbon{position:absolute;right:-40px;top:16px;background:#1555DA;color:#fff;padding:6px 50px;transform:rotate(35deg);font-size:12px}
.card h3{margin:0 0 6px}.price{font-size:30px;color:#1555DA;font-weight:900;margin:6px 0}
.badge{display:inline-block;background:#EAF2FF;color:#0A2C7D;padding:4px 8px;border-radius:10px;font-size:12px;margin-bottom:8px}
.features{list-style:none;margin:12px 0 16px;padding:0}.features li{padding:8px 0;border-bottom:1px dashed #E6EEFF}.features li:last-child{border-bottom:none}
.vpsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.vpsgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vpsgrid{grid-template-columns:1fr}}
.vps{background:#fff;border:1px solid #E6EEFF;border-radius:16px;box-shadow:0 10px 24px rgba(10,44,125,.06);padding:16px}
.vps .sp{color:#4A5672;margin:2px 0}
.footer{background:#0B1633;color:#BFD3FF;padding:36px 0;margin-top:24px}
.footer a{color:#E8F0FF}.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
@media(max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
.notice{background:#EAF2FF;border:1px solid #BCD3FF;color:#0B1633;padding:6px 10px;border-radius:10px;display:inline-block;margin-right:6px}
.table{width:100%;border-collapse:collapse;background:transparent}.table th,.table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.table th{color:#fff}
/* ==== BOXED LAYOUT MODE FOR WHOLE THEME ==== */
body {
  background: linear-gradient(135deg, #dfe9ff, #f6f9ff);
  background-attachment: fixed;
  margin: 0;
  padding: 30px 0; /* beri ruang atas bawah agar box tidak menempel ke tepi */
}

/* Semua bagian utama dibatasi lebar */
.header,
.hero,
.section,
.footer {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(10, 44, 125, 0.08);
  background: #fff; /* pastikan konten tetap kontras */
}

/* Header gradient tetap dipertahankan */
.header {
  background: linear-gradient(180deg, #0E3DA8, #0A2C7D);
  color: #fff;
}

/* Hero image lebih rapi di dalam box */
.hero .slider {
  border-radius: 16px;
  overflow: hidden;
}

/* Konten utama */
.section {
  padding: 44px 24px;
}

/* Footer tetap boxed tapi dark */
.footer {
  background: #0B1633;
  color: #BFD3FF;
  padding: 36px 24px;
  margin-top: 30px;
}

/* Responsif untuk layar kecil */
@media (max-width: 900px) {
  body {
    padding: 10px 0;
  }
  .header,
  .hero,
  .section,
  .footer {
    border-radius: 0;
    box-shadow: none;
  }
}
/* ==== TESTIMONI SLIDER STYLE ==== */
.testi {
  text-align: center;
  padding: 50px 0;
}

.tcard {
  background: #fff;
  border: 1px solid #E6EEFF;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(10,44,125,0.06);
  padding: 22px;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.t-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.t-top h3 {
  font-size: 18px;
  color: #0B1633;
  font-weight: 700;
  margin: 0;
}

.stars {
  color: #FFC107;
  font-size: 18px;
  letter-spacing: 2px;
  margin: 6px 0 10px;
}

.tcard p {
  color: #4A5672;
  font-size: 15px;
  line-height: 1.6;
}

.swiper-pagination-bullet {
  background: var(--blue);
  opacity: 0.4;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}