/* =========================================================================
   FOOTER SITUS (dipakai layout utama dan layout TK / SD / SMP / SMA)
   Warna dan font dipertahankan: oranye #ff8c00 / #ff5722, teks #374050, font Calibri.
   Tata letak: grid 4 kolom (laptop) -> 2 kolom (tablet) -> 1 kolom (HP).
   ========================================================================= */

.sf {
    --sf-o: #ff8c00;
    --sf-o2: #ff5722;
    --sf-od: #e67e00;
    --sf-ink: #374050;
    --sf-mut: #6c757d;
    font-family: 'Calibri', sans-serif;
    position: relative;
    margin: 0;
    padding: 64px 0 0;
    color: var(--sf-ink);
    background: linear-gradient(180deg, #ffffff 0%, #fff7ee 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Garis atas bergradasi + hiasan lingkaran halus */
.sf::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--sf-o), var(--sf-o2), var(--sf-o));
    background-size: 200% 100%;
    animation: sfGeser 8s linear infinite;
}
.sf::after {
    content: '';
    position: absolute;
    right: -120px; bottom: -140px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, .13), rgba(255, 140, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
}
@keyframes sfGeser { to { background-position: -200% 0; } }

.sf a { text-decoration: none; }
.sf p { margin-bottom: 0; }

.sf-grid {
    display: grid;
    grid-template-columns: 1.25fr .8fr 1.25fr 1.4fr;
    gap: 40px 48px;
    align-items: start;
    padding-bottom: 44px;
}
.sf-grid.sf-3 { grid-template-columns: 1.3fr .8fr 1.8fr; }

.sf-col h5 {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--sf-ink);
}
.sf-col h5::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 36px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sf-o), var(--sf-o2));
}

/* ---------- Merek ---------- */
.sf-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sf-brand img { height: 52px; width: auto; object-fit: contain; display: block; }
.sf-brand-name { display: flex; flex-direction: column; min-width: 0; }
.sf-brand-name b {
    font-size: 1.45rem; line-height: 1; font-weight: 700;
    text-transform: uppercase; color: var(--sf-o);
}
.sf-brand-name small {
    margin-top: 5px; font-size: .75rem; font-style: italic; color: var(--sf-mut); line-height: 1;
}
.sf-about { color: var(--sf-mut); font-size: .98rem; line-height: 1.65; }

.sf-pill {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 5px 14px;
    border-radius: 999px;
    font-size: .8rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--sf-o);
    background: rgba(255, 140, 0, .1);
    border: 1px solid rgba(255, 140, 0, .35);
}

/* ---------- Sosial ---------- */
.sf-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sf-social a {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--sf-o);
    background: #fff;
    border: 1px solid rgba(255, 140, 0, .45);
    box-shadow: 0 4px 12px rgba(255, 140, 0, .12);
    transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.sf-social a:hover {
    color: #fff; background: linear-gradient(135deg, var(--sf-o), var(--sf-o2));
    transform: translateY(-4px) rotate(-6deg);
    box-shadow: 0 10px 20px rgba(255, 140, 0, .35);
}

/* ---------- Tautan ---------- */
.sf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sf-links a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 0;
    font-weight: 600;
    color: var(--sf-ink);
    transition: color .25s ease, transform .25s ease;
}
.sf-links a i { font-size: .7rem; color: var(--sf-o); transition: transform .25s ease; }
.sf-links a:hover { color: var(--sf-o); transform: translateX(4px); }
.sf-links a:hover i { transform: translateX(3px); }

.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sf-chips a {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .85rem; font-weight: 700;
    color: var(--sf-ink);
    background: #fff;
    border: 1px solid #e9ecef;
    transition: all .25s ease;
}
.sf-chips a:hover, .sf-chips a.on {
    color: #fff; border-color: var(--sf-o);
    background: linear-gradient(135deg, var(--sf-o), var(--sf-o2));
    transform: translateY(-2px);
}

/* ---------- Kontak ---------- */
.sf-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sf-info li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; line-height: 1.5; color: var(--sf-mut); min-width: 0; }
.sf-info li > div { min-width: 0; overflow-wrap: anywhere; }
.sf-info .ic {
    flex: 0 0 38px; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    color: var(--sf-o);
    background: rgba(255, 140, 0, .12);
    font-size: 1.05rem;
}
.sf-info b { display: block; color: var(--sf-ink); font-size: .92rem; margin-bottom: 1px; }
.sf-info a { color: var(--sf-mut); transition: color .2s ease; }
.sf-info a:hover { color: var(--sf-o); }

.sf-wa {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 18px; padding: 12px 18px;
    border: 0; border-radius: 999px;
    font-weight: 700; font-size: .95rem;
    color: #fff !important; background: #198754;
    box-shadow: 0 8px 18px rgba(25, 135, 84, .28);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    cursor: pointer; width: 100%;
}
.sf-wa:hover { background: #157347; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(25, 135, 84, .36); }

/* ---------- Peta ---------- */
.sf-map {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #e9ecef;
    border: 4px solid #fff;
    box-shadow: 0 10px 28px rgba(55, 64, 80, .14);
    aspect-ratio: 16 / 11;
}
.sf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-map-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-weight: 700; font-size: .92rem; color: var(--sf-o);
}
.sf-map-link:hover { color: var(--sf-od); }

/* ---------- Unit sekolah (footer utama) ---------- */
.sf-unit { padding: 12px 0; border-bottom: 1px dashed rgba(55, 64, 80, .15); }
.sf-unit:first-of-type { padding-top: 0; }
.sf-unit h6 {
    margin: 0 0 4px; font-size: .98rem; font-weight: 700; color: var(--sf-o);
    display: flex; align-items: center; gap: 6px;
}
.sf-unit p { font-size: .92rem; line-height: 1.5; color: var(--sf-mut); }
.sf-unit-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: center; padding-top: 16px; }
.sf-unit-meta .sf-info { gap: 8px; }
.sf-unit-meta .sf-wa { margin-top: 0; }

/* ---------- Bilah bawah ---------- */
.sf-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(55, 64, 80, .12);
    font-size: .9rem; color: var(--sf-mut);
}
.sf-bottom .vis {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #e9ecef; font-weight: 600;
}
.sf-bottom .vis b { color: var(--sf-o); }

/* ---------- Tombol melayang: jangan saling menimpa & jangan menutupi footer ---------- */
.floating-wa-btn, .scroll-top-btn { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }

/* =========================== TABLET =========================== */
@media (max-width: 1199.98px) {
    .sf-grid { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
    .sf-grid.sf-3 { grid-template-columns: 1fr 1fr; }
    .sf-grid.sf-3 .sf-col:last-child { grid-column: 1 / -1; }
}

/* ============================ HP ============================== */
@media (max-width: 767.98px) {
    .sf { padding-top: 44px; }
    .sf-grid, .sf-grid.sf-3 { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
    .sf-brand-name b { font-size: 1.3rem; }
    .sf-col h5 { margin-bottom: 16px; }
    .sf-links { grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .sf-map { aspect-ratio: 4 / 3; }
    .sf-unit-meta { grid-template-columns: 1fr; }
    .sf-bottom { flex-direction: column; text-align: center; padding-bottom: 28px; gap: 12px; }
    /* beri ruang agar tombol melayang tidak menutupi baris terakhir */
    .sf { padding-bottom: 8px; }
}
@media (max-width: 380px) {
    .sf-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sf::before { animation: none; }
    .sf * { transition: none !important; }
}