/* =====================================================
   DIGIMPAY PUBLIC HOME V1
===================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;

  color:#f5fbff;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(10,124,207,.35),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #061d36 0%,
      #05213d 48%,
      #061725 100%
    );

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

button,
a{
  font-family:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}


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

.digimpay-home-header{
  position:sticky;
  top:0;
  z-index:100;

  width:100%;

  border-bottom:
    1px solid rgba(78,195,255,.12);

  background:
    rgba(3,20,38,.88);

  backdrop-filter:
    blur(16px);
}

.digimpay-home-header__inner{
  width:min(1120px,100%);
  min-height:76px;

  margin:0 auto;
  padding:0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.digimpay-home-logo{
  width:160px;
  height:64px;

  flex:0 0 160px;

  background:
    url("/assets/brand/digimpay-transparent.png?v=20260823-brand-new-v3")
    center center /
    160px auto
    no-repeat;
}

.digimpay-home-login-small{
  min-height:40px;

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

  padding:0 17px;

  border:
    1px solid rgba(71,198,255,.28);

  border-radius:13px;

  color:#e6f8ff;

  background:
    rgba(20,111,168,.16);

  font-size:13px;
  font-weight:800;
}


/* =====================================================
   CONTENT
===================================================== */

.digimpay-home-main{
  width:min(1120px,100%);
  margin:0 auto;
}


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

.digimpay-home-hero{
  padding:46px 22px 26px;

  text-align:center;
}

.digimpay-home-eyebrow{
  display:inline-flex;

  padding:7px 12px;

  border:
    1px solid rgba(52,207,255,.24);

  border-radius:999px;

  color:#53d8ff;

  background:
    rgba(22,165,219,.10);

  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.digimpay-home-hero h1{
  max-width:700px;

  margin:18px auto 13px;

  font-size:
    clamp(29px,7vw,52px);

  line-height:1.08;

  letter-spacing:-1.2px;
}

.digimpay-home-hero h1 span{
  color:#42cfff;
}

.digimpay-home-hero p{
  max-width:600px;

  margin:0 auto;

  color:#91abc1;

  font-size:14px;
  line-height:1.65;
}


/* =====================================================
   PROMO
===================================================== */

.digimpay-public-promo{
  padding:5px 22px 26px;
}

.digimpay-public-promo__head{
  margin-bottom:12px;

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

.digimpay-public-promo__head strong{
  font-size:18px;
}

.digimpay-public-promo__head span{
  color:#7694ae;
  font-size:10px;
}

#publicPromoArea{
  position:relative;

  width:100%;

  overflow:hidden;

  border:
    1px solid rgba(64,192,255,.22);

  border-radius:24px;

  background:#0b3159;

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

.public-promo-slider{
  position:relative;
  width:100%;
  overflow:hidden;
}

.public-promo-track{
  width:100%;

  display:flex;

  transition:
    transform .45s
    cubic-bezier(.22,.7,.25,1);

  will-change:transform;
}

.public-promo-slide{
  position:relative;

  width:100%;
  flex:0 0 100%;

  aspect-ratio:2.55 / 1;

  min-height:140px;

  overflow:hidden;

  background:#0b3159;
}

.public-promo-slide img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  user-select:none;
  -webkit-user-drag:none;
}

.public-promo-slide.clickable{
  cursor:pointer;
}

.public-promo-dots{
  position:absolute;

  z-index:10;

  left:50%;
  bottom:10px;

  transform:
    translateX(-50%);

  display:flex;
  gap:5px;
}

.public-promo-dot{
  width:6px;
  height:6px;

  padding:0;

  border:0;
  border-radius:999px;

  background:
    rgba(255,255,255,.46);

  transition:.2s;
}

.public-promo-dot.active{
  width:20px;

  background:#fff;
}

.public-promo-placeholder{
  min-height:160px;

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

  padding:25px;

  text-align:center;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(62,215,255,.25),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #0c64c8,
      #063a7d
    );
}

.public-promo-placeholder strong{
  font-size:21px;
}

.public-promo-placeholder span{
  margin-top:7px;

  color:#c6e6ff;

  font-size:12px;
}


/* =====================================================
   LOGIN / REGISTER
===================================================== */

.digimpay-home-auth{
  padding:0 22px 36px;

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

  gap:12px;
}

.digimpay-home-auth a{
  min-height:52px;

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

  border-radius:16px;

  font-size:14px;
  font-weight:900;
}

.digimpay-home-auth-login{
  border:
    1px solid rgba(60,200,255,.34);

  background:
    rgba(26,121,187,.14);

  color:#dff8ff;
}

.digimpay-home-auth-register{
  color:#fff;

  background:
    linear-gradient(
      115deg,
      #166cff,
      #25c8f6
    );

  box-shadow:
    0 10px 28px
    rgba(20,132,240,.26);
}


/* =====================================================
   SERVICES
===================================================== */

.digimpay-home-services{
  padding:6px 22px 50px;
}

.digimpay-home-section-title{
  margin-bottom:18px;
}

.digimpay-home-section-title h2{
  margin:0;

  font-size:24px;
}

.digimpay-home-section-title p{
  margin:7px 0 0;

  color:#809bb3;

  font-size:12px;
}

.digimpay-service-grid{
  display:grid;

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

  gap:12px;
}

.digimpay-service-card{
  min-height:112px;

  padding:16px 12px;

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

  text-align:center;

  border:
    1px solid rgba(65,181,236,.17);

  border-radius:19px;

  background:
    linear-gradient(
      145deg,
      rgba(10,65,110,.72),
      rgba(5,37,70,.78)
    );
}

.digimpay-service-icon{
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  margin-bottom:10px;

  border-radius:14px;

  color:#52d8ff;

  background:
    rgba(25,153,218,.15);

  font-size:19px;
  font-weight:900;
}

.digimpay-service-card strong{
  font-size:11px;
}


/* =====================================================
   FOOTER - gaya perusahaan
===================================================== */

.digimpay-footer{
  margin-top:20px;

  border-top:
    1px solid rgba(97,181,224,.12);

  background:
    #07131f;
}

.digimpay-footer__inner{
  width:min(1120px,100%);

  margin:0 auto;

  padding:
    55px
    26px
    32px;
}

.digimpay-footer-brand-logo{
  width:190px;
  height:72px;

  margin-bottom:15px;

  background:
    url("/assets/brand/digimpay-transparent.png?v=20260823-brand-new-v3")
    left center /
    190px auto
    no-repeat;
}

.digimpay-footer-intro{
  max-width:500px;

  margin:0;

  color:#8b9aaa;

  font-size:13px;
  line-height:1.7;
}

.digimpay-footer-grid{
  margin-top:38px;

  display:grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr
    1fr;

  gap:38px;
}

.digimpay-footer-column h3{
  margin:0 0 16px;

  color:#fff;

  font-size:16px;
}

.digimpay-footer-column p{
  margin:0;

  color:#8997a8;

  font-size:12px;
  line-height:1.7;
}

.digimpay-footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.digimpay-footer-links a{
  width:max-content;
  max-width:100%;

  color:#929dac;

  font-size:13px;

  transition:.2s;
}

.digimpay-footer-links a:hover{
  color:#4fd9ff;
}

.digimpay-footer-address-title{
  margin-top:16px !important;

  color:#eaf5ff !important;

  font-weight:800;
}

.digimpay-footer-contact-link{
  display:inline-block;

  margin-top:10px;

  color:#51d5ff;

  font-size:12px;
  font-weight:800;
}

.digimpay-footer-bottom{
  margin-top:45px;

  padding-top:22px;

  display:flex;
  justify-content:space-between;
  gap:15px;

  border-top:
    1px solid rgba(145,183,209,.10);

  color:#637386;

  font-size:10px;
}


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

@media(max-width:760px){

  .digimpay-home-header__inner{
    min-height:70px;

    padding:
      0 17px;
  }

  .digimpay-home-logo{
    width:145px;
    height:60px;

    flex-basis:145px;

    background-size:
      145px auto;
  }

  .digimpay-home-hero{
    padding:
      34px
      20px
      23px;
  }

  .digimpay-public-promo,
  .digimpay-home-auth,
  .digimpay-home-services{
    padding-left:18px;
    padding-right:18px;
  }

  .digimpay-service-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .digimpay-footer__inner{
    padding:
      45px
      27px
      30px;
  }

  .digimpay-footer-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:
      35px 25px;
  }

}


@media(max-width:370px){

  .digimpay-home-logo{
    width:130px;

    flex-basis:130px;

    background-size:
      130px auto;
  }

  .digimpay-home-login-small{
    padding:0 12px;

    font-size:11px;
  }

}


/* =====================================================
   DIGIMPAY HOME PROVIDER LOGOS V2
===================================================== */

.digimpay-service-provider-box{
  width:105px;
  height:72px;

  margin:0 auto 12px;

  padding:7px;

  display:grid;
  align-items:center;
  justify-items:center;

  gap:4px;

  border:
    1px solid rgba(66,196,255,.16);

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(19,87,137,.48),
      rgba(5,44,82,.62)
    );

  overflow:hidden;
}

.digimpay-service-provider-box img{
  display:block;

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;
}


/* 6 provider */
.digimpay-service-provider-box.provider-six{
  grid-template-columns:
    repeat(3,1fr);

  grid-template-rows:
    repeat(2,1fr);
}


/* Paket Data 7 provider */
.digimpay-service-provider-box.provider-data{
  grid-template-columns:
    repeat(4,1fr);

  grid-template-rows:
    repeat(2,1fr);
}


/* 4 provider */
.digimpay-service-provider-box.provider-four{
  grid-template-columns:
    repeat(2,1fr);

  grid-template-rows:
    repeat(2,1fr);
}


/* 3 provider */
.digimpay-service-provider-box.provider-three{
  grid-template-columns:
    repeat(3,1fr);

  grid-template-rows:1fr;

  align-content:center;
}


/* 1 provider */
.digimpay-service-provider-box.provider-single{
  display:flex;

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

  padding:8px;
}

.digimpay-service-provider-box.provider-single img{
  width:78%;
  height:78%;
}


/* Multifinance */
.digimpay-service-provider-box.finance img{
  padding:2px;

  border-radius:5px;

  background:
    rgba(255,255,255,.94);
}


/* Internet */
.digimpay-service-provider-box.internet img{
  padding:2px;

  border-radius:5px;

  background:
    rgba(255,255,255,.96);
}


/* Game */
.digimpay-service-provider-box.games{
  width:112px;
}

.digimpay-service-provider-box.games img{
  max-height:32px;
}


/* E-Wallet */
.digimpay-service-provider-box.ewallet img{
  max-height:27px;
}


/* BPJS */
.digimpay-service-provider-box.bpjs img{
  width:88%;
  height:88%;
}


/* Kartu layanan sedikit disesuaikan */
.digimpay-service-card{
  min-height:142px;
  padding:14px 8px !important;
}

.digimpay-service-card strong{
  max-width:130px;

  font-size:12px !important;
  line-height:1.25;

  text-align:center;
}


/* Icon kategori Lainnya */
.digimpay-service-more-icon{
  width:82px;
  height:72px;

  margin:0 auto 12px;

  display:flex;

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

  gap:6px;

  border:
    1px solid rgba(66,196,255,.16);

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(19,87,137,.48),
      rgba(5,44,82,.62)
    );
}

.digimpay-service-more-icon span{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#55dcff;

  box-shadow:
    0 0 9px rgba(68,214,255,.34);
}


@media(max-width:370px){

  .digimpay-service-provider-box{
    width:96px;
    height:67px;
  }

  .digimpay-service-card{
    min-height:135px;
  }

}