/* Fontlar (@font-face) satır içi kritik CSS'e taşındı — çift indirmeyi önler. */

/* ---------- 1. Tema değişkenleri ---------- */
:root {
  --background: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f2f2f0;
  --text-primary: #0c0c0e;
  --text-secondary: #60646c;
  --border: #e6e6e3;
  --border-strong: #d4d4d0;
  --accent: #4f46e5;
  --accent-hover: #3f38c8;
  --accent-soft: rgba(79, 70, 229, 0.08);
  --header-bg: rgba(250, 250, 249, 0.82);
  /* Koyu yüzeyler (her iki temada da sabit) */
  --ink: #0b0b0d;
  --ink-2: #121214;
  --ink-border: #232327;
  --ink-text: #f4f4f5;
  --ink-muted: #9b9ea7;
  --shadow-sm: 0 1px 2px rgba(12, 12, 14, 0.04);
  --shadow-md: 0 10px 34px rgba(12, 12, 14, 0.07);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --header-h: 72px;
  --font: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Instrument Fallback", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --brand-item: #6b6b6c;
}

[data-theme="dark"] {
  --background: #000000;
  --surface: #0c0c0d;
  --surface-2: #131315;
  --text-primary: #f4f4f5;
  --text-secondary: #9b9ea7;
  --border: #1e1e22;
  --border-strong: #2d2d33;
  --accent: #6d5dfb;
  --accent-hover: #8073ff;
  --accent-soft: rgba(109, 93, 251, 0.12);
  --header-bg: rgba(0, 0, 0, 0.72);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.45);
  --brand-item: #7c7e86;
}

/* ---------- 2. Reset & temel ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: -0.006em;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- 3. Yardımcılar ---------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 110px; }

.section-head {
  max-width: 720px;
  margin: 0 auto 72px;
  text-align: center;
}

/* İnce çizgili rozet (referans stili) */
.section-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
  background: transparent;
}

.section-label.light { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.75); }

.section-title {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.title-line { display: block; }

/* Serif italic vurgu satırı — tasarımın imzası */
.serif-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: 1em;
  line-height: 1.14;
}

.section-subtitle {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 560px;
  margin-inline: auto;
}

.glass {
  background: var(--surface);
  border: 1px solid var(--border);
}

.glass-strong {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ---------- 4. Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 14px;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  will-change: transform;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }

.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  background: transparent;
}

.btn-ghost:hover { border-color: var(--text-primary); transform: translateY(-2px); }

.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn-lg { padding: 16px 34px; }
.btn-block { width: 100%; }

/* ---------- 5. Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1000;
}

/* transform: scaleX — width yerine; layout tetiklemez, yalnizca compositor'da calisir.
   Destekleyen tarayicilarda JS'siz CSS scroll-driven animasyon devreye girer. */
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress span {
    animation: scrollProgressGrow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes scrollProgressGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Menü asla sarmasın; sığmazsa öğeler kırılma noktalarında gizlenir */
.main-nav { min-width: 0; overflow: hidden; }
.nav-list { flex-wrap: nowrap; }

.logo {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

.logo-dot { color: var(--accent); }

.logo img { width: 241px; height: 45px; max-width: 100%; object-fit: contain; }
.service-card h3 a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border-strong); }
.service-card h3 a:hover { color: var(--accent); }
.service-page .sector-toc ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 24px; list-style: none; padding: 0; margin-top: 12px; counter-reset: toc; }
.service-faq { border-bottom: 1px solid var(--border); padding: 18px 0; }
.service-faq summary { font-weight: 700; cursor: pointer; line-height: 1.5; }
.service-faq p { color: var(--text-secondary); line-height: 1.7; margin-top: 14px; }
.service-hub-link { margin-top: 24px; color: var(--accent); }
.service-page .sector-section > p { max-width: 85ch; }
.accordion-trigger [data-i18n] { min-width: 0; overflow-wrap: anywhere; }
.stat-item { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .site-header .logo { min-width: 0; flex-shrink: 1; }
  .site-header .logo img { width: clamp(100px, 30vw, 145px); height: auto; }
  .site-header .header-inner { gap: 10px; }
  .site-header .header-actions { gap: 6px; }
  .site-header .lang-toggle { gap: 5px; padding: 8px; }
  .site-header .theme-toggle, .site-header .menu-toggle { width: 36px; height: 36px; }
}

.logo-dark {
  display: none;
}

html[data-theme="dark"] .logo-light {
  display: none;
}

html[data-theme="dark"] .logo-dark {
  display: block;
}

.nav-list { display: flex; gap: 2px; }

.nav-link {
  display: block;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-link:hover { color: var(--text-primary); background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Dil seçici */
.lang-select { position: relative; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  font-weight: 600;
  font-size: 0.82rem;
  transition: border-color 0.2s var(--ease);
}

.lang-toggle:hover { border-color: var(--text-primary); }
.lang-toggle .chevron { transition: transform 0.25s var(--ease); }
.lang-select.open .chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

.lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-toggle .lang-flag { font-size: 0.95rem; }

.lang-select.open .lang-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color 0.15s, color 0.15s;
}

.lang-menu a:hover,
.lang-menu a:focus-visible { background: var(--surface-2); color: var(--text-primary); }
.lang-menu a[aria-current="true"] { color: var(--text-primary); background: var(--surface-2); }

/* Tema butonu */
.theme-toggle {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  transition: border-color 0.2s var(--ease), transform 0.4s var(--ease);
}

.theme-toggle:hover { border-color: var(--text-primary); transform: rotate(20deg); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  align-items: center;
  z-index: 950;
}

.menu-toggle span {
  width: 16px; height: 1.8px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobil menü */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--background);
  padding: calc(var(--header-h) + 32px) 24px 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav-list li { border-bottom: 1px solid var(--border); }

.mobile-nav-link {
  display: block;
  padding: 16px 4px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.2s;
}

.mobile-menu.open .mobile-nav-link { opacity: 1; transform: translateY(0); }
.mobile-nav-link:hover { color: var(--accent); }
.mobile-cta { margin-top: 28px; }

/* ---------- 7. Hero — merkezli, editoryal ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: 0;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 48px;
  text-align: left;
}

.hero-copy { max-width: 560px; }

.badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 32px;
}

.hero-title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 900px;
}

.hero-title span { display: block; }
.hero-title .serif-em { margin-top: 2px; }

.hero-subtitle {
  margin-top: 26px;
  max-width: 600px;
  color: var(--text-secondary);
  font-size: 1.08rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 36px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}

.trust-avatars { display: flex; }

.mini-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--background);
  margin-left: -9px;
  background: #16161a;
}

.mini-avatar:first-child { margin-left: 0; }
.mini-avatar[style*="--i:3"] { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }

.hero-trust p { font-size: 0.86rem; color: var(--text-secondary); max-width: 290px; text-align: left; }

.hero-stats {
  display: flex;
  justify-content: flex-start;
  gap: 48px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.hero-stat { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
.hero-stat dt { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.hero-stat dd {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* --- Hero görseli: telefonlar + ufuk ışıması --- */
.hero-visual {
  position: relative;
  width: 100%;
  height: 620px;
  margin-top: 0;
}

/* Ufuk çizgisi + hafif indigo ışıma (referanstaki planet arc) */
.hero-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -340px;
  width: 1600px;
  height: 700px;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: radial-gradient(ellipse 50% 42% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}

/* --- Telefon mockup'ları (nötr, tek aksan) --- */
.phone {
  position: absolute;
  width: 252px;
  aspect-ratio: 9 / 18.6;
  border-radius: 42px;
  background: #f4f4f6;
  border: 6px solid #101013;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

[data-theme="dark"] .phone { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }

.phone-notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 22px;
  background: #101013;
  border-radius: 999px;
  z-index: 5;
}

.phone-notch.sm { width: 60px; height: 16px; top: 7px; }

.phone-screen {
  position: absolute;
  inset: 0;
  padding: 44px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f4f4f6;
}

.phone-front { left: calc(50% - 236px); top: 36px; z-index: 3; transform: rotate(-5deg); }
.phone-back { left: calc(50% - 6px); top: 70px; z-index: 2; transform: rotate(5deg) scale(0.96); }

/* Ekran içi öğeler — nötr palet, tek indigo aksan */
.ps-header { display: flex; align-items: center; gap: 8px; }
.ps-dot { width: 22px; height: 22px; border-radius: 8px; background: var(--accent); flex-shrink: 0; }
.ps-avatar { width: 26px; height: 26px; border-radius: 50%; background: #16161a; flex-shrink: 0; }
.ps-bell { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #e6e6ea; margin-left: auto; flex-shrink: 0; }

.ps-bar { height: 8px; border-radius: 4px; background: #e2e2e8; }
.ps-bar.sm { height: 6px; }
.ps-bar.light { background: rgba(255, 255, 255, 0.28); }
.w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; }
.w-55 { width: 55%; } .w-60 { width: 60%; } .w-70 { width: 70%; }

/* Bakiye kartı — düz mürekkep, gradient yok */
.ps-balance-card {
  background: #101013;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-balance-num { color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }

.ps-quick-actions { display: flex; gap: 8px; margin-top: 6px; }
.ps-quick-actions i { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); }

.ps-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 76px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 16px;
}

.ps-chart.tall { height: 110px; flex: 1; max-height: 130px; }

.ps-chart i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 5px;
  background: #dcdce4;
}

.ps-chart i:nth-last-child(2) { background: var(--accent); }

.ps-tx, .ps-health-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 13px;
  padding: 9px 11px;
}

.ps-tx b, .ps-health-row b { margin-left: auto; font-size: 0.7rem; color: #101013; }

.ps-tx-ic { width: 24px; height: 24px; border-radius: 9px; flex-shrink: 0; background: #e9e9ef; }
.ps-tx-ic.g-violet { background: var(--accent); }
.ps-tx-ic.g-mint { background: #16161a; }
.ps-tx-ic.g-peach { background: #e9e9ef; }

/* Sosyal ekran */
.ps-feed-card {
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-img { height: 78px; border-radius: 11px; background: linear-gradient(135deg, #ececf2, #d8d8e2); }
.ps-img.g-mint, .ps-img.g-peach { background: linear-gradient(135deg, #e6e6ec, #d2d2dc); }
.ps-img.g-violet { background: linear-gradient(135deg, #d9d6f8, #c3bdf1); }

.ps-tabbar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 999px;
  padding: 9px;
}

.ps-tabbar i { width: 18px; height: 18px; border-radius: 50%; background: #e2e2e8; }
.ps-tabbar i.active { background: var(--accent); }

/* Sağlık ekranı */
.ps-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }

.ps-ring {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) 0 72%, #e2e2e8 72% 100%);
}

.ps-ring::before {
  content: "";
  position: absolute;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: #f4f4f6;
}

.ps-ring span { position: relative; font-weight: 700; font-size: 1.3rem; color: #101013; }

/* AI ekranı */
.ps-chat-bot, .ps-chat-user {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
}

.ps-chat-bot { background: #fff; border: 1px solid #ececf1; border-bottom-left-radius: 5px; color: #101013; align-self: flex-start; }
.ps-chat-user { background: #101013; color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }

.ps-chat-bot.typing { display: flex; gap: 4px; padding: 12px 14px; }
.ps-chat-bot.typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: typingBounce 1.2s infinite;
}
.ps-chat-bot.typing i:nth-child(2) { animation-delay: 0.15s; }
.ps-chat-bot.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ps-chat-input {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 999px;
  padding: 10px 13px;
}

.ps-send { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-left: auto; }

/* Yüzen kartlar — minimal cam */
.float-card {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.float-card svg { color: var(--accent); flex-shrink: 0; }
.float-card-1 { top: 48px; right: -6px; left: auto; }
.float-card-2 { bottom: 96px; left: -10px; }

.float { animation: floatY 5s ease-in-out infinite; }
.float-slow { animation: floatY 7s ease-in-out infinite reverse; }

@keyframes floatY {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

/* ---------- 8. Marka şeridi ---------- */
.brands { padding-block: 64px 40px; overflow: hidden; }

.brands-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}

.marquee:hover .marquee-track { animation-duration: 64s; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.brand-item {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* WCAG AA: opacity ile karartmak yerine on-hesaplanmis renk (light 5.10:1 / dark 5.19:1) */
  color: var(--brand-item);
  opacity: 1;
  white-space: nowrap;
  transition: opacity 0.25s, color 0.25s;
}

.brand-item:hover { opacity: 1; color: var(--text-primary); }

/* ---------- 9. Süreç ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.process-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 26px 26px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.process-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.process-num {
  position: absolute;
  top: 20px; right: 22px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.process-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  margin-bottom: 44px;
  transition: transform 0.35s var(--ease);
}

.process-card:hover .process-icon { transform: scale(1.06); }

.process-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.process-card p { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 18px; }

.process-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- 10. Hizmetler ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.service-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  margin-bottom: 40px;
  transition: transform 0.35s var(--ease);
}

.service-card:hover .service-icon { transform: scale(1.06); }

.service-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.service-card p { font-size: 0.87rem; color: var(--text-secondary); }

/* ---------- 11. Projeler — koyu vaka kartları ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.project-card {
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.project-card:hover { transform: translateY(-6px); border-color: #33333a; }

.project-visual {
  position: relative;
  height: 340px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%), var(--ink-2);
  border-bottom: 1px solid var(--ink-border);
}

.phone-mini {
  position: relative;
  width: 172px;
  border-width: 5px;
  border-radius: 32px;
  z-index: 2;
  transition: transform 0.5s var(--ease);
  will-change: transform;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.phone-mini .phone-screen { padding: 36px 12px 12px; gap: 10px; }
.phone-mini .ps-balance-card { padding: 12px; border-radius: 14px; }
.phone-mini .ps-balance-num { font-size: 1.05rem; }
.phone-mini .ps-img { height: 56px; }

.tilt-left { transform: rotate(-4deg) translateY(12px); }
.tilt-right { transform: rotate(4deg) translateY(12px); }
.project-card:hover .tilt-left { transform: rotate(-2deg) translateY(2px); }
.project-card:hover .tilt-right { transform: rotate(2deg) translateY(2px); }

.project-body { padding: 32px 32px 34px; color: var(--ink-text); }

.project-sector {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.project-name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: #fff;
}

.project-body > p { font-size: 0.93rem; color: var(--ink-muted); }

.project-metric {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-border);
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.project-metric strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin-right: 8px;
}

.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.project-tags li {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink-muted);
  border: 1px solid var(--ink-border);
  padding: 5px 12px;
  border-radius: 999px;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
}

.project-link svg { transition: transform 0.3s var(--ease); color: var(--accent); }
.project-link:hover svg { transform: translate(3px, -3px); }

/* ---------- 12. İstatistikler ---------- */
.stats { padding-block: 0 110px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-radius: var(--radius-lg);
  padding: 52px 40px;
}

.stat-item { text-align: center; position: relative; }
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px; top: 12%;
  height: 76%;
  width: 1px;
  background: var(--border);
}

.stat-value {
  display: block;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ---------- 13. Neden biz ---------- */
.why-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: start;
}

.why-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.why-sticky .section-title { margin-top: 0; text-align: left; }
.why-sticky .section-subtitle { margin-inline: 0; }
.why-sticky .btn { margin-top: 30px; }

.why-list { display: flex; flex-direction: column; }

.why-item {
  display: flex;
  gap: 28px;
  padding: 30px 12px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s var(--ease), padding 0.3s var(--ease);
  border-radius: var(--radius-sm);
}

.why-item:first-child { border-top: 1px solid var(--border); }
.why-item:hover { background: var(--surface); padding-inline: 24px; }

.why-num {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
  flex-shrink: 0;
  width: 32px;
  background: none;
}

.why-item h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.02em; }
.why-item p { font-size: 0.92rem; color: var(--text-secondary); }

/* ---------- 14. Yorumlar (slider) ---------- */
.testimonials { overflow: hidden; }

.slider { margin: 0 auto; }

.t-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 8px;
  scrollbar-width: none;
  cursor: grab;
}

.t-scroller::-webkit-scrollbar { display: none; }
.t-scroller.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.t-scroller:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }

.testimonial-card {
  flex: 0 0 min(400px, 82%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px 28px 24px;
  text-align: left;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.testimonial-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.stars { color: var(--accent); font-size: 0.82rem; letter-spacing: 3px; }
.stars .half { opacity: 0.35; }

.testimonial-card blockquote {
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  background: #16161a;
  flex-shrink: 0;
}

.avatar-lg { width: 84px; height: 84px; font-size: 1.35rem; }

.testimonial-author > div { text-align: left; }
.testimonial-author strong { display: block; font-size: 0.94rem; letter-spacing: -0.01em; }
.testimonial-author span { font-size: 0.82rem; color: var(--text-secondary); }

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 32px;
}

.slider-btn {
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}

.slider-btn:hover { background: var(--text-primary); border-color: var(--text-primary); color: var(--background); transform: scale(1.05); }

.slider-dots { display: flex; gap: 8px; }

/* Gorsel olarak 8px nokta, ama 44x44 dokunma hedefi (SC 2.5.8) */
.slider-dots .dot {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: none;
  border: none;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.slider-dots .dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--text-secondary);
  transition: width 0.3s var(--ease), background-color 0.3s;
}

.slider-dots .dot.active::before { width: 26px; background: var(--text-primary); }
.slider-dots .dot:hover::before { background: var(--text-primary); }

/* ---------- 16. SSS — minimal çizgi listesi ---------- */
.faq-inner { max-width: 800px; }
.faq-head { margin-bottom: 48px; }

.accordion-item {
  border-bottom: 1px solid var(--border);
  background: transparent;
  margin-bottom: 0;
  border-radius: 0;
}

.accordion-item:first-child { border-top: 1px solid var(--border); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.accordion-trigger:hover { color: var(--accent); }

.accordion-icon {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease), border-color 0.3s, background-color 0.3s;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), background-color 0.3s;
}

.accordion-icon::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.accordion-icon::after { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }

.accordion-item.open .accordion-icon { transform: rotate(45deg); border-color: var(--accent); background: var(--accent-soft); }
.accordion-item.open .accordion-icon::before,
.accordion-item.open .accordion-icon::after { background: var(--accent); }

/* grid-template-rows 0fr->1fr: JS'in scrollHeight okumasina gerek kalmaz,
   dolayisiyla acilis/kapanista zorunlu yeniden duzenleme (forced reflow) olusmaz */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s var(--ease);
}

/* Grid ogesi padding TASIMAMALI — padding satiri 0fr'de bile sifirlamaz */
.accordion-inner { min-height: 0; overflow: hidden; }

.accordion-item.open .accordion-panel { grid-template-rows: 1fr; }

.accordion-panel p {
  padding: 0 4px 26px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 640px;
}

/* ---------- 17. İletişim — tek koyu kart ---------- */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  color: var(--ink-text);
  position: relative;
  overflow: hidden;
}

.contact-copy .section-label { margin-bottom: 20px; }

.contact-copy h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
}

.contact-copy > p { margin-top: 18px; color: var(--ink-muted); font-size: 1rem; }

.contact-points { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.contact-points li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 0.95rem; color: var(--ink-text); }
.contact-points svg { color: var(--accent); flex-shrink: 0; }

.contact-form {
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  backdrop-filter: none;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; }

.form-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35); /* 3.21:1 — SC 1.4.11 */
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, 0.5); } /* 5.19:1 */

.form-field select option { color: #0e1120; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.form-field textarea { resize: vertical; min-height: 110px; }

.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea { border-color: #f87171; }

.form-error {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #fca5a5;
  margin-top: 6px;
  min-height: 1em;
}

/* Gönder butonu + spinner */
.btn-spinner {
  display: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#submitBtn.loading { pointer-events: none; opacity: 0.85; }
#submitBtn.loading .btn-spinner { display: inline-block; }

.form-success {
  display: none;
  margin-top: 16px;
  text-align: center;
  font-weight: 600;
  color: #a5b4fc;
}

.form-success.show { display: block; animation: fadeUp 0.5s var(--ease); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 18. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 72px;
  margin-top: 110px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-brand p {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 300px;
}

.footer-social { display: flex; gap: 8px; margin-top: 24px; }

.footer-social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}

.footer-social a:hover {
  color: var(--background);
  background: var(--text-primary);
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.footer-col li { margin-bottom: 12px; }

.footer-col a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--text-primary); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-block: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---------- 19. Yukarı dön ---------- */
.back-to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 800;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--text-primary);
  color: var(--background);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }

/* ---------- 20. Reveal animasyonları ---------- */
/* JS yoksa (ve ilk boyamada) icerik GORUNUR kalir — LCP asla JS'e kilitlenmez.
   .js sinifi <head>'deki satir ici script tarafindan ilk boyamadan once eklenir. */
.reveal { opacity: 1; transform: none; }

.js .reveal:not(.visible) {
  opacity: 0;
  transform: translateY(24px);
}

.js .reveal {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

/* will-change YOK: transform/opacity zaten compositor'da calisir. Yukleme
   aninda 52 ogenin hepsine katman ayirmak net kayipti. */

/* Hero ilk ekranda: asla gizlenmez, LCP hemen boyanir */
.hero .reveal, .hero-title, .hero-title span { opacity: 1 !important; transform: none !important; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .process-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .float-card-1 { left: auto; right: 4%; }
  .float-card-2 { left: 4%; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .hero-copy { max-width: 640px; margin-inline: auto; }
  .hero-ctas, .hero-stats { justify-content: center; }
  .hero-stat { align-items: center; }
  .hero-visual { margin-top: 64px; height: 500px; }
  .phone-front { left: calc(50% - 262px); top: 10px; }
  .phone-back { left: calc(50% + 10px); top: 44px; }
}

@media (max-width: 900px) {
  .section { padding-block: 80px; }
  .hero { padding-top: calc(var(--header-h) + 56px); }
  .hero-visual { height: 470px; margin-top: 56px; }
  .phone { width: 218px; }
  .phone-front { left: calc(50% - 224px); }
  .phone-back { left: calc(50% + 6px); }
  .why-inner { grid-template-columns: 1fr; gap: 40px; }
  .why-sticky { position: static; }
  .contact-card { grid-template-columns: 1fr; padding: 44px 28px; gap: 36px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; padding: 40px 28px; }
  .stat-item:nth-child(2)::after { display: none; }
}

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
  .process-grid, .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-stats { gap: 32px; flex-wrap: wrap; }
  .hero-visual { height: 410px; }
  .phone { width: 188px; }
  .phone-front { left: calc(50% - 194px); top: 16px; }
  .phone-back { left: calc(50% + 4px); top: 44px; }
  .float-card { padding: 10px 14px; font-size: 0.74rem; }
  .float-card-2 { bottom: 70px; }
  .testimonial-card { flex-basis: 86%; padding: 26px 22px; }
  .project-visual { height: 300px; }
  .project-body { padding: 26px 24px 28px; }
  .hero-trust p { max-width: 240px; }
  .site-footer { margin-top: 80px; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .float, .float-slow { animation: none; }
  /* !important sart: `.js .reveal:not(.visible)` ozgullugu (0,3,0) bunu ezerdi */
  .reveal,
  .js .reveal:not(.visible) { opacity: 1 !important; transform: none !important; }
}

/* ---------- 23. Mikro etkileşimler & mobil rötuşlar ---------- */
body { -webkit-tap-highlight-color: transparent; }

.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.logo-dot { transition: color 0.25s; }
.logo:hover .logo-dot { color: var(--accent-hover); }

.nav-link { position: relative; }

@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-title { font-size: clamp(2.15rem, 8.6vw, 2.7rem); }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .hero-visual { height: 420px; margin-top: 48px; }
  .section-head { margin-bottom: 48px; }
  .back-to-top { right: 16px; bottom: 16px; }
  .contact-form { padding: 26px 20px; }
}

/* ---------- 24. SSS ikonları & proje kartı başlığı ---------- */
.accordion-trigger { justify-content: flex-start; }
.accordion-icon { margin-left: auto; }

.faq-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  flex-shrink: 0;
}

.project-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.project-head .project-sector { margin-bottom: 2px; }
.project-head .project-name { margin-bottom: 0; }

/* Uygulama ikonu — gerçek ikon görselleri eklenene kadar harf rozeti */
.app-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: #1a1a1f;
  border: 1px solid var(--ink-border);
  flex-shrink: 0;
  overflow: hidden;
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; }

/* Öne çıkan geniş vaka kartı */
.project-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.project-card.wide .project-visual { height: 100%; min-height: 360px; border-bottom: none; border-right: 1px solid var(--ink-border); }

@media (max-width: 900px) {
  .project-card.wide { grid-template-columns: 1fr; }
  .project-card.wide .project-visual { height: 300px; min-height: 0; border-right: none; border-bottom: 1px solid var(--ink-border); }
}

/* ---------- 25. Uygulama renk temaları ---------- */
.theme-faturika { --app: #0a9463; }
.theme-tekposta { --app: #2563eb; }
.theme-jetvpn { --app: #15a38a; }
.theme-rahma { --app: #c9a227; }
.theme-ahenk { --app: #8b5cf6; }
.theme-sobehub { --app: #e0af0e; }

[class*="theme-"] { --app-deep: color-mix(in srgb, var(--app) 62%, #000); --app-t1: color-mix(in srgb, var(--app) 18%, #fff); --app-t2: color-mix(in srgb, var(--app) 34%, #fff); }

[class*="theme-"] .project-visual { background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--app) 14%, transparent), transparent 72%), var(--ink-2); }
[class*="theme-"] .ps-dot,
[class*="theme-"] .ps-send,
[class*="theme-"] .ps-tabbar i.active,
[class*="theme-"] .ps-tx-ic.g-violet { background: var(--app); }
[class*="theme-"] .ps-tx-ic.g-peach { background: var(--app-t2); }
[class*="theme-"] .ps-chart i:nth-last-child(2) { background: var(--app); }
[class*="theme-"] .ps-ring { background: conic-gradient(var(--app) 0 72%, #e2e2e8 72% 100%); }
[class*="theme-"] .ps-chat-user { background: var(--app); }
[class*="theme-"] .ps-balance-card { background: linear-gradient(135deg, var(--app), var(--app-deep)); }
[class*="theme-"] .ps-img.g-violet { background: linear-gradient(135deg, var(--app-t1), var(--app-t2)); }
[class*="theme-"] .ps-img.g-mint { background: linear-gradient(135deg, #ececf0, var(--app-t1)); }
[class*="theme-"] .app-icon { background: var(--app); border-color: transparent; }
[class*="theme-"] .project-link svg { color: var(--app); }

/* Tek Posta — kurumsal e-posta ekranı */
.screen-mail .ps-mail-search { padding: 10px; border-radius: 9px; background: #f1f5f9; }
.ps-mail-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #edf0f5; }
.ps-mail-lines { display: flex; flex: 1; flex-direction: column; gap: 7px; }
.ps-mail-row.unread .ps-bar:first-child { background: var(--app-t2); }
.ps-mail-row.unread i { width: 5px; height: 5px; border-radius: 50%; background: var(--app); flex-shrink: 0; }
.ps-mail-preview { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 12px; background: #eff6ff; }
.screen-mail .w-90 { width: 90%; }
.screen-mail .w-75 { width: 75%; }

/* Rahma — gold & antrasit ekran */
.theme-rahma .phone-screen { background: #1f1f23; }
.theme-rahma .ps-health-row, .theme-rahma .ps-tabbar { background: #2a2a2f; border-color: #37373d; }
.theme-rahma .ps-health-row b { color: var(--app); }
.theme-rahma .ps-bar { background: #3b3b42; }
.theme-rahma .ps-tabbar i { background: #3b3b42; }
.theme-rahma .ps-tabbar i.active { background: var(--app); }
.theme-rahma .phone { background: #1f1f23; }

/* SobeHub — sarı balon, koyu metin */
.theme-sobehub .ps-chat-user { color: #1a1a1f; }

/* ---------- 26. Logo, skip link, aktif menü ---------- */
.logo-dot {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.3s var(--ease), color 0.25s;
}

.logo:hover .logo-dot { transform: translateY(-2px); }

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1100;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  transform: translateY(-72px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

.skip-link:focus-visible { transform: none; opacity: 1; pointer-events: auto; }

.nav-link.active { color: var(--text-primary); background: var(--surface-2); }

/* ==========================================================================
   25. PERFORMANS — ilk boyama, fold altı erteleme, mobil ağırlık azaltma
   ========================================================================== */

/* NOT: Burada daha önce `content-visibility: auto` kullanıldı ve kaldırıldı.
   Kazancı bu sayfada küçüktü (~9 bölümün ilk layout'u), buna karşılık:
   · SSS akordiyonu gibi açılır içeriklerin yüksekliğini bozuyordu,
   · kaydırma çubuğunun konumunu zıplatma riski taşıyordu.
   Asıl performans kazancı satır içi kritik CSS, self-hosted font ve
   %54 küçülen JS'ten geliyor; bu riski almaya değmez. */

/* Marka şeridi yalnızca kendi içinde izole edilir — güvenli ve yeterli */

/* Marka şeridi: fold sınırında, sadece içeriği izole et */
.brands { contain: layout paint; }

/* Mobilde backdrop-filter GPU'da pahalı — düz opak arka planla değiştir */
@media (max-width: 768px) {
  .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--background);
  }
}

/* Marka şeridi animasyonu için duraklatma (SC 2.2.2) — .marquee-paused JS ile eklenir */
.marquee-paused .marquee-track { animation-play-state: paused; }

.marquee-toggle {
  display: block;
  margin: 14px auto 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface);
  transition: color 0.2s, border-color 0.2s;
}

.marquee-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* Skip link hedefi olan <main> odaklandığında görsel gürültü yapmasın */
main:focus { outline: none; }

/* SSS soruları artık <h3> — görsel olarak tetikleyicinin içinde kalmalı */
.accordion-trigger .faq-q {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  text-align: left;
  flex: 1;
}

/* Footer başlıkları h4 -> h3 olduğunda görsel boyut korunsun */
.footer-col h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Görsel olarak gizli ama ekran okuyucuya açık başlıklar */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .accordion-panel { transition: none; }
}

/* ==========================================================================
   27. HERO GİRİŞİ — saf CSS, JS beklemez
   LCP elemanı (<h1>) hiç animasyonlu değil; diğer hero öğeleri yalnızca
   transform ile kayar (opacity animasyonu LCP'yi geciktirdiği için yok).
   ========================================================================== */
.hero-in {
  animation: heroIn 0.6s var(--ease) both;
  animation-delay: calc(var(--hero-i, 0) * 0.07s);
}

.badge.hero-in        { --hero-i: 0; }
.hero-subtitle.hero-in{ --hero-i: 1; }
.hero-ctas.hero-in    { --hero-i: 2; }
.hero-trust.hero-in   { --hero-i: 3; }
.hero-stats.hero-in   { --hero-i: 4; }

@keyframes heroIn {
  from { transform: translateY(18px); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-in { animation: none; }
}

/* ==========================================================================
   28. İÇERİK SAYFALARI — yasal metinler, 404, rehberler
   ========================================================================== */
.doc-page { padding-top: calc(var(--header-h) + 72px); }
.doc-inner { max-width: 760px; }

.breadcrumb { margin-bottom: 28px; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.5;
}

.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 600; }

.doc-title {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}

.doc-lead {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 44px;
}

.doc-body { font-size: 1rem; line-height: 1.75; }

.doc-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 44px 0 14px;
}

.doc-body h2:first-child { margin-top: 0; }

.doc-body p { margin-bottom: 18px; color: var(--text-secondary); }
.doc-body strong { color: var(--text-primary); font-weight: 600; }

.doc-body ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 22px;
  color: var(--text-secondary);
}

.doc-body li { margin-bottom: 9px; }

.doc-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-body a:hover { color: var(--accent-hover); }

.doc-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Yayına almadan önce doldurulması gereken alanlar için uyarı kutusu */
.doc-note {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: 18px 20px;
  margin-bottom: 40px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .doc-page { padding-top: calc(var(--header-h) + 40px); }
}

/* ==========================================================================
   29. SAYAÇ KARARLILIĞI + FORM ONAYI
   ========================================================================== */

/* Sayılar animasyonla büyürken satır genişliği oynamasın (fold içi CLS) */
.stat-number {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* KVKK açık rıza kutusu */
.form-consent { margin-top: 4px; }

.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
  cursor: pointer;
}

.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-consent a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.form-consent a:hover { color: var(--accent); }
.form-field.invalid .form-consent label,
.form-consent.invalid label { color: #fca5a5; }

/* ==========================================================================
   30. SEKTÖR SAYFALARI
   ========================================================================== */
.sector-page { padding-top: calc(var(--header-h) + 64px); }
.sector-page .container { max-width: 860px; }

.sector-head { margin-bottom: 40px; }

.sector-lead {
  margin-top: 16px;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* --- Fiyat kutusu --- */
.sector-price {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 24px 26px;
  margin-bottom: 52px;
}

.sector-price-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.sector-price-value {
  display: block;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.sector-price-note {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 58ch;
}

.sector-price-factors { margin-top: 16px; }

.sector-price-factors summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}

.sector-price-factors summary::-webkit-details-marker { display: none; }
.sector-price-factors summary::before { content: "+ "; }
.sector-price-factors[open] summary::before { content: "− "; }

.sector-price-factors ul,
.sector-price-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.sector-price-factors li::before,
.sector-price-list li::before { content: "· "; color: var(--accent); }

/* --- Bölümler --- */
.sector-section { margin-bottom: 52px; }

.sector-section > h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin-bottom: 22px;
}

.sector-section > p { color: var(--text-secondary); line-height: 1.7; }

/* --- Uygulamalar --- */
.sector-apps { display: grid; gap: 14px; }

.sector-app {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sector-app-num {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}

.sector-app h3 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.sector-app p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; }

/* --- Zorluklar --- */
.sector-challenges { display: grid; gap: 22px; }

.sector-challenge {
  padding-left: 18px;
  border-left: 2px solid var(--border-strong);
}

.sector-challenge h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 7px;
  letter-spacing: -0.015em;
}

.sector-challenge p { font-size: 0.94rem; color: var(--text-secondary); line-height: 1.7; }

/* --- Entegrasyonlar --- */
.sector-integrations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 22px;
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.sector-integrations li {
  padding-left: 20px;
  position: relative;
}

.sector-integrations li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.sector-weeks { margin-top: 12px; font-size: 0.94rem; color: var(--text-secondary); }
.sector-weeks strong { color: var(--text-primary); }

/* --- CTA --- */
.sector-cta {
  border-radius: var(--radius-lg);
  background: var(--ink);
  border: 1px solid var(--ink-border);
  color: var(--ink-text);
  padding: 40px 36px;
  margin-bottom: 52px;
  text-align: center;
}

.sector-cta h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.sector-cta > p { color: var(--ink-muted); max-width: 52ch; margin: 0 auto 24px; line-height: 1.65; }

.sector-honesty {
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.85;
}

/* --- İlgili sektörler --- */
.sector-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 22px;
  margin-bottom: 18px;
}

.sector-related a,
.sector-section > p > a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.94rem;
}

.sector-related a:hover { color: var(--accent-hover); }

/* --- Hub sayfası --- */
.sector-group { margin-bottom: 48px; }

.sector-group h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.sector-grid a {
  display: block;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s var(--ease);
}

.sector-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.sector-grid strong { display: block; font-size: 0.98rem; font-weight: 700; margin-bottom: 6px; }
.sector-grid span { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 640px) {
  .sector-page { padding-top: calc(var(--header-h) + 36px); }
  .sector-price { padding: 20px; }
  .sector-cta { padding: 30px 22px; }
}

/* --- Sektörel bilgi bloğu --- */
.sector-insight > h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 28px 0 12px;
}

.sector-kpis,
.sector-mistakes {
  display: grid;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.sector-kpis li,
.sector-mistakes li {
  padding-left: 18px;
  position: relative;
}

.sector-kpis li::before,
.sector-mistakes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--border-strong);
}

.sector-mistakes li::before { background: #dc2626; }
[data-theme="dark"] .sector-mistakes li::before { background: #ef4444; }

.sector-kpis strong,
.sector-mistakes strong { color: var(--text-primary); font-weight: 650; }

/* ==========================================================================
   31. HEADER MENÜSÜ — kademeli daralma
   "Tüm sektörler" eklendikten sonra 8 öğe 1200 px'te taşıyordu (1205 > 1180).
   Dar ekranda önce Yorumlar, sonra Hakkımızda gizlenir; ikisi de mobil
   menüde durmaya devam eder, yani hiçbir bağlantı kaybolmaz.
   ========================================================================== */
/* .container max-width: 1180px olduğu için menünün alanı ekran ne kadar geniş
   olursa olsun sabittir. Kırılma noktalarını viewport'a bağlamak bu yüzden
   yanlıştı; öğe sayısını doğrudan sınırlıyoruz.

   Ölçüm (1180 px kap içinde): 8 öğe 1271 px, 7 öğe 1184 px, 6 öğe 1081 px.
   "Yorumlar" masaüstü menüsünden tamamen çıkar; mobil menüde ve footer'da kalır.
   "Hakkımızda" 1300 px altında gizlenir. */
/* Ölçüm: 8 öğe 1271 px, 7 öğe 1184 px, 6 öğe 1081 px — kap 1180 px.
   7 öğede dil seçici "İletişim"in üzerine biniyordu. Masaüstü menüsü
   6 öğeyle sınırlandı; "Hakkımızda" ve "Yorumlar" mobil menüde ve
   footer'da erişilebilir durumda kalıyor. */
.nav-hide-lg,
.nav-hide-md { display: none; }

@media (max-width: 1160px) {
  .nav-link { padding: 8px 9px; font-size: 0.875rem; }
  .header-cta { padding-inline: 14px; }
  .logo { font-size: 1.2rem; }
  .logo-mark { width: 23px; height: 23px; }
}

/* ==========================================================================
   32. LOGO — hareketli işaret, gradyan vurgu
   ========================================================================== */
.logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6 55%, #ec4899);
  background-size: 200% 200%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  animation: logoHue 9s ease-in-out infinite;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  /* Boşluk yalnızca işaret ile kelime arasında olmalı; flex gap tüm
     çocuklara uygulanıp ".app"i kelimeden koparıyordu. */
  margin-right: 9px;
  align-self: center;
}

/* İçindeki nokta — sinyal/yayın hissi */
.logo-mark i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  display: block;
  position: relative;
}

.logo-mark i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  animation: logoPing 2.8s var(--ease) infinite;
}

@keyframes logoHue {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes logoPing {
  0%        { transform: scale(0.7); opacity: 0.9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* Kelime: hover'da soldan sağa akan gradyan */
.logo-word {
  background-image: linear-gradient(
    100deg,
    var(--text-primary) 0%, var(--text-primary) 42%,
    var(--accent) 50%,
    var(--text-primary) 58%, var(--text-primary) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.75s var(--ease);
}

/* ".app" — sitenin imzası olan serif italik, gradyanla renklendirilmiş.
   Manrope 800 gövdeyle arasında bilinçli tipografik kontrast var. */
.logo-dot {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0;
  margin-left: 1px;
  background-image: linear-gradient(120deg, var(--accent), #a855f7 55%, #ec4899);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logoHue 9s ease-in-out infinite;
  transition: transform 0.4s var(--ease);
  display: inline-block;
}

.logo:hover .logo-dot { transform: translateY(-1px) rotate(-2deg); }

.logo:hover .logo-word { background-position: 0 0; }

.logo:hover .logo-mark {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 55%, transparent);
}

.logo:focus-visible .logo-mark { transform: rotate(-8deg) scale(1.08); }

/* Footer logosunda işaret yok, yalnızca gradyan vurgu */
.site-footer .logo .logo-mark { display: none; }

@media (prefers-reduced-motion: reduce) {
  .logo-mark,
  .logo-dot { animation: none; }
  .logo:hover .logo-dot { transform: none; }
  .logo-mark i::after { animation: none; opacity: 0; }
  .logo-word { transition: none; }
  .logo:hover .logo-mark { transform: none; }
}

/* ==========================================================================
   33. BÖLÜM İKONLARI — sektör sayfası başlıkları
   ========================================================================== */
.sector-section > h2,
.sector-cta h2,
.sector-insight > h3 {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sector-cta h2 { justify-content: center; }

.sector-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.sector-ico.sm {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-color: var(--border);
}

.sector-ico.sm svg { width: 16px; height: 16px; }

.sector-ico.sm.warn {
  color: #dc2626;
  background: color-mix(in srgb, #dc2626 9%, transparent);
  border-color: color-mix(in srgb, #dc2626 20%, transparent);
}

[data-theme="dark"] .sector-ico.sm.warn { color: #f87171; }

/* Koyu CTA kartında ikon açık renk olmalı */
.sector-cta .sector-ico {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 640px) {
  .sector-ico { width: 32px; height: 32px; border-radius: 9px; }
  .sector-ico svg { width: 17px; height: 17px; }
  .sector-section > h2,
  .sector-cta h2 { gap: 9px; }
}

/* ==========================================================================
   34. ZENGİNLEŞTİRME BLOKLARI
   ========================================================================== */

/* --- Özellik listesi --- */
.sector-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px 22px;
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.sector-features li {
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
}

.sector-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 16px; height: 16px;
  border-radius: 5px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.sector-features li::after {
  content: "";
  position: absolute;
  left: 5px; top: 0.52em;
  width: 6px; height: 3px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- Hedef profiller --- */
.sector-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.sector-audience li {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sector-audience h3 { font-size: 0.97rem; font-weight: 700; margin-bottom: 7px; }
.sector-audience p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

/* --- Fazlı teslim --- */
.sector-phases { display: grid; gap: 14px; counter-reset: faz; }

.sector-phases li {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sector-phase-num {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sector-phases h3 {
  font-size: 0.99rem;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}

.sector-phase-weeks {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
}

.sector-phases p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; }

/* --- Karşılaştırma tablosu --- */
.sector-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sector-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sector-table th,
.sector-table td {
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}

.sector-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom-color: var(--border-strong);
}

.sector-table thead th:last-child { color: var(--accent); }
.sector-table tbody th { font-weight: 650; width: 26%; }
.sector-table td { color: var(--text-secondary); }
.sector-table tbody tr:last-child th,
.sector-table tbody tr:last-child td { border-bottom: none; }

/* --- Sözlük --- */
.sector-glossary { display: grid; gap: 16px; }

.sector-glossary > div {
  padding-left: 18px;
  border-left: 2px solid var(--border-strong);
}

.sector-glossary dt {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.sector-glossary dd {
  font-size: 0.91rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .sector-phases li { padding: 16px; gap: 12px; }
  .sector-audience li { padding: 16px; }
}

/* ==========================================================================
   35. DİNAMİK BİLEŞENLER — içindekiler, sektör filtresi, 404 önerileri
   ========================================================================== */

/* ---------- Sayfa içi içindekiler (sektör sayfaları) ---------- */
.sector-toc {
  margin: 28px 0 40px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.sector-toc-title {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sector-toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.sector-toc li { counter-increment: toc; margin: 0; }
.sector-toc a {
  display: block;
  padding: 5px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sector-toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 9px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  opacity: 0.75;
}
.sector-toc a:hover,
.sector-toc a:focus-visible { color: var(--accent); }

/* ---------- Sektör hub filtresi ---------- */
.sector-filter { margin: 24px 0 34px; }
.sector-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 11px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: border-color 0.18s var(--ease);
}
.sector-search:focus-within { border-color: var(--accent); }
.sector-search svg { flex: none; opacity: 0.7; }
.sector-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.sector-search input::-webkit-search-cancel-button { cursor: pointer; }

.sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.sector-chip span {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.sector-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.sector-chip.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.sector-chip.is-active span { opacity: 0.8; }

.sector-empty {
  margin: 28px 0;
  padding: 18px 20px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

/* ---------- 404 önerileri ---------- */
.nf-suggest { margin: 10px 0 26px; padding-left: 18px; }
.nf-suggest li { margin: 6px 0; }
.nf-suggest a { font-weight: 600; }

@media (max-width: 600px) {
  .sector-toc { padding: 16px 16px; }
  .sector-toc ol { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sector-chip, .sector-search { transition: none; }
}