/* =========================================
   GLOBAL VARIABLES
========================================= */
:root{
  --green-700: #0f7b37;
  --green-600: #13803b;
  --green-800: #0b5b28;
  --bg: #f3f6f8;
  --card: #ffffff;
  --muted: #666;
  --accent: #0a7cff;
  --radius-lg: 18px;
  --radius-md: 10px;
  --shadow-1: 6px 6px 18px rgba(12,22,12,0.06);
  --shadow-2: -6px -6px 18px rgba(255,255,255,0.7);
}

/* =========================================
   RESET
========================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, Arial, sans-serif;
  background: linear-gradient(180deg, #e8f3ea 0%, #eef6f2 60%);
  color:#0b2e13;
  line-height:1.45;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

/* =========================================
   NAVBAR
========================================= */
.navbar{
  position:fixed;
  inset:0 0 auto 0;
  height:68px;
  display:flex;
  align-items:center;
  background: linear-gradient(90deg, rgba(11,43,19,0.95), rgba(12,52,24,0.95));
  box-shadow: 0 4px 18px rgba(3,10,6,0.12);
  z-index:1200;
}
.nav-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}
.logo{
  height:42px;
  border-radius:8px;
}

nav a{
  color:#fff;
  text-decoration:none;
  margin-left:18px;
  font-weight:600;
  opacity:0.95;
}
nav a:hover{
  opacity:1;
  text-decoration:underline;
}

.btn-nav{
  background:var(--green-700);
  color:#fff;
  padding:8px 14px;
  border-radius:9px;
  font-weight:700;
  text-decoration:none;
  margin-left:10px;
}

/* =========================================
   HERO SECTION
========================================= */
.hero{
  padding-top:110px;
  padding-bottom:36px;
  text-align:center;
}
.hero-content img{
  height:86px;
  margin-bottom:6px;
}
h1{
  font-size:36px;
  color:var(--green-800);
  margin:6px 0;
}
.lead{
  color:var(--muted);
  margin-bottom:20px;
}

/* Buttons */
.actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.btn-primary{
  background:var(--card);
  color:var(--green-800);
  padding:12px 22px;
  border-radius:12px;
  border:0;
  font-weight:700;
  cursor:pointer;
  box-shadow: var(--shadow-1), var(--shadow-2);
}

/* =========================================
   SCREENSHOT GRID
========================================= */
.screenshot-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}
.shot{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  cursor:pointer;
  box-shadow:10px 10px 30px rgba(10,20,10,0.06);
}

/* Responsive */
@media(max-width:900px){
  .screenshot-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .screenshot-grid{grid-template-columns:1fr;}
  .shot{height:160px;}
}

/* =========================================
   FEATURES SECTION
========================================= */
.section{
  padding:48px 18px;
  text-align:center;
}
.features-list{
  list-style:none;
  padding:0;
}
.features-list li{
  margin:6px 0;
  font-size:16px;
}

/* =========================================
   VIDEO SECTION
========================================= */
.yt-box{
  display:flex;
  justify-content:center;
}
.yt-box iframe{
  width:100%;
  max-width:760px;
  height:420px;
  border-radius:10px;
  border:0;
  box-shadow:0 8px 30px rgba(3,10,6,0.08);
}

/* =========================================
   FOOTER
========================================= */
.footer{
  padding:26px;
  text-align:center;
  background:linear-gradient(90deg,#0b3b1b,#093018);
  color:white;
  margin-top:40px;
}

/* =========================================
   HR Smooth Green–Gold UNKHAIR
========================================= */
hr {
    width: 100%;
    height: 2px;
    border: none;
    margin: 40px auto;
    background: linear-gradient(
        to right,
        transparent,
        rgba(15, 123, 55, 0.35),   /* hijau soft */
        rgba(212, 175, 55, 0.65), /* emas lembut */
        rgba(15, 123, 55, 0.35),
        transparent
    );
    border-radius: 100px;
    opacity: 0.85;
    filter: blur(0.3px); /* garis lebih halus */
    transition: opacity .3s ease;
}

/* saat hover efek mewah */
hr:hover {
    opacity: 1;
    filter: blur(0px) brightness(1.2);
}

/* ============================
   NAVBAR LOGO + TEXT PREMIUM
============================= */
.logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin-top: 2px;
    position: relative;

    /* Glow hijau-emas lembut */
    text-shadow:
        0 0 4px rgba(255, 215, 0, 0.35),
        0 0 8px rgba(15, 123, 55, 0.45),
        0 0 14px rgba(255, 255, 255, 0.15);
}

.logo-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    border-radius: 3px;

    /* Garis emas smooth */
    background: linear-gradient(90deg, #d4af37, #ffea8a, #d4af37);
    box-shadow:
        0 0 4px rgba(255, 215, 0, 0.6),
        0 0 8px rgba(212, 175, 55, 0.4);
}



/* =========================================
   BASE MODAL
========================================= */
.modal, .imgModal{
  display:none;
  position:fixed;
  inset:0;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  z-index:2000;
  padding:28px;
}
.modal-inner{
  background:white;
  border-radius:18px;
  padding:30px;
  width:100%;
  max-width:640px;
  animation:pop .22s ease-out;
}

/* Animation */
@keyframes pop{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}
}

/* =========================================
   DOWNLOAD MODAL
========================================= */
.download{
  text-align:center;
}
.download .modal-logo{
  height:60px;
}

/* =========================================
   DEMO MODAL
========================================= */
.demo-box{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.demo-logo{
  height:70px;
  margin-bottom:12px;
}
.demo-title{
  font-size:26px;
  color:var(--green-800);
  margin-bottom:10px;
}
.demo-info{
  margin-top:10px;
  font-weight:600;
  color:#133d20;
}
.demo-email{
  margin:14px 0;
  font-weight:700;
}

/* Buttons inside modal */
.modal-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
}
.btn-action{
  padding:12px 22px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  min-width:150px;
}
.btn-action.primary{
  background:linear-gradient(180deg,var(--green-600),var(--green-800));
  color:white;
}
.btn-action.ghost{
  background:white;
  border:2px solid #ccc;
  color:#444;
}

/* =========================================
   IMAGE VIEWER
========================================= */
.imgModal .modal-inner{
  max-width:1100px;
  background:transparent;
  box-shadow:none;
}
.imgModal img{
  max-width:100%;
  max-height:85vh;
  border-radius:14px;
}



/* =========================================
   PRELOADER WITH LOGO + SPINNER
========================================= */
#preloader{
  position:fixed;
  inset:0;
  background:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:3000;
  transition:opacity .6s ease, visibility .6s ease;
}

.preloader-logo{
  width:90px;
  margin-bottom:20px;
  animation:fadein .8s ease-out;
}

/* Spinner */
.preloader-spinner{
  width:40px;
  height:40px;
  border:4px solid #d3edd8;
  border-top-color:var(--green-700);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* Fade-out */
#preloader.preloader-hide{
  opacity:0;
  visibility:hidden;
}

/* Animations */
@keyframes spin{
  to{ transform:rotate(360deg); }
}
@keyframes fadein{
  from{ opacity:0; transform:scale(.8);}
  to{ opacity:1; transform:scale(1);}
}

/* =========================================
   PRELOADER WITH LOGO + PROGRESS BAR
========================================= */
#preloader{
  position:fixed;
  inset:0;
  background:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:3000;
  transition:opacity .6s ease, visibility .6s ease;
}

.preloader-logo{
  width:90px;
  margin-bottom:22px;
  animation:fadein .7s ease-out;
}

/* Wrapper bar */
.preloader-bar{
  width:160px;
  height:10px;
  background:#e5f2e8;
  border-radius:50px;
  overflow:hidden;
  position:relative;
}

/* Fill bar (animated) */
.preloader-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--green-600), var(--green-800));
  border-radius:50px;
  animation:loading-anim 2.2s ease-in-out forwards;
}

/* Hide animation */
#preloader.preloader-hide{
  opacity:0;
  visibility:hidden;
}

/* Fade effect */
@keyframes fadein{
  from{opacity:0; transform:scale(.8);}
  to  {opacity:1; transform:scale(1);}
}

/* Filling bar animation */
@keyframes loading-anim{
  0%{width:0%;}
  20%{width:20%;}
  40%{width:45%;}
  60%{width:60%;}
  75%{width:75%;}
  100%{width:100%;}
}

/* =========================================
   MULTICOLOR PREMIUM PRELOADER
========================================= */
#preloader{
  position:fixed;
  inset:0;
  background:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:3000;
  transition:opacity .6s ease, visibility .6s ease;
}

.preloader-logo{
  width:90px;
  margin-bottom:26px;
  animation:fadein .7s ease-out;
}

/* Wrapper bar */
.preloader-bar{
  width:180px;
  height:12px;
  background:#e9e9e9;
  border-radius:50px;
  overflow:hidden;
  box-shadow:0 0 12px rgba(0,0,0,0.08) inset;
  position:relative;
}

/* Multicolor animated fill */
.preloader-fill{
  height:100%;
  width:100%;
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    #ff3d00,
    #ff9100,
    #ffee00,
    #00e676,
    #00b0ff,
    #6200ea,
    #ff3d00
  );
  background-size:400% 100%;
  animation:multiBar 2.5s ease infinite;
  filter:drop-shadow(0 0 4px rgba(0,0,0,0.12));
  border-radius:50px;
}

/* Fade effect */
#preloader.preloader-hide{
  opacity:0;
  visibility:hidden;
}

/* Fade-in logo */
@keyframes fadein{
  from{opacity:0; transform:scale(.85);}
  to  {opacity:1; transform:scale(1);}
}

/* Wavy multicolor movement */
@keyframes multiBar{
  0%{background-position:0% 0%;}
  50%{background-position:100% 0%;}
  100%{background-position:0% 0%;}
}


/* =========================================
   PRELOADER HIJAU EMAS (UNKHAIR)
========================================= */
#preloader{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, #e6f2e8 0%, #f9fff8 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:3000;
  transition:opacity .65s ease, visibility .65s ease;
}

.preloader-logo{
  width:90px;
  margin-bottom:28px;
  animation:fadein .8s ease-out;
}

/* Wrapper bar */
.preloader-bar{
  width:200px;
  height:14px;
  background:#dfe9e2;
  border-radius:50px;
  overflow:hidden;
  box-shadow:
    0 0 12px rgba(16, 63, 28, 0.15) inset,
    0 0 6px rgba(0,0,0,0.07);
  position:relative;
}

/* Green–Gold flowing bar */
.preloader-fill{
  height:100%;
  width:100%;
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    #0f7b37,
    #0f9b3c,
    #d4af37,
    #f6d76f,
    #0f7b37
  );
  background-size:300% 100%;
  animation:greenGoldFlow 2.8s ease-in-out infinite;
  border-radius:50px;
  filter:drop-shadow(0 0 6px rgba(212, 175, 55, .45));
}

#preloader.preloader-hide{
  opacity:0;
  visibility:hidden;
}

/* Fade logo */
@keyframes fadein{
  from{opacity:0; transform:scale(.85);}
  to  {opacity:1; transform:scale(1);}
}

/* Smooth flowing */
@keyframes greenGoldFlow{
  0%{background-position:0% 0%;}
  50%{background-position:100% 0%;}
  100%{background-position:0% 0%;}
}

/* ============================
   MOBILE NAVBAR — 2 ROWS
   ============================ */
@media (max-width: 600px) {

  /* Navbar lebih tinggi dan kolom */
  .navbar {
      height: auto;
      padding: 10px 0;
  }

  .nav-flex {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 0;
  }

  /* Row 1: logo + teks */
  .nav-brand {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .logo {
      height: 40px;
  }

  .nav-brand-text {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
  }

  /* Row 2: menu */
  nav {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 6px;

      scrollbar-width: none;
  }
  nav::-webkit-scrollbar {
      display: none;
  }

  nav a {
      white-space: nowrap;
      font-size: 14px;
      padding: 6px 10px;
  }

  .btn-nav {
      font-size: 14px;
      padding: 6px 12px;
  }
}