:root {
  --pr-color: #285dc0;
}

/* Fix semua box model */
*,
*::before,
*::after {
  box-sizing: border-box;
  z-index: 1;
}

html {
  overflow-y: scroll;
  /* Paksa scrollbar selalu muncul */
}

body {
  font-family: "Inter", sans-serif;
  background: linear-gradient(135deg, #1B1B1B, #121212, #0A0A0A);
  color: white;
  overflow-x: hidden;
  /* Hindari geseran horizontal */
}

.navbar-cover{
    position:relative;
    width:100%;
    height:100px;
    overflow:hidden;
}

.navbar-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:blur(0.8px) brightness(0.4);
    transform:scale(1.02);
}

.navbar-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    pointer-events:none;
}

.whatsapp-float {
    position: fixed;
    right: 20px;
    z-index: 100;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* posisi dasar */
.whatsapp-float {
    bottom: 20px;
}

.whatsapp-float img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.whatsapp-float img:hover {
    transform: scale(1.1);
}


@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 16px;
    right: 12px;
    gap: 12px;
  }

  .whatsapp-float img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.25s ease;
  }

  .whatsapp-float img:hover {
    transform: scale(1.05);
  }
}

#about-section{
    position:relative;
    overflow:hidden;
    padding:0 0 80px;
    color:#212529;
    background:#f5f6f8;
}

.container-content{
    position:relative;
    z-index:1;
    max-width:920px;
    margin:0 auto;
    padding:0 20px;
}

.bottom-content{
    background:#fff;
    backdrop-filter:blur(12px);
    border-radius:8px;
    padding:50px 40px 70px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    text-align:justify;
}

.bottom-content .about-tagline{
    max-width:700px;
    margin:0 auto 20px;
}

.bottom-content .about-tagline h4{
    color:#1f2937;
    text-align:center;
    font-size:28px;
    font-weight:300;
    line-height:1.15;
    margin:0;
}

.bottom-content .tag{
    display:block;
    width:100%;
    margin:12px 0 18px;
    color:#0057B8;
    text-align:center;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    line-height:1.4;
}

.bottom-content .about-banner{
    text-align:center;
    margin-bottom:20px;
}

.bottom-content .about-banner .banner{
    width:90%;
    max-height:400px;
    object-fit:cover;
    border-radius:20px;
}

.bottom-content p{
    margin-bottom:22px;
    font-size:14px;
    font-weight:400;
    line-height:1.7;
    color:#4b5563;
}

.bottom-content a span.text-danger{
    color:#ff4d4f;
    font-weight:600;
    text-decoration:underline;
    transition:color .3s ease;
    cursor:pointer;
}

.bottom-content a span.text-danger:hover{
    color:#d9363e;
}

.logo-inline{
    max-height:27px;
    margin:0 6px;
    vertical-align:middle;
    border-radius:5px;
}


@media (max-width:480px){

    .navbar-cover{
        display:none;
    }

    #about-section{
        padding:30px 0 50px;
    }

    .container-content{
        max-width:100%;
        padding:0 12px;
    }

    .bottom-content{
        width:100%;
        padding:28px 18px 40px;
        border-radius:12px;
        box-shadow:0 12px 30px rgba(0,0,0,.08);
    }

    .bottom-content .about-tagline{
        margin:0 auto 16px;
    }

    .bottom-content .about-tagline h4{
        font-size:22px;
        font-weight:300;
        line-height:1.2;
    }

    .bottom-content .tag{
        font-size:12px;
        font-weight:600;
        letter-spacing:1px;
        margin:8px 0 16px;
    }

    .bottom-content .about-banner{
        margin-bottom:16px;
    }

    .bottom-content .about-banner .banner{
        width:100%;
        max-height:220px;
        object-fit:cover;
        border-radius:12px;
    }

    .bottom-content p{
        font-size:13px;
        line-height:1.8;
        text-align:justify;
    }

    .btn-hubungi-kami{
        right:15px;
        bottom:20px;
        padding:.6rem 1.2rem;
        font-size:12px;
        font-weight:600;
        letter-spacing:.4px;
    }

    .logo-inline{
        max-height:22px;
        margin:0 3px;
    }

}