/* ==========================================
   AVİZE TAŞLARI SAYFASI
   KRİSTAL ARKA PLAN VE ÖZEL EFEKTLER
========================================== */

.crystal-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(220, 240, 255, 0.09),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(235, 220, 255, 0.08),
            transparent 22%
        ),
        radial-gradient(
            circle at 35% 78%,
            rgba(190, 225, 255, 0.06),
            transparent 26%
        ),
        radial-gradient(
            circle at 72% 76%,
            rgba(255, 235, 195, 0.05),
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #030405 0%,
            #090b0e 34%,
            #0d1015 65%,
            #050607 100%
        );
}


/* Arka plandaki kristal yüzeyler */

/* Arka plandaki kristal çizgiler */

.crystal-page::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    background:
        linear-gradient(
            118deg,
            transparent 0 17%,
            rgba(255, 255, 255, 0.014) 17.2% 17.7%,
            transparent 18% 42%,
            rgba(190, 225, 255, 0.018) 42.2% 42.8%,
            transparent 43% 67%,
            rgba(235, 215, 255, 0.014) 67.2% 67.8%,
            transparent 68%
        ),
        linear-gradient(
            62deg,
            transparent 0 28%,
            rgba(255, 255, 255, 0.012) 28.2% 28.7%,
            transparent 29% 57%,
            rgba(210, 235, 255, 0.014) 57.2% 57.8%,
            transparent 58%
        );

    background-size:
        520px 520px,
        430px 430px;

    opacity: 0.55;
}

/* Hareketli ışık yansıması */

.crystal-page::after {
    content: "";

    position: absolute;
    inset: -20%;

    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 36%,
            rgba(255, 255, 255, 0.035) 45%,
            rgba(185, 220, 255, 0.055) 50%,
            rgba(230, 205, 255, 0.04) 54%,
            transparent 63%
        );

    transform: translateX(-55%);
    animation: crystalBackgroundSweep 11s ease-in-out infinite;
}

@keyframes crystalBackgroundSweep {

    0%,
    18% {
        transform: translateX(-55%);
        opacity: 0;
    }

    35% {
        opacity: 0.45;
    }

    58% {
        transform: translateX(55%);
        opacity: 0.35;
    }

    75%,
    100% {
        transform: translateX(55%);
        opacity: 0;
    }
}


/* Hero kristal ışığı */

.crystal-page .abajur-hero-glow {
    background:
        radial-gradient(
            circle,
            rgba(205, 230, 255, 0.16),
            rgba(220, 205, 255, 0.06) 32%,
            transparent 68%
        );
}


/* Küçük üst başlıklar */

.crystal-page .abajur-eyebrow,
.crystal-page .abajur-product-label,
.crystal-page .abajur-contact-label {
    color: #dceeff;

    text-shadow:
        0 0 18px rgba(205, 230, 255, 0.18);
}


/* Ürün çizgileri */

.crystal-page .abajur-title-line {
    background:
        linear-gradient(
            90deg,
            #ffffff,
            #bcdcff,
            #eadcff
        );

    box-shadow:
        0 0 20px rgba(205, 230, 255, 0.3);
}


/* Ürün fotoğraf kutusu */

.crystal-page .abajur-image-shell {
    border:
        1px solid rgba(220, 238, 255, 0.16);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.45),
        inset 0 0 25px rgba(255, 255, 255, 0.015);
}


/* Fotoğraf üzerinde prizma yansıması */

.crystal-page .abajur-image-shell::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;
    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 18%,
            rgba(255, 255, 255, 0.08) 33%,
            rgba(165, 215, 255, 0.14) 42%,
            rgba(220, 185, 255, 0.13) 50%,
            rgba(255, 225, 170, 0.1) 58%,
            transparent 73%
        );

    transform: translateX(-135%);

    transition:
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.crystal-page .abajur-product:hover
.abajur-image-shell::before {
    transform: translateX(135%);
}


/* Hover sırasında kristal parlama */

.crystal-page .abajur-product:hover
.abajur-image-shell {
    box-shadow:
        0 38px 95px rgba(0, 0, 0, 0.52),
        0 0 38px rgba(185, 220, 255, 0.13),
        0 0 75px rgba(225, 195, 255, 0.07);
}


/* Başlık ve numaralar */

.crystal-page .abajur-product:hover
.abajur-product-content h2 {
    color: #eaf5ff;
}

.crystal-page .abajur-product:hover
.abajur-product-number {
    color: #dcefff;

    text-shadow:
        0 0 24px rgba(205, 232, 255, 0.38);
}


/* Bilgi al butonu */

.crystal-page .abajur-info-button {
    border-color:
        rgba(215, 235, 255, 0.38);
}

.crystal-page .abajur-info-button::before {
    background:
        linear-gradient(
            105deg,
            #edf8ff,
            #c9e5ff,
            #ebddff
        );
}

.crystal-page .abajur-info-button:hover {
    color: #06080b;

    border-color: #dcefff;

    box-shadow:
        0 12px 38px rgba(195, 225, 255, 0.18);
}


/* İletişim kutusu */

.crystal-page .abajur-contact-section {
    border-color:
        rgba(215, 235, 255, 0.16);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(205, 230, 255, 0.075),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(17, 20, 25, 0.94),
            rgba(7, 8, 11, 0.96)
        );

    box-shadow:
        0 35px 95px rgba(0, 0, 0, 0.46),
        inset 0 0 40px rgba(210, 230, 255, 0.02);
}

.crystal-page .abajur-contact-section::before {
    background:
        radial-gradient(
            circle at var(--mouse-x, 50%)
            var(--mouse-y, 50%),
            rgba(205, 230, 255, 0.16),
            rgba(225, 200, 255, 0.07) 25%,
            transparent 45%
        );
}


/* İletişim butonu */

.crystal-page .abajur-contact-button {
    color: #07090d;

    background:
        linear-gradient(
            110deg,
            #edf8ff,
            #c8e4ff,
            #eadcff
        );

    box-shadow:
        0 14px 38px rgba(195, 225, 255, 0.16);
}


/* Hareket azaltma ayarı */

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

    .crystal-page::after {
        animation: none;
        display: none;
    }

    .crystal-page .abajur-image-shell::before {
        display: none;
    }
}
/* ==========================================
   AVİZE TAŞLARI ALTIN BAŞLIKLAR
========================================== */

/* Ürün başlıkları */

.crystal-page .abajur-product-content h2 {
    color: #d8b45f;

    text-shadow:
        0 0 14px rgba(216, 180, 95, 0.08);

    transition:
        color 0.4s ease,
        transform 0.4s ease,
        text-shadow 0.4s ease;
}

.crystal-page .abajur-product:hover
.abajur-product-content h2 {
    color: #f0cf7a;

    transform: translateX(5px);

    text-shadow:
        0 0 20px rgba(240, 207, 122, 0.22);
}


/* İletişim bölümündeki ana başlık */

.crystal-page .abajur-contact-section h2 {
    color: #d8b45f;

    text-shadow:
        0 0 18px rgba(216, 180, 95, 0.12);

    transition:
        color 0.4s ease,
        text-shadow 0.4s ease;
}

.crystal-page .abajur-contact-section:hover h2 {
    color: #f0cf7a;

    text-shadow:
        0 0 24px rgba(240, 207, 122, 0.24);
}
.crystal-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 12px 18px 12px 12px;

    border: 1px solid rgba(255, 225, 150, 0.28);
    border-radius: 999px;

    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)),
        linear-gradient(135deg, rgba(245, 210, 120, 0.28), rgba(120, 170, 255, 0.10));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(255, 215, 120, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.25);

    text-decoration: none;
    overflow: hidden;

    transform: translateX(0);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}
.crystal-whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
}

.crystal-whatsapp .whatsapp-float {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    padding: 0;
    margin: 0;

    border-radius: 50%;
    background: linear-gradient(145deg, #c9aa57, #8d7440);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(201, 170, 87, 0.18);

    text-decoration: none;
    overflow: hidden;
}

.crystal-whatsapp .whatsapp-float-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    background: transparent;
    border: 0;
}

.crystal-whatsapp .whatsapp-float-icon img {
    display: block;

    width: 42px;
    height: 42px;

    object-fit: contain;
    object-position: center;

    margin: 0;
    padding: 0;

    transform: translate(0, 0);
}
/* WhatsApp logosunu kesmeden tam göster */

.crystal-whatsapp .whatsapp-float-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    border-radius: 0;

    overflow: visible;

    box-shadow: none;
}

.crystal-whatsapp .whatsapp-float-icon img {
    display: block;

    width: 44px;
    height: 44px;

    max-width: none;

    padding: 0;
    margin: 0;

    object-fit: contain;

    transform: none;
    filter: none;
}
.crystal-whatsapp .whatsapp-float-icon img {
    display: block;

    width: 44px;
    height: 44px;

    object-fit: contain;
    object-position: center;

    margin: 0;
    padding: 0;

    transform: translate(-4px, -3px);
}
/* ==========================================
   KRİSTAL WHATSAPP SON DOKUNUŞ
========================================== */

.crystal-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    width: 62px;
    height: 62px;
    padding: 0 15px;

    overflow: hidden;

    border-radius: 999px;
    border: 1px solid rgba(255, 225, 150, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(216, 180, 95, 0.18) 42%,
            rgba(25, 27, 33, 0.92) 78%
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(240, 207, 122, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);

    text-decoration: none;

    animation: crystalWhatsappPulse 3.2s ease-in-out infinite;

    transition:
        width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* Hover olduğunda yazıyla birlikte açılsın */

.crystal-whatsapp:hover,
.crystal-whatsapp:focus-visible {
    width: 220px;

    transform: translateY(-5px);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.52),
        0 0 28px rgba(240, 207, 122, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}


/* Kristal ışık geçişi */

.crystal-whatsapp::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.26) 42%,
            rgba(215, 235, 255, 0.18) 50%,
            rgba(245, 210, 255, 0.15) 56%,
            transparent 76%
        );

    transform: translateX(-140%);

    transition:
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.crystal-whatsapp:hover::before {
    transform: translateX(140%);
}


/* Logo alanı */

.crystal-whatsapp .whatsapp-float-icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    margin: 0;
    padding: 0;
}

.crystal-whatsapp .whatsapp-float-icon img {
    display: block;

    width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center;

    transform: none;
    filter: none;
}


/* Yazı */

.crystal-whatsapp .whatsapp-float-text {
    position: relative;
    z-index: 2;

    white-space: nowrap;

    color: #f0cf7a;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;

    opacity: 0;
    transform: translateX(12px);

    transition:
        opacity 0.25s ease 0.12s,
        transform 0.35s ease 0.1s;
}

.crystal-whatsapp:hover .whatsapp-float-text,
.crystal-whatsapp:focus-visible .whatsapp-float-text {
    opacity: 1;
    transform: translateX(0);
}


/* Hafif nefes alma efekti */

@keyframes crystalWhatsappPulse {

    0%,
    100% {
        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.45),
            0 0 14px rgba(240, 207, 122, 0.13),
            inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

    50% {
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.48),
            0 0 25px rgba(240, 207, 122, 0.27),
            inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }
}


/* Mobil */

@media (max-width: 768px) {

    .crystal-whatsapp,
    .crystal-whatsapp:hover,
    .crystal-whatsapp:focus-visible {
        right: 14px;
        bottom: 14px;

        width: 56px;
        height: 56px;
        padding: 0 12px;

        transform: none;
    }

    .crystal-whatsapp .whatsapp-float-text {
        display: none;
    }

    .crystal-whatsapp .whatsapp-float-icon,
    .crystal-whatsapp .whatsapp-float-icon img {
        width: 32px;
        height: 32px;
    }
}