.section-title h2{color:#FFF;text-shadow:0 3px 5px rgba(0,0,0,0.50);font-size:30px;font-weight:700;} 
@media (min-width: 768px){.container{width:auto;}} 
.form-control.grow-text{width:100% !important;border-radius:5px;border:2px solid #88B8CB;background:rgba(24,107,139,0.80);color:#FFFFFF;margin-bottom:12px;} 
.form-control.grow-text::placeholder{color:#88B8CB;} 
.btn.grow-button{border-radius:5px;border:2px solid #88B8CB !important;background:#00B8FF !important;color:#FFF;font-weight:700;width:100%;box-shadow:1px 3px 0.1px 0px #000;} 
.modal-backdrop{background-color:transparent !important;pointer-events:none;} 
.modal-dialog-centered{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding-top:8vh;margin:0 auto;z-index: 20;} 
.modal-content{background-color:#0F2A3F !important;border:2px solid #5bc0de !important;border-radius:15px !important;width:100%;max-width:420px !important;padding:10px;box-shadow:0px 10px 30px rgba(0,0,0,0.8);pointer-events:auto;} 
.box-section{background:rgba(0,0,0,0.25);border-radius:10px;padding:15px;margin-bottom:15px;border:1px solid rgba(136,184,203,0.2);} 
.btn-back-top{position:absolute;left:15px;top:20px;color:#88B8CB;font-weight:bold;font-size:14px;text-decoration:none;text-shadow:1px 1px 1px #000;z-index:10;} 
.choice-box{position:relative;flex:1;height:100px;border:2px solid #88B8CB;border-radius:10px;overflow:hidden;cursor:pointer;transition:all 0.2s ease-in-out;background-color:#186B8B;background-size:cover;background-position:center;box-shadow:1px 3px 5px rgba(0,0,0,0.5);} 
.choice-box:hover{transform:scale(1.03);border-color:#00B8FF;} 
.choice-text{position:absolute;bottom:0;left:0;width:100%;background:rgba(0,0,0,0.75);padding:10px 5px;text-align:center;color:#FFF;font-weight:bold;font-size:13px;border-top:2px solid #88B8CB;} 
.logo-image{max-height:45px;display:block;margin:0 auto;filter:drop-shadow(0px 6px 8px rgba(0,0,0,0.9));}
.custom-alert { display: none; background-color: #D32F2F; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 8px; padding: 12px; margin-bottom: 15px; font-size: 13px; font-weight: bold; text-align: center; box-shadow: 0px 4px 10px rgba(0,0,0,0.5); }

/* === BACKGROUND DIBUAT KEBAWAHAN (TIDAK FIT STRETCH PAKSA) === */
body {
    background-color: #87CEEB; /* Fallback langit */
    background-size: 100% auto; 
    background-position: center bottom; 
    background-repeat: no-repeat;
    
    image-rendering: pixelated;
    margin: 0; padding: 0; width: 100vw; height: 100vh;
    touch-action: manipulation; /* Anti zoom double tap HP */
}

/* === LAYER LINGKUNGAN (TANAH & DEKORASI) === */
#ground-layer, #decor-layer {
    position: fixed;
    bottom: 0; left: 0; width: 100%; 
    z-index: 5;
}
#decor-layer {
    z-index: 6; /* Dekorasi di atas tanah */
    height: 0; 
}

/* === LAYER AWAN (Dibatasi di atas layar) === */
#clouds-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
}
.gt-cloud {
    position: absolute;
    background-image: url('../image/clouds.png');
    background-size: contain; background-repeat: no-repeat;
    width: 150px; height: 80px; opacity: 0.8;
    animation: floatCloud linear infinite;
    image-rendering: pixelated;
}
@keyframes floatCloud {
    from { transform: translateX(-200px); }
    to { transform: translateX(110vw); }
}

/* === LAYER CUACA (Hujan & Salju) === */
#weather-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 3; overflow: hidden;
}
.raindrop {
    position: absolute; width: 2px; height: 25px;
    background-color: rgba(174, 194, 224, 0.7);
    transform: rotate(15deg); 
    animation: rainFall linear infinite;
}
@keyframes rainFall {
    from { transform: translateY(-50px) translateX(0) rotate(15deg); }
    to { transform: translateY(110vh) translateX(-20vh) rotate(15deg); }
}
.snowflake {
    position: absolute; width: 6px; height: 6px;
    background-color: #FFFFFF; border-radius: 1px;
    animation: snowFall linear infinite;
}
@keyframes snowFall {
    from { transform: translateY(-50px) translateX(0); }
    to { transform: translateY(110vh) translateX(10vh); }
}

/* === MODAL NAVBAR & MENU GRID === */
.gt-inner-navbar {
    background-color: #186B8B; border: 2px solid #88B8CB; border-radius: 8px; padding: 8px 15px; margin-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.4);
}
.gt-inner-navbar a { color: #FFF; font-weight: bold; font-size: 12px; text-decoration: none; }
.gt-inner-navbar a:hover { color: #00B8FF; }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.menu-box {
    position: relative; height: 80px; border: 2px solid #88B8CB; border-radius: 8px; background-color: #0F2A3F;
    background-size: cover; background-position: center; cursor: pointer; transition: 0.2s; box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
    image-rendering: pixelated;
}
.menu-box:hover { border-color: #00B8FF; transform: scale(1.02); }
.menu-text {
    position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7); color: white; text-align: center;
    font-size: 11px; font-weight: bold; padding: 4px 0; border-top: 1px solid #88B8CB; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
}

/* === OPTIMASI MOBILE DEVICE === */
@media (max-width: 480px) {
    .menu-grid { gap: 6px; margin-top: 10px; }
    .menu-box { height: 70px; }
    .gt-inner-navbar { padding: 6px 10px; }
    .gt-inner-navbar span { font-size: 13px !important; }
    .choice-box { height: 85px; }
}