/* =============================================================
   FINEASTRA ARCHITECTURAL SYSTEMS — Birleşik CSS
   - 8 ürün için tüm stiller
   - Kart iskeleti eski fa2-systems'ten korunmuştur
   - Her ürün kendi namespace'i altında (.fa-hinged, .fa-slide, vs.)
   ============================================================= */


/* =============================================================
   :root — Marka ve layout değişkenleri
   ============================================================= */
:root {
    --fa-gold: #c9a84c;
    --fa-dark: #1a1a1a;
    --fa-accent: #c9a84c;
    --fa-frame-color: #003e52;
    --fa-panel-color: #b2b2b2;
    --fa-white: #ffffff;
    --fa-text-primary: #000000;
    --fa-text-secondary: rgba(0, 0, 0, 0.5);
    --fa-content-width: 1320px;
    --fa-icon-size: min(220px, 82%);
    --fa-gap: clamp(1.25rem, 3vw, 2.5rem);
    --fa-padding-y: clamp(3rem, 6vw, 6rem);
    --fa-padding-x: clamp(1rem, 3vw, 2rem);
    --fa-transition-duration: 0.85s;
    --fa-transition-ease: cubic-bezier(0.2, 0.9, 0.4, 1);
    --fa-card-transition: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* =============================================================
   MAIN SECTION
   ============================================================= */
.fa2-systems {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfc 52%, #ffffff 100%);
    padding: var(--fa-padding-y) 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .fa2-systems .container {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: var(--fa-content-width);
        margin-inline: auto;
        padding-inline: var(--fa-padding-x);
    }


/* =============================================================
   FLUID BACKGROUND
   ============================================================= */
.fa2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background: radial-gradient(ellipse at 15% 15%, rgba(201, 168, 76, 0.10), transparent 38%), radial-gradient(ellipse at 85% 80%, rgba(0, 62, 82, 0.09), transparent 42%);
}

.fa2-bg-wave {
    position: absolute;
    width: 80vw;
    height: 42vw;
    min-width: 700px;
    min-height: 340px;
    border-radius: 50%;
    filter: blur(35px);
    opacity: 0.55;
    transform: translate3d(0, 0, 0) rotate(-8deg);
    will-change: transform;
    background: linear-gradient(115deg, rgba(201, 168, 76, 0.00) 0%, rgba(201, 168, 76, 0.14) 28%, rgba(62, 178, 187, 0.12) 50%, rgba(0, 62, 82, 0.13) 72%, rgba(0, 62, 82, 0.00) 100%);
}

.fa2-bg-wave-1 {
    top: -22%;
    left: -18%;
    animation: fa2-wave-float-1 22s ease-in-out infinite alternate;
}

.fa2-bg-wave-2 {
    right: -22%;
    bottom: -25%;
    width: 90vw;
    height: 48vw;
    opacity: 0.42;
    transform: rotate(12deg);
    background: linear-gradient(105deg, rgba(0, 62, 82, 0.00) 0%, rgba(0, 62, 82, 0.10) 25%, rgba(62, 178, 187, 0.13) 48%, rgba(201, 168, 76, 0.10) 72%, rgba(201, 168, 76, 0.00) 100%);
    animation: fa2-wave-float-2 28s ease-in-out infinite alternate;
}

.fa2-bg-wave-3 {
    top: 36%;
    left: 38%;
    width: 42vw;
    height: 22vw;
    min-width: 400px;
    min-height: 220px;
    opacity: 0.22;
    filter: blur(55px);
    background: radial-gradient(ellipse, rgba(62, 178, 187, 0.22) 0%, rgba(201, 168, 76, 0.12) 35%, transparent 72%);
    animation: fa2-wave-float-3 18s ease-in-out infinite alternate;
}

.fa2-bg-highlight {
    position: absolute;
    width: 70vw;
    height: 12vw;
    min-height: 100px;
    left: 10%;
    top: 48%;
    opacity: 0.16;
    border-radius: 50%;
    filter: blur(28px);
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.65), rgba(62, 178, 187, 0.55), transparent);
    transform: rotate(-4deg);
    animation: fa2-liquid-highlight 20s ease-in-out infinite alternate;
}

@keyframes fa2-wave-float-1 {
    0% {
        transform: translate3d(-3%, -2%, 0) rotate(-8deg) scale(1);
    }

    100% {
        transform: translate3d(9%, 5%, 0) rotate(-4deg) scale(1.08);
    }
}

@keyframes fa2-wave-float-2 {
    0% {
        transform: translate3d(4%, 3%, 0) rotate(12deg) scale(1);
    }

    100% {
        transform: translate3d(-7%, -5%, 0) rotate(7deg) scale(1.10);
    }
}

@keyframes fa2-wave-float-3 {
    0% {
        transform: translate3d(-25px, 10px, 0) scale(0.90);
    }

    100% {
        transform: translate3d(35px, -20px, 0) scale(1.12);
    }
}

@keyframes fa2-liquid-highlight {
    0% {
        transform: translate3d(-8%, 0, 0) rotate(-4deg) scaleX(0.92);
    }

    100% {
        transform: translate3d(10%, 8px, 0) rotate(2deg) scaleX(1.05);
    }
}


/* =============================================================
   HEADER
   ============================================================= */
.fa2-systems-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 992px) {
    .fa2-systems-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }
}

.fa2-systems-eyebrow {
    margin: 0 0 0.75rem;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fa-gold);
}

.fa2-systems-title {
    margin: 0 0 0.85rem;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--fa-text-primary);
}

.fa2-systems-sub {
    max-width: 34rem;
    margin: 0;
    font-size: clamp(0.82rem, 1.4vw, 0.92rem);
    line-height: 1.6;
    color: var(--fa-text-primary);
}

.fa2-systems-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding-bottom: 0.15rem;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fa-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

    .fa2-systems-viewall:hover {
        color: var(--fa-accent);
        border-color: var(--fa-accent);
        transform: translateX(3px);
    }

    .fa2-systems-viewall:focus-visible {
        outline: 2px solid var(--fa-gold);
        outline-offset: 5px;
        color: var(--fa-accent);
        border-color: var(--fa-accent);
    }


/* =============================================================
   GRID (Bootstrap col-* üstüne oturur)
   ============================================================= */
.fa2-grid {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    /* gap Bootstrap g-4 / g-md-5 tarafından sağlanır */
}

    /* Bootstrap kolon boşluklarını kart gap'ine eşitlemek istersen: */
    .fa2-grid.g-4 {
        --bs-gutter-x: var(--fa-gap);
        --bs-gutter-y: var(--fa-gap);
    }


/* =============================================================
   SYSTEM CARD
   ============================================================= */
.fa2-system-item {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 18px;
    transition: transform var(--fa-card-transition);
}

@media (hover: hover) and (pointer: fine) {
    .fa2-system-item:hover {
        transform: translateY(-5px);
    }
}

/* Görsel alan — artık <button> sarıyor */
.fa2-system-visual {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    cursor: default;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(201, 168, 76, 0.12);
}

/* =============================================================
   CAPTION (navigasyon alanı — eski yapıdan korunmuştur)
   ============================================================= */
.fa2-system-caption {
    width: 100%;
    margin-top: clamp(0.9rem, 2vw, 1.5rem);
    text-align: center;
}

.fa2-system-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(201, 168, 76, 0.18);
}

.fa2-cat-explore {
    display: block;
    margin-bottom: 0.4rem;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: clamp(0.52rem, 1vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fa-text-secondary);
    opacity: 0.8;
    transform: translateY(4px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease;
}

.fa2-cat-name {
    display: block;
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: clamp(0.78rem, 1.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fa-text-primary);
    overflow-wrap: anywhere;
    transition: transform 0.5s ease, color 0.5s ease;
}

.fa2-cat-line {
    display: block;
    width: 0;
    height: 2px;
    margin: 0.75rem auto 0;
    background: var(--fa-gold);
    transition: width 0.8s var(--fa-transition-ease);
}

.fa2-system-link:hover .fa2-cat-explore,
.fa2-system-link:focus-visible .fa2-cat-explore {
    opacity: 1;
    transform: translateY(0);
    color: var(--fa-gold);
}

.fa2-system-link:hover .fa2-cat-name,
.fa2-system-link:focus-visible .fa2-cat-name {
    transform: translateX(4px);
}

.fa2-system-link:hover .fa2-cat-line,
.fa2-system-link:focus-visible .fa2-cat-line {
    width: 52px;
}

.fa2-system-link:focus-visible {
    outline: 2px solid var(--fa-gold);
    outline-offset: 6px;
    border-radius: 2px;
}


/* =============================================================
   ÜRÜN 1 — WINDOWS HINGED
   ============================================================= */
.fa-hinged {
    --fa-hinged-size: 220px;
    --fa-hinged-motion: 450ms;
    --fa-hinged-handle-time: 140ms;
    --fa-hinged-turn-angle: -52deg;
    --fa-hinged-tilt-angle: -28deg;
    --fa-hinged-perspective: 1700px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: var(--fa-hinged-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Manrope, Arial, sans-serif;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-hinged:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-hinged__stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    perspective: var(--fa-hinged-perspective);
    perspective-origin: 50% 50%;
    pointer-events: none;
    user-select: none;
}

.fa-hinged__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fa-hinged__turn {
    position: absolute;
    left: 26.4535156%;
    top: 8.090625%;
    width: 46.4308594%;
    height: 84.1394531%;
    display: block;
    transform-origin: 0 50%;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform var(--fa-hinged-motion) cubic-bezier(.4,0,.2,1);
}

.fa-hinged__tilt {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: 50% 100%;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    transition: transform var(--fa-hinged-motion) cubic-bezier(.4,0,.2,1);
}

.fa-hinged__leaf {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    backface-visibility: hidden;
}

.fa-hinged[data-turn="true"] .fa-hinged__turn {
    transform: rotateY(var(--fa-hinged-turn-angle));
}

.fa-hinged[data-tilt="true"] .fa-hinged__tilt {
    transform: rotateX(var(--fa-hinged-tilt-angle));
}

.fa-hinged__handle {
    transform-origin: 443.357422px 421px;
    transform-box: view-box;
    transform: rotate(0deg);
    transition: transform var(--fa-hinged-handle-time) ease-in-out;
}

.fa-hinged[data-handle="turn"] .fa-hinged__handle {
    transform: rotate(90deg);
}

.fa-hinged[data-handle="tilt"] .fa-hinged__handle {
    transform: rotate(180deg);
}


/* =============================================================
   ÜRÜN 2 — SLIDING
   ============================================================= */
.fa-slide {
    --fa-slide-size: 220px;
    --fa-slide-duration: 450ms;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: var(--fa-slide-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Manrope, Arial, sans-serif;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-slide:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-slide__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
    user-select: none;
}

.fa-slide__moving {
    transform: translateX(0);
    transform-box: view-box;
    transform-origin: 0 0;
    transition: transform var(--fa-slide-duration) cubic-bezier(.4,0,.2,1);
}

.fa-slide[data-open="true"] .fa-slide__moving {
    transform: translateX(425.719px);
}


/* =============================================================
   ÜRÜN 3 — OUTDOOR LIVING
   ============================================================= */
.fa-outdoor {
    --fa-outdoor-size: 220px;
    --fa-outdoor-motion: 450ms;
    --fa-outdoor-open-angle: -56deg;
    --fa-outdoor-perspective: 1700px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: var(--fa-outdoor-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Manrope, Arial, sans-serif;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-outdoor:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-outdoor__stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    perspective: var(--fa-outdoor-perspective);
    perspective-origin: 50% 50%;
    pointer-events: none;
    user-select: none;
}

.fa-outdoor__structure {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fa-outdoor__gate {
    position: absolute;
    left: 43.2804688%;
    top: 53.590625%;
    width: 46.4308594%;
    height: 40.3394531%;
    display: block;
    transform-origin: 0 50%;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform var(--fa-outdoor-motion) cubic-bezier(.4,0,.2,1);
}

.fa-outdoor__leaf {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    backface-visibility: hidden;
}

.fa-outdoor[data-open="true"] .fa-outdoor__gate {
    transform: rotateY(var(--fa-outdoor-open-angle));
    transition-delay: 70ms;
}

.fa-outdoor__handle {
    transform-origin: 443.357422px 194px;
    transform-box: view-box;
    transition: transform 140ms ease-in-out;
    transform: rotate(0deg);
}

.fa-outdoor[data-open="true"] .fa-outdoor__handle {
    transform: rotate(-18deg);
}


/* =============================================================
   ÜRÜN 4 — COMFORT SOLUTIONS
   ============================================================= */
.fa-comfort {
    --fa-comfort-size: 220px;
    --fa-comfort-motion: 450ms;
    --fa-comfort-open-angle: 125deg;
    --fa-comfort-perspective: 1700px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: var(--fa-comfort-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Manrope, Arial, sans-serif;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-comfort:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-comfort__stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    perspective: var(--fa-comfort-perspective);
    perspective-origin: 50% 50%;
    pointer-events: none;
    user-select: none;
}

.fa-comfort__window {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fa-comfort__shutter {
    position: absolute;
    top: 8.090625%;
    width: 22.8154297%;
    height: 84.1394531%;
    display: block;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform var(--fa-comfort-motion) cubic-bezier(.4,0,.2,1);
}

.fa-comfort__shutter--left {
    left: 26.4535156%;
    transform-origin: 0 50%;
}

.fa-comfort__shutter--right {
    left: 50.0689453%;
    transform-origin: 100% 50%;
}

.fa-comfort__leaf {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    backface-visibility: visible;
}

.fa-comfort[data-open="true"] .fa-comfort__shutter--left {
    transform: rotateY(calc(-1 * var(--fa-comfort-open-angle)));
}

.fa-comfort[data-open="true"] .fa-comfort__shutter--right {
    transform: rotateY(var(--fa-comfort-open-angle));
    transition-delay: 45ms;
}


/* =============================================================
   ÜRÜN 5 — ACCESSORIES (pencere kolu)
   ============================================================= */
.fa-acc-symbol {
    --fa-acc-size: 220px;
    --fa-acc-duration: 450ms;
    --fa-acc-angle: -90deg;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: var(--fa-acc-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    appearance: none;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Arial, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-acc-symbol:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-acc-symbol__svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    pointer-events: none;
}

.fa-acc-symbol__lever {
    transform-box: view-box;
    transform-origin: 500px 368px;
    transform: rotate(0deg);
    transition: transform var(--fa-acc-duration) cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.fa-acc-symbol[data-open="true"] .fa-acc-symbol__lever {
    transform: rotate(var(--fa-acc-angle));
}


/* =============================================================
   ÜRÜN 6 — FUTURE SYSTEMS
   ============================================================= */
/* =============================================================
   ÜRÜN 6 — FUTURE SYSTEMS
   ============================================================= */
.fa-future {
    --fa-future-size: 220px; /* diğer kartlarla aynı */
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: var(--fa-future-size);
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    appearance: none;
    background: transparent;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Arial, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-future:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 8px;
    }

    /* Diğer tüm kartlarla AYNI görsel alan: kare, ortalanmış SVG */
    .fa-future .icon-wrap {
        display: flex; /* SVG'yi dikey ortala */
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 1; /* kare — diğer kartlarla eşit */
        pointer-events: none;
    }

.fa-future__svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%; /* taşmayı önle */
    overflow: visible;
}

.fa-future__link {
    stroke: #3eb2bb;
    stroke-width: 2.4;
    stroke-opacity: .7;
    stroke-linecap: round;
}

.fa-future__node {
    fill: url(#fa-future-rest);
    stroke: #3eb2bb;
    stroke-width: 1.4;
    stroke-opacity: .76;
}

.fa-future__fill {
    opacity: 0;
    transition: opacity 220ms cubic-bezier(.4, 0, .2, 1);
    transition-delay: 0ms;
}

.fa-future[data-open="true"] .fa-future__fill {
    opacity: 1;
    transition-duration: 200ms;
    transition-delay: var(--step);
}


/* =============================================================
   ÜRÜN 7 — STANDARD COLOURS
   ============================================================= */
.fa-col-symbol {
    --fa-col-size: 248px;
    --fa-col-petrol: #124754;
    --fa-col-white: #f7f6f6;
    --fa-col-silver: #a6a5a5;
    --fa-col-anthracite: #383e42;
    --fa-col-open-time: 450ms;
    --fa-col-close-time: 330ms;
    --fa-col-stagger: 35ms;
    --fa-col-ease: cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: var(--fa-col-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--fa-col-petrol);
    font-family: "Fineastra Icon Manrope", Manrope, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-col-symbol *, .fa-col-symbol *::before, .fa-col-symbol *::after {
        box-sizing: border-box;
    }

    .fa-col-symbol:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-col-symbol__art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 248 / 220;
    isolation: isolate;
    pointer-events: none;
    user-select: none;
}

.fa-col-symbol__leaf {
    position: absolute;
    left: 41.935484%;
    top: 13.636364%;
    width: 16.129032%;
    height: 66.363636%;
    border-radius: 4px;
    transform-origin: 50% 86.30137%;
    transform: rotate(var(--fa-col-closed));
    background-color: var(--fa-col-swatch);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 0 .7px rgba(29,29,27,.17), .5px 1px 1.5px rgba(29,29,27,.06);
    transition: transform var(--fa-col-close-time) var(--fa-col-ease), box-shadow var(--fa-col-close-time) ease;
    transition-delay: var(--fa-col-close-delay);
}

    .fa-col-symbol__leaf::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(110deg, rgba(255,255,255,.1), transparent 42%, rgba(0,0,0,.025));
        box-shadow: inset .6px .6px 0 rgba(255,255,255,.22);
    }

    .fa-col-symbol__leaf::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 24.657534%;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(110deg, #bfc4c2, #d9dcda 46%, #b5bcba);
        box-shadow: inset 0 .7px 0 rgba(255,255,255,.48);
    }

.fa-col-symbol__leaf--white {
    --fa-col-swatch: var(--fa-col-white);
    --fa-col-closed: -7.5deg;
    --fa-col-open: -58deg;
    --fa-col-order: 0;
    --fa-col-close-delay: 100ms;
}

.fa-col-symbol__leaf--silver {
    --fa-col-swatch: var(--fa-col-silver);
    --fa-col-closed: -4.5deg;
    --fa-col-open: -34deg;
    --fa-col-order: 1;
    --fa-col-close-delay: 80ms;
}

    .fa-col-symbol__leaf--silver::before {
        background: linear-gradient(110deg, rgba(255,255,255,.24), transparent 34%, rgba(255,255,255,.08) 72%, rgba(0,0,0,.025));
    }

.fa-col-symbol__leaf--anthracite {
    --fa-col-swatch: var(--fa-col-anthracite);
    --fa-col-closed: -1.5deg;
    --fa-col-open: -10deg;
    --fa-col-order: 2;
    --fa-col-close-delay: 60ms;
}

.fa-col-symbol__leaf--anodized {
    --fa-col-swatch: #a09d91;
    --fa-col-closed: 1.5deg;
    --fa-col-open: 14deg;
    --fa-col-order: 3;
    --fa-col-close-delay: 40ms;
  /*  background-image: url("/img/colours/dm5.webp");*/
}

.fa-col-symbol__leaf--wood {
    --fa-col-swatch: #80552f;
    --fa-col-closed: 4.5deg;
    --fa-col-open: 38deg;
    --fa-col-order: 4;
    --fa-col-close-delay: 20ms;
   /* background-image: url("/img/colours/walnut.webp");*/
}

.fa-col-symbol__leaf--cover {
    --fa-col-swatch: var(--fa-col-petrol);
    --fa-col-closed: 7.5deg;
    --fa-col-open: 62deg;
    --fa-col-order: 5;
    --fa-col-close-delay: 0ms;
}

    .fa-col-symbol__leaf--cover::after {
        display: none;
    }

.fa-col-symbol__pin {
    position: absolute;
    top: 67.727273%;
    left: 47.177419%;
    width: 5.645162%;
    height: 6.363636%;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3f5f0 2%, #bcc5c1 74%, #a6b2ae);
    box-shadow: 0 0 0 1.5px #697c7c, 0 1px 1.5px rgba(0,0,0,.18), inset 0 0 0 1.7px rgba(255,255,255,.65);
}

    .fa-col-symbol__pin::after {
        content: "";
        position: absolute;
        inset: 31%;
        border-radius: 50%;
        background: #7f908a;
        box-shadow: inset 0 .7px 1px rgba(0,0,0,.2);
    }

.fa-col-symbol[data-open="true"] .fa-col-symbol__leaf {
    transform: rotate(var(--fa-col-open));
    box-shadow: 0 0 0 .7px rgba(29,29,27,.13), 1px 1.5px 2px rgba(29,29,27,.12);
    transition-duration: var(--fa-col-open-time);
    transition-delay: calc(var(--fa-col-stagger) * var(--fa-col-order));
}


/* =============================================================
   ÜRÜN 8 — UNIVERSAL SYSTEMS
   ============================================================= */
.fa-rearrange {
    --fa-rearrange-size: 220px;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: var(--fa-rearrange-size);
    max-width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #173e47;
    font: 600 14px/1.45 "Fineastra Icon Manrope", Arial, sans-serif;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .fa-rearrange:focus-visible {
        outline: 2px solid #3e8492;
        outline-offset: 10px;
    }

.fa-rearrange__stage {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    position: relative;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.fa-rearrange__piece {
    position: absolute;
    display: block;
    transform: translate(0, 0);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 1.3px 1.5px rgb(23 62 71 / .13));
    pointer-events: none;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (min-width: 1400px) {
    :root {
        --fa-icon-size: min(240px, 82%);
        --fa-gap: 3rem;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --fa-icon-size: min(210px, 80%);
        --fa-padding-y: 5rem;
    }

    .fa2-system-caption {
        margin-top: 1.25rem;
    }

    .fa2-cat-name {
        font-size: clamp(0.9rem, 1.7vw, 1.15rem);
    }
}

@media (max-width: 767.98px) {
    :root {
        --fa-padding-y: 3.5rem;
        --fa-icon-size: 86%;
        --fa-gap: 2rem clamp(0.75rem, 4vw, 1.5rem);
    }

    .fa2-bg-wave {
        filter: blur(25px);
        min-width: 480px;
    }

    .fa2-bg-highlight {
        filter: blur(22px);
    }

    .fa2-systems-header {
        gap: 1.25rem;
        margin-bottom: 2rem;
    }

    .fa2-systems-eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.6rem;
    }

    .fa2-systems-title {
        font-size: clamp(1.65rem, 7vw, 2.4rem);
        margin-bottom: 0.7rem;
    }

    .fa2-systems-sub {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .fa2-systems-viewall {
        font-size: 0.64rem;
    }

    .fa2-system-caption {
        margin-top: 1rem;
    }

    .fa2-cat-explore {
        font-size: 0.52rem;
        margin-bottom: 0.3rem;
    }

    .fa2-cat-name {
        font-size: clamp(0.72rem, 2.5vw, 0.95rem);
        line-height: 1.18;
    }

    .fa2-cat-line {
        margin-top: 0.55rem;
    }

    /* Ürün içi boyutlar mobilde biraz küçülsün */
    .fa-hinged, .fa-slide, .fa-outdoor, .fa-comfort, .fa-acc-symbol, .fa-rearrange {
        --fa-hinged-size: 100%;
        --fa-slide-size: 100%;
        --fa-outdoor-size: 100%;
        --fa-comfort-size: 100%;
        --fa-acc-size: 100%;
        --fa-rearrange-size: 100%;
    }

    .fa-future {
        --fa-future-width: 100%;
    }

    .fa-col-symbol {
        --fa-col-size: 100%;
    }
}

@media (max-width: 479.98px) {
    :root {
        --fa-padding-y: 3rem;
        --fa-icon-size: 88%;
        --fa-gap: 1.75rem 10px;
    }

    .fa2-systems .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .fa2-bg-wave {
        filter: blur(20px);
        min-width: 380px;
    }

    .fa2-cat-explore {
        font-size: 0.48rem;
        letter-spacing: 0.1em;
    }

    .fa2-cat-name {
        font-size: clamp(0.68rem, 2.8vw, 0.85rem);
    }

    .fa2-cat-line {
        margin-top: 0.5rem;
    }
}


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

    .fa2-bg-wave, .fa2-bg-highlight {
        animation: none !important;
        transform: none !important;
    }

    .fa2-system-item, .fa2-system-link,
    .fa2-cat-explore, .fa2-cat-name, .fa2-cat-line {
        transition: none !important;
    }

    .fa2-system-item {
        transform: none !important;
    }

    .fa2-cat-line {
        width: 52px !important;
    }

    .fa-hinged__turn, .fa-hinged__tilt, .fa-hinged__handle {
        transition: none;
    }

    .fa-slide__moving {
        transition: none;
    }

    .fa-outdoor__gate, .fa-outdoor__handle {
        transition: none;
        transition-delay: 0s;
    }

    .fa-comfort__shutter {
        transition: none;
    }

    .fa-acc-symbol__lever {
        transition: none;
    }

    .fa-future__fill {
        transition: none;
    }

    .fa-col-symbol__leaf {
        transition: none;
    }
}


/* =============================================================
   TOUCH / PWA
   ============================================================= */
@media (hover: none) and (pointer: coarse) {
    .fa2-system-visual, .fa2-system-link {
        touch-action: manipulation;
    }

    .fa2-system-item:active {
        transform: scale(0.985);
        transition: transform 0.12s ease;
    }
}


/* =============================================================
   PRINT
   ============================================================= */
@media print {
    .fa2-bg {
        display: none;
    }

    .fa2-system-item {
        transform: none !important;
    }

    .fa2-cat-line {
        width: 52px !important;
    }

    .fa-hinged__turn {
        transform: rotateY(0deg) !important;
    }

    .fa-hinged__tilt {
        transform: rotateX(0deg) !important;
    }

    .fa-slide__moving {
        transform: translateX(0) !important;
    }

    .fa-outdoor__gate {
        transform: rotateY(0deg) !important;
    }

    .fa-comfort__shutter {
        transform: rotateY(0deg) !important;
    }

    .fa-acc-symbol__lever {
        transform: rotate(0deg) !important;
    }

    .fa-future__fill {
        opacity: 1 !important;
    }
}