/* footer.css - dipakai semua halaman publik */
.main-footer,
.main-footer * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-footer {
    position: relative;
    z-index: 5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    text-align: left;
}

/* ================= MAIN FOOTER ================= */

.main-footer {
    width: 100%;
    padding: 76px 5% 32px;

    box-sizing: border-box;

    background: #6e5640;
    color: #fcfbfa;
}

.footer-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.1fr)
        minmax(180px, 0.8fr)
        minmax(300px, 1.2fr);

    gap: 80px;

    padding-bottom: 58px;
}

.footer-brand {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.footer-logo {
    display: block;

    width: auto;
    height: 72px;

    object-fit: contain;
}


/* ================= FOOTER HEADINGS ================= */

.footer-heading {
    margin: 0 0 22px;

    color: #fcfbfa;

    font-size: 0.7rem;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ================= FOOTER NAVIGATION ================= */

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
}

.footer-nav a {
    color: #fcfbfa;

    font-size: 0.87rem;
    line-height: 1.45;
    font-weight: 500;

    text-decoration: none;

    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}

.footer-nav a:hover {
    color: #ffffff;
    transform: translateX(5px);
    opacity: 1;
}


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

.footer-social-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));

    column-gap: 42px;
    row-gap: 18px;
}

.footer-social-item {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 0;

    color: #fcfbfa;
    text-decoration: none;

    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social-item:hover {
    transform: translateX(4px);
}

.footer-social-label {
    color: #ffffff;

    font-size: 0.64rem;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.72;
}

.footer-social-account {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 500;

    transition:
        color 0.2s ease;
}

.footer-social-account svg {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    fill: currentColor;

    transition:
        color 0.2s ease;
}


/* ================= SOCIAL HOVER COLORS ================= */

.footer-social-item--instagram:hover .footer-social-account {
    color: #e1306c;
}

.footer-social-item--tiktok:hover .footer-social-account {
    color: #111111;
}

.footer-social-item--youtube:hover .footer-social-account {
    color: #ff0000;
}

.footer-social-item--facebook:hover .footer-social-account {
    color: #1877f2;
}

.footer-social-item--whatsapp:hover .footer-social-account {
    color: #25d366;
}


/* ================= FOOTER BOTTOM ================= */

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.footer-copyright,
.footer-credit {
    margin: 0;

    max-width: 100%;

    color: #ffffff;

    font-size: 0.71rem;
    line-height: 1.6;
}

.footer-credit {
    opacity: 1;
}

.footer-credit strong {
    color: #ffffff;
    font-weight: 700;
    opacity: 1;
}


/* ================= TABLET ================= */

@media (max-width: 900px) {

    .main-footer {
        padding: 64px 6% 28px;
    }

    .footer-top {
        grid-template-columns:
            1fr 1fr;

        gap: 50px 60px;
    }

    .footer-brand {
        grid-column: 1 / -1;

        justify-content: flex-start;
    }

    .footer-logo {
        height: 64px;
    }

    .footer-social-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


/* ================= MOBILE ================= */

@media (max-width: 600px) {

    .main-footer {
        padding: 52px 22px 25px;
    }

    .footer-top {
        display: flex;
        flex-direction: column;

        gap: 42px;

        padding-bottom: 42px;
    }

    .footer-brand {
        justify-content: flex-start;
    }

    .footer-logo {
        height: 58px;
    }

    .footer-heading {
        margin-bottom: 18px;

        font-size: 0.66rem;
    }

    .footer-nav {
        gap: 10px;
    }

    .footer-nav a {
        font-size: 0.84rem;
    }

    .footer-social-list {
        display: flex;
        flex-direction: column;

        gap: 15px;
    }

    .footer-social-label {
        font-size: 0.61rem;
    }

    .footer-social-account {
        font-size: 0.78rem;
    }

    .footer-social-account svg {
        width: 16px;
        height: 16px;
    }

    .footer-bottom {
        gap: 9px;
        padding-top: 21px;
    }

    .footer-copyright,
    .footer-credit {
        font-size: 0.67rem;
        line-height: 1.65;
    }
}


.wa-floating {
    position: fixed;
    right: 24px;
    bottom: 26px;
    z-index: 9999;

    width: 48px;
    height: 48px;

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

    background: #ffffff;
    color: #222222;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;

    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.wa-floating__icon {
    display: block;
    width: 23px;
    height: 23px;

    fill: #222222;
}

.wa-floating:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.16);
}

@media (max-width: 600px) {
    .wa-floating {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    .wa-floating__icon {
        width: 21px;
        height: 21px;
    }
}

@media (max-width: 380px) {
    .wa-floating {
        right: 13px;
        bottom: 13px;
        width: 42px;
        height: 42px;
    }

    .wa-floating__icon {
        width: 20px;
        height: 20px;
    }
}


.cookie-banner[hidden] { display: none; }

.cookie-banner {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 10000;
    width: 270px;
    max-width: calc(100vw - 40px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #2b2620;
    border: 1px solid #e6e1d8;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    animation: cookie-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cookie-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.55;
    color: #5d544a;
}

.cookie-banner__actions {
    display: flex;
    gap: 8px;
}

.cookie-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid #6e5640;
    border-radius: 999px;
    background: #6e5640;
    color: #fcfbfa;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cookie-btn:hover {
    opacity: 0.85;
}

.cookie-btn--ghost {
    background: transparent;
    color: #6e5640;
}

@media (max-width: 640px) {
    .cookie-banner {
        left: 12px;
        bottom: 12px;
        width: 250px;
        padding: 14px 16px;
    }
}