*{
  box-sizing:border-box;
}

:root{
  --sky1:#e5f7ff;
  --sky2:#b9e9ff;
  --sky3:#78ccf6;

  --navy:#071a2b;
  --navy2:#0e3151;

  --blue:#48b8ef;
  --blue2:#8edcff;

  --text:#0d2a40;
  --white:#f8fdff;

  --card:#071722;
  --line:#58b9e6;
}


/* =========================
   BODY
   ========================= */

html,
body{
  margin:0;
  padding:0;
  min-height:100%;

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

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255,255,255,.42),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #eaf9ff 0%,
      #c8efff 35%,
      #8ed7f8 100%
    );

  color:var(--text);
}

body{
  min-height:100vh;
}


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

.header{
  background:
    radial-gradient(
      circle at 50% -50%,
      rgba(89,190,245,.18),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #06131f 0%,
      #0b2238 100%
    );

  padding:
    18px
    16px
    22px;

  border-top:
    2px solid #f6fbff;

  border-bottom:
    1px solid
    rgba(115,210,255,.18);

  text-align:center;

  box-shadow:
    0 8px 24px
    rgba(0,34,56,.18);
}


/* =========================
   LOGO
   ========================= */

.logo-wrap{
  height:42px;

  display:flex;

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

  margin-bottom:12px;
}

.logo{
  max-height:40px;
  max-width:230px;

  display:block;

  filter:
    drop-shadow(
      0 0 10px
      rgba(116,211,255,.28)
    );
}


/* =========================
   MENU
   ========================= */

.menu{
  display:flex;

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

  gap:8px;

  flex-wrap:wrap;
}

.menu a{
  color:#08314d;

  background:
    linear-gradient(
      180deg,
      #b8ecff,
      #6fcdf8
    );

  border:
    1px solid
    #4ba9d3;

  box-shadow:
    inset
    0 1px 0
    rgba(255,255,255,.62),

    0 4px 10px
    rgba(0,77,117,.16);

  text-decoration:none;

  border-radius:999px;

  padding:
    9px 15px;

  font-size:11px;

  font-weight:900;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.menu a:hover{
  transform:
    translateY(-1px);

  filter:
    brightness(1.04);

  box-shadow:
    inset
    0 1px 0
    rgba(255,255,255,.7),

    0 7px 16px
    rgba(0,77,117,.22);
}


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

.hero{
  min-height:100px;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(105,206,255,.14),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #123f69 0%,
      #194f7f 100%
    );

  border-bottom:
    1px solid #66c9f5;

  text-align:center;

  padding:
    22px 12px 18px;

  box-shadow:
    inset
    0 -1px 0
    rgba(255,255,255,.06);
}

.hero h1{
  margin:
    0 0 13px;

  color:#e7f8ff;

  font-size:25px;

  font-weight:900;

  letter-spacing:1.8px;

  text-shadow:
    0 0 8px
    rgba(104,205,255,.55),

    0 2px 12px
    rgba(0,0,0,.22);
}


/* =========================
   JAM / TANGGAL
   ========================= */

.time-pill{
  display:inline-block;

  background:#2d96d2;

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

  border-radius:999px;

  padding:
    8px 22px;

  color:#fff;

  font-size:12px;

  font-weight:700;

  box-shadow:
    inset
    0 1px 0
    rgba(255,255,255,.14),

    0 4px 12px
    rgba(0,66,105,.16);
}


/* =========================
   TICKER
   ========================= */

.ticker{
  min-height:24px;

  background:#0a2136;

  color:#aee9ff;

  border-bottom:
    1px solid #2b83ad;

  display:flex;

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

  overflow:hidden;

  white-space:nowrap;

  padding:
    0 8px;

  font-size:10px;

  font-weight:800;

  box-shadow:
    0 3px 10px
    rgba(0,38,62,.12);
}


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

.main{
  max-width:1100px;

  margin:
    0 auto;

  padding:
    18px 12px 50px;
}


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

.search-row{
  width:570px;

  max-width:100%;

  margin:
    0 auto 10px;

  display:flex;

  border-radius:9px;

  overflow:hidden;

  box-shadow:
    0 8px 22px
    rgba(18,84,120,.14);
}

.search-row button{
  height:36px;

  border:0;

  background:
    linear-gradient(
      180deg,
      #4bb7ef,
      #2d8fc7
    );

  color:#fff;

  font-size:11px;

  font-weight:900;

  padding:
    0 18px;

  cursor:pointer;
}

.search-row input{
  flex:1;

  min-width:0;

  height:36px;

  border:0;

  outline:none;

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

  color:#2a2a2a;

  padding:
    0 14px;

  font-size:12px;
}


/* =========================
   INFO UPDATE
   ========================= */

.update-info{
  max-width:570px;

  margin:
    0 auto 16px;

  display:flex;

  justify-content:
    space-between;

  gap:12px;

  font-size:11px;

  color:#114360;

  font-weight:700;

  flex-wrap:wrap;

  padding:
    0 2px;
}


/* =========================
   GRID CARD
   ========================= */

.cards{
  display:grid;

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

  gap:14px;

  width:100%;

  align-items:start;
}


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

.card{
  min-width:0;

  width:100%;

  background:
    linear-gradient(
      180deg,
      #081a28 0%,
      #06131e 100%
    );

  border:
    1px solid
    rgba(102,201,242,.7);

  border-radius:6px;

  overflow:hidden;

  box-shadow:
    0 12px 28px
    rgba(0,51,78,.18),

    inset
    0 1px 0
    rgba(255,255,255,.035);

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

.card:hover{
  transform:
    translateY(-3px);

  border-color:#8edfff;

  box-shadow:
    0 16px 34px
    rgba(0,51,78,.24),

    0 0 0 1px
    rgba(142,223,255,.12);
}


/* =========================
   IMAGE / BANNER
   ========================= */

/*
  Tidak menggunakan aspect-ratio.
  Tinggi otomatis mengikuti
  ukuran asli gambar.
*/

.image-box{
  position:relative;

  width:100%;

  height:auto;

  background:
    linear-gradient(
      180deg,
      #174e75,
      #0d3150
    );

  border-bottom:
    1px solid #3d96bf;

  overflow:hidden;
}


/*
  Penting:
  width 100% + height auto
  membuat banner tidak terpotong.
*/

.image-box img{
  width:100%;

  height:auto;

  display:block;

  object-fit:contain;

  object-position:center;
}


/* efek tipis saja */

.image-box::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      transparent 35%,
      rgba(0,16,26,.07)
    );
}


/* =========================
   CARD BODY
   ========================= */

.card-body{
  padding:
    14px 12px 16px;

  text-align:center;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      rgba(255,255,255,0)
    );
}

.card-title{
  color:#83dcff;

  font-size:15px;

  font-weight:900;

  margin:
    0 0 11px;

  line-height:1.15;

  letter-spacing:.25px;

  text-shadow:
    0 0 10px
    rgba(78,194,244,.18);
}


/* =========================
   META
   ========================= */

.meta{
  color:#e9f8ff;

  font-size:10px;

  line-height:1.7;

  margin-bottom:10px;
}


/* =========================
   LABEL
   ========================= */

.label{
  color:#7fd6ff;

  font-size:10px;

  font-weight:900;

  margin-top:9px;

  letter-spacing:.35px;
}


/* =========================
   VALUE
   ========================= */

.value{
  margin-top:5px;

  color:#f5fcff;

  font-size:10px;

  line-height:1.55;

  overflow-wrap:anywhere;
}

.value.spaced{
  letter-spacing:3px;
}


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

.footer-tag{
  margin-top:10px;

  color:#98e2ff;

  font-size:9px;

  font-weight:800;
}


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

@media
(max-width:950px){

  .main{
    padding-left:8px;
    padding-right:8px;
  }

  .cards{
    gap:8px;
  }

  .card-body{
    padding-left:8px;
    padding-right:8px;
  }

  .card-title{
    font-size:11px;
  }

}


/* =========================
   MOBILE
   1 CARD PER BARIS
   ========================= */

@media
(max-width:580px){

  .header{
    padding:
      15px 8px 16px;
  }

  .logo-wrap{
    height:36px;

    margin-bottom:12px;
  }

  .logo{
    max-height:34px;

    max-width:190px;
  }


  /* MENU */

  .menu{
    gap:5px;
  }

  .menu a{
    font-size:8px;

    padding:
      7px 10px;
  }


  /* HERO */

  .hero{
    min-height:90px;

    padding:
      18px 8px 15px;
  }

  .hero h1{
    font-size:18px;

    margin-bottom:10px;
  }


  /* TIME */

  .time-pill{
    font-size:9px;

    padding:
      7px 14px;
  }


  /* TICKER */

  .ticker{
    min-height:24px;

    font-size:7px;

    padding:
      0 7px;
  }


  /* MAIN */

  .main{
    width:100%;

    max-width:none;

    padding:
      14px 10px 32px;
  }


  /* SEARCH */

  .search-row{
    width:100%;

    margin-bottom:10px;
  }

  .search-row button{
    height:34px;

    font-size:8px;

    padding:
      0 10px;
  }

  .search-row input{
    height:34px;

    font-size:10px;

    padding:
      0 10px;
  }


  /* INFO */

  .update-info{
    font-size:8px;

    margin-bottom:12px;
  }


  /* GRID */

  .cards{
    grid-template-columns:
      1fr !important;

    gap:14px;
  }


  /* CARD */

  .card{
    width:100%;

    border-radius:10px;
  }


  /* IMAGE */

  /*
    Tidak ada aspect-ratio.
    Banner tampil penuh.
  */

  .image-box{
    width:100%;

    height:auto;
  }

  .image-box img{
    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    object-position:center;
  }


  /* CARD BODY */

  .card-body{
    padding:
      15px 13px 17px;
  }

  .card-title{
    font-size:16px;

    min-height:0;

    margin-bottom:10px;
  }

  .meta{
    font-size:9px;

    line-height:1.65;

    margin-bottom:9px;
  }

  .label{
    font-size:9px;

    margin-top:8px;
  }

  .value{
    font-size:9px;

    line-height:1.55;

    margin-top:4px;
  }

  .value.spaced{
    letter-spacing:2px;
  }

  .footer-tag{
    font-size:8px;

    margin-top:10px;
  }

}