/* KHUSUS HALAMAN CUACA MOBILE */
@media(max-width:768px){

    /* hanya container yang punya halaman cuaca */
    .container.flexcon.column.gap-20:has(.cuaca-page){

        padding-left:0 !important;
        padding-right:0 !important;
    }

    /* top tags hilang di halaman cuaca */
    .container.flexcon.column.gap-20:has(.cuaca-page)
    .top-tags{

        display:none !important;
    }

    /* cuaca full layar */
    .cuaca-page{

        width:100vw !important;
        max-width:100vw !important;

        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;

        padding:10px !important;

        border-radius:0 !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }

}




/* =========================
   SUPER SMALL MOBILE
========================= */

@media(max-width:768px){

.cuaca-page{

    padding:15px !important;

    width:100% !important;

    max-width:100% !important;

    overflow:hidden;

    box-sizing:border-box;
}
	

/* SEARCH */
.cuaca-search-wrap{

    gap:6px !important;

    margin-bottom:14px !important;
}

.cuaca-search-wrap input{

    height:38px !important;

    font-size:11px !important;

    padding:0 10px !important;
}

#searchBtn{

    width:64px !important;

    height:38px !important;

    font-size:11px !important;
}

/* HEADER */
.cuaca-location{

    margin-bottom:12px !important;

    padding-bottom:12px !important;
}

.cuaca-location h1{

    font-size:18px !important;

    margin-bottom:4px !important;
}

#currentDate{

    font-size:10px !important;
}

#clock{

    font-size:24px !important;
}

/* CURRENT WEATHER */
.cuaca-current{

    padding:14px !important;

    margin-bottom:12px !important;
}

.cuaca-temp{

    font-size:58px !important;
}

.cuaca-desc{

    font-size:16px !important;
}

.cuaca-right{

    width:80px !important;
}

.cuaca-right svg{

    width:80px !important;
    height:80px !important;
}

/* GRID */
.cuaca-grid{

    gap:8px !important;

    margin-bottom:12px !important;
}

.cuaca-box{

    padding:12px 8px !important;
}

.cuaca-box span{

    font-size:9px !important;

    margin-bottom:6px !important;
}

.cuaca-box strong{

    font-size:16px !important;

    line-height:1.1 !important;
}

/* AQI */
.aqi-box{

    padding:12px !important;

    margin-bottom:12px !important;
}

.aqi-title{

    font-size:9px !important;
}

.aqi-value{

    font-size:28px !important;
}

.aqi-status{

    padding:8px 10px !important;

    font-size:9px !important;
}

/* FORECAST */
.forecast-wrap{

    padding:14px !important;
}

.forecast-wrap h2{

    font-size:18px !important;

    margin-bottom:14px !important;
}

.forecast-list{

    gap:8px !important;
}

.forecast-card{

    min-width:90px !important;

    padding:12px 8px !important;
}

.forecast-day{

    font-size:13px !important;

    margin-bottom:8px !important;
}

.forecast-card img{

    width:42px !important;
    height:42px !important;
}

.forecast-temp{

    font-size:20px !important;
}

.forecast-desc{

    font-size:10px !important;
}

}




/* =========================
   CONTAINER
========================= */

.cuaca-page{

    width:100%;
    max-width:1100px;

    padding:28px;

    box-sizing:border-box;

    background:
    linear-gradient(
        135deg,
        #f8fcff 0%,
        #eaf5ff 25%,
        #d8ebff 55%,
        #bfdfff 100%
    );

    color:#1f3552;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(120,170,230,.18);

    border-radius:28px;

    box-shadow:
    0 12px 40px rgba(88,140,205,.18);
}

/* efek glow */
.cuaca-page::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.65) 0%,
        rgba(255,255,255,0) 70%
    );

    pointer-events:none;
}



/* =========================
   SEARCH
========================= */

.cuaca-search-wrap{

    display:flex;

    gap:12px;

    margin-bottom:30px;
}

.cuaca-search-wrap input{

    flex:1;

    height:58px;

    background:rgba(255,255,255,.75);

    border:1px solid rgba(120,170,230,.25);

    color:#26496b;

    padding:0 18px;

    font-size:16px;

    outline:none;

    border-radius:16px;

    backdrop-filter:blur(10px);
}

.cuaca-search-wrap input::placeholder{

    color:#6f8aa6;
}

#searchBtn{

    width:120px;

    background:
    linear-gradient(
        135deg,
        #6bb6ff,
        #4e8dff
    );

    color:#fff;

    border:none;

    border-radius:16px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    box-shadow:
    0 8px 18px rgba(78,141,255,.25);
}

#searchBtn:hover{

    transform:translateY(-2px);
}



/* =========================
   TOP HEADER
========================= */

.cuaca-location{

    margin-bottom:24px;

    padding-bottom:20px;

    border-bottom:1px solid rgba(120,170,230,.18);
}

.cuaca-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;
}

.cuaca-location h1{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

    color:#23486c;
}

#currentDate{

    font-size:16px;

    color:#5f7690;
}

#clock{

    font-size:54px;

    font-weight:800;

    line-height:1;

    color:#4b84ff;
}



/* =========================
   CURRENT WEATHER
========================= */

.cuaca-current{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.75),
        rgba(230,242,255,.75)
    );

    backdrop-filter:blur(14px);

    padding:40px;

    margin-bottom:24px;

    border:1px solid rgba(120,170,230,.18);

    border-radius:24px;

    box-shadow:
    0 10px 30px rgba(88,140,205,.12);
}

.cuaca-left{

    flex:1;
}

.cuaca-temp{

    font-size:120px;

    font-weight:800;

    line-height:1;

    margin-bottom:10px;

    color:#2f6fff;
}

.cuaca-desc{

    font-size:32px;

    color:#4f6784;

    text-transform:capitalize;
}

.cuaca-right{

    width:220px;

    display:flex;

    justify-content:center;
}

.cuaca-right img{

    width:180px;

    height:180px;

    object-fit:contain;
}



/* =========================
   INFO GRID
========================= */

.cuaca-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin-bottom:24px;
}

.cuaca-box{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.78),
        rgba(225,240,255,.9)
    );

    padding:24px 20px;

    text-align:center;

    border-radius:20px;

    border:1px solid rgba(120,170,230,.15);

    box-shadow:
    0 6px 20px rgba(88,140,205,.10);
}

.cuaca-box span{

    display:block;

    font-size:14px;

    color:#66809d;

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.cuaca-box strong{

    font-size:38px;

    font-weight:800;

    color:#295b9d;
}



/* =========================
   AQI
========================= */

.aqi-box{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.78),
        rgba(225,240,255,.92)
    );

    padding:24px;

    margin-bottom:24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-radius:22px;

    border:1px solid rgba(120,170,230,.15);

    box-shadow:
    0 6px 20px rgba(88,140,205,.10);
}

.aqi-title{

    font-size:14px;

    color:#6d86a0;

    margin-bottom:10px;

    text-transform:uppercase;
}

.aqi-value{

    font-size:56px;

    font-weight:800;

    line-height:1;

    color:#2c5da2;
}

.aqi-status{

    background:#35c96d;

    color:#fff;

    padding:14px 20px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    border-radius:14px;

    box-shadow:
    0 6px 18px rgba(53,201,109,.25);
}



/* =========================
   FORECAST
========================= */

.forecast-wrap{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.75),
        rgba(231,243,255,.92)
    );

    padding:26px;

    border:1px solid rgba(120,170,230,.15);

    border-radius:24px;

    box-shadow:
    0 10px 26px rgba(88,140,205,.10);
}

.forecast-wrap h2{

    font-size:36px;

    margin-bottom:24px;

    font-weight:800;

    color:#23486c;
}

.forecast-list{

    display:flex;

    gap:16px;

    overflow-x:auto;
}

.forecast-card{

    min-width:170px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.85),
        rgba(215,235,255,.95)
    );

    padding:24px 18px;

    text-align:center;

    flex-shrink:0;

    border-radius:20px;

    border:1px solid rgba(120,170,230,.15);

    box-shadow:
    0 6px 18px rgba(88,140,205,.10);
}

.forecast-day{

    font-size:26px;

    font-weight:700;

    margin-bottom:16px;

    color:#38659c;
}

.forecast-card img{

    width:80px;

    height:80px;

    margin-bottom:12px;
}

.forecast-temp{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

    color:#2f6fff;
}

.forecast-desc{

    font-size:16px;

    color:#627d98;

    line-height:1.5;
}



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

.forecast-list::-webkit-scrollbar{

    height:8px;
}

.forecast-list::-webkit-scrollbar-thumb{

    background:#9bc6ff;

    border-radius:20px;
}

.forecast-list::-webkit-scrollbar-track{

    background:#dcecff;
}



/* =========================
   ICON
========================= */

.cuaca-right svg{

    width:180px;
    height:180px;

    filter:
    drop-shadow(0 0 28px rgba(110,170,255,.35));
}



/* FIX KOLOM TANGGAL MOBILE */
@media(max-width:768px){

    .jadwal-table{

        table-layout:auto !important;
    }

    .jadwal-table td:first-child,
    .jadwal-table th:first-child{

        min-width:74px !important;

        white-space:nowrap !important;

        word-break:normal !important;

        overflow-wrap:normal !important;

        line-height:1.2 !important;
    }

}