:root {
    --gold: #e5c05c;
    --gold-dark: #b89436;
    --gold-glow: rgba(229, 192, 92, 0.6);
    --dark: #050505;
    --text: #f0f0f0;
    --glass-bg: rgba(10, 10, 10, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    background-color: var(--dark);
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Yükleme Ekranı (Preloader) --- */
.preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    animation: fadeOutLoad 1s 1s forwards;
}

.loader-text {
    font-family: 'Cinzel', serif; color: var(--gold); font-size: 2rem;
    letter-spacing: 5px; animation: pulseText 1s infinite alternate;
}

.loader-bar {
    width: 200px; height: 3px; background: rgba(255,255,255,0.1);
    margin-top: 20px; position: relative; overflow: hidden;
}

.loader-bar::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background: var(--gold);
    animation: loadBar 1s forwards;
}

/* --- Arka Plan --- */
.bg-image {
    position: fixed; top: -5%; left: -5%; width: 110%; height: 110%;
    background: url('https://wallpapers.com/images/hd/metin2-lycan-fighting-k8k4k8k4k8k4k8k4.jpg') no-repeat center center/cover;
    z-index: -2; filter: contrast(1.1) brightness(0.8);
    animation: bgPan 30s infinite alternate ease-in-out;
}

.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%);
    z-index: -1;
}

/* --- Ana İçerik --- */
.main-content {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    padding: 20px; z-index: 1;
}

/* --- Başlık (Orijinal Font + Cyberpunk Glitch Efekti) --- */
.logo-container { margin-bottom: 40px; animation: slideUp 1s 1.2s both; }

.glitch-title {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    color: #d4af37; /* Senin Orijinal Rengin */
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5); /* Senin Orijinal Gölgen */
    letter-spacing: 5px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Cyberpunk Yırtılma Katmanları */
.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0.8;
}

/* Kırmızımtırak sağa yırtılma */
.glitch-title::before {
    left: 3px;
    text-shadow: -2px 0 rgba(255, 0, 0, 0.7);
    animation: glitch-anim-1 4s infinite linear alternate-reverse;
}

/* Camgöbeği (Cyan) sola yırtılma */
.glitch-title::after {
    left: -3px;
    text-shadow: 2px 0 rgba(0, 255, 255, 0.7);
    animation: glitch-anim-2 4s infinite linear alternate-reverse;
}

.subtitle {
    font-size: 1.2rem; letter-spacing: 6px; color: #ddd; font-weight: 300;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

/* --- Butonlar --- */
.buttons-container {
    display: flex; gap: 25px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 80px; animation: slideUp 1s 1.4s both;
}

.btn {
    text-decoration: none; padding: 18px 45px;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem;
    border-radius: 4px; display: flex; align-items: center; gap: 12px;
    transition: 0.4s; letter-spacing: 2px; position: relative; overflow: hidden;
}

.btn-glass {
    background: rgba(255,255,255,0.03); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
}

.btn-glass:hover {
    background: rgba(229, 192, 92, 0.1); border-color: var(--gold);
    color: var(--gold); box-shadow: 0 0 20px rgba(229, 192, 92, 0.2);
    transform: translateY(-3px);
}

.btn-primary {
    background: linear-gradient(45deg, #8a6d21, var(--gold)); color: #000;
    border: none; box-shadow: 0 0 25px var(--gold-glow);
}

.btn-primary:hover {
    box-shadow: 0 0 40px var(--gold); transform: translateY(-3px) scale(1.02);
}

.heartbeat { animation: heartbeatBtn 2s infinite; }

/* --- Premium Hover Kart Çerçeveleri --- */
.features-grid {
    display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
    max-width: 1100px;
}

.feature-card-wrapper {
    position: relative; width: 300px; 
    border-radius: 12px; animation: slideUp 1s both;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.feature-card {
    position: relative; background: var(--glass-bg);
    backdrop-filter: blur(20px); height: 100%; border-radius: 12px;
    padding: 40px 25px; z-index: 2; transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.05); overflow: hidden;
}

.feature-card-wrapper:hover { transform: translateY(-15px) scale(1.08); z-index: 10; }

.feature-card-wrapper:hover .feature-card {
    border: 2px solid var(--gold);
    box-shadow: 0 15px 35px rgba(229, 192, 92, 0.3), inset 0 0 20px rgba(229, 192, 92, 0.1);
    background: rgba(15, 15, 15, 0.8);
}

.feature-card::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); transition: 0s; z-index: 1;
}

.feature-card-wrapper:hover .feature-card::after { left: 150%; transition: 0.8s ease-in-out; }

.icon-wrapper {
    font-size: 2.5rem; color: var(--gold); margin-bottom: 20px;
    filter: drop-shadow(0 0 10px var(--gold-glow)); transition: 0.5s ease;
    display: inline-block; position: relative; z-index: 3;
}

.feature-card-wrapper:hover .icon-wrapper {
    transform: scale(1.2) rotateY(360deg); color: #fff;
    filter: drop-shadow(0 0 15px var(--gold));
}

.feature-card h3 { 
    font-size: 1.3rem; margin-bottom: 12px; font-family: 'Cinzel', serif; 
    color: #fff; position: relative; z-index: 3; transition: 0.4s; 
}

.feature-card-wrapper:hover h3 { 
    color: var(--gold); letter-spacing: 2px; text-shadow: 0 0 10px var(--gold-glow);
}

.feature-card p { font-size: 0.9rem; color: #bbb; line-height: 1.6; position: relative; z-index: 3; }

/* --- Footer --- */
footer {
    padding: 20px; background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px); text-align: center; z-index: 10;
}
footer p { font-size: 0.85rem; color: #666; }
footer a { color: var(--gold); text-decoration: none; transition: 0.3s; }
footer a:hover { color: #fff; text-shadow: 0 0 10px var(--gold); }

/* --- KEYFRAMES (Animasyonlar) --- */
@keyframes fadeOutLoad { to { opacity: 0; visibility: hidden; } }
@keyframes loadBar { to { left: 0; } }
@keyframes pulseText { from { opacity: 0.5; } to { opacity: 1; filter: drop-shadow(0 0 10px var(--gold)); } }
@keyframes bgPan { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.1) translate(-20px, -10px); } }
@keyframes slideUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heartbeatBtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Siberpunk Yırtılma Keyframe'leri */
@keyframes glitch-anim-1 {
    0% { clip: rect(30px, 9999px, 80px, 0); transform: skew(0deg); }
    5% { clip: rect(10px, 9999px, 50px, 0); transform: skew(10deg) translate(-15px); }
    10% { clip: rect(70px, 9999px, 90px, 0); transform: skew(-10deg) translate(15px); }
    15% { clip: rect(20px, 9999px, 40px, 0); transform: skew(0deg) translate(0); }
    20% { clip: rect(50px, 9999px, 70px, 0); transform: skew(5deg) translate(-5px); }
    25% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg) translate(0); } /* Normale dön */
    100% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg) translate(0); } /* Uzun süre bekle */
}

@keyframes glitch-anim-2 {
    0% { clip: rect(60px, 9999px, 100px, 0); transform: skew(0deg); }
    5% { clip: rect(20px, 9999px, 70px, 0); transform: skew(-10deg) translate(15px); }
    10% { clip: rect(80px, 9999px, 30px, 0); transform: skew(10deg) translate(-15px); }
    15% { clip: rect(10px, 9999px, 90px, 0); transform: skew(0deg) translate(0); }
    20% { clip: rect(40px, 9999px, 20px, 0); transform: skew(-5deg) translate(5px); }
    25% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg) translate(0); } /* Normale dön */
    100% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg) translate(0); } /* Uzun süre bekle */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .glitch-title { font-size: 2.5rem; letter-spacing: 3px; }
    .subtitle { font-size: 0.9rem; letter-spacing: 3px; }
    .buttons-container { flex-direction: column; width: 90%; }
    .btn { width: 100%; justify-content: center; }
}