/* ==================================================
   RESET
   ================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ==================================================
   ROOT
   ================================================== */

:root {
    --app-width: 100%;
    --app-height: 100dvh;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --font-main:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}


/* ==================================================
   HTML / BODY
   ================================================== */
   
html {
    width: 100%;
    height: 100%;
    min-height: 100%;

    background: #000;

    font-family: var(--font-main);
    font-size: 16px;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: #000;

    color: #fff;

    font-family: var(--font-main);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*
        Sangat berguna untuk WebView / APK
    */
    overscroll-behavior: none;

    /*
        Mencegah highlight biru saat elemen disentuh
    */
    -webkit-tap-highlight-color: transparent;
}


/* ==================================================
   APP
   ================================================== */

#app {
    position: relative;

    width: 100%;
    min-height: 100dvh;

    overflow: hidden;

    isolation: isolate;
}


/* ==================================================
   BACKGROUND
   ================================================== */

.app-background {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -1;

    background-color: #000;


        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    
}


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

.app-content {
    position: relative;

    width: 100%;
    min-height: 100dvh;

    /*
        Safe area untuk HP dengan notch
    */
    padding-top: var(--safe-top);
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
}


/* ==================================================
   MOBILE FIRST
   ================================================== */

@media (max-width: 767px) {

    #app {
        width: 100%;
        min-height: 100dvh;
    }

}


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

@media (min-width: 768px) {

    #app {
        width: 100%;
        min-height: 100dvh;
    }

}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 1200px) {

    /*
        Untuk development di desktop,
        aplikasi tetap fullscreen.

        Jangan gunakan max-width di sini agar
        tampilan saat dibungkus menjadi APK
        tetap konsisten.
    */

    #app {
        width: 100%;
        min-height: 100dvh;
    }
    
    .hid {
    display: none !important;
  }

}


/* ==================================================
   BUTTON / INTERACTIVE ELEMENT
   ================================================== */

button,
a,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
    outline: none;
    cursor: pointer;
}


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

img {
    display: block;

    max-width: 100%;
    height: auto;

    user-select: none;
    -webkit-user-drag: none;
}


/* ==================================================
   SCROLLBAR
   ================================================== */

::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* ==================================================
   SELECTION
   ================================================== */

::selection {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


/* ==================================================
   APP LOADING STATE
   ================================================== */

body:not(.app-ready) #app {
    opacity: 0;
}

body.app-ready #app {
    opacity: 1;

    transition: opacity 200ms ease;
}


/* ==================================================
   UTILITY
   ================================================== */

.hidden {
    display: none !important;
}

.no-scroll {
    overflow: hidden !important;
}

.fullscreen {
    width: 100%;
    min-height: 100dvh;
}