/* style.css - Morten Hilmer Inspired (Top Bar + Gradient Line) vFinal */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Open+Sans:wght@300;400&display=swap');

:root {
    --bg-body: #ffffff;       
    --text-main: #2c3e50;     
    --accent: #d4af37;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

body, html { 
    margin: 0; padding: 0; 
    font-family: var(--font-body); 
    color: var(--text-main); 
    background-color: var(--bg-body); 
    scroll-behavior: smooth; 
    line-height: 1.6;
}

/* =========================================
   MENÜ (NAVBAR) - 2 KATLI YAPI
   ========================================= */
nav { 
    position: absolute; 
    top: 0; left: 0; width: 100%; 
    
    /* Dikey dizilim (Üstte ikonlar, altta menü) */
    display: flex; 
    flex-direction: column;
    justify-content: center;
    
    /* İçeriği ortada 1400px'e sabitlemek için padding hesabı */
    padding: 20px max(50px, calc(50% - 700px));
    
    z-index: 999; 
    background: linear-gradient(180deg, rgba(192, 201, 204, 0.4) 0%, transparent);
    box-sizing: border-box;
}

/* --- 1. KAT: SOSYAL MEDYA (Üst Kısım) --- */
.nav-top {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* İkonları en sağa yasla */
    padding-bottom: 8px; /* Çizgiyle ara boşluk */
}

.nav-socials a {
    color: #2f3233; /* İkonlar çok parlamasın, hafif gri dursun */
    font-size: 0.9rem; /* Küçük ve kibar */
    margin-left: 15px; /* İkonlar arası boşluk */
    transition: 0.3s;
    text-decoration: none;
	opacity:0.4;
}
.nav-socials a:hover { color: #2f3233; transform: translateY(-2px);opacity:1; }


/* --- 2. KAT: ARA ÇİZGİ (Sihirli Degrade) --- */
.nav-separator {
    width: 100%;
    height: 1px; /* Çok ince zarif çizgi */
    margin-bottom: 15px; /* Menüyle ara boşluk */
    
    /* İŞTE İSTEDİĞİN EFEKT BURADA: */
    /* 90 derece (soldan sağa), şeffaftan beyaza geçiş */
    background: linear-gradient(90deg, #aa4b4b00 0%, rgba(255,255,255,0.1) 50%, rgb(21, 29, 31) 100%);
    
    opacity: 0.6; /* Çok keskin durmasın */
}


/* --- 3. KAT: ANA MENÜ (Logo ve Linkler) --- */
.nav-main {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Logo sol, Menü sağ */
    align-items: center;
}

/* LOGO */
.logo a { 
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: 2px;   
    color: #fff; text-decoration: none; text-transform: uppercase; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* MENÜ LİNKLERİ */
.menu { display: flex; gap: 30px; }
.menu a { 
    color: #7b8688; text-decoration: none; font-family: var(--font-heading);
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; 
    transition: 0.3s; opacity: 1; position: relative; padding-bottom: 5px;
}
.menu a:hover { color: #7b8688; opacity: 1;}
.menu a::after {
    content: ''; display: block; width: 0; height: 1px; background: #7b8688; 
    transition: width .3s; position: absolute; bottom: 0; left: 0;
}
.menu a:hover::after { width: 100%; }


/* =========================================
   DİNAMİK BÖLÜM YAPISI (AYNI KALDI)
   ========================================= */
.dynamic-section { position: relative; width: 100%; overflow: hidden; padding: 0; margin: 0; }
.dynamic-section.is-hero { height: 100vh; }
.dynamic-section.is-hero .bg-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dynamic-section.is-hero .section-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10; width: 90%; max-width: 1200px; color: #fff; text-shadow: 0 2px 15px rgba(0,0,0,0.5); text-align: center;
}
.dynamic-section.type-resim:not(.is-hero) { height: auto; min-height: auto; }
.dynamic-section.type-resim:not(.is-hero) .bg-media { position: relative; display: block; width: 100%; height: auto; object-fit: contain; }
.dynamic-section.type-resim:not(.is-hero) .section-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 90%; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.dynamic-section.type-video, .dynamic-section.type-youtube { height: 100vh; }
.dynamic-section.type-video .bg-media, .dynamic-section.type-youtube .bg-media { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.dynamic-section.type-video .section-content, .dynamic-section.type-youtube .section-content {
    position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 10; width: 90%; color: #fff;
}
.dynamic-section.type-renk { height: auto; min-height: 50vh; display: flex; align-items: center; justify-content: center; padding: 100px 50px; box-sizing: border-box; }
.dynamic-section.type-renk .bg-media { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 0; }
.dynamic-section.type-renk .section-content { position: relative; z-index: 10; width: 100%; max-width: 1000px; color: var(--text-main); }
.section-content h1 { font-family: var(--font-heading); font-size: 3.5rem; letter-spacing: 5px; margin-bottom: 20px; font-weight: 300; }
.section-content h2 { font-family: var(--font-heading); font-size: 2.5rem; letter-spacing: 3px; margin-bottom: 15px; }
.section-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; }
.section-content img { max-width: 100%; height: auto; border-radius: 4px; }

/* --- FOOTER --- */
footer { padding: 50px 20px; text-align: center; background: #111; font-size: 0.8rem; color: #666; letter-spacing: 1px; margin-top: auto; }
.footer-container { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.footer-logo { font-size: 1.2rem; color: #fff; letter-spacing: 2px; text-transform: uppercase; }
.footer-socials a { color: #888; margin: 0 10px; font-size: 1.2rem; transition: 0.3s; }
.footer-socials a:hover { color: #fff; }

/* --- MOBİL --- */
@media(max-width:768px){ 
    nav { padding: 20px; background: rgba(0,0,0,0.85); width: 100%; } 
    .nav-top { justify-content: center; } /* Mobilde ikonları ortala */
    .menu { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .nav-main { flex-direction: column; gap: 15px; } /* Logo üstte, menü altta olsun */
    .logo a { font-size: 1.5rem; }
    .section-content h1 { font-size: 2rem; letter-spacing: 2px; }
    .dynamic-section.type-renk { padding: 60px 20px; }
}