/* --- Google Fonts --- */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Poppins:wght@300;400;600&display=swap');



/* --- Değişkenler --- */

:root {

    --primary: #4a5d4e;    /* Adaçayı yeşili */

    --accent: #d4a373;     /* Toprak tonu */

    --bg-color: #fefae0;   /* Krem / Süt beyazı - Logolarla uyumlu ton */

    --text-dark: #283618;  /* Koyu Zeytin */

    --white: #ffffff;

}



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



body, html {

    height: 100%;

    font-family: 'Poppins', sans-serif;

    background-color: var(--white);

    color: var(--text-dark);

    line-height: 1.6;

    overflow-x: hidden;

    scroll-behavior: smooth;

}



.container { width: 95%; max-width: 1400px; margin: 0 auto; }



/* --- Üst Bar ve Navigasyon (Logolarla Bütünleşik) --- */

.top-bar { 

    padding: 12px 0; 

    background-color: var(--bg-color); /* Üst bar rengi artık logoların fonuyla aynı */

    border-bottom: 1px solid rgba(0,0,0,0.05); 

    position: sticky; 

    top: 0; 

    z-index: 2000; 

}



.header-flex { display: flex; justify-content: space-between; align-items: center; }



.logo-text { 

    font-family: 'Playfair Display', serif; 

    font-size: 1.6rem; 

    font-weight: bold; 

    color: var(--primary); 

    letter-spacing: 2px; 

}



.main-nav { margin: 0 40px; }

.nav-links { list-style: none; display: flex; gap: 35px; align-items: center; }



/* Sağ Üst Logo Grubu */

.logo-area-right {

    display: flex;

    align-items: center;

    gap: 20px; /* Logolar arası boşluk */

}



.top-logo {

    height: 55px; /* Logoların yüksekliği */

    width: auto;

    transition: transform 0.3s ease;

    /* Logolar fonla birleştiği için ekstra arka plan ve padding kaldırıldı */

}



.top-logo:hover {

    transform: scale(1.08); /* Hafif büyüme efekti */

}



/* DROPDOWN SABİTLEME */

.dropdown {

    position: relative; 

}



.nav-links li a { 

    text-decoration: none; 

    color: var(--text-dark); 

    font-weight: 600; 

    font-size: 0.95rem; 

    transition: color 0.3s; 

    padding: 15px 0; 

    display: block; 

}



.nav-links li a:hover { color: var(--accent); }



/* --- Dropdown İçerik Ayarları --- */

.dropdown-content { 

    display: none; 

    position: absolute; 

    top: 100%; 

    left: 50%; 

    transform: translateX(-50%) translateY(10px); 

    background-color: var(--white); 

    min-width: 220px; 

    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 

    border-radius: 8px; 

    padding: 15px 0; 

    z-index: 3000; 

    border-top: 3px solid var(--accent); 

    opacity: 0; 

    transition: all 0.3s ease; 

}



.dropdown-content a { 

    color: var(--text-dark) !important; 

    padding: 12px 25px !important; 

    font-size: 0.85rem !important; 

    font-weight: 400 !important;

    text-align: left;

}



.dropdown:hover .dropdown-content { 

    display: block; 

    opacity: 1; 

    transform: translateX(-50%) translateY(0); 

}



.dropdown-content a:hover {

    background-color: #f9f9f9;

    color: var(--primary) !important;

}



/* --- Slogan Alanı --- */

.slogan-area { 

    text-align: center; 

    padding: 100px 20px; 

    /* kapak.png -> kapak.webp güncellendi */

    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('/static/img/kapak.webp') center/cover no-repeat; 

    border-bottom: 4px solid var(--accent); 

}

.slogan-area h2 { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--primary); font-style: italic; }



/* --- Ana Sayfa: Split Layout --- */

.story-split { display: flex; height: 75vh; width: 100%; }

.split-side { flex: 1; position: relative; text-decoration: none; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }

.split-side:hover { flex: 1.5; }

/* secim1.png -> secim1.webp güncellendi */

.peynir-side { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/static/img/secim1.webp') center/cover; border-right: 4px solid var(--white); }

/* secim2.png -> secim2.webp güncellendi */

.yoresel-side { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/static/img/secim2.webp') center/cover; }

.overlay-content { text-align: center; color: var(--white); z-index: 2; }

.overlay-content h3 { font-family: 'Playfair Display', serif; font-size: 3.5rem; letter-spacing: 8px; }

.divider { width: 60px; height: 3px; background: var(--accent); margin: 20px auto; }

.btn-discover { border: 1px solid var(--white); padding: 12px 30px; color: var(--white); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; display: inline-block; }

.btn-discover:hover { background: var(--white); color: var(--primary); transform: scale(1.05); }



/* --- Alt Sayfalar Tasarımı --- */

.sub-page .intro-text { padding: 60px 0; text-align: center; }

.sub-page .intro-text h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: var(--primary); }

.story-header { height: 40vh; display: flex; align-items: center; justify-content: center; color: var(--white); text-align: center; }

/* secim1.png -> secim1.webp güncellendi */

.peynir-header { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/img/secim1.webp') center/cover; }

/* secim2.png -> secim2.webp güncellendi */

.yoresel-header { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/img/secim2.webp') center/cover; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding-bottom: 80px; }

.product-card { background: #fdfdfd; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.05); text-align: center; transition: 0.3s; }

.product-card:hover { transform: translateY(-8px); }

.product-card img { width: 100%; height: 250px; object-fit: cover; }

.back-home { text-align: center; padding: 40px 0 100px; }

.back-home .btn-discover { color: var(--primary); border-color: var(--primary); }



/* --- Video Bölümü --- */

.video-section { padding: 100px 0; background-color: #f9f9f9; text-align: center; }

.video-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary); margin-bottom: 50px; }

.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.video-wrapper { position: relative; border-radius: 20px; overflow: hidden; background: #000; transition: 0.6s; }

.video-wrapper:hover { transform: scale(1.03); }

.video-wrapper video { width: 100%; height: 450px; object-fit: cover; opacity: 0.85; transition: 0.5s; }

.video-wrapper:hover video { opacity: 1; }

.video-wrapper span { position: absolute; bottom: 30px; left: 30px; color: var(--white); background: rgba(74, 93, 78, 0.85); padding: 10px 25px; border-radius: 30px; backdrop-filter: blur(8px); font-weight: 600; transition: 0.4s; }

.video-wrapper:hover span { background: var(--accent); transform: translateX(10px); }



/* --- PROFESYONEL FOOTER TASARIMI --- */

.main-footer {

    background-color: var(--primary);

    color: var(--bg-color);

    padding: 80px 0 20px;

}

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }

.footer-col h3.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--white); margin-bottom: 20px; letter-spacing: 2px; }

.footer-col h4 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--accent); margin-bottom: 25px; }

.footer-col p { font-size: 0.95rem; margin-bottom: 15px; opacity: 0.9; }

.footer-col i { margin-right: 10px; color: var(--accent); }

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 12px; }

.footer-col ul li a { text-decoration: none; color: var(--bg-color); font-size: 0.9rem; transition: 0.3s; }

.footer-col ul li a:hover { color: var(--accent); padding-left: 5px; }

.social-icons { display: flex; gap: 15px; margin-top: 20px; }

.social-icons a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; border-radius: 50%; transition: 0.3s; }

.social-icons a:hover { background: var(--accent); transform: translateY(-5px); }

.footer-bottom { text-align: center; padding-top: 30px; font-size: 0.85rem; opacity: 0.7; }



/* --- Mobil Uyumluluk --- */

@media (max-width: 768px) {

    .header-flex { flex-direction: column; gap: 15px; }

    .nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }

    .logo-area-right { gap: 10px; }

    .top-logo { height: 40px; }

    .story-split { flex-direction: column; height: auto; }

    .split-side { height: 350px; }

    .video-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 40px; }

    .dropdown-content { position: static; transform: none; width: 100%; opacity: 1; display: none; box-shadow: none; border-top: none; }

    .dropdown:hover .dropdown-content { display: block; transform: none; }

}



/* --- Hakkımızda Split Layout --- */

.about-split-container { display: flex; min-height: calc(100vh - 80px); width: 100%; }

.about-left-text { flex: 1; background-color: var(--white); display: flex; align-items: center; justify-content: center; padding: 80px; }

.about-text-wrapper { max-width: 600px; }

.about-text-wrapper .pre-title { color: var(--accent); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 10px; }

.about-text-wrapper h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; color: var(--primary); }

.story-content p { margin-bottom: 25px; font-size: 1.1rem; line-height: 1.8; color: var(--text-dark); }

.about-right-videos { flex: 1; display: flex; flex-direction: column; }

.about-video-frame { flex: 1; position: relative; overflow: hidden; border-bottom: 2px solid var(--white); }

.about-video-frame video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); transition: 0.5s; }

.about-video-frame:hover video { filter: brightness(1); }



@media (max-width: 992px) {

    .about-split-container { flex-direction: column; }

    .about-left-text { padding: 40px 20px; }

    .about-video-frame { height: 300px; }

}



/* --- Sütün Evrimi: Dijital Müze --- */

.museum-page { position: relative; min-height: 100vh; background: transparent !important; overflow-x: hidden; padding-bottom: 150px; }

body:has(.museum-page) { background-color: #fdfaf5 !important; }

.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }

#bg-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75) saturate(1.2) contrast(1.05); }

.museum-intro { text-align: center; padding: 120px 20px 80px; position: relative; z-index: 1; }

.museum-intro h1 { font-family: 'Playfair Display', serif; font-size: 4rem; color: #4a5d4e; text-shadow: 0px 2px 10px rgba(255,255,255,0.8); letter-spacing: 6px; margin-bottom: 15px; }

.museum-intro p { color: #5d4037; font-weight: 500; font-size: 1.1rem; max-width: 600px; margin: 0 auto; background: rgba(255, 255, 255, 0.4); padding: 5px 15px; border-radius: 20px; display: inline-block; }

.museum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 40px; max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }

.wooden-frame { position: relative; background: linear-gradient(135deg, #d7ccc8 0%, #bcaaa4 50%, #d7ccc8 100%); padding: 15px; border: 3px solid #8d6e63; border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }

.wooden-frame:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 25px 50px rgba(0,0,0,0.2); border-color: #a1887f; }

.wooden-frame video { width: 100%; display: block; border-radius: 2px; filter: brightness(1.05); }

.frame-label { margin-top: 15px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: #5d4037; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }



@media (max-width: 850px) {

    .museum-grid { grid-template-columns: 1fr; padding: 0 30px; }

    .museum-intro h1 { font-size: 2.5rem; }

}



/* Katalog Sayfası Tasarımı */

.catalog-card {

    background: #fff;

    padding: 40px 30px;

    border-radius: 15px;

    text-align: center;

    text-decoration: none;

    color: var(--text-dark);

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: all 0.4s ease;

    border: 1px solid rgba(0,0,0,0.02);

}



.catalog-card:hover {

    transform: translateY(-10px);

    border-color: var(--accent);

}



.card-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }

.catalog-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 10px; }

.btn-text { display: block; margin-top: 20px; color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; }



.marka-minimal-card {

    background: var(--bg-color);

    padding: 25px;

    border-radius: 10px;

    text-align: center;

    text-decoration: none;

    color: var(--primary);

    border-bottom: 3px solid transparent;

    transition: 0.3s;

}



.marka-minimal-card:hover {

    background: #fff;

    border-bottom-color: var(--accent);

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}



/* Katalog Geniş Menü Ayarı */

.mega-menu {

    min-width: 450px !important; /* İki sütun için genişlik */

    display: none;

    flex-direction: row;

    gap: 20px;

    padding: 20px !important;

}



.dropdown:hover .mega-menu {

    display: flex; /* Hover durumunda yan yana getir */

}



.dropdown-column {

    flex: 1;

}



.dropdown-column h4 {

    font-family: 'Playfair Display', serif;

    color: var(--accent);

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;

    padding-left: 25px;

    border-left: 3px solid var(--accent);

}



/* Mobil için alt alta getir */

@media (max-width: 768px) {

    .mega-menu {

        min-width: 100% !important;

        flex-direction: column;

    }

}



/* Mola Sayfası Split Layout */

.mola-split-container {

    display: flex;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto 100px;

    gap: 40px;

    padding: 0 20px;

}



.mola-side {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 40px;

}



.mola-frame {

    margin: 0 !important; /* Grid dışı kullanım için */

    width: 100%;

}



.mola-frame video {

    border-radius: 4px;

    width: 100%;

    height: 400px;

    object-fit: cover;

}



/* Hayali Orta Çizgi Efekti (Ekran genişse) */

@media (min-width: 769px) {

    .mola-split-container {

        position: relative;

    }

    .mola-split-container::after {

        content: '';

        position: absolute;

        left: 50%;

        top: 0;

        bottom: 0;

        width: 1px;

        background: rgba(74, 93, 78, 0.1); /* Çok hafif hayali çizgi */

        transform: translateX(-50%);

    }

}



@media (max-width: 768px) {

    .mola-split-container {

        flex-direction: column;

    }

}



.story-content p, .intro-text p {

    text-align: justify; /* Metinleri iki yana yaslar, daha derli toplu durur */

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



/* --- MOBİL ÖZEL AYARLAR (768px ve altı) --- */

@media (max-width: 768px) {

    /* 1. Header ve Logo Düzenlemesi */

    .header-flex {

        flex-direction: column;

        gap: 15px;

    }

    

    .logo-area-right {

        justify-content: center;

        gap: 10px;

    }



    .top-logo {

        height: 40px; /* Mobilde logoları biraz küçültelim */

    }



    /* 2. Mega Menü (Katalog) Fix */

    .mega-menu {

        position: static !important;

        min-width: 100% !important;

        flex-direction: column !important;

        opacity: 1 !important;

        visibility: visible !important;

        display: none; /* Mobilde varsayılan olarak gizle */

        box-shadow: none;

        padding: 10px !important;

    }



    /* Menüye tıklandığında açılması için (Basit bir çözüm) */

    .dropdown:active .mega-menu, 

    .dropdown:focus .mega-menu {

        display: flex;

    }



    /* 3. Ana Sayfa Split Ekran */

    .story-split {

        height: auto; /* Sabit yüksekliği mobilde kaldıralım */

        flex-direction: column;

    }



    .split-side {

        height: 300px; /* Her bir kutu mobilde 300px yüksekliğinde olsun */

    }



    /* 4. Katalog ve Ürün Kartları */

    .product-grid {

        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Mobilde yan yana 2 kart sığsın */

        gap: 15px;

    }



    .catalog-card {

        padding: 20px 15px;

    }



    /* 5. Yazı Boyutları */

    h1 { font-size: 2rem !important; }

    h2 { font-size: 1.8rem !important; }

}