/* ═══════════════════════════════════════════════════════════════
   💎 DIAMOND MARBLE PREMIUM BACKGROUND - CSS
   Açık mermer · Altın aksanlar · Elmas kesim ışıkları
═══════════════════════════════════════════════════════════════ */

.diamond-marble-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #FAFAF7; /* Lüks fildişi/mermer */
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   1. ANA ZEMİN (Mesh Gradient Katmanları)
═══════════════════════════════════════════════════ */
.diamond-marble-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 15% 25%, rgba(216, 212, 203, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 75%, rgba(201, 169, 97, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 50% 90%, rgba(229, 226, 220, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, #FAFAF7 0%, #F2EFE7 60%, #E5E2DC 100%);
}

/* ═══════════════════════════════════════════════════
   2. MERMER ÇİZGİLERİ (SVG Damar Pattern)
═══════════════════════════════════════════════════ */
.diamond-marble-veins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.85;
}

.diamond-marble-veins-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Damarların yumuşak yüzme animasyonu */
.dm-vein {
    animation: dmVeinFloat 14s ease-in-out infinite alternate;
    transform-origin: center;
}

.dm-vein-1 { animation-delay: 0s; }
.dm-vein-2 { animation-delay: 1.5s; }
.dm-vein-3 { animation-delay: 3s; }
.dm-vein-4 { animation-delay: 4.5s; }

/* Dikey damarlar - daha yavaş hareket */
.dm-vein-v {
    animation: dmVeinFloatV 18s ease-in-out infinite alternate;
}

.dm-vein-v-1 { animation-delay: 0s; }
.dm-vein-v-2 { animation-delay: 2s; }
.dm-vein-v-3 { animation-delay: 4s; }

@keyframes dmVeinFloat {
    0% { transform: translateY(-3px) scaleX(1); }
    100% { transform: translateY(4px) scaleX(1.01); }
}

@keyframes dmVeinFloatV {
    0% { transform: translateX(-2px); }
    100% { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════
   3. ELMAS KESİM IŞIK ÇİZGİLERİ (Diagonal Shimmer)
═══════════════════════════════════════════════════ */
.diamond-marble-cuts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.dm-cut {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.3) 30%,
        rgba(232, 199, 122, 0.6) 50%,
        rgba(201, 169, 97, 0.3) 70%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(201, 169, 97, 0.35);
    opacity: 0;
    animation: dmCutShimmer 8s ease-in-out infinite;
}

.dm-cut-1 {
    top: 18%;
    left: -10%;
    width: 55%;
    transform: rotate(28deg);
    animation-delay: 0s;
}

.dm-cut-2 {
    top: 62%;
    right: -10%;
    width: 60%;
    transform: rotate(-22deg);
    animation-delay: 2.5s;
}

.dm-cut-3 {
    top: 42%;
    left: 25%;
    width: 45%;
    transform: rotate(48deg);
    animation-delay: 5s;
}

@keyframes dmCutShimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════
   4. ALTIN PARLAMA LEKELERİ (Soft Glow Blobs)
═══════════════════════════════════════════════════ */
.diamond-marble-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    animation: dmGlowPulse 7s ease-in-out infinite alternate;
}

/* Sağ üst altın parlama */
.diamond-marble-glow-tr {
    top: -150px;
    right: -100px;
    width: 550px;
    height: 550px;
    background: radial-gradient(
        circle,
        rgba(232, 199, 122, 0.35) 0%,
        rgba(201, 169, 97, 0.15) 40%,
        transparent 70%
    );
    animation-delay: 0s;
}

/* Sol alt çelik gri parlama */
.diamond-marble-glow-bl {
    bottom: -120px;
    left: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(
        circle,
        rgba(92, 100, 112, 0.18) 0%,
        rgba(201, 169, 97, 0.08) 50%,
        transparent 70%
    );
    animation-delay: 3.5s;
}

@keyframes dmGlowPulse {
    0%   { transform: scale(1) translate(0, 0); opacity: 0.7; }
    100% { transform: scale(1.15) translate(20px, -20px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   5. FLOATING ELMAS NOKTA VURGULARI
═══════════════════════════════════════════════════ */
.diamond-marble-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dm-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #C9A961, #E8C77A);
    transform: rotate(45deg);
    box-shadow:
        0 0 12px rgba(201, 169, 97, 0.5),
        0 0 24px rgba(201, 169, 97, 0.25);
    animation: dmDotFloat 6s ease-in-out infinite;
    opacity: 0;
}

.dm-dot-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.dm-dot-2 {
    top: 25%;
    right: 18%;
    width: 6px;
    height: 6px;
    animation-delay: 1.5s;
}

.dm-dot-3 {
    bottom: 28%;
    left: 22%;
    width: 5px;
    height: 5px;
    animation-delay: 3s;
}

.dm-dot-4 {
    bottom: 18%;
    right: 12%;
    width: 7px;
    height: 7px;
    animation-delay: 4.5s;
}

@keyframes dmDotFloat {
    0%, 100% {
        transform: rotate(45deg) translateY(0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: rotate(45deg) translateY(-15px) scale(1.3);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════
   6. NOİSE TEXTURE (Premium Grain)
═══════════════════════════════════════════════════ */
.diamond-marble-noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noiseFilter)'/></svg>");
    background-size: 250px 250px;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   📱 MOBİL OPTİMİZASYON
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .diamond-marble-veins-svg {
        transform: scale(1.2);
    }
    .diamond-marble-glow-tr {
        width: 350px;
        height: 350px;
        top: -80px;
        right: -80px;
    }
    .diamond-marble-glow-bl {
        width: 280px;
        height: 280px;
        bottom: -80px;
        left: -80px;
    }
    .dm-dot {
        width: 6px;
        height: 6px;
    }
    .dm-cut {
        opacity: 0;
    }
    .dm-cut-1, .dm-cut-2 {
        opacity: initial;
    }
}

@media (max-width: 480px) {
    .diamond-marble-veins {
        opacity: 0.6;
    }
    .diamond-marble-noise {
        opacity: 0.025;
    }
}

/* ═══════════════════════════════════════════════════
   ♿ PERFORMANS: Reduced motion desteği
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .dm-vein, .dm-vein-v,
    .dm-cut,
    .diamond-marble-glow,
    .dm-dot {
        animation: none;
    }
}