/* =====================================================================
   YG Global — açık / koyu tema
   Varsayılan: koyu. Açık tema html[data-theme="light"] ile açılır.
   Logo: koyu zeminde beyaz, açık zeminde siyah varyant (kesin görünür).
   ===================================================================== */

/* ---- Logo: tema bazlı gösterim ----
   style.css içindeki `.brand img.brand-logo { display:block }` kuralını
   aşmak için aynı veya daha yüksek özgüllük kullanıyoruz. */
.brand img.brand-logo--on-light,
.brand .brand-mark-img--on-light {
  display: none;
}
html[data-theme="light"] .brand img.brand-logo--on-dark,
html[data-theme="light"] .brand .brand-mark-img--on-dark {
  display: none;
}
html[data-theme="light"] .brand img.brand-logo--on-light,
html[data-theme="light"] .brand .brand-mark-img--on-light {
  display: block;
}

/* Aynı dosya kullanılıyorsa (özel upload) açık temada siyaha çek */
html[data-theme="light"] .brand-logo--ink {
  filter: brightness(0);
}

.brand-logo {
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* ---- Tema anahtarı ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: transparent;
  color: rgba(245, 240, 232, 0.72);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
}
.theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__sun { display: block; }

/* =====================================================================
   AÇIK TEMA — global değişkenler
   ===================================================================== */
html[data-theme="light"] {
  --vx-bg: #f4f4f5;
  --vx-bg-footer: #ececee;
  --vx-text: #121214;
  --vx-muted: rgba(18, 18, 20, 0.62);
  --vx-body: rgba(18, 18, 20, 0.78);
  --vx-accent: #e11d2e;
  --vx-accent-hover: #c2101f;
  --vx-border: rgba(18, 18, 20, 0.12);
  --vx-overlay: rgba(244, 244, 245, 0.78);
  color-scheme: light;
  background: var(--vx-bg);
  color: var(--vx-text);
}

html[data-theme="light"] .theme-yg {
  --bg: #f4f4f5;
  --bg-2: #ffffff;
  --bg-3: #ececee;
  --surface: rgba(18, 18, 20, 0.03);
  --surface-2: rgba(18, 18, 20, 0.055);
  --line: rgba(18, 18, 20, 0.12);
  --line-strong: rgba(18, 18, 20, 0.2);
  --text: #121214;
  --muted: rgba(18, 18, 20, 0.58);
  --accent: #e11d2e;
  --accent-2: #e11d2e;
  --accent-soft: rgba(225, 29, 46, 0.1);
}

html[data-theme="light"] body.theme-yg,
html[data-theme="light"] body {
  background: #f4f4f5;
  color: #121214;
}

html[data-theme="light"] ::selection {
  background: var(--vx-accent);
  color: #fff;
}

/* ---- Header / nav ---- */
html[data-theme="light"] .site-header.scrolled,
html[data-theme="light"] .nav-scrolled {
  background: rgba(244, 244, 245, 0.9);
  border-bottom-color: rgba(18, 18, 20, 0.1);
}

html[data-theme="light"] .brand,
html[data-theme="light"] .brand-word {
  color: #121214;
}

html[data-theme="light"] .nav-link {
  color: rgba(18, 18, 20, 0.62);
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
  color: #121214;
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(18, 18, 20, 0.14);
  color: rgba(18, 18, 20, 0.7);
}
html[data-theme="light"] .theme-toggle:hover {
  color: #121214;
  border-color: rgba(18, 18, 20, 0.28);
  background: rgba(18, 18, 20, 0.04);
}

html[data-theme="light"] .lang-dd-btn {
  color: rgba(18, 18, 20, 0.7);
  border-color: rgba(18, 18, 20, 0.14);
}
html[data-theme="light"] .lang-dd-btn:hover,
html[data-theme="light"] .lang-dd:hover .lang-dd-btn,
html[data-theme="light"] .lang-dd.is-open .lang-dd-btn {
  color: #121214;
  border-color: rgba(18, 18, 20, 0.28);
  background: rgba(18, 18, 20, 0.04);
}
html[data-theme="light"] .lang-dd-box {
  background: #fff;
  border-color: rgba(18, 18, 20, 0.12);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .lang-dd-head {
  color: rgba(18, 18, 20, 0.42);
}
html[data-theme="light"] .lang-dd-item {
  color: #121214;
}
html[data-theme="light"] a.lang-dd-item:hover {
  background: rgba(18, 18, 20, 0.05);
  color: #121214;
}
html[data-theme="light"] .lang-dd-item.is-current {
  background: rgba(225, 29, 46, 0.08);
}
html[data-theme="light"] .lang-flag {
  border-color: rgba(18, 18, 20, 0.16);
  background: #fff;
}

html[data-theme="light"] .theme-yg .nav-account {
  color: rgba(18, 18, 20, 0.7);
  border-color: rgba(18, 18, 20, 0.14);
}
html[data-theme="light"] .theme-yg .nav-account:hover,
html[data-theme="light"] .theme-yg .nav-account-dd.is-open .nav-account {
  color: #121214;
  border-color: rgba(18, 18, 20, 0.28);
  background: rgba(18, 18, 20, 0.04);
}
html[data-theme="light"] .theme-yg .nav-account-panel {
  background: #fff;
  border-color: rgba(18, 18, 20, 0.12);
}
html[data-theme="light"] .theme-yg .nav-account-panel a.nav-acc-item {
  color: #121214;
}
html[data-theme="light"] .theme-yg .nav-account-panel a.nav-acc-item:hover {
  background: rgba(18, 18, 20, 0.05);
}

html[data-theme="light"] .hamburger-line {
  background: #121214;
}

html[data-theme="light"] .mobile-menu {
  background: #f4f4f5;
}
html[data-theme="light"] .mobile-menu-link {
  color: #121214;
  border-bottom-color: rgba(18, 18, 20, 0.1);
}

/* ---- Footer ---- */
html[data-theme="light"] .site-footer {
  background: #ececee;
  color: #121214;
  border-top: 1px solid rgba(18, 18, 20, 0.1);
}
html[data-theme="light"] .footer-col h4 {
  color: rgba(18, 18, 20, 0.45);
}
html[data-theme="light"] .footer-link,
html[data-theme="light"] .footer-col a:not(.hero-cta) {
  color: rgba(18, 18, 20, 0.62);
}
html[data-theme="light"] .footer-link:hover,
html[data-theme="light"] .footer-col a:not(.hero-cta):hover {
  color: var(--vx-accent);
}
html[data-theme="light"] .footer-note,
html[data-theme="light"] .footer-address,
html[data-theme="light"] .footer-phone small,
html[data-theme="light"] .footer-copy {
  color: rgba(18, 18, 20, 0.48);
}
html[data-theme="light"] .legal-contact--footer .legal-contact-row dt {
  color: rgba(18, 18, 20, 0.45);
}
html[data-theme="light"] .legal-contact--footer .legal-contact-row dd,
html[data-theme="light"] .legal-contact--footer .legal-contact-row a {
  color: rgba(18, 18, 20, 0.82);
}
html[data-theme="light"] .magnetic-icon {
  color: rgba(18, 18, 20, 0.62);
}
html[data-theme="light"] .magnetic-icon:hover {
  color: #fff;
}

/* ---- Genel yüzeyler ---- */
html[data-theme="light"] .theme-yg .section-alt {
  background: #ececee;
}
html[data-theme="light"] .theme-yg .btn-ghost,
html[data-theme="light"] .theme-yg .btn-outline {
  border-color: rgba(18, 18, 20, 0.18);
  color: #121214;
}
html[data-theme="light"] .theme-yg .btn-ghost:hover,
html[data-theme="light"] .theme-yg .btn-outline:hover {
  background: rgba(18, 18, 20, 0.04);
  border-color: rgba(18, 18, 20, 0.3);
}

/* =====================================================================
   AÇIK TEMA — ana sayfa (yg-home)
   ===================================================================== */
html[data-theme="light"] body.is-home {
  --ygh-bg: #f4f4f5;
  --ygh-panel: #ffffff;
  --ygh-panel-2: #f0f0f2;
  --ygh-line: rgba(18, 18, 20, 0.1);
  --ygh-line-2: rgba(18, 18, 20, 0.18);
  --ygh-text: #121214;
  --ygh-muted: rgba(18, 18, 20, 0.62);
  --ygh-dim: rgba(18, 18, 20, 0.48);
  --ygh-red: #e11d2e;
  --ygh-red-hover: #c2101f;
  background: #f4f4f5;
}

html[data-theme="light"] body.is-home #main {
  background: #f4f4f5;
  color: #121214;
}

html[data-theme="light"] body.is-home #main h1,
html[data-theme="light"] body.is-home #main h2,
html[data-theme="light"] body.is-home #main h3,
html[data-theme="light"] body.is-home #main h4 {
  color: #121214;
}

/* Slider fotoğrafın üstündeki yazı her temada açık kalır */
html[data-theme="light"] .ygh-hero h1,
html[data-theme="light"] body.is-home #main .ygh-hero h1 {
  color: #f4f4f5;
}
html[data-theme="light"] .ygh-hero__lead,
html[data-theme="light"] .ygh-hero .ygh-tlink,
html[data-theme="light"] .ygh-expertise li {
  color: rgba(244, 244, 245, 0.82);
}

/* Ana sayfa: kaydırılmamış header koyu slider üstünde — siyah yazı/logo okunmaz */
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand-word {
  color: #f4f4f5;
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand img.brand-logo--on-dark,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand .brand-mark-img--on-dark {
  display: block;
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand img.brand-logo--on-light,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand .brand-mark-img--on-light {
  display: none;
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .brand-logo--ink {
  filter: none;
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .nav-link {
  color: rgba(245, 240, 232, 0.82);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .nav-link:hover,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .nav-link.active {
  color: #fff;
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .theme-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(245, 240, 232, 0.86);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .theme-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .lang-dd-btn {
  color: rgba(245, 240, 232, 0.86);
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .lang-dd-btn:hover,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .lang-dd:hover .lang-dd-btn,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .lang-dd.is-open .lang-dd-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .nav-account {
  color: rgba(245, 240, 232, 0.86);
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .nav-account:hover,
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .nav-account-dd.is-open .nav-account {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body.is-home .site-header:not(.scrolled) .hamburger-line {
  background: #f4f4f5;
}

/* Ürün mockup'ı koyu kalır — gerçek yazılım paneli hissi */
html[data-theme="light"] .ygh-prj__shot {
  border-color: rgba(18, 18, 20, 0.12);
  box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .ygh-svc:hover .ygh-svc-ico,
html[data-theme="light"] .ygh-svc:hover .ygh-svc-go,
html[data-theme="light"] .ygh-svc:hover .ygh-svc-arrow {
  color: var(--ygh-red);
}

html[data-theme="light"] .ygh-prj {
  background: #fff;
  border-color: rgba(18, 18, 20, 0.12);
}
html[data-theme="light"] .ygh-prj:hover {
  background: #fafafa;
  border-color: rgba(18, 18, 20, 0.22);
}

html[data-theme="light"] .ygh-trust,
html[data-theme="light"] .ygh-work,
html[data-theme="light"] .ygh-cta {
  background: #fff;
}

html[data-theme="light"] .ygh-app {
  /* mockup her temada koyu ürün arayüzü olarak kalır */
}

/* ---- İç sayfalar: koyu-tema krem metin açık zeminde kaybolmasın ---- */
html[data-theme="light"] .rich-text,
html[data-theme="light"] .legal-text {
  color: var(--vx-body);
}
html[data-theme="light"] .side-card,
html[data-theme="light"] .contact-form-box,
html[data-theme="light"] .about-company {
  background: #fff;
  border-color: rgba(18, 18, 20, 0.12);
}

/* CTA bandı video üzerinde — açık temada da açık renk kalsın */
html[data-theme="light"] .vx-cta-band,
html[data-theme="light"] .vx-cta-band h2,
html[data-theme="light"] .vx-cta-band .hero-cta span {
  color: #f5f0e8;
}
html[data-theme="light"] .vx-cta-band .lead,
html[data-theme="light"] .vx-cta-band .section-kicker {
  color: rgba(245, 240, 232, 0.72);
}