/* =============================================== */
/* --- ALVIO SPECTRUM SERIES EK STİLLERİ --- */
/* product-detail.css dosyasından sonra yüklenir. */
/* =============================================== */

/* =============================================== */
/* --- SAYFA BAŞLIĞI --- */
/* =============================================== */

/*.spectrum-page-header {
    position: relative;
    overflow: hidden;
}

    .spectrum-page-header::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.18), transparent );
        pointer-events: none;
    }

    .spectrum-page-header .container {
        position: relative;
        z-index: 1;
    }

.spectrum-header-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.spectrum-detail-page {
    background-color: #ffffff;
}*/

/* =============================================== */
/* --- ÜRÜN GÖRSELİ --- */
/* =============================================== */

/*.spectrum-gallery {
    position: relative;
}

    .spectrum-gallery img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

.spectrum-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14);
}

.spectrum-product-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.spectrum-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.5rem;
}

    .spectrum-action-buttons .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        text-align: center;
    }

    .spectrum-action-buttons .btn-secondary {
        border: 1px solid var(--border-color);
        background-color: #f4f4f4;
        color: #333333;
    }

        .spectrum-action-buttons .btn-secondary:hover {
            border-color: var(--primary-color);
            background-color: #ebebeb;
        }

.spectrum-application-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    color: #737373;
    font-size: 0.76rem;
    line-height: 1.55;
}

    .spectrum-application-note i {
        margin-top: 4px;
        flex-shrink: 0;
        color: var(--primary-color);
    }*/

/* =============================================== */
/* --- ÖZET İSTATİSTİKLER --- */
/* =============================================== */

/*.spectrum-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 1.5rem 0 0;
}

.spectrum-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 11px 14px;
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
    background-color: #f7f7f7;
}

.spectrum-stat-num {
    color: #222222;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.spectrum-stat-label {
    margin-top: 3px;
    color: #666666;
    font-size: 0.74rem;
    line-height: 1.4;
}*/

/* =============================================== */
/* --- RENK GAMI BAŞLIĞI --- */
/* =============================================== */

/*.spectrum-palette {
    margin: 3.5rem 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color);
}

.spectrum-palette-heading {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.spectrum-palette-heading-content {
    min-width: 0;
}

.spectrum-palette-kicker {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.spectrum-palette-heading h3 {
    margin: 0 0 0.5rem;
    color: #222222;
    font-size: 1.65rem;
}

.spectrum-palette-sub {
    max-width: 720px;
    margin: 0;
    color: #666666;
    line-height: 1.75;
}

.spectrum-palette-total {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border-left: 3px solid var(--primary-color);
    border-radius: 5px;
    background-color: #f5f5f5;
}

    .spectrum-palette-total strong {
        color: var(--primary-color);
        font-size: 1.5rem;
        line-height: 1;
    }

    .spectrum-palette-total span {
        color: #666666;
        font-size: 0.7rem;
        line-height: 1.35;
    }*/

/* =============================================== */
/* --- RENK GAMI YERLEŞİMİ --- */
/* =============================================== */

/*.spectrum-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}*/

/* =============================================== */
/* --- ARAÇ ÖN İZLEME ALANI --- */
/* =============================================== */

/*.spectrum-car-stage {
    --preview-color: #0e7fbf;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #292d36;
    border-radius: 16px;
    background: radial-gradient( circle at 50% 42%, rgba(255, 255, 255, 0.09), transparent 43% ), linear-gradient( 145deg, #222630, #111318 72% );
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
}

    .spectrum-car-stage::before {
        content: "";
        position: absolute;
        top: -120px;
        left: 50%;
        width: 360px;
        height: 260px;
        border-radius: 50%;
        background-color: var(--preview-color);
        opacity: 0.20;
        filter: blur(80px);
        transform: translateX(-50%);
        pointer-events: none;
        transition: background-color 0.35s ease, opacity 0.35s ease;
    }

    .spectrum-car-stage::after {
        content: "";
        position: absolute;
        right: -90px;
        bottom: -130px;
        width: 260px;
        height: 260px;
        border: 45px solid rgba(255, 255, 255, 0.025);
        border-radius: 50%;
        pointer-events: none;
    }

    .spectrum-car-stage.is-satin::before {
        opacity: 0.11;
    }

.spectrum-preview-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 20px 0;
}

    .spectrum-preview-header > div {
        display: flex;
        flex-direction: column;
    }

.spectrum-preview-title {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.spectrum-preview-header small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 0.64rem;
}

.spectrum-preview-status {
    width: fit-content;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.spectrum-car-canvas {
    position: relative;
    z-index: 2;
    padding: 4px 7px 0;
}

    .spectrum-car-canvas svg {
        position: relative;
        z-index: 2;
        width: 100%;
        height: auto;
        display: block;
    }

.spectrum-car-glow {
    position: absolute;
    right: 12%;
    bottom: 18%;
    left: 12%;
    height: 42%;
    border-radius: 50%;
    background-color: var(--preview-color);
    opacity: 0.15;
    filter: blur(48px);
    pointer-events: none;
    transition: background-color 0.35s ease, opacity 0.35s ease;
}

.spectrum-car-stage.is-satin .spectrum-car-glow {
    opacity: 0.07;
}

#carPaintLight,
#carPaintBase,
#carPaintDark {
    transition: stop-color 0.35s ease;
}

#carHighlight {
    transition: opacity 0.35s ease, stroke-opacity 0.35s ease;
}

.spectrum-car-stage.is-satin #carHighlight {
    opacity: 0.32;
}

.spectrum-car-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 20px 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.14);
}

.spectrum-selected-color {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spectrum-selected-color-dot {
    width: 33px;
    height: 33px;
    flex: 0 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
    transition: background-color 0.35s ease;
}

.spectrum-selected-color > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.spectrum-selected-color small {
    color: rgba(255, 255, 255, 0.47);
    font-size: 0.61rem;
}

.spectrum-selected-color strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectrum-selected-finish {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}*/

/* =============================================== */
/* --- RENK PALETİ PANELİ --- */
/* =============================================== */

/*.spectrum-palette-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: #ffffff;
}

.spectrum-palette-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

    .spectrum-palette-panel-header > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .spectrum-palette-panel-header strong {
        color: #222222;
        font-size: 0.95rem;
    }

    .spectrum-palette-panel-header > div > span {
        margin-top: 2px;
        color: #888888;
        font-size: 0.68rem;
    }

.spectrum-visible-color-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background-color: #f1f1f1;
    color: #666666;
    font-size: 0.63rem;
    font-weight: 600;
}*/

/* =============================================== */
/* --- RENK KARTLARI --- */
/* =============================================== */

/*.spectrum-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.spectrum-swatch {
    --swatch-color: #444444;
    appearance: none;
    position: relative;
    min-width: 0;
    min-height: 94px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: linear-gradient( 140deg, rgba(255, 255, 255, 0.40), transparent 42% ), var(--swatch-color);
    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 -38px 38px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .spectrum-swatch::before {
        content: "";
        position: absolute;
        top: -25%;
        left: -65%;
        width: 65%;
        height: 150%;
        background: rgba(255, 255, 255, 0.24);
        transform: rotate(20deg);
        transition: left 0.42s ease;
    }

    .spectrum-swatch:hover {
        transform: translateY(-3px);
        box-shadow: inset 0 -38px 38px rgba(0, 0, 0, 0.17), 0 8px 18px rgba(0, 0, 0, 0.14);
    }

        .spectrum-swatch:hover::before {
            left: 125%;
        }

    .spectrum-swatch.is-active {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(76, 85, 60, 0.14), inset 0 -38px 38px rgba(0, 0, 0, 0.18);
    }

        .spectrum-swatch.is-active::after {
            content: "✓";
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 3;
            width: 22px;
            height: 22px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.94);
            color: #222222;
            font-size: 0.72rem;
            font-weight: 700;
            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.17);
        }

    .spectrum-swatch:focus-visible {
        outline: 3px solid rgba(76, 85, 60, 0.32);
        outline-offset: 2px;
    }

.spectrum-swatch-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 25px 8px 8px;
    overflow: hidden;
    background: linear-gradient( 180deg, transparent, rgba(0, 0, 0, 0.72) );
    color: #ffffff;
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectrum-swatch-finish {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.38);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.spectrum-swatch-more {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: span 2;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.09), transparent ), var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
}

    .spectrum-swatch-more strong {
        font-size: 1.35rem;
        line-height: 1;
    }

    .spectrum-swatch-more span {
        max-width: 135px;
        margin-top: 5px;
        font-size: 0.61rem;
        line-height: 1.35;
        opacity: 0.82;
    }

.spectrum-color-disclaimer {
    margin: 15px 0 0;
    color: #929292;
    font-size: 0.64rem;
    line-height: 1.55;
}*/

/* =============================================== */
/* --- TEKNİK ÖZELLİKLER VE AÇIKLAMA --- */
/* =============================================== */

/*.spectrum-technical-section {
    margin-top: 2.5rem;
}

.spectrum-description-section {
    margin-top: 2.5rem;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: #f8f8f8;
}

    .spectrum-description-section h3 {
        margin: 0 0 1rem;
        color: #222222;
        font-size: 1.35rem;
    }

    .spectrum-description-section p {
        margin: 0 0 1rem;
        color: #5f5f5f;
        line-height: 1.8;
    }

        .spectrum-description-section p:last-child {
            margin-bottom: 0;
        }*/

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

/*@media (min-width: 768px) {

    .spectrum-action-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .spectrum-action-buttons .btn {
            width: auto;
        }

    .spectrum-stat-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spectrum-palette-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .spectrum-palette-total {
        flex: 0 0 auto;
    }

    .spectrum-preview-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .spectrum-color-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spectrum-swatch-more {
        grid-column: span 4;
    }

    .spectrum-description-section {
        padding: 30px;
    }
}*/

/* =============================================== */
/* --- MASAÜSTÜ --- */
/* =============================================== */

/*@media (min-width: 992px) {

    .spectrum-showcase {
        grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.35fr);
        gap: 2rem;
    }

    .spectrum-car-stage {
        position: sticky;
        top: 150px;
    }

    .spectrum-palette-panel {
        padding: 22px;
    }

    .spectrum-color-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spectrum-swatch-more {
        grid-column: span 4;
    }
}*/

/* =============================================== */
/* --- GENİŞ MASAÜSTÜ --- */
/* =============================================== */

/*@media (min-width: 1200px) {

    .spectrum-color-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .spectrum-swatch-more {
        grid-column: span 5;
    }
}*/

/* =============================================== */
/* --- HAREKET AZALTMA TERCİHİ --- */
/* =============================================== */

/*@media (prefers-reduced-motion: reduce) {

    .spectrum-swatch,
    .spectrum-swatch::before,
    .spectrum-car-stage::before,
    .spectrum-car-glow,
    #carPaintLight,
    #carPaintBase,
    #carPaintDark,
    #carHighlight,
    .spectrum-selected-color-dot {
        transition: none;
    }
}*/




/* =============================================== */
/* --- ALVIO SPECTRUM SERIES EK STİLLERİ --- */
/* product-detail.css dosyasından sonra yüklenir. */
/* =============================================== */

/* =============================================== */
/* --- SAYFA BAŞLIĞI --- */
/* =============================================== */

.spectrum-page-header {
    position: relative;
    overflow: hidden;
}

    .spectrum-page-header::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.18), transparent );
        pointer-events: none;
    }

    .spectrum-page-header .container {
        position: relative;
        z-index: 1;
    }

.spectrum-header-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.spectrum-detail-page {
    background-color: #ffffff;
}

/* =============================================== */
/* --- ÜRÜN TANITIMI --- */
/* =============================================== */

.spectrum-gallery {
    position: relative;
}

    .spectrum-gallery img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

.spectrum-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14);
}

.spectrum-product-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.spectrum-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.5rem;
}

    .spectrum-action-buttons .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        text-align: center;
    }

    .spectrum-action-buttons .btn-secondary {
        border: 1px solid var(--border-color);
        background-color: #f4f4f4;
        color: #333333;
    }

        .spectrum-action-buttons .btn-secondary:hover {
            border-color: var(--primary-color);
            background-color: #ebebeb;
        }

.spectrum-application-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    color: #737373;
    font-size: 0.76rem;
    line-height: 1.55;
}

    .spectrum-application-note i {
        margin-top: 4px;
        flex-shrink: 0;
        color: var(--primary-color);
    }

/* =============================================== */
/* --- ÖZET İSTATİSTİKLER --- */
/* =============================================== */

.spectrum-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 1.5rem 0 0;
}

.spectrum-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 11px 14px;
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
    background-color: #f7f7f7;
}

.spectrum-stat-num {
    color: #222222;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.spectrum-stat-label {
    margin-top: 3px;
    color: #666666;
    font-size: 0.74rem;
    line-height: 1.4;
}

/* =============================================== */
/* --- ORTAK BÖLÜM BAŞLIKLARI --- */
/* =============================================== */

.spectrum-section-heading {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

    .spectrum-section-heading > div:first-child {
        min-width: 0;
    }

.spectrum-section-kicker {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.spectrum-section-heading h3 {
    margin: 0 0 0.55rem;
    color: #222222;
    font-size: 1.65rem;
}

.spectrum-section-heading p {
    max-width: 760px;
    margin: 0;
    color: #666666;
    line-height: 1.75;
}

/* =============================================== */
/* --- RENK DENEYİMİ --- */
/* =============================================== */

.spectrum-palette {
    margin: 3.5rem 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color);
}

.spectrum-palette-total,
.spectrum-layer-count {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border-left: 3px solid var(--primary-color);
    border-radius: 5px;
    background-color: #f5f5f5;
}

    .spectrum-palette-total strong,
    .spectrum-layer-count strong {
        color: var(--primary-color);
        font-size: 1.5rem;
        line-height: 1;
    }

    .spectrum-palette-total span,
    .spectrum-layer-count span {
        color: #666666;
        font-size: 0.7rem;
        line-height: 1.35;
    }

.spectrum-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* =============================================== */
/* --- PREMIUM RENK YÜZEYİ --- */
/* =============================================== */

.spectrum-preview-stage {
    --preview-color: #0e7fbf;
    --preview-light: #73c4eb;
    --preview-dark: #073f5f;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #292d36;
    border-radius: 20px;
    background: radial-gradient( circle at 50% 35%, rgba(255, 255, 255, 0.10), transparent 36% ), linear-gradient(145deg, #242934, #111318 72%);
    color: #ffffff;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.17);
}

    .spectrum-preview-stage::before {
        content: "";
        position: absolute;
        top: -130px;
        left: 50%;
        width: 390px;
        height: 300px;
        border-radius: 50%;
        background-color: var(--preview-color);
        opacity: 0.22;
        filter: blur(86px);
        transform: translateX(-50%);
        pointer-events: none;
        transition: background-color 0.35s ease, opacity 0.35s ease;
    }

    .spectrum-preview-stage.is-satin::before {
        opacity: 0.13;
    }

.spectrum-preview-topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 0;
}

    .spectrum-preview-topbar > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

.spectrum-preview-eyebrow {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.spectrum-preview-topbar strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectrum-preview-finish {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.spectrum-material-scene {
    position: relative;
    z-index: 2;
    min-height: 430px;
    display: grid;
    place-items: center;
    padding: 50px 26px 45px;
    perspective: 1200px;
}

.spectrum-scene-ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.spectrum-scene-ring-one {
    width: 310px;
    height: 310px;
}

.spectrum-scene-ring-two {
    width: 390px;
    height: 390px;
    border-color: rgba(255, 255, 255, 0.035);
}

.spectrum-material-shadow {
    position: absolute;
    bottom: 58px;
    width: 76%;
    height: 55px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    filter: blur(18px);
    transform: rotate(-5deg);
}

.spectrum-material-panel {
    position: relative;
    width: min(82%, 430px);
    aspect-ratio: 1.32 / 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 24px;
    background: linear-gradient( 122deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.14) 16%, transparent 39% ), radial-gradient( circle at 78% 80%, var(--preview-light), transparent 38% ), linear-gradient( 145deg, var(--preview-light), var(--preview-color) 47%, var(--preview-dark) );
    box-shadow: 0 42px 65px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -35px 50px rgba(0, 0, 0, 0.18);
    transform: rotateX(8deg) rotateY(-13deg) rotateZ(-4deg);
    transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

    .spectrum-material-panel::before {
        content: "";
        position: absolute;
        top: -30%;
        left: -48%;
        width: 45%;
        height: 170%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.48), transparent );
        transform: rotate(20deg);
        animation: spectrumPanelShine 6s ease-in-out infinite;
    }

    .spectrum-material-panel::after {
        content: "";
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 82%;
        height: 22%;
        border-radius: 0 0 24px 0;
        background: linear-gradient( 180deg, transparent, rgba(0, 0, 0, 0.24) );
        pointer-events: none;
    }

.spectrum-preview-stage.is-satin .spectrum-material-panel {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient( 125deg, rgba(255, 255, 255, 0.17), transparent 34% ), linear-gradient( 145deg, var(--preview-light), var(--preview-color) 52%, var(--preview-dark) );
    box-shadow: 0 42px 65px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.19), inset 0 -35px 50px rgba(0, 0, 0, 0.16);
}

    .spectrum-preview-stage.is-satin .spectrum-material-panel::before {
        opacity: 0.25;
    }

.spectrum-material-grid {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: linear-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.45) 1px, transparent 1px);
    background-size: 28px 28px;
}

.spectrum-material-light {
    position: absolute;
    top: 15%;
    left: 12%;
    width: 58%;
    height: 14%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    filter: blur(22px);
    transform: rotate(-18deg);
}

.spectrum-preview-stage.is-satin .spectrum-material-light {
    opacity: 0.35;
}

.spectrum-material-brand {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
}

    .spectrum-material-brand span {
        color: rgba(255, 255, 255, 0.70);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.24em;
    }

    .spectrum-material-brand strong {
        margin-top: 3px;
        color: #ffffff;
        font-size: clamp(1.5rem, 5vw, 2.3rem);
        letter-spacing: 0.02em;
        line-height: 1;
    }

    .spectrum-material-brand small {
        margin-top: 7px;
        color: rgba(255, 255, 255, 0.68);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.12em;
    }

.spectrum-material-code {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

    .spectrum-material-code span {
        color: rgba(255, 255, 255, 0.57);
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.15em;
    }

    .spectrum-material-code strong {
        margin-top: 3px;
        color: #ffffff;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }

.spectrum-floating-chip {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(12, 14, 18, 0.58);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.62rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

    .spectrum-floating-chip i {
        color: #ffffff;
    }

.spectrum-floating-chip-top {
    top: 80px;
    right: 16px;
}

.spectrum-floating-chip-bottom {
    bottom: 70px;
    left: 16px;
}

.spectrum-preview-footer {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 20px 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.spectrum-selected-color {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spectrum-selected-color-dot {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
    transition: background-color 0.35s ease;
}

.spectrum-selected-color > div,
.spectrum-preview-property {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .spectrum-selected-color small,
    .spectrum-preview-property small {
        color: rgba(255, 255, 255, 0.47);
        font-size: 0.61rem;
    }

    .spectrum-selected-color strong,
    .spectrum-preview-property strong {
        overflow: hidden;
        color: #ffffff;
        font-size: 0.86rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.spectrum-preview-property {
    align-items: flex-end;
    flex: 0 0 auto;
}

@keyframes spectrumPanelShine {
    0%, 18% {
        left: -48%;
    }

    48%, 100% {
        left: 130%;
    }
}

/* =============================================== */
/* --- RENK PALETİ PANELİ --- */
/* =============================================== */

.spectrum-palette-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: #ffffff;
}

.spectrum-palette-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

    .spectrum-palette-panel-header > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .spectrum-palette-panel-header strong {
        color: #222222;
        font-size: 0.95rem;
    }

    .spectrum-palette-panel-header > div > span {
        margin-top: 2px;
        color: #888888;
        font-size: 0.68rem;
    }

.spectrum-visible-color-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background-color: #f1f1f1;
    color: #666666;
    font-size: 0.63rem;
    font-weight: 600;
}

.spectrum-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.spectrum-swatch {
    --swatch-color: #444444;
    appearance: none;
    position: relative;
    min-width: 0;
    min-height: 94px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: linear-gradient( 140deg, rgba(255, 255, 255, 0.40), transparent 42% ), var(--swatch-color);
    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 -38px 38px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .spectrum-swatch::before {
        content: "";
        position: absolute;
        top: -25%;
        left: -65%;
        width: 65%;
        height: 150%;
        background: rgba(255, 255, 255, 0.24);
        transform: rotate(20deg);
        transition: left 0.42s ease;
    }

    .spectrum-swatch:hover {
        transform: translateY(-3px);
        box-shadow: inset 0 -38px 38px rgba(0, 0, 0, 0.17), 0 8px 18px rgba(0, 0, 0, 0.14);
    }

        .spectrum-swatch:hover::before {
            left: 125%;
        }

    .spectrum-swatch.is-active {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(76, 85, 60, 0.14), inset 0 -38px 38px rgba(0, 0, 0, 0.18);
    }

        .spectrum-swatch.is-active::after {
            content: "✓";
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 3;
            width: 22px;
            height: 22px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.94);
            color: #222222;
            font-size: 0.72rem;
            font-weight: 700;
            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.17);
        }

    .spectrum-swatch:focus-visible,
    .spectrum-layer-card:focus-visible {
        outline: 3px solid rgba(76, 85, 60, 0.32);
        outline-offset: 2px;
    }

.spectrum-swatch-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 25px 8px 8px;
    overflow: hidden;
    background: linear-gradient( 180deg, transparent, rgba(0, 0, 0, 0.72) );
    color: #ffffff;
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectrum-swatch-finish {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.38);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.spectrum-swatch-more {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: span 2;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.09), transparent ), var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
}

    .spectrum-swatch-more strong {
        font-size: 1.35rem;
        line-height: 1;
    }

    .spectrum-swatch-more span {
        max-width: 135px;
        margin-top: 5px;
        font-size: 0.61rem;
        line-height: 1.35;
        opacity: 0.82;
    }

.spectrum-color-disclaimer {
    margin: 15px 0 0;
    color: #929292;
    font-size: 0.64rem;
    line-height: 1.55;
}

/* =============================================== */
/* --- PPF KATMAN TEKNOLOJİSİ --- */
/* =============================================== */

.spectrum-layer-section {
    margin: 4rem 0;
    padding: 3rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.spectrum-layer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: stretch;
}

.spectrum-layer-visual {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #292d36;
    border-radius: 20px;
    background: radial-gradient( circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34% ), linear-gradient(145deg, #20242d, #101216 75%);
    color: #ffffff;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.14);
}

.spectrum-layer-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .spectrum-layer-visual-header span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.13em;
    }

    .spectrum-layer-visual-header small {
        color: rgba(255, 255, 255, 0.40);
        font-size: 0.58rem;
    }

.spectrum-layer-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 34px 22px 28px;
}

    .spectrum-layer-stack::before {
        content: "";
        position: absolute;
        top: 46px;
        right: 8%;
        bottom: 56px;
        width: 42%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.045);
        filter: blur(35px);
        pointer-events: none;
    }

.spectrum-layer-card {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transform-origin: center;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

    .spectrum-layer-card:hover,
    .spectrum-layer-card:focus {
        z-index: 5;
        transform: translateY(-5px) scale(1.015);
        border-color: rgba(255, 255, 255, 0.40);
        box-shadow: 0 20px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }

.spectrum-layer-card-1 {
    margin-right: 8%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.38), transparent 42%), linear-gradient(135deg, #d8dce1, #939ba5);
    color: #20242a;
}

.spectrum-layer-card-2 {
    margin-right: 5%;
    margin-left: 3%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.34), transparent 42%), linear-gradient(135deg, #9ecfd3, #4d7f86);
}

.spectrum-layer-card-3 {
    margin-right: 2%;
    margin-left: 6%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.30), transparent 42%), linear-gradient(135deg, #4b93b8, #0e526f);
}

.spectrum-layer-card-4 {
    margin-left: 9%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.24), transparent 42%), linear-gradient(135deg, #545861, #272a30);
}

.spectrum-layer-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.76;
}

.spectrum-layer-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.spectrum-layer-card strong {
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectrum-layer-card small {
    margin-top: 3px;
    font-size: 0.58rem;
    opacity: 0.66;
}

.spectrum-layer-card > i {
    font-size: 1rem;
    opacity: 0.70;
}

.spectrum-layer-surface {
    position: relative;
    z-index: 1;
    margin: 6px 2% 0 12%;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent), #090a0c;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
}

.spectrum-layer-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spectrum-layer-detail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: #ffffff;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .spectrum-layer-detail:hover {
        transform: translateY(-3px);
        border-color: rgba(76, 85, 60, 0.38);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
    }

.spectrum-layer-detail-color {
    border-color: rgba(76, 85, 60, 0.28);
    background: linear-gradient( 135deg, rgba(76, 85, 60, 0.055), #ffffff 55% );
}

.spectrum-layer-detail-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 0.62rem;
    font-weight: 700;
}

.spectrum-layer-detail h4 {
    margin: 0 0 5px;
    color: #252525;
    font-size: 0.92rem;
}

.spectrum-layer-detail p {
    margin: 0;
    color: #6b6b6b;
    font-size: 0.76rem;
    line-height: 1.65;
}

.spectrum-layer-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 4px;
    padding: 16px;
    border-left: 3px solid var(--primary-color);
    border-radius: 8px;
    background-color: #f5f6f3;
}

    .spectrum-layer-note i {
        margin-top: 3px;
        flex: 0 0 auto;
        color: var(--primary-color);
    }

    .spectrum-layer-note p {
        margin: 0;
        color: #606060;
        font-size: 0.75rem;
        line-height: 1.65;
    }

    .spectrum-layer-note strong {
        color: #303030;
    }

/* =============================================== */
/* --- TEKNİK ÖZELLİKLER VE AÇIKLAMA --- */
/* =============================================== */

.spectrum-technical-section {
    margin-top: 2.5rem;
}

.spectrum-description-section {
    margin-top: 2.5rem;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: #f8f8f8;
}

    .spectrum-description-section h3 {
        margin: 0 0 1rem;
        color: #222222;
        font-size: 1.35rem;
    }

    .spectrum-description-section p {
        margin: 0 0 1rem;
        color: #5f5f5f;
        line-height: 1.8;
    }

        .spectrum-description-section p:last-child {
            margin-bottom: 0;
        }

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

@media (min-width: 768px) {

    .spectrum-action-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .spectrum-action-buttons .btn {
            width: auto;
        }

    .spectrum-stat-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spectrum-section-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .spectrum-palette-total,
    .spectrum-layer-count {
        flex: 0 0 auto;
    }

    .spectrum-color-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spectrum-swatch-more {
        grid-column: span 4;
    }

    .spectrum-material-scene {
        min-height: 500px;
    }

    .spectrum-layer-stack {
        padding: 42px 34px 32px;
    }

    .spectrum-layer-card {
        min-height: 84px;
        padding: 16px 19px;
    }

        .spectrum-layer-card strong {
            font-size: 0.9rem;
        }

    .spectrum-description-section {
        padding: 30px;
    }
}

/* =============================================== */
/* --- MASAÜSTÜ --- */
/* =============================================== */

@media (min-width: 992px) {

    .spectrum-showcase {
        grid-template-columns: minmax(390px, 0.95fr) minmax(0, 1.35fr);
        gap: 2rem;
    }

    .spectrum-preview-stage {
        position: sticky;
        top: 150px;
    }

    .spectrum-palette-panel {
        padding: 22px;
    }

    .spectrum-color-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spectrum-swatch-more {
        grid-column: span 4;
    }

    .spectrum-layer-layout {
        grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

/* =============================================== */
/* --- GENİŞ MASAÜSTÜ --- */
/* =============================================== */

@media (min-width: 1200px) {

    .spectrum-color-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .spectrum-swatch-more {
        grid-column: span 5;
    }
}

/* =============================================== */
/* --- KÜÇÜK MOBİL --- */
/* =============================================== */

@media (max-width: 420px) {

    .spectrum-preview-topbar {
        flex-direction: column;
    }

    .spectrum-material-scene {
        min-height: 365px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .spectrum-material-panel {
        width: 90%;
    }

    .spectrum-floating-chip {
        font-size: 0.55rem;
    }

    .spectrum-floating-chip-top {
        top: 72px;
        right: 8px;
    }

    .spectrum-floating-chip-bottom {
        bottom: 58px;
        left: 8px;
    }

    .spectrum-layer-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .spectrum-layer-card > i {
            display: none;
        }
}

/* =============================================== */
/* --- HAREKET AZALTMA TERCİHİ --- */
/* =============================================== */

@media (prefers-reduced-motion: reduce) {

    .spectrum-material-panel::before {
        animation: none;
    }

    .spectrum-preview-stage::before,
    .spectrum-material-panel,
    .spectrum-selected-color-dot,
    .spectrum-swatch,
    .spectrum-swatch::before,
    .spectrum-layer-card,
    .spectrum-layer-detail {
        transition: none;
    }
}




/* ================================================== */
/* --- YENİ RENK DENEYİMİ TASARIMI --- */
/* ================================================== */

.spectrum-color-experience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.spectrum-color-hero {
    --hero-color: #0e7fbf;
    --hero-light: #73c4eb;
    --hero-dark: #073f5f;
    position: relative;
    overflow: hidden;
    border: 1px solid #262b33;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), transparent 35%), linear-gradient(145deg, #1d2129, #0f1116 74%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

    .spectrum-color-hero::before {
        content: "";
        position: absolute;
        top: -130px;
        left: 50%;
        width: 380px;
        height: 260px;
        border-radius: 50%;
        background: var(--hero-color);
        opacity: 0.22;
        filter: blur(90px);
        transform: translateX(-50%);
        transition: background-color 0.35s ease, opacity 0.35s ease;
    }

    .spectrum-color-hero.is-satin::before {
        opacity: 0.12;
    }

.spectrum-color-hero-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 0;
}

    .spectrum-color-hero-header > div {
        min-width: 0;
    }

.spectrum-color-hero-kicker {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.spectrum-color-hero-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.2;
}

.spectrum-color-hero-finish {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.spectrum-color-film-stage {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 40px 24px 25px;
    perspective: 1100px;
}

.spectrum-color-film-shadow {
    position: absolute;
    bottom: 52px;
    width: 72%;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.46);
    filter: blur(18px);
    transform: rotate(-7deg);
}

.spectrum-color-film-back,
.spectrum-color-film-front {
    position: absolute;
    width: min(82%, 420px);
    aspect-ratio: 1.28 / 1;
    border-radius: 24px;
    transition: all 0.35s ease;
}

.spectrum-color-film-back {
    background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)), rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    transform: rotateX(10deg) rotateY(-16deg) rotateZ(-5deg) translateY(28px) translateX(-18px);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.26);
}

.spectrum-color-film-front {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.30);
    background: linear-gradient(125deg, rgba(255,255,255,0.50), transparent 34%), radial-gradient(circle at 78% 82%, var(--hero-light), transparent 35%), linear-gradient(145deg, var(--hero-light), var(--hero-color) 45%, var(--hero-dark));
    transform: rotateX(10deg) rotateY(-16deg) rotateZ(-5deg);
    box-shadow: 0 38px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -28px 40px rgba(0,0,0,0.18);
}

.spectrum-color-hero.is-satin .spectrum-color-film-front {
    border-color: rgba(255,255,255,0.18);
    background: linear-gradient(125deg, rgba(255,255,255,0.16), transparent 34%), linear-gradient(145deg, var(--hero-light), var(--hero-color) 50%, var(--hero-dark));
    box-shadow: 0 38px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -28px 40px rgba(0,0,0,0.16);
}

.spectrum-color-film-front::before {
    content: "";
    position: absolute;
    top: -32%;
    left: -48%;
    width: 44%;
    height: 170%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.44), transparent);
    transform: rotate(20deg);
    animation: spectrumColorShine 6s ease-in-out infinite;
}

.spectrum-color-hero.is-satin .spectrum-color-film-front::before {
    opacity: 0.28;
}

.spectrum-color-film-glow {
    position: absolute;
    top: 14%;
    left: 12%;
    width: 58%;
    height: 14%;
    border-radius: 50%;
    background: rgba(255,255,255,0.42);
    filter: blur(22px);
    transform: rotate(-18deg);
}

.spectrum-color-hero.is-satin .spectrum-color-film-glow {
    opacity: 0.35;
}

.spectrum-color-film-brand {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    text-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

    .spectrum-color-film-brand span {
        color: rgba(255,255,255,0.72);
        font-size: 0.56rem;
        font-weight: 700;
        letter-spacing: 0.24em;
    }

    .spectrum-color-film-brand strong {
        margin-top: 4px;
        color: #ffffff;
        font-size: clamp(1.55rem, 4vw, 2.25rem);
        line-height: 1;
    }

    .spectrum-color-film-brand small {
        margin-top: 8px;
        color: rgba(255,255,255,0.70);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.10em;
    }

.spectrum-color-film-code {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

    .spectrum-color-film-code small {
        color: rgba(255,255,255,0.58);
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.12em;
    }

    .spectrum-color-film-code strong {
        margin-top: 4px;
        color: #ffffff;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }

.spectrum-color-floating-tag {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(8, 10, 14, 0.56);
    color: rgba(255,255,255,0.82);
    font-size: 0.62rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.20);
}

.spectrum-color-floating-tag-top {
    top: 72px;
    right: 18px;
}

.spectrum-color-floating-tag-bottom {
    left: 18px;
    bottom: 72px;
}

.spectrum-color-hero-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 22px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0, 0, 0, 0.16);
}

.spectrum-color-indicator,
.spectrum-color-indicator-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .spectrum-color-indicator > div,
    .spectrum-color-indicator-right {
        min-width: 0;
    }

        .spectrum-color-indicator small,
        .spectrum-color-indicator-right small {
            display: block;
            color: rgba(255,255,255,0.48);
            font-size: 0.61rem;
        }

        .spectrum-color-indicator strong,
        .spectrum-color-indicator-right strong {
            color: #ffffff;
            font-size: 0.88rem;
        }

.spectrum-color-indicator-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.spectrum-color-library {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: #ffffff;
}

.spectrum-color-library-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

    .spectrum-color-library-header > div {
        display: flex;
        flex-direction: column;
    }

    .spectrum-color-library-header strong {
        color: #222222;
        font-size: 0.98rem;
    }

    .spectrum-color-library-header span {
        margin-top: 3px;
        color: #8b8b8b;
        font-size: 0.68rem;
    }

.spectrum-color-chip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.spectrum-color-chip {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    background: #ffffff;
    color: #222222;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .spectrum-color-chip:hover {
        transform: translateY(-2px);
        border-color: #d6d6d6;
        box-shadow: 0 10px 18px rgba(0,0,0,0.07);
    }

    .spectrum-color-chip.is-active {
        border-color: var(--primary-color);
        background: linear-gradient(145deg, rgba(76, 85, 60, 0.05), #ffffff);
        box-shadow: 0 0 0 2px rgba(76, 85, 60, 0.10);
    }

.spectrum-color-chip-dot {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}

.spectrum-color-chip-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .spectrum-color-chip-content strong {
        color: #222222;
        font-size: 0.86rem;
        line-height: 1.2;
    }

    .spectrum-color-chip-content small {
        margin-top: 2px;
        color: #808080;
        font-size: 0.68rem;
    }

@keyframes spectrumColorShine {
    0%, 18% {
        left: -48%;
    }

    48%, 100% {
        left: 130%;
    }
}

/* ================================================== */
/* --- YENİ KATMAN TEKNOLOJİSİ TASARIMI --- */
/* ================================================== */

.spectrum-layer-section {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color);
}

.spectrum-layer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.spectrum-layer-stage {
    --layer-accent: #0e7fbf;
    --layer-accent-light: #73c4eb;
    position: relative;
    overflow: hidden;
    border: 1px solid #262b33;
    border-radius: 22px;
    background: radial-gradient(circle at 45% 25%, rgba(255,255,255,0.08), transparent 32%), linear-gradient(145deg, #191c22, #0d0f14 74%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}

    .spectrum-layer-stage::before {
        content: "";
        position: absolute;
        top: -140px;
        left: 34%;
        width: 300px;
        height: 250px;
        border-radius: 50%;
        background: var(--layer-accent);
        opacity: 0.12;
        filter: blur(88px);
        transition: background-color 0.35s ease;
    }

.spectrum-layer-stage-inner {
    position: relative;
    min-height: 460px;
    padding: 34px 20px 70px;
}

.spectrum-layer-plate {
    appearance: none;
    position: absolute;
    left: 50%;
    width: min(78%, 360px);
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)), rgba(255,255,255,0.06);
    color: #ffffff;
    cursor: pointer;
    transform: translateX(-50%) rotate(-16deg);
    box-shadow: 0 16px 28px rgba(0,0,0,0.26);
    transition: all 0.28s ease;
    backdrop-filter: blur(8px);
}

    .spectrum-layer-plate:hover {
        transform: translateX(-50%) rotate(-16deg) translateY(-4px);
    }

    .spectrum-layer-plate.is-active {
        border-color: rgba(255,255,255,0.22);
        box-shadow: 0 24px 36px rgba(0,0,0,0.34);
    }

.spectrum-layer-plate-1 {
    top: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06)), rgba(255,255,255,0.10);
}

    .spectrum-layer-plate-1.is-active {
        top: 10px;
    }

.spectrum-layer-plate-2 {
    top: 108px;
    background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)), rgba(255,255,255,0.07);
}

    .spectrum-layer-plate-2.is-active {
        top: 90px;
    }

.spectrum-layer-plate-3 {
    top: 188px;
    background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)), linear-gradient(145deg, var(--layer-accent-light), var(--layer-accent));
    border-color: rgba(255,255,255,0.18);
}

    .spectrum-layer-plate-3.is-active {
        top: 170px;
    }

.spectrum-layer-plate-4 {
    top: 268px;
    background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)), rgba(255,255,255,0.05);
}

    .spectrum-layer-plate-4.is-active {
        top: 250px;
    }

.spectrum-layer-plate-number {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.spectrum-layer-plate-name {
    margin-left: auto;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.spectrum-layer-base-surface {
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: min(82%, 380px);
    padding: 12px 16px;
    border-radius: 18px;
    background: linear-gradient(145deg, #535860, #2e3239);
    color: rgba(255,255,255,0.86);
    text-align: center;
    transform: translateX(-50%) rotate(-16deg);
    box-shadow: 0 18px 32px rgba(0,0,0,0.28);
}

    .spectrum-layer-base-surface span {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
    }

.spectrum-layer-stage-caption {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px 20px;
    color: rgba(255,255,255,0.72);
    font-size: 0.7rem;
}

.spectrum-layer-info-card {
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: #ffffff;
}

.spectrum-layer-info-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--primary-color);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.spectrum-layer-info-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.spectrum-layer-info-number {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(76, 85, 60, 0.10);
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
}

.spectrum-layer-info-top h4 {
    margin: 0;
    color: #222222;
    font-size: 1.1rem;
}

.spectrum-layer-info-top p {
    margin: 4px 0 0;
    color: #7c7c7c;
    font-size: 0.78rem;
}

.spectrum-layer-info-description {
    margin: 0 0 18px;
    color: #555555;
    line-height: 1.8;
}

.spectrum-layer-info-points {
    margin: 0;
    padding-left: 1.1rem;
    color: #5d5d5d;
}

    .spectrum-layer-info-points li {
        margin-bottom: 10px;
        line-height: 1.7;
    }

        .spectrum-layer-info-points li:last-child {
            margin-bottom: 0;
        }

.spectrum-layer-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 15px;
    border-radius: 14px;
    background: #f7f7f7;
}

    .spectrum-layer-note i {
        margin-top: 3px;
        color: var(--primary-color);
    }

    .spectrum-layer-note p {
        margin: 0;
        color: #626262;
        font-size: 0.82rem;
        line-height: 1.7;
    }

/* ================================================== */
/* --- RESPONSIVE --- */
/* ================================================== */

@media (min-width: 768px) {
    .spectrum-color-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .spectrum-color-experience {
        grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
        gap: 2rem;
    }

    .spectrum-layer-layout {
        grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1fr);
        gap: 2rem;
    }

    .spectrum-layer-stage {
        position: sticky;
        top: 150px;
    }

    .spectrum-color-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .spectrum-color-hero-header,
    .spectrum-color-hero-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .spectrum-color-indicator-right {
        align-items: flex-start;
    }

    .spectrum-color-film-stage {
        min-height: 350px;
    }

    .spectrum-layer-stage-inner {
        min-height: 410px;
    }

    .spectrum-layer-plate {
        width: min(88%, 320px);
    }

    .spectrum-layer-base-surface {
        width: min(90%, 340px);
    }
}

/* =============================================== */
/* --- TEKNİK ÖZELLİKLER AÇILIR ALANI --- */
/* =============================================== */

.spectrum-technical-section {
    margin-top: 2.5rem;
}

#technicalSpecsContent[hidden] {
    display: none !important;
}

#technicalSpecsContent:not([hidden]) {
    display: block !important;
}

.product-detail-toggle {
    cursor: pointer;
}

    .product-detail-toggle i {
        transition: transform 0.25s ease;
    }

    .product-detail-toggle.is-open i {
        transform: rotate(180deg);
    }

#technicalSpecsContent .spectrum-description-section {
    margin-top: 1.5rem;
}