/* ===================================================
   Kontak Penting — Page-Specific Custom Styles

   These styles ONLY cover the content sections unique
   to this page (section heading, emergency contact
   cards). All layout, header, sidebar, and base
   component styling is handled by Skote + current.css
   (= custom.css on live).

   INTEGRATION: Merge these rules into your custom.css
   on the live server. All class names are prefixed with
   "kontak-" to avoid conflicts with existing styles.
   =================================================== */


/* ======================================
   SECTION HEADING
====================================== */
.kontak-head__title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.kontak-head__desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}


/* ======================================
   KONTAK LIST
====================================== */
.kontak-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kontak-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: #F1F7F3;
    border: 1px solid #E4EEE8;
    border-radius: 14px;
    padding: 40px 48px;
}

.kontak-card__info {
    flex: 1;
    min-width: 0;
}

.kontak-card__name {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 16px;
}

.kontak-card__desc {
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
    max-width: 640px;
    margin: 0;
}

/* Right side: green phone icon + big number */
.kontak-card__phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.kontak-card__phone:hover {
    opacity: 0.75;
}

.kontak-card__phone i {
    font-size: 40px;
    color: #21824f;
    line-height: 1;
}

.kontak-card__number {
    font-size: 52px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}


/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 768px) {
    .kontak-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 28px 24px;
    }

    .kontak-card__name {
        font-size: 22px;
    }

    .kontak-card__phone i {
        font-size: 32px;
    }

    .kontak-card__number {
        font-size: 40px;
    }
}