/* =========================================================
   KONTAK RSUD
========================================================= */


/* =========================================================
   HERO
========================================================= */

/* ================= BREADCRUMB ================= */
.contact-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:-50px;
    margin-bottom:0;
    margin-left:-37px;
    transform:translateY(-45px);
    color:#ffffff;
    font-size:14px;
    font-weight:500;
}

.contact-breadcrumb i{
    font-size:9px;
    opacity:.8;
}

.contact-breadcrumb a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.contact-breadcrumb a:hover{
    color:#98d733;
    text-decoration:none;
}

.contact-breadcrumb span{
    font-weight:750;
    color:#caf5f2;
    text-decoration:none;   
}

/* ================= HERO ================= */
.contact-hero{
    height:400px;
    position:relative;
    overflow:hidden;
    background-image:url("/static/img/profil/hero.jpg");
    background-size:cover;
    background-position:right center;
    display:flex;
    align-items:center;
    z-index: 1;
}

.contact-hero .container {
    padding-left:80px;
}

/* RED GRADIENT */
.contact-hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(190,0,0,0.95) 0%,
        rgba(205,0,0,0.75) 35%,
        rgba(205,0,0,0.25) 70%,
        rgba(252, 251, 251, 0.05)
    );
}

/* DOT */
.contact-hero::before{
    content:"";
    position:absolute;
    top:25px;
    left:35px;
    width:120px;
    height:120px;
    background-image:
    radial-gradient(
        rgba(255,255,255,.8) 2px,
        transparent 2px
    );
    background-size:16px 16px;
    opacity:.5;
    z-index:3;
}

/* CONTENT */
.contact-hero-container{
    position:relative;
    z-index:2;
    width:100%;
}

.contact-hero-content{
    max-width:800px;
    color:white;
    transform:translateY(20px);
    padding-left:100px;
    padding-bottom: 110px;
}

.contact-label{
    color:white;
    font-size:52px;
    font-weight:700;
    margin:0 0 16px -2px;
    line-height:1.15;
}

.contact-hero p{
    font-size:18px;
    line-height:1.6;
    color:white;
    max-width: 620px;
    margin-bottom: 0;
}

/* =========================================================
   SOFT FADE BAGIAN BAWAH HERO
========================================================= */
.contact-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:120px;
    z-index:5;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.35) 35%,
            rgba(255,255,255,.75) 65%,
            #ffffff 100%
        );
    pointer-events:none;
}



/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page-wrapper{
    position:relative;
    z-index:5;

    margin-top:-30px;
    margin-bottom:70px;

    padding:0 20px;
}

.contact-page{
    max-width:1200px;
    margin:auto;

    background:#fff;

    border-radius:28px;

    padding:30px 20px 50px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.08);
}


/* =========================================================
   WHATSAPP
========================================================= */

.contact-whatsapp{
    display:flex;
    align-items:center;

    gap:18px;

    width:100%;

    padding:20px;

    box-sizing:border-box;

    background:#fff;

    border-radius:20px;

    text-decoration:none;

    box-shadow:
        0 8px 25px rgba(0,0,0,.07);

    transition:.25s ease;
}

.contact-whatsapp:hover{
    transform:translateY(-3px);

    box-shadow:
        0 14px 32px rgba(0,0,0,.10);
}


/* ICON */

.contact-whatsapp-icon{
    flex:0 0 64px;

    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#16c45b;

    color:#fff;

    font-size:34px;
}


/* CONTENT */

.contact-whatsapp-content{
    flex:1;
    min-width:0;
}

.contact-whatsapp-content span{
    display:block;

    margin-bottom:4px;

    color:#0bad4b;

    font-size:13px;

    font-weight:800;
}

.contact-whatsapp-content h3{
    margin:0 0 4px;

    color:#172554;

    font-size:20px;
}

.contact-whatsapp-content p{
    margin:0;

    color:#64748b;

    font-size:14px;
}


/* NUMBER */

.contact-whatsapp-number{
    display:flex;
    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:14px;

    background:#effcf4;

    color:#0bad4b;
}

.contact-whatsapp-number i:first-child{
    font-size:20px;
}

.contact-whatsapp-number strong{
    font-size:17px;
}

.contact-whatsapp-number i:last-child{
    font-size:14px;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.contact-social{
    margin-top:32px;
}

.contact-social h2{
    margin:0 0 12px;

    color:#172033;

    font-size:22px;

    font-weight:800;
}

.contact-social-list{
    overflow:hidden;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.06);
}

.contact-social-item{
    display:flex;
    align-items:center;

    gap:16px;

    min-height:76px;

    padding:10px 20px;

    box-sizing:border-box;

    border-bottom:1px solid #edf0f5;

    text-decoration:none;

    background:#fff;

    transition:.2s ease;
}

.contact-social-item:last-child{
    border-bottom:none;
}

.contact-social-item:hover{
    background:#fafafa;
}


/* ICON */

.contact-social-icon{
    flex:0 0 48px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    color:#fff;

    font-size:25px;
}

.contact-social-icon.instagram{
    background:linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );
}

.contact-social-icon.facebook{
    background:#1877f2;
}

.contact-social-icon.youtube{
    background:#ff0000;
}

.contact-social-icon.email{
    background:#147de8;
}


/* CONTENT */

.contact-social-content{
    flex:1;

    min-width:0;
}

.contact-social-content strong{
    display:block;

    margin-bottom:3px;

    color:#172033;

    font-size:16px;
}

.contact-social-content span{
    display:block;

    color:#64748b;

    font-size:14px;
}


/* ARROW */

.contact-social-arrow{
    color:#172033;

    font-size:14px;
}


/* =====================================================
   EMERGENCY
===================================================== */

.contact-emergency{
    display:grid;

    grid-template-columns:145px minmax(0,1fr);

    gap:6px;

    margin-top:20px;

    padding:0;

    overflow:hidden;

    border-radius:20px;
}


/* =====================================================
   AMBULANCE
===================================================== */

.contact-emergency-ambulance{
    width:145px;

    height:180px;

    align-self:stretch;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:50px;
}

.contact-emergency-ambulance i{
    filter:drop-shadow(
        0 5px 7px rgba(0,0,0,.10)
    );
}


/* CONTENT */

.contact-emergency-content{
    min-width:0;
    padding:22px 10px 10px 0;
}

.contact-emergency-content span{
    display:block;

    margin-bottom:5px;

    color:#d71920;

    font-size:13px;

    font-weight:800;

    letter-spacing:1px;
}

.contact-emergency-content h2{
    margin:0 0 7px;

    color:#c91c24;

    font-size:22px;

    line-height:1.15;

    white-space:nowrap;
}

.contact-emergency-content p{
    margin:0;

    max-width:450px;

    color:#475569;

    font-size:15px;

    line-height:1.55;
}


/* BUTTON */

.contact-emergency-button{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-width:210px;

    padding:15px 20px;

    border-radius:14px;

    background:#d71920;

    color:#fff;

    text-decoration:none;

    box-shadow:
        0 7px 18px rgba(215,25,32,.25);

    transition:.2s ease;
}

.contact-emergency-button i{
    font-size:20px;
}

.contact-emergency-button strong{
    font-size:15px;
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location{
    margin-top:24px;

    padding:25px;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.06);
}

.contact-location h2{
    margin:0 0 20px;

    color:#172033;

    font-size:22px;

    font-weight:800;
}

.contact-location-body{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    align-items:stretch;
}


/* ADDRESS */

.contact-address{
    display:flex;
    align-items:flex-start;

    gap:12px;

    color:#475569;

    font-size:16px;

    line-height:1.7;
}

.contact-address i{
    flex-shrink:0;

    margin-top:4px;

    color:#d71920;

    font-size:23px;
}


/* MAP BUTTON */
.contact-map-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    box-sizing:border-box;
    margin-top:22px;
    padding:13px 18px;
    border-radius:12px;
    background:#d71920;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.2s ease;
}

.contact-map-button:hover{
    background:#b9141a;
    transform:translateY(-2px);
}


/* MAP */

.contact-location-map{
    min-height:220px;
    overflow:hidden;
    border-radius:18px;
    background:#e2e8f0;
}

.contact-location-map iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:220px;
    border:0;
}


/* =========================================================
   COMPLAINT
========================================================= */
.contact-complaint{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:24px;
    padding:25px;
    border-radius:22px;
    background:
        linear-gradient(
            135deg,
            #fffaf4,
            #fffdf9
        );
    box-shadow:
        0 8px 25px rgba(0,0,0,.04);
}


/* ICON */

.contact-complaint-icon{
    flex:0 0 80px;
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ff7615;
    color:#fff;
    font-size:40px;
}


/* CONTENT */

.contact-complaint-content{
    flex:1;
}

.contact-complaint-content h2{
    margin:0 0 7px;
    color:#172033;
    font-size:23px;
}

.contact-complaint-content p{
    margin:0;
    max-width:500px;
    color:#475569;
    font-size:14px;
    line-height:1.6;
}


/* BUTTON */
.contact-complaint-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:250px;
    padding:14px 20px;
    border:2px solid #ff7615;
    border-radius:14px;
    color:#ed6810;
    text-decoration:none;
    font-size:15px;
    transition:.2s ease;
}

.contact-complaint-button:hover{
    background:#ff7615;
    color:#fff;
}

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

@media(max-width:600px){
/* =====================================================
    HERO MOBILE
===================================================== */
    .contact-hero{
        height:300px;
        position:relative;
        overflow:hidden;
        align-items:flex-start;
        background-position:68% center;
    }

    /* -----------------------------------------------------
       OVERLAY MOBILE
    ----------------------------------------------------- */
    .contact-hero-overlay{
        background:
        linear-gradient(
            90deg,
            rgba(190,0,0,.94) 0%,
            rgba(205,0,0,.72) 42%,
            rgba(205,0,0,.25) 75%,
            rgba(255,255,255,.05) 100%
        );
    }

    /* -----------------------------------------------------
       DOT PATTERN
    ----------------------------------------------------- */
    .contact-hero::before{
        top:22px;
        left:18px;
        width:90px;
        height:90px;
        background-size:13px 13px;
        opacity:.45;
    }

    /* -----------------------------------------------------
       CONTENT
    ----------------------------------------------------- */
    .contact-hero-container{
        width:100%;
    }

    .contact-hero-content{
        max-width:none;
        padding-left:20px;
        padding-right:20px;
        padding-top:-10px;
        padding-bottom:0;
        transform:none;
    }
    
    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */
    .contact-breadcrumb{
        display:none;

    }

    /* -----------------------------------------------------
       JUDUL
    ----------------------------------------------------- */
    .contact-label{
        font-size:30px;
        line-height:1.15;
        font-weight:800;
        margin:0 0 12px;
        color:#fff;
   }

    /* -----------------------------------------------------
       DESKRIPSI
    ----------------------------------------------------- */
    .contact-hero p{
        font-size:14px;
        line-height:1.55;
        max-width:330px;
        margin:0;
        color:#fff;
    }

    /* =====================================================
       SOFT FADE BAWAH HERO
    ===================================================== */
    .contact-hero::after{
        height:100px;
        background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.18) 25%,
            rgba(255,255,255,.65) 65%,
            #fff 100%
        );
        z-index:5;
        pointer-events:none;
    }

    .contact-page-wrapper{
        padding:0 30px;

        margin-top:-45px;
    }

    .contact-page{
        padding:45px 45px 70px;
    }

    .contact-grid{
        grid-template-columns:repeat(2,1fr);

        gap:20px;
    }

    .contact-location{
        display:grid;

        grid-template-columns:1fr 1fr;

        align-items:stretch;

        padding:30px;
    }

    .contact-location-map{
        min-height:280px;
    }

    .contact-map-placeholder{
        min-height:280px;
    }

    .contact-emergency{
        display:grid;

        grid-template-columns:auto 1fr auto;

        align-items:center;

        gap:20px;

        padding:28px;
    }

    /* =====================================================
       CONTACT PAGE
    ===================================================== */

    .contact-page-wrapper{
        width:100%;

        box-sizing:border-box;

        margin-top:-35px;

        margin-bottom:40px;

        padding:0 16px;

        position:relative;

        z-index:10;
    }


    .contact-page{
        width:100%;

        max-width:none;

        box-sizing:border-box;

        margin:0;

        padding:20px 14px 35px;

        border-radius:24px;

        box-shadow:
            0 12px 35px rgba(0,0,0,.07);
    }


    /* =====================================================
       WHATSAPP
    ===================================================== */

    .contact-whatsapp{
        display:grid;

        grid-template-columns:92px 1fr;

        gap:14px;

        padding:16px;

        border-radius:20px;
    }


    .contact-whatsapp-icon{
        grid-row:1 / 2;

        width:80px;
        height:80px;

        border-radius:18px;

        font-size:42px;
    }


    .contact-whatsapp-content{
        align-self:center;
    }


    .contact-whatsapp-content span{
        font-size:11px;

        margin-bottom:4px;
    }


    .contact-whatsapp-content h3{
        font-size:18px;

        margin-bottom:3px;
    }


    .contact-whatsapp-content p{
        font-size:13px;

        line-height:1.4;
    }


    .contact-whatsapp-number{
        grid-column:1 / -1;

        display:flex;

        justify-content:center;

        width:100%;

        box-sizing:border-box;

        padding:12px 10px;

        border-radius:12px;
    }


    .contact-whatsapp-number strong{
        font-size:15px;
    }


    /* =====================================================
       SOCIAL
    ===================================================== */

    .contact-social{
        margin-top:30px;
    }


    .contact-social h2{
        margin:0 0 10px;

        font-size:18px;
    }


    .contact-social-list{
        border-radius:18px;
    }


    .contact-social-item{
        min-height:76px;

        padding:10px 12px;

        gap:12px;
    }


    .contact-social-icon{
        flex:0 0 43px;

        width:43px;
        height:43px;

        border-radius:12px;

        font-size:22px;
    }


    .contact-social-content strong{
        font-size:14px;
    }


    .contact-social-content span{
        font-size:12px;
    }


    .contact-social-arrow{
        font-size:12px;
    }


    /* =====================================================
       EMERGENCY
    ===================================================== */

    .contact-emergency{
        display:grid;

        grid-template-columns:145px minmax(0,1fr);

        gap:4px;

        margin-top:20px;

        padding:0;

        overflow:hidden;

        border-radius:20px;
    }


    .contact-emergency-ambulance{
        width:145px;

        height:145px;

        align-self:stretch;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:45px;
        min-width:0;

        padding:18px 10px 6px 0;
    }


    .contact-emergency-content{
        padding:22px 12px 10px 0;
    }


    .contact-emergency-content span{
        font-size:9px;

        letter-spacing:1.2px;

        margin-bottom:4px;
    }


    .contact-emergency-content h2{
        font-size:24px;

        margin-bottom:7px;
    }


    .contact-emergency-content p{
        font-size:12px;

        line-height:1.45;
    }


    .contact-emergency-button{
        grid-column:1 / -1;

        width:calc(100% - 24px);

        margin:0 12px 14px;

        padding:12px;

        min-width:0;

        border-radius:12px;
    }


    .contact-emergency-button strong{
        font-size:14px;
    }


    /* =====================================================
       LOCATION
    ===================================================== */
    .contact-location{
        display:block;

        width:100%;
        box-sizing:border-box;

        margin-top:20px;
        margin-bottom:0;

        padding:18px;

        border-radius:20px;

        background:#fff;

        box-shadow:
            0 8px 25px rgba(0,0,0,.06);
    }


    /* =====================================================
    TITLE
    ===================================================== */

    .contact-location h2{
        display:block;

        width:100%;

        margin:0 0 16px;

        color:#172033;

        font-size:17px;

        line-height:1.25;

        font-weight:800;

        white-space:nowrap;
    }


    /* =====================================================
    LOCATION BODY
    INFO KIRI + MAP KANAN
    ===================================================== */

    .contact-location-body{
        display:grid;

        grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);

        gap:12px;

        align-items:stretch;

        width:100%;
    }


    /* =====================================================
    LOCATION INFO
    ===================================================== */

    .contact-location-info{
        min-width:0;

        display:flex;

        flex-direction:column;

        justify-content:space-between;
    }


    /* =====================================================
    ADDRESS
    ===================================================== */

    .contact-address{
        display:flex;

        align-items:flex-start;

        gap:9px;

        margin:0;

        color:#334155;

        font-size:13px;

        line-height:1.55;
    }

    .contact-address i{
        flex:0 0 auto;

        margin-top:3px;

        color:#d71920;

        font-size:18px;
    }

    .contact-address span{
        display:block;
    }


    /* =====================================================
    GOOGLE MAP BUTTON
    ===================================================== */

    .contact-map-button{
        display:flex;

        align-items:center;

        justify-content:center;

        gap:7px;

        width:100%;

        box-sizing:border-box;

        margin-top:16px;

        padding:11px 8px;

        border-radius:11px;

        background:#d71920;

        color:#fff;

        text-decoration:none;

        font-size:11px;

        line-height:1.2;

        font-weight:700;

        text-align:center;
    }

    .contact-map-button i{
        flex-shrink:0;

        font-size:13px;
    }

    .contact-map-button:hover{
        background:#b9141a;

        transform:none;
    }


    /* =====================================================
    MAP
    ===================================================== */

    .contact-location-map{
        width:100%;

        height:190px;

        min-height:190px;

        overflow:hidden;

        border-radius:15px;

        background:#e2e8f0;
    }

    .contact-location-map iframe{
        display:block;

        width:100%;
        height:100%;

        min-height:190px;

        border:0;
    }


    /* =====================================================
       KRITIK & SARAN
    ===================================================== */

    .contact-complaint{
        display:grid;

        grid-template-columns:80px 1fr;

        gap:14px;

        margin-top:20px;

        padding:20px;

        border-radius:20px;
    }


    .contact-complaint-icon{
        width:70px;
        height:70px;

        font-size:34px;
    }


    .contact-complaint-content h2{
        margin:0 0 5px;

        font-size:19px;
    }


    .contact-complaint-content p{
        font-size:12px;

        line-height:1.55;
    }


    .contact-complaint-button{
        grid-column:1 / -1;

        width:100%;

        box-sizing:border-box;

        min-width:0;

        padding:12px;

        border-radius:12px;

        font-size:13px;
    }


    /* =====================================================
       SAFETY
    ===================================================== */

    .contact-page,
    .contact-page *,
    .contact-page *::before,
    .contact-page *::after{
        box-sizing:border-box;
    }


    .contact-page img,
    .contact-page iframe{
        max-width:100%;
    }

}