/* =========================================================
   Özak GYO — Light / Dark tema
   style.css'e dokunmadan, sadece html[data-theme="dark"]
   altında override eder. Tema seçimi: assets/js/theme.js
   ========================================================= */

:root {
    --t-bg: #fcf9f4;
    --t-surface: #ffffff;
    --t-surface-2: #fafafa;
    --t-heading: #0C1C33;
    --t-text: #444444;
    --t-muted: #a1a1a1;
    --t-border: #eeeeee;
    --t-accent: #AE852D;
    color-scheme: light;
}

html[data-theme="dark"] {
    --t-bg: #121417;
    --t-surface: #1b1e23;
    --t-surface-2: #22262c;
    --t-heading: #f3efe7;
    --t-text: #c4c0b8;
    --t-muted: #8a8780;
    --t-border: #2f343c;
    --t-accent: #c9a033;
    color-scheme: dark;
}

/* Tema değişirken yumuşak geçiş (sadece toggle anında, ana yüzeylerle sınırlı) */
html.theme-transition body,
html.theme-transition main,
html.theme-transition header,
html.theme-transition footer,
html.theme-transition section,
html.theme-transition #breadcrumb,
html.theme-transition #overlay {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce) {
    html.theme-transition * { transition: none !important; }
}

/* ---------- Toggle butonu (header) ---------- */
#theme-toggle {
    float: right;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
#theme-toggle:hover { border-bottom: 2px solid var(--t-accent); }
#theme-toggle::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%);
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    height: 80px;
    width: 1px;
}
#theme-toggle button {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #FAFAFA;
}
#theme-toggle svg { width: 22px; height: 22px; }
#theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] #theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

@media (max-width: 1024px) {
    #theme-toggle button { width: 60px; height: 60px; }
    #theme-toggle::after { height: 60px; }
}
@media (max-width: 767px) {
    #theme-toggle button { width: 48px; }
    #theme-toggle svg { width: 20px; height: 20px; }
}

/* =========================================================
   DARK MODE OVERRIDES
   ========================================================= */

/* ---------- Genel ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] #breadcrumb {
    background: var(--t-bg);
}
html[data-theme="dark"] main::before {
    background: linear-gradient(to bottom, var(--t-surface), var(--t-bg));
}

/* Başlıklar (#0C1C33 / #1a1a1a / #333) */
html[data-theme="dark"] .mid-container h2,
html[data-theme="dark"] #form-wrapper .row .col h2,
html[data-theme="dark"] #form-wrapper .row .col .h2,
html[data-theme="dark"] #home-about .row .col h1,
html[data-theme="dark"] #home-about .row .col h2,
html[data-theme="dark"] #home-featured h2,
html[data-theme="dark"] #home-featured .h2,
html[data-theme="dark"] #home-project-links h2,
html[data-theme="dark"] #home-project-links .h2,
html[data-theme="dark"] #home-projects h2.title,
html[data-theme="dark"] #home-projects .h2.title,
html[data-theme="dark"] main h1,
html[data-theme="dark"] main .container nav ul li.active a,
html[data-theme="dark"] .right-col-content h2,
html[data-theme="dark"] .content-text h2,
html[data-theme="dark"] .content-text h3,
html[data-theme="dark"] .iconsection-wrapper .grid .col h2,
html[data-theme="dark"] #people-grid .grid .col h2,
html[data-theme="dark"] #hr-content p,
html[data-theme="dark"] #hr-icons .row .col h2,
html[data-theme="dark"] #contact-address h1,
html[data-theme="dark"] #contact-address .row .col h3,
html[data-theme="dark"] #blog-content h1,
html[data-theme="dark"] #blog-content .row .col .h2,
html[data-theme="dark"] #blog-content .row .col .h2 a,
html[data-theme="dark"] #blog-content .col .h2 a,
html[data-theme="dark"] .sub-title,
html[data-theme="dark"] #project-tabs ul li,
html[data-theme="dark"] #project-listing h2,
html[data-theme="dark"] #project-listing h3,
html[data-theme="dark"] #project-listing .row .col .card-info li,
html[data-theme="dark"] #project-features h2,
html[data-theme="dark"] #project-faq h2,
html[data-theme="dark"] #project-location h2,
html[data-theme="dark"] #project-plans h2,
html[data-theme="dark"] #project-plans ul li,
html[data-theme="dark"] #project-gallery h2,
html[data-theme="dark"] .accordion-content select,
html[data-theme="dark"] .concept-popup .concept-content h3 {
    color: var(--t-heading);
}

/* Gövde metinleri (#444 / #333 / #414141 / #555) */
html[data-theme="dark"] .mid-container p,
html[data-theme="dark"] .mid-container ul li,
html[data-theme="dark"] .mid-container ol li,
html[data-theme="dark"] #form-wrapper .row,
html[data-theme="dark"] #form-wrapper .row .col p,
html[data-theme="dark"] #home-featured p,
html[data-theme="dark"] #breadcrumb ul li,
html[data-theme="dark"] #breadcrumb ul li a,
html[data-theme="dark"] main .container nav ul li a,
html[data-theme="dark"] .right-col-content p,
html[data-theme="dark"] .content-text p,
html[data-theme="dark"] .two-col-content p,
html[data-theme="dark"] .numbers-background-content .row .col p,
html[data-theme="dark"] #people-grid .grid .col label,
html[data-theme="dark"] .milestones .item .content p,
html[data-theme="dark"] #odullerimiz.grid .col .content,
html[data-theme="dark"] #hr-icons .row .col p,
html[data-theme="dark"] #contact-address .row .col p,
html[data-theme="dark"] #project-features .row .col p,
html[data-theme="dark"] #project-features .row .col h3,
html[data-theme="dark"] #project-gallery .row .col p,
html[data-theme="dark"] #location-links .col label,
html[data-theme="dark"] .pdf-item label,
html[data-theme="dark"] .concept-popup .concept-content p,
html[data-theme="dark"] #blog-content .blog-categories a {
    color: var(--t-text);
}
html[data-theme="dark"] p.ozak-promo:not(.blog-text-promo),
html[data-theme="dark"] #promo label.ozak-label {
    color: var(--t-text) !important;
}
html[data-theme="dark"] #blog-content .no-posts { color: var(--t-muted); }

/* Hover'da beyaza dönen öğeler korunur */
html[data-theme="dark"] .iconsection-wrapper .grid .col:hover h2,
html[data-theme="dark"] #project-plans ul li:hover,
html[data-theme="dark"] #project-plans ul li.active,
html[data-theme="dark"] .accordion-header:hover,
html[data-theme="dark"] #odullerimiz.grid .col:hover .content {
    color: #fff;
}

/* ---------- Yüzeyler / kartlar (#fff zeminler) ---------- */
html[data-theme="dark"] #form-wrapper,
html[data-theme="dark"] #home-promo,
html[data-theme="dark"] .numbers-background-content .row .col,
html[data-theme="dark"] #location-links,
html[data-theme="dark"] .pdf-item:hover,
html[data-theme="dark"] .concept-popup,
html[data-theme="dark"] #blog-content .col,
html[data-theme="dark"] #blog-content .blog-categories a {
    background: var(--t-surface);
}
html[data-theme="dark"] .concept-popup .concept-content {
    background: linear-gradient(135deg, var(--t-surface) 0%, var(--t-surface-2) 100%);
}
html[data-theme="dark"] #blog-content .col,
html[data-theme="dark"] .numbers-background-content .row .col {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] #blog-content .blog-categories a { border-color: var(--t-border); }
html[data-theme="dark"] #blog-content .blog-categories a.all-posts {
    background: var(--t-heading);
    border-color: var(--t-heading);
    color: var(--t-bg);
}
html[data-theme="dark"] #blog-content .blog-categories a.active { color: #fff; }

html[data-theme="dark"] .milestones .item { border-color: var(--t-border); }
html[data-theme="dark"] #odullerimiz.grid .col img,
html[data-theme="dark"] #project-plans .swiper-slide img { border-color: var(--t-border); }

/* ---------- Tablolar (CMS içerik) ---------- */
html[data-theme="dark"] .mid-container table th,
html[data-theme="dark"] .mid-container table td { border-color: var(--t-border); }
html[data-theme="dark"] .mid-container table tbody tr:hover { background-color: var(--t-surface-2); }

/* ---------- Formlar ---------- */
html[data-theme="dark"] #form-wrapper .row .col input,
html[data-theme="dark"] #onlineForm input,
html[data-theme="dark"] #onlineForm select,
html[data-theme="dark"] #contact-form input[type="text"],
html[data-theme="dark"] #contact-form input[type="tel"],
html[data-theme="dark"] #contact-form input[type="email"],
html[data-theme="dark"] #contact-form textarea {
    background: var(--t-surface-2);
    border-color: var(--t-border);
    color: var(--t-heading);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--t-muted); }
html[data-theme="dark"] #formClose { background: var(--t-surface-2); }
html[data-theme="dark"] #form-wrapper .row .col.countryCodeShow .countryCode,
html[data-theme="dark"] .contact_phone_col.countryCodeShow .countryCode {
    background: var(--t-surface-2) !important;
}

/* ---------- Mobil menü overlay ---------- */
html[data-theme="dark"] #overlay { background: var(--t-bg); }
html[data-theme="dark"] #overlay > ul li,
html[data-theme="dark"] #overlay > ul li a { color: var(--t-heading); }
html[data-theme="dark"] #overlay > ul li ul li,
html[data-theme="dark"] #overlay > ul li ul li a { color: var(--t-text); }
html[data-theme="dark"] #overlay > ul:hover li,
html[data-theme="dark"] #overlay > ul:hover li a { color: rgba(255, 255, 255, .3); }
html[data-theme="dark"] #overlay > ul:hover li:hover,
html[data-theme="dark"] #overlay > ul:hover li:hover a { color: #fff; }
/* Alt menü: ana öğe hover'dayken style.css'teki rgba(0,0,0,1) kuralına düşmesin */
html[data-theme="dark"] #overlay > ul:hover li ul li,
html[data-theme="dark"] #overlay > ul:hover li ul li a { color: var(--t-text); }
html[data-theme="dark"] #overlay > ul:hover li ul li:hover,
html[data-theme="dark"] #overlay > ul:hover li ul li:hover a { color: #fff; }
html[data-theme="dark"] #overlay svg path[fill="#444444"],
html[data-theme="dark"] #overlay svg path[fill="#444"] { fill: var(--t-text); }

/* ---------- Footer ---------- */
html[data-theme="dark"] #footer-top img { filter: brightness(0) invert(1); }
html[data-theme="dark"] #footer-middle ul li,
html[data-theme="dark"] #footer-middle ul li a { color: var(--t-text); }
html[data-theme="dark"] #footer-middle ul#footer-social-links li { border-color: var(--t-border); }
html[data-theme="dark"] #footer-middle ul#footer-social-links li:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] #footer-social-links svg path[fill="#444444"],
html[data-theme="dark"] #footer-social-links svg path[fill="#444"] { fill: var(--t-text); }
html[data-theme="dark"] #breadcrumb svg path[stroke="#444444"],
html[data-theme="dark"] #breadcrumb svg path[stroke="#444"] { stroke: var(--t-text); }

/* ---------- Swiper oklar (siyah çerçeveli) ---------- */
html[data-theme="dark"] #home-projects .swiper-button-next,
html[data-theme="dark"] #home-projects .swiper-button-prev { border-color: var(--t-heading); }
html[data-theme="dark"] #home-projects .swiper-button-next:after,
html[data-theme="dark"] #home-projects .swiper-button-prev:after { color: var(--t-heading); }

/* ---------- Fancybox popup içerikleri (KVKK vb.) ---------- */
html[data-theme="dark"] .popup_page {
    background: var(--t-surface);
    color: var(--t-text);
}
html[data-theme="dark"] #whatsapp_kvkk_popup .kvkk-popup-footer {
    background: var(--t-surface) !important;
    border-top-color: var(--t-border) !important;
}

/* ---------- Siyah zeminler: sayfa zemininden ayrışsın ---------- */
html[data-theme="dark"] #footer-bottom,
html[data-theme="dark"] #header-projeler .head #head-menu,
html[data-theme="dark"] #search-container.active {
    background: var(--t-surface);
}

/* ---------- SweetAlert2 ---------- */
html[data-theme="dark"] .swal2-popup {
    background: var(--t-surface);
    color: var(--t-text);
}
html[data-theme="dark"] .swal2-title { color: var(--t-heading); }
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: var(--t-text); }
html[data-theme="dark"] .swal2-close { color: var(--t-muted); }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
    background: var(--t-surface-2);
    border-color: var(--t-border);
    color: var(--t-heading);
}
html[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--t-surface) !important;
}

/* ---------- CMS içeriğindeki inline koyu yazı renkleri ---------- */
html[data-theme="dark"] .mid-container [style*="color"],
html[data-theme="dark"] .content-text [style*="color"],
html[data-theme="dark"] .popup_page [style*="color"] {
    color: inherit !important;
}
html[data-theme="dark"] .mid-container [style*="background"],
html[data-theme="dark"] .content-text [style*="background"] {
    background-color: transparent !important;
}