/* ============================================
   COMPRESSION — CSS-Only Kinetic Portfolio
   TM-620
   https://templatemo.com/tm-620-compression
   Design: TemplateMo
   ============================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --off-white: #F0F0F0;
    --carbon: #1A1A1A;
    --graphite: #2C2C2C;
    --steel: #4A4A4A;
    --ash: #6B6B6B;
    --neon-chartreuse: #DFFF00;
    --seam: #111111;
    --font-spine: 'Anton', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --ease-heavy: cubic-bezier(0.77, 0, 0.175, 1);
    --duration: 0.8s;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    background: var(--carbon);
    color: var(--off-white);
    overflow: hidden;
    overflow-x: hidden;
    height: 100vh;
    width: 100%;
}

/* --- THE TRACK --- */
main.track {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    gap: 0;
}

/* --- THE SLICES --- */
article.panel {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-right: 1px solid var(--seam);
    border-radius: 0;
    transition: flex var(--duration) var(--ease-heavy);
}

article.panel:last-child {
    border-right: none;
}

.panel__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.panel__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    filter: brightness(0.4) grayscale(100%);
    transform: scale(1.05);
    transition:
        filter var(--duration) var(--ease-heavy),
        transform var(--duration) var(--ease-heavy);
}

.panel__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.5) 0%,
        transparent 30%,
        transparent 60%,
        rgba(26, 26, 26, 0.6) 100%
    );
    z-index: 2;
    transition: opacity var(--duration) var(--ease-heavy);
}

/* Panel index */
.panel__index {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--off-white);
    opacity: 0.35;
    transition: opacity var(--duration) var(--ease-heavy);
    white-space: nowrap;
}

/* --- THE SPINE --- */
.spine {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    z-index: 10;
    writing-mode: vertical-rl;
    font-family: var(--font-spine);
    font-size: clamp(1.3rem, 2.5vw, 2.2rem);
    text-transform: uppercase;
    color: var(--off-white);
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
    transition:
        opacity 0.4s var(--ease-heavy),
        transform 0.4s var(--ease-heavy);
    pointer-events: none;
}

/* --- THE DETAILS --- */
.details {
    position: absolute;
    bottom: 48px;
    left: 48px;
    right: 48px;
    z-index: 10;
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity 0.5s var(--ease-heavy) 0.15s,
        transform 0.5s var(--ease-heavy) 0.15s;
    pointer-events: none;
}

.details__category {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--neon-chartreuse);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.details__category::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--neon-chartreuse);
}

.details__title {
    font-family: var(--font-spine);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    text-transform: uppercase;
    color: var(--off-white);
    line-height: 0.95;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.details__meta {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
}

.details__meta-item {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.details__meta-label {
    color: var(--steel);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.details__meta-value {
    color: var(--off-white);
}

.details__description {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.7;
    color: rgba(240, 240, 240, 0.6);
    max-width: 420px;
    margin-bottom: 32px;
}

.btn-view {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--neon-chartreuse);
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition:
        background 0.3s var(--ease-heavy),
        transform 0.3s var(--ease-heavy);
}

.btn-view:hover {
    background: var(--off-white);
    transform: translateX(4px);
}

.btn-view svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--ease-heavy);
}

.btn-view:hover svg {
    transform: translateX(4px);
}

/* ===========================================
   COMPRESSION ENGINE — HOVER STATES
   =========================================== */

main.track:hover > article.panel {
    flex: 1;
}

main.track > article.panel:hover {
    flex: 6;
}

article.panel:hover .panel__bg img {
    filter: brightness(0.85) grayscale(0%);
    transform: scale(1);
}

article.panel:hover .spine {
    opacity: 0.2;
    transform: translateX(-50%) rotate(180deg) translateY(-20px);
}

article.panel:hover .details {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

main.track:hover > article.panel .panel__index {
    opacity: 0;
}

article.panel:hover .panel__index {
    opacity: 0.35 !important;
}

/* ===========================================
   GLOBAL HEADER
   =========================================== */
.global-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 36px 0;
    height: 140px;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(26, 26, 26, 0.5) 40%,
        rgba(26, 26, 26, 0.15) 70%,
        transparent 100%
    );
    pointer-events: none;
}

.logo {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--off-white);
    pointer-events: auto;
    text-decoration: none;
}

.logo span {
    color: var(--neon-chartreuse);
    font-weight: 400;
}

.nav {
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.nav a {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.5);
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid transparent;
    transition:
        color 0.3s var(--ease-heavy),
        border-color 0.3s var(--ease-heavy);
}

.nav a:hover {
    color: var(--neon-chartreuse);
    border-color: rgba(223, 255, 0, 0.3);
}

/* ===========================================
   CSS-ONLY MODALS (:target)
   =========================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.5s var(--ease-heavy),
        visibility 0s linear 0.5s;
}

.modal-overlay:target {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.5s var(--ease-heavy),
        visibility 0s linear 0s;
}

.modal-overlay:target .modal__content {
    opacity: 1;
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 28px;
    right: 36px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--off-white);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    border: 1px solid var(--steel);
    border-radius: 0;
    transition:
        border-color 0.3s var(--ease-heavy),
        color 0.3s var(--ease-heavy);
}

.modal__close:hover {
    border-color: var(--neon-chartreuse);
    color: var(--neon-chartreuse);
}

.modal__content {
    max-width: 680px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.5s var(--ease-heavy) 0.1s,
        transform 0.5s var(--ease-heavy) 0.1s;
    scrollbar-width: thin;
    scrollbar-color: var(--steel) transparent;
}

.modal__content::-webkit-scrollbar {
    width: 4px;
}

.modal__content::-webkit-scrollbar-track {
    background: transparent;
}

.modal__content::-webkit-scrollbar-thumb {
    background: var(--steel);
    border-radius: 0;
}

.modal__content::-webkit-scrollbar-thumb:hover {
    background: var(--ash);
}

.modal__label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--neon-chartreuse);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal__label::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--neon-chartreuse);
}

.modal__heading {
    font-family: var(--font-spine);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    text-transform: uppercase;
    color: var(--off-white);
    line-height: 0.95;
    margin-bottom: 36px;
}

.modal__text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.9;
    color: rgba(240, 240, 240, 0.6);
    margin-bottom: 24px;
}

.modal__text strong {
    color: var(--off-white);
    font-weight: 700;
}

.modal__text a {
    color: var(--off-white);
    text-decoration: none;
    border-bottom: 1px solid var(--steel);
    padding-bottom: 2px;
    transition: border-color 0.3s var(--ease-heavy);
}

.modal__text a:hover {
    border-color: var(--neon-chartreuse);
}

.modal__divider {
    width: 48px;
    height: 1px;
    background: var(--steel);
    margin: 36px 0;
    border: none;
}

/* Work modal — project list */
.modal__project-list {
    list-style: none;
    padding: 0;
}

.modal__project-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid rgba(74, 74, 74, 0.3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.modal__project-list li:first-child {
    border-top: 1px solid rgba(74, 74, 74, 0.3);
}

.modal__project-name {
    color: var(--off-white);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.modal__project-year {
    color: var(--steel);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

/* Contact modal — grid */
.modal__contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.modal__contact-item {
    font-family: var(--font-mono);
}

.modal__contact-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 8px;
}

.modal__contact-value {
    font-size: 0.8rem;
    color: var(--off-white);
}

.modal__contact-value a {
    color: var(--off-white);
    text-decoration: none;
    border-bottom: 1px solid var(--steel);
    padding-bottom: 2px;
    transition: border-color 0.3s var(--ease-heavy);
}

.modal__contact-value a:hover {
    border-color: var(--neon-chartreuse);
}

/* --- BOTTOM STRIP --- */
.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 36px;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba(26, 26, 26, 0.6) 0%,
        transparent 100%
    );
}

.footer__credit {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.3);
    pointer-events: auto;
}

.footer__credit a {
    color: rgba(240, 240, 240, 0.5);
    text-decoration: none;
}

.footer__scroll-hint {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__scroll-hint::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: rgba(240, 240, 240, 0.3);
}

/* --- ENTRANCE ANIMATION --- */
@keyframes sliceIn {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

article.panel {
    transform-origin: left center;
    animation: sliceIn 1s var(--ease-heavy) both;
}

article.panel:nth-child(1) { animation-delay: 0.05s; }
article.panel:nth-child(2) { animation-delay: 0.15s; }
article.panel:nth-child(3) { animation-delay: 0.25s; }
article.panel:nth-child(4) { animation-delay: 0.35s; }
article.panel:nth-child(5) { animation-delay: 0.45s; }

.global-header,
.global-footer {
    animation: fadeUp 0.6s var(--ease-heavy) 0.7s both;
}

.spine {
    animation: fadeUp 0.5s var(--ease-heavy) backwards;
}

article.panel:nth-child(1) .spine { animation-delay: 0.6s; }
article.panel:nth-child(2) .spine { animation-delay: 0.7s; }
article.panel:nth-child(3) .spine { animation-delay: 0.8s; }
article.panel:nth-child(4) .spine { animation-delay: 0.9s; }
article.panel:nth-child(5) .spine { animation-delay: 1.0s; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    main.track {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    article.panel {
        flex: none !important;
        width: 100%;
        height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--seam);
    }

    article.panel:last-child {
        border-bottom: none;
    }

    .panel__bg img {
        filter: brightness(0.7) grayscale(0%) !important;
        transform: scale(1) !important;
    }

    .spine { display: none; }

    .panel__index {
        opacity: 0.35 !important;
        top: 20px;
        font-size: 0.55rem;
    }

    .details {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        bottom: 24px;
        left: 24px;
        right: 24px;
    }

    .details__title { font-size: 1.4rem; }
    .details__description { display: none; }

    .global-header {
        padding: 16px 20px 0;
        height: 80px;
        align-items: flex-start;
    }

    .global-footer { display: none; }

    .nav a {
        padding: 6px 10px;
        font-size: 0.55rem;
    }

    body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
    }

    .modal__content { padding: 40px 24px; }
    .modal__contact-grid { grid-template-columns: 1fr; }

    .modal-overlay {
        align-items: flex-start;
    }

    .modal__content {
        max-height: 100vh;
        margin-top: 40px;
        padding-bottom: 60px;
    }

    .modal__close {
        top: 20px;
        right: 50px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   FORMULA GROUP — FINAL UI HOVER OVERRIDES
   1) "Məhsullara bax": white hover, no green.
   2) Header Portfolio/About/Contact: icon-only, cart-sized,
      white, cart-like bump/glow hover; no green square/underline.
   3) Contact Email/Phone/WhatsApp: remove green underline;
      white glow/bump hover only.
   ============================================================ */

/* 1. Məhsullara bax — keep existing button geometry, only change hover. */
.btn-view:hover,
a.btn-view:hover,
button.btn-view:hover {
    color: #fff !important;
    border-color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.btn-view:hover svg,
a.btn-view:hover svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* 2. Top navigation: icons only, same visual size as cart. */
.global-header .nav {
    display: flex;
    align-items: center;
    gap: 14px;
}
.global-header .nav > a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        filter .28s ease,
        color .2s ease,
        background .2s ease;
}
.global-header .nav > a::before,
.global-header .nav > a::after {
    display: none !important;
    content: none !important;
}
.global-header .nav .nav-link-text {
    display: none !important;
}
.global-header .nav .nav-icon-only {
    display: inline-flex !important;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}
.global-header .nav .nav-icon-only svg {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
    stroke: #fff !important;
    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        filter .28s ease;
}
.global-header .nav > a:hover {
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-3px) scale(1.08);
}
.global-header .nav > a:hover .nav-icon-only svg {
    color: #fff !important;
    stroke: #fff !important;
    transform: translateY(-1px) scale(1.12);
    filter: drop-shadow(0 0 5px rgba(255,255,255,.72))
            drop-shadow(0 0 11px rgba(255,255,255,.30));
}

/* 3. Contact links: no green underline; white bump/glow only. */
.modal__contact-value a,
.modal__contact-value a:visited {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
    transition:
        transform .25s cubic-bezier(.22,1,.36,1),
        filter .25s ease,
        color .2s ease;
    display: inline-block;
}
.modal__contact-value a::before,
.modal__contact-value a::after {
    display: none !important;
    content: none !important;
}
.modal__contact-value a:hover,
.modal__contact-value a:focus-visible {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transform: translateY(-2px) scale(1.045);
    filter: drop-shadow(0 0 5px rgba(255,255,255,.75))
            drop-shadow(0 0 10px rgba(255,255,255,.28));
}

/* ============================================================
   FG CANONICAL ROUTE MODAL VISIBILITY FIX
   Root cause: .modal-overlay is opacity:0 + visibility:hidden by default.
   display:flex alone does NOT make a direct /products/... route visible.
   Canonical server-rendered modals therefore explicitly override all three.
   ============================================================ */
.modal-overlay.canonical-route-modal {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    pointer-events: auto !important;
}
.modal-overlay.canonical-route-modal .modal__content {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* ============================================================
   FG ERP — FINAL TINY HOVER FIX
   ONLY:
   1) Məhsullara bax hover -> white
   2) Kontakt email/phone/WhatsApp hover -> white
   No layout, routing, modal or functionality changes.
   ============================================================ */

/* 1. Məhsullara bax — hover black -> white. */
.btn-view:hover,
a.btn-view:hover,
button.btn-view:hover,
.modal-product-card .btn-view:hover {
    color: #fff !important;
}
.btn-view:hover *,
a.btn-view:hover *,
button.btn-view:hover *,
.modal-product-card .btn-view:hover * {
    color: #fff !important;
    stroke: #fff !important;
}

/* 2. Kontakt links — remove green hover, use white only. */
.modal__contact-value a:hover,
.modal__contact-value a:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible,
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover,
a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover {
    color: #fff !important;
    border-bottom-color: transparent !important;
    text-decoration-color: transparent !important;
    background-image: none !important;
}

/* FG REAL HOVER OVERRIDE — EXACT INLINE SELECTORS
   Only the two requested hover states are overridden. */
#contact .modal__contact-item a:hover {
    color: #ffffff !important;
    border-bottom-color: transparent !important;
    text-decoration-color: transparent !important;
    background-image: none !important;
}

/* ============================================================
   FINAL EXACT REQUEST
   1) Top cart button: black -> white on hover.
      The previous generic .nav a:hover / .btn-view:hover rules used
      !important and were overriding the earlier attempt. This rule is
      deliberately last and targets the exact cart element.
   2) Contact submit button uses an icon instead of text.
   ============================================================ */
.global-header #cart-icon-link:hover,
.global-header #cart-icon-link:focus-visible {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}
.global-header #cart-icon-link:hover svg,
.global-header #cart-icon-link:focus-visible svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

.fg-contact-form button.btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fg-contact-form button.btn-view .fg-send-icon {
    width: 18px;
    height: 18px;
    margin: 0;
    color: currentColor;
}


        /* ============================================================
           FINAL GLOBAL BUTTON HOVER STANDARD
           User requirement: every button/button-like control that would
           otherwise become black or green on hover becomes WHITE.
           Text/icons remain BLACK for contrast.
           This is intentionally the LAST button hover rule so previous
           green/black !important rules cannot override it.
           ============================================================ */
        button:hover,
        a.btn-view:hover,
        a.btn-cart:hover,
        a.btn-copy-styled:hover,
        a.btn-expandable:hover,
        a.btn-primary:hover,
        a.btn-secondary:hover,
        a.btn-submit:hover,
        a.btn-send:hover,
        a.btn-close:hover,
        .button:hover,
        .btn:hover,
        [role="button"]:hover {
            background: #ffffff !important;
            background-color: #ffffff !important;
            background-image: none !important;
            color: #000000 !important;
            border-color: #ffffff !important;
        }

        button:hover *,
        a.btn-view:hover *,
        a.btn-cart:hover *,
        a.btn-copy-styled:hover *,
        a.btn-expandable:hover *,
        a.btn-primary:hover *,
        a.btn-secondary:hover *,
        a.btn-submit:hover *,
        a.btn-send:hover *,
        a.btn-close:hover *,
        .button:hover *,
        .btn:hover *,
        [role="button"]:hover * {
            color: #000000 !important;
            stroke: #000000 !important;
            fill: none !important;
        }

        /* Preserve the send icon itself on hover. */
        #contact .fg-contact-form button.btn-view:hover .fg-send-icon {
            color: #000000 !important;
            stroke: #000000 !important;
            fill: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

/* ============================================================
   HEADER LAYOUT RESTORE
   The main-page logo must remain in the header flex flow.
   Only catalog/product overlay logos are fixed overlays.
   This prevents Portfolio / Haqqımızda / Kontakt / Cart from
   collapsing beside a fixed logo.
   ============================================================ */
.global-header > a.logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: auto !important;
}
.global-header > a.logo img {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
}


/* Final logo geometry is intentionally controlled by index.php inline CSS. */


/* FINAL HOMEPAGE LOGO POSITION LOCK
   Same viewport box as all public-page logos: 28x28px,
   36px from left and 22px from top. */
.global-header > a.logo {
    position: fixed !important;
    top: 22px !important;
    left: 36px !important;
    right: auto !important;
    bottom: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    transform: none !important;
    z-index: 10001 !important;
}
.global-header > a.logo img {
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    transform: none !important;
}
/* Keep homepage navigation independent of the fixed logo. */
.global-header > .nav {
    position: fixed !important;
    top: 22px !important;
    right: 36px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10001 !important;
}