:root {
    --siyah: #0a0a0a;
    --koyu-gri: #141414;
    --altin: #d4af37;
    --altin-saydam: rgba(212, 175, 55, 0.92);
    --beyaz: #ffffff;
    --acik-gri: #cccccc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background-color: var(--siyah); color: var(--acik-gri); font-family: 'Montserrat', sans-serif; overflow-x: hidden; width: 100%; }
a { text-decoration: none; }

/* HEADER */
#ana-header {
    position: fixed; top: 0; width: 100%; background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 9999; border-bottom: 1px solid rgba(212, 175, 55, 0.2); transition: all 0.3s ease;
}
.header-kapsayici { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; max-width: 1400px; margin: 0 auto; }
.gecici-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: var(--beyaz); font-weight: 700; letter-spacing: 2px; }
.gecici-logo span { color: var(--altin); }
.ana-menu { display: flex; gap: 30px; }
.ana-menu a { color: var(--beyaz); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; transition: 0.3s; }
.ana-menu a:hover { color: var(--altin); }
.hamburger { display: none; color: var(--altin); font-size: 2rem; cursor: pointer; }

/* 1. HERO SLIDER */
.hero-slider-alani { position: relative; height: 100vh; overflow: hidden; }
.slayt {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    opacity: 0; transition: opacity 1s ease-in-out; display: flex; align-items: center; padding: 0 5%;
}
.slayt.aktif { opacity: 1; z-index: 2; }
.hero-icerik { max-width: 800px; margin-top: 50px; }
.hero-baslik { font-family: 'Oswald', sans-serif; font-size: 4.5rem; color: var(--beyaz); line-height: 1.1; margin-bottom: 15px; }
.hero-baslik span { color: var(--altin); }
.hero-alt-baslik { display: block; font-size: 1.5rem; color: var(--beyaz); margin-bottom: 15px; letter-spacing: 2px; }
.hero-icerik p { font-size: 1.2rem; margin-bottom: 40px; color: var(--acik-gri); }
.btn-gold-cerceve { display: inline-block; padding: 15px 40px; border: 2px solid var(--altin); color: var(--altin); font-weight: 700; border-radius: 30px; transition: 0.3s; }
.btn-gold-cerceve:hover { background: var(--altin); color: var(--siyah); }

/* Slider Okları */
.slayt-oklar { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 3%; transform: translateY(-50%); z-index: 5; pointer-events: none; }
.ok { pointer-events: auto; color: rgba(255,255,255,0.5); font-size: 3rem; cursor: pointer; transition: 0.3s; }
.ok:hover { color: var(--altin); }

/* 2. HAKKIMIZDA (YIRTIK KAĞIT DOKUSU) */
.hakkimizda-alani { 
    padding: 120px 5%; 
    background-color: #fcfcfc; /* Beyazımsı Kağıt Rengi */
    background-image: url('https://www.transparenttextures.com/patterns/dust.png'); /* İnce kağıt/toz dokusu */
    color: var(--siyah);
    /* Yırtık efekti veren asimetrik kesim */
    clip-path: polygon(0% 2%, 5% 0%, 10% 3%, 15% 0%, 20% 2%, 25% 0%, 30% 3%, 35% 0%, 40% 2%, 45% 0%, 50% 3%, 55% 0%, 60% 2%, 65% 0%, 70% 3%, 75% 0%, 80% 2%, 85% 0%, 90% 3%, 95% 0%, 100% 2%, 100% 98%, 95% 100%, 90% 97%, 85% 100%, 80% 98%, 75% 100%, 70% 97%, 65% 100%, 60% 98%, 55% 100%, 50% 97%, 45% 100%, 40% 98%, 35% 100%, 30% 97%, 25% 100%, 20% 98%, 15% 100%, 10% 97%, 5% 100%, 0% 98%);
    margin-top: -20px; /* Kesimi yukarı yapıştırır */
    position: relative;
    z-index: 10;
}
.hakkimizda-kapsayici { display: flex; gap: 50px; max-width: 1400px; margin: 0 auto; align-items: center; }

/* 3D Görsel Slaytı */
.hakkimizda-gorseller-3d { width: 50%; height: 400px; position: relative; perspective: 1000px; }
.kutu-gorsel { position: absolute; width: 80%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: -10px 10px 30px rgba(0,0,0,0.3); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* JS ile değiştirilecek CSS sınıfları (Ön, Orta, Arka) */
.on-katman { z-index: 3; transform: scale(1) translateX(0); opacity: 1; }
.orta-katman { z-index: 2; transform: scale(0.9) translateX(40px) translateY(-20px); opacity: 0.7; }
.arka-katman { z-index: 1; transform: scale(0.8) translateX(80px) translateY(-40px); opacity: 0.3; }

.hakkimizda-metin { width: 50%; }
.baslik-efekt { position: relative; margin-bottom: 40px; }
.baslik-efekt h2 { font-family: 'Oswald', sans-serif; font-size: 3.5rem; line-height: 1; }
.hakkimizda-metin .baslik-efekt h2 { color: var(--siyah); }
.baslik-efekt span { font-size: 1.2rem; color: var(--altin); font-weight: 300; letter-spacing: 3px; }
.hakkimizda-metin p { margin-bottom: 20px; font-size: 1.1rem; line-height: 1.6; color: #444; }

/* 3. HİZMETLER */
.hizmetler-alani { padding: 100px 5%; background-color: var(--koyu-gri); margin-top: -20px; }
.merkez-baslik { text-align: center; }
.merkez-baslik h2 { color: var(--beyaz); }
.hizmet-izgarasi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; }
.hizmet-karti { position: relative; overflow: hidden; border-radius: 10px; height: 350px; cursor: pointer; border: 2px solid transparent; transition: 0.3s; }
.hizmet-karti:hover { border-color: var(--altin); }
.hizmet-karti img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hizmet-isim { position: absolute; bottom: 20px; left: 20px; color: var(--beyaz); font-family: 'Oswald', sans-serif; font-size: 2rem; z-index: 2; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }
.hizmet-katman { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--altin-saydam); display: flex; align-items: center; justify-content: center; padding: 30px; opacity: 0; transition: opacity 0.4s ease; z-index: 3; }
.hizmet-katman p { color: var(--siyah); font-size: 1.2rem; font-weight: 700; text-align: center; transform: translateY(20px); transition: transform 0.4s ease; }
.hizmet-karti:hover img, .hizmet-karti:active img { transform: scale(1.1); }
.hizmet-karti:hover .hizmet-katman, .hizmet-karti:active .hizmet-katman { opacity: 1; }
.hizmet-karti:hover .hizmet-katman p, .hizmet-karti:active .hizmet-katman p { transform: translateY(0); }

/* 4. HARİTA & FOOTER */
.iletisim-alani iframe { width: 100%; height: 400px; border: none; display: block; filter: grayscale(100%) invert(90%); }
footer { background-color: var(--siyah); padding: 50px 5%; border-top: 1px solid #222; }
.footer-icerik { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-bottom: 30px; }
.footer-menu { display: flex; gap: 20px; }
.footer-menu a { color: var(--beyaz); font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
.footer-menu a:hover { color: var(--altin); }
.sosyal-medya { text-align: center; }
.sosyal-medya span { display: block; color: var(--altin); font-weight: 700; margin-bottom: 15px; }
.ikonlar a { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: var(--beyaz); color: var(--siyah); border-radius: 50%; margin: 0 10px; font-size: 1.2rem; transition: 0.3s; }
.ikonlar a:hover { background: var(--altin); }

/* =========================================
   SCROLL REVEAL (KAYDIRDIKÇA BELİRME) ANİMASYONU
   ========================================= */
.animasyon-bekliyor {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animasyon-aktif {
    opacity: 1;
    transform: translateY(0);
}
/* Slayt içindeki yazılar zaten görünür olduğundan onu hariç tutalım */
.slayt.aktif .animasyon-bekliyor { opacity: 1; transform: translateY(0); }

/* =========================================
   MOBİL UYUM
   ========================================= */
@media (max-width: 768px) {
    .header-kapsayici { flex-direction: column; padding: 15px 20px; }
    .logo-alani { margin-bottom: 10px; }
    .hamburger { display: block; }
    .ana-menu { display: none; width: 100%; flex-direction: column; background: rgba(10, 10, 10, 0.95); text-align: center; padding: 20px 0; margin-top: 15px; border-top: 1px solid var(--altin); }
    .ana-menu.aktif { display: flex; }
    .ana-menu a { padding: 15px 0; border-bottom: 1px solid #222; width: 100%; }
    
    .hero-baslik { font-size: 3rem; }
    .hero-icerik { margin-top: 80px; text-align: center; }
    
    .hakkimizda-kapsayici { flex-direction: column; }
    .hakkimizda-gorseller-3d, .hakkimizda-metin { width: 100%; }
    .hakkimizda-gorseller-3d { height: 300px; margin-bottom: 30px; }
    .kutu-gorsel { width: 90%; }
    
    .hakkimizda-alani { clip-path: polygon(0% 1%, 10% 2%, 20% 0%, 30% 2%, 40% 0%, 50% 2%, 60% 0%, 70% 2%, 80% 0%, 90% 2%, 100% 1%, 100% 99%, 90% 98%, 80% 100%, 70% 98%, 60% 100%, 50% 98%, 40% 100%, 30% 98%, 20% 100%, 10% 98%, 0% 99%); }
    .footer-menu { flex-direction: column; text-align: center; gap: 15px; }
}