html {
    scroll-behavior: smooth;
}

/* Opsiyonel: Header sabit (sticky) olduğu için kaydığında başlığın 
üzerini kapatmaması için bölümlere biraz yukarıdan boşluk veriyoruz */
section[id] {
    scroll-margin-top: 100px; /* Header yüksekliğine göre ayarlayabilirsin */
}
/* Genel sıfırlama */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* DİKEY HİZALAMA BAŞLANGICI: Flex'i kaldırıp sadece block öğeler gibi davranmasını sağlıyoruz. */
    display: block; 
    /* Logo ve menüye padding uygulayarak ayırıyoruz. */
    padding: 10px 0; 
}

/* Header */
.site-header {
    background-color: #070707; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo: Ortalanmış ve üst kısım */
.logo {
    text-align: center; /* Logoyu ortalar */
    padding-bottom: 5px; /* Menüden ayırmak için alt boşluk */
    border-bottom: 1px solid #eee; /* Logo ile menü arasına ince bir çizgi çeker */
}
.logo img {
    height: 60px; 
}

/* ========================= */
/* MENÜ ALANI */
/* ========================= */

.main-nav {
    padding-top: 5px;
}

/* ANA MENÜ */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 0;
    padding: 0;
}

/* MENÜ ELEMANLARI */
.main-nav ul li {
    position: relative; /* ALT MENÜ İÇİN ŞART */
}

/* MENÜ LİNKLERİ */
.main-nav ul li a {
    text-decoration: none;
    color: #c1904c;
    font-weight: 500;
    padding: 5px 0;
    display: block;
    transition: color 0.4s ease-in-out;
}

.main-nav ul li a:hover {
    color: #c7c1b9;
}

/* ========================= */
/* DROPDOWN (ALT MENÜLER) */
/* ========================= */

/* ALT MENÜLER VARSAYILAN OLARAK KAPALI */
.main-nav .submenu,
.main-nav .submenu-right {
    display: none;
    position: absolute;
    background: #070707;
    min-width: 220px;
    top: 100%;
    left: 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    padding: 10px 0;
    z-index: 999;
}

/* SAĞA AÇILAN ALT MENÜ */
.main-nav .submenu-right {
    top: 0;
    left: 100%;
}

/* ALT MENÜ LİSTESİ */
.main-nav .submenu li,
.main-nav .submenu-right li {
    width: 100%;
}

/* ALT MENÜ LİNKLERİ */
.main-nav .submenu li a,
.main-nav .submenu-right li a {
    padding: 10px 18px;
    color: #c1904c;
    font-weight: 400;
    white-space: nowrap;
}

/* ALT MENÜ HOVER */
.main-nav .submenu li a:hover,
.main-nav .submenu-right li a:hover {
    background: #ebc382;
    color: #2e2e2e;
}

/* ========================= */
/* SADECE HOVER OLUNCA AÇ */
/* ========================= */

.main-nav li.has-submenu:hover > .submenu,
.main-nav li.has-submenu:hover > .submenu-right {
    display: block;
}

/* ========================= */
/* HERO SECTION */
/* ========================= */

.hero {
    position: relative; /* İçindeki videoyu hizalamak için şart */
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden; /* Videonun taşmasını engeller */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Videoyu alanı dolduracak şekilde kırpar ve sığdırır */
    z-index: 0; /* z-index'i 0 veya -1 yaparak içeriğin kesinlikle arkasında bırakalım */
}

.hero-content {
    position: relative;
    z-index: 2; /* İçeriği videonun üstüne çıkarır */
}

/* Karartma Katmanı (Opsiyonel ama Tavsiye Edilir) */
/* Videonun üzerindeki yazıların okunması zorsa bunu ekleyebilirsin */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.034); /* %40 siyah şeffaflık */
    z-index: 1;
}


/* Ana içerik */

/* Genel Renkler ve Tipografi */
:root {
    --text-color-dark: #333333;
    --text-color-light: #464646;
    --bg-light-beige: #fafafa; /* Alt kısımdaki hafif bej renk */
}

/* -------------------
   Üst İki Bölüm Stili
   ------------------- */
.amer-principles-minimal {
    padding-top: 100px;
    padding-bottom: 0px;
}

.intro-section, .guiding-title-section {
    max-width: 600px; /* Metin bloğunu daraltarak ortadaki boşluğu artırır */
    margin-left: auto;
    margin-right: auto;
}

/* "THE ART." Başlığı */
.title-art {
    font-size: 2.5em;
    font-weight: 400; /* Daha ince bir font */
    color: var(--text-color-dark);
    letter-spacing: 0.15em; /* Harf aralığını açar */
    margin-bottom: 20px;
    text-align: center;
}

/* Alt başlık */
.subtitle-guiding {
    font-size: 0.8em;
    color: var(--text-color-light);
    letter-spacing: 0.2em; /* Daha geniş harf aralığı */
    margin-bottom: 5px;
    margin-top: 25px;
    text-align: center;
}

/* "A COUTURE APPROACH" Başlığı */
.title-couture {
    font-size: 2em;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
}

.intro-text-centered {
    font-size: 1.1em;
    color: var(--text-color-light);
    line-height: 1.7; /* Satır aralığını açar (okunurluk için kritik) */
    font-weight: 300;
    padding: 0 10px;
    text-align: center;
}

/* Ayrım Çizgileri */
.separator-line {
    width: 600px;
    margin-top: 50px; 
    margin-bottom: 50px;
    border: none;
    border-top: 1px solid #111111;
}


/* -------------------
   Alt Üç Sütun Stili
   ------------------- */
.bg-light-beige {
    background-color: var(--bg-light-beige);
}

.principles-columns {
    margin-top: 0px;
    padding-bottom: 40px;
}

.principle-card-minimal {
    padding: 20px;
    text-align: center;
}

.principle-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-color-dark);
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.principle-text {
    font-size: 0.9em;
    color: var(--text-color-light);
    line-height: 1.8; /* Satır aralığını çok açar (Minimalist etki) */
    font-weight: 300;
}

/* Doktor Profili Bölümü */
.doctor-profile {
    background-color: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Flex Row */
.profile-row {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: stretch; /* En uzun sütunun yüksekliğini alır */
}

/* Sol Yazılar */
.profile-text {
    flex: 1; /* Eşit genişlik */
    color: var(--text-color-dark);
    line-height: 1.8;
    text-align: center;
}
/* Yazılar arasına boşluk */
.profile-text p {
    margin-bottom: 20px; /* İstediğin kadar artırabilirsin, örneğin 25px */
}

.profile-text, .profile-image {
    flex: 1;
}
.profile-text h3 {
    font-size: 2em;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Sağ Fotoğraf */
.profile-image {
    flex: 1; /* Eşit genişlik */
    text-align: center;
}

/* Sağ Fotoğraf */
.profile-image img {
    width: 100%;
    height: auto; /* Oranı koru */
    max-height: 600px; /* Maksimum yüksekliği belirle */
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
/* Responsive Mobil Düzenleme */
@media (max-width: 992px) {
    .profile-row {
        flex-direction: column;
    }

    .profile-image img {
        max-width: 80%;
        margin: 20px auto 0 auto;
    }
}
/* klinik */
.atelier-section {
    background-color: #fdfaf7;
    padding-top: 60px;
    padding-bottom: 60px;
}
/* Atölye Yazısı Ortalanması */
.atelier-text {
    max-width: 700px; /* Metin bloğunu daralt, ortalanacak */
    margin: 0 auto 40px auto; /* Ortala ve alt boşluk bırak */
    text-align: center; /* Metin ortalanır */
}

.atelier-text h3,
.atelier-text h4,
.atelier-text p {
    margin: 10px 0; /* Başlık ve paragraf arası boşlukları ayarla */
}
.atelier-text h3 {
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 500;
}

.atelier-text h4 {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--text-color-light);
    margin-bottom: 15px;
}

.atelier-text p {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color-dark);
}

/* Galeri Flex/ Grid */
.atelier-gallery {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch; /* Sol ve sağ aynı yükseklikte */
}

/* Sol 2 Foto */
.atelier-left, .atelier-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Fotoğraflar */
.atelier-left img, .atelier-right img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Sağdaki 3 foto yüksekliği ayarlamak */
.atelier-right img {
    flex: 1; /* Eşit yüksekliği sağlamak için */
}

/* Soldaki 2 foto da flex ile yüksekliği ayarlıyoruz */
.atelier-left img {
    flex: 1;
}

/* Responsive */
@media (max-width: 992px) {
    .atelier-gallery {
        flex-direction: column;
    }
    .atelier-left, .atelier-right {
        gap: 20px;
    }
}

/* Uzmanlık Alanları Bölümü */
.expertise-section {
    background-color: #ffffff;
    padding-top: 80px; /* Üstten biraz daha fazla boşluk */
    padding-bottom: 80px;
}

.expertise-text {
    max-width: 700px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.expertise-text h3 {
    font-size: 2.2em; /* CSS'indeki genel başlık yapısına uygun */
    margin-bottom: 15px;
    color: var(--text-color-dark);
    font-weight: 500;
}

.expertise-text p {
    font-size: 1.1em;
    color: var(--text-color-light);
    line-height: 1.7;
}

/* Kartlar Flex Izgara */
.expertise-cards {
    display: flex;
    gap: 25px; /* Kartlar arası boşluk */
    justify-content: center;
    flex-wrap: wrap; /* 3 karttan sonrasını alta atar */
}

.expertise-link {
    text-decoration: none;
    color: inherit;
    display: contents; /* Kutunun boyutlarını etkilememesi için en temiz yöntem */
}
.expertise-card {
    /* Her satıra 3 adet (yüzde 33.333 - boşluk payı) */
    flex: 0 1 calc(33.333% - 25px); 
    max-width: 380px; 
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform 0.4s ease; /* Hover efekti için hazırlık */
    cursor: pointer;
    
}

.expertise-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.18) !important;
}

.card-image {
    position: relative;
    width: 100%;
    height: 360px; /* BOYUTU BURADA ÇAKTIK, ASLA UZAMAZ */
    overflow: hidden; /* Zoom yapınca dışarı taşmasın */
    
}

.card-image img {
    width: 100%;
    height: 360px; /* Boyu kısalttık (3+3 düzeni için ideal) */
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Overlay metin */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Alttan kararan şık bir geçiş */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 25px;
    box-sizing: border-box;
}

.card-overlay h4 {
    margin-bottom: 8px;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.card-overlay p {
    margin: 0;
    font-size: 0.95em;
    font-weight: 300;
    opacity: 0.9;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
    .expertise-card {
        flex: 0 1 calc(50% - 25px); /* Tablette 2 yan yana */
    }
}

/* Responsive - Mobil */
@media (max-width: 650px) {
    .expertise-card {
        flex: 0 1 100%; /* Mobilde tekli */
        max-width: 100%;
    }
}

/* Contact */
/* Genel bölüm alanı */
.contact-dialogue-section {
    background: #faf6f1;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Üst başlık */
.contact-dialogue-section .title-art {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.contact-dialogue-section .intro-text-centered {
    max-width: 650px;
    margin: 0 auto;
    margin-bottom: 140px; /* Üst açıklama ile form arasında boşluk */
    font-size: 1.1rem;
    color: #444;
    line-height: 1.7;
}

/* Row yan yana çalışsın */
.contact-dialogue-section .row {
    display: flex;
    flex-wrap: nowrap; /* asla alt alta düşmesin */
    gap: 40px;
}

/* Sol ve sağ kolon eşit genişlik */
.contact-dialogue-section .col-md-6 {
    flex: 1;
}

/* Label ve input aynı hizada */
.contact-dialogue-section form .mb-3 {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-dialogue-section form .form-label {
    width: 120px; /* tüm label’lar eşit genişlik */
    margin: 0;
    font-weight: 600;
}

/* Input normal genişlesin */
.contact-dialogue-section .form-control,
.contact-dialogue-section textarea {
    flex: 1;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.contact-dialogue-section textarea {
    height: 140px;
}

/* Checkbox */
.contact-dialogue-section .form-check {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* İletişim bilgileri yazıları */
.contact-dialogue-section .contact-info p {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

.contact-dialogue-section .contact-info strong {
    font-weight: 600;
}
.contact-dialogue-section .btn-submit {
    background: #222;                /* koyu premium siyah */
    color: #fff;
    padding: 14px 0;
    border-radius: 14px;
    font-size: 1.15rem;
    letter-spacing: 0.7px;
    font-weight: 500;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    text-transform: uppercase;
}

.contact-dialogue-section .btn-submit:hover {
    background: #000;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.contact-dialogue-section .btn-submit:active {
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Üst başlık ile altındaki paragraf arasında boşluk */
.contact-dialogue-section .intro-text-centered {
    margin-bottom: 40px;
}

/* Form başlığı ile form alanı arasında boşluk */
.contact-dialogue-section h3 {
    margin-bottom: 25px;
}

/* Formdaki her alan arasındaki boşluk */
.contact-dialogue-section .mb-3 {
    margin-bottom: 22px !important;
}

/* Checkbox ile buton arasında boşluk */
.contact-dialogue-section .form-check {
    margin-bottom: 28px;
}

/* Sağ taraftaki iletişim bilgileri için satır aralığı */
.contact-dialogue-section p {
    line-height: 1.85;
    margin-bottom: 22px;
}

/* Label ile input arasında boşluk */
.contact-dialogue-section .form-label {
    margin-bottom: 6px;
}
.contact-info {
    text-align: center;        /* Tüm yazıları ortalar */
}

.contact-info h2,
.contact-info h3,
.contact-info p {
    text-align: center;        /* Başlık ve paragraflar ortalı */
    margin-left: auto;
    margin-right: auto;
}


/* Responsive - mobilde alt alta geçsin */
@media (max-width: 992px) {

    .contact-dialogue-section .row {
        flex-wrap: wrap; /* mobilde alt alta */
    }

    .contact-dialogue-section .col-md-6 {
        width: 100%;
    }

    .contact-dialogue-section form .mb-3 {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-dialogue-section form .form-label {
        width: 100%;
    }
}

.site-footer {
    background-color: #1d1d1d;
    padding: 25px 10px;
    margin-top: 40px;
    border-top: 1px solid #ffffff;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.site-footer p {
    margin: 5px 0;
    color: #cfcccc;
    font-size: 14px;
}

.footer-sub {
    font-size: 12px;
    color: #777;
}


/* Modal Arka Plan */
.modal-overlay {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
}

/* Modal Kutusu */
.modal-content {
    background-color: #f1d4b7;
    margin: 5% auto;
    padding: 40px;
    width: 85%;
    max-width: 1100px;
    border-radius: 20px;
    position: relative;
    max-height: 85vh;
    overflow-y: auto; /* İçerik çoksa kaydırılabilir */
}

.close-modal {
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 35px;
    cursor: pointer;
    color: #333;
}

.modal-title {
    text-align: center;
    font-size: 2rem;
    color: #222;
    margin-bottom: 10px;
}

/* 3'lü Izgara Yapısı */
.treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.treatment-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.treatment-item:hover { transform: translateY(-5px); }

.treatment-media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.treatment-info {
    padding: 20px;
    text-align: center;
}

.treatment-info h4 { margin-bottom: 10px; color: #c1904c; }

.treatment-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.btn-detail {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: 1px solid #c1904c;
    transition: 0.3s;
}

.btn-detail:hover { color: #c1904c; }

/* Mobil Uyum */
@media (max-width: 992px) {
    .treatment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .treatment-grid { grid-template-columns: 1fr; }
}