/*
 * Footer situs publik SMAN 1 Katapang.
 *
 * Dipakai SEMUA halaman publik, jadi kelasnya diberi awalan `ft-` sendiri dan
 * tidak menumpang kelas lama di style.css. Dengan begitu aturan lama tetap
 * utuh dan bisa dikembalikan kapan saja hanya dengan melepas berkas ini.
 *
 * Tidak lewat Laravel Mix — tampilan publik memuat CSS statis langsung dari
 * /public/css, jadi ubah berkas ini secara langsung.
 */

.ft {
    --ft-biru:   #037abc;
    --ft-terang: #eaf1f7;
    --ft-redup:  #93a6b6;
    --ft-garis:  rgba(255, 255, 255, .1);

    background: #0d1c28;
    color: var(--ft-redup);
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
}

/* Garis warna tipis di batas atas, penanda peralihan dari isi ke footer. */
.ft__aksen {
    height: 3px;
    background: linear-gradient(90deg, var(--ft-biru), #45b6ec 55%, #be1233);
}

.ft__wadah {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.ft__utama {
    padding: 58px 0 46px;
}

.ft__kisi {
    display: grid;
    /* Kolom identitas dibuat paling lebar; sebelumnya ketiganya sama besar
       sehingga kolom media sosial yang isinya dua ikon menyisakan ruang
       kosong sangat lebar di sisi kanan. */
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 44px;
}

/* ------------------------------------------------------------------ identitas */

.ft__logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    text-decoration: none;
}

.ft__logo img {
    width: 52px;
    height: 52px;
    flex: none;
}

.ft__logo strong {
    display: block;
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
}

.ft__logo span {
    font-size: 13px;
    color: var(--ft-redup);
}

.ft__tentang {
    margin: 0 0 22px;
    max-width: 42ch;
}

/* ------------------------------------------------------------------- judul */

.ft__judul {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ft-garis);
    position: relative;
}

/* Potongan biru pendek di ujung kiri garis, bukan garis putih polos. */
.ft__judul::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 38px;
    height: 2px;
    background: var(--ft-biru);
}

/* ------------------------------------------------------------------ tautan */

.ft__daftar {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ft__daftar li + li {
    margin-top: 9px;
}

.ft__daftar a {
    color: var(--ft-redup);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: color .18s, transform .18s;
}

.ft__daftar a::before {
    content: '\f105';               /* fa-angle-right */
    font-family: FontAwesome;
    font-size: 13px;
    color: var(--ft-biru);
    opacity: .6;
    transition: opacity .18s;
}

.ft__daftar a:hover,
.ft__daftar a:focus {
    color: #fff;
    text-decoration: none;
    transform: translateX(3px);
}

.ft__daftar a:hover::before {
    opacity: 1;
}

/* ------------------------------------------------------------------ kontak */

.ft__kontak {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ft__kontak li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ft__kontak li + li {
    margin-top: 15px;
}

.ft__kontak .fa {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    color: var(--ft-biru);
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    transition: background .18s, color .18s;
}

.ft__kontak li:hover .fa {
    background: var(--ft-biru);
    color: #fff;
}

.ft__kontak a {
    color: var(--ft-terang);
    text-decoration: none;
    word-break: break-word;
    transition: color .18s;
}

.ft__kontak a:hover,
.ft__kontak a:focus {
    color: #fff;
    text-decoration: underline;
}

.ft__label {
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6d8195;
    margin-bottom: 1px;
}

/* ------------------------------------------------------------ media sosial */

.ft__sosial {
    display: flex;
    gap: 10px;
}

.ft__sosial a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--ft-garis);
    color: var(--ft-terang);
    font-size: 16px;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s, border-color .2s;
}

.ft__sosial a:hover,
.ft__sosial a:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
}

/* Warna resmi tiap layanan, supaya langsung dikenali. */
.ft__sosial a.is-fb:hover      { background: #1877f2; border-color: #1877f2; }
.ft__sosial a.is-ig:hover      { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
                                 border-color: #dc2743; }

/* ------------------------------------------------------------------- bawah */

.ft__bawah {
    border-top: 1px solid var(--ft-garis);
    padding: 20px 0;
}

.ft__bawah-isi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ft__bawah p {
    margin: 0;
    font-size: 13.5px;
    color: #6d8195;
}

.ft__atas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ft-redup);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--ft-garis);
    transition: color .18s, border-color .18s, background .18s;
}

.ft__atas:hover,
.ft__atas:focus {
    color: #fff;
    text-decoration: none;
    border-color: var(--ft-biru);
    background: rgba(3, 122, 188, .16);
}

/* ---------------------------------------------------------------- responsif */

@media (max-width: 900px) {
    .ft__kisi {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    .ft__identitas {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .ft__kisi {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ft__utama {
        padding: 42px 0 34px;
    }

    .ft__bawah-isi {
        justify-content: center;
        text-align: center;
    }
}