/* ============================================================
   cam-glass.css — Açık buzlu cam (glassmorphism) tasarım sistemi
   Decofis · index_cam.html ve leto_configurator_yeni_cam.html için
   Orijinal sayfaların stilini etkilemez; yalnızca _cam kopyalarda
   link'lenir.
   ============================================================ */

:root {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.72);
    --glass-bg-soft: rgba(255, 255, 255, 0.40);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-border-soft: rgba(255, 255, 255, 0.45);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.14);
    --glass-shadow-sm: 0 4px 16px rgba(31, 38, 135, 0.10);
    --glass-blur: 18px;
    --glass-blur-sm: 12px;
    --glass-primary: #39bb9d;
    --glass-primary-bg: rgba(57, 187, 157, 0.16);
    --glass-primary-border: rgba(57, 187, 157, 0.55);
}

/* ---- Ana cam yüzey ---- */
.glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ---- Daha hafif/iç yüzey ---- */
.glass-soft {
    background: var(--glass-bg-soft);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    border: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-shadow-sm);
}

/* ---- Filtre / küçük buton (chip) ---- */
.glass-chip {
    background: var(--glass-bg-soft);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    border: 1px solid var(--glass-border-soft);
    color: #4b5563;
    transition: all 0.2s ease;
}

.glass-chip:hover {
    background: var(--glass-bg);
    color: #1f2937;
}

.glass-chip-active {
    background: var(--glass-primary-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    border: 1px solid var(--glass-primary-border);
    color: var(--glass-primary);
    box-shadow: 0 2px 10px rgba(57, 187, 157, 0.25);
}

/* ---- Kart yüzeyi (seri / model / renk butonları) ---- */
.glass-card {
    background: var(--glass-bg-soft);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
    border: 1px solid var(--glass-border-soft);
    transition: all 0.2s ease;
}

.glass-card:hover {
    background: var(--glass-bg);
    border-color: var(--glass-primary-border);
    box-shadow: var(--glass-shadow-sm);
}

.glass-card-active,
.series-btn.active {
    background: var(--glass-primary-bg) !important;
    border-color: var(--glass-primary-border) !important;
    box-shadow: 0 4px 16px rgba(57, 187, 157, 0.22);
}

.series-btn.active .series-name {
    color: var(--glass-primary);
}

/* ---- index gövdesi için dekoratif arka plan ----
   Cam yüzeylerin arkasında derinlik/renk oluşturur. */
.cam-bg {
    background-color: #eef2f3;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(57, 187, 157, 0.22), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(120, 170, 255, 0.20), transparent 45%),
        radial-gradient(circle at 78% 88%, rgba(255, 175, 145, 0.20), transparent 45%),
        radial-gradient(circle at 25% 85%, rgba(180, 145, 255, 0.16), transparent 45%),
        linear-gradient(135deg, #f3f6f7 0%, #e9eef1 100%);
    background-attachment: fixed;
}

/* ============================================================
   Fallback: backdrop-filter desteklenmeyen tarayıcılarda
   düz yarı-opak beyaz yüzeye düş (okunabilirlik korunur).
   ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

    .glass-panel,
    .glass-soft,
    .glass-card,
    .glass-chip {
        background: rgba(255, 255, 255, 0.92);
    }

    .glass-chip-active,
    .glass-card-active,
    .series-btn.active {
        background: rgba(57, 187, 157, 0.14) !important;
    }
}