/**

 * Footer — mobil özel düzen (≤768px)

 * Akordeon menüler, hızlı iletişim şeridi, kompakt güven/ödeme alanı.

 * Masaüstünde akordeon devre dışı; normal sütun düzeni korunur.

 */



/* —— Masaüstü: mobil bileşenleri gizle, akordeonu düz sütuna çevir —— */

.footer-mobile-quick {

    display: none;

}



.footer-accordion__summary {

    list-style: none;

    cursor: default;

}



.footer-accordion__summary::-webkit-details-marker {

    display: none;

}



.footer-accordion__chevron {

    display: none;

}



@media (min-width: 769px) {

    .footer-accordion__panel {

        display: block;

        border: none;

        background: none;

    }



    .footer-accordion__summary {

        pointer-events: none;

        padding: 0;

        margin: 0;

        display: block;

    }



    .footer-accordion__title.footer__heading {

        margin-bottom: 1.1rem;

        display: flex;

        width: 100%;

    }



    .footer-accordion__body {

        display: block !important;

        padding: 0;

    }



    .footer-column {

        border: none;

    }

}



/* —— Mobil —— */

@media (max-width: 768px) {

    .footer {

        padding-bottom: 16px;

    }



    .footer__container {

        padding-top: 18px;

    }



    .footer__gradient-top {

        height: 3px;

    }



    .footer__divider {

        margin: 14px 0 12px;

    }



    /* Hızlı iletişim şeridi */

    .footer-mobile-quick {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: 8px;

        margin-bottom: 12px;

        padding: 10px;

        border-radius: 12px;

        background: color-mix(in srgb, var(--footer-link, #cbd5e1) 6%, transparent);

        border: 1px solid color-mix(in srgb, var(--footer-link, #cbd5e1) 12%, transparent);

    }



    .footer-mobile-quick__btn {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 6px;

        flex: 0 0 auto;

        min-width: 6.75rem;

        padding: 9px 12px;

        border-radius: 10px;

        background: color-mix(in srgb, var(--footer-bg, #020617) 70%, #fff 4%);

        border: 1px solid color-mix(in srgb, var(--footer-link, #cbd5e1) 14%, transparent);

        color: var(--footer-link, #cbd5e1);

        text-decoration: none;

        font-size: 0.78rem;

        font-weight: 600;

        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    }



    .footer-mobile-quick__btn--social {

        flex: 0 0 auto;

        width: 2.5rem;

        min-width: 0;

        padding: 0;

        aspect-ratio: 1;

    }



    .footer-mobile-quick__btn i {

        font-size: 0.9rem;

        color: #7dd3fc;

        flex-shrink: 0;

    }



    .footer-mobile-quick__btn:active {

        background: color-mix(in srgb, var(--secondary-color, #008ed9) 16%, transparent);

        border-color: color-mix(in srgb, var(--secondary-color, #008ed9) 35%, transparent);

        color: var(--footer-link-hover, #f8fafc);

    }



    /* Menü alanı — dikey akordeon listesi */

    .footer-content {

        display: flex;

        flex-direction: column;

        gap: 0;

        grid-template-columns: none;

    }



    .footer-column {

        min-width: 0;

        border-bottom: 1px solid color-mix(in srgb, var(--footer-link, #cbd5e1) 12%, transparent);

    }



    .footer-column:last-child {

        border-bottom: none;

    }



    .footer-accordion__panel {

        margin: 0;

    }



    .footer-accordion__summary {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        padding: 12px 2px;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        user-select: none;

    }



    .footer-accordion__chevron {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 1.75rem;

        height: 1.75rem;

        flex-shrink: 0;

        border-radius: 8px;

        background: color-mix(in srgb, var(--footer-link, #cbd5e1) 8%, transparent);

        color: var(--footer-link, #cbd5e1);

        font-size: 0.65rem;

        transition: transform 0.22s ease, background 0.2s ease;

    }



    .footer-accordion__panel[open] .footer-accordion__chevron {

        transform: rotate(180deg);

        background: color-mix(in srgb, var(--secondary-color, #008ed9) 18%, transparent);

        color: var(--footer-link-hover, #f8fafc);

    }



    .footer-accordion__title.footer__heading {

        margin: 0;

        flex: 1;

        min-width: 0;

        font-size: 0.68rem;

        letter-spacing: 0.1em;

    }



    .footer-accordion__title .footer__heading-icon {

        width: 1.65rem;

        height: 1.65rem;

        font-size: 0.75rem;

        border-radius: 8px;

    }



    .footer-accordion__body {

        padding: 0 0 10px;

    }



    .footer-column > ul:not(.contact-info) li,

    .footer-accordion__body > ul:not(.contact-info) li {

        margin-bottom: 0.15rem;

    }



    .footer-column > ul:not(.contact-info) li a,

    .footer-accordion__body > ul:not(.contact-info) li a {

        padding: 0.38rem 0.35rem;

        font-size: 0.84rem;

        border-radius: 6px;

    }



    .contact-info li {

        margin-bottom: 0.55rem;

        font-size: 0.84rem;

    }



    .contact-info__ic {

        width: 1.75rem;

        height: 1.75rem;

        font-size: 0.72rem;

    }



    .footer-social {

        margin-top: 0.65rem;

        gap: 0.4rem;

        justify-content: center;

        align-items: center;

    }



    .footer-social__link {

        width: 2.15rem;

        height: 2.15rem;

        font-size: 0.9rem;

        border-radius: 10px;

    }



    /* Vitrin stili mobilde border kaldır */

    body.ui-footer-split .footer-column--contact {

        padding-right: 0;

        border-right: none;

    }



    /* Güven / ödeme — yatay kaydırmalı kompakt şerit */

    .footer-payment-security {

        flex-direction: column;

        gap: 10px;

        margin-bottom: 12px;

        padding-bottom: 12px;

    }



    .security-badges,

    .payment-cards {

        min-width: 0;

        width: 100%;

    }



    .security-badges h5,

    .payment-cards h5 {

        font-size: 0.62rem;

        margin-bottom: 6px;

        letter-spacing: 0.08em;

    }



    .badges-grid,

    .cards-grid {

        flex-wrap: nowrap;

        overflow-x: auto;

        justify-content: flex-start;

        gap: 8px;

        padding-bottom: 2px;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }



    .badges-grid::-webkit-scrollbar,

    .cards-grid::-webkit-scrollbar {

        display: none;

    }



    .security-badge,

    .payment-card {

        flex: 0 0 auto;

        min-width: auto;

        max-width: none;

        padding: 7px 10px;

        font-size: 0.72rem;

        border-radius: 9px;

    }



    .security-badge i,

    .payment-card i {

        font-size: 0.95rem;

    }



    /* Alt kredi alanı */

    .footer-credits {

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }



    .footer-copyright {

        min-width: 0;

        width: 100%;

    }



    .footer-copyright p {

        font-size: 0.78rem;

        line-height: 1.45;

        margin-bottom: 4px;

    }



    .footer-legal-note {

        font-size: 0.68rem;

        line-height: 1.4;

    }



    .marlev-credit {

        width: 100%;

        margin-top: 0;

    }

}



@media (max-width: 480px) {

    .footer-mobile-quick__btn {

        font-size: 0.72rem;

        padding: 8px;

    }



    .footer-mobile-quick__btn span {

        display: none;

    }



    .footer-mobile-quick__btn:not(.footer-mobile-quick__btn--social) {

        flex: 0 0 auto;

        width: 2.75rem;

        min-width: 0;

        aspect-ratio: 1;

        padding: 0;

    }



    .security-badge span,

    .payment-card span {

        display: none;

    }



    .security-badge,

    .payment-card {

        padding: 8px 10px;

    }

}


