/**
 * HBR Data — Ortak çekirdek (hd-core)
 * Tüm hd-* sayfalarında yüklenir; sayfaya özel stiller kendi dosyalarında
 * (ör. ana sayfa: css/hd-home.css) bu dosyadan SONRA bağlanır.
 * "Editoryal Veri Dosyası" görsel dili. Bu sayfalarda css/style.css ve
 * css/sandbox-styles.css YÜKLENMEZ.
 */

:root {
  --hd-paper: #F6F4EE;
  --hd-paper-2: #EDEAE0;
  --hd-ink: #12201A;
  --hd-ink-soft: #41544A;
  --hd-emerald: #0E6B4F;
  --hd-emerald-bright: #12A375;
  --hd-line: #D9D4C7;
  --hd-dark: #0B231A;
  --hd-paper-on-dark: #EFEDE5;
  --hd-line-on-dark: rgba(239, 237, 229, 0.4);
  --hd-band-edge: transparent;
  --hd-btn-bg-hover: var(--hd-dark);
  --hd-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hd-font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --hd-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ---------- Koyu tema ----------
   Yalnızca token override; bileşen kuralları tema sorgusu İÇERMEZ.
   İkinci blok (kayıtlı tercih yokken sistem teması) birincisiyle eşit tutulmalı. */
:root[data-hd-theme="dark"] {
  --hd-paper: #0F1613;
  --hd-paper-2: #161F1A;
  --hd-ink: #ECEAE1;
  --hd-ink-soft: #A9B4AB;
  --hd-emerald: #2FBF8F;
  --hd-emerald-bright: #3BD3A0;
  --hd-line: rgba(236, 234, 225, 0.16);
  --hd-dark: #0A1F17;
  --hd-paper-on-dark: #ECEAE1;
  --hd-line-on-dark: rgba(236, 234, 225, 0.4);
  --hd-band-edge: var(--hd-line);
  --hd-btn-bg-hover: var(--hd-emerald-bright);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-hd-theme="light"]) {
    --hd-paper: #0F1613;
    --hd-paper-2: #161F1A;
    --hd-ink: #ECEAE1;
    --hd-ink-soft: #A9B4AB;
    --hd-emerald: #2FBF8F;
    --hd-emerald-bright: #3BD3A0;
    --hd-line: rgba(236, 234, 225, 0.16);
    --hd-dark: #0A1F17;
    --hd-paper-on-dark: #ECEAE1;
    --hd-line-on-dark: rgba(236, 234, 225, 0.4);
    --hd-band-edge: var(--hd-line);
    --hd-btn-bg-hover: var(--hd-emerald-bright);
  }
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Tema geçişi: öğeye özel transition tanımları (hover, menü vb.) bunu ezer;
   reduced-motion bloğu tümünü kapatır */
*, *::before, *::after {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--hd-font-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--hd-paper);
  color: var(--hd-ink);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }

h1, h2, h3, p, dl, dt, dd, ul { margin: 0; }

ul { padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; }

::selection { background: var(--hd-emerald); color: var(--hd-paper); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--hd-emerald);
  outline-offset: 3px;
}

.hd-no-scroll { overflow: hidden; }

/* ---------- Yapı taşları ---------- */
.hd-wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.hd-rule { border: 0; border-top: 1px solid var(--hd-line); margin: 0; }

.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  background: var(--hd-emerald);
  border: 1px solid var(--hd-emerald);
  color: var(--hd-paper);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hd-btn:hover { background: var(--hd-btn-bg-hover); border-color: var(--hd-btn-bg-hover); }

.hd-btn--sm { padding: 10px 18px; font-size: 0.85rem; }

.hd-btn--outline-light {
  background: transparent;
  border-color: var(--hd-paper-on-dark);
  color: var(--hd-paper-on-dark);
}

.hd-btn--outline-light:hover {
  background: var(--hd-paper-on-dark);
  border-color: var(--hd-paper-on-dark);
  color: var(--hd-dark);
}

.hd-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--hd-ink);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--hd-line);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.hd-arrow-link:hover { color: var(--hd-emerald); text-decoration-color: var(--hd-emerald); }

.hd-arrow-link .hd-arrow { text-decoration: none; transition: transform 0.2s ease; }

.hd-arrow-link:hover .hd-arrow { transform: translateX(4px); }

.hd-arrow-link--light { color: var(--hd-paper-on-dark); text-decoration-color: var(--hd-line-on-dark); }

.hd-arrow-link--light:hover { color: var(--hd-emerald-bright); text-decoration-color: var(--hd-emerald-bright); }

.hd-section-label {
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: start;
  align-self: start;
  white-space: nowrap;
}

.hd-section-label--flat {
  writing-mode: horizontal-tb;
  transform: none;
  margin-bottom: 28px;
}

.hd-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.hd-label-row .hd-section-label--flat { margin-bottom: 0; }

.hd-section-meta {
  font-family: var(--hd-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
}

.hd-section-meta--end { text-align: right; margin-bottom: 10px; }

/* ---------- Bölüm iskeleti ---------- */
.hd-section { padding: clamp(72px, 10vw, 130px) 0; }

.hd-split {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: clamp(24px, 4vw, 56px);
}

/* ---------- Header ---------- */
.hd-header { background: var(--hd-paper); border-bottom: 1px solid var(--hd-line); }

.hd-header-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hd-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hd-ink);
  text-decoration: none;
}

.hd-brand-logo { width: 34px; height: 34px; }

.hd-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }

.hd-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }

.hd-nav a:not(.hd-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hd-nav a:not(.hd-btn):hover { color: var(--hd-emerald); }

.hd-theme-toggle {
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--hd-line);
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--hd-ink-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hd-theme-toggle:hover { color: var(--hd-emerald); border-color: var(--hd-emerald); }

.hd-lang { display: flex; border: 1px solid var(--hd-line); }

.hd-lang button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  font-family: var(--hd-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hd-ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}

.hd-lang button + button { border-left: 1px solid var(--hd-line); }

.hd-lang button.hd-active { background: var(--hd-ink); color: var(--hd-paper); }

.hd-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--hd-line);
  color: var(--hd-ink);
}

/* ---------- Mobil menü ---------- */
.hd-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--hd-paper);
  padding: 16px clamp(20px, 5vw, 40px) 32px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s, background-color 0.2s ease, border-color 0.2s ease;
}

.hd-mobile-menu.hd-open {
  transform: none;
  visibility: visible;
  transition: transform 0.35s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.hd-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid var(--hd-line);
  padding-bottom: 12px;
}

.hd-menu-close {
  min-height: 44px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--hd-line);
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hd-ink);
}

.hd-mobile-nav { display: flex; flex-direction: column; margin-top: 8px; overflow-y: auto; }

.hd-mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 44px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hd-line);
  font-family: var(--hd-font-display);
  font-size: 1.6rem;
  color: var(--hd-ink);
  text-decoration: none;
}

.hd-mobile-nav a:hover { color: var(--hd-emerald); }

.hd-mobile-no {
  font-family: var(--hd-font-mono);
  font-size: 12px;
  color: var(--hd-ink-soft);
}

.hd-mobile-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hd-mobile-foot .hd-lang { display: inline-flex; }

/* ---------- Koyu bant · Açık çağrılar ---------- */
.hd-band {
  position: relative;
  background: var(--hd-dark);
  color: var(--hd-paper-on-dark);
  border-top: 1px solid var(--hd-band-edge);
  border-bottom: 1px solid var(--hd-band-edge);
  padding: clamp(64px, 8vw, 104px) 0;
}

.hd-band-status {
  position: absolute;
  top: 18px;
  right: clamp(20px, 5vw, 56px);
  font-family: var(--hd-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hd-emerald-bright);
}

.hd-band-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hd-band h2 {
  font-family: var(--hd-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 18px;
}

.hd-band-meta {
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--hd-emerald-bright);
}

.hd-band-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  justify-self: end;
}

/* ---------- Footer (kolofon) ---------- */
.hd-footer {
  background: var(--hd-paper-2);
  border-top: 1px solid var(--hd-line);
  padding: clamp(48px, 6vw, 72px) 0 32px;
}

.hd-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}

.hd-footer-desc { margin-top: 18px; color: var(--hd-ink-soft); font-size: 0.95rem; max-width: 34ch; }

.hd-footer-heading {
  font-family: var(--hd-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
  margin-bottom: 14px;
}

.hd-footer-col ul { display: flex; flex-direction: column; }

.hd-footer-col li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: var(--hd-ink);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hd-footer-col li a:hover { color: var(--hd-emerald); }

.hd-footer-col .hd-mail { font-family: var(--hd-font-mono); font-size: 0.9rem; }

.hd-mail-apps { display: flex; gap: 20px; }

.hd-mail-apps a {
  font-family: var(--hd-font-mono);
  font-size: 0.85rem;
  gap: 5px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--hd-line);
}

.hd-mail-apps a:hover { text-decoration-color: var(--hd-emerald); }

.hd-footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--hd-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.hd-footer-bottom p {
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--hd-ink-soft);
}

/* ---------- Hareket ---------- */
@keyframes hdFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hd-fade-up { animation: hdFadeUp 0.5s ease-out both; }

.hd-fade-up--d1 { animation-delay: 0.08s; }

.hd-fade-up--d2 { animation-delay: 0.16s; }

.hd-fade-up--d3 { animation-delay: 0.24s; }

.hd-fade-up--d4 { animation-delay: 0.32s; }

/* Progressive enhancement: .hd-reveal yalnızca JS ekler; JS yoksa içerik görünür kalır */
.hd-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hd-reveal.hd-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hd-nav { display: none; }
  .hd-menu-toggle { display: inline-flex; }
}

@media (max-width: 860px) {
  .hd-split { grid-template-columns: 1fr; }
  .hd-section-label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 24px;
  }
  .hd-section-meta--end { text-align: left; }
  .hd-label-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hd-band-grid { grid-template-columns: 1fr; }
  .hd-band-actions { justify-self: start; }
  .hd-footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hd-fade-up { animation: none; opacity: 1; transform: none; }
  .hd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Alt sayfa ortak desenleri (about / services / why-us · DOSYA 04-06)
   Kicker, sayfa hero, çizgili tanım listesi ve kapanış CTA'sı üç
   sayfada da aynen kullanıldığı için ortak katmanda tutulur.
   ============================================================ */

/* ---------- Aktif nav işareti ---------- */
.hd-nav a[aria-current="page"] { color: var(--hd-emerald); }

.hd-mobile-nav a[aria-current="page"] { color: var(--hd-emerald); }

/* ---------- Kicker (hero üstü mono etiket) ---------- */
.hd-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hd-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hd-emerald);
  margin-bottom: 28px;
}

.hd-kicker-line { width: 24px; height: 2px; background: var(--hd-emerald); flex: none; }

.hd-label-row .hd-kicker { margin-bottom: 0; }

/* ---------- Alt sayfa hero ---------- */
.hd-page-hero { padding-top: clamp(56px, 9vw, 110px); }

.hd-page-hero .hd-rule { margin-top: clamp(48px, 7vw, 88px); }

.hd-page-title {
  font-family: var(--hd-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  max-width: 22ch;
}

.hd-page-title em { font-style: normal; color: var(--hd-emerald); }

.hd-page-lead {
  max-width: 64ch;
  color: var(--hd-ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.hd-page-lead p + p { margin-top: 1em; }

/* ---------- 1px çizgili tanım listesi deseni ---------- */
.hd-fact { border-top: 1px solid var(--hd-line); padding: 20px 0; }

.hd-fact dt {
  font-family: var(--hd-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.hd-fact dd { color: var(--hd-ink-soft); font-size: 0.95rem; }

/* ---------- Kapanış CTA (tüm sayfalarda ortak çerçeveli blok) ---------- */
.hd-cta {
  border-top: 1px solid var(--hd-line);
  border-bottom: 1px solid var(--hd-line);
  padding: clamp(72px, 9vw, 120px) 0;
}

.hd-cta-block {
  max-width: 880px;
  border: 1px solid var(--hd-line);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.hd-cta-main { padding: clamp(26px, 4vw, 44px); }

.hd-cta h2 {
  font-family: var(--hd-font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hd-cta-desc { color: var(--hd-ink-soft); font-size: 0.95rem; }

.hd-cta-contact {
  border-left: 1px solid var(--hd-line);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hd-cta-email-label {
  font-family: var(--hd-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
  margin-bottom: 8px;
}

.hd-cta-email { font-family: var(--hd-font-mono); font-size: 1rem; }

.hd-cta-btn { margin-top: 24px; }

@media (max-width: 860px) {
  .hd-cta-block { grid-template-columns: 1fr; }
  .hd-cta-contact { border-left: 0; border-top: 1px solid var(--hd-line); }
}