/* Google Fonts Import: Serif (Playfair Display) ve Sans-Serif (Inter) Uyumu */

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



:root {

    --font-heading: 'Playfair Display', serif;

    --font-body: 'Inter', sans-serif;

    --color-dark: #0a0a0a;

    --color-light: #ffffff;

    --color-light-alt: #f8f9fa;

    --color-muted: #6c757d;

    --spacing-xl: 120px;

    --spacing-md: 60px;

}



body {

    font-family: var(--font-body);

    color: var(--color-dark);

    background-color: var(--color-light);

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* -------------------------------------

   TİPOGRAFİ VE ORTAK SINIFLAR

-------------------------------------- */

.editorial-heading {

    font-family: var(--font-heading);

    letter-spacing: -0.02em;

    font-weight: 400;

}



.subtext {

    font-size: 1.15rem;

    color: var(--color-muted);

    font-weight: 300;

    line-height: 1.8;

}



.tracking-widest {

    letter-spacing: 0.15em;

    font-size: 0.75rem;

    font-weight: 600;

}



.bg-light-alt {

    background-color: var(--color-light-alt);

}



.module-section {

    padding: var(--spacing-xl) 0;

}



/* -------------------------------------

   MEGA TEXT BANNER (Ekran Görüntüsü 1)

-------------------------------------- */

.mega-text-banner {

    padding: 160px 20px 140px;

    background-color: var(--color-light);

}



.mega-text-banner .display-title {

    font-family: var(--font-heading);

    font-size: clamp(3.5rem, 8vw, 8rem); /* Ekran büyüdükçe devasa olur */

    line-height: 1;

    letter-spacing: -0.04em;

    font-weight: 400;

    text-align: center;

    color: var(--color-dark);

    margin: 0 auto;

    max-width: 1400px;

}



/* -------------------------------------

   ÜRÜN / HİZMET SERGİLEME (Ekran Görüntüsü 3)

-------------------------------------- */

.product-img {

    border-radius: 0; /* Mimari/Editorial tasarımlarda köşeler genellikle sivridir */

    box-shadow: 0 20px 40px rgba(0,0,0,0.06);

}



/* -------------------------------------

   PARALLAX BANNER

-------------------------------------- */

.parallax-banner {

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    min-height: 60vh;

    display: flex;

    align-items: center;

}



/* -------------------------------------

   ACCORDION (SSS) ÖZELLEŞTİRMESİ

-------------------------------------- */

.editorial-accordion .accordion-button:not(.collapsed) {

    color: var(--color-dark);

    background-color: transparent;

    box-shadow: none;

}

.editorial-accordion .accordion-button:focus {

    box-shadow: none;

    border-color: transparent;

}

.editorial-accordion .accordion-button::after {

    filter: grayscale(100%);

}



/* -------------------------------------

   DİĞER ÖZELLEŞTİRMELER

-------------------------------------- */

.icon-filtered {

    filter: invert(10%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);

    opacity: 0.8;

}



.service-card img {

    transition: transform 0.5s ease;

}

.service-card:hover img {

    transform: scale(1.02);

}

.service-card {

    overflow: hidden;

}



/* Metin Editöründen Gelen HTML (Standart Sayfa) Tasarımı */

.editorial-content {

    max-width: 800px;

    margin: 0 auto;

    font-size: 1.1rem;

    color: #444;

}

.editorial-content h1, .editorial-content h2, .editorial-content h3 {

    font-family: var(--font-heading);

    color: var(--color-dark);

    margin-top: 2.5rem;

    margin-bottom: 1rem;

}

/* -------------------------------------
   YENİ ÇİFT KATMANLI HEADER STİLLERİ
-------------------------------------- */
.top-nav-link {
    color: #555555;
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}
.top-nav-link:hover, .top-nav-link.active {
    color: #000000;
    font-weight: 700;
}
.bottom-nav-link {
    color: #ffffff;
    font-weight: 400;
    font-size: 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}
.bottom-nav-link:hover {
    color: #4bc0c8; /* Açık mavi hover tonu */
}
.bottom-nav .dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 6px;
}

/* -------------------------------------
   YENİ ÇİFT KATMANLI HEADER STİLLERİ
-------------------------------------- */
.top-nav-link {
    color: #555555;
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}
.top-nav-link:hover, .top-nav-link.active {
    color: #000000;
    font-weight: 700;
}

/* Mega Menünün Tam Ekran Olması İçin Gerekenler */
.site-header {
    position: relative;
    z-index: 1030;
}
.header-top {
    position: relative; /* Menünün sınırını beyaz alan olarak belirler */
}
.top-nav .nav-item.dropdown {
    position: static; /* Dropdown'ın ebeveyn sınırından çıkıp %100 genişliğe ulaşması için şart */
}

/* Mavi Alt Menü Alanı (Mega Menu) */
.mega-blue-menu {
    position: absolute;
    top: 100%; /* SİHİRLİ KOD: Tam olarak beyaz header'ın bitiş çizgisine yapıştırır */
    left: 0;
    right: 0;
    width: 100%;
    background-color: #002b49;
    border: none;
    border-radius: 0;
    padding: 20px 0;
    margin: 0 !important;
}

/* GÖRÜNMEZ KÖPRÜ: Farenin boşlukta kaybolup menüyü kapatmasını engeller */
.mega-blue-menu::before {
    content: '';
    position: absolute;
    top: -40px; 
    left: 0;
    width: 100%;
    height: 40px;
    background: transparent;
}

/* Mavi Alanın İçindeki Linkler */
.mega-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}
.mega-link:hover {
    color: #4bc0c8;
}

/* Sadece Üzerine Gelince (Hover) Mavi Alanın Açılması */
@media (min-width: 992px) {
    .top-nav .dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeIn 0.2s ease;
    }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}