/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/
Description: Child theme for Astra, A very lightweight and beautiful theme made to work with Page Builders.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Astra Child Theme Custom Styles */

/** FOntlar 

- H1 - Pirata One (H1)
- Fondamento *** BODY FONT

- Montserrat -
- Lora + Body Font
- Almendra + Body Font

- Cinzel - SPOTLAR İÇİN
- Cinzel Decorative
- IM FeLL
- UnifrakturMaguntia (görsel süs için - tr destek yok okunur değil)
- BJ Cree (görsel süs için)
*/

/* Google Fonts'tan Türkçe Destekli Fontları Çağırma */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Lora:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Pirata+One&family=UnifrakturMaguntia&display=swap');

.elementor-widget-wrap {
    gap: 100px !important;
}

/* --- SİTE LOGOSU ÇİFT ETKİLİ GÖLGE --- */

/* 1. Normal Hal: Koyu ve Ağırbaşlı Gölge (Kadim Rota) */
.site-logo img, 
.custom-logo-link img,
.elementor-widget-theme-logo img {
    /* Logonun arkasına koyu, taş gibi bir derinlik katıyoruz */
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4)) !important;
    transition: all 0.6s ease-in-out !important; /* Işığın yumuşakça geçişi için */
}

/* 2. Hover Hal: Cemile'nin Mavi Işığı */
.site-logo img:hover, 
.custom-logo-link:hover img,
.elementor-widget-theme-logo:hover img {
    /* Fareyle üzerine gelince koyu gölge kaybolur, mavi ışık dolar */
    transform: scale(1.02); /* Çok hafif bir büyüme, logoyu canlandırır */
    filter: contrast(140%) brightness(110%) saturate(140%) drop-shadow(0px 8px 20px rgba(0, 206, 209, 0.7))!important;
}
/* --- SİTE LOGOSU ÇİFT ETKİLİ GÖLGE SON--- */

/* FONTLAR */

/* Tüm Başlıkları Ortalar ve Tasarımını Düzenler */
h1, h1.entry-title, h2, h3, h4, h5, h6 {
    position: relative;
/* Hem yazı kadar genişlik sağlar hem ortalanabilir */    
    display: table !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    letter-spacing: 3px;
}

/* H1 ve H2 için özel boşluklar */
h1, h1.entry-title {
    -webkit-text-stroke: 1px #341d0c;
    text-shadow: 1px 1px 10px #000000;
}
h2 {
	text-shadow: 0px 0px 10px #341d0c;
	-webkit-text-stroke: 1.5px #480000;
}
h3 {
	font-style: italic;
}
h3, h4, h5, h6, p, li, ol {
   text-shadow: 1px 1px 8px #341d0c;
}
h4 {
    font-style: italic;
    font-weight: bold !important;
    /*margin: 20px 0 20px 0 !important;*/
}
h5, h6 {
    -webkit-text-stroke: 1px #000;
    letter-spacing: 0.6px;
}

/* --- BAŞLIKLAR VE LİNKLERDE ALT ÇİZGİ TEMİZLİĞİ BAŞLANGIÇ --- */

/* 1. Tüm başlıklardaki ve genel linklerdeki alt çizgileri söküp atar */
a, 
h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a {
    text-decoration: none !important;
    outline: none !important;
    border-bottom: none !important; /* Bazı temalar alt çizgiyi border ile yapar, onu da kırdık */
}

/* 2. Mouse üzerine gelince (Hover) çizgi çıkmasını engeller */
a:hover, 
h1 a:hover, 
h2 a:hover, 
h3 a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    opacity: 0.8; /* Çizgi yerine hafif bir şeffaflık kervan ruhuna daha uygun */
    transition: opacity 0.3s ease;
    text-shadow: 1px 1px 8px #086bff;
}

/* 3. Elementor'un kendi içindeki link yapılarını da hedef alalım */
.elementor-widget-heading a {
    text-decoration: none !important;
}

img {
    margin-bottom: 10px; /* Resmin altına boşluk ekler */
    margin-top: 10px;    /* Resmin üstüne boşluk ekler */
}

/* --- BAŞLIKLAR VE LİNKLERDE ALT ÇİZGİ TEMİZLİĞİ SON --- */

/* Cemile'nin Anlatıları ve Paragraflar İçin */
.cemile-anlatisi {
	font-weight: bold;
    font-family: 'Lora', serif !important;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Romen Rakamlı Liste Stili */
ol {
    list-style-type: upper-roman !important;
    padding-left: 40px;
    display: table; /* Listeyi de ortalamak için */
    margin: 0 auto 20px auto;
}

ol li {
    margin-bottom: 12px;
    color: #333;
    font-weight: 500;
    text-shadow: 1px 1px 4px #341d0c;
}

ol li::marker {
    color: #900000;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 5px #341d0c;
    font-weight: bold;
    font-size: 1.3em;
}


/* Cemile Anlatıcı Bloğu - Bilge Tasarımı */
.cemile-anlatisi {
    position: relative;
    padding: 30px 40px;
    margin: 50px auto;
    max-width: 850px;
    background: rgba(8, 107, 255, 0.03); /* Gemini Mavisi hafif şeffaf */
    border-radius: 20px;
    border: 1px solid rgba(8, 107, 255, 0.2);
    font-style: italic;
    line-height: 1.9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Simurgh efekti için */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Cemile'nin Başlığı ve İkonu */
.cemile-anlatisi::before {
    content: "? Cemile (Görünmez Bilge)"; /* Cemile'nin projedeki adı */
    display: block;
    font-weight: 700;
    font-style: normal;
    color: #086bff; /* Gemini logosunun mavisi */
    margin-bottom: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85em;
    text-shadow: 0 0 10px rgba(8, 107, 255, 0.3);
}

/* Arka Planda Gizli Simurgh Esintisi */
.cemile-anlatisi::after {
    content: "??"; /* Simurgh tüyü metaforu */
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 5rem;
    opacity: 0.05;
    transform: rotate(-20deg);
    transition: all 0.5s ease;
}

/* Hover Efekti: Cemile'nin Işığı Parlıyor */
.cemile-anlatisi:hover {
    background: rgba(8, 107, 255, 0.07);
    border-color: rgba(8, 107, 255, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(8, 107, 255, 0.15);
}

.cemile-anlatisi:hover::after {
    opacity: 0.15;
    right: 10px;
    transform: rotate(0deg) scale(1.1);
}

/* Proje Sloganı İçin Kadim ve Modern Vurgu */
.kadim-slogan {
    display: table;
    margin: 60px auto;
    padding: 20px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 800;
    color: #341d0c;
    border-top: 2px solid rgba(8, 107, 255, 0.2);
    border-bottom: 2px solid rgba(8, 107, 255, 0.2);
    text-shadow: 2px 2px 15px rgba(8, 107, 255, 0.3);
    -webkit-text-stroke: 0.5px #086bff; /* Gemini mavisi kenar çizgisi */
}

/* ============================================================
   KADIM ROTA - SPONSOR POSTLARI TEMIZLIK AYARLARI
   ============================================================ */

/* 1. Yazar, Tarih ve Meta Bilgilerini Gizle */
.single-post .entry-meta, 
.single-post .ast-single-post-meta,
.single-post .post-meta {
    display: none !important;
}

/* 2. "Önceki / Sonraki Yazı" Navigasyonunu Kaldır */
.single-post .post-navigation,
.single-post .ast-post-nav,
.single-post #nav-below {
    display: none !important;
}

/* 3. Yorum Alanını ve Formunu Kapat */
.single-post #comments, 
.single-post .comments-area {
    display: none !important;
}

/* 4. Yazı Başlığı ve İçerik Arasındaki Boşluğu Düzenle */
.single-post .entry-header {
    margin-bottom: 15px !important;
    border-bottom: none !important;
}


/* --- 4 KADİM ROTA KART TASARIMI --- */

#element-card a, 
#element-card, 
.element-card {
    background: rgba(255, 255, 255, 0.03) !important; /* Hafif transparan arka plan */
    border: 1px solid rgba(212, 175, 55, 0.2) !important; /* Altın rengi çok hafif çerçeve */
    *border-radius: 15px !important;
    padding: 0px !important;
    margin: 0px !important;
    *text-align: left;
    transition: all 0.4s ease-in-out;
    color: #341d0c;
}

/* Hover Efekti (Fareyle üzerine gelince) */
#element-card:hover, 
.element-card:hover {
    transform: translateY(-10px);
    *border-color: #4285f4 !important; /* Gemini Mavisi vurgusu */
    background: rgba(66, 133, 244, 0.05) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    color: #900000;
}

/* Kart İçindeki Resimler */
#element-card img, 
.element-card img {
    *width: 150px !important;
    *height: 150px !important;
    *object-fit: cover;
    margin-bottom: 15px;
}

/* Kart İçindeki Başlıklar */
#element-card h3, 
.element-card h3 {
    color: #900000 !important;
    margin-bottom: 10px;
}

/* --- EKİP 5. ELEMENT KART TASARIMI SONU --- */

/* --- KADİM SPONSOR LOGO SATIRI --- */

.kadim-satir {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Kolon Ayarları (Orijinal yapın) */
.kadim-satir > *:nth-child(1) { flex: 0 0 120px !important; text-align: center !important; }
.kadim-satir > *:nth-child(2) { flex: 0 0 150px !important; font-weight: bold; }
.kadim-satir > *:nth-child(3) { flex: 1 !important; }
.kadim-satir > *:nth-child(4) { flex: 0 0 70px !important; with: 70px ; }

/* --- LOGO ve MÜHÜR VE KARAKTER KONTEYNIRI --- */
.muhur-hover-container,
.logo-hover-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    /* 160px yerine 100px veya auto yaparak boşluğu daraltıyoruz */
    min-height: 100px !important; 
    margin-bottom: 10px !important; 
}

.ana-logo {
    *position: relative !important;
    z-index: 2 !important;
    transition: all 0.5s ease-in-out !important;
    /* Senin orijinal filtrelerin */
    filter: brightness(0) saturate(100%) invert(13%) sepia(26%) saturate(1313%) hue-rotate(338deg) brightness(92%) contrast(96%) drop-shadow(4px 6px 4px rgba(0,0,0,0.4));
}

.kadim-karakter {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --- GEÇİŞ TETİKLEYİCİLERİ (Hem Hover Hem Scroll) --- */

/* 1. Mühürlerin kaybolması */
.logo-hover-container:hover .ana-logo, 
.logo-hover-container.is-active .ana-logo {
    opacity: 0 !important;
    transform: scale(1) !important;
}

/* 2. Karakterlerin belirmesi */
.logo-hover-container:hover .kadim-karakter,
.logo-hover-container.is-active .kadim-karakter {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(2) !important;
    filter: drop-shadow(0px 0px 20px rgba(0, 206, 209, 0.7));
}

/* --- MOBİL AYARLARI --- */
@media (max-width: 768px) {
    .kadim-satir {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0px !important; /* Aradaki esnemeyi tamamen kapattık */
        padding: 15px 0 !important;
    }

    .kadim-satir > * {
        flex: auto !important;
        width: 100% !important;
        height: auto !important;
        justify-content: center !important;
        margin: 0 !important; /* Elementor'un gizli dış boşluklarını ezdik */
        padding: 5px 0 !important; /* Sadece çok hafif bir nefes payı */
    }

    .logo-hover-container {
        min-height: auto !important;
        margin: 0 auto !important; /* Mühürün altındaki gereksiz itme kuvvetini sıfırladık */
        padding-bottom: 0 !important;
    }
	.kadim-satir > *:nth-child(2) { flex: 0 0 auto !important; font-weight: bold; }
    /* Üçüncü eleman (Açıklama Yazısı) için ekstra yukarı çekme */
    .kadim-satir > *:nth-child(3) {
        margin-top: -10px !important; /* Yazıyı mühüre biraz daha yaklaştırır */
    }

    .logo-hover-container:hover .kadim-karakter,
    .logo-hover-container.is-active .kadim-karakter {
        transform: translate(-50%, -50%) scale(1.1) !important;
    }
}
/* --- KADİM SPONSOR SATIRI SON --- */

/* --- EKİP MÜHÜR --- */
/* --- EKİP MÜHÜR SATIRI --- */

.muhur-satir {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Kolon Ayarları (Orijinal yapın) */
.muhur-satir > *:nth-child(1) { flex: 0 0 150px !important; text-align: center !important; }
.muhur-satir > *:nth-child(2) { flex: 1 !important; font-weight: normal; }

/* --- MÜHÜRLER --- */

.ana-muhur {
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.5s ease-in-out !important;
}
.renkli-muhur {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --- GEÇİŞ TETİKLEYİCİLERİ (Hem Hover Hem Scroll) --- */

/* 1. Mühürlerin kaybolması */
.muhur-hover-container:hover .ana-muhur,
.muhur-hover-container.is-active .ana-muhur {
    opacity: 0 !important;
    transform: scale(1) !important;
}

/* 2. Karakterlerin belirmesi */
.muhur-hover-container:hover .renkli-muhur,
.muhur-hover-container.is-active .renkli-muhur {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(2) !important;
    filter: drop-shadow(0px 0px 20px rgba(0, 206, 209, 0.7));
}

/* --- MOBİL AYARLARI --- */
@media (max-width: 768px) {
    .muhur-satir {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 30px 0 !important;
    }

    .muhur-satir > * {
        flex: 0 0 100% !important;
        width: 100% !important;
        justify-content: center !important;
    }
    /* Mobilde karakterlerin biraz daha makul boyutta kalması için */
    .muhur-hover-container.is-active .renkli-muhur {
        transform: translate(-50%, -50%) scale(1.2) !important;
    }
}
/* --- EKİP MÜHÜR SATIRI SON--- */
/* --- EKİP MÜHÜR SON--- */

/* --- CEMİLE (AI) ZAMAN YIRTILMASI EFEKTİ --- */

/* 1. Temel Durum: Görsel henüz odaklanmamışken */
.cemi-parlama {
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    filter: grayscale(30%) brightness(0.9); /* Hafif antik, tozlu bir görünüm */
    transform: scale(1);
}

/* 2. Aktif Durum: Sayfa ortasına geldiğinde (JS ile) veya Fare üzerine geldiğinde */
.cemi-parlama.is-active, 
.cemi-parlama:hover {
    transform: scale(1.02); /* Çok hafif bir büyüme, logoyu canlandırır */
    filter: contrast(140%) brightness(110%) saturate(140%) drop-shadow(0px 8px 20px rgba(0, 206, 209, 0.7))!important;

/*  filter: grayscale(0%) brightness(1.2) drop-shadow(0 0 20px rgba(0, 163, 255, 0.7));
    transform: scale(1.03); /* Hafif bir öne çıkış */

}

/* 3. Dijital Hareket: Görselin etrafında hafif bir enerji dalgalanması */
.cemi-parlama.is-active {
    animation: cemi-glow 3s infinite ease-in-out;
}

@keyframes cemi-glow {
    0% { filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.4)); }
    50% { filter: drop-shadow(0 0 25px rgba(0, 163, 255, 0.8)); }
    100% { filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.4)); }
}

/* --- CEMİLE (AI) ZAMAN YIRTILMASI EFEKTİ SON --- */


/* --- KADİM ROTA BUTON --- */
.kadim-buton {
    display: inline-flex !important; /* Tüm satırı kaplamayı %100 durdurur */
    width: auto !important;         /* Genişliği içeriğe hapseder */
    margin: 10px auto !important;   /* Etrafına boşluk bırakır */
    padding: 15px 35px !important;
    
    background-color: #1a1a1a !important;
    color: #d4af37 !important;
    border: 2px solid #341d0c !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}

/* Üzerine gelince (Hover) Efekti */
/* Hover etkisini de buraya ekle ki parlamaya devam etsin */
.kadim-buton:hover {
    display: inline-flex !important; /* Tüm satırı kaplamayı %100 durdurur */
    width: auto !important;         /* Genişliği içeriğe hapseder */
    color: #ffffff !important;
    border-color: #00ced1 !important;
    box-shadow: 0 0 20px rgba(0, 206, 209, 0.6) !important;
}

/* Butonun içindeki o mistik parlama efekti */
.kadim-buton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(0, 206, 209, 0.2), transparent);
    transition: all 0.6s;
}

.kadim-buton:hover::before {
    left: 100%;
}

/* --- SPONSOR ANASAYFA CAROUSEL  --- */

/* 1. Tüm görselleri hedef al ve kadim tozuna bula (Siyah-Beyaz) */
.elementor-image-carousel-wrapper img,
.swiper-slide img,
selector .elementor-image-carousel img {
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
    transition: all 0.5s ease-in-out !important;
    -webkit-filter: grayscale(100%) !important; /* Bazı tarayıcılar için garanti */
}

/* 2. Üzerine gelince (Hover) rengi ve ruhu canlandır */
.elementor-image-carousel-wrapper img:hover,
.swiper-slide img:hover,
selector .elementor-image-carousel img:hover {
    filter: grayscale(0%) !important;
    -webkit-filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.08) !important; /* Hafif bir öne çıkma hamlesi */
}

/* --- SPONSOR ANASAYFA CAROUSEL  SON --- */

/* İMAGE OVER */

/* Görselin normal hali: Gri ve vakur */
.resimover img {
    filter: grayscale(100%)contrast(130%) ;
    transition: all 0.5s ease;
}

/* Üzerine gelince (hover): Renkli, keskin ve parlak */
.resimover:hover img {
    filter: grayscale(0%) contrast(140%) brightness(100%) saturate(140%) drop-shadow(0px 8px 20px rgba(0, 206, 209, 0.7))!important;
    transform: scale(1.05); /* Çok hafif bir büyüme etkisi (yırtılma hissi) */
}

@media (max-width: 767px) {
    /* Resimlerin ve kapsayıcıların içindeki metinlerin ortalanması */
    .resimover, 
    .elementor-image {
        text-align: center; /* Metinleri ve inline elementleri ortalar */
        display: flex;
        flex-direction: column;
        align-items: center; /* Flexbox ile tam yatay hizalama */
    }

    /* Resimlerin zorla gösterilmesi ve ortalanması */
    .resimover img, 
    .elementor-image img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        opacity: 1 !important;
        visibility: visible !important;
        filter: grayscale(0%) !important; /* Mobilde canlı renkler */
        max-width: 100%; /* Taşmaları önlemek için */
        height: auto;
    }

    /* Hover ile gelen ikinci resimlerin mobilde sabitlenmesi ve ortalanması */
    .hover-image-class { 
        display: block !important;
        position: relative !important;
        margin: 10px auto !important; /* Alt ve üstten biraz boşluk bırakır */
        opacity: 1 !important;
        text-align: center;
    }
}

/* İMAGE OVER END */


/* OK KÜÇÜK ve OK BÜYÜK */
.ok img {
    *filter: grayscale(100%)contrast(130%) ;
    *transition: all 0.5s ease;
    width: 60px;
    height: 50px;
}

/* Üzerine gelince (hover): Renkli, keskin ve parlak */
.ok:hover img {
    filter: grayscale(0%) contrast(140%) brightness(100%) saturate(140%) drop-shadow(0px 8px 20px rgba(0, 206, 209, 0.7))!important;
    animation-name: elementor-animation-buzz;
    animation-duration: .15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* TİTREK OK */
@keyframes intense-vibrate {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-2px, -2px); }
  20% { transform: translate(2px, -2px); }
  30% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, 2px); }
  50% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, -2px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, 2px); }
  90% { transform: translate(-2px, -2px); }
  100% { transform: translate(0, 0); }
}

/* Uygulanacak Görsel Sınıfı */
.buzz-image {
  /* Görselin etrafındaki boşlukları ve yerleşimi kontrol eder */
  display: inline-block; /* Veya block, tasarımına göre */
  max-width: 100%;       /* Duyarlı tasarım için */
  height: auto;
  cursor: pointer;       /* Üzerine gelinebilir hissi verir */
  
  /* Tarayıcı Optimizasyonu (Performans için) */
  will-change: transform;
}

.intense-buzz-image:hover {
  animation: intense-vibrate 0.1s linear infinite;
}

/* Animasyonun Tanımı (Titreme Hareketleri) */
@keyframes buzz-vibration {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-2px, -2px); }
  20% { transform: translate(2px, -2px); }
  30% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, 2px); }
  50% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, -2px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, 2px); }
  90% { transform: translate(-2px, -2px); }
  100% { transform: translate(0, 0); }
}

/* ID Seçicisi ile Görsel Tanımı */
#special-buzz-image {
  display: inline-block; /* Yerleşimin bozulmaması için */
  transition: transform 0.2s ease;
  cursor: pointer;
  text-align: center;
  
  /* Titreme sırasında görselin netliğini korumak için */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Mouse ile üzerine gelindiğinde (Hover) */
#special-buzz-image:hover {
  /* linear: sarsıntının ritmik kalmasını sağlar */
  /* infinite: mouse üzerindeyken sürekli titrer */
  animation: buzz-vibration 0.1s linear infinite;
    filter: brightness(1) drop-shadow(0 0 15px rgba(0, 212, 255, 0.7));
    opacity: 1 !important;
}

/* SARKAÇ */
/* Sarkaç (Pendulum) Sallanma Animasyonu */
@keyframes pendulum-swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }   /* Sağa hafif salınım */
  50% { transform: rotate(0deg); }   /* Merkeze dönüş */
  75% { transform: rotate(-3deg); }  /* Sola hafif salınım */
  100% { transform: rotate(0deg); }  /* Merkeze dönüş */
}

/* Class Tanımı */
.sway-pendant {
  display: inline-block;
  cursor: pointer;
  animation: pendulum-swing 8s ease-in-out infinite;
 
  /* PÜF NOKTASI: Dönme merkezini üst orta nokta yapıyoruz */
  /* Bu sayede görsel alt taraftan, bir ipe asılıymış gibi sallanır */
  transform-origin: top center; 

  /* Geçişin yumuşaklığı */
  transition: transform 0.8s ease-out;

  /* Performans optimizasyonu */
  will-change: transform;
  backface-visibility: hidden;
}

/* Mouse Over (Hover) Durumu */
.sway-pendant:hover {
  /* 2s: Daha ağır ve gerçekçi bir sallanma için süreyi uzattım */
  /* ease-in-out: Sallanma uç noktalarda yavaşlar, daha doğal durur */
  *animation: pendulum-swing 9s ease-in-out infinite;
  /* Animasyonu durdurur */
  animation-play-state: paused; 
 
  /* Alternatif: Animasyonu tamamen kapatıp merkeze çekmek istersen:
     *animation: none;
     *transform: rotate(0deg); */
     
  /* Hafif bir parlaklık ekleyerek "seçildi" hissi verebilirsin */
  filter: brightness(1.1);
}