/* ════════════════════════════════════════════════════════════════
   OrthoDigi · Ortak tasarım katmanı (tüm sayfalar, sayfa stillerinden SONRA yüklenir)
   1) Tek tip başlık fontu   2) Menüde aktif sayfa çizgisi   3) Sayfa geçişi (solma)
   4) Kaydırırken yumuşak belirme   5) Koyu mod (düğme site.js'te)
   ════════════════════════════════════════════════════════════════ */

/* ── 1) Tek tip başlık fontu: tüm başlıklar Inter (sade, okunaklı web fontu; gövde DM Sans kalır) ── */
h1, h2, h3,
.tech-title, .lab-title, .ct-title, .cta-band-title, .more-header h3,
.product-name, .step-title, .feature-pill-title, .tech-brand, .od-modal-title {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.025em;
}
h1 { font-weight: 700; line-height: 1.1 !important; }
h2, .tech-title, .lab-title { font-weight: 700; line-height: 1.15; }
h3, .product-name, .step-title, .feature-pill-title, .tech-brand { font-weight: 600; }
@media (max-width: 480px) {
  .hero-left h1 { font-size: clamp(36px, 10vw, 44px) !important; }
}

/* ── 2) Menüde aktif sayfa çizgisi ── */
nav .nav-links a { position: relative; }
nav .nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 2px;
  background: var(--accent, #1fb6c9); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
nav .nav-links a:hover::after { transform: scaleX(.45); }
nav .nav-links a.active::after { transform: scaleX(1); }
nav .nav-links a.active { color: var(--text) !important; }
body.lang-ar nav .nav-links a::after { transform-origin: right; }

/* ── 3) Sayfa geçişi: destekleyen tarayıcılarda sayfalar arası yumuşak solma ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
  /* Desteklemeyen tarayıcılar: sayfa açılırken hafif belirme (site.js 'page-fade' ekler) */
  html.page-fade body { animation: pageIn .4s ease both; }
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ── 4) Kaydırırken yumuşak belirme (JS yoksa içerik hep görünür) ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv:not(.in) { opacity: 0; transform: translateY(22px); }
  html.js .rv { transition: opacity .7s ease var(--rv-d, 0ms), transform .7s cubic-bezier(.22,1,.36,1) var(--rv-d, 0ms); }
}

/* ── 5) Koyu mod düğmesi ── */
.theme-toggle {
  flex: 0 0 auto; width: 38px; height: 38px; margin-left: 12px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border); background: transparent;
  color: var(--text); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-sun { display: none; }
body.all-dark .theme-toggle .ic-sun { display: block; }
body.all-dark .theme-toggle .ic-moon { display: none; }
@media (max-width: 880px) { .theme-toggle { width: 36px; height: 36px; margin-left: 6px; } }
/* index/urunler kökte koyu temalı: açık modda --text hâlâ açık renk, menüyü sabitle */
body:not(.all-dark) nav .nav-links a.active { color: #14161f !important; }
body:not(.all-dark) .theme-toggle { color: #2a2d3d; border-color: rgba(20,22,31,0.14); }
body:not(.all-dark) .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
body.theme-anim, body.theme-anim * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* ── Koyu mod: açık temalı sayfalar (hakkimizda / vaka-gonderimi / ekibimiz) ──
   index ve urunler'in kendi koyu teması (body.all-dark) zaten var. */
body.all-dark.page-light {
  --bg: #0b0c12; --bg2: #13151d; --bg3: #1b1e29;
  --border: rgba(255,255,255,0.09); --text: #eef0f7; --muted: #9a9fbf;
  --accent: oklch(70% 0.16 212); --accent2: oklch(70% 0.15 168); --accent-dim: oklch(70% 0.16 212 / 0.14);
  background: var(--bg); color: var(--text);
}
body.all-dark.page-light nav { background: rgba(11,12,18,0.86) !important; border-bottom-color: var(--border); }
body.all-dark.page-light .about-hero-glow { opacity: .16; }
body.all-dark.page-light .feature-pill,
body.all-dark.page-light .tech-card,
body.all-dark.page-light .process-steps,
body.all-dark.page-light .story-curtain,
body.all-dark.page-light .lab-grid .room-tile { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25); }
body.all-dark.page-light .tech-logo:not(.dark):not(.tech-logo--split) { background: #f4f5f8; border-color: transparent; }
body.all-dark.page-light .about-hero-circuit { opacity: .55; }
body.all-dark.page-light .team-hero { background: linear-gradient(160deg, #0d1820 0%, #0b0c12 45%, #0c1714 100%); }
body.all-dark.page-light .team-dots { background-image: radial-gradient(rgba(140,220,235,0.14) 1px, transparent 1.4px); }
body.all-dark.page-light .team-hero h1 {
  background: linear-gradient(115deg, #eef0f7 0%, #eef0f7 35%, oklch(72% 0.15 212) 70%, oklch(74% 0.14 168) 100%);
  -webkit-background-clip: text; background-clip: text;
}
body.all-dark.page-light .team-soon { background: rgba(19,21,29,0.8); color: oklch(78% 0.10 212); }
body.all-dark.page-light .cc-mail, body.all-dark.page-light .cc-call { background: var(--bg3); }
body.all-dark.page-light .step-visual { background: var(--bg3); }
/* Ürünler: koyu modda vitrin/özel tasarım kartları zaten değişkenlerle uyumlu */

/* ── Renk geçişli başlıklar (Ekibimiz başlığıyla aynı: koyu → turkuaz → yeşil) ──
   Vaka Gönderimi "Tamamen dijital iş akışı", Hakkımızda "Firmamız Hakkında", İletişim penceresi "Bize ulaşın" */
.about-hero h1, .team-hero h1, .od-modal-title {
  background: linear-gradient(115deg, #14141c 0%, #14141c 35%, oklch(48% 0.14 215) 70%, oklch(50% 0.13 165) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content; max-width: 100%; padding-bottom: .06em;
}
h1.grad-center { margin-inline: auto; }
body.all-dark.page-light .about-hero h1 {
  background-image: linear-gradient(115deg, #eef0f7 0%, #eef0f7 35%, oklch(72% 0.15 212) 70%, oklch(74% 0.14 168) 100%);
}
/* Telefonda başlık iki satıra bölününce kelime ortasında renk kırılmasın: geçiş çapraz */
@media (max-width: 600px) {
  h1.grad-center, .about-hero h1 {
    background-image: linear-gradient(165deg, #14141c 0%, #14141c 42%, oklch(48% 0.14 215) 78%, oklch(50% 0.13 165) 100%);
  }
  body.all-dark.page-light h1.grad-center, body.all-dark.page-light .about-hero h1 {
    background-image: linear-gradient(165deg, #eef0f7 0%, #eef0f7 42%, oklch(72% 0.15 212) 78%, oklch(74% 0.14 168) 100%);
  }
}

/* ── Sayfa zemini = Ana sayfa giriş bölümünün zemini (açık mod) ──
   Çok açık gri-beyaz + sol üstte turkuaz, sağ altta yeşil hafif ışık + ince doku. Işıklar ekrana sabit (kaydırınca hep görünür).
   Footer bu zemine dahil değil (kendi koyu rengi var). */
body.page-light:not(.all-dark), body:not(.all-dark):has(#products) {
  background-color: #f7f8fb !important;
  background-image:
    radial-gradient(circle 560px at 6% 24%, rgba(31,170,192,0.10), transparent 72%),
    radial-gradient(circle 420px at 94% 88%, rgba(38,190,140,0.09), transparent 72%) !important;
  background-attachment: fixed !important;
}
body:not(.all-dark) #products, body:not(.all-dark) #products.section-light { background: transparent !important; --bg: #f7f8fb !important; --bg2: #ffffff !important; --bg3: #e9ecf3 !important; }
body.page-light:not(.all-dark)::after, body:not(.all-dark):has(#products)::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media (max-width: 880px) { body.page-light::after, body:has(#products)::after { display: none; } }

/* ── Alt bilgi (footer) — tüm sayfalarda ortak düzen ──
   Logo+tanıtım+sosyal | Sayfalar | Ürünler | İletişim ; alt satır: telif + KVKK / Gizlilik. Her bilgi bir kez yazılır. */
footer.site-footer .footer-top {
  display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.25fr);
  gap: 48px; align-items: start; margin-bottom: 44px;
}
footer.site-footer .footer-logo { display: inline-block; margin-bottom: 16px; }
footer.site-footer .footer-logo img { display: block; width: 190px; height: auto; }
footer.site-footer .footer-brand p { max-width: 300px; margin-bottom: 20px; }
footer.site-footer .footer-social { display: flex; gap: 10px; margin: 0 !important; }
footer.site-footer .social-btn { width: 40px; height: 40px; border-radius: 10px; color: var(--text); }
footer.site-footer .footer-links-group h4 { font-family: 'Inter', sans-serif !important; font-size: 12px; letter-spacing: .12em; margin-bottom: 18px; color: var(--text); opacity: .85; }
footer.site-footer .footer-links-group ul { gap: 11px; }
footer.site-footer .footer-links-group a { font-size: 14px; }
footer.site-footer .footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.55; }
footer.site-footer .footer-contact li > svg { flex: 0 0 auto; margin-top: 3px; color: var(--accent); opacity: .9; }
footer.site-footer .footer-contact .copy-mail, footer.site-footer .footer-contact .ph-reveal { font-size: 14px; color: var(--muted); }
footer.site-footer .footer-contact .copy-mail:hover { color: var(--text); }
footer.site-footer .footer-hours { font-size: 13.5px !important; }
footer.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
footer.site-footer .footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
footer.site-footer .footer-legal a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
footer.site-footer .footer-legal a:hover { color: var(--text); }
@media (max-width: 1000px) {
  footer.site-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 560px) {
  footer.site-footer .footer-top { grid-template-columns: 1fr 1fr; }
  footer.site-footer .footer-brand, footer.site-footer .footer-contact { grid-column: 1 / -1; }
  footer.site-footer .footer-logo img { width: 160px; }
  footer.site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Ürünler: footer'dan gelen #urun-… bağlantıları menünün altında kalmasın */
.product-card[id] { scroll-margin-top: 130px; }

/* Ürünler girişi: kendi gri zemini ve ışıkları yerine sayfanın ortak zemini (alttaki bölümle arasında çizgi oluşmasın) */
body:not(.all-dark) .prod-hero { background: transparent !important; }
body:not(.all-dark) .prod-hero .hero-glow, body:not(.all-dark) .prod-hero .hero-glow2 { display: none; }

/* ── Kaydırınca küçülen menü (site.js nav'a .nav-compact ekler) ──
   92px → 64px (telefonda 60px), logo küçülür, zemin biraz daha opak + bulanık, altına hafif gölge. */
nav { transition: height .35s cubic-bezier(.22,1,.36,1), background-color .35s ease, box-shadow .35s ease; }
nav .nav-logo-img { transition: height .35s cubic-bezier(.22,1,.36,1); }
nav .nav-links a { transition: font-size .3s ease, color .2s; }
nav .nav-cta { transition: padding .3s ease, opacity .2s; }
nav.nav-compact { height: 64px !important; box-shadow: 0 6px 24px rgba(15,18,45,0.08); }
nav.nav-compact .nav-logo-img { height: 58px !important; }
nav.nav-compact .nav-links a { font-size: 18px; }
nav.nav-compact .nav-links a::after { bottom: -8px; }
nav.nav-compact .nav-cta { padding-top: 9px !important; padding-bottom: 9px !important; }
body:not(.all-dark) nav.nav-compact { background: rgba(247,248,251,0.92) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
body.all-dark nav.nav-compact { background: rgba(9,9,13,0.92) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
@media (max-width: 880px) {
  nav.nav-compact { height: 60px !important; }
  nav.nav-compact .nav-logo-img { height: 52px !important; }
}
@media (prefers-reduced-motion: reduce) { nav, nav .nav-logo-img, nav .nav-links a, nav .nav-cta { transition: none !important; } }