@font-face{
    font-family:"Inter Local";
    src:url("../fonts/InterVariable.woff2") format("woff2");
    font-weight:100 900;
    font-style:normal;
}

/* FLOATING DOWNLOAD */
.download-fab{
  position:fixed;
  right:18px;
  bottom:90px; /* di atas bottom nav */
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:#91d3ca;
  color:#102522;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  z-index:9998;
  transition:.25s ease;
}

.download-fab:active{
  transform:scale(.95);
}

.download-fab:hover{
  transform:translateY(-2px);
}


/* HINT */
.download-hint{
  position:fixed;
  right:86px;
  bottom:98px;
  background:#fff;
  color:#102522;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  opacity:0;
  transform:translateX(20px);
  transition:.35s ease;
  z-index:9998;
  pointer-events:none;
}

.download-hint.show{
  opacity:1;
  transform:translateX(0);
}

/* panah bubble */
.download-hint::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  width:12px;
  height:12px;
  background:#fff;
  transform:translateY(-50%) rotate(45deg);
}

.download-fab svg{
  width:26px;
  height:26px;
  display:block;
}

.download-fab svg path{
  stroke:#102522;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}


/* AREA GAMBAR DOWNLOAD */
/* DOWNLOAD OVERRIDE */
#download-schedule,
#download-schedule *{
    max-width:none;
}

#download-schedule{
    pointer-events:none;
    width:1080px !important;
    height:1350px !important;
    box-sizing:border-box;
    position:fixed;
    overflow:hidden;
    background:#91d3ca;
    color:white;
    padding:60px 80px;
    flex-direction:column;
    font-family:"Inter", sans-serif;
    display:flex;
    z-index:-1;
}

#download-schedule img.download-logo{
    max-width:none;
    width:220px;
    height:auto;
}

.download-hidden{
    position:fixed;
    left:-99999px;
    top:0;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
}

#download-content{
    width:100%;
    max-width:none !important;
    flex:1;
    overflow:hidden;
}

.download-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.download-year{
    font-size:70px;
    font-weight:900;
}

.download-logo{
    object-fit:contain;
    width:220px;
}

.download-title{
    width:100%;
    max-width:100%;
    margin:10px 0 25px;
    padding:0;
    font-family:"Inter", sans-serif;
    font-weight:900;
    font-size:90px;
    line-height:.88;
    letter-spacing:-1px;
    text-align:left;
    box-sizing:border-box;
    overflow-wrap:break-word;
    color:#fdf5c4;
}

.download-month{
    font-size:48px;
    font-weight:800;
    margin-top:15px;
}

.download-line{
    height:5px;
    background:white;
    opacity:.85;
    margin:18px 0 24px;
    margin-top:8px;
}

.download-day-group{
    display:grid;
    grid-template-columns:100px 1fr;
    align-items:start;
    margin-bottom:14px;
}

.download-date{
    font-size:35px;
    font-weight:700;
    line-height:1;
    padding-top:2px;
    color:#fdf5c4;
}

.download-events{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:10px;
}

.download-event{
    display:grid;
    grid-template-columns:170px 1fr;
    align-items:baseline;
    column-gap:24px;
}

.download-event .time{
    font-size:35px;
    font-weight:600;
}

.download-event .title{
    font-size:35px;
    font-weight:400;
}

.download-more{
    margin-top:20px;
    text-align:center;
    font-size:24px;
    font-weight:500;
}

.download-footer{
    margin-top:10px;
    text-align:center;
    color:#23453f;
    font-size:30px;
    font-weight:700;
}

.download-more,
.download-footer{
    flex-shrink:0;
}

.download-confetti{
    position:absolute;
    left:0;
    bottom:80px;
    width:100%;
    height:120px;
    pointer-events:none;
}


/* =========================
   DOWNLOAD CONFETTI
========================= */

/* AREA */
.download-confetti{
    position:absolute;
    left:0;
    bottom:110px;
    width:100%;
    height:150px;
    pointer-events:none;
    z-index:1;
}


/* DEFAULT */
.download-confetti span{
    position:absolute;
    width:12px;
    height:35px;
    border-radius:20px;
    opacity:.85;
}


/* COLORS */

.download-confetti span:nth-child(3n+1){
    background:#ffffff;
}

.download-confetti span:nth-child(3n+2){
    background:#6ab3df;
}

.download-confetti span:nth-child(3n+3){
    background:#fdf5c4;
}


/* POSITIONS */

.download-confetti span:nth-child(1){
    left:8%;
    bottom:20px;
    transform:rotate(-25deg);
}


.download-confetti span:nth-child(2){
    left:20%;
    bottom:70px;
    height:25px;
    transform:rotate(40deg);
}


.download-confetti span:nth-child(3){
    left:38%;
    bottom:15px;
    height:45px;
    transform:rotate(15deg);
}


.download-confetti span:nth-child(4){
    left:55%;
    bottom:55px;
    height:28px;
    transform:rotate(-40deg);
}


.download-confetti span:nth-child(5){
    left:68%;
    bottom:20px;
    height:40px;
    transform:rotate(25deg);
}


.download-confetti span:nth-child(6){
    left:78%;
    bottom:80px;
    height:22px;
    transform:rotate(-20deg);
}


.download-confetti span:nth-child(7){
    left:88%;
    bottom:35px;
    height:32px;
    transform:rotate(45deg);
}


.download-confetti span:nth-child(8){
    left:45%;
    bottom:90px;
    height:18px;
    transform:rotate(-15deg);
}


/* VARIASI BENTUK */

.download-confetti span:nth-child(4n){
    border-radius:4px;
}


.download-confetti span:nth-child(5n){
    width:18px;
    height:18px;
    border-radius:3px;
    transform:rotate(45deg);
}


/* LAYER */

.download-top,
.download-title,
#download-content,
.download-more,
.download-footer{
    position:relative;
    z-index:2;
}

.download-confetti-top{
    position:absolute;
    top:150px;
    right:40px;
    width:380px;
    height:240px;
    pointer-events:none;
    z-index:0;
}

.download-confetti-top span{
    position:absolute;
    width:18px;
    height:55px;
    border-radius:30px;
    opacity:.8;
}


/* 3 warna */
.download-confetti-top span:nth-child(3n+1){
    background:#ffffff;
}

.download-confetti-top span:nth-child(3n+2){
    background:#6ab3df;
}

.download-confetti-top span:nth-child(3n+3){
    background:#fdf5c4;
}


/* posisi */
.download-confetti-top span:nth-child(1){
    right:30px;
    top:10px;
    height:75px;
    transform:rotate(30deg);
}

.download-confetti-top span:nth-child(2){
    right:110px;
    top:55px;
    height:40px;
    transform:rotate(-25deg);
}

.download-confetti-top span:nth-child(3){
    right:180px;
    top:20px;
    height:90px;
    transform:rotate(45deg);
}

.download-confetti-top span:nth-child(4){
    right:70px;
    top:130px;
    height:35px;
    transform:rotate(-40deg);
}

.download-confetti-top span:nth-child(5){
    right:210px;
    top:120px;
    width:25px;
    height:25px;
    transform:rotate(45deg);
}

.download-confetti-top span:nth-child(6){
    right:280px;
    top:80px;
    height:50px;
    transform:rotate(20deg);
}