/* ==========================================================================
   Nagdos - Footer Accordion Component (Mobile < 768px)
   Transforms footer navigation & contact widgets into interactive accordions.
   Mobile: "Site Haritası" (col-6/54%) and "Yasal" (col-5/44%) side by side,
   followed by full-width rich "Hızlı İletişim" (col-12/100%).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop & Tablet (>= 768px) - Preserve Original 4-Column Layout
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .footer__accordion-btn {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        font: inherit !important;
        text-align: inherit !important;
        cursor: default !important;
        pointer-events: none !important;
    }

    .footer__accordion-icon,
    .footer__accordion-line {
        display: none !important;
    }

    .footer__widget-collapse {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Contact enhancements on desktop */
    .footer__contact-detail {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .footer__contact-sub {
        font-size: 11.5px;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.2;
    }
    .footer__icon-wa {
        color: #25d366 !important;
    }
    .footer__sub-wa {
        color: rgba(37, 211, 102, 0.85) !important;
    }
    .footer__sub-active {
        color: #34e07a !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile Phone View (< 768px) - Side-by-Side Links + Full Contact Accordion
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Main row flex container */
    .footer__main .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    /* Widget 1: Brand Info (Full Width) */
    .footer__main .row > div:first-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* All 3 Accordion Widgets: Full Width (col-12 / 100% Golden Ratio) */
    .footer__main .row > .footer__col-links,
    .footer__main .row > .footer__col-legal,
    .footer__main .row > .footer__col-contact,
    .footer__main .row > div:nth-child(2),
    .footer__main .row > div:nth-child(3),
    .footer__main .row > div:nth-child(4) {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }

    /* Outer wrapper for each accordion item */
    .footer__widget--accordion {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        transition: background-color 0.25s ease;
    }

    /* Top border on the first accordion item (Site Haritası) */
    .footer__col-links .footer__widget--accordion,
    .footer__main .row > div:nth-child(2) .footer__widget--accordion {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Accordion Header */
    .widget-title-premium.footer__accordion-header {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* Suppress the absolute ::after red underline on mobile header */
    .widget-title-premium.footer__accordion-header::after {
        display: none !important;
    }

    /* Interactive button covering entire header (Golden Ratio: ~54px touch target, 20px horizontal margin) */
    .footer__accordion-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 17px 20px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        color: #ffffff !important;
        text-align: left !important;
        gap: 12px !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        box-sizing: border-box !important;
    }

    .footer__accordion-title-wrap {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .footer__accordion-text {
        font-family: Kanit, sans-serif !important;
        font-size: 16.5px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: 0.2px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        transition: color 0.25s ease !important;
    }

    .footer__accordion-btn:hover .footer__accordion-text,
    .footer__widget--accordion.is-open .footer__accordion-text {
        color: #ffffff !important;
    }

    /* Under-title red accent line (Golden Ratio width expansion: 24px -> 38px) */
    .footer__accordion-line {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: var(--primary, #d32e2e) !important;
        border-radius: 2px !important;
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .footer__widget--accordion.is-open .footer__accordion-line {
        width: 38px !important;
    }

    /* Modern circular chevron indicator (Uniform 32px for all 3 accordions) */
    .footer__accordion-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 11px !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
        flex-shrink: 0 !important;
    }

    .footer__widget--accordion.is-open .footer__accordion-icon {
        transform: rotate(180deg) !important;
        background: rgba(211, 46, 46, 0.18) !important;
        border-color: rgba(211, 46, 46, 0.45) !important;
        color: #ff5252 !important;
    }

    /* Smooth CSS Grid Collapse Transition */
    .footer__widget-collapse {
        display: grid !important;
        grid-template-rows: 0fr !important;
        transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.35s ease !important;
        opacity: 0 !important;
        overflow: hidden !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .footer__widget-collapse > * {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .footer__widget--accordion.is-open .footer__widget-collapse {
        grid-template-rows: 1fr !important;
        opacity: 1 !important;
        padding-top: 8px !important;
        padding-bottom: 24px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Eliminate bottom dead space and double line before footer bottom */
    .footer__premium .footer__main,
    .footer__main,
    .footer__main .container,
    .footer__main .row {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .footer__col-contact .footer__widget--accordion,
    .footer__main .row > div:last-child .footer__widget--accordion {
        border-bottom: none !important;
    }
    .footer__bottom-premium {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-top: 0 !important;
        padding-top: 22px !important;
        padding-bottom: 28px !important;
    }

    /* Links inside accordion (Site Haritası & Yasal) */
    .footer__widget--accordion .footer__links-premium {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        padding: 4px 0 6px 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .footer__widget--accordion .footer__links-premium li {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .footer__widget--accordion .footer__links-premium li a {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        padding: 3px 0 !important;
        display: inline-block !important;
        text-align: left !important;
        transform: none !important;
        word-break: normal !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
    }

    .footer__widget--accordion .footer__links-premium li a:hover,
    .footer__widget--accordion .footer__links-premium li a:active {
        color: #ffffff !important;
        transform: translateX(6px) !important;
    }

    /* Comprehensive Contact details inside Hızlı İletişim */
    .footer__widget--accordion.is-contact .footer__contact-premium {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 16px !important;
        text-align: left !important;
        padding: 6px 0 16px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .footer__widget--accordion.is-contact .footer__contact-premium li {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }

    .footer__widget--accordion.is-contact .footer__contact-premium li i {
        color: var(--primary, #d32e2e) !important;
        font-size: 17px !important;
        width: 22px !important;
        margin-top: 3px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }

    .footer__icon-wa {
        color: #25d366 !important;
    }

    .footer__contact-detail {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .footer__contact-detail a,
    .footer__contact-detail span {
        font-size: 15px !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-align: left !important;
        word-break: break-word !important;
        transition: color 0.2s ease !important;
    }

    .footer__contact-detail a:hover {
        color: #ffffff !important;
    }

    .footer__contact-sub {
        font-size: 11.5px !important;
        color: rgba(255, 255, 255, 0.45) !important;
        line-height: 1.2 !important;
    }

    .footer__sub-wa {
        color: rgba(37, 211, 102, 0.85) !important;
    }

    .footer__sub-active {
        color: #34e07a !important;
    }
}