.kemasan-umur {
      height: 100vh;
      display: flex;
      justify-content: center; /* tengah horizontal */
      align-items: flex-start;
      font-family: "Times New Roman", Times, serif;
      padding-top: 20px;
      padding-bottom: 65px;
   }
   .frame-box {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(5px);
      width: 50%;
      padding: 20px;
      border-radius: 15px;
      text-align: center;
      color: white;
      box-shadow: 0 0 15px rgba(0,0,0,0.4);
    }
    h5 {
      margin-bottom: 10px;
       font-size: 1.4em;
    }
    .row {
      margin: 15px 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    input {
      padding: 10px;
      border: 2px solid grey;
      border-radius: 5px;
      font-size: 0.9em;
      font-family: "Times New Roman", Times, serif;
      width: 90px;
      text-align: center;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      transition: border-color 0.3s, box-shadow 0.3s;
      backdrop-filter: blur(5px);
    }
    input::placeholder {
      color: grey;
    }
    input:focus {
      border-color: #f39c12;
      box-shadow: 0 0 5px #f39c12;
      outline: none;
    }
    tombol:hover {
      background: #e08e0b;
    }
    .result {
      margin-top: 30px;
      display: none;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .result.show {
      display: flex;
      opacity: 1;
      transform: translateY(0);
    }
    .block {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      padding: 15px 20px;
      min-width: 90px;
      text-align: center;
      border: 2px solid #555;
      font-size: 1.4em;
      position: relative;
      overflow: hidden;
      color: white;
    }
    .block span.value {
      display: block;
      transition: transform 0.4s ease;
    }
    .block.flip span.value {
      animation: flipUp 0.4s ease;
    }
    @keyframes flipUp {
      0% {
        transform: rotateX(90deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg);
        opacity: 1;
      }
    }
    .label {
      font-size: 0.8em;
      color: grey;
      margin-top: 4px;
      font-weight: bold;
    }
    .result-row {
       display: flex;
      gap: 15px;
      justify-content: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .element {
      -ms-overflow-style: none;       /* untuk IE dan Edge */
      scrollbar-width: none;          /* untuk Firefox */
    }
    .element::-webkit-scrollbar {
      display: none;                  /* untuk Chrome, Safari, Opera */
    }
    #animateBtn {
      margin-top: 20px;
      padding: 10px 15px;
      background: #f39c12;
      border: none;
      border-radius: 20px;
      color: black;
      font-weight: bold;
      cursor: pointer;
      font-size: 1em;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      font-family: "Times New Roman", Times, serif;
      position: relative;
    }
    #animateBtn span {
      display: inline-block;
      opacity: 0;
      transform: scale(0);
      animation: zoomText 5s ease-in-out infinite;
    }
    #animateBtn span:nth-child(1)  { animation-delay: 0.1s; }
    #animateBtn span:nth-child(2)  { animation-delay: 0.2s; }
    #animateBtn span:nth-child(3)  { animation-delay: 0.3s; }
    #animateBtn span:nth-child(4)  { animation-delay: 0.4s; }
    #animateBtn span:nth-child(5)  { animation-delay: 0.5s; }
    #animateBtn span:nth-child(6)  { animation-delay: 0.6s; }
    #animateBtn span:nth-child(7)  { animation-delay: 0.7s; }
    #animateBtn span:nth-child(8)  { animation-delay: 0.8s; }
    #animateBtn span:nth-child(9)  { animation-delay: 0.9s; }
    #animateBtn span:nth-child(10) { animation-delay: 1s; }
    #animateBtn span:nth-child(11) { animation-delay: 1.1s; }
    #animateBtn span:nth-child(12) { animation-delay: 1.2s; }
    #animateBtn span:nth-child(13) { animation-delay: 1.3s; }
    #animateBtn span:nth-child(14) { animation-delay: 1.4s; }
    #animateBtn span:nth-child(15) { animation-delay: 1.5s; }
    #animateBtn span:nth-child(16) { animation-delay: 1.6s; }
    #animateBtn span:nth-child(17) { animation-delay: 1.7s; }
    @keyframes zoomText {
      0% {
        opacity: 0;
        transform: scale(0.2);
      }
      20% {
        opacity: 1;
        transform: scale(1.4);
      }
      40% {
        transform: scale(1);
      }
      80% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.2);
      }
    }
    .teks-outline {
      color: white;
      text-shadow:
        -1px -1px 0 black,
         0   -1px 0 black,
         1px -1px 0 black,
        -1px  0   0 black,
         1px  0   0 black,
        -1px  1px 0 black,
         0    1px 0 black,
         1px  1px 0 black;
    }

    @media (max-width: 500px) {
      .kemasan-umur {
        display: flex;
        align-items: flex-start;
        justify-content: center; /* tengah horizontal */
        padding: 20px;
      }
      .frame-box {
        width: 100%;
      }
      .result-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }
      .block {
        width: calc(50% - 12px);
        padding: 5px 5px;
        font-size: 1.2em;
        min-width: unset;
      }
    }