body{
  margin:0;
  font-family:Arial,sans-serif;
  background:radial-gradient(circle at top,#300000,#050505 70%);
  color:#fff;
}

/* CONTAINER */

.container{
  max-width:1200px;
  margin:auto;
  padding:15px;
  box-sizing:border-box;
}

/* HEADER */

.top-header{
  position:relative;
  width:100%;
  height:90px;
  margin-bottom:12px;
  border:2px solid #ff2222;
  overflow:hidden;
  background-image:url('https://veldrive.com/UpJoQX1L/header-panen.webp');
  background-size:cover;
  background-position:center;
  box-shadow:0 0 20px #ff000044,inset 0 0 20px #ff000033;
}

.top-header-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.15) 45%,
    rgba(0,0,0,.35) 100%
  );
}

.top-header-left{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  align-items:center;
  padding-left:18px;
}

.top-header-left img{
  max-width:120px;
  max-height:34px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 4px #ff0000);
}

/* PROMO TOP */

.promo-top{
  background:linear-gradient(180deg,#ff1e1e,#a50000);
  padding:10px 15px;
  font-weight:bold;
  color:#fff;
  font-size:14px;
  border-bottom:1px solid #ff4444;
  text-align:center;
}

/* PROMO CONTENT */

.promo-content{
  display:grid;
  grid-template-columns:65% 35%;
  gap:10px;
  padding:10px 0;
  align-items:stretch;
}

.promo-left img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  border:2px solid #ffbb00;
  box-shadow:0 0 15px #ff000055;
}

.promo-box {
  width: 120px;
  height: 68px;
  padding: 0;
  font-size: 14px;
  border-radius: 8px;
}
.promo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:15px;
  background:linear-gradient(135deg,#1a1a1a,#550000);
  border:1px solid #ff3333;
  border-radius:10px;
  color:#ffdd00;
  font-weight:900;
  text-transform:uppercase;
  font-size:15px;
}

/* MENU */

.promo-menu{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}

.promo-menu a{
  text-align:center;
  padding:13px;
  background:linear-gradient(180deg,#ff2b2b,#a80000);
  border:1px solid #ff6666;
  border-radius:7px;
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

/* BUTTON PANEL */

.button-panel{
  margin:20px 0;
  padding:16px 20px;
  background:linear-gradient(
181deg, #ff0000, #551313 45%, #d91616);
  border:2px solid #ffffff;
  border-radius:16px;
  box-shadow:0 0 25px #ff000055;
}

.button-panel-inner{
  max-width:760px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:10px;
}

.menu-btn{
  display:block;
  text-align:center;
  padding:14px 18px;
  background:linear-gradient(180deg,#fff700,#d6a800);
  color:#000;
  font-weight:900;
  text-decoration:none;
  border-radius:8px;
  border:2px solid #fff35a;
}

/* LAYOUT */

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
  margin-top:25px;
}

/* CONTENT */

.content{
  background:#0f0f0f;
  padding:25px;
  border-radius:18px;
  border:1px solid #ff2222;
  line-height:1.8;
}

.content h1{
  color:#ff3333;
  text-align:center;
  font-size:26px;
  margin-top:0;
}

.features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:25px;
}

.card{
  background:#f90000;
  border:1px solid #ffffff;
  padding:18px;
  border-radius:15px;
  text-align:center;
}

/* SIDEBAR */

.sidebar{
  background:#111;
  border:1px solid #ff2222;
  border-radius:18px;
  padding:20px;
  height:fit-content;
  box-shadow:0 0 18px #ff000044;
}

.sidebar h3{
  color:#ffcc00;
  margin-top:0;
}

.sidebar-box{
  background:#1a1a1a;
  border-left:4px solid #ff3333;
  padding:14px;
  border-radius:12px;
  margin-bottom:14px;
}

/* REVIEW */

.review-section{
  margin-top:25px;
}

.review-card{
  background:#151515;
  border:1px solid #ff3333;
  border-radius:15px;
  padding:18px;
  margin-bottom:15px;
}

.review-author{
  color:#ffcc00;
  font-weight:bold;
  margin-bottom:8px;
}

.stars{
  color:#ffcc00;
}

/* FAQ */

.faq{
  margin-top:25px;
}

.faq-item{
  background:#151515;
  padding:15px;
  border-radius:12px;
  margin-bottom:12px;
  border-left:4px solid #ff3333;
}

/* BUTTON */

.btn{
  display:block;
  text-align:center;
  padding:12px 28px;
  background:linear-gradient(90deg,#ff9900,#ffcc00);
  color:#000;
  font-weight:bold;
  text-decoration:none;
  border-radius:50px;
  margin-top:15px;
}

/* FOOTER */

.footer{
  text-align:center;
  padding:25px;
  color:#aaa;
}

/* MOBILE */

@media(max-width:900px){

  .promo-content{
    grid-template-columns:1fr;
  }

  .promo-right{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }

  .layout{
    grid-template-columns:1fr;
  }

}

@media(max-width:700px){

  .button-panel-inner{
    grid-template-columns:1fr;
  }

  .promo-menu{
    grid-template-columns:1fr;
  }

  .features{
    grid-template-columns:1fr;
  }

}

/* FIX SEJAJAR BANNER DAN ARTIKEL */
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 15px !important;
}

.top-header,
.promo-top,
.promo-content,
.promo-menu,
.button-panel,
.layout {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 20px !important;
  align-items: start !important;
}

.content {
  width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar {
  width: 100% !important;
  box-sizing: border-box !important;
}
.promo-img-box {
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;

  height: 170px;

  background: #520000;
}

.promo-img-box img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;
}

.promo-img-box:hover img {
  filter: brightness(1.12);
}

.promo-menu{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-top:12px;
  margin-bottom:15px;

  width:100%;
}

.promo-menu a{
  height:48px;

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

  background:linear-gradient(180deg,#ff2d2d,#a50000);

  border:1px solid #ff5555;

  border-radius:8px;

  color:#fff;
  font-weight:800;
  text-decoration:none;

  box-shadow:0 0 12px #ff000033;
}

/* TOMBOL KUNING BAWAH */

.button-panel-inner {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  max-width: 760px;

  margin: auto;
}

.menu-btn {
  height: 48px;

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

  text-align: center;

  border-radius: 8px;
}

/* MOBILE */

@media(max-width:700px){

  .promo-menu,
  .button-panel-inner{
    grid-template-columns:1fr;
  }

}

.side-nav{
  width:100%;

  padding:18px;

  background:linear-gradient(180deg,#5a0000,#180000);

  border:2px solid #ff2222;
  border-radius:8px;

  box-sizing:border-box;
}

.side-nav-title{
  color:#fff;
  font-weight:900;
  margin-bottom:14px;
  font-size:16px;
}

.side-nav-item{
  display:flex;
  align-items:center;

  padding:16px 20px;

  margin-bottom:14px;

  background:linear-gradient(180deg,#202020,#050505);

  border:3px solid #ff3333;
  border-radius:50px;

  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:20px;

  box-shadow:0 0 12px #ff000044;
}

.side-nav-item:hover{
  background:linear-gradient(180deg,#ff1a1a,#700000);
  color:#fff200;
}
.info-box{
  margin-top:auto;

  background:#ff1111;

  border:2px solid #ff5555;
  border-radius:18px;

  padding:16px;

  box-shadow:0 0 12px #ff000055;
}

.info-title{
  color:#d6ff3b;

  font-size:18px;
  font-weight:900;

  margin-bottom:15px;
}

.info-item{
  background:#050505;

  border-radius:8px;

  padding:14px;
  margin-bottom:12px;

  color:#fff;
  font-weight:800;

  line-height:1.5;
}

.info-item a{
  display:block;

  color:#ff2b2b;
  text-decoration:none;

  font-weight:900;
}

@media (max-width: 768px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
  }

  .promo-content,
  .layout {
    display: block !important;
    width: 100% !important;
  }

  .promo-left,
  .promo-left img,
  .side-nav,
  .content,
  .sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  .promo-left img {
    height: auto !important;
    min-height: unset !important;
    object-fit: contain !important;
  }

  .content,
  .sidebar {
    margin-top: 15px !important;
    padding: 16px !important;
  }

  .content h1 {
    font-size: 22px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  .features,
  .button-panel-inner,
  .promo-menu {
    grid-template-columns: 1fr !important;
  }

  .side-nav-item {
    font-size: 16px !important;
    padding: 12px 16px !important;
  }
}

@media (max-width:768px){

  .promo-content{
    display:flex !important;
    flex-direction:column !important;
  }

  .promo-menu{
    order:2 !important;
    margin-top:15px !important;
  }

  .side-nav{
    order:3 !important;
    margin-top:15px !important;
  }

  .promo-left{
    order:1 !important;
  }

}
.promo-right-gif {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.gif-card {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  border: 2px solid #ff2222;
  border-radius: 10px;
  background: #250000;
}

.gif-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.gif-card:hover img {
  filter: brightness(1.12);
}

/* MOBILE AMAN */
@media (max-width: 768px) {
  .promo-right-gif {
    display: none;
  }
}
/* DOWNLOAD APLIKASI TENGAH */

.single-download .button-panel-inner{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.big-download-btn{
  width:420px !important;

  max-width:90%;

  height:70px !important;

  font-size:24px !important;

  font-weight:900;

  border-radius:12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:linear-gradient(180deg,#ffe600,#d9a700) !important;

  color:#000 !important;

  box-shadow:
    0 0 20px #ffcc00aa,
    inset 0 2px 0 #fff6a0;
}

/* MOBILE */

@media(max-width:768px){

  .big-download-btn{
    width:100% !important;
    height:60px !important;
    font-size:20px !important;
  }

}