@media (max-width: 768px) {
  .font-text div {
    font-size: 14px !important;
}
  .chatbot-txt-scale div {
    font-size: 13px !important;
}
  .btn-lang-scale {left: calc(46.08% + 0px) !important;}
  .card > img.thumb-desktop {
    display: none !important;
  }
  .card > img.thumb-mobile {
    display: block !important;
  }
  .btn-drone-mobile {
      
top: 117% !important;
      
left: 0px !important;
      
height: 31px !important;
      
width: 31px !important;
    }
.txt-mobile {}
.txt-mobile div {
    font-size: 16px !important;
}

}
::-webkit-scrollbar {
    width: 1px;
}
.header-font div {
overflow: unset !important;

;}

::-webkit-scrollbar {width:2px;}
.txt-category-mobile div  {display: none !important;}
@media only screen and (max-width: 767px) {
  .video-culture-mobile video {object-fit: cover !important; overflow: hidden !important;}
.left-mobile  {left: 34% !important;top: 63% !important;}
.right-mobile  {left: 54% !important;top: 63% !important;}
.category-mobile {height: 110px !important;width: 118px !important;top: 9% !important;}
.header-font div {font-size: 18px !important;}

.txt-mobile div  {font-size: 15px !important;}
.flag-mobile-wlc {left:44% !important;top: -55px !important;}
.flag-mobile-wlc div{}
.txt-category-mobile div  {font-size:12px !important;display: none;}
.txt-mobile-menu div{font-size: 12px !important;}
.btn-drone-mobile {left:0 !important;}
  .img-menu {
    width: 22px !important;
    height: 22px !important;
    top: 15px !important;
}
.wlc-mobile {
    top: 15% !important;
}
.font-welcome div{
    font-size: 17px !important;
}
}


/* --- 1. iPhone SE / SE 2 / SE 3 (Narrow & Short) --- */
@media screen and (max-width: 375px) and (max-height: 667px) {

}

/* --- KELOMPOK 1: ULTRA NARROW (Samsung S8, S8+, S20, S10) --- */
/* Lebar 360px adalah yang paling kritis untuk desain Anda */
@media screen and (max-width: 365px) {    
  .header-font div {
    font-size: 15px !important;
    left: 5px;
    line-height: 1.5;
}
.btn-drone-mobile {top: 115% !important;}
.category-mobile {
    height: 95px !important;
    width: 105px !important;
    left: calc(50% - 50px) !important;
    top: 7% !important;
}
.left-mobile {
    left: 37% !important;
    top: 69% !important;
    width: 130px !important;
}
.right-mobile {
    left: 54% !important;
    width: 130px !important;
    top: 69% !important;
}
}

/* --- KELOMPOK 2: NARROW (iPhone SE, iPhone 7/8) --- */
/* Lebar 375px - Sedikit lebih lega dari Samsung */
@media screen and (min-width: 366px) and (max-width: 385px) {

}

/* --- KELOMPOK 3: STANDARD MODERN (iPhone 12/13/14, Pixel 7) --- */
/* Lebar 390px - 412px - Tampilan yang terlihat 'Pas' di gambar Anda */
@media screen and (min-width: 386px) and (max-width: 413px) {
    /* Gunakan pengaturan standar Anda di sini */
    .left-mobile {
    left: 36% !important;
    top: 67% !important;
    height: 6px !important;
    width: 140px !important;
}
    
    .right-mobile {
    left: 54% !important;
    height: 6px !important;
    width: 140px !important;
    top: 67% !important;
}
.header-font div {
    font-size: 18px !important;
    left: 10px;
}
.btn-drone-mobile {top: 116.5% !important;}

}

/* --- KELOMPOK 4: LARGE (iPhone Pro Max, S20 Ultra) --- */
/* Lebar 414px ke atas */
@media screen and (min-width: 414px) {
.left-mobile {
}
.header-font div {}
}

/* default: 100% (layout rapi di 1920px) */
#skin {
  transform: scale(1);
  transform-origin: center bottom; /* biar ngecil dari tengah bawah */
}

/* Ketika Windows scale 125% (viewport ~1536px) */
@media (max-width: 1536px) and (min-width: 1300px) {
  .menu-scale {
    transform: scale(0.9) !important;         /* 1536 / 1920 = 0.8 */
    transform-origin: center bottom;
  }
    .bottom-menu {
    transform: scale(0.85);
    bottom: -30px !important;
}
  .img-menu {width:28px !important; height:28px !important;}
  .txt-mobile div  {font-size:16px !important;}
  .txt-mobile-menu div{font-size:16px !important; left: 45% !important; transform: translate(5px, 0px);}
  .rec-scale {transform: scale(0.7);top:calc(50% - 18.5px) !important;}
  .chatbot-txt-scale {right:60% !important}
  .btn-lang-scale {}
  .btn-lang-scale div img {width: 40px !important; height: 40px !important;}
    .left-mobile {}
}



/* --- KELOMPOK 5: FOLDABLE & MINI TABLET (600px - 768px) --- */
/* Contoh: Samsung Fold (Opened), iPad Mini (Portrait) */
@media screen and (min-width: 600px) and (max-width: 768px) {
.welcome-css-tablet {
    width: 100% !important;
    left: 0px !important;
}
.welcome-css-tablet .menu-scale img {
    width: 38px !important;
    height: 39px !important;
    top: 10px !important;
}
.lang-active-res {
    width: 33% !important;
    top: 107px  !important;
}
.map-res {
    top: -13px !important;
    width: 14% !important;
    left: 80% !important;
}
.menu-res {
    width: 100% !important;
    left: 0px !important;
}
.chatbot-res {
    bottom: 20% !important;
}
.left-mobile {left: 26% !important;top: 65% !important;width: 267px !important;}
.right-mobile {
    left: 55% !important;
    top: 64% !important;
    width: 267px !important;
}
.menu-res .txt-mobile-menu {
    top: 62px !important;
    left: -19.82% !important;
}
}

/* --- KELOMPOK 6: STANDARD TABLET (769px - 1024px) --- */
/* Contoh: iPad Air, iPad Pro 11" (Portrait), Galaxy Tab */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.welcome-css-tablet {
    width: 100% !important;
    left: 0px !important;
}
.welcome-css-tablet .menu-scale img {
    width: 38px !important;
    height: 39px !important;
    top: 10px !important;
}
.lang-active-res {
    width: 33% !important;
}
    div.ggskin_container.menu-scale[style*="width: 60px"][style*="height: 119px"] {bottom: 15% !important;left: 4% !important;}
.map-res {
    bottom: 15% !important;
    width: 15% !important;
    height: 15% !important;
    left: 12% !important;
}
.menu-res {
    width: 100% !important;
    left: 0px !important;
}
.chatbot-res {
    bottom: 12% !important;
}
.left-mobile {left: 18% !important;}
.right-mobile {
    left: 57% !important;
}
.menu-res .txt-mobile-menu {
    top: 62px !important;
    left: -19.82% !important;
}
}

/* --- KELOMPOK 7: LARGE TABLET / LAPTOP KECIL (1025px - 1200px) --- */
/* Contoh: iPad Pro 12.9", iPad Pro (Landscape) */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Di sini UI biasanya sudah bisa menggunakan layout Desktop */

}

/* ==========================================================================
   1. IPAD MINI (Generasi Lama & Generasi 6)
   Resolusi Viewport: 768x1024 (Gen 1-5) & 744x1133 (Gen 6)
   ========================================================================== */

/* iPad Mini - Portrait */
@media only screen and (min-width: 744px) and (max-width: 768px) and (orientation: portrait) {
.bottom-menu .ggskin_container {display:none}
    .bottom-menu .category-btn {display:none !important}
    .category-btn {display:block !important;}
    .left-mobile {top: 60% !important;left: 24% !important;}
    .right-mobile {
    top: 60% !important;
    left: 58% !important;
}
    .lang-active-res {
    top: 182px  !important;
}

    .lang-active-res .menu-scale {
    height: 30px !important;
    width: 30px !important;
}
} 

/* iPad Mini - Landscape */
@media only screen and (min-width: 1024px) and (max-width: 1133px) and (orientation: landscape) {
    
}


/* ==========================================================================
   2. IPAD AIR (Generasi 4 & 5)
   Resolusi Viewport: 820x1180
   ========================================================================== */

/* iPad Air - Portrait */
@media only screen and (min-width: 820px) and (max-width: 820px) and (orientation: portrait) {
.bottom-menu {display:none;}
    .mobile {
}

}

/* iPad Air - Landscape */
@media only screen and (min-width: 1180px) and (max-width: 1180px) and (orientation: landscape) {

}


/* ==========================================================================
   3. IPAD PRO (11-inch & 12.9-inch)
   Resolusi Viewport: 834x1194 (11") & 1024x1366 (12.9")
   ========================================================================== */

/* iPad Pro 11" & 12.9" - Portrait */
@media only screen and (min-width: 834px) and (max-width: 1024px) and (min-height: 1194px) and (orientation: portrait) {

}

/* iPad Pro 11" & 12.9" - Landscape */
@media only screen and (min-width: 1194px) and (max-width: 1366px) and (orientation: landscape) {

}

/* --- KELOMPOK 8: MACBOOK AIR & LAPTOP 13" (1201px - 1299px) --- */
/* Mengisi celah resolusi 1280px dengan penyesuaian rasio layar 16:10 */
@media screen and (min-width: 1201px) and (max-width: 1299px) {
  
  /* Mengecilkan skala menu utama agak lebih kecil dari Windows 125% */
  .menu-scale {
    transform: scale(0.8) !important; 
    transform-origin: center bottom;
  }
  
  /* Menaikkan sedikit bottom menu agar tidak terpotong di layar rasio 16:10 (lebih kotak) */
  .bottom-menu {
    transform: scale(0.8);
    bottom: 0px !important; 
  }
  
  /* Menyesuaikan ukuran icon menu */
  .img-menu {
    width: 25px !important; 
    height: 25px !important;
  }
  
  /* Mengecilkan font text */
  .txt-mobile div {
    font-size: 14px !important;
  }
  .txt-mobile-menu div {
    font-size: 14px !important; 
    left: 45% !important; 
    transform: translate(5px, 0px);
  }
  
  /* Menyesuaikan kotak/rectangle pembungkus */
  .rec-scale {
    transform: scale(0.65);
    top: calc(50% - 15px) !important;
  }
  
  /* Memastikan teks chatbot tidak menabrak */
  .chatbot-txt-scale {
    right: 55% !important;
  }
  
  /* Mencegah map dan ikon chatbot tenggelam ke bawah */
  .map-res {
    bottom: 5% !important; 
  }
  .chatbot-res {
    bottom: 5% !important;
  }
}