:root{
  --bg:#0b1220;
  --card:#0f1b31;
  --text:#000000;
  --muted:#444444;
  --primary:#22c55e;
  --primary2:#16a34a;
  --border:rgba(255,255,255,.10);
  --red:#f20d22;--red-dark:#cf0718;--black:#111214;--ink:#191a1d;--muted:#666a70;--light:#f6f6f7;--line:#e8e8eb;--white:#fff;
  --radius:18px;--shadow:0 18px 50px rgba(15,15,20,.12)
}
*{box-sizing:border-box}
html, body{
  height: 100%;
}

body{
  margin:0;
  font-family:Inter, system-ui, Arial;
  background:linear-gradient(180deg, #ffffff, #ffffff);
  color:var(--text);

  min-height: 100vh;
  display: flex;
  flex-direction: column;

}
main{
  flex: 1; /* dorong footer ke bawah */
}
.iconlogoheader{
  width: 25px;
  height: auto; /* biar proporsinya tidak berubah */
}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.section h2{font-size:clamp(29px,3.2vw,42px);line-height:1.1;letter-spacing:-1.2px;margin:13px 0;font-weight:900}
.section-dark{background:#111214;color:white}
.section-atas{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}
.section-intro{max-width:500px;color:#b7b7bc;font-size:14px}
.section-intri{max-width:1500px;color:#b7b7bc;font-size:14px}
.section{padding:50px 0}
.section-alt{background:rgba(255,255,255,.03); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-head h2{margin:0; font-size:30px}
.section-head p{margin:10px 0 0; color:var(--muted); line-height:1.7}
.trust{border-top:1px solid #eee;border-bottom:1px solid #eee;padding:12px 0}.trust-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.trust-label{font-size:18px;font-weight:850;opacity:.55}
.dashboard-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;align-items:center}
.checklist{list-style:none;padding:0;margin:20px 0}
.checklist li{margin:10px 0;font-size:14px;color:#555}.checklist li:before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--red);color:#fff;margin-right:9px;font-size:11px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}.step{position:relative;border-top:1px solid #ddd;padding-top:22px}
.step-number{position:absolute;top:-17px;left:0;width:33px;height:33px;background:var(--red);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:850}
.step h3{font-size:14px;margin:0 0 6px}.step p{font-size:12px;color:#696969;margin:0}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:25px}
.price-card{position:relative;border:1px solid #3a3a3e;border-radius:13px;padding:24px;background:#191a1d}
.price-card h3{margin:0;font-size:19px}.price-card p{font-size:12px;color:#b8b8bc}
.price-card ul{list-style:none;padding:0;color:#ddd;font-size:12px;min-height:100px}.price-card li{margin:8px 0}
.price-card li:before{content:"✓";color:var(--red);font-weight:900;margin-right:8px}.price-card .btn{width:100%}
.price-card.popular{border:2px solid var(--red);padding:23px}
.popular-label{position:absolute;left:-1px;right:-1px;top:-13px;background:var(--red);color:#fff;text-align:center;font-size:10px;font-weight:850;padding:5px;border-radius:9px 9px 0 0}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.quote{background:#f7f7f8;border-radius:13px;padding:22px}.quote p{font-size:13px;color:#444}.person{font-size:12px;font-weight:850}.person small{display:block;color:#777;font-weight:500}.stars{color:var(--red);letter-spacing:2px}
.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:35px;align-items:start}
.faq-ites{border-bottom:1px solid #333;padding:14px 0}.faq-ites summary{cursor:pointer;font-size:13px;font-weight:700}.faq-ites p{color:#bcbcc1;font-size:12px;margin-bottom:0}
.final-cta{padding:38px 0;background:linear-gradient(110deg,#fff,#fff2f3)}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta-row h2{margin:0;font-size:clamp(25px,3vw,36px);line-height:1.15}
.cta-row p{color:#666;font-size:13px;margin:8px 0 0}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.eyebrow{display:inline-block;border-radius:999px;background:#ffe5e8;color:var(--red-dark);font-size:11px;font-weight:850;letter-spacing:.04em;padding:6px 12px;text-transform:uppercase}
.btn-red{background:var(--red);color:white;box-shadow:0 8px 18px rgba(242,13,34,.16)}.btn-red:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-outline{border-color:#222;background:#fff;color:#171717}.btn-outline:hover{border-color:var(--red);color:var(--red)}
.feature-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.feature-card{background:#1d1e21;border:1px solid #292a2e;border-radius:13px;padding:19px 15px;min-height:170px}
.feature-card h3{font-size:14px;margin:0 0 7px}.feature-card p{font-size:12px;color:#c2c2c6;margin:0;line-height:1.55}
.feature-icon{font-size:25px;color:var(--red);margin-bottom:15px}
.small{font-size:13px}
.muted{color:var(--muted)}
.navbar{
  position: fixed;
  top: 10;
  left: 0;
  right: 0;
  z-index: 50;
  
  background:rgba(248, 248, 255,.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.imgboxlogoatas{
  width: 100%;
  max-width: 250px;        /* sesuaikan kalau perlu */
  margin: 0 auto;

  border-radius: 2px;
  border: 0px dashed rgba(255,255,255,.18);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;

  aspect-ratio: 16 / 9;   /* kontrol tinggi mengikuti layar */
}
.hero-logoatasind{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* aman: tidak terpotong */
  object-position: center;
  display: block;
}
.center-text{
  text-align: center;
}
.text-orange{
  color:#FF8C00;
}

.text-hijau{
  color:#006400;
}

.text-putih{
  color:#FFFFFF;
}

.text-merah{
  color:#cf0718;
}

.text-mrhbiasa{
  color:#f20d22;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; gap:12px; align-items:center;}
.logo{width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:rgba(251, 140, 1,.14); border:1px solid rgba(251, 140, 1,.35); border-radius:12px;}
.brand-name{font-weight:700}
.brand-sub{font-size:12px; color:var(--muted)}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;

  padding: 8px 10px;
  border-radius: 10px;
  display: inline-block;
}

.nav-links a:hover{background:rgba(255,255,255,.06)}
.burger{display:none; background:transparent; border:1px solid var(--border); color:var(--text);
  padding:5px 5px; border-radius:5px; font-size: 26px;}
.mobile-menu{
  display:none;
  position: fixed;      /* ini kunci biar tidak ketimpa elemen lain */
  left: 0;
  right: 0;
  top: 66px;            /* sesuaikan tinggi navbar bila perlu */
  z-index: 2000;       /* harus lebih tinggi dari navbar */
  padding:14px 0 18px;
  border-top:1px solid var(--border);
  background: rgba(220, 220, 220,.95);
  backdrop-filter: blur(10px);
}

.mobile-menu a{
  color: #000000;
  font-weight: 500;
  text-decoration: none;
  display:block;
  padding:10px 14px;
}

.mobile-menu.open{ display:block; }

.hero{padding:55px 0 30px}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:start}
.hero-text h1{margin:0; font-size:44px; line-height:1.05}
.highlight{color:var(--primary)}
.hero-text p{color:var(--muted); margin:16px 0 20px; font-size:15px; line-height:1.7}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.badge{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);
  padding:10px 12px; border-radius:14px;
  font-size:13px; color:#d9ffe7;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  text-decoration:none;
  padding:12px 16px; border-radius:14px;
  font-weight:600; font-size:14px;
  border:1px solid transparent;
}
.btn-primary{background:var(--primary); color:#06210f}
.btn-primary:hover{background:var(--primary2)}
.hero-card{
  background:rgba(15,27,49,.7);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.hero-card h3{margin:0 0 10px}
.form-card{display:flex; flex-direction:column; gap:10px}
label{font-size:13px; color:var(--muted)}
input, select, textarea{
  width:100%; padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(6,12,26,.35);
  color:var(--text);
  outline:none;
  font:inherit;
}
input:focus, select:focus, textarea:focus{
  border-color:rgba(34,197,94,.45);
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px}
.grid-4{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:18px}
.card{
  background:rgba(15,27,49,.65);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
}
.featured{
  border-color:rgba(34,197,94,.45);
  box-shadow:0 10px 35px rgba(34,197,94,.10);
}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.card h3{margin:0}
.pill{
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-weight:600;
}
.pill-primary{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.35);
  color:#d9ffe7;
}
.list{padding-left:18px; margin:12px 0 0; color:var(--muted)}
.list li{margin:8px 0}
.card-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap}
.price{font-weight:800; color:var(--text)}
.quote{margin:0; color:var(--text); line-height:1.7; font-weight:500}
.who{margin-top:12px; color:var(--muted); font-size:13px}

.imgbox{
    height:220px;
    border-radius:16px;
    border:1px dashed rgba(255,255,255,.18);
    background:linear-gradient(
        135deg,
        rgba(34,197,94,.12),
        rgba(59,130,246,.12)
    );
    overflow:hidden;
    position:relative;
    cursor:pointer;
}

.imgbox img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.imgbox .text{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:10px;
    color:#fff;
    text-align:center;
    background:rgba(0,0,0,.55);
}


/* MODAL */
.image-modal{
    display:none;
    position:fixed;
    z-index:99999;
    inset:0;

    background:rgba(0,0,0,.80);

    align-items:center;
    justify-content:center;

    padding:30px;
}


/* ISI MODAL */
.image-modal-content{
    position:relative;
    max-width:1100px;
    max-height:100vh;
}


/* GAMBAR BESAR */
.image-modal-content img{
    display:block;
    max-width:100%;
    max-height:95vh;

    border-radius:12px;
    box-shadow:0 10px 50px rgba(0,0,0,.5);
}


/* TOMBOL X */
.close-image{
    position:absolute;

    top:-45px;
    right:-10px;

    width:38px;
    height:38px;

    border:0;
    border-radius:50%;

    background:rgba(0,0,0,.7);
    color:#fff;

    font-size:30px;
    line-height:30px;

    cursor:pointer;
}

.close-image:hover{
    background:#000;
}

.faq{margin-top:18px}
.faq-item{
  background:rgba(15,27,49,.65);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 16px;
  margin-bottom:10px;
}
.faq-item summary{cursor:pointer; font-weight:700}
.faq-item p{color:var(--muted); line-height:1.7}

.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
.info-list{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.info-item a{color:var(--text); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25)}
.info-item a:hover{border-bottom-color:var(--primary)}

.footer{
  border-top:1px solid var(--border);
  padding:22px 0;
  margin-top:20px;
  background:rgba(0,0,0,.15);
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; margin-top:18px}

.carss{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(11,92,53,.16);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(11,92,53,.06);
  
  display: flex;
  flex-direction: column;
  align-items: center;     /* ikon (dan text) jadi tengah horizontal */
  text-align: center;
}

.icon{
      width:65px; height:65px; border-radius:16px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(220, 20, 60), rgba(220, 20, 60));
      border:1px solid rgba(11,92,53,.18);
      font-size:1.1rem;
      margin-bottom:6px;
    }

.hero-icondlm{
  width: 85%;
  height: 85%;
  object-fit: contain;     /* aman: tidak terpotong */
  object-position: center;
  display: block;
}

.hero-gambarapp{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* aman: tidak terpotong */
  object-position: center;
  display: block;
}

.philosophy-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 50px;
	margin-bottom: 60px;
}
.pillar {
	position: relative;
	padding: 20px 20px;
	background: linear-gradient(135deg,
			rgba(42, 42, 42, 0.2),
			rgba(26, 26, 26, 0.3));
	border: 1px solid var(--metal-dark);
	border-radius: 20px;
	transition: all 0.4s ease;
	overflow: hidden;
}

.pillar-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	position: relative;
}

.feature-wrap{
      width: min(1100px, 92vw);
      margin: 28px auto;
      padding: 18px 10px;
      
    }
.feature-row{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      align-items: center;
      border-radius: 10px;
    }
.feature-item{
      padding: 10px 14px;
      text-align: left;
      display: flex;
      gap: 14px;
      align-items: center;
    }
 .icostt{
      width: 54px;
      height: 54px;
      border: 3px solid var(--green);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--green);
      flex: 0 0 auto;
      background:#fff;
    }

.icostt-shield{
      border-radius: 10px;
      width: 54px;
      height: 54px;
      position: relative;
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
    }

.titlt{
      font-size: 18px;
      font-weight: 800;
      color: var(--green);
      line-height: 1.1;
      letter-spacing: .2px;
    }

.subtitls{
      margin-top: 2px;
      font-size: 18px;
      font-weight: 800;
      color: var(--green);
      line-height: 1.1;
    }
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; }
  .hero-text h1{font-size:36px}
  .grid-3{grid-template-columns: 1fr; }
  .grid-4{grid-template-columns: repeat(2, 1fr); }
  .contact-grid{grid-template-columns: 1fr;}
  .nav-links{display:none}
  .burger{display:block}
  .mobile-menu{display:none}
}
@media (max-width: 480px){
  .hero-text h1{font-size:30px}
  .grid-4{grid-template-columns: 1fr; }
}
@media (max-width: 950px){
      .section-atas{align-items:start;flex-direction:column}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
      .dashboard-grid{grid-template-columns:1fr}
      .grid-2{grid-template-columns: 1fr;}
      .faq-wrap{grid-template-columns:1fr}
      .feature-row{
        grid-template-columns: repeat(1, 1fr);
      }
      .feature-item:nth-child(odd){
        border-left: none;
      }
      .feature-item:nth-child(n+3){
        border-left: none;
        border-top: 3px solid var(--line);
      }
    }
@media(max-width:680px){.container{width:min(100% - 28px,1180px)}
    .feature-card{padding:15px 12px;min-height:155px}.feature-card h3{font-size:13px}.feature-card p{font-size:11px}
    .trust-label{font-size:14px}.section{padding:50px 0}.feature-grid{grid-template-columns:repeat(2,1fr);gap:9px}
    .steps{grid-template-columns:repeat(2,1fr);row-gap:30px}
    .pricing-grid{grid-template-columns:1fr;gap:22px}.price-card{padding:22px}.price-card.popular{padding:21px}
    .testimonials{grid-template-columns:1fr}.quote{padding:18px}
    .cta-row{align-items:flex-start;flex-direction:column}.cta-row .actions{width:100%}.cta-row .btn{flex:1}.form-grid{grid-template-columns:1fr}
}

.mySlide1 {
		display: none
      }
      img {
        vertical-align: middle;
      }
      .slideshow-containe1 {
        max-width: 1000px;
        position: relative;
        margin: auto;
      }
      /* Next & previous buttons */
      .prev,
      .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
      }
      /* Position the "next button" to the right */
      .next {
        right: 0;
        border-radius: 3px 0 0 3px;
      }
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover,
      .next:hover {
        background-color: rgb(255, 0, 0);
      }
      /* Caption text */
      .text {
        color: #ffffff;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
      }
      /* Number text (1/3 etc) */
      .numbertext {
        color: #ffffff;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }
      /* The dots/bullets/indicators */
      .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #999999;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }
      .activs,
      .dot:hover {
        background-color: #111111;
      }
      /* Fading animation */
      .fads {
        -webkit-animation-name: fads;
        -webkit-animation-duration: 1.5s;
        animation-name: fads;
        animation-duration: 1.5s;
      }
      @-webkit-keyframes fads {
        from {
          opacity: .4
        }
        to {
          opacity: 1
        }
      }
      @keyframes fads {
        from {
          opacity: .4
        }
        to {
          opacity: 1
        }
      }
      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
        .prev,
        .next,
        .text {
          font-size: 11px
        }
      }