/* =========================================================
   PADI TRIMULYO MARKETPLACE
   Responsive UI Patch v2
   ========================================================= */

:root{
  --padi-primary:#0f5135;
  --padi-primary-dark:#0b3d29;
  --padi-primary-2:#18794e;

  --padi-accent:#8bd600;
  --padi-accent-soft:#effbdc;

  --padi-bg:#f7faf8;
  --padi-card:#ffffff;

  --padi-text:#17211c;
  --padi-muted:#6f7d75;
  --padi-line:#e3ebe6;

  --padi-shadow:
    0 8px 30px rgba(18,64,43,.07);

  --padi-shadow-hover:
    0 18px 45px rgba(18,64,43,.13);

  --padi-radius:20px;
  --padi-radius-lg:28px;

  --padi-container:1280px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--padi-bg)!important;
  color:var(--padi-text)!important;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Inter,
    Arial,
    sans-serif!important;

  font-size:15px;
  line-height:1.5;
}


.container{
  width:min(calc(100% - 40px), var(--padi-container))!important;
  max-width:var(--padi-container)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


a{
  transition:.2s ease;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
#header,
.header{
  background:#fff!important;
  border-bottom:1px solid var(--padi-line)!important;
  box-shadow:
    0 4px 20px rgba(20,50,35,.04)!important;
}


header .container,
#header .container{
  min-height:70px;
}


/* =========================================================
   BANNER TOP
   ========================================================= */

#home > .banner-box:first-of-type{
  margin-top:24px!important;
  margin-bottom:24px!important;
}


.banner-box{
  width:min(calc(100% - 40px), var(--padi-container))!important;
  max-width:var(--padi-container)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


.banner-box .inside{
  overflow:hidden;
  border-radius:24px;
}


.banner-box img{
  display:block;
  width:100%!important;
  height:auto!important;
  max-height:340px;
  object-fit:cover;
  border-radius:24px;
}


/* =========================================================
   HERO
   ========================================================= */

.padi-hero{
  position:relative;

  width:min(calc(100% - 40px), var(--padi-container));
  max-width:var(--padi-container);

  margin:24px auto 56px;

  padding:
    clamp(42px,5vw,72px)
    clamp(32px,6vw,80px);

  min-height:390px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  overflow:hidden;

  border-radius:32px;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(139,214,0,.25),
      transparent 30%
    ),
    radial-gradient(
      circle at 98% 90%,
      rgba(255,255,255,.08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #0b3d29 0%,
      #145d3d 58%,
      #1c704a 100%
    );

  box-shadow:
    0 22px 60px rgba(11,61,41,.15);

  color:#fff;
}


.padi-hero:after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;

  right:-140px;
  bottom:-210px;

  border-radius:50%;

  border:70px solid rgba(139,214,0,.14);

  pointer-events:none;
}


.padi-badge{
  position:relative;
  z-index:2;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;

  margin-bottom:18px;

  border-radius:999px;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);

  backdrop-filter:blur(6px);

  font-size:12px;
  font-weight:700;
  color:#fff;
}


.padi-hero h1{
  position:relative;
  z-index:2;

  max-width:780px;

  margin:0 0 18px!important;

  color:#fff!important;

  font-size:
    clamp(38px,4.4vw,62px)!important;

  line-height:1.02!important;

  letter-spacing:-2.2px;

  font-weight:800!important;
}


.padi-hero p{
  position:relative;
  z-index:2;

  max-width:680px;

  margin:0;

  color:rgba(255,255,255,.82)!important;

  font-size:
    clamp(15px,1.3vw,18px);

  line-height:1.65;
}


/* =========================================================
   SEARCH HERO
   ========================================================= */

.padi-search{
  position:relative;
  z-index:3;

  width:min(760px,100%);

  margin-top:30px;

  padding:7px;

  display:flex;
  align-items:center;
  gap:8px;

  background:#fff;

  border-radius:16px;

  box-shadow:
    0 18px 40px rgba(0,0,0,.18);
}


.padi-search input[type=text]{
  flex:1;

  height:55px;

  min-width:0;

  padding:0 18px!important;

  background:transparent!important;

  border:0!important;

  outline:none!important;

  box-shadow:none!important;

  color:#1b2922!important;

  font-size:15px!important;
}


.padi-search input::placeholder{
  color:#9aa49e;
}


.padi-search button{
  height:55px;

  min-width:140px;

  padding:0 24px;

  border:0;

  border-radius:12px;

  background:var(--padi-primary)!important;

  color:#fff!important;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:.2s ease;
}


.padi-search button:hover{
  background:
    var(--padi-primary-dark)!important;

  transform:translateY(-1px);
}


/* =========================================================
   HERO INFO
   ========================================================= */

.padi-hero-info{
  position:relative;
  z-index:2;

  display:flex;
  flex-wrap:wrap;
  gap:18px;

  margin-top:18px;

  color:rgba(255,255,255,.82);

  font-size:12px;
}


.padi-hero-info span{
  display:flex;
  align-items:center;
  gap:6px;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.padi-section-head{
  width:min(calc(100% - 40px), var(--padi-container));
  max-width:var(--padi-container);

  margin:
    0 auto 20px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}


.padi-section-label{
  display:block;

  margin-bottom:5px;

  color:var(--padi-primary-2);

  font-size:12px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.6px;
}


.padi-section-head h2{
  margin:0!important;

  color:var(--padi-text)!important;

  font-size:
    clamp(24px,2vw,32px)!important;

  line-height:1.15;

  letter-spacing:-.8px;
}


.padi-section-head p{
  margin:7px 0 0;

  color:var(--padi-muted);

  font-size:14px;
}


.padi-view-all{
  display:inline-flex;
  align-items:center;
  gap:7px;

  color:var(--padi-primary)!important;

  text-decoration:none!important;

  font-size:13px;

  font-weight:700;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.padi-categories{
  width:min(calc(100% - 40px), var(--padi-container));
  max-width:var(--padi-container);

  margin:0 auto 64px;

  display:grid;

  grid-template-columns:
    repeat(8,minmax(0,1fr));

  gap:12px;
}


.padi-cat{
  min-height:130px;

  padding:20px 12px;

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

  background:#fff;

  border:1px solid var(--padi-line);

  border-radius:20px;

  text-decoration:none!important;

  color:var(--padi-text)!important;

  transition:
    transform .2s ease,
    border .2s ease,
    box-shadow .2s ease;
}


.padi-cat:hover{
  transform:translateY(-5px);

  border-color:#c9dfd1;

  box-shadow:var(--padi-shadow-hover);
}


.padi-cat-icon{
  width:58px;
  height:58px;

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

  margin-bottom:12px;

  background:
    var(--padi-accent-soft);

  border-radius:17px;

  font-size:26px;
}


.padi-cat span{
  font-size:13px;

  font-weight:700;

  text-align:center;
}


/* =========================================================
   EPSILON SECTION BLOCK
   ========================================================= */

.home-location,
.home-premium,
.home-blog,
.home-favorite,
.home-business,
.home-users,
.home-latest,
.home-recent{
  margin-top:0!important;
  margin-bottom:64px!important;
}


.home-location .block,
.home-premium .block,
.home-blog .block,
.home-favorite .block,
.home-business .block,
.home-users .block,
.home-latest .block,
.home-recent .block{
  padding:0!important;

  background:transparent!important;

  border:0!important;

  box-shadow:none!important;
}


.block > h2,
.padi-product-title{
  margin:
    0 0 22px!important;

  display:flex!important;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  font-size:
    clamp(23px,2vw,31px)!important;

  color:var(--padi-text)!important;

  line-height:1.2;

  letter-spacing:-.7px;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

#latest-items.products.grid{
  display:grid!important;

  grid-template-columns:
    repeat(4,minmax(0,1fr))!important;

  gap:20px!important;
}


.products.grid{
  gap:18px!important;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.products .simple-wrap,
.products .item,
.products article,
.item,
.product{
  background:#fff!important;

  border:1px solid var(--padi-line)!important;

  border-radius:20px!important;

  overflow:hidden!important;

  box-shadow:var(--padi-shadow)!important;

  transition:
    transform .22s ease,
    box-shadow .22s ease!important;
}


.products .simple-wrap:hover,
.products .item:hover,
.item:hover,
.product:hover{
  transform:translateY(-5px);

  box-shadow:
    var(--padi-shadow-hover)!important;
}


/* gambar card */

.products .img-wrap,
.products .image,
.products .img{
  overflow:hidden;

  border-radius:
    18px 18px 0 0!important;
}


.products img{
  width:100%;

  object-fit:cover;

  transition:
    transform .35s ease;
}


.products .item:hover img,
.products article:hover img{
  transform:scale(1.035);
}


/* title */

.products h3,
.products .title,
.products .name{
  color:var(--padi-text)!important;

  font-size:15px!important;

  font-weight:700!important;

  line-height:1.35!important;
}


/* harga */

.products .price,
.products .item-price{
  color:var(--padi-primary)!important;

  font-size:17px!important;

  font-weight:800!important;
}


/* lokasi */

.products .location,
.products .item-location{
  color:var(--padi-muted)!important;

  font-size:12px!important;
}


/* =========================================================
   EPSILON BUTTONS
   ========================================================= */

.btn,
button,
input[type=submit]{
  border-radius:12px!important;
}


.btn-primary{
  background:
    var(--padi-primary)!important;

  border-color:
    var(--padi-primary)!important;

  color:#fff!important;
}


.btn-secondary{
  background:#fff!important;

  border:1px solid var(--padi-line)!important;

  color:
    var(--padi-primary)!important;
}


/* =========================================================
   CTA UMKM
   ========================================================= */

.padi-umkm-cta{
  width:min(calc(100% - 40px), var(--padi-container));
  max-width:var(--padi-container);

  margin:
    20px auto 72px;

  padding:
    30px 34px;

  display:grid;

  grid-template-columns:
    58px 1fr auto;

  align-items:center;

  gap:22px;

  background:
    linear-gradient(
      135deg,
      #edf8f1,
      #f6fbf7
    );

  border:
    1px solid #dbece1;

  border-radius:24px;
}


.padi-umkm-cta-icon{
  width:58px;
  height:58px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:17px;

  background:#fff;

  color:var(--padi-primary);

  font-size:20px;

  box-shadow:
    0 8px 20px rgba(20,60,40,.08);
}


.padi-umkm-cta h3{
  margin:2px 0 6px!important;

  font-size:22px!important;

  color:var(--padi-text)!important;
}


.padi-umkm-cta p{
  margin:0;

  color:var(--padi-muted);

  font-size:13px;
}


.padi-cta-button,
.padi-umkm-cta > a{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  min-height:48px;

  padding:0 20px;

  background:
    var(--padi-primary);

  border-radius:13px;

  color:#fff!important;

  text-decoration:none!important;

  font-size:13px;

  font-weight:700;

  white-space:nowrap;
}


.padi-cta-button:hover,
.padi-umkm-cta > a:hover{
  background:
    var(--padi-primary-dark);

  transform:translateY(-2px);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
#footer{
  margin-top:20px!important;

  background:#fff!important;

  border-top:
    1px solid var(--padi-line)!important;
}


footer .container{
  padding-top:36px!important;
  padding-bottom:36px!important;
}


/* banner hijau Epsilon sebelum footer */

body > .pre-footer,
body > .footer-top{
  background:
    var(--padi-primary)!important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

  .padi-categories{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }


  #latest-items.products.grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr))!important;
  }


  .padi-hero{
    min-height:350px;
  }

}


/* =========================================================
   TABLET SMALL
   ========================================================= */

@media(max-width:800px){

  .container,
  .padi-hero,
  .padi-section-head,
  .padi-categories,
  .padi-umkm-cta,
  .banner-box{
    width:
      min(calc(100% - 28px),var(--padi-container))!important;
  }


  .padi-hero{
    margin-top:14px;

    margin-bottom:40px;

    padding:42px 28px;

    min-height:auto;

    border-radius:25px;
  }


  .padi-hero h1{
    letter-spacing:-1.5px;
  }


  .padi-categories{
    margin-bottom:46px;

    gap:10px;
  }


  .padi-cat{
    min-height:115px;
  }


  #latest-items.products.grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
  }


  .padi-umkm-cta{
    grid-template-columns:
      50px 1fr;

    padding:26px;
  }


  .padi-umkm-cta-icon{
    width:50px;
    height:50px;
  }


  .padi-cta-button,
  .padi-umkm-cta > a{
    grid-column:
      1 / -1;

    width:100%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  body{
    font-size:14px;
  }


  .container,
  .padi-hero,
  .padi-section-head,
  .padi-categories,
  .padi-umkm-cta,
  .banner-box{
    width:
      calc(100% - 20px)!important;
  }


  /* banner */

  #home > .banner-box:first-of-type{
    margin-top:10px!important;
    margin-bottom:12px!important;
  }


  .banner-box .inside,
  .banner-box img{
    border-radius:16px!important;
  }


  /* hero */

  .padi-hero{
    margin:
      12px auto 35px;

    padding:
      30px 20px 24px;

    min-height:auto;

    border-radius:22px;
  }


  .padi-badge{
    margin-bottom:14px;

    padding:6px 10px;

    font-size:10px;
  }


  .padi-hero h1{
    font-size:
      32px!important;

    line-height:
      1.06!important;

    letter-spacing:-1.2px;

    margin-bottom:
      13px!important;
  }


  .padi-hero h1 br{
    display:none;
  }


  .padi-hero p{
    font-size:13px;
  }


  /* search */

  .padi-search{
    margin-top:22px;

    display:grid;

    grid-template-columns:1fr;

    padding:6px;

    border-radius:15px;
  }


  .padi-search input[type=text]{
    width:100%;

    height:49px;

    padding:
      0 13px!important;
  }


  .padi-search button{
    width:100%;

    height:48px;

    min-width:0;
  }


  .padi-hero-info{
    gap:8px 13px;

    margin-top:15px;

    font-size:10px;
  }


  /* section */

  .padi-section-head{
    align-items:center;

    margin-bottom:14px;
  }


  .padi-section-head h2{
    font-size:23px!important;
  }


  .padi-section-head p{
    max-width:260px;

    font-size:12px;
  }


  .padi-view-all{
    font-size:11px;
  }


  /* categories */

  .padi-categories{
    grid-template-columns:
      repeat(4,minmax(0,1fr));

    gap:7px;

    margin-bottom:42px;
  }


  .padi-cat{
    min-height:92px;

    padding:10px 3px;

    border-radius:15px;
  }


  .padi-cat-icon{
    width:42px;
    height:42px;

    margin-bottom:7px;

    border-radius:13px;

    font-size:20px;
  }


  .padi-cat span{
    font-size:9.5px;
  }


  /* product grid */

  #latest-items.products.grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:10px!important;
  }


  .products.grid{
    gap:10px!important;
  }


  .products .simple-wrap,
  .products .item,
  .products article,
  .item,
  .product{
    border-radius:15px!important;
  }


  .products h3,
  .products .title,
  .products .name{
    font-size:12px!important;
  }


  .products .price,
  .products .item-price{
    font-size:14px!important;
  }


  .products .location{
    font-size:10px!important;
  }


  .block > h2,
  .padi-product-title{
    margin-bottom:14px!important;

    font-size:22px!important;
  }


  /* sections */

  .home-location,
  .home-premium,
  .home-blog,
  .home-favorite,
  .home-business,
  .home-users,
  .home-latest,
  .home-recent{
    margin-bottom:42px!important;
  }


  /* CTA */

  .padi-umkm-cta{
    margin-bottom:45px;

    padding:22px 18px;

    grid-template-columns:1fr;

    gap:14px;
  }


  .padi-umkm-cta-icon{
    width:46px;
    height:46px;
  }


  .padi-umkm-cta h3{
    font-size:19px!important;
  }


  .padi-umkm-cta p{
    font-size:12px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:370px){

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


  .padi-hero h1{
    font-size:
      29px!important;
  }

}