/* * NK Ajans - Ana Stil Dosyası
 * Renk Paleti: Gold, Açık Turuncu, Koyu Metin
 */

/* --------------------------------- */
/* 1. Tema Renkleri ve Fontlar (Kök) */
/* --------------------------------- */
:root {
    --primary-gold: #B8860B; 
    --secondary-orange: #F39C12; 
    --dark-text: #343A40; 
    --light-bg: #FDFEFE; 
    --border-color: #EAECEE; 
    --font-heading: 'Merriweather', serif;
    --font-body: 'Lato', sans-serif;
}

/* 1.1. Dark Mode Renk Değişkenleri */
html.dark-mode {
    --primary-gold: #D4AF37; 
    --secondary-orange: #E67E22; 
    --dark-text: #EAECEE; 
    --light-bg: #2C3E50; 
    --border-color: #3B4E62; 
    color-scheme: dark; 
}
html.dark-mode a { color: var(--secondary-orange); }
html.dark-mode a:hover { color: var(--primary-gold); }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: var(--primary-gold); }
html.dark-mode .main-header { background-color: var(--light-bg); border-bottom-color: var(--border-color); }
html.dark-mode .main-footer { background-color: #1F2C39; border-top-color: var(--primary-gold); }
html.dark-mode .footer-copyright { background-color: #1A242F; }
html.dark-mode .footer-widget p, html.dark-mode .footer-widget a { color: #bdc3c7; }
html.dark-mode .footer-copyright p { color: #7f8c8d; }

/* 2. Temel Sıfırlama ve Gövde Stili */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-text);
    background-color: var(--light-bg);
}
/* Mobil menü açıkken kaydırmayı engelle */
html.mobile-menu-open body {
    overflow: hidden;
}

/* 3. Ana Konteyner */
.container {
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0; /* Padding'i header/footer kendisi versin */
}

/* 4. Temel Başlık ve Metin Stilleri */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary-gold); 
    margin-bottom: 15px;
    line-height: 1.3;
}
p { margin-bottom: 15px; }
a { color: var(--secondary-orange); text-decoration: none; }
a:hover { color: var(--primary-gold); text-decoration: underline; }

/* 5. Header (Üst Menü) Stilleri */
.main-header {
    width: 100%;
    background-color: var(--light-bg);
    border-bottom: 2px solid var(--border-color);
    padding: 15px 0;
}
.header-container {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 90%; /* Konteynerin padding'ini burada verelim */
    max-width: 1200px;
    margin: 0 auto;
}
.logo a { display: inline-block; }
.logo-main {
    height: 45px; /* Logo Yüksekliği (TAVSİYEN) */
    width: auto;
    transition: all 0.3s ease;
}
.logo-dark { display: inline-block; }
.logo-light { display: none; }
html.dark-mode .logo-dark { display: none; }
html.dark-mode .logo-light { display: inline-block; }

/* DÜZELTME: Menü stilleri */
.main-nav ul {
    list-style: none; 
    display: flex; /* YATAY YAPAR */
    padding: 0;
    margin: 0;
}
.main-nav li { margin-left: 25px; }
.main-nav a {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--dark-text); 
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent; 
    transition: all 0.3s ease;
}
.main-nav a:hover,
.main-nav a.active { 
    color: var(--primary-gold);
    border-bottom-color: var(--primary-gold);
}
html.dark-mode .main-nav a { color: var(--dark-text); }
html.dark-mode .main-nav a:hover,
html.dark-mode .main-nav a.active {
    color: var(--primary-gold);
    border-bottom-color: var(--primary-gold);
}

/* Header Kontrolleri (Dark mode + Mobil buton) */
.header-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* İki buton arası boşluk */
}
.dark-mode-toggle button {
    background-color: var(--border-color); 
    border: none;
    border-radius: 20px; 
    padding: 5px 8px;
    cursor: pointer;
    font-size: 18px; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    overflow: hidden; 
}
.dark-mode-toggle button:hover { background-color: #ddd; }
.icon-moon { display: none; }
html.dark-mode .icon-sun { display: none; }
html.dark-mode .icon-moon { display: inline-block; }
html.dark-mode .dark-mode-toggle button { background-color: #4A4A4A; }
html.dark-mode .dark-mode-toggle button:hover { background-color: #5A5A5A; }


/* 6. Ana İçerik Alanı */
.main-content {
    /* Konteynerin padding'ini burada verelim */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
}
/* content-container class'ına artık gerek kalmadı, main-content'e verdik */
/* .container.content-container { padding: 30px 0; } */


/* 7. Footer Stilleri */
.main-footer {
    width: 100%;
    background-color: var(--dark-text); 
    color: var(--light-bg); 
    padding-top: 40px;
    border-top: 5px solid var(--primary-gold); 
}
.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; 
    padding-bottom: 40px;
    width: 90%; /* Konteynerin padding'ini burada verelim */
    max-width: 1200px;
    margin: 0 auto;
}
.footer-widget {
    width: 30%; 
    padding-right: 20px;
    min-width: 250px; /* Mobilde çok sıkışmasın */
}
.footer-widget h4 { color: var(--secondary-orange); margin-bottom: 20px; font-size: 20px; }
.footer-widget p { color: #bdc3c7; font-size: 15px; }
.footer-widget ul { list-style: none; }
.footer-widget li { margin-bottom: 10px; }
.footer-widget a { color: #bdc3c7; }
.footer-widget a:hover { color: var(--secondary-orange); text-decoration: none; }
.footer-keywords {
    background-color: #1a1a1a; 
    color: #7f8c8d;
    padding: 25px 0;
    border-top: 1px solid #333;
}
.footer-keywords .container { width: 90%; max-width: 1200px; margin: 0 auto; }
.footer-keywords h4 { font-size: 16px; color: #ffffff; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.footer-keywords p { font-size: 14px; line-height: 1.8; margin: 0; }
.footer-copyright {
    width: 100%;
    background-color: #111; /* Keywords'ten biraz daha koyu */
    padding: 15px 0;
    text-align: center;
}
.footer-copyright .container { width: 90%; max-width: 1200px; margin: 0 auto; }
.footer-copyright p { margin: 0; font-size: 14px; color: #7f8c8d; }
.footer-copyright a { color: #95a5a6; font-weight: bold; }

html.dark-mode .footer-keywords { background-color: #1A242F; border-top-color: #3B4E62; color: #7f8c8d; }
html.dark-mode .footer-keywords h4 { color: #f1f1f1; }
html.dark-mode .footer-copyright { background-color: #121a22; }


/* 8. Genel Bileşenler (Butonlar vb.) */
.btn {
    display: inline-block; padding: 12px 28px; border-radius: 5px; font-size: 16px;
    font-weight: 700; text-decoration: none; font-family: var(--font-body);
    transition: all 0.3s ease; cursor: pointer; margin: 5px; border: 2px solid transparent;
}
.btn-primary-gold { background-color: var(--primary-gold); color: #ffffff; border-color: var(--primary-gold); }
.btn-primary-gold:hover { background-color: var(--secondary-orange); border-color: var(--secondary-orange); color: #ffffff; }
.btn-secondary-outline { background-color: transparent; color: var(--primary-gold); border-color: var(--primary-gold); }
.btn-secondary-outline:hover { background-color: var(--primary-gold); color: #ffffff; }
html.dark-mode .btn-secondary-outline { color: var(--primary-gold); border-color: var(--primary-gold); }
html.dark-mode .btn-secondary-outline:hover { background-color: var(--primary-gold); color: var(--light-bg); }

/* 9. Ana Sayfa - Hero Alanı */
.hero { background-color: #f4f4f4; padding: 80px 5%; text-align: center; border-radius: 8px; }
.hero-content { max-width: 800px; margin: 0 auto; }
.hero-title { font-size: 48px; color: var(--dark-text); margin-bottom: 20px; }
.highlight-gold { color: var(--primary-gold); }
.hero-subtitle { font-size: 18px; color: #555; margin-bottom: 30px; }
html.dark-mode .hero { background-color: var(--border-color); }
html.dark-mode .hero-title { color: var(--dark-text); }
html.dark-mode .hero-subtitle { color: #bdc3c7; }

/* 10. Ana Sayfa - Hizmetler Alanı */
.home-services { padding: 60px 0; }
.section-title { font-size: 36px; text-align: center; margin-bottom: 10px; color: var(--primary-gold); }
.section-subtitle { font-size: 18px; text-align: center; margin-bottom: 40px; color: #777; }
html.dark-mode .section-subtitle { color: #bdc3c7; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.service-card {
    background-color: #ffffff; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 30px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; /* Kart içeriklerini dikeyde hizala */
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.service-title { font-size: 24px; color: var(--dark-text); margin-bottom: 15px; }
.service-card p { font-size: 15px; margin-bottom: 20px; flex-grow: 1; /* Açıklama alanını doldur */ }
.service-link { font-weight: 700; color: var(--secondary-orange); text-decoration: none; align-self: flex-start; }
.service-link:hover { color: var(--primary-gold); text-decoration: underline; }
html.dark-mode .service-card { background-color: var(--border-color); border-color: #4A6075; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
html.dark-mode .service-title { color: var(--dark-text); }
html.dark-mode .service-link { color: var(--secondary-orange); }
html.dark-mode .service-link:hover { color: var(--primary-gold); }

/* 11. Dinamik Hizmet Sayfası (hizmet.php) */
.page-content {}
.breadcrumb { background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; margin-bottom: 25px; font-size: 14px; }
.breadcrumb a { color: var(--secondary-orange); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-gold); }
.breadcrumb span { color: #6c757d; margin: 0 5px; }
html.dark-mode .breadcrumb { background-color: var(--border-color); }
html.dark-mode .breadcrumb span { color: #9ab; }
.lead-text { font-size: 1.25rem; font-weight: 400; line-height: 1.6; color: #495057; margin-bottom: 20px; }
html.dark-mode .lead-text { color: #ced4da; }
.service-cta-box { background-color: #fffaf0; border: 2px dashed var(--secondary-orange); border-radius: 8px; padding: 30px; margin-top: 40px; text-align: center; }
.service-cta-box h3 { color: var(--primary-gold); font-size: 28px; }
html.dark-mode .service-cta-box { background-color: rgba(230, 126, 34, 0.05); border-color: var(--secondary-orange); }
html.dark-mode .service-cta-box h3 { color: var(--secondary-orange); }

/* 12. Hizmetlerimiz Sayfası (hizmetlerimiz.php) */
.page-title { font-size: 42px; text-align: center; color: var(--primary-gold); margin-bottom: 10px; }
.page-subtitle { font-size: 1.2rem; text-align: center; color: #6c757d; margin-bottom: 50px; max-width: 600px; margin-left: auto; margin-right: auto; }
html.dark-mode .page-subtitle { color: #adb5bd; }
.services-list-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.service-list-card {
    background-color: #ffffff; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 35px; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.service-list-card .service-title { font-size: 26px; color: var(--dark-text); margin-bottom: 15px; }
.service-list-card .service-description { font-size: 16px; margin-bottom: 25px; flex-grow: 1; }
.service-list-card .btn { align-self: flex-start; }
html.dark-mode .service-list-card { background-color: var(--border-color); border-color: #4A6075; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
html.dark-mode .service-list-card .service-title { color: var(--dark-text); }

/* 14. Hizmet Sayfası - Konum Listeleme */
.location-list-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border-color); }
html.dark-mode .location-list-section { border-top-color: var(--border-color); }
.location-list-section .section-title { text-align: left; }
.location-list-section .section-subtitle { text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; }
.location-list-container {
    list-style: none; padding: 0; margin: 0;
    columns: 3; -webkit-columns: 3; -moz-columns: 3; column-gap: 25px;
}
.location-list-item {
    margin-bottom: 10px; 
    break-inside: avoid-column; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}
.location-list-item a {
    display: block; padding: 8px 12px; font-size: 15px; font-weight: 700;
    color: var(--dark-text); text-decoration: none; background-color: #f8f9fa;
    border-radius: 5px; border: 1px solid var(--border-color); transition: all 0.2s ease-in-out;
}
.location-list-item a:hover {
    background-color: var(--secondary-orange); color: #ffffff;
    border-color: var(--secondary-orange); transform: translateX(3px);
}
html.dark-mode .location-list-item a { background-color: var(--border-color); border-color: #4A6075; color: var(--dark-text); }
html.dark-mode .location-list-item a:hover { background-color: var(--secondary-orange); border-color: var(--secondary-orange); color: var(--light-bg); }

/* 16. Dinamik İçerik Bloğu (content-block.php) */
.dynamic-content-block {
    background-color: #f8f9fa; border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color); padding: 50px 0; margin: 40px 0;
}
.dynamic-content-block .content-wrapper { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.dynamic-content-block .content-title { font-size: 32px; color: var(--primary-gold); text-align: center; margin-bottom: 25px; }
.dynamic-content-block p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; }
.dynamic-content-block strong { color: var(--secondary-orange); }
html.dark-mode .dynamic-content-block { background-color: var(--border-color); border-color: #4A6075; }
html.dark-mode .dynamic-content-block strong { color: var(--primary-gold); }

/* 18. İletişim Sayfası (iletisim.php) */
.contact-form-container {
    max-width: 800px; margin: 0 auto; padding: 30px; background-color: #ffffff;
    border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--dark-text); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 5px;
    font-size: 16px; font-family: var(--font-body); background-color: #f8f9fa;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--primary-gold);
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.2); background-color: #ffffff;
}
.form-group input[readonly] { background-color: #eaecee; color: #555; cursor: not-allowed; }
#formStatus { display: none; padding: 15px; margin-top: 20px; border-radius: 5px; font-weight: 700; }
#formStatus p { margin: 0; }
#formStatus.success, #formStatus p.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 15px;}
#formStatus.error, #formStatus p.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 15px;}
#formStatus.info, #formStatus p.info { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 15px;}

html.dark-mode .contact-form-container { background-color: var(--border-color); border-color: #4A6075; }
html.dark-mode .form-group label { color: var(--dark-text); }
html.dark-mode .form-group input[type="text"],
html.dark-mode .form-group input[type="email"],
html.dark-mode .form-group input[type="tel"],
html.dark-mode .form-group textarea {
    background-color: var(--light-bg); border-color: #4A6075; color: var(--dark-text);
}
html.dark-mode .form-group input[type="text"]:focus,
html.dark-mode .form-group input[type="email"]:focus,
html.dark-mode .form-group input[type="tel"]:focus,
html.dark-mode .form-group textarea:focus {
    background-color: var(--border-color); border-color: var(--primary-gold);
}
html.dark-mode .form-group input[readonly] { background-color: #4A6075; color: #bdc3c7; }


/* ========================================
19. YENİ: MOBİL MENÜ STİLLERİ
========================================
*/
.mobile-nav-toggle {
    display: none; /* Masaüstünde burger ikonunu gizle */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Açık menünün üstünde kalsın */
}
.burger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--dark-text);
    position: relative;
    transition: all 0.3s ease;
}
.burger-icon::before,
.burger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--dark-text);
    transition: all 0.3s ease;
}
.burger-icon::before { top: -7px; }
.burger-icon::after { bottom: -7px; }

/* Koyu Modda Burger İkonu */
html.dark-mode .burger-icon,
html.dark-mode .burger-icon::before,
html.dark-mode .burger-icon::after {
    background-color: var(--dark-text);
}

/* Mobil Menü Ekranı (Varsayılan olarak gizli) */
/* NOT: Masaüstü menüsünü (.main-nav) mobil için yeniden kullanıyoruz.
   Bu, kod tekrarını engeller.
*/

/* --------------------------------- */
/* 20. RESPONSIVE (Mobil Görünüm) */
/* --------------------------------- */
@media (max-width: 992px) {
    /* Tablet */
    .location-list-container { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
    .footer-container { gap: 30px; }
    .footer-widget { width: 45%; }
}

@media (max-width: 768px) {
    /* Mobil */
    .location-list-container { columns: 1; -webkit-columns: 1; -moz-columns: 1; }
    .services-list-container { grid-template-columns: 1fr; }
    .hero-title { font-size: 36px; }
    .footer-widget { width: 100%; padding-right: 0; }
    .services-grid { grid-template-columns: 1fr; }

    /* MOBİL MENÜ AKTİVASYONU */
    .mobile-nav-toggle {
        display: block; /* Burger ikonunu göster */
    }

    .main-nav {
        /* Menüyü ekranın dışına gizle */
        position: fixed;
        top: 0;
        right: -100%; /* Ekranın sağında başla */
        width: 100%;
        height: 100vh; /* Tam ekran yüksekliği */
        background-color: var(--light-bg);
        padding-top: 100px; /* Header'ın altına it */
        transition: right 0.4s ease-in-out;
        z-index: 1000;
        overflow-y: auto;
    }
    .main-nav.is-active {
        right: 0; /* Menüyü ekrana kaydır */
    }

    /* Menü linklerini dikey yap */
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .main-nav li {
        margin: 0;
        width: 100%;
    }
    .main-nav a {
        display: block;
        padding: 20px;
        text-align: center;
        font-size: 22px;
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    .main-nav li:last-child a {
        border-bottom: none;
    }
    
    /* Koyu Modda Mobil Menü */
    html.dark-mode .main-nav {
        background-color: var(--light-bg);
    }
    html.dark-mode .main-nav a {
        border-bottom-color: var(--border-color);
    }

    /* Mobil Menü Açıkken Burger İkonu -> 'X' olsun */
    .mobile-nav-toggle.is-active .burger-icon {
        background-color: transparent; /* Ortadaki çizgiyi gizle */
    }
    .mobile-nav-toggle.is-active .burger-icon::before {
        transform: rotate(45deg);
        top: 0;
    }
    .mobile-nav-toggle.is-active .burger-icon::after {
        transform: rotate(-45deg);
        bottom: 0;
    }
    /* 'X' ikonu koyu modda da çalışsın */
    html.dark-mode .mobile-nav-toggle.is-active .burger-icon::before,
    html.dark-mode .mobile-nav-toggle.is-active .burger-icon::after {
        background-color: var(--dark-text);
    }
}