body {
      margin: 0;
      padding: 0;
      background-color: black;
      color: white;
      font-family: Helvetica, sans-serif;
      font-size: 10px;
    }

    .kepala, .bawah, .kotak {
      position: relative;
      max-width: 350px;
      left: 50%;
      transform: translateX(-50%);
    }

    .kepala {
      position: fixed;
      top: 0;
      z-index: 1;
      width: 350px;
      background-color: #1d6f011a;
    }

    .bawah {
      position: fixed;
      bottom: 5px;
      width: 350px;
      text-align: center;
      z-index: 1;
    }

    .bawah table {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: white;
      cursor: pointer;
      background-image: linear-gradient(90deg, #b60b00, #efe1e1, #f55557, #cc1e20, #c70003, #b60b03 16%);
    }

    .kotak { top: 41px; font-size: 12px; }

    #id_Layanan {
      position: absolute;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      left: 5px;
      padding: 4px 6px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background-color: black;
    }

    #id_Layanan img {
      margin-left: 8px;
      height: 8px;
      transition: transform 0.2s ease;
    }

    .dropdown-content {
      display: none;
      flex-direction: column;
      position: absolute;
      background-color: #000;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-top: 4px;
      margin-left: 10px;
      box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
      padding: 6px;
      z-index: 10;
    }

    .pilihan {
      margin: 2px 0;
      border-radius: 3px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      padding: 5px 10px;
      color : white;
      font-weight:bold;
    }

    .back1 {background : #024925;}
    .back2 {background : #026333;}
    .back3 {background : #048343;}
    .back4 {background : #06aa58;}

    .dropdown-content img:hover {
      transform: scale(1.05);
      box-shadow: 0px 3px 8px rgba(255,255,255,0.3);
    }

    .rotate { transform: rotate(180deg); }

    .isi-kotak {
      width: 100%;
      position: absolute;
      top: 80px;
      height: 70vh;
      overflow-y: auto;
      display: none;
      border-radius: 6px;
      padding-bottom: 60px;
    }

    #id_Rumahan { background: #1e1e1e; display: block; }
    #id_CB { background: #3d0000; }
    #id_Jumat { background: #001f3d; }
    #id_Khusus { background:#2d0c0c; }
    

    .menu-item {
      display: flex;
      flex-direction: column;
      background-color: rgba(255,255,255,0.08);
      margin: 6px;
      border-radius: 8px;
      padding: 6px 8px;
      box-shadow: 0 0 3px rgba(255,255,255,0.2);
    }

    .judul {
      font-weight: bold;
      font-size: 14px;
      font-style: italic;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .judul img {
      height: 25px;
      width: auto;
      object-fit: contain;
      display: inline-block;
    }

    .menu-content {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .menu-content img {
      width: 70px;
      height: 70px;
      border-radius: 8px;
      object-fit: cover;
      background-color: #222;
    }

    .menu-right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .uraian {
      font-size: 13px;
      color: #ccc;
      margin-bottom: 4px;
    }

    .harga {
      font-size: 11px;
      color: #f3d630ff;
      margin-bottom: 5px;
    }

    .jumlah-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .jumlah-wrapper {
      position: relative;
      width: 45px;
    }

    .jumlah {
      width: 45px;
      height: 28px;
      font-size: 13px;
      background: #000;
      color: #fff;
      border: 1px solid #888;
      border-radius: 6px;
      text-align: center;
    }

    .arrow-container {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: -16px;
      top: 2px;
    }

    .arrow-up, .arrow-down {
      font-size: 10px;
      color: #fff;
      background: #333;
      border-radius: 3px;
      line-height: 10px;
      padding: 2px;
      cursor: pointer;
      user-select: none;
    }

    .arrow-up:hover, .arrow-down:hover { background: #555; }

    .porsi-radio {
      display: flex;
      gap: 6px;
      font-size: 12px;
      align-items: center;
      margin-left: 20px;
    }

    .porsi-radio input[type="radio"] {
      transform: scale(1.1);
      accent-color: #00ff00;
    }


    #previewLayananText {
      position: absolute;
      top: 5;
      font-weight: bold;
      font-size: 14px;
      left: 90px;
      text-align: center;
      background: #303030;
      border-radius: 4px;
      padding : 4px 10px;
    }

        #iconCheckout {
      position: absolute;
      top: 0;
      border-radius: 4px;
      object-fit: cover;
      left: 230px;
      color: white;
      text-align: center;
      cursor: pointer;
    }

    #iconCheckout img {
      height : 20px;
    }

    #iconCheckout2 {
      position: absolute;
      top: 0;
      border-radius: 4px;
      object-fit: cover;
      left: 230px;
      color: white;
      text-align: center;
      cursor: pointer;
    }

    #iconCheckout2 img {
      height : 20px;
    }

    .wa-container {
      position: absolute;
      top: -4px;
      right: 10px;
      text-align: center;
      color: white;
      cursor: pointer;
    }

    .wa-container img {
      padding-top: 3px;
      width: 22px;
      cursor: pointer;
    }

    #gambarBesarPreview {
  transition: transform 0.2s ease, opacity 0.3s ease;
}
#gambarBesarPreview:hover {
  transform: scale(1.02);
  opacity: 0.95;
}